/* ========================================================================== tokens.css — the single source of truth for every colour, size, radius, duration and layer in the site. RULE: no hard-coded colour, size or duration values anywhere else in the codebase. If you need a new one, add it here first. To rebrand the whole site, change the six BRAND values in the first block of :root and the six in the dark block. Everything else is computed from them with color-mix(). ========================================================================== */ :root { color-scheme: light; /* ---- BRAND ------------------------------------------------------------- Placeholder tokens BRAND_INK ... BRAND_ALERT. See README, Appendix B. */ --c-ink: #0D1B2A; /* BRAND_INK deep navy, body text */ --c-paper: #F2F5F8; /* BRAND_PAPER cool off-white ground */ --c-pitch: #14508C; /* BRAND_PRIMARY deep blue */ --c-floodlight: #7FC4EC; /* BRAND_ACCENT light blue */ --c-terrace: #97A4B0; /* BRAND_NEUTRAL cool grey */ --c-alarm: #C2382C; /* BRAND_ALERT used sparingly */ /* Campaign name, for CSS `content:` use. Keep in sync with config.js. */ --campaign-name: "Fair Share Football"; /* ---- DERIVED SURFACES -------------------------------------------------- All computed from the six above. In dark mode --c-paper is dark and --c-ink is light, so every one of these inverts automatically. */ --c-surface: var(--c-paper); --c-surface-2: color-mix(in srgb, var(--c-paper) 94%, var(--c-ink)); --c-surface-3: color-mix(in srgb, var(--c-paper) 88%, var(--c-ink)); --c-surface-sunk: color-mix(in srgb, var(--c-paper) 82%, var(--c-ink)); /* The dark slab: the footer, the number band, the inverted section. It stays dark in BOTH themes — it is not "the opposite of the page", it is a specific surface with a specific palette on it (--c-text-invert for text, --c-floodlight for links). Both are overridden in the dark block so the pairing holds. */ --c-surface-invert: var(--c-ink); /* The veil behind a "coming soon" band. It has to be transparent enough to leave the button's own wording legible through it and opaque enough to carry white text itself. Deliberately one value, not a per-theme pair, and a literal rather than var(--c-surface-invert). The accent blue underneath it is #7FC4EC in the light theme and #A8DCF7 in the dark one, but --c-floodlight is overridden only in the media-query dark block, not in [data-theme="dark"] — so a light OS with the site toggled to dark shows dark surfaces over the light blue. A veil that followed the theme would then be paired with a button that had not. This figure clears both floors over either blue. The measured contrasts are in the band's own rule in components.css. */ --c-stamp-veil: rgb(13 27 42 / 51%); --c-surface-brand: var(--c-pitch); --c-surface-accent: var(--c-floodlight); /* ---- TEXT -------------------------------------------------------------- */ --c-text: var(--c-ink); --c-text-muted: color-mix(in srgb, var(--c-ink) 74%, var(--c-paper)); /* 58% measured 3.75:1 on paper, which fails AA for body-sized text. Raised until it clears 4.5:1 — a token used for text has to be usable for text. */ --c-text-faint: color-mix(in srgb, var(--c-ink) 68%, var(--c-paper)); --c-text-on-brand: var(--c-paper); --c-text-on-accent: var(--c-ink); --c-text-invert: var(--c-paper); /* Plain white, and deliberately NOT derived from --c-paper. Anything sitting on the hero illustration or the dark slab needs a value that cannot follow the theme: --c-paper is the light ground in light mode and the dark ground in dark mode, so a label built from it can inherit the wrong end. This is the one colour in the file that is fixed on purpose. */ --c-text-on-dark: #FFFFFF; /* An accent that sits ON the brand blue. Brand and accent are now the same hue, so this cannot simply be the accent: floodlight on pitch measures 4.31:1, which fails AA for the 14px kickers that use it. Lifted towards paper until it clears — 78% measures 4.89:1, leaving headroom rather than sitting on the line. In dark mode the brand is light and this has to go the other way, so both dark blocks override it. */ --c-accent-on-brand: color-mix(in srgb, var(--c-floodlight) 78%, var(--c-paper)); --c-link: color-mix(in srgb, var(--c-pitch) 88%, var(--c-ink)); --c-link-hover: var(--c-ink); --c-link-visited: color-mix(in srgb, var(--c-pitch) 72%, var(--c-ink)); /* ---- BORDERS AND LINES ------------------------------------------------- */ --c-border: color-mix(in srgb, var(--c-terrace) 58%, var(--c-paper)); --c-border-strong: color-mix(in srgb, var(--c-ink) 34%, var(--c-paper)); --c-border-brand: var(--c-pitch); --c-rule-pitch: color-mix(in srgb, var(--c-pitch) 22%, var(--c-paper)); /* ---- STATES ------------------------------------------------------------ */ --c-hover-wash: color-mix(in srgb, var(--c-pitch) 8%, transparent); --c-active-wash: color-mix(in srgb, var(--c-pitch) 16%, transparent); --c-selected: color-mix(in srgb, var(--c-floodlight) 30%, var(--c-paper)); --c-disabled-bg: color-mix(in srgb, var(--c-terrace) 30%, var(--c-paper)); /* WCAG exempts disabled controls from contrast, but a disabled button nobody can read is still a bad button. This clears 3:1 on --c-disabled-bg. */ --c-disabled-fg: color-mix(in srgb, var(--c-ink) 62%, var(--c-paper)); /* Focus ring: a dark/light core plus a permanent accent halo, so it stays visible on brand, accent, paper and photographic backgrounds alike. */ --c-focus: var(--c-ink); --c-focus-halo: var(--c-floodlight); --focus-width: 3px; --focus-offset: 2px; /* ---- FEEDBACK ---------------------------------------------------------- */ --c-success: var(--c-pitch); --c-success-bg: color-mix(in srgb, var(--c-pitch) 12%, var(--c-paper)); /* As with --c-error: the brand accent is a fill colour, not a text colour. At full strength on its own tinted ground it is nowhere near legible. The text token is mixed down towards ink until it clears 4.5:1 on --c-warn-bg. */ --c-warn: color-mix(in srgb, var(--c-floodlight) 30%, var(--c-ink)); --c-warn-bg: color-mix(in srgb, var(--c-floodlight) 26%, var(--c-paper)); /* --c-alarm is the brand red, used for fills, rules and icons. Text needs more weight than the brand red carries on a tinted ground, so the text token is darkened against ink until it clears 4.5:1 on --c-error-bg. */ --c-error: color-mix(in srgb, var(--c-alarm) 74%, var(--c-ink)); --c-error-bg: color-mix(in srgb, var(--c-alarm) 9%, var(--c-paper)); --c-info: color-mix(in srgb, var(--c-ink) 70%, var(--c-paper)); --c-info-bg: var(--c-surface-3); /* ---- CHART PALETTE ----------------------------------------------------- Never more than five categorical colours. Every series is also given a pattern fill in chart-core.js so the charts survive greyscale printing and colour-blind vision. */ --c-cat-1: var(--c-pitch); /* Not the brand accent. The light blue on paper is far under 3:1, and a chart series is a graphical object that has to clear 3:1 on its own (WCAG 1.4.11); the stroke around a mark is the page ground, so it cannot rescue the fill. This is an ochre — deliberately the one warm hue in the set, so the busiest chart still has something that is not a blue. */ --c-cat-2: #9A7418; /* Was #2C5F8A, which became almost the brand blue once the palette changed, leaving cat-1 and cat-3 near-identical. Purple keeps five distinguishable hues without leaning on the pattern fills to do all the work. */ --c-cat-3: #6A3D9A; --c-cat-4: var(--c-alarm); --c-cat-5: color-mix(in srgb, var(--c-terrace) 70%, var(--c-ink)); --c-chart-grid: color-mix(in srgb, var(--c-terrace) 44%, var(--c-paper)); --c-chart-axis: color-mix(in srgb, var(--c-ink) 55%, var(--c-paper)); --c-chart-label: var(--c-text-muted); /* Sequential ramp, brand blue, for intensity encodings. */ --c-seq-1: color-mix(in srgb, var(--c-pitch) 14%, var(--c-paper)); --c-seq-2: color-mix(in srgb, var(--c-pitch) 34%, var(--c-paper)); --c-seq-3: color-mix(in srgb, var(--c-pitch) 56%, var(--c-paper)); --c-seq-4: color-mix(in srgb, var(--c-pitch) 78%, var(--c-paper)); --c-seq-5: var(--c-pitch); /* ---- TYPOGRAPHY -------------------------------------------------------- One heavy condensed display face, one legible text face. Ships with system stacks so there is no network request and no layout shift on first paint. To upgrade to self-hosted variable faces, drop the subset .woff2 files into assets/fonts/, uncomment the @font-face blocks at the foot of this file, and the stacks below pick them up. See README, "Fonts". */ /* The display stack is the platform's own UI face: Segoe UI on Windows, San Francisco on Apple, Roboto on Android. Every reader has one of them, so the headings look the same everywhere and nothing is downloaded. It used to lead with condensed poster faces (Archivo Black, then Impact). Nobody had the first, so in practice the headings rendered in Impact — very heavy, very tight, and hard to read at display size. Readability wins over the poster look: this stack is open, evenly spaced and legible at both 3.3rem and 6.5rem. */ --font-display: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-text: "Fair Share Text", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace; --fw-regular: 400; --fw-medium: 500; --fw-bold: 700; --fw-black: 900; /* Type scale: 1.250 minor third, fluid between 360px and 1440px. */ --fs-2xs: clamp(0.75rem, 0.7333rem + 0.0741vw, 0.8rem); --fs-xs: clamp(0.8125rem, 0.7917rem + 0.0926vw, 0.875rem); --fs-sm: clamp(0.875rem, 0.8542rem + 0.0926vw, 0.9375rem); --fs-base: clamp(1rem, 0.9792rem + 0.0926vw, 1.0625rem); --fs-md: clamp(1.125rem, 1.0833rem + 0.1852vw, 1.25rem); --fs-lg: clamp(1.3rem, 1.2125rem + 0.3889vw, 1.5625rem); --fs-xl: clamp(1.5rem, 1.349rem + 0.6711vw, 1.953rem); --fs-2xl: clamp(1.8rem, 1.5863rem + 0.9496vw, 2.441rem); --fs-3xl: clamp(2.1rem, 1.7827rem + 1.4104vw, 3.052rem); --fs-4xl: clamp(2.5rem, 2.0617rem + 1.9481vw, 3.815rem); --fs-5xl: clamp(2.9rem, 2.2773rem + 2.7674vw, 4.768rem); --fs-display: clamp(3.3rem, 2.2333rem + 4.7407vw, 6.5rem); /* The hero headline is a sentence, not a two-word slogan, so it needs a smaller size than the 404 glyph that also uses --fs-display. Sized so the current headline sets in three lines at desktop without the block growing tall enough to push the buttons below the fold. */ --fs-hero: clamp(2.5rem, 1.75rem + 3.3vw, 4.6rem); --lh-tight: 1.02; /* 0.94 was tight enough that descenders nearly touched the line below. 1.02 gives the two-line headline room without loosening it into a list. */ --lh-display: 1.02; --lh-heading: 1.12; --lh-snug: 1.35; --lh-body: 1.6; --lh-loose: 1.75; /* Large type can carry a little negative tracking; body type cannot. The old -0.02em was set for a condensed poster face and closed the letters up badly on a normal-width UI face. -0.015em at display size tightens the headline enough to look set rather than typed, while keeping the letters apart enough to read at a glance. Headings sit nearer zero because they run at a third of the size, where the same ratio bites much harder. */ --ls-display: -0.015em; --ls-heading: -0.008em; --ls-body: 0em; --ls-caps: 0.08em; --ls-kicker: 0.14em; /* Body measure. Section 2 of the brief: 62-72 characters. */ --measure: 66ch; --measure-narrow: 54ch; --measure-wide: 78ch; /* ---- SPACING — 4px base ------------------------------------------------ */ --sp-1: 0.25rem; /* 4px */ --sp-2: 0.5rem; /* 8px */ --sp-3: 0.75rem; /* 12px */ --sp-4: 1rem; /* 16px */ --sp-5: 1.5rem; /* 24px */ --sp-6: 2rem; /* 32px */ --sp-7: 3rem; /* 48px */ --sp-8: 4rem; /* 64px */ --sp-9: 6rem; /* 96px */ --sp-10: 8rem; /* 128px */ /* Fluid section rhythm */ --sp-section: clamp(3rem, 1.5rem + 6vw, 7rem); --sp-gutter: clamp(1rem, 0.5rem + 2vw, 2rem); /* ---- LAYOUT ------------------------------------------------------------ */ --container: 75rem; /* 1200px */ --container-wide: 90rem; /* 1440px */ --container-narrow: 46rem; /* 736px */ --header-h: 4.5rem; /* phones: see the desktop override below */ --header-h-compact: 3.75rem; --hero-h: clamp(30rem, 22rem + 28vw, 44rem); /* ---- RADII ------------------------------------------------------------- */ --r-0: 0; --r-xs: 2px; --r-sm: 4px; --r-md: 8px; --r-lg: 14px; --r-xl: 22px; --r-pill: 999px; /* ---- BORDER WIDTHS ----------------------------------------------------- */ --bw-hair: 1px; --bw-thin: 2px; --bw-thick: 3px; --bw-slab: 6px; /* ---- SHADOWS ----------------------------------------------------------- */ --shadow-0: none; --shadow-1: 0 1px 2px color-mix(in srgb, var(--c-ink) 10%, transparent); --shadow-2: 0 2px 6px color-mix(in srgb, var(--c-ink) 12%, transparent), 0 1px 2px color-mix(in srgb, var(--c-ink) 8%, transparent); --shadow-3: 0 8px 24px color-mix(in srgb, var(--c-ink) 16%, transparent), 0 2px 6px color-mix(in srgb, var(--c-ink) 10%, transparent); --shadow-header: 0 2px 0 color-mix(in srgb, var(--c-ink) 8%, transparent), 0 6px 18px color-mix(in srgb, var(--c-ink) 10%, transparent); /* ---- MOTION ------------------------------------------------------------ */ --dur-instant: 80ms; --dur-fast: 140ms; --dur-base: 240ms; --dur-slow: 420ms; --dur-slower: 900ms; --dur-bloom: 14s; /* floodlight bloom keyframe */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-in: cubic-bezier(0.55, 0, 1, 0.45); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --nav-intent-delay: 120ms; /* mega-menu hover intent, mirrored in nav.js */ /* ---- Z-INDEX LADDER ---------------------------------------------------- */ --z-under: -1; --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-header: 200; --z-panel: 300; --z-overlay:400; --z-modal: 500; --z-toast: 600; --z-skip: 700; /* ---- OPACITY ----------------------------------------------------------- */ --o-dim: 0.2; /* dimmed flow-diagram ribbons */ --o-muted: 0.55; --o-hairline: 0.14; /* pitch-marking background rules */ --o-halftone: 0.34; /* ---- DUOTONE PHOTOGRAPHY ----------------------------------------------- */ --duo-shadow: var(--c-ink); --duo-highlight: var(--c-floodlight); --duo-mix: multiply; --halftone-size: 6px; } /* The header carries the full lockup, not a reduced one, so from the width at which there is room for it the bar is taller. Below 1200px the tightening band keeps a smaller lockup and the 4.5rem bar, because six nav items and a call to action leave nothing to grow into. It stays on :root rather than on .site-header because scroll-padding-top and half a dozen scroll-margin-top rules are calculated from this token and have to track the real height, or an anchored heading lands underneath the bar. */ @media (min-width: 75rem) { :root { --header-h: 7rem; } } /* Between the phone breakpoint and the width at which the nav unfolds, the bar holds the lockup and the menu button and nothing else, so it can afford to be taller than the 4.5rem phone bar and let the lockup grow into it. */ @media (min-width: 30.0625rem) and (max-width: 56.1875rem) { :root { --header-h: 5.5rem; } } /* ========================================================================== DARK PALETTE Two selectors, identical contents: 1. system preference, unless the reader has explicitly chosen light 2. explicit [data-theme="dark"], which wins in both directions KEEP THESE TWO BLOCKS IN SYNC. Only the six brand values and a handful of mix ratios change; every derived token above recomputes itself. ========================================================================== */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --c-ink: #E6EDF3; /* now the light value: text on a dark ground */ --c-paper: #0B141D; /* now the dark ground */ --c-pitch: #5FA4DC; --c-floodlight: #A8DCF7; --c-terrace: #7A8894; --c-alarm: #F07E6E; --c-text-on-brand: #0B1013; --c-text-on-accent: #0B1013; --c-accent-on-brand: color-mix(in srgb, var(--c-pitch) 24%, #05090B); /* The dark slab stays dark; text on it stays light. See :root. */ --c-surface-invert: #06090B; --c-text-invert: var(--c-ink); --c-link: color-mix(in srgb, var(--c-pitch) 92%, var(--c-ink)); --c-link-hover: var(--c-floodlight); --c-link-visited: color-mix(in srgb, var(--c-pitch) 76%, var(--c-ink)); --c-border: color-mix(in srgb, var(--c-terrace) 42%, var(--c-paper)); --c-border-strong: color-mix(in srgb, var(--c-ink) 40%, var(--c-paper)); --c-focus: var(--c-paper); --c-focus-halo: var(--c-floodlight); --c-cat-2: var(--c-floodlight); --c-cat-3: #79B4E0; --c-warn: color-mix(in srgb, var(--c-floodlight) 90%, var(--c-ink)); --shadow-1: 0 1px 2px rgb(0 0 0 / 0.5); --shadow-2: 0 2px 6px rgb(0 0 0 / 0.55), 0 1px 2px rgb(0 0 0 / 0.4); --shadow-3: 0 8px 24px rgb(0 0 0 / 0.6), 0 2px 6px rgb(0 0 0 / 0.45); --shadow-header: 0 2px 0 rgb(0 0 0 / 0.5), 0 6px 18px rgb(0 0 0 / 0.45); --duo-shadow: #05090B; --duo-highlight: var(--c-pitch); --duo-mix: screen; --o-hairline: 0.2; --o-halftone: 0.26; } } :root[data-theme="dark"] { color-scheme: dark; --c-ink: #E6EDF3; --c-paper: #0B141D; --c-pitch: #5FA4DC; --c-floodlight: #A8DCF7; --c-terrace: #7A8894; --c-alarm: #F07E6E; --c-text-on-brand: #0B1013; --c-text-on-accent: #0B1013; --c-accent-on-brand: color-mix(in srgb, var(--c-pitch) 24%, #05090B); /* The dark slab stays dark; text on it stays light. See the note in :root. */ --c-surface-invert: #06090B; --c-text-invert: var(--c-ink); --c-link: color-mix(in srgb, var(--c-pitch) 92%, var(--c-ink)); --c-link-hover: var(--c-floodlight); --c-link-visited: color-mix(in srgb, var(--c-pitch) 76%, var(--c-ink)); --c-border: color-mix(in srgb, var(--c-terrace) 42%, var(--c-paper)); --c-border-strong: color-mix(in srgb, var(--c-ink) 40%, var(--c-paper)); --c-focus: var(--c-paper); --c-focus-halo: var(--c-floodlight); --c-cat-2: var(--c-floodlight); --c-cat-3: #79B4E0; --c-warn: color-mix(in srgb, var(--c-floodlight) 90%, var(--c-ink)); --shadow-1: 0 1px 2px rgb(0 0 0 / 0.5); --shadow-2: 0 2px 6px rgb(0 0 0 / 0.55), 0 1px 2px rgb(0 0 0 / 0.4); --shadow-3: 0 8px 24px rgb(0 0 0 / 0.6), 0 2px 6px rgb(0 0 0 / 0.45); --shadow-header: 0 2px 0 rgb(0 0 0 / 0.5), 0 6px 18px rgb(0 0 0 / 0.45); --duo-shadow: #05090B; --duo-highlight: var(--c-pitch); --duo-mix: screen; --o-hairline: 0.2; --o-halftone: 0.26; } /* Reduced motion: collapse every duration token to nothing. Individual components also check the media query, but zeroing the tokens means any component built only from tokens is covered automatically. */ @media (prefers-reduced-motion: reduce) { :root { --dur-instant: 0ms; --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; --dur-slower: 0ms; --dur-bloom: 0ms; } } /* ========================================================================== SELF-HOSTED FONTS — not shipped. See README, "Fonts", and CONTENT-GUIDE.md. Drop the subset .woff2 files into assets/fonts/, uncomment, and the stacks above pick them up. The system fallbacks are chosen so that enabling these does not shift layout. @font-face { font-family: "Fair Share Display"; src: url("../fonts/fair-share-display.woff2") format("woff2-variations"); font-weight: 400 900; font-stretch: 75% 100%; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+FB01-FB02; } @font-face { font-family: "Fair Share Text"; src: url("../fonts/fair-share-text.woff2") format("woff2-variations"); font-weight: 350 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+FB01-FB02; } ========================================================================== */