→ override local sur une section (ex. hero clair) ============================================================================ */ /* ============================================================================ Font fallback metric overrides (anti-CLS font-swap, Lot 6-B v1.6.x) ---------------------------------------------------------------------------- Aligne les métriques d'Arial sur celles d'Inter pour éliminer le layout shift au moment où Inter prend le relais sur la font système de fallback. Valeurs calibrées via @vercel/font-fallback (référence stable). ============================================================================ */ @font-face { font-family: 'Inter Fallback'; src: local('Arial'); size-adjust: 107.40%; ascent-override: 90.20%; descent-override: 22.48%; line-gap-override: 0%; } @font-face { font-family: 'JetBrains Mono Fallback'; src: local('Courier New'); size-adjust: 110%; ascent-override: 75%; descent-override: 25%; line-gap-override: 0%; } :root { /* === Couleurs primaires (invariantes selon le thème) === */ --green: #00CC66; --green-hover: #00A854; --green-light: #E6FFF2; --green-dark: #004D26; --green-glow: rgba(0, 204, 102, 0.18); /* === Charcoal scale (toujours sombre, sert d'accent en mode clair) === */ --c9: #0D1117; --c8: #1A2332; --c7: #232B3D; --logo-charcoal:#262C2E; --white: #FFFFFF; /* === Grays === */ --gray-50: #F9FAFB; --gray-100: #F3F4F6; --gray-200: #E5E7EB; --gray-300: #D1D5DB; --gray-400: #9CA3AF; --gray-500: #6B7280; --gray-600: #4B5563; --gray-700: #374151; --gray-800: #1F2937; --gray-900: #111827; /* === Sémantiques === */ --blue: #3B82F6; --amber: #F59E0B; --red: #EF4444; /* === Spacing (base 4px) === */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; /* === Border radius === */ --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-full: 9999px; /* === Typography === */ --font-sans: 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --mono: 'JetBrains Mono', 'JetBrains Mono Fallback', 'SF Mono', ui-monospace, monospace; /* === Transitions === */ --t-fast: 0.2s ease; --t-med: 0.3s cubic-bezier(0.16, 1, 0.3, 1); --t-slow: 0.4s cubic-bezier(0.16, 1, 0.3, 1); /* === Z-index === */ --z-grain: 1; --z-content: 2; --z-side-nav: 90; --z-header: 100; --z-modal: 1000; /* ========================================================================== THÈME CLAIR (par défaut) ========================================================================== */ --bg-primary: #FFFFFF; --bg-secondary: #F9FAFB; --bg-surface: #FFFFFF; --bg-elevated: #FFFFFF; --text-1: #0D1117; --text-2: #4B5563; --text-3: #6B7280; --text-4: #9CA3AF; --border: rgba(0, 0, 0, 0.08); --border-s: rgba(0, 0, 0, 0.16); --border-g: rgba(0, 204, 102, 0.32); --gradient-hero: linear-gradient(180deg, #FFFFFF 0%, #F9FAFB 100%); --gradient-accent: linear-gradient(135deg, #00CC66 0%, #00A854 100%); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.05); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.08); --grain-color: rgba(13, 17, 23, 0.04); } /* ============================================================================ THÈME SOMBRE ============================================================================ */ [data-theme="dark"] { /* color-scheme indique au navigateur d'utiliser les défauts UA sombres pour les form controls (inputs, selects, scrollbars). Sans ça, les inputs HubSpot gardent le fond blanc UA même si le reste de la page est sombre. */ color-scheme: dark; --bg-primary: #0D1117; --bg-secondary: #1A2332; --bg-surface: #1A2332; --bg-elevated: #232B3D; --text-1: #FFFFFF; --text-2: rgba(255, 255, 255, 0.72); --text-3: rgba(255, 255, 255, 0.48); --text-4: rgba(255, 255, 255, 0.28); --border: rgba(255, 255, 255, 0.08); --border-s: rgba(255, 255, 255, 0.16); --border-g: rgba(0, 204, 102, 0.32); --gradient-hero: linear-gradient(180deg, #0D1117 0%, #1A2332 100%); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35); --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.4); --grain-color: rgba(255, 255, 255, 0.025); }