/* =========================================================================== RED CENTRENATS - DESIGN TOKENS Concept: "Redline Country" (see design/DESIGN-DIRECTION.md) This file is the single source of truth for every colour, size, duration and easing curve on the site. Nothing downstream may hard-code a hex value, a pixel size, a duration or a cubic-bezier - if a value is needed and isn't here, add it here first. The palette is derived from the kept RCN logo, whose red was sampled from the actual artwork at RGB(231,62,41) = #E73E29. The previous site's #CC1F24 was invented independently of the logo and does not match it. =========================================================================== */ :root { /* ---------- SURFACES (dark-first) ---------- */ --surface-0: #0D0B0A; /* base page background - warm near-black, never pure #000 */ --surface-1: #171412; /* raised panels, cards, header */ --surface-2: #241F1B; /* modals, stuck-header state, popovers */ --surface-3: #342C26; /* highest elevation / active hover panels */ /* THE card surface. Every card that sits directly on the page field (card grids, day cards, ticket tiers/notes, highlights slides, precinct tiles, the newsletter panel) uses this, not surface-1 - Rick 29 Jul: surface-1 cards sank into the page; the newsletter panel's surface-2 "stands out better on the main site bg colour". One alias so the whole card family moves together if this is ever retuned. */ --surface-card: var(--surface-2); --surface-paper: #F2EAE0; /* rare light surfaces: the printed-form contact popup (tickets left paper 29 Jul) */ /* ---------- INK ---------- */ --ink-1: #F7F3EF; /* primary text on dark - warm off-white, never pure #fff */ --ink-2: #C9BFB6; /* secondary text on dark */ --ink-3: #8A8078; /* tertiary / captions on dark. 5.09:1 - AA normal text */ --ink-on-paper: #1A1512; /* primary text on --surface-paper */ /* ---------- BRAND RED ---------- TWO reds at the top end, and the distinction is binding: red-500 = the BRAND red. Large display type, links on dark, icons, borders. As text it only clears AA at >=24px regular or >=18.66px bold. red-600 = the FUNCTIONAL red. Solid button fills, and any body-size text on a light surface. Use this whenever red-500 would fail. */ --color-red-300: #FF6B4D; --color-red-500: #E73E29; /* the sampled logo red */ --color-red-600: #C22E1C; --color-red-700: #8F2013; --gradient-red: linear-gradient(180deg, #E73E29 0%, #8F2013 100%); /* ---------- OCHRE / RUST (desert secondary) ---------- */ --color-ochre-300: #E8B074; --color-ochre-500: #C97A2E; --color-ochre-700: #7A4A1C; /* ---------- DUSK (photographic duotone mapping ONLY) ---------- Never UI chrome, never text. Only as a tonal range across a photo. */ --duotone-shadow: #1B2A3D; --duotone-highlight: #4C6B85; /* ---------- SEMANTIC ---------- */ --color-hot-500: #F2A93C; /* urgency/scarcity only */ --color-success-500: #4C9A5A; /* always paired with icon + text, never colour alone */ --color-error-500: #E73E29; /* always paired with icon + text */ /* ---------- BORDERS ---------- */ --border-subtle: rgba(247, 243, 239, 0.12); --border-strong: rgba(247, 243, 239, 0.28); --border-paper: rgba(26, 21, 18, 0.16); /* ---------- SCRIMS (text-over-photo legibility) ---------- Text never sits directly on unmodified photography. Use a scrim layer behind the text - not filter:brightness() on the image itself. */ --scrim-soft: rgba(13, 11, 10, 0.45); --scrim-strong: rgba(13, 11, 10, 0.82); --scrim-gradient-up: linear-gradient(0deg, rgba(13,11,10,0.96) 0%, rgba(13,11,10,0.55) 45%, rgba(13,11,10,0) 100%); /* ---------- COLOUR BRUISES (page-field art, 29 Jul) ---------- Vast, very-low-alpha radial washes of the two brand hues breathed into the page background - the near-black field picks up faint desert-heat colour that shifts as the page scrolls past. Kept far below any level that could touch text contrast (the strongest is 6% alpha on the page field). The footer pair is stronger because it sits INSIDE an opaque footer surface as a designed glow, not under running text. The Arrernte acknowledgement section is immune by construction: it forces an opaque surface-0 background (site.css SS10). */ /* Skyfield (three.js dusk backdrop, 31 Jul, Rick's pick: "Ranges parallax at dusk"). The WebGL scene reads these at runtime - they are design values, so they live here, not in the shader. Scroll position drives the blend from the dusk pair to the night pair (page top = golden hour, page bottom = starlit). All four sit well below the luminance ceiling the bruise washes established, so text contrast over the scene never drops under 6.9:1 against --ink-1 even at the brightest horizon point. */ --sky-dusk-top: #201016; /* upper sky at golden hour - deep plum-brown */ --sky-dusk-horizon: #8A3F1C; /* horizon glow at golden hour - embered amber */ --sky-night-top: #07070D; /* upper sky at night - blue-black */ --sky-night-horizon: #241219; /* horizon at night - a last whisper of ember (lifted 31 Jul: the first pass read as pure black in situ) */ --sky-sun: #F2A65A; /* the sinking sun's glow, ochre-300 warmed */ --sky-star: #D8DCE8; /* star points - cool white, never pure #fff */ --bruise-red: rgba(231, 62, 41, 0.06); /* page-field wash, brand red */ --bruise-ochre: rgba(201, 122, 46, 0.055); /* page-field wash, ochre */ --bruise-red-ember: rgba(143, 32, 19, 0.35); /* footer: ember glow rising from below the fold */ --bruise-ochre-dawn: rgba(201, 122, 46, 0.10);/* footer: faint dawn bruise at the top corner */ /* Footer seam: a heated-metal hairline replacing the flat border - brand red cooling to ochre, dying out before either edge. */ --seam-heat: linear-gradient(90deg, transparent, rgba(231, 62, 41, 0.5) 22%, rgba(201, 122, 46, 0.5) 78%, transparent); /* ---------- FOCUS ---------- Double ring + soft red glow. Visible on dark and on paper. Replaces the old site's off-brand #0054C5 blue. Blue is not a colour in this system. */ --focus-ring: 0 0 0 2px var(--surface-0), 0 0 0 4px var(--ink-1), 0 0 10px 2px rgba(231, 62, 41, 0.55); --focus-ring-paper: 0 0 0 2px var(--surface-paper), 0 0 0 4px var(--ink-on-paper), 0 0 10px 2px rgba(231, 62, 41, 0.45); /* ---------- TYPE FAMILIES ---------- Google retired the "Big Shoulders Display" and "Big Shoulders Stencil Display" families and merged each into a single variable family with an optical-size axis. The family names below are the ones actually baked into the woff2 files in public/fonts - do not "restore" the old Display names, they resolve to nothing and fall back to Arial Narrow. Big Shoulders axes: wght 100-900, opsz 10-72 (file default 72). Archivo axes: wght 100-900, plus a true variable italic. */ --font-display: 'Big Shoulders', 'Arial Narrow', sans-serif; --font-stencil: 'Big Shoulders Stencil', var(--font-display); --font-body: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Optical size, set per type role rather than left at the file default. opsz 72 is the poster/display cut - correct for the big headline roles and wrong for a 18px sub-heading, where the display cut's tight apertures hurt legibility. Apply via font-variation-settings on the relevant role. */ --opsz-display: 72; --opsz-heading: 36; --opsz-label: 18; /* ---------- TYPE SCALE (fluid) ---------- HEADINGS REDUCED 30% on 2026-07-27 at the client's request. Every clamp component (min, the rem and vw halves of the preferred term, and max) was multiplied by 0.7, so the fluid curve keeps its exact shape and only its amplitude changes - scaling just the max would have flattened the small-screen end and changed the ratio between breakpoints. Original values are kept in the trailing comments so the change is reversible without going to git. Body sizes are untouched: the request was headings, and shrinking body copy too would have preserved the contrast ratio rather than reducing it, which is the opposite of the intent. */ --text-display-1: clamp(1.925rem, 1.4rem + 3.5vw, 4.9rem); /* 31 -> 78 (was 44 -> 112) */ --text-display-2: clamp(1.4rem, 1.05rem + 2.1vw, 3.15rem); /* 22 -> 50 (was 32 -> 72) */ /* h3/h4 increased again 28 Jul (client: "increase h3 and h4 size") - up ~27% from the 30%-reduced values above, same clamp-scaling method so the curve shape holds. This also fixes a real defect the reduction had left: --text-h4's floor was 12.6px, UNDER --text-body's fixed 16px, so a mobile h4 rendered smaller than its own body copy. The new floor (1rem/16px) can't repeat that at any viewport width. */ --text-display-3: clamp(1.35rem, 1.1rem + 1.35vw, 2.2rem); /* 21.6 -> 35.2 (30%-reduced: 17 -> 28; original: 24 -> 40) */ /* h4 nudged up again 29 Jul ("make the h4 size a little bigger sitewide") - back to the pre-reduction curve, 18 -> 24. */ --text-h4: clamp(1.125rem, 1rem + 0.5vw, 1.5rem); /* 18 -> 24 (previous nudge: 16 -> 21.6; 30%-reduced: 13 -> 17) */ /* One step under h4 - added for search-result titles (§11.8), which need a display-face size smaller than any section heading so a results list doesn't shout over the page structure. */ --text-h5: clamp(0.7rem, 0.63rem + 0.245vw, 0.875rem); /* 11 -> 14 (was 16 -> 20) */ --text-body-lg: clamp(1.125rem, 1rem + 0.3vw, 1.25rem); /* 18 -> 20 */ --text-body: 1rem; --text-small: 0.875rem; --text-micro: 0.75rem; /* Scaled by the same 0.7. Not an element, but it is display-scale type that sits in the same hierarchy: left at its old size it would have become LARGER than h1 (96px vs the new 78px max) and the prize figure would have out-shouted every heading on the page. Say the word and it goes back. */ --text-odometer: clamp(1.75rem, 1.4rem + 2.1vw, 4.2rem); /* 28 -> 67 (was 40 -> 96) */ /* Line heights - display is poster-tight, body is generous */ --leading-display: 1.02; --leading-h4: 1.15; --leading-body-lg: 1.55; --leading-body: 1.6; --leading-small: 1.45; /* Tracking. Condensed display type needs NEGATIVE tracking at large sizes; small uppercase UI text needs POSITIVE tracking. Opposite rules, both correct - do not "normalise" these to one value. */ --tracking-display: -0.02em; --tracking-h4: 0em; --tracking-ui: 0.05em; /* One control height for text inputs and selects, so a button placed beside a field can square off against it (site.css §5 and §11.24). A touch target plus a little breathing room; see the