/* ========================================================================== INVESTORAMA GROUP — Design tokens Single source of truth. No raw values anywhere else in the codebase. Palette derived from the official logo SVGs: #274E9B brand blue (logo mark + "GROUP") #00307C deep blue (favicon outline) #808182 brand gray (wordmark "INVESTORAMA") #EAEAEA edge gray (favicon rim) ========================================================================== */ /* -------------------------------------------------------------------------- FONT FALLBACKS — metric-matched Objectif : quand Plus Jakarta Sans / Readex Pro arrivent depuis Google Fonts (2 RTT après le HTML), le reflow est visible ("pop" du texte). En déclarant une police fallback aux mêmes métriques (ascent/descent/size) que la police cible, on garde la même hauteur de ligne et la même largeur approximative pendant le chargement → aucun décalage visible quand la vraie police remplace la fallback. Valeurs `size-adjust` / `ascent-override` / `descent-override` / `line-gap-override` calibrées pour être plausibles ; à raffiner avec un outil dédié (screenspan.net / fontmetrics.io) si on veut du pixel-perfect. -------------------------------------------------------------------------- */ @font-face { font-family: "Jakarta Fallback"; src: local("Arial"); size-adjust: 108%; ascent-override: 91%; descent-override: 23%; line-gap-override: 0%; } @font-face { font-family: "Readex Fallback"; src: local("Tahoma"), local("Arial"); size-adjust: 94%; ascent-override: 100%; descent-override: 26%; line-gap-override: 0%; } :root { /* --------------------------------------------------------------------- 1. RAW BRAND COLORS — never used directly in components, only as anchors --------------------------------------------------------------------- */ /* colours as they appear inside the logo SVGs — reference only */ --ivr-logo-blue: #274e9b; --ivr-logo-blue-deep: #00307c; --ivr-brand-gray: #808182; --ivr-brand-edge: #eaeaea; /* --------------------------------------------------------------------- 2. BLUE RAMP — anchored on the two chosen colours: 600 = #044AB3 (main) 300 = #A2C3FF (arrow block) Brighter and more saturated than the logo blue; see note below. --------------------------------------------------------------------- */ --ivr-blue-50: #f0f6ff; --ivr-blue-100: #dbe9ff; --ivr-blue-150: #c7dbff; --ivr-blue-200: #b8d1ff; --ivr-blue-300: #a2c3ff; /* arrow block */ --ivr-blue-400: #5290f4; --ivr-blue-500: #0763ed; --ivr-blue-600: #044ab3; /* main */ --ivr-blue-700: #023e92; --ivr-blue-800: #013374; --ivr-blue-900: #022755; --ivr-blue-950: #031a35; /* --------------------------------------------------------------------- 3. NEUTRAL RAMP — blue-tinted so it sits with the brand, anchored on 500 --------------------------------------------------------------------- */ --ivr-gray-0: #ffffff; --ivr-gray-50: #f9fafb; --ivr-gray-100: #f0f2f4; --ivr-gray-150: #e5e8eb; --ivr-gray-200: #d4d9dd; --ivr-gray-300: #b1b8be; --ivr-gray-400: #969ca2; --ivr-gray-500: #808182; /* brand gray */ --ivr-gray-600: #62696f; --ivr-gray-700: #49515a; --ivr-gray-800: #323a43; --ivr-gray-900: #1f252e; --ivr-gray-950: #131820; /* --------------------------------------------------------------------- 4. SUPPORT COLORS — states only, kept low-chroma to stay corporate --------------------------------------------------------------------- */ --ivr-success: #1f7a52; --ivr-success-bg: #e8f4ee; --ivr-warning: #9a6b12; --ivr-warning-bg: #fbf2e0; --ivr-danger: #a32828; --ivr-danger-bg: #fbeaea; /* --------------------------------------------------------------------- 5. SEMANTIC TOKENS — this is what components consume --------------------------------------------------------------------- */ /* surfaces */ --ivr-surface: var(--ivr-gray-0); --ivr-surface-subtle: var(--ivr-gray-50); --ivr-surface-muted: var(--ivr-gray-100); --ivr-surface-inverse: var(--ivr-blue-900); --ivr-surface-brand: var(--ivr-blue-600); /* text */ --ivr-text: var(--ivr-blue-900); --ivr-text-muted: var(--ivr-gray-600); --ivr-text-subtle: var(--ivr-gray-500); --ivr-text-inverse: var(--ivr-gray-0); --ivr-text-inverse-muted: var(--ivr-blue-200); --ivr-text-brand: var(--ivr-blue-600); /* borders */ --ivr-border: var(--ivr-gray-200); --ivr-border-subtle: var(--ivr-gray-150); --ivr-border-strong: var(--ivr-gray-300); --ivr-border-brand: var(--ivr-blue-600); --ivr-border-inverse: rgb(255 255 255 / 0.18); /* accent (the "filet" rule on cards, active states, focus) */ --ivr-accent: var(--ivr-blue-600); --ivr-accent-hover: var(--ivr-blue-700); --ivr-accent-active: var(--ivr-blue-800); --ivr-accent-soft: var(--ivr-blue-50); --ivr-focus-ring: var(--ivr-blue-500); /* overlays — hero scrim, modals */ --ivr-overlay-scrim: linear-gradient( 180deg, rgb(2 26 59 / 0.62) 0%, rgb(2 26 59 / 0.38) 45%, rgb(2 26 59 / 0.78) 100% ); --ivr-overlay-modal: rgb(2 26 59 / 0.72); /* --------------------------------------------------------------------- 6. TYPOGRAPHY Latin: Plus Jakarta Sans (Google Fonts, variable 200..800) Arabic: Readex Pro (Google Fonts, variable 160..700) — moderne géométrique, tonalité proche de Plus Jakarta Sans côté forme. --------------------------------------------------------------------- */ --ivr-font-sans: "Plus Jakarta Sans", "Jakarta Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --ivr-font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; --ivr-font-arabic: "Readex Pro", "Readex Fallback", "Plus Jakarta Sans", "Jakarta Fallback", sans-serif; --ivr-font-heading: var(--ivr-font-sans); --ivr-font-body: var(--ivr-font-sans); /* type scale — fluid, 320px → 1440px viewport */ --ivr-text-2xs: 0.6875rem; /* 11px overline / legal */ --ivr-text-xs: 0.75rem; /* 12px captions, labels */ --ivr-text-sm: 0.875rem; /* 14px meta, form help */ --ivr-text-base: 1rem; /* 16px body */ --ivr-text-md: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem); /* 16→17 lead */ --ivr-text-lg: clamp(1.1875rem, 1.11rem + 0.38vw, 1.375rem); /* 19→22 h4 */ --ivr-text-xl: clamp(1.4375rem, 1.29rem + 0.72vw, 1.875rem); /* 23→30 h3 */ --ivr-text-2xl: clamp(1.75rem, 1.47rem + 1.4vw, 2.5rem); /* 28→40 h2 */ --ivr-text-3xl: clamp(2.125rem, 1.71rem + 2.07vw, 3.25rem); /* 34→52 h1 */ --ivr-text-4xl: clamp(2.375rem, 1.86rem + 2.6vw, 3.75rem); /* 38→60 hero */ --ivr-text-counter: clamp(2.5rem, 1.9rem + 3vw, 3.75rem); /* chiffres clés */ /* weights */ --ivr-weight-light: 300; --ivr-weight-regular: 400; --ivr-weight-medium: 500; --ivr-weight-semibold: 600; --ivr-weight-bold: 700; /* line heights */ --ivr-leading-none: 1; --ivr-leading-tight: 1.14; --ivr-leading-snug: 1.3; --ivr-leading-normal: 1.6; --ivr-leading-relaxed: 1.75; /* Letter spacing. Ces valeurs ont ete detendues au passage de Geist a Plus Jakarta Sans : Jakarta a des approches nettement plus serrees, et le -0.042em cale pour Geist faisait se toucher les lettres du hero. UI labels come back to 0 — positive tracking on a button reads as a 2010s pattern. */ --ivr-tracking-tighter: -0.028em; /* hero, counters */ --ivr-tracking-tight: -0.018em; /* headings */ --ivr-tracking-snug: -0.008em; /* lead paragraphs, card titles */ --ivr-tracking-normal: 0; /* buttons, UI */ --ivr-tracking-wide: 0.02em; --ivr-tracking-widest: 0.12em; /* overlines: "NOS MÉTIERS" */ /* measure */ --ivr-measure: 68ch; --ivr-measure-narrow: 52ch; /* --------------------------------------------------------------------- 7. SPACING — 4px base --------------------------------------------------------------------- */ --ivr-space-0: 0; --ivr-space-1: 0.25rem; --ivr-space-2: 0.5rem; --ivr-space-3: 0.75rem; --ivr-space-4: 1rem; --ivr-space-5: 1.25rem; --ivr-space-6: 1.5rem; --ivr-space-8: 2rem; --ivr-space-10: 2.5rem; --ivr-space-12: 3rem; --ivr-space-16: 4rem; --ivr-space-20: 5rem; --ivr-space-24: 6rem; --ivr-space-32: 8rem; /* vertical rhythm between sections — fluid */ --ivr-section-y: clamp(4rem, 2.5rem + 7vw, 8rem); --ivr-section-y-lg: clamp(5rem, 3rem + 9vw, 10rem); /* --------------------------------------------------------------------- 8. LAYOUT --------------------------------------------------------------------- */ --ivr-container: 1440px; --ivr-container-narrow: 920px; --ivr-container-wide: 1680px; --ivr-gutter: clamp(1.25rem, 0.9rem + 1.7vw, 2.5rem); --ivr-grid-gap: clamp(1.25rem, 0.9rem + 1.6vw, 2rem); --ivr-header-h: 84px; --ivr-header-h-scrolled: 64px; --ivr-header-h-mobile: 64px; --ivr-subnav-h: 4rem; /* --------------------------------------------------------------------- 9. RADII, BORDERS, SHADOWS --------------------------------------------------------------------- */ --ivr-radius-none: 0; --ivr-radius-sm: 2px; --ivr-radius-md: 4px; --ivr-radius-lg: 8px; --ivr-radius-xl: 14px; --ivr-radius-2xl: 24px; --ivr-radius-full: 9999px; --ivr-rule: 1px; /* hairlines */ --ivr-rule-accent: 3px; /* the brand rule on top of cards */ --ivr-shadow-xs: 0 1px 2px rgb(19 24 32 / 0.05); --ivr-shadow-sm: 0 1px 3px rgb(19 24 32 / 0.07), 0 1px 2px rgb(19 24 32 / 0.04); --ivr-shadow-md: 0 4px 12px rgb(19 24 32 / 0.08), 0 2px 4px rgb(19 24 32 / 0.04); --ivr-shadow-lg: 0 12px 32px rgb(19 24 32 / 0.10), 0 4px 8px rgb(19 24 32 / 0.05); --ivr-shadow-xl: 0 24px 56px rgb(19 24 32 / 0.14); --ivr-shadow-brand: 0 10px 30px rgb(39 78 155 / 0.22); /* --------------------------------------------------------------------- 10. MOTION --------------------------------------------------------------------- */ --ivr-ease: cubic-bezier(0.22, 0.61, 0.36, 1); --ivr-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ivr-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ivr-duration-fast: 150ms; --ivr-duration: 260ms; --ivr-duration-slow: 480ms; --ivr-duration-reveal: 800ms; /* --------------------------------------------------------------------- 11. Z-INDEX --------------------------------------------------------------------- */ --ivr-z-base: 1; --ivr-z-sticky: 100; --ivr-z-header: 200; --ivr-z-dropdown: 300; --ivr-z-drawer: 400; --ivr-z-modal: 500; --ivr-z-toast: 600; } /* ========================================================================== RTL — Arabic. Only what logical properties cannot cover. ========================================================================== */ [dir="rtl"] { --ivr-font-sans: "Readex Pro", "Readex Fallback", "Plus Jakarta Sans", "Jakarta Fallback", sans-serif; /* En arabe, on n'utilise PAS de police mono : les libellés / codes / compteurs qui utilisent --ivr-font-mono en latin réutilisent la même police que le corps de texte. C'est un choix éditorial (moins de mélange visuel) et technique (Geist Mono n'a pas de glyphes arabes, donc chaque caractère AR tomberait sur un fallback système). */ --ivr-font-mono: "Readex Pro", "Plus Jakarta Sans", sans-serif; --ivr-tracking-tight: 0; --ivr-tracking-tighter: 0; --ivr-tracking-widest: 0; /* Arabic must never be letter-spaced */ --ivr-leading-normal: 1.85; --ivr-leading-tight: 1.35; } /* ========================================================================== Reduced motion ========================================================================== */ @media (prefers-reduced-motion: reduce) { :root { --ivr-duration-fast: 1ms; --ivr-duration: 1ms; --ivr-duration-slow: 1ms; --ivr-duration-reveal: 1ms; } }