/* * Design tokens, MEASURED off the existing site's rendered pages rather than * invented, so the rebuilt pages sit next to the existing ones without a seam. * * Re-measured on 2026-09-24 after Jimmy: "Now it is all but in line." The * first version read hex values out of style.css and picked the wrong ones -- * #0a0a0a appears fifteen times in that file but is NOT the page background; * getComputedStyle on the rendered home page says #242424. Reading a * stylesheet tells you which colours exist, not which ones win. Everything * below now comes from the browser, on the live home page: * * body background #242424, Rajdhani 300, 16px/24px, white * h1 Rajdhani 500, 40px/48px, UPPERCASE, #de0b14 * h2 Rajdhani 500, 32px/38.4px, UPPERCASE, #de0b14 * .container max-width 1480px, padding-inline 60px * content section padding-block 60px, background #1d1d1d * footer background #242425, padding-block 30px * .button #de0b14, white, 12px 20px, radius 5px, 16px/300 UPPERCASE * * Provenance: site/dist/style.css — #de0b14 appears 69 times (the primary red), * #0a0a0a 15 times (the page background), #2d2d2d and #242424 as surfaces, * #a8a8a7 as muted text. Rajdhani at 300/500/600 is what the live site loads, * and Jan confirmed it on 2026-09-23 over the landing pages' Bebas Neue. * * The gold is the one token not in style.css: it is the VIP accent from the * brand guidelines, used sparingly and never as text on dark. * * Fonts are referenced by family name only here. Self-hosting them is an M3 task * and a prerequisite for enforcing the Content-Security-Policy, which is why the * policy currently ships in report-only mode. */ :root { /* Brand */ --crs-red: #de0b14; --crs-red-bright: #f1062c; /* Red for SMALL text. #de0b14 on #242424 measures 3.08:1 -- fine for a fill, a rule or a heading at 24px or more, and a WCAG AA failure for body copy, labels, badges and inline links. Fourteen of those were live across six of the seven page types. #ff4d55 measures 4.76:1 and still reads as the same red at the sizes it is used. A deliberate deviation from the existing site, which uses #de0b14 everywhere and fails the same check. */ --crs-red-text: #ff4d55; --crs-gold: #c9a84c; /* Surfaces. `--crs-bg` is the page, and it is NOT the darkest value here -- the existing site sits at #242424 and drops to #1d1d1d for a banded section, which is the opposite of what a "darkest first" list suggests. */ --crs-bg: #242424; --crs-band: #1d1d1d; --crs-footer: #242425; --crs-black: #0a0a0a; --crs-surface: #1d1d1d; --crs-surface-raised: #2d2d2d; --crs-border: #3a3a3a; /* Text */ --crs-text: #ffffff; --crs-text-muted: #a8a8a7; /* Type. The existing site interpolates between a phone size and a desktop size with calc(), and the exact formulas are copied below rather than approximated -- a fixed 40px h1 is 43% oversized on a phone, where theirs is 28px. clamp() expresses the same curve in one declaration. h1 1.75rem -> 2.5rem between 48rem and 75rem h2 1.75rem -> 2rem between 48rem and 75rem h3 1.125rem -> 1.375rem between 48rem and 62.5rem Body stays a flat 16px, which is what the existing site does at every width. */ --crs-font: "Rajdhani", "Helvetica Neue", Helvetica, Arial, sans-serif; --crs-weight-light: 300; --crs-weight-medium: 500; --crs-weight-bold: 600; --crs-step--1: 0.875rem; /* 14px, small print and labels */ --crs-step-0: 1rem; /* 16px, body -- flat, as the existing site is */ --crs-step-1: clamp(1.125rem, 1.125rem + 0.25 * (100vw - 48rem) / 14.5, 1.375rem); --crs-step-2: clamp(1.75rem, 1.75rem + 0.25 * (100vw - 48rem) / 27, 2rem); --crs-step-3: clamp(1.75rem, 1.75rem + 0.75 * (100vw - 48rem) / 27, 2.5rem); /* Space, on a single scale so vertical rhythm survives a refactor. */ --crs-space-2xs: 0.25rem; --crs-space-xs: 0.5rem; --crs-space-s: 0.75rem; --crs-space-m: 1.25rem; --crs-space-l: 2rem; --crs-space-xl: 3.5rem; --crs-space-2xl: 6rem; /* Layout, from the existing site's .container */ --crs-container: 1480px; --crs-gutter: 60px; --crs-gutter-mobile: 20px; --crs-section-pad: 60px; /* The boundary of a form control, which has to clear 3:1 against the page -- unlike --crs-border, a hairline between sections that only has to be seen when you look for it. Measured against --crs-bg: 3.52:1, where the requirement is 3:1. The first value cleared it at 3.09:1, which is the kind of margin that fails the next time someone nudges a background by two percent. */ /* THE MEASURE: how long a line of body copy is allowed to get. Replaces an unused `68ch` that sat here before. `ch` measures the width of a zero, which in Rajdhani is 8.14px against an average character of 6.58 -- so 68ch is about 84 characters, not 68. Hence rem, measured off the type. Measured, not chosen from a list. Rajdhani at 16px/300 averages 6.58px per character on this site, so 27rem is about 65 characters -- and the home page's own paragraphs, which are what everything here is aligned to, run between 55 and 76. Ours ran to 200 on the flagship, because the lede, the mandatory block and the numbered phases had no cap at all and the ones that did were capped at 600px, a number copied out of the vendor's stylesheet rather than measured off the vendor's page: 600px in this typeface is 91 characters, not the ~70 the number suggests. */ --crs-measure: 27rem; --crs-input-border: #787878; --crs-radius: 5px; /* the existing site's button radius */ /* The live events page's card, measured there on 2026-10-15 (#339): a 1px #505050 border at radius 10px, and an amber places-left label (#ffa500 on 10% of itself; 7.9:1 on --crs-bg). */ --crs-card-border: #505050; --crs-radius-card: 10px; --crs-amber: #ffa500; /* The red at 15%, the hover fill of an outlined button (.cta--enquire, and the cookie panel's buttons). */ --crs-red-wash: rgba(222, 11, 20, 0.15); }