/* ========================================================================== Base: fonts, reset, document defaults, layout primitives. Colour and size values come from tokens.css. Never hard-code a hex here. ========================================================================== */ /* ---------- Fonts (self-hosted, no runtime request to Google) ---------- */ @font-face { font-family: 'Bebas Neue'; src: url('/assets/fonts/BebasNeue-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Atkinson Hyperlegible'; src: url('/assets/fonts/AtkinsonHyperlegible-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Atkinson Hyperlegible'; src: url('/assets/fonts/AtkinsonHyperlegible-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Atkinson Hyperlegible'; src: url('/assets/fonts/AtkinsonHyperlegible-Italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'Atkinson Hyperlegible'; src: url('/assets/fonts/AtkinsonHyperlegible-BoldItalic.woff2') format('woff2'); font-weight: 700; font-style: italic; font-display: swap; } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--bg-0); color: var(--text); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); /* The design is built on saturated fills against a dark ground; stop the browser from washing them out with its own synthetic smoothing. */ -webkit-font-smoothing: antialiased; overflow-x: hidden; } h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; } ul, ol { padding: 0; list-style: none; } img, picture, video, canvas, svg { display: block; max-width: 100%; } /* The `hidden` attribute only sets `display: none` at user-agent strength, so any component rule with its own `display` silently defeats it. State in this site is toggled with `hidden`, so it has to win. */ [hidden] { display: none !important; } input, button, textarea, select { font: inherit; color: inherit; } button { background: none; border: 0; } a { color: inherit; } /* ---------- Display type ---------- */ .display { font-family: var(--font-display); text-transform: uppercase; letter-spacing: var(--ls-display); font-weight: 400; } /* Bebas sits high in its box; the comps set tight line heights and rely on the glyphs, not the leading, to define the block. */ h1.display, h2.display, h3.display { line-height: .85; } /* A single long word in the display face must not push the page sideways. The comps were drawn around short English headings ("Privacy", "Downloads"); their French equivalents are one long compound word each ("Confidentialite", "Telechargements") and at 360px they overflowed the container and gave the page a horizontal scrollbar -- a release criterion failure, not a cosmetic one. `hyphens: auto` does the right thing per language, because is set from the locale: French hyphenates by French rules. `overflow-wrap` is the guarantee underneath it, for an engine with no hyphenation dictionary for the language, where the word would otherwise still spill. This only ever fires on a word too long for its box, so English headings are untouched and no comp changes. */ .display { hyphens: auto; overflow-wrap: break-word; } /* ---------- Focus ---------- */ /* Never remove focus without replacing it: this is a release criterion. */ :focus-visible { outline: var(--outline); outline-offset: var(--outline-offset); } /* Older engines without :focus-visible still get a ring. */ :focus:not(:focus-visible) { outline: none; } /* ---------- Layout primitives ---------- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: var(--section-y); } /* ---------- Utilities ---------- */ .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .skip-link { position: absolute; top: 0; left: 0; z-index: 100; padding: var(--space-3) var(--space-5); background: var(--yellow); color: var(--ink); font-family: var(--font-display); font-size: var(--fs-btn); letter-spacing: var(--ls-btn); text-transform: uppercase; text-decoration: none; transform: translateY(-120%); } .skip-link:focus { transform: translateY(0); } /* ---------- Motion ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }