/* * Colour read off the live Squarespace site's theme variables in site.css and * converted from HSL. None of these values is invented. * --ground hsl(0, 0%, 0%) * --type hsl(60, 4.35%, 95.49%) * --accent hsl(349.09, 82.5%, 52.94%) 4.84:1 on pure black * --grey hsl(0, 0%, 21.96%) * The ground is pure black deliberately. See spec §5 before changing it. */ :root { --ground: #000000; --type: #F4F4F3; --accent: #EA2448; --grey: #383838; /* * Extended neutrals. Tasks 6-14 needed finer text- and surface-hierarchy * steps than the four base tokens alone give (a hairline reads differently * from a border, muted meta text from body text), so every task from Nav * onward introduced literal hex greys as it went, each one legitimate on * its own but never registered anywhere. Task 16's whole-site colour audit * is what actually surfaced them all at once: 14 distinct colours in the * built CSS, not 4. All ten of these are achromatic (no rogue hue sneaked * in alongside them, which is what the audit is actually guarding * against), so registering them here is the "add it to tokens.css... so * every addition is a decision rather than a drift" the audit's own * comment asks for, rather than a silent one. * Two families: near-black surfaces/borders, and muted text. */ --surface-1: #141414; --surface-2: #171717; --surface-3: #1E1E1E; --surface-4: #232323; --surface-5: #2A2A2A; --surface-6: #3D3D3D; /* Raised from a 5.23:1-on-black value. --text-quiet carries ~90% of the site's 11-14px meta/label text (checked: 34 of 38 pairings site-wide), where WCAG's flat 4.5:1 floor is real but not generous enough to read comfortably at that size. Now 6.23:1. It's also the last remaining grey text tier: --text-muted/--text-dim/--text-soft read as too hard to read for real body copy, so they now resolve straight to --type (white) and stay only as semantic names so call sites don't need touching. --text-quiet stays grey because it carries genuinely minor annotations only (eyebrow labels, timestamps, source attribution), never body copy. */ --text-quiet: #8C8C8A; --text-muted: var(--type); --text-dim: var(--type); --text-soft: var(--type); /* Type scale. Display sizes are fluid; the article measure is fixed at ~68ch. */ --step-quote: clamp(30px, 4.6vw, 64px); /* Sized for a genuinely long quote (30+ words): the previous 50px max read as oversized once beat 3 started sourcing a real athlete quote of that length rather than a short placeholder. */ --step-quote-long: clamp(19px, 2.6vw, 34px); --step-title: clamp(30px, 4.4vw, 52px); --step-section: clamp(22px, 2.6vw, 34px); --step-body: 19px; --step-meta: 13px; --leading-tight: 1.01; --leading-body: 1.72; --tracking-display: -0.035em; --measure: 68ch; --gutter: 8vw; } /* * Cross-document view transitions, CSS only. Spec §8 asks for native View * Transitions between routes; this is the native form and costs no JavaScript, * which is what lets article pages stay script-free. Browsers without support * navigate instantly, which §8 names as the accepted fallback. */ @view-transition { navigation: auto; } *, *::before, *::after { box-sizing: border-box; } html { background: var(--ground); scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; /* The site has no light mode (tokens.css's --ground is pure black by deliberate design, spec §5), so telling the UA that up front keeps native chrome — scrollbars, form controls, the browser's own dark/light heuristics — in the same dark register as the page around it. */ color-scheme: dark; } /* Fixed product header: in-page navigation must never land underneath it. */ [id] { scroll-margin-top: 84px; } body { margin: 0; background: var(--ground); color: var(--type); font-family: var(--font-display), system-ui, sans-serif; font-weight: 500; -webkit-font-smoothing: antialiased; } img, svg, video { display: block; max-width: 100%; } a { color: inherit; } /* * touch-action: manipulation drops the double-tap-to-zoom delay some mobile * browsers still add before honouring a tap on these; every one of them is * already a real button/link/control with its own tap target, never a zoom * surface. The default translucent tap highlight is disabled deliberately, * not silently: every one of these elements already carries its own * hover/active/focus-visible feedback, and the default highlight is a light * flash that reads wrong against this site's all-black ground. */ a, button, input, select, textarea, summary { touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .skip-link { position: fixed; top: 12px; left: 12px; z-index: 100; translate: 0 -160%; padding: 10px 14px; background: var(--type); color: var(--ground); border-radius: 999px; font-size: 13px; font-weight: 700; text-decoration: none; transition: translate .18s ease; } .skip-link:focus-visible { translate: 0; } /* * Every "Book an intro call" control is a