/* ========================================================= DESIGN TOKENS — locked to GNM brand chart ========================================================= */ :root{ /* Palette — DO NOT EXTEND without justification */ --c-ink: #081A37; /* primary background, deepest */ --c-ink-2: #0F2A52; /* mid background */ --c-ink-3: #1A3A6B; /* hover / borders on dark */ --c-blue: #5B9BD5; /* accent secondary */ --c-blue-pale: #B4D0E8; /* lede / on-dark body */ --c-orange: #E16034; /* signature accent */ --c-bone: #F4F2EE; /* warm light bg */ --c-paper: #FFFFFF; --c-line: rgba(180,208,232,.18); /* Type */ --f-serif: "Playfair Display", Georgia, serif; --f-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; /* Rhythm — 8pt vertical */ --s-1: 8px; --s-2: 16px; --s-3: 24px; --s-4: 32px; --s-5: 48px; --s-6: 64px; --s-7: 96px; --s-8: 128px; /* Layout */ --max: 1280px; --gutter: 80px; /* Hairlines & radii — polish v3 (locked scale) */ --hair: 1px; --rad-sm: 4px; --rad-md: 8px; --rad-lg: 12px; /* Letter-spacing scale */ --ls-caps-tight: .14em; /* small caps in dense rows */ --ls-caps: .18em; /* default eyebrows */ --ls-caps-loose: .22em; /* hero strapline */ /* Opacity scale — strict (audit forbids arbitrary rgba) */ --o-mute: .55; --o-soft: .70; --o-firm: .85; /* Motion */ --ease-out: cubic-bezier(.2,.7,.2,1); --ease: cubic-bezier(.16,1,.3,1); /* spring-out, brand default */ --dur-tap: 80ms; --dur-fast: 220ms; --dur-base: 600ms; --t-rotator: 6000ms; /* P1.8 — was 2600ms; see MOTION_SPEC.md */ } /* ========================================================= RESET & BASE ========================================================= */ *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; } /* m0360 — iOS polish : pas de flash bleu sur tap, pas de surbrillance de sélection sur UI */ html{ -webkit-tap-highlight-color:transparent; } button, a, [role="button"]{ -webkit-tap-highlight-color:transparent; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *,*::before,*::after{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; } } body{ margin:0; font:400 16px/1.55 var(--f-sans); color:var(--c-paper); background:var(--c-ink); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; font-feature-settings:"kern" 1, "liga" 1, "calt" 1, "ss01" 1; } img,svg{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } button{ font:inherit; cursor:pointer; border:0; background:none; color:inherit; } /* Selection — brand-aligned */ ::selection{ background:var(--c-ink-3); color:#fff; } /* Numerics: tabular lining figures wherever digits live in tables/stats */ .num{ font-feature-settings:"tnum" 1, "lnum" 1; font-variant-numeric: tabular-nums lining-nums; } /* Visually hidden — for screen readers only */ .visually-hidden{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } /* P0.7 — Skip link */ .skip-link{ position:absolute; left:-9999px; top:0; background:var(--c-ink); color:#fff; padding:.75rem 1rem; z-index:9999; font:500 14px/1.2 var(--f-sans); border-bottom:2px solid var(--c-orange); } .skip-link:focus{ left:1rem; top:1rem; } /* P1.13 — Focus visible everywhere */ :focus{ outline:none; } :focus-visible{ outline:2px solid var(--c-orange); outline-offset:3px; border-radius:var(--rad-sm); } /* ========================================================= LAYOUT PRIMITIVES ========================================================= */ .wrap{ max-width:var(--max); margin:0 auto; padding:0 var(--gutter); } @media (max-width:900px){ :root{ --gutter:40px; } } @media (max-width:560px){ :root{ --gutter:20px; } } /* Strapline — orange dot + hairline + tracked caps */ .eyebrow{ display:flex; align-items:center; gap:12px; font:500 12px/1 var(--f-sans); letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--c-blue-pale); margin:0 0 var(--s-3); } .eyebrow::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--c-orange); flex:0 0 6px; } .eyebrow--hairline::after{ content:""; flex:1; height:var(--hair); background:var(--c-line); max-width:120px; } /* ========================================================= BUTTONS ========================================================= */ .btn{ display:inline-flex; align-items:center; gap:10px; min-height:48px; padding:14px 22px; /* WCAG 2.5.5 ≥ 44px */ font:600 15px/1 var(--f-sans); letter-spacing:.01em; border:1px solid transparent; border-radius:var(--rad-sm); transition:background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); will-change:transform; } .btn:active{ transform:translateY(0)!important; transition-duration:var(--dur-tap); } .btn:focus-visible{ outline:2px solid var(--c-orange); outline-offset:3px; } .btn--primary{ background:var(--c-orange); /* P0.8 — #081A37 on #E16034 ≈ 4.4:1 (AA large only — see a11y notes) */ color:var(--c-ink); } .btn--primary:hover{ background:var(--c-orange); /* Bain pattern: white wash + halo, no darken (preserves brand orange depth) */ box-shadow: inset 0 0 0 100vmax rgba(255,255,255,.08), 0 8px 24px -8px rgba(225,96,52,.45); transform:translateY(-1px); } .btn--primary:focus-visible{ outline-color:#fff; outline-offset:3px; } .btn--ghost{ background:transparent; border-color:rgba(255,255,255,.3); color:#fff; } .btn--ghost:hover{ background:rgba(255,255,255,.06); border-color:#fff; transform:translateY(-1px); } .btn--ghost-dark{ background:transparent; border-color:rgba(8,26,55,.2); color:var(--c-ink); } .btn--ghost-dark:hover{ background:rgba(8,26,55,.04); border-color:var(--c-ink); transform:translateY(-1px); } .btn--lg{ min-height:56px; padding:18px 28px; font-size:16px; } .btn .arr{ transition:transform var(--dur-fast) var(--ease); } .btn:hover .arr{ transform:translateX(4px); } /* ========================================================= HEADER ========================================================= */ body.admin-bar{ --wp-admin-bar-offset:32px; } @media (max-width:782px){ body.admin-bar{ --wp-admin-bar-offset:46px; } } .site-header{ position:sticky; top:var(--wp-admin-bar-offset, 0px); z-index:100; background:var(--c-ink); border-bottom:1px solid var(--c-line); /* m0360 — safe-area iPhone 14+ : padding latéral en landscape (notch/Dynamic Island) */ padding-left:env(safe-area-inset-left); padding-right:env(safe-area-inset-right); transition:background .35s var(--ease-out), border-color .35s var(--ease-out), backdrop-filter .35s var(--ease-out); } /* On scroll: subtle blur + slightly more transparent navy. The scrolled state is reserved for after the user has cleared the hero so the orange CTA never sits on a translucent stack at first paint (the m0238 risk). */ .site-header.is-scrolled{ background:rgba(8,26,55,.82); backdrop-filter:blur(14px) saturate(1.15); -webkit-backdrop-filter:blur(14px) saturate(1.15); border-bottom-color:rgba(255,255,255,.08); } .site-header__inner{ display:flex; align-items:center; gap:var(--s-5); height:72px; transition:height .35s var(--ease-out); } .site-header.is-scrolled .site-header__inner{ height:64px; } .site-header__logo img{ height:44px; width:auto; display:block; transition:height .35s var(--ease-out); } .site-header.is-scrolled .site-header__logo img{ height:38px; } .nav{ display:flex; gap:var(--s-4); list-style:none; margin:0 0 0 var(--s-4); padding:0; } .nav a{ font:500 14px/1 var(--f-sans); letter-spacing:.012em; color:rgba(255,255,255,.78); padding:8px 4px; position:relative; transition:color .2s var(--ease-out); } .nav a:hover{ color:#fff; } .nav a:focus-visible{ outline:2px solid var(--c-orange); outline-offset:4px; border-radius:2px; } /* Animated underline on hover (scaleX from center). Current page gets the underline persistent. */ .nav a::after{ content:""; position:absolute; left:4px; right:4px; bottom:0; height:1.5px; background:var(--c-orange); transform:scaleX(0); transform-origin:50% 50%; transition:transform .28s var(--ease-out); } .nav a:hover::after, .nav a:focus-visible::after, .nav a[aria-current="page"]::after{ transform:scaleX(1); } .nav a[aria-current="page"]{ color:#fff; } .site-header__actions{ margin-left:auto; display:flex; align-items:center; gap:var(--s-3); } .lang-switcher{ display:flex; align-items:center; gap:0; margin-right:2px; } .lang-switcher a{ position:relative; display:inline-flex; align-items:center; min-height:36px; padding:8px 11px; font:600 12px/1 var(--f-sans); letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.72); transition:color .2s var(--ease-out); } .lang-switcher a:hover{ color:#fff; } .lang-switcher a:focus-visible{ outline:2px solid var(--c-orange); outline-offset:4px; border-radius:2px; } .lang-switcher a::after{ content:""; position:absolute; left:11px; right:11px; bottom:6px; height:1.5px; background:var(--c-orange); transform:scaleX(0); transform-origin:50% 50%; transition:transform .28s var(--ease-out); } .lang-switcher a:hover::after, .lang-switcher a:focus-visible::after{ transform:scaleX(1); } .lang-switcher a:not(:last-child)::before{ content:""; position:absolute; top:50%; right:0; width:1px; height:12px; background:rgba(255,255,255,.22); transform:translateY(-50%); pointer-events:none; } .lang-switcher span[aria-current]{ display:none; } .lang-switcher a:has(+ span[aria-current])::before{ display:none; } .site-header__login{ font:500 14px/1 var(--f-sans); color:rgba(255,255,255,.85); padding:8px 4px; } .site-header__login:hover{ color:#fff; } /* ========================================================= MOBILE NAV — hamburger + right drawer (≤900px) ========================================================= */ .nav-toggle{ display:none; width:44px; height:44px; flex-direction:column; justify-content:center; align-items:center; gap:5px; background:transparent; border:0; padding:0; cursor:pointer; } .nav-toggle__bar{ display:block; width:22px; height:1.6px; background:#fff; border-radius:1px; transition:transform .3s var(--ease-out), opacity .2s var(--ease-out); } .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1){ transform:translateY(6.6px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2){ opacity:0; } .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3){ transform:translateY(-6.6px) rotate(-45deg); } .nav-toggle:focus-visible{ outline:2px solid var(--c-orange); outline-offset:3px; border-radius:4px; } .nav-drawer{ position:fixed; inset:0; z-index:200; pointer-events:none; visibility:hidden; } .nav-drawer.is-open{ pointer-events:auto; visibility:visible; } .nav-drawer__backdrop{ position:absolute; inset:0; background:rgba(8,26,55,.55); opacity:0; transition:opacity .28s var(--ease-out); } .nav-drawer.is-open .nav-drawer__backdrop{ opacity:1; } .nav-drawer__panel{ position:absolute; top:var(--wp-admin-bar-offset, 0px); right:0; bottom:0; width:min(80vw, 360px); background:var(--c-ink); border-left:1px solid rgba(255,255,255,.08); padding:var(--s-5) var(--s-4) var(--s-4); display:flex; flex-direction:column; transform:translateX(100%); transition:transform .32s var(--ease-out); box-shadow:-24px 0 60px rgba(0,0,0,.35); } .nav-drawer.is-open .nav-drawer__panel{ transform:translateX(0); } .nav-drawer__close{ align-self:flex-end; width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; color:rgba(255,255,255,.85); background:transparent; border:0; border-radius:4px; cursor:pointer; } .nav-drawer__close:hover{ color:#fff; } .nav-drawer__close:focus-visible{ outline:2px solid var(--c-orange); outline-offset:2px; } .nav-drawer__list{ list-style:none; padding:0; margin:var(--s-4) 0 0; display:flex; flex-direction:column; gap:4px; } .nav-drawer__list a{ display:block; font:500 18px/1 var(--f-sans); letter-spacing:.005em; color:rgba(255,255,255,.88); padding:14px 8px; border-bottom:1px solid rgba(255,255,255,.06); min-height:44px; } .nav-drawer__list a:hover{ color:#fff; } .nav-drawer__list a:focus-visible{ outline:2px solid var(--c-orange); outline-offset:2px; border-radius:2px; } .nav-drawer__cta{ margin-top:auto; padding-top:var(--s-4); } .nav-drawer__cta .btn{ width:100%; justify-content:center; } @media (max-width:900px){ .nav{ display:none; } .lang-switcher{ display:none; } .nav-toggle{ display:flex; } .site-header__actions .btn{ display:none; } /* CTA lives in drawer on mobile */ .site-header__inner{ height:64px; } .site-header__logo img{ height:38px; } .site-header.is-scrolled .site-header__inner{ height:56px; } .site-header.is-scrolled .site-header__logo img{ height:32px; } } /* TODO P2: language switcher EN / FR / JA */ /* TODO P2: search icon (only when Insights section ships) */ /* ========================================================= HERO — full-bleed fullscreen, Palantir-style ========================================================= */ .hero{ position:relative; background:var(--c-ink); /* m0360 — fallback vh + dvh moderne (iOS 16+, Android Chrome 108+) : évite le saut de hauteur quand la barre URL Safari se rétracte. */ min-height: clamp(620px, 92vh, 920px); min-height: clamp(620px, 92dvh, 920px); display:flex; align-items:center; overflow:hidden; isolation:isolate; } .hero__bg{ position:absolute; inset:0; z-index:0; overflow:hidden; } .hero__bg img, .hero__bg video{ position:absolute; inset:0; width:100%; height:100%; min-width:100%; min-height:100%; object-fit:cover; object-position:70% center; display:block; filter: saturate(.92) contrast(1.06) brightness(.86); } .hero__bg::after{ content:""; position:absolute; inset:0; background: linear-gradient(95deg, rgba(8,26,55,.92) 0%, rgba(8,26,55,.7) 35%, rgba(8,26,55,.25) 60%, rgba(8,26,55,0) 78%), linear-gradient(180deg, rgba(8,26,55,.15) 0%, rgba(8,26,55,.45) 100%); pointer-events:none; } .hero__inner{ position:relative; z-index:1; display:block; padding:var(--s-7) 0; max-width:62ch; } .hero__strapline{ display:flex; align-items:center; gap:14px; /* design judgement — eyebrow ratio strapline/H1 ≈ 1:5–1:6 (sweet spot caps tracked vs display italic); a 1:2 ratio would compete with the H1, not the brief for an eyebrow. */ font:500 clamp(13px, 0.35vw + 11.5px, 15px)/1 var(--f-sans); font-feature-settings:"liga" 1, "kern" 1; letter-spacing:var(--ls-caps-loose); text-transform:uppercase; color:var(--c-blue-pale); margin:0 0 var(--s-5); } .hero__strapline::before{ content:""; width:40px; height:1px; background:var(--c-line); } .hero__strapline .dot{ width:6px; height:6px; border-radius:50%; background:var(--c-orange); display:inline-block; margin-right:4px; } /* P1.1 — single H1, three-tier hierarchy. Kicker + title form a visual couplet (tight margin); lede sits apart. */ /* m0410 — Kicker strapline barrée (remplace la variante --quote). Pattern : ─── LABEL CAPS Texte estompé. Cohérent avec les eyebrows de section. Pas de box, pas de quotes. Le contraste avec le H1 blanc plein devient le moteur principal. */ .hero__kicker--strap{ display:flex; align-items:baseline; gap:18px; /* m0428 — gap +4px : respiration entre label et citation */ flex-wrap:wrap; max-width:none; margin:0 0 22px; /* m0428 — margin-bottom +4px : aération vers H1 */ font:400 clamp(16px,1.3vw,19px)/1.45 var(--f-sans); letter-spacing:-.005em; } .hero__kicker-label{ position:relative; display:inline-flex; align-items:center; gap:14px; /* m0428 — trait↔texte +2px */ flex:none; padding-left:44px; /* m0428 — trait allongé → plus de padding */ font:600 13px/1 var(--f-sans); /* m0428 — 11→13px : harmonie verticale avec le serif 17-21px */ letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--c-orange); } .hero__kicker-label::before{ content:""; position:absolute; left:0; top:50%; width:32px; /* m0428 — trait 24→32px : signature plus assumée */ height:1px; background:var(--c-orange); transform:translateY(-50%); } .hero__kicker-text{ font:400 clamp(17px,1.4vw,21px)/1.45 var(--f-serif); color:rgba(255,255,255,.6); /* m0428 — .55→.60 : légère montée pour équilibrer avec label remonté */ letter-spacing:.005em; font-style:normal; } .hero__kicker{ font:400 clamp(20px,2vw,28px)/1.4 var(--f-sans); color:var(--c-blue-pale); max-width:28ch; margin:0 0 12px; letter-spacing:-.01em; text-wrap:balance; } .hero__title{ /* Audit italique m0252 — H1 en romain ; seul le "beyond Rx data" porte l'emphase. */ font:400 clamp(48px,6.4vw,86px)/1.02 var(--f-serif); color:#fff; letter-spacing:-.012em; margin:0 0 var(--s-4); text-wrap:balance; /* Hanging punctuation: opening curly quote sits in the margin, so glyph optical edge aligns with the rest of the copy block. */ hanging-punctuation:first last; } .hero__lede{ /* m0252 — bumped from clamp(16,…,20) to clamp(18,…,24). Ratio H1/lede passes from ~4.3:1 to ~3.6:1 (better editorial balance) while staying clearly under the kicker (clamp 20–26). */ font:400 clamp(18px, 0.5vw + 16px, 24px)/1.55 var(--f-sans); color:var(--c-blue-pale); max-width:42ch; margin:0 0 var(--s-5); } .hero__lede em{ font-style:italic; color:#fff; font-family:var(--f-serif); font-weight:600; } /* ========================================================= m0124b — Hero signal embedded in the H1. The orange pulsing dot replaces the visual "tittle" of the first "i" in "intelligence" — making the GNM signal part of the wordmark itself instead of a floating decoration above it. Same pulse keyframe (qsup-map-pulse) as the world-map dots and the section eyebrows : true visual rhythm consistency. Strategy : we wrap "intelligence" in a span ; an ::after on that span paints the orange dot at em-relative coordinates that align with the i-tittle in Playfair Display. We do NOT try to hide the natural tittle (font-fragile) — the orange dot simply lands ON TOP of it, drop-shadow giving it lift. Em units make it scale with the H1's clamp(48px,6.4vw,86px). ========================================================= */ .hero__title-i-host{ position: relative; display: inline; } .hero__title-i-host::after{ content: ""; position: absolute; /* Playfair Display : first glyph "i", left edge of the host span. Tittle sits ~.05em from left, ~.05em from the top of the cap line. Dot diameter .12em — slightly larger than the natural tittle so the orange one fully covers it. */ /* m0125h — dot lowered to clear ascender of preceding line. Was top:.04em (touched 'be' descender at line-wrap). Now .14em — sits where Playfair's natural i-tittle lives, not above it. */ left: .05em; top: .14em; width: .12em; height: .12em; border-radius: 50%; background: var(--c-orange); box-shadow: 0 0 0 .03em rgba(8,26,55,.20); } .hero__title-i-host::before{ /* Pulsed halo — exact same keyframe + duration as the map dots. */ content: ""; position: absolute; left: .05em; top: .14em; width: .12em; height: .12em; border-radius: 50%; border: 1px solid var(--c-orange); animation: qsup-map-pulse 2.4s var(--ease-out) infinite; pointer-events: none; } @media (prefers-reduced-motion: reduce){ .hero__title-i-host::before{ animation: none; opacity: .35; } } /* ========================================================= Hero word rotator (komtur-style) — m0252 The word at the end of the lede cycles through 3 promises: visibility → intelligence → activation, every ~2.4s. - Pure CSS keyframes (zero JS, compositor-only). - Each word slides up + fades during a 600ms transition window; the rest of the cycle the word sits still (1800ms hold). - Wrapper width auto-fits the widest word ("intelligence") so the line never reflows. Inline-block + min-width via the widest word rendered ::before invisibly is overkill here — we set min-width manually based on "intelligence" metrics. - Italic + serif + orange = same emphasis treatment as the previous strategic advantage, audit-compliant (single emphasized expression in the lede). ========================================================= */ .hero__rotator{ /* Inline grid stacks all words in the same cell so the wrapper takes the natural text height and shares the surrounding line's baseline. No absolute positioning, no manual baseline math. */ display:inline-grid; grid-template-areas:"word"; vertical-align:baseline; /* Reserve horizontal space for the longest word ("intelligence"). */ min-width:8.4em; } .hero__rotator-word{ grid-area:word; white-space:nowrap; font-style:italic; font-family:var(--f-serif); font-weight:600; color:var(--c-orange); /* Initial state: below + invisible. Keyframes drive the cycle. */ opacity:0; transform:translateY(0.6em); animation:hero-rotator 7.2s cubic-bezier(.22,.61,.36,1) infinite; } /* Stagger so each word holds the stage in turn (3 words × 2.4s = 7.2s loop). */ .hero__rotator-word:nth-child(1){ animation-delay: 0s; } .hero__rotator-word:nth-child(2){ animation-delay: 2.4s; } .hero__rotator-word:nth-child(3){ animation-delay: 4.8s; } @keyframes hero-rotator{ /* 0–8% : entry (0 → visible, slides from +0.6em to 0) 8–33% : hold (fully visible, still) 33–42% : exit (slides from 0 to -0.6em + fade out) 42–100%: off-stage (invisible) */ 0% { opacity:0; transform:translateY(0.6em); } 8% { opacity:1; transform:translateY(0); } 33% { opacity:1; transform:translateY(0); } 42% { opacity:0; transform:translateY(-0.6em); } 100% { opacity:0; transform:translateY(-0.6em); } } @media (prefers-reduced-motion: reduce){ /* Show only the first word, no animation — accessibility-first. */ .hero__rotator-word{ animation:none; } .hero__rotator-word:nth-child(1){ opacity:1; transform:translateY(0); } } .hero__cta-row{ display:flex; gap:var(--s-2); flex-wrap:wrap; } /* Hero strapline + kicker + lede — dark hero overrides */ .hero .hero__strapline{ color:rgba(255,255,255,.78); } .hero .hero__strapline::before{ background:rgba(255,255,255,.30); } .hero .hero__kicker{ color:rgba(255,255,255,.72); } .hero .hero__title{ color:#fff; } .hero .hero__lede{ color:rgba(255,255,255,.85); } .hero .hero__lede em{ color:var(--c-orange); font-style:italic; font-family:var(--f-serif); font-weight:600; } .hero .btn--ghost{ color:#fff; border-color:rgba(255,255,255,.32); } .hero .btn--ghost:hover{ background:rgba(255,255,255,.08); border-color:#fff; } /* m0218 — was: position:absolute right/bottom on its own. Now: static inside .hero-scroll-prompt which owns positioning. */ .hero__corner{ display:flex; align-items:center; gap:12px; font:500 10px/1 var(--f-sans); letter-spacing:var(--ls-caps-loose); text-transform:uppercase; color:rgba(255,255,255,.85); } .hero__corner::before{ content:""; width:36px; height:1px; background:var(--c-orange); } .hero__corner .dot{ width:6px; height:6px; border-radius:50%; background:var(--c-orange); box-shadow:0 0 0 3px rgba(225,96,52,.25); } @media (max-width:900px){ .hero{ min-height:80vh; min-height:80dvh; align-items:flex-start; } .hero__inner{ padding:clamp(120px, 18vh, 168px) 18px clamp(72px, 12vh, 112px); max-width:48ch; } .hero__title{ margin:0 0 clamp(28px, 7vw, 44px); padding-right:clamp(8px, 4vw, 28px); } /* m0360 — spécificité augmentée pour gagner contre `.hero-scroll-prompt{display:flex}` déclaré plus bas */ .hero .hero-scroll-prompt{ display:none; } } /* ========================================================= m0218 — HERO SCROLL PROMPT Pattern Palantir adapté à la signature GNM : reprise du badge "1.5M signals" avec hairline orange + dot, ajout d'un chevron animé descendant + label "Scroll". - Centré horizontalement (équilibre visuel sur hero 16/9 dataviz) - bottom: 32px (var(--s-5)) — respiration constante - Cliquable: scroll vers section #trust suivante - Disparaît dès scrollY > 80px (avant que l'utilisateur quitte le hero) - Bloc supprimable en une seule édition (HTML + ce bloc CSS + JS init). ========================================================= */ .hero-scroll-prompt{ position:absolute; left:50%; bottom:var(--s-5); transform:translateX(-50%); z-index:2; display:flex; flex-direction:column; align-items:center; gap:8px; /* gap inter-éléments (16px badge↔chevron, 8px chevron↔label) */ text-decoration:none; cursor:pointer; /* fade-out au scroll : ces vars contrôlent l'état "hidden" */ opacity:1; transform:translateX(-50%) translateY(0); transition:opacity .4s cubic-bezier(.16,1,.3,1), transform .4s cubic-bezier(.16,1,.3,1); } .hero-scroll-prompt[data-hidden="true"]{ opacity:0; transform:translateX(-50%) translateY(8px); pointer-events:none; } .hero-scroll-prompt .hero__corner{ /* override gap: 16px entre badge et chevron (cf. spec). */ margin-bottom:8px; } .hero-scroll-prompt__chevron{ display:block; /* bounce sinusoïdal naturel : 0 → 6px → 0, pause 200ms entre cycles (clés à 0/50/70/100% = 1800ms total dont 360ms pause finale). transform-only → compositor-friendly, 0 reflow. */ animation:hero-scroll-bounce 1800ms cubic-bezier(.4,0,.6,1) infinite; } .hero-scroll-prompt__label{ font:500 10px/1 var(--f-sans); /* m0360 — token --ls-caps au lieu de .18em en dur */ letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--c-blue-pale); /* sky-300 visuel sur fond ink, lisibilité ≥ 4.5:1 */ } @keyframes hero-scroll-bounce{ 0% { transform:translateY(0); } 50% { transform:translateY(6px); } 70% { transform:translateY(0); } 100% { transform:translateY(0); } } @media (prefers-reduced-motion: reduce){ .hero-scroll-prompt__chevron{ animation:none; } /* on conserve la transition opacity au scroll : pas une animation cyclique */ } @media (max-width:560px){ .hero__inner{ padding:112px 22px 76px; } .hero__title{ margin-bottom:32px; padding-right:10px; } /* clamp() handles strapline scaling — no fixed 10px override (illegible at caps+tracked). */ .hero__kicker{ font-size:18px; } /* m0410 — kicker strapline : label sur sa propre ligne en mobile pour respiration */ .hero__kicker--strap{ gap:8px; font-size:15px; } .hero__kicker--strap .hero__kicker-label{ flex-basis:100%; } } /* ========================================================= TRUST BAR — m0244 logo carousel (replaces wordmark grid) ========================================================= */ .trust{ background:#fff; color:var(--c-ink); padding:var(--s-6) 0 var(--s-7); border-top:1px solid rgba(8,26,55,.06); border-bottom:1px solid rgba(8,26,55,.06); } .trust__eyebrow{ text-align:center; font:500 11px/1 var(--f-sans); letter-spacing:var(--ls-caps-loose); text-transform:uppercase; color:rgba(8,26,55,.55); margin:0 0 var(--s-5); } /* Defile container — full-bleed, edge masks for graceful in/out */ .trust__defile{ position:relative; overflow:hidden; background:#fff; -webkit-mask-image:linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); mask-image:linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); } .trust__track{ display:flex; align-items:center; gap:clamp(28px, 3.5vw, 56px); width:max-content; animation:trust-scroll 88s linear infinite; will-change:transform; } .trust__defile:hover .trust__track, .trust__defile:focus-within .trust__track{ animation-play-state:paused; } .trust__logo{ flex:0 0 auto; width:clamp(240px, 20vw, 330px); height:auto; display:block; object-fit:contain; filter:none; opacity:1; transition:transform var(--dur-fast) var(--ease); } .trust__logo:hover, .trust__logo:focus{ transform:translateY(-1px); } @keyframes trust-scroll{ from { transform:translateX(0); } /* track contains set × 2 — half = one full cycle, perfect loop */ to { transform:translateX(-50%); } } @media (prefers-reduced-motion: reduce){ .trust__track{ animation:none; flex-wrap:wrap; justify-content:center; gap:var(--s-5); width:auto; } .trust__defile{ -webkit-mask-image:none; mask-image:none; } } @media (max-width:900px){ .trust__logo{ width:clamp(180px, 52vw, 240px); } .trust__track{ gap:clamp(22px, 6vw, 36px); } } /* ========================================================= IMAGINE YOU CAN ========================================================= */ .imagine{ background: radial-gradient(120% 80% at 30% 30%, #1A3A6B 0%, #0F2A52 40%, #081A37 100%); padding:var(--s-8) 0; } .imagine__grid{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(32px, 4vw, 72px); align-items:stretch; } .imagine__viz{ margin:0; position:relative; overflow:hidden; background:var(--c-ink); border:1px solid rgba(180,208,232,.10); isolation:isolate; min-height:100%; align-self:stretch; } .imagine__viz video, .imagine__viz img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; display:block; filter:saturate(.92) contrast(1.04); } .imagine__viz::after{ content:""; position:absolute; inset:0; z-index:1; background: linear-gradient(180deg, rgba(8,26,55,0) 55%, rgba(8,26,55,.55) 100%), radial-gradient(120% 80% at 50% 0%, rgba(8,26,55,0) 60%, rgba(8,26,55,.35) 100%); pointer-events:none; } .imagine__viz-label{ position:absolute; left:20px; bottom:18px; z-index:2; display:inline-flex; align-items:center; gap:10px; font:500 10px/1 var(--f-sans); letter-spacing:var(--ls-caps-loose); text-transform:uppercase; color:rgba(255,255,255,.92); } .imagine__viz-label::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--c-orange); box-shadow:0 0 0 3px rgba(225,96,52,.22); } @media (prefers-reduced-motion: reduce){ .imagine__viz video{ display:none; } } .section-title{ /* Audit italique m0252 — titres de section en romain. Aucune emphase nécessaire ici. */ font:400 clamp(36px,4vw,56px)/1.1 var(--f-serif); color:#fff; letter-spacing:-.005em; margin:0 0 var(--s-5); max-width:18ch; } /* Legacy modifier — kept for backwards-compat with HTML using --light; the default weight is now 400 so this is a no-op but harmless. */ .section-title--light{ font-weight:400; letter-spacing:-.005em; } .imagine__lede{ /* m0479 — petite lede au-dessus du H2. Ton éditorial sentence case, même ton que les eyebrows mais en romain serif italique pour suggérer "promesse" plutôt que "label". */ margin: 0 0 var(--s-2); font: italic 400 clamp(16px, 1vw + 10px, 20px)/1.4 var(--f-serif); color: rgba(255,255,255,.65); max-width: 32ch; letter-spacing: .002em; } .imagine__eyebrow{ display:inline-flex; align-items:center; gap:10px; margin:0 0 var(--s-3); font:500 11px/1 var(--f-sans); letter-spacing:var(--ls-caps-loose); text-transform:uppercase; color:rgba(255,255,255,.62); } .imagine__eyebrow-dot{ width:6px; height:6px; border-radius:50%; background:var(--c-orange); box-shadow:0 0 0 3px rgba(225,96,52,.18); } .imagine__body{ padding-top:0; display:flex; flex-direction:column; } .imagine__title{ /* m0479 — H2 long ; on relâche max-width pour ne pas couper "markets". */ max-width: 22ch; margin:0 0 clamp(20px, 2.4vw, 36px); font:400 clamp(30px, 2.6vw + 8px, 44px)/1.1 var(--f-serif); } .imagine__list{ list-style:none; padding:0; margin:0; counter-reset:imagine; } .imagine__list > li{ display:grid; grid-template-columns:48px 1fr; gap:var(--s-3); padding:clamp(14px, 1.6vw, 20px) 0; border-top:1px solid rgba(180,208,232,.14); align-items:start; position:relative; transition:padding-left .35s ease; } .imagine__list > li::before{ content:""; position:absolute; left:0; top:-1px; height:1px; width:0; background:var(--c-orange); transition:width .5s cubic-bezier(.2,.7,.2,1); } .imagine__list > li:hover::before{ width:48px; } .imagine__list > li:last-child{ border-bottom:1px solid rgba(180,208,232,.14); } .imagine__num{ /* Audit italique m0252 — numéros de liste en romain serif (chiffres ne portent pas d'emphase). */ font:400 12px/1 var(--f-serif); color:rgba(180,208,232,.50); padding-top:6px; letter-spacing:.04em; } .imagine__item{ min-width:0; } .imagine__item-title{ margin:0 0 4px; font:600 15px/1.4 var(--f-sans); color:#fff; letter-spacing:-.002em; } .imagine__item-body{ margin:0; font:400 14px/1.6 var(--f-sans); color:rgba(180,208,232,.78); max-width:54ch; } /* Legacy — kept in case other instances of .imagine__list p exist */ .imagine__list p{ margin:0; font:400 16px/1.65 var(--f-sans); color:var(--c-blue-pale); max-width:60ch; } .imagine__list p strong{ display: block; font-weight: 600; color: #fff; letter-spacing: -.002em; margin-bottom: 6px; } @media (max-width:900px){ .imagine__grid{ grid-template-columns:1fr; gap:var(--s-5); align-items:start; } .imagine__viz{ aspect-ratio:4/3; min-height:0; } .imagine__list > li{ grid-template-columns:40px 1fr; } } /* HUMAN STAKES CSS — purged (R4, m0146). Section moved to /insights. */ /* ========================================================= PULL QUOTE ========================================================= */ .pullquote{ background:var(--c-bone); color:var(--c-ink); padding:var(--s-8) 0; } .pullquote__inner{ display:grid; grid-template-columns: 240px 1fr; gap:var(--s-6); align-items:start; margin:0; } @media (max-width:700px){ .pullquote__inner{ grid-template-columns:1fr; gap:var(--s-4); } } .pullquote__portrait{ width:240px; height:300px; background:linear-gradient(160deg, #5B9BD5 0%, #1A3A6B 60%, #081A37 100%); position:relative; overflow:hidden; } .pullquote__portrait::after{ content:""; position:absolute; inset:0; background:radial-gradient(120% 80% at 30% 20%, rgba(255,255,255,.18), transparent 60%); } .pullquote__body{ max-width:48ch; } .pullquote__qmark{ /* Audit italique m0252 — glyphe décoratif seul, romain suffit. */ font:700 56px/1 var(--f-serif); color:var(--c-orange); display:block; margin-bottom:var(--s-2); } .pullquote__body blockquote{ margin:0; font:italic 500 clamp(22px,2.4vw,30px)/1.35 var(--f-serif); color:var(--c-ink); letter-spacing:-.005em; } .pullquote__body blockquote p{ margin:0; } .pullquote__body footer{ display:flex; align-items:center; gap:12px; margin-top:var(--s-4); font:400 13px/1.4 var(--f-sans); color:rgba(8,26,55,.6); } .pullquote__body footer cite{ font-style:normal; font-weight:600; color:var(--c-ink); } .pullquote__body footer .sep{ flex:1; height:1px; background:rgba(8,26,55,.12); max-width:80px; } /* ========================================================= QUANTIFIABLE SUPERIORITY ========================================================= */ .qsup{ /* m0125 — vertical padding tightened (128→80px) for a denser rhythm autour de la carte. La hairline top + bottom reste. QA m0125k — 80px en dur → token --s-7 (96 desktop) / --s-6 (64 mobile). Aligned on 8pt grid scale ; mobile cap evite l'air vide en portrait. */ background:var(--c-bone); color:var(--c-ink); padding: var(--s-7) 0; border-top:1px solid rgba(8,26,55,.08); } @media (max-width: 900px){ /* QA m0125k — mobile : 96→64px. Garde le rythme sans gaspiller le viewport. */ .qsup{ padding: var(--s-6) 0; } } .qsup__head{ display:grid; /* m0367 — refonte : 5fr/7fr (titre droite domine), align top pour que l'eyebrow gauche et le H2 droite démarrent sur la même baseline. Avant : 1fr/2fr + align-items:end (le H2 flottait seul à droite, ratio rempli/vide ≈ 35/65). */ grid-template-columns:5fr 7fr; gap:var(--s-7); align-items:start; margin-bottom:var(--s-6); } /* m0367 — Stack vertical dans chaque colonne du qsup__head. Gauche : eyebrow + stat 20+yrs ; Droite : H2 + lede. */ .qsup__head-left{ display:flex; flex-direction:column; gap:var(--s-4); } .qsup__head-right{ display:flex; flex-direction:column; } /* m0367 — La stat 20+yrs intégrée au header ne porte plus le margin block-end du moat-stat standalone. */ .qsup__head-stat{ margin-top:var(--s-2); } .qsup__eyebrow{ font:500 11px/1 var(--f-sans); letter-spacing:var(--ls-caps); text-transform:uppercase; color:rgba(8,26,55,.5); margin:0; } /* m0260 — Eyebrow signature variant. Pattern réutilisé du label vidéo "BEYOND THE VISIBLE" : dot orange (6×6 rounded) + caps Inter + couleur ink (vs grey). Crée un système de signature visuelle GNM cohérent à travers la page. */ .qsup__eyebrow--signature{ display:inline-flex; align-items:center; gap:10px; font-size:12px; /* m0360 — aligné sur --ls-caps (.18em), cohérence avec les autres micro-eyebrows internes */ letter-spacing:var(--ls-caps); color:var(--c-ink); } .qsup__eyebrow-dot{ width:6px; height:6px; border-radius:50%; background:var(--c-orange); flex-shrink:0; } .qsup__title{ font:400 clamp(56px,7vw,96px)/1 var(--f-serif); color:var(--c-ink); margin:0; letter-spacing:-.018em; } /* m0367 — Lede sous le H2 Conviction Intelligence. Comble le vide à droite du bloc qsup__head. Pose la catégorie en 2 lignes courtes sans dupliquer la définition formelle qui vit dans la matrice .qsup__positioning plus bas sur la page. */ .qsup__title-lede{ font:400 18px/1.55 var(--f-sans); color:rgba(8,26,55,.78); max-width:460px; margin:var(--s-3) 0 0; text-wrap:pretty; } @media (max-width:560px){ .qsup__title-lede{ font-size:16px; } } /* m0260 — Trademark superscript on category name. Discreet (.5em) but legible — signals IP without shouting. */ .qsup__tm{ font:600 .35em/1 var(--f-sans); vertical-align: .9em; letter-spacing: 0; color: var(--c-orange); margin-left: .04em; } /* m0260 — Compliance guardrail definition. Sits between H2 and the 1.5M hero. Sober, italic, max 60ch. Italic here = scientific footnote register, NOT decorative. */ .qsup__definition{ font:italic 400 clamp(15px, 0.4vw + 13.5px, 18px)/1.55 var(--f-sans); color:rgba(8,26,55,.65); max-width:62ch; margin: var(--s-4) 0 var(--s-7); padding-left: var(--s-3); border-left: 2px solid var(--c-orange); } .qsup__definition strong{ color: var(--c-ink); font-weight: 600; font-style: normal; } .qsup__hero{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:var(--s-5); padding:var(--s-5) 0; border-top:1px solid rgba(8,26,55,.12); border-bottom:1px solid rgba(8,26,55,.12); align-items:center; } .qsup__big{ font:400 clamp(96px,12vw,160px)/.9 var(--f-serif); color:var(--c-orange); margin:0; letter-spacing:-.03em; font-feature-settings:"lnum" 1, "tnum" 1; font-variant-numeric: tabular-nums lining-nums; } .qsup__big-desc{ font:400 16px/1.6 var(--f-sans); color:rgba(8,26,55,.75); margin:0; max-width:42ch; } .qsup__big-desc .src{ display:block; margin-top:var(--s-2); font-size:12px; color:rgba(8,26,55,.5); font-style:italic; } /* m0215 — retour version cards (rollback m0204/m0213). m0260 — qsup__stats--duo : 1 seul stat secondaire (20+yrs). On bascule la grid en single-col centré sur cette variante. */ .qsup__stats{ list-style:none; padding:0; margin:var(--s-5) 0 0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:var(--s-3); } .qsup__stats--duo{ grid-template-columns: minmax(0, 460px); justify-content: center; margin-top: var(--s-6); } @media (max-width:900px){ .qsup__stats{ grid-template-columns:repeat(2, 1fr); gap:var(--s-2); } .qsup__head{ grid-template-columns:1fr; gap:var(--s-5); } /* m0367 — sur mobile, le H2 Conviction Intelligence passe en premier (impact narratif), puis le bloc gauche (preuve 20+yrs) en dessous. */ .qsup__head-right{ order:1; } .qsup__head-left{ order:2; } .qsup__hero{ grid-template-columns:1fr; } } .qsup__stats li{ position:relative; padding:var(--s-5) var(--s-4) var(--s-4); background:#fff; border:1px solid rgba(8,26,55,.10); border-top:3px solid var(--c-orange); margin:0; display:flex; flex-direction:column; gap:var(--s-2); transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .35s var(--ease-out); } .qsup__stats li:hover{ transform:translateY(-2px); box-shadow:0 12px 32px -16px rgba(8,26,55,.18); border-color:rgba(8,26,55,.18); } .qsup__num{ font:700 clamp(72px,7.5vw,108px)/1 var(--f-sans); color:var(--c-ink); margin:0; letter-spacing:-.025em; font-feature-settings:"lnum" 1, "tnum" 1; font-variant-numeric: tabular-nums lining-nums; } .qsup__num sup{ font-size:.45em; vertical-align:.55em; font-weight:700; margin-left:1px; letter-spacing:0; color:inherit; } .qsup__num .unit{ font-size:.42em; vertical-align:.18em; font-family:var(--f-sans); font-weight:600; color:inherit; margin-left:8px; letter-spacing:.04em; text-transform:lowercase; opacity:.7; } .qsup__stats p{ font:600 14px/1.4 var(--f-sans); color:var(--c-ink); margin:0; } @media (prefers-reduced-motion: reduce){ .qsup__stats li{ transition:none; } .qsup__stats li:hover{ transform:none; } } .qsup__viz{ margin-top:var(--s-5); background:var(--c-ink); height:120px; position:relative; overflow:hidden; } /* m0260 — Closer line. Pose la frontière catégorielle GNM. 1ère partie en romain (CI = compétiteurs), 2e partie italic (Conviction Intelligence™ = territoire GNM). Single italique ici porte tout le poids du retournement éditorial. */ .qsup__closer{ font:400 clamp(20px, 1.4vw + 14px, 30px)/1.4 var(--f-serif); color: var(--c-ink); max-width: 64ch; margin: var(--s-7) 0 var(--s-5); letter-spacing: -.005em; text-wrap: balance; } .qsup__closer em{ font-style: italic; color: var(--c-ink); /* slight color emphasis without breaking the editorial tone */ background: linear-gradient( to bottom, transparent 0, transparent 75%, rgba(232, 119, 34, .14) 75%, rgba(232, 119, 34, .14) 100% ); } /* m0260 — Section CTA, ghost variant. Aligned left for editorial reading rhythm (closer → CTA = same eye axis). */ .qsup__cta-row{ display: flex; /* m0414 — margin-bottom retiré : la section a déjà son padding-bottom (--s-7). was: margin-bottom: var(--s-5) → ajoutait 48px de trou fantôme sous le CTA. */ } .qsup__cta{ display: inline-flex; align-items: center; gap: 12px; padding: 14px 24px; font: 600 14px/1 var(--f-sans); letter-spacing: .02em; color: var(--c-ink); border: 1px solid rgba(8,26,55,.32); border-radius: 999px; background: transparent; transition: border-color .25s var(--ease-out), color .25s var(--ease-out), background .25s var(--ease-out), transform .25s var(--ease-out); } .qsup__cta:hover, .qsup__cta:focus-visible{ color: var(--c-orange); border-color: var(--c-orange); transform: translateY(-1px); } .qsup__cta-arrow{ display: inline-block; transition: transform .25s var(--ease-out); font: 400 16px/1 var(--f-sans); } .qsup__cta:hover .qsup__cta-arrow, .qsup__cta:focus-visible .qsup__cta-arrow{ transform: translateX(3px); } @media (prefers-reduced-motion: reduce){ .qsup__cta, .qsup__cta-arrow{ transition: none; } .qsup__cta:hover{ transform: none; } .qsup__cta:hover .qsup__cta-arrow{ transform: none; } } /* ========================================================= m0261 — PHASE 2 : 4-layer positioning grid Cadre catégoriel : où GNM se situe vs Rx data / MR / CRM. Grille de 4 cards horizontales. Les 3 premières en grey muted, la 4ème (Conviction Intelligence) en accent orange filled. Pédagogie + différenciation en un coup d'œil. ========================================================= */ .qsup__positioning{ /* m0125d — espace au-dessus resserré (96→48) et hairline allégée (.08→.05) ; trop d'air vide sous la carte + trait trop visible. */ margin: var(--s-5) 0 var(--s-6); padding-top: var(--s-5); border-top: var(--hair) solid rgba(8,26,55,.05); } .qsup__positioning-eyebrow{ font:500 11px/1 var(--f-sans); /* m0287 — micro-eyebrow aligné sur --ls-caps (.18em). --ls-caps-loose réservé aux straplines hero. */ letter-spacing:var(--ls-caps); text-transform:uppercase; color:rgba(8,26,55,.5); margin:0 0 var(--s-4); } .qsup__layers{ display:grid; /* m0125g — 4→3 columns after CRM card removed (cf. user feedback : CRM was redundant with Market Research + diluted the Conviction contrast). 3 cards = cleaner mirror : 2 muted + 1 accent orange. */ grid-template-columns: repeat(3, 1fr); gap: var(--s-3); list-style: none; margin: 0; padding: 0; } @media (max-width:900px){ .qsup__layers{ grid-template-columns: repeat(2, 1fr); } } @media (max-width:560px){ .qsup__layers{ grid-template-columns: 1fr; } } .qsup__layer{ display:flex; flex-direction:column; gap: 6px; padding: var(--s-3); /* m0287 — token rad-sm (was 4px en dur) */ border-radius: var(--rad-sm); background: transparent; /* m0287 — borderline alignée sur .qsup__stats (.10) */ border: var(--hair) solid rgba(8,26,55,.10); } .qsup__layer-cat{ font:500 11px/1 var(--f-sans); /* m0287 — micro-eyebrow aligné sur --ls-caps (.18em) */ letter-spacing:var(--ls-caps); text-transform:uppercase; color:rgba(8,26,55,.55); margin: 0; } .qsup__layer-verb{ font:400 clamp(18px, 0.4vw + 16px, 22px)/1.25 var(--f-serif); color:var(--c-ink); margin: 0; letter-spacing: -.005em; } .qsup__layer-time{ font:400 13px/1.4 var(--f-sans); color:rgba(8,26,55,.55); margin: 4px 0 0; } /* The 4th card — GNM territory. Filled background, orange accent. */ .qsup__layer--gnm{ background: rgba(232, 119, 34, .06); border-color: rgba(232, 119, 34, .28); } .qsup__layer--gnm .qsup__layer-cat{ color: var(--c-orange); font-weight: 600; } .qsup__layer--gnm .qsup__layer-verb{ color: var(--c-ink); font-weight: 500; } .qsup__layer--gnm .qsup__layer-time{ color: rgba(8,26,55,.7); } /* ========================================================= m0261 — PHASE 2 : 5-stage methodology stepper Comment GNM opère, en 5 étapes connectées par hairline orange. Numéros 01–05 orange, titre Playfair 400, microcopy 1 ligne. ========================================================= */ .qsup__stepper{ margin: var(--s-7) 0 var(--s-6); padding-top: var(--s-6); /* m0287 — hairline token */ border-top: var(--hair) solid rgba(8,26,55,.08); } .qsup__stepper-eyebrow{ font:500 11px/1 var(--f-sans); /* m0287 — micro-eyebrow aligné sur --ls-caps */ letter-spacing:var(--ls-caps); text-transform:uppercase; color:rgba(8,26,55,.5); margin:0 0 var(--s-5); } .qsup__stages{ display:grid; grid-template-columns: repeat(5, 1fr); gap: 0; list-style: none; margin: 0; padding: 0; position: relative; } /* Connecting hairline — orange, runs through all stages at the numéro y-axis. ::before sits on the row, behind the numbers. */ .qsup__stages::before{ content:""; position:absolute; top: 14px; /* aligns with numéro center (28px line-height ÷ 2) */ left: 8%; right: 8%; height: 1px; background: rgba(232, 119, 34, .35); z-index: 0; } @media (max-width:900px){ .qsup__stages{ grid-template-columns: repeat(2, 1fr); gap: var(--s-4); } .qsup__stages::before{ display: none; } } @media (max-width:560px){ .qsup__stages{ grid-template-columns: 1fr; } } .qsup__stage{ display:flex; flex-direction:column; gap: 8px; padding: 0 var(--s-2) 0 0; position: relative; z-index: 1; } .qsup__stage-num{ font:600 14px/1 var(--f-sans); letter-spacing: .04em; color: var(--c-orange); margin: 0; /* Lift number off the hairline — small dot behind via background */ display: inline-block; background: var(--c-paper); padding-right: 12px; width: fit-content; } .qsup__stage-title{ font:400 clamp(20px, 0.4vw + 18px, 24px)/1.2 var(--f-serif); color:var(--c-ink); margin: 0; letter-spacing: -.008em; } .qsup__stage-desc{ font:400 14px/1.45 var(--f-sans); color:rgba(8,26,55,.6); margin: 0; } /* ========================================================= m0262 — REFONTE 8-actes : The MOAT (2 stats équivalents) 1.5M et 20yrs au MEME format visuel — pas de hiérarchie parasite. Grid 2 cols égales, gap généreux. Promotion de 20yrs au rang de hero stat (était orpheline en mini-card). ========================================================= */ .qsup__moat{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-7); margin: var(--s-7) 0 0; padding: var(--s-6) 0; border-top: 1px solid rgba(8,26,55,.12); /* m0124e — border-bottom removed : the next block (qsup__positioning) already opens with its own border-top hairline, so two stacked rules read as a double-stroke. Single hairline = cleaner section seam. */ } @media (max-width: 900px){ .qsup__moat{ grid-template-columns: 1fr; gap: var(--s-5); } } .qsup__moat-stat{ display: flex; flex-direction: column; gap: var(--s-2); } .qsup__moat-lede{ /* m0468 — phrase d'amorce avant le 1.5M+. Sentence case, sans-serif, ton éditorial doux ; pas un eyebrow caps (l'amorce se lit comme une phrase qui se complète par la stat). */ font: 400 18px/1.45 var(--f-sans); color: rgba(8,26,55,.7); margin: 0 0 calc(var(--s-2) * -.4); max-width: 28ch; } .qsup__moat-num{ /* m0125 — was clamp(96, 12vw, 160). Resserré pour rythme tighter avec le lede et la carte plus large. */ font:400 clamp(80px, 9vw, 120px)/.9 var(--f-serif); color: var(--c-orange); margin: 0; letter-spacing: -.03em; font-feature-settings:"lnum" 1, "tnum" 1; font-variant-numeric: tabular-nums lining-nums; } .qsup__moat-num sup{ font-size: .35em; vertical-align: .8em; font-weight: 400; margin-left: 2px; letter-spacing: 0; color: inherit; } .qsup__moat-num .unit{ font-size: .3em; vertical-align: .6em; font-family: var(--f-sans); font-weight: 500; color: inherit; margin-left: 12px; letter-spacing: .02em; text-transform: lowercase; opacity: .9; } .qsup__moat-desc{ /* m0125 — 16→18px ; max-width 320px ; margin-top 24px */ font:400 18px/1.55 var(--f-sans); color: rgba(8,26,55,.78); max-width: 320px; margin-top: var(--s-3); margin: 0; max-width: 38ch; } /* ========================================================= m0413 — Foundation block (unified expertise + definition). Merges the previously-separate 20+yrs bridge and "We define…" pullquote into ONE container so they read as a single thought : LEFT : the source of expertise (20yrs across 20+ TAs) RIGHT : what we make of it (Conviction Intelligence definition) Card style — single bg, hairline border, subtle vertical divider. ========================================================= */ .qsup__foundation{ display: grid; grid-template-columns: minmax(0, 1.05fr) auto minmax(0, 1fr); align-items: center; gap: var(--s-5); padding: var(--s-5) var(--s-5); margin: 0 0 var(--s-6); background: rgba(8,26,55,.025); border: var(--hair) solid rgba(8,26,55,.10); border-left: 2px solid var(--c-orange); border-radius: 4px; } .qsup__foundation-stat{ display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--s-3); } .qsup__foundation-stat .qsup__bridge-num{ font:400 clamp(56px, 5.6vw, 92px)/.9 var(--f-serif); color: var(--c-orange); margin: 0; letter-spacing: -.02em; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; } .qsup__foundation-stat .qsup__bridge-num sup{ font-size: .35em; vertical-align: .85em; font-weight: 400; } .qsup__foundation-stat .qsup__bridge-num .unit{ font-size: .3em; vertical-align: .55em; margin-left: .12em; color: var(--c-orange); font-family: var(--f-sans); font-weight: 500; letter-spacing: .02em; text-transform: lowercase; opacity: .9; } .qsup__foundation-stat-desc{ font:400 14.5px/1.5 var(--f-sans); color: rgba(8,26,55,.72); margin: 0; text-wrap: pretty; } .qsup__foundation-stat-desc strong{ color: var(--c-ink); font-weight: 600; } .qsup__foundation-divider{ width: 1px; height: 80%; min-height: 60px; background: rgba(8,26,55,.12); align-self: stretch; margin: 0 auto; } .qsup__foundation-def{ font: italic 400 clamp(14.5px, 0.4vw + 13px, 17px)/1.55 var(--f-sans); color: rgba(8,26,55,.72); margin: 0; text-wrap: pretty; } .qsup__foundation-def strong{ color: var(--c-ink); font-weight: 600; font-style: normal; } @media (max-width: 900px){ .qsup__foundation{ grid-template-columns: 1fr; gap: var(--s-4); padding: var(--s-4); } .qsup__foundation-divider{ width: 100%; height: 1px; min-height: 0; } } /* ========================================================= m0412 — World map for "1.5M+ verified HCPs by region". Replaces the standalone 20+yrs card on the right of the moat. - SVG inline, viewBox 1000×500 — auto-scales. - Stylised landmasses (custom paths, no GeoJSON dep). - Six anchor groups : halo + filled ink dot + 2 text lines. - Brand palette : ink dots, orange halos, ink text on dots. ========================================================= */ .qsup__moat--map{ /* m0125 — premium dataviz proportions. Map = 65-70% of bloc, text column = 30-35%, gap 80px. Was 1fr/2fr (33/67), now 1fr/2.2fr (~31/69) with stricter min on the stat column to keep the lede compact. */ grid-template-columns: minmax(260px, .9fr) minmax(0, 2.2fr); align-items: center; /* QA m0125k — 80px en dur → token (8pt-aligned). var(--s-7)=96px = same visual rhythm as section padding ; cohérence editoriale. */ gap: var(--s-7); } @media (max-width: 900px){ .qsup__moat--map{ grid-template-columns: 1fr; gap: var(--s-5); } /* m0327 — Full-bleed map sur mobile. La .wrap padding contraint le SVG à ~360px sur 412px viewport ; en cassant le wrap on récupère ~14% de largeur (= meilleure lecture des labels et tracés). Le titre/caption restent dans la marge éditoriale. */ .qsup__map{ margin-inline: calc(var(--gutter) * -1); } .qsup__map-title, .qsup__map-cap{ margin-inline: var(--gutter); } .qsup__map-svg{ /* Map peut s'étirer edge-to-edge ; viewport mobile = max */ width: 100%; } } .qsup__map{ margin: 0; display: flex; flex-direction: column; gap: var(--s-2); } .qsup__map-svg{ width: 100%; height: auto; display: block; background: transparent; /* m0091 — grid removed, page bg shows through */ } /* m0124h — base layer (Natural Earth Robinson world map, 2000x857). Loaded as referencing assets/world.svg. The source file uses fill #ECECEC + black hairline strokes ; CSS opacity tones it down to atlas-hairline weight against the bone background. */ .qsup__map-base{ opacity: .55; /* desaturate any color, then tint slightly toward ink */ filter: grayscale(100%) brightness(.95) contrast(.85); } /* m0091 — orange data dot, sized in SVG units (proportional to volume). Drop-shadow gives just enough lift on the bone background. */ .qsup__map-region .qsup__map-dot{ fill: var(--c-orange); filter: drop-shadow(0 1px 2px rgba(225,96,52,.35)); transition: transform .35s var(--ease-out); transform-origin: center; transform-box: fill-box; } .qsup__map-region:hover .qsup__map-dot{ transform: scale(1.15); } /* m0091 — pulsing halo : same orange, 1px stroke, scales 1→1.8 + fade. transform-box: fill-box anchors scale to the circle's own center. */ .qsup__map-halo{ fill: none; stroke: var(--c-orange); stroke-width: 2; /* m0124h — viewBox 2000, was 1 on the 1000 viewBox */ opacity: .35; transform-origin: center; transform-box: fill-box; animation: qsup-map-pulse 2.4s var(--ease-out) infinite; } @keyframes qsup-map-pulse{ 0% { transform: scale(1); opacity: .45; } 70% { transform: scale(1.8); opacity: 0; } 100% { transform: scale(1.8); opacity: 0; } } /* m0091 — leader lines : orthogonal hairline, 30% ink, no dash. FT/Bloomberg cartographic codes : straight lines + right angles only. */ .qsup__map-leader{ fill: none; stroke: rgba(8,26,55,.35); /* m0125 — .30 → .35, slightly more visible against bigger labels */ stroke-width: 1.2; stroke-linejoin: miter; stroke-linecap: butt; vector-effect: non-scaling-stroke; } /* m0091 — labels : caps eyebrow (orange) + serif italic number (ink). Tabular figures so 739K and 215K vertically align. */ .qsup__map-eyebrow{ /* m0125b — back to Inter (more legible at scroll), 28/700/.18em remains for caps label visibility. */ font: 700 28px/1 var(--f-sans); letter-spacing: .18em; fill: var(--c-orange); text-transform: uppercase; } .qsup__map-num{ /* m0125b — REVERTED to Inter 700 56px (was Playfair Italic 64). User feedback : sans-serif more legible than italic serif at this size. Tabular figures preserved so 739K and 67K vertically align. */ font: 700 56px/1 var(--f-sans); fill: var(--c-ink); letter-spacing: -.015em; font-feature-settings: 'tnum' 1, 'lnum' 1; } @media (max-width: 900px){ .qsup__map-eyebrow{ font-size: 24px; } .qsup__map-num{ font-size: 48px; } } @media (max-width: 560px){ /* QA m0125k — sub-iPhone-SE legibility. Le SVG est gardé (lecture globale du global reach) mais les chiffres se compactent. Below 400px viewport, the numbers stay legible at 18px caps via the viewBox scaling — nothing further required (figures fit in the SVG aspect-ratio guide). */ .qsup__map-eyebrow{ font-size: 22px; } .qsup__map-num{ font-size: 40px; } } /* m0125b — figure title above the map. Mirrors .qsup__positioning-eyebrow pattern (11px/500/.18em caps) for cross-block consistency. */ .qsup__map-title{ /* m0494 — passé sur le pattern eyebrow (.qsup__positioning-eyebrow) : 11px caps tracked. Lit comme un label de figure, pas comme une lede. */ font: 500 11px/1.4 var(--f-sans); letter-spacing: var(--ls-caps); text-transform: uppercase; color: rgba(8,26,55,.5); margin: 0 0 var(--s-3); padding: 0 4px; max-width: 60ch; } /* m0091 — caption : single discreet source line, italic. */ .qsup__map-cap{ margin-top: var(--s-2); padding: 0 4px; font: italic 400 12px/1.4 var(--f-sans); color: rgba(8,26,55,.45); text-align: right; } @media (prefers-reduced-motion: reduce){ .qsup__map-halo{ animation: none; opacity: .35; } .qsup__map-region:hover .qsup__map-dot{ transform: none; } .qsup__map-region .qsup__map-dot{ transition: none; } } /* m0262 — H2 title + ™ inline mark. Sister mark Playfair regular, baseline-aligned, sky tone. Matches "Conviction Intelligence™" recurrence partout. */ .qsup__tm{ font: 400 .35em/1 var(--f-serif); vertical-align: .85em; color: var(--c-orange); margin-left: .04em; letter-spacing: 0; font-feature-settings: normal; } /* m0262 — Layer card neutralization tweak : retire la border par défaut sur les 3 cards "rivales" pour laisser respirer la 4e (featured). La hiérarchie passe maintenant par le fond + accent uniquement. */ /* m0287 — surcharge .06 supprimée : la card de base aligne désormais sur .10 (= qsup__stats) ; pas de raison de l'affaiblir. */ .qsup__layer--gnm{ position: relative; /* m0287 — transition alignée sur .qsup__stats (.35s var(--ease-out)) */ transition: box-shadow .35s var(--ease-out), border-color .35s var(--ease-out); } .qsup__layer--gnm:hover{ /* m0287 — shadow alignée sur .qsup__stats:hover intensité (.18) */ box-shadow: 0 12px 32px -16px rgba(232,119,34,.22); border-color: rgba(232,119,34,.42); } @media (prefers-reduced-motion: reduce){ .qsup__layer--gnm{ transition: none; } .qsup__layer--gnm:hover{ box-shadow: none; } } /* m0262 — Closer final : surlignage subtil orange sur la 2e ligne (la phrase pivot). Centré, max-width 800px, pose le cliffhanger. */ /* m0408 — Quote thèse centrale renforcée pour porter sa fonction d'argument : barre verticale orange (cohérence avec .qsup__definition + .qsup__foundation-stat), navy plein, italique 32px, max-width 800px, padding-left 40px, marges --s-7. Override le centrage précédent : ce quote est maintenant un moment éditorial ancré à gauche avec barre signature, pas un float centré. */ .qsup__closer--final{ max-width: 800px; margin-left: 0; margin-right: auto; text-align: left; /* m0414 — resserrement narratif : cards → quote → CTA forment une unité. was: margin-top/bottom var(--s-7) (96px) — créait des trous de lecture. now: 48px above (cards → quote), 40px below (quote → CTA). */ margin-top: var(--s-5); margin-bottom: 40px; padding: var(--s-4) 0 var(--s-4) 40px; border-left: 3px solid var(--c-orange); /* design judgement — 3px (vs 2px sur .qsup__definition) : poids assumé pour une signature de section, pas une simple definition box. */ font: italic 400 clamp(24px, 2.6vw, 32px)/1.35 var(--f-serif); color: var(--c-ink); letter-spacing: -.01em; text-wrap: balance; } .qsup__closer--final em{ /* l'italique est porté par le bloc entier — neutralise le double-italique */ font-style: italic; background: none; color: inherit; } .qsup__closer-mark{ /* m0408 — accent orange sur le concept-clé "Conviction Intelligence". Signe le mot pivot sans crier (color seul, pas de surlignage). */ color: var(--c-orange); font-style: italic; } @media (max-width: 900px){ .qsup__closer--final{ padding-left: 32px; /* m0414 — mobile : maintient la proportion serrée. */ margin-top: 32px; margin-bottom: 24px; padding-top: 24px; padding-bottom: 24px; } } @media (max-width: 560px){ .qsup__closer--final{ padding-left: 24px; padding-top: var(--s-4); padding-bottom: var(--s-4); font-size: clamp(22px, 5.5vw, 24px); } } .qsup__footnote{ font:italic 400 12px/1.5 var(--f-sans); color:rgba(8,26,55,.5); margin:var(--s-4) 0 0; max-width:60ch; } /* ========================================================= TRANSFORMATION — refonte m0333 Diagnostic : 3 niveaux de copy (caption photo + eyebrow + H2) se concurrençaient. Solution : caption photo reste seul ancrage gauche ; eyebrow + H2 + lede + CTA forment un bloc unifié à droite. Grid 5fr/7fr (copy > image), gap --s-7 pour cohérence avec qsup. ========================================================= */ .transform{ background:var(--c-paper); color:var(--c-ink); padding:var(--s-8) 0; } .transform__inner{ display:grid; /* m0333 — 5fr/7fr : copy domine. Image = ancrage éditorial, pas hero principal. */ grid-template-columns:5fr 7fr; gap:var(--s-7); align-items:center; } @media (max-width:900px){ .transform__inner{ grid-template-columns:1fr; gap:var(--s-5); } .transform{ padding:var(--s-6) 0; } } .transform__media{ aspect-ratio: 4 / 5; position:relative; overflow:hidden; background:#0F2A52; } .transform__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 40%; /* Cool brand-aligned tint — slight desaturate + shift toward palette */ filter: saturate(.78) contrast(1.04) brightness(.96); transform: scale(1.06); transition: transform 1.2s var(--ease-out); } .transform__media:hover img{ transform: scale(1.10); } /* Brand color overlay — subtle blue wash, preserves recognizability */ .transform__media::before{ content:""; position:absolute; inset:0; z-index:1; background: linear-gradient(180deg, rgba(8,26,55,.10) 0%, rgba(8,26,55,.32) 100%), linear-gradient(135deg, rgba(91,155,213,.18) 0%, rgba(8,26,55,.0) 55%); mix-blend-mode:multiply; pointer-events:none; } /* Bottom vignette to anchor caption / fade into page */ .transform__media::after{ content:""; position:absolute; inset:auto 0 0 0; height:55%; z-index:2; background:linear-gradient(180deg, transparent 0%, rgba(8,26,55,.55) 100%); pointer-events:none; } .transform__media-caption{ position:absolute; left:0; right:0; bottom:0; z-index:3; padding:var(--s-3) var(--s-4); display:flex; align-items:center; gap:10px; font:500 11px/1 var(--f-sans); letter-spacing:var(--ls-caps); text-transform:uppercase; color:rgba(255,255,255,.85); } .transform__media-caption::before{ content:""; width:24px; height:1px; background:var(--c-orange); } .transform__title{ /* Audit italique m0252 — H2 en romain ; seul le "will never show you" porte l'emphase. */ font:400 clamp(36px,4.4vw,60px)/1.06 var(--f-serif); color:var(--c-ink); margin:0 0 var(--s-3); letter-spacing:-.008em; } .transform__title em{ font-style:italic; } .transform__lede{ /* m0333 — spec : Inter 18 px, gray-700, line-height 1.55, max-width 480 px. Resserré : un seul paragraphe court qui relie photo + CTA. */ font:400 18px/1.55 var(--f-sans); color:rgba(8,26,55,.7); margin:0 0 var(--s-4); max-width:480px; } /* m0333 — eyebrow neutralisé (couleur ink atténuée) en cohérence avec le pattern presence + final. Évite l'inline style="color:..." */ .transform__eyebrow{ color:rgba(8,26,55,.5); } /* m0333 — CTA mobile : pleine largeur (max 280px) pour hit target */ @media (max-width:560px){ .transform .btn{ display:inline-flex; width:100%; max-width:280px; justify-content:center; } } /* ========================================================= GLOBAL PRESENCE ========================================================= */ .presence{ background:var(--c-bone); color:var(--c-ink); padding:var(--s-8) 0; } .presence__head{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:var(--s-5); align-items:end; margin-bottom:var(--s-5); } @media (max-width:900px){ .presence__head{ grid-template-columns:1fr; } } .presence__title{ font:400 clamp(32px,3.6vw,44px)/1.1 var(--f-serif); color:var(--c-ink); margin:0; letter-spacing:-.015em; } .cities{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--s-3); list-style:none; padding:0; margin:0; } @media (max-width:900px){ .cities{ grid-template-columns:1fr; gap:var(--s-3); } /* m0403 — Mobile : card cohérente, fond sombre uni. Photo 16/9 en haut. Overlay (eyebrow + ville) ancré bottom-left ON the photo with gradient scrim for legibility. Meta line intégrée DANS le fond sombre de la card (pas blanche), séparée de la photo par 16px de respiration, pas de cassure visuelle. */ .city{ aspect-ratio:auto; background:var(--c-ink); display:block; border-radius:var(--r-2); overflow:hidden; } .city__img{ position:relative; inset:auto; aspect-ratio:16/9; width:100%; border-radius:0; } /* Body overlay limité à la zone photo : gradient scrim + texte clair */ .city__body{ position:absolute; inset:0 0 auto 0; aspect-ratio:16/9; width:100%; height:auto; display:flex; align-items:flex-end; justify-content:space-between; padding:var(--s-3); pointer-events:none; background:linear-gradient( to bottom, rgba(8,26,55,0) 40%, rgba(8,26,55,.65) 100% ); } .city__body > *{ pointer-events:auto; } /* Meta line dans le bloc sombre, sous la photo, même fond que card */ .city__meta{ position:relative; display:block; padding:var(--s-3); margin-top:0; font:400 13px/1.5 var(--f-sans); color:var(--c-blue-pale, #9DBBE5); letter-spacing:.01em; background:transparent; } .city__meta-fn{ color:#fff; font-weight:500; } .city__meta-sep, .city__meta-focus{ color:var(--c-blue-pale, #9DBBE5); } /* Mobile : stack la meta verticalement (function ligne 1, focus ligne 2) */ .city__meta-sep{ display:none; } .city__meta-fn, .city__meta-focus{ display:block; } .city__meta-fn{ margin-bottom:2px; } } @media (max-width:560px){ .city__img{ max-height:240px; } .city__body{ max-height:240px; } } .city{ position:relative; aspect-ratio: 4 / 3; display:block; overflow:hidden; background:var(--c-ink); text-decoration:none; isolation:isolate; transition:transform .35s var(--ease-out); } .city:hover{ transform:translateY(-3px); } .city__img{ position:absolute; inset:0; background-size:cover; background-position:center; /* P1 — sober editorial duotone: warm-cool grade aligned to brand palette */ filter: saturate(.78) contrast(1.06) brightness(.84); transition: transform .8s var(--ease-out), filter .35s var(--ease-out); } .city:hover .city__img{ transform:scale(1.04); filter: saturate(.88) contrast(1.08) brightness(.9); } .city__img::before{ content:""; position:absolute; inset:0; z-index:1; /* warm → cool tint for editorial cohesion w/ ink palette */ background: linear-gradient(165deg, rgba(225,96,52,.10) 0%, rgba(8,26,55,.18) 45%, rgba(8,26,55,.55) 100%); mix-blend-mode: multiply; } .city__img::after{ content:""; position:absolute; inset:0; z-index:2; background:linear-gradient(180deg, transparent 35%, rgba(8,26,55,.72) 100%); } .city__body{ position:absolute; inset:auto 0 0 0; padding:var(--s-3); display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s-2); z-index:3; } .city__eyebrow{ display:block; font:500 10px/1 var(--f-sans); letter-spacing:var(--ls-caps-loose); text-transform:uppercase; color:rgba(255,255,255,.85); margin:0 0 var(--s-1); } .city__name{ font:400 clamp(20px,2.2vw,28px)/1 var(--f-serif); margin:0; color:#fff; letter-spacing:-.01em; } /* m0381 — meta line under city name : function/scope · therapeutic focus. Inline middle-dot separator on desktop, stacks on mobile. Desktop : positioned absolute inside the card, anchored to bottom-left so it appears as a 3rd line under the city name (same overlay column). The body padding-bottom is increased to leave room for this line. */ .city__meta{ position:absolute; left:var(--s-3); right:var(--s-3); bottom:var(--s-3); z-index:3; font:400 13px/1.4 var(--f-sans); color:var(--c-blue-pale, #9DBBE5); letter-spacing:.01em; pointer-events:none; } .city__body{ /* m0398 — push body up so meta line fits underneath without overlap. Body holds eyebrow + name + arrow ; meta sits 24px below city name. */ bottom:32px; } .city__meta-fn{ font-weight:500; color:rgba(255,255,255,.9); } .city__meta-sep{ color:inherit; margin:0 .35em; /* design judgement — middle dot tone matches focus line, not function */ } .city__meta-focus{ /* default inherits .city__meta color (sky-pale) */ } @media (max-width:560px){ /* m0381 — stack vertical sur mobile : function en ligne 1, focus ligne 2 */ .city__meta-sep{ display:none; } .city__meta-fn, .city__meta-focus{ display:block; } .city__meta-fn{ margin-bottom:2px; } } .city__arrow{ width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,.6); display:flex; align-items:center; justify-content:center; flex:0 0 36px; transition:background-color .2s var(--ease-out), border-color .2s var(--ease-out); } .city:hover .city__arrow, .city:focus-visible .city__arrow{ background:#fff; color:var(--c-ink); border-color:#fff; } /* ========================================================= ABOUT-STYLE GLOBAL PRESENCE ========================================================= */ .manifesto{ background:var(--c-bone); color:var(--c-ink); padding:var(--s-7) 0 var(--s-8); } @media (max-width:900px){ .manifesto{ padding:var(--s-6) 0; } } .manifesto__where{ margin:var(--s-5) auto 0; text-align:center; } .manifesto__where .eyebrow{ justify-content:center; margin:0 auto var(--s-3); width:fit-content; } .manifesto__where-title{ font:400 clamp(26px, 2.6vw, 32px)/1.2 var(--f-serif); color:var(--c-ink); letter-spacing:-.012em; margin:0; text-wrap:balance; max-width:22ch; margin-inline:auto; } .manifesto__where-title em{ font-style:italic; color:var(--c-orange); font-weight:500; } .manifesto__where--split{ display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(32px, 5vw, 80px); text-align:left; margin:0 auto var(--s-5); align-items:start; } .manifesto__where--split .eyebrow{ margin:0 0 var(--s-3); justify-content:flex-start; } .manifesto__where--split .manifesto__where-title{ font:400 clamp(32px, 3.6vw, 48px)/1.08 var(--f-serif); margin:0; max-width:14ch; text-wrap:balance; } .manifesto__where-brief{ font:400 clamp(15px, 1.2vw, 17px)/1.6 var(--f-sans); color:rgba(8,26,55,.78); margin:var(--s-5) 0 0; max-width:48ch; } .manifesto__where-brief a{ color:var(--c-orange); text-decoration:underline; text-underline-offset:3px; } @media (max-width:820px){ .manifesto__where--split{ grid-template-columns:1fr; gap:var(--s-4); } .manifesto__where-brief{ margin-top:0; } } .manifesto__cities{ list-style:none; padding:0; margin:var(--s-5) 0 0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--s-3); } @media (max-width:900px){ .manifesto__cities{ grid-template-columns:1fr; gap:var(--s-3); } } .m-city{ position:relative; display:block; aspect-ratio:4 / 3; border-radius:var(--rad-md, 8px); overflow:hidden; text-decoration:none; color:#fff; background:var(--c-ink); transition:transform .35s var(--ease-out, cubic-bezier(.16,1,.3,1)); } .m-city:hover{ transform:translateY(-3px); } .m-city__img{ position:absolute; inset:0; background-size:cover; background-position:center; transition:transform .8s var(--ease-out, cubic-bezier(.16,1,.3,1)), filter .35s var(--ease-out); } .m-city:hover .m-city__img{ transform:scale(1.04); filter:saturate(.88) contrast(1.08) brightness(.9); } .m-city__img::before{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(135deg, rgba(8,26,55,.18) 0%, rgba(8,26,55,.32) 100%); mix-blend-mode:multiply; } .m-city__img::after{ content:""; position:absolute; inset:0; z-index:2; background:linear-gradient(180deg, transparent 35%, rgba(8,26,55,.78) 100%); } .m-city__body{ position:absolute; inset:auto 0 0 0; bottom:32px; padding:var(--s-3); display:flex; align-items:flex-end; justify-content:space-between; z-index:3; } .m-city__eyebrow{ display:block; font:500 10px/1 var(--f-sans); letter-spacing:var(--ls-caps, .18em); text-transform:uppercase; color:rgba(255,255,255,.72); margin:0 0 var(--s-1); } .m-city__name{ font:400 clamp(20px, 2.2vw, 28px)/1 var(--f-serif); color:#fff; letter-spacing:-.01em; } .m-city__meta{ position:absolute; left:var(--s-3); bottom:14px; z-index:3; font:400 12px/1 var(--f-sans); color:rgba(180, 208, 232, .85); pointer-events:none; } .m-city__arrow{ width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,.6); display:inline-flex; align-items:center; justify-content:center; color:#fff; flex:0 0 auto; transition:background-color .2s var(--ease-out), border-color .2s var(--ease-out); } .m-city:hover .m-city__arrow, .m-city:focus-visible .m-city__arrow{ background:#fff; color:var(--c-ink); border-color:#fff; } /* ========================================================= FINAL CTA ========================================================= */ .final{ background:var(--c-ink); padding:var(--s-8) 0; text-align:center; } .final__title{ /* Audit italique m0252 — H2 final en romain ; les ligne par ligne sont remappés ci-dessous. */ font:400 clamp(40px,4.8vw,64px)/1.1 var(--f-serif); color:#fff; margin:var(--s-3) 0 var(--s-4); letter-spacing:-.015em; } /* Audit italique m0252 — chaque garde sa structure block (saut de ligne typographique) mais en romain par défaut. L'emphase italique est portée par .final__title em em (mot ciblé). */ .final__title em{ font-style:normal; display:block; } .final__title em em{ font-style:italic; display:inline; } /* design judgement — "intelligence" comme promesse */ .final__reassure{ font:400 13px/1.5 var(--f-sans); color:rgba(180,208,232,.6); margin:var(--s-3) 0 0; } .final .eyebrow{ justify-content:center; margin:0 auto; width:fit-content; } /* ========================================================= FOOTER — refondu m0315 (4-col + bottom bar 3-zones) Spec : Brand boxed | Explore | Company | Stay in the loop Bottom : legal · © + offices · LinkedIn ========================================================= */ .footer{ background:#04122A; color:rgba(180,208,232,.7); padding:var(--s-8) 0 var(--s-5); } /* Top row: 4 colonnes alignées au baseline du contenu */ .footer__top{ display:grid; grid-template-columns: 1.4fr 1fr 1.4fr; gap:clamp(40px, 5vw, 96px); padding-bottom:var(--s-6); align-items:start; } @media (max-width:980px){ .footer__top{ grid-template-columns:1fr 1fr; gap:var(--s-5); text-align:center; } .footer__brand{ align-items:center; justify-self:center; } .footer__col-eyebrow{ justify-content:center; } .footer__nav{ align-items:center; } .footer__nav a{ width:auto; } .footer__cta-block{ text-align:center; justify-self:center; } .footer__cta-body{ text-align:center; } } @media (max-width:600px){ .footer__top{ grid-template-columns:1fr; gap:var(--s-5); justify-items:center; } .footer__brand{ max-width:220px; } .footer__cta-block{ max-width:280px; } } /* ---- Col 1 — Brand block ---- Logo + tagline boxée + slogan 3-verbes Spec m0349 : la box tagline s'aligne sur la largeur du logo (option A). Le tagline est dans un cadre fin (0.5px gray-700) — c'est la seule unité boxée du footer, elle marque la zone identitaire. */ .footer__brand{ display:flex; flex-direction:column; align-items:flex-start; width:100%; max-width:200px; } .footer__logo{ display:block; width:100%; max-width:200px; height:auto; margin-bottom:16px; } .footer__tagline-img{ display:block; width:100%; max-width:200px; height:auto; opacity:.92; } .footer__verbs{ display:flex; flex-direction:column; font:600 20px/1.45 var(--f-sans); letter-spacing:-0.015em; color:#fff; margin:var(--s-4) 0 0; /* m0402 — 32px box → slogan : brand block soudé (était 48px = --s-5) */ } .footer__verbs > span{ display:block; } .footer__verbs-accent{ color:var(--c-orange); font-weight:700; } /* ---- Col 2 + 3 — Explore / Company ---- */ .footer__col-eyebrow{ font:500 11px/1 var(--f-sans); letter-spacing:var(--ls-caps-loose); text-transform:uppercase; color:rgba(255,255,255,.92); margin:0 0 var(--s-4); display:flex; align-items:center; gap:10px; } .footer__col-eyebrow::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--c-orange); box-shadow:0 0 0 3px rgba(225,96,52,.18); flex:0 0 auto; } .footer__nav{ display:flex; flex-direction:column; gap:14px; list-style:none; padding:0; margin:0; } .footer__nav a{ font:400 15px/1.4 var(--f-sans); color:rgba(255,255,255,.78); width:fit-content; transition:color .2s var(--ease-out); } .footer__nav a:hover{ color:#fff; text-decoration:underline; text-decoration-color:var(--c-orange); text-decoration-thickness:1px; text-underline-offset:4px; } /* ---- Col 4 — Stay in the loop ---- */ .footer__cta-block{ } .footer__cta-body{ font:400 15px/1.55 var(--f-sans); color:rgba(255,255,255,.78); margin:0; } /* Lien inline LinkedIn — discret, intégré au flux body (m0358) */ .footer__inline-link{ color:#fff; text-decoration:underline; text-decoration-color:rgba(180,208,232,.35); text-decoration-thickness:1px; text-underline-offset:3px; white-space:nowrap; transition:text-decoration-color .15s var(--ease-out); } .footer__inline-link:hover{ text-decoration-color:var(--c-orange); } /* ---- Bottom bar — 3 zones ---- Hairline 0.5px gray-700, padding-top 32px. Gauche : caps legal · Centre : © + offices · Droite : LinkedIn */ .footer__bottom{ display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; gap:var(--s-3); padding-top:32px; margin-top:var(--s-3); border-top:0.5px solid rgba(180,208,232,.18); } @media (max-width:780px){ .footer__bottom{ grid-template-columns:1fr; text-align:center; gap:var(--s-3); } } .footer__legal-links{ display:flex; gap:0; flex-wrap:wrap; font:500 11px/1 var(--f-sans); letter-spacing:.14em; text-transform:uppercase; } .footer__legal-links a{ color:rgba(180,208,232,.55); transition:color .15s var(--ease-out); } .footer__legal-links a:hover{ color:#fff; } .footer__legal-links a + a::before{ content:"·"; margin:0 12px; color:rgba(180,208,232,.3); } @media (max-width:780px){ .footer__legal-links{ justify-content:center; } } .footer__sig-line{ font:italic 400 12px/1 var(--f-sans); color:rgba(180,208,232,.55); text-align:center; white-space:nowrap; } @media (max-width:780px){ .footer__sig-line{ white-space:normal; } } .footer__social{ display:flex; justify-content:flex-end; align-items:center; } @media (max-width:780px){ .footer__social{ justify-content:center; } } .footer__social-icon{ display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; color:rgba(180,208,232,.6); transition:color .15s var(--ease-out); } .footer__social-icon:hover{ color:var(--c-orange); } .footer__social-icon svg{ width:20px; height:20px; } /* ========================================================= ROTATOR — generic component See MOTION_SPEC.md ========================================================= */ .rotator{ display:inline-block; position:relative; vertical-align:baseline; /* min-height locks layout to prevent CLS */ min-height:1.1em; } .rotator__item{ display:inline-block; opacity:0; transform:translateY(8px); transition:opacity .45s var(--ease-out), transform .45s var(--ease-out); } .rotator__item.is-active{ opacity:1; transform:none; } .rotator__item:not(.is-active){ position:absolute; left:0; top:0; pointer-events:none; } @media (prefers-reduced-motion: reduce){ .rotator__item{ transition:none; transform:none; } } /* ========================================================= SCROLL REVEAL — IntersectionObserver-driven subtle: opacity 0 → 1, translateY 12 → 0, 600ms, ease stagger 80ms via inline style index from JS ========================================================= */ [data-reveal]{ opacity:0; transform:translateY(12px); transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease); transition-delay: calc(var(--reveal-i, 0) * 80ms); } [data-reveal].is-in{ opacity:1; transform:none; } @media (prefers-reduced-motion: reduce){ [data-reveal]{ opacity:1; transform:none; transition:none; } } /* ========================================================= INTERNAL PAGES — default WordPress page template ========================================================= */ .internal-page{ background:#F6F1E8; color:var(--c-ink); } .internal-page__hero{ padding:calc(var(--header-h) + var(--s-8)) 0 var(--s-8); background:#081A37; color:#fff; } .internal-page__hero-inner{ max-width:980px; } .internal-page__hero .eyebrow{ color:rgba(255,255,255,.62); } .internal-page__title{ margin:0; max-width:900px; color:#fff; font-family:var(--font-serif); font-size:clamp(44px, 6vw, 92px); font-weight:500; line-height:.98; letter-spacing:0; } .internal-page__content{ padding:var(--s-7) 0 var(--s-9); } .internal-page__content-inner{ max-width:980px; } .z-content{ max-width:760px; font-size:18px; line-height:1.75; color:rgba(8,26,55,.78); } .z-content > *:first-child{ margin-top:0; } .z-content > *:last-child{ margin-bottom:0; } .z-content p{ margin:0 0 1.25em; } .z-content h2, .z-content h3{ margin:1.8em 0 .7em; color:var(--c-ink); line-height:1.1; letter-spacing:0; } .z-content a{ color:var(--c-orange); text-underline-offset:4px; } @media (max-width:780px){ .internal-page__hero{ padding:calc(var(--header-h) + var(--s-6)) 0 var(--s-4); } .internal-page__content{ padding:var(--s-6) 0 var(--s-8); } .z-content{ font-size:16px; } } /* ========================================================= PRINT — minimal, cleared chrome ========================================================= */ @media print{ .site-header, .footer, .hero__bg, video, .qsup__viz, .skip-link, .newsletter, .final{ display:none!important; } body{ background:#fff; color:#000; } *{ background:transparent!important; color:#000!important; box-shadow:none!important; } a{ text-decoration:underline; } .wrap{ max-width:none; padding:0; } h1,h2,h3{ page-break-after:avoid; } p,li{ page-break-inside:avoid; } } .gnm-tweaks{ position:fixed; right:20px; bottom:20px; z-index:9999; width:340px; max-width:calc(100vw - 40px); background:#0B1F3F; color:#E8EEF7; border:1px solid rgba(255,255,255,.12); border-radius:10px; box-shadow:0 20px 60px rgba(0,0,0,.45); font:13px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; display:none; } .gnm-tweaks[data-open="true"]{ display:block; } .gnm-tweaks__hd{ display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.08); } .gnm-tweaks__title{ margin:0; font:600 11px/1 -apple-system,sans-serif; letter-spacing:.16em; text-transform:uppercase; color:#E16034; } .gnm-tweaks__close{ appearance:none; background:transparent; border:0; color:#E8EEF7; cursor:pointer; font-size:18px; line-height:1; padding:2px 6px; border-radius:4px; } .gnm-tweaks__close:hover{ background:rgba(255,255,255,.08); } .gnm-tweaks__body{ padding:14px; max-height:70vh; overflow:auto; } .gnm-tweaks__group{ margin-bottom:14px; } .gnm-tweaks__group:last-child{ margin-bottom:0; } .gnm-tweaks__legend{ font:600 10px/1.2 -apple-system,sans-serif; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.55); margin:0 0 8px; } .gnm-tweaks__opt{ display:block; padding:8px 10px; margin-bottom:6px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:6px; cursor:pointer; transition:background .15s, border-color .15s; } .gnm-tweaks__opt:hover{ background:rgba(255,255,255,.08); } .gnm-tweaks__opt input{ display:none; } .gnm-tweaks__opt[data-active="true"]{ background:rgba(225,96,52,.14); border-color:rgba(225,96,52,.55); } .gnm-tweaks__opt-label{ font:600 11px/1.2 -apple-system,sans-serif; letter-spacing:.08em; text-transform:uppercase; color:#E16034; display:block; margin-bottom:4px; } .gnm-tweaks__opt-text{ color:rgba(255,255,255,.85); font-size:12.5px; line-height:1.45; } .gnm-tweaks__opt-text em{ color:#fff; font-style:italic; } /* ========================================================= THREE-TIERS CLOSER — orange divider + bridge phrase ========================================================= */ .three-tiers-closer__text::before{ content:""; display:block; width:40px; height:2px; background:var(--c-orange); margin:0 auto var(--s-4); }