/* ============================================================ modus. — base.css Tokens, reset, shared components (buttons, header, footer, loader, cursor). Section styles live in home.css. ============================================================ */ :root{ --navy:#16283C; --navy-2:#101d2c; --green:#1D9E75; --green-lit:#29c78f; /* green as TEXT on navy: #1D9E75 lands at 4.42:1, just under AA for the 12.5px mono it's used at. --green-lit clears it at 6.89:1. Fills, rules and the logo dot keep --green; only type on navy uses this. */ --green-on-navy:#29c78f; /* and its mirror: green as TEXT on paper/white. #1D9E75 is 3.21:1 there, which fails AA at anything under 18.66px. #177F5E clears it at 4.70:1. */ --green-ink:#177F5E; --paper:#F8F9F7; --light:#E3E7E2; /* --slate is the NAVY-side muted grey (6.35:1 on --navy). --slate-ink is its counterpart on paper/white (5.48:1 / 5.79:1). The old single #7E8A87 failed AA on both surfaces (3.39 / 4.19). */ --slate:#A2AAB0; --slate-ink:#5C6866; --muted:#46555F; --white:#FFFFFF; --sans:'DM Sans','DM Sans Fallback',Inter,system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace; --ease:cubic-bezier(.22,.8,.28,1); } /* Metric-matched fallback. The hero is vertically centred, so when DM Sans swapped in, the h1's line box changed height and the whole centred block jumped 76px — one shift worth CLS 0.141, over Google's 0.1 threshold. Values derived from the real font tables, not guessed: DM Sans upm 1000, asc 992, desc 310, x-height 526 Arial upm 2048, asc 1854, desc 434, x-height 1062 size-adjust matches x-height (526/1000 ÷ 1062/2048 = 101.44%); the overrides are then expressed against that adjusted em. Keeps font-display:swap, so the brand face still renders — it just lands on top of a fallback that already occupies the same space. */ @font-face{ font-family:'DM Sans Fallback'; src:local('Arial'),local('Helvetica Neue'),local('Liberation Sans'); size-adjust:101.44%; ascent-override:97.79%; descent-override:30.56%; line-gap-override:0%; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:auto} body{ font-family:var(--sans);background:var(--navy);color:var(--paper); line-height:1.5;font-size:17px;-webkit-font-smoothing:antialiased; overflow-x:hidden; } body.loading{overflow:hidden;height:100vh} a{color:inherit;text-decoration:none} img,svg,canvas{max-width:100%;display:block} .wrap{max-width:1200px;margin:0 auto;padding:0 32px} .mono{font-family:var(--mono)} /* the wordmark's period only ever renders on navy, and appears at 12px in .dquote-src where --green lands at 4.42:1 */ .dot{color:var(--green-on-navy)} /* Language toggle — leftover from when language was runtime state on . It is now a URL (/ = FR, /en/ = EN) and nothing sets .lang-en any more, so these two rules are inert. Kept as a safety net in case a page is ever served with the old markup mid-migration. The stray `}` that used to sit below them is gone (found 2026-08-16): the stylesheet carried one more closing brace than opening from line 53 down. Browsers discard an unmatched brace at top level so nothing rendered wrong, but it silently ends the block anything appended near it would land in. */ body:not(.lang-en) .en{display:none!important} body.lang-en .fr{display:none!important} /* ---- shared typography ---- */ h1,h2,h3{font-weight:700;letter-spacing:-.03em} h2{line-height:1.04;font-size:clamp(32px,5vw,58px);max-width:17ch} .lead{font-size:clamp(17px,1.5vw,20px);color:rgba(248,249,247,.72);max-width:60ch;margin-top:22px} .sec-eyebrow{font-family:var(--mono);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--slate); display:flex;align-items:center;gap:14px;margin-bottom:26px} .sec-eyebrow::before{content:"";width:34px;height:1.5px;background:var(--green);flex:none} .paper{background:var(--paper);color:var(--navy)} .paper .lead{color:var(--muted)} /* the same muted role, inverted for the light sections */ .paper .sec-eyebrow{color:var(--slate-ink)} /* ============ FOCUS ============ Before this rule the only authored focus style on the site was .cm-field input:focus. Every other control fell back to the UA's ~1px near-black ring, which is invisible on the navy header and dark sections, and computed to outline-width:0 on the FR/EN buttons. */ :focus-visible{outline:2px solid var(--green-lit);outline-offset:3px;border-radius:3px} .paper :focus-visible{outline-color:var(--green)} /* keyboard users get the ring; pointer users never see it */ :focus:not(:focus-visible){outline:none} .pad{padding:96px 0} section{position:relative} /* reveal helpers — hidden only when JS + animation are actually running */ .js-anim .rv{opacity:0;transform:translateY(40px)} .js-anim .rv-l{opacity:0;transform:translateX(-40px)} /* ============ PRELOADER ============ */ /* ============ CUSTOM CURSOR ============ */ /* ============ HEADER ============ */ header{position:fixed;top:0;left:0;right:0;z-index:90;transition:transform .5s var(--ease)} header.hidden{transform:translateY(-110%)} header .bar{ position:absolute;inset:14px 14px auto 14px;height:calc(100% - 20px);border-radius:16px; /* was rgba(16,29,44,.6) — over the navy hero that composites near-opaque (slate lang button 6.9:1, nav links 8.6:1), but the same .6 over a paper section (#F8F9F7) composites to a mid grey ~rgb(109,117,125), dropping the lang button to 1.98:1 and nav links to 3.14:1 — both fail AA. .88 keeps the glass-pill look (still blurred, still a hair translucent) but composites close enough to navy on every section: slate 5.1–7.1:1, nav links 6.8–8.7:1 depending on what's behind it. */ background:rgba(16,29,44,.88);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3); border:1px solid rgba(255,255,255,.08);opacity:0;transition:opacity .4s;pointer-events:none; } header.solid .bar{opacity:1} .nav{display:flex;align-items:center;justify-content:space-between;height:82px} .logo{font-weight:700;font-size:26px;letter-spacing:-.03em;position:relative;z-index:2} .nav-right{display:flex;align-items:center;gap:30px;position:relative;z-index:2} .nav-links{display:flex;gap:30px} .nav-links a{font-size:14.5px;font-weight:500;color:rgba(248,249,247,.72);position:relative;transition:color .25s} .nav-links a::after{content:"";position:absolute;left:0;bottom:-6px;width:100%;height:1.5px;background:var(--green); transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease)} .nav-links a:hover{color:var(--paper)} .nav-links a:hover::after{transform:scaleX(1);transform-origin:left} .lang{font-family:var(--mono);font-size:12px;display:flex;gap:2px;border:1px solid rgba(255,255,255,.14);border-radius:6px;overflow:hidden} /* was `transition:.2s` (shorthand = all properties), which animated the focus outline in from 0 — the ring read as absent for the first ~200ms */ /* The switcher is two now, not two