/* ═══════════════════════════════════════════════════════════════════ REDLINES v2 DESIGN TOKENS ═══════════════════════════════════════════════════════════════════ Moved out of the foot of style.css at stage 2 of the rebuild (docs/REBUILD-PLAN-V2.md), 28 September 2026. WHY A SEPARATE FILE, not redlines-tokens.css: that file is SHARED WITH THE SCAN AND PRO APPLICATIONS. Its type scale stops at 24px by design, because an application needs different type from a marketing site. Putting marketing tokens there would change the apps. These are the marketing site's own, and nothing outside this theme reads them. SCOPED TO .rl-v2 AND THE SITE CHROME. Pages carrying the wrapper are affected, plus `.site-header` and `.rl-footer`, because both sit OUTSIDE the wrapper div (GeneratePress renders them around the content area) and the v2 header and footer rules in style.css need these values to resolve. Without `.site-header` here, `var(--v2-accent-mid)` in a header rule computes to nothing and the Contact button silently loses its background — measured, 2 October, not theorised. The footer was added the same day for the same reason. Declaring the tokens does not restyle anything on its own: only the rules that reference them do. So this is safe for the legacy header, which references none of them. When the rebuild launches and every page is v2, the scope becomes :root and both selectors are dropped, which is a one-line change here rather than an edit to every rule. Loaded after redlines-tokens.css and BEFORE style.css, so v2 rules can use these values and the cascade order is explicit rather than accidental. ═══════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════ PHASE 2 DESIGN LANGUAGE (.rl-v2) docs/HOMEPAGE-REDESIGN-BRIEF-2026-09-10.md Scoped entirely to `.rl-v2`. Nothing here affects a live page, and redlines-tokens.css (shared with the Scan and Pro apps) is untouched. If the direction is approved, these tokens are what gets rolled out; if it is rejected, deleting this block and /home-v2/ reverts it. MEASURED FROM THE REFERENCE SET, 10 September 2026, via the browser rather than from impressions: site H1 size H1 weight lead ratio align tracking Orennia 72px 300 48px 4.5x left normal Linear 64px 510 15px 4.0x left -1.408px Stripe 48px 300 32px 3.0x left -0.96px RedLines 40px 700 18px 2.2x mixed -0.02em The current site has the SMALLEST headings and by far the HEAVIEST. Small-and-bold is the amateur signature; large-and-light reads as confident. Every reference also left-aligns and tracks negative. Deliberate departure: all three references are near-black. Rob chose light dominant, and that is right for RedLines because every product render is a white-background application (they would glow on black), because Lighthouse demands 100 on accessibility, and because navy currently earns its weight by being used sparingly. So: light page, navy reserved for the hero and one full-bleed moment. ═══════════════════════════════════════════════════════════════════ */ .rl-v2, .site-header, .rl-footer, /* Retained as the screening-family token hook. Since 15 October the public and eight referral pages also use the full .rl-v2 wrapper and v2/hero. */ .screening-scope, /* .rl-policy-page, 15 October, for exactly the same reason and with exactly the same restriction. The v2 review asked for "a quiet legal-document layout and clear section hierarchy" on the privacy and cookie policies, "a template refinement" that preserves the policy substance. Those pages are classic WordPress content in the database, not manifests, so the refinement is CSS: the markup is not ours to restructure and the wording is legal text. It takes the variables and not the class, like .screening-scope above. Adding .rl-v2 to a policy page would pull in the descendant rules that reach into the shared header, which is the trap documented above. */ /* body.rl-policy-body IS LISTED TOO, and for a reason worth recording: the token list is a SCOPE, not a global. body.rl-policy-body { background: var(--v2-paper) } was written first without this line and resolved to nothing, because body is outside every selector here, so the declaration was dropped and the page kept the browser white. The symptom was a paper document column on pure white margins, which looks like a deliberate two-tone frame rather than a missing variable. Found by sampling actual pixels across the page, not by reading the rule. A variable that is not in scope fails silently. */ body.rl-policy-body, .rl-policy-page { /* ── Type scale. 4.0x ratio, matching Linear. ───────────────────── */ --v2-display: clamp(2.75rem, 5.2vw, 4rem); /* 44 - 64px h1 */ --v2-h2: clamp(1.75rem, 3vw, 2.5rem); /* 28 - 40px section */ --v2-h3: 1.25rem; /* 20px item */ --v2-lead: 1.1875rem; /* 19px hero lead */ --v2-body: 1rem; /* 16px body */ --v2-small: 0.875rem; /* 14px meta */ --v2-micro: 0.75rem; /* 12px label */ /* Display weight 500, not 700. The single biggest change here. */ --v2-w-display: 500; --v2-w-body: 400; --v2-w-medium: 500; --v2-font-display: "Poppins", system-ui, sans-serif; /* Work Sans, not Inter. Inter is named in every published guide to spotting AI-generated sites as the most recognisable tell (section 6 of the brief). Work Sans is a humanist grotesque used widely by consultancies and warmer than Inter at body sizes. */ --v2-font-body: "Work Sans", system-ui, sans-serif; /* ── Space. Deliberately uneven: the gap before a major statement is larger than the gap between items in a list. ───────────── */ --v2-gap-section: clamp(5rem, 9vw, 8.5rem); --v2-gap-section-compact: clamp(3.5rem, 6vw, 5.5rem); --v2-gap-block: 3rem; /* The join INSIDE a chapter: sections that continue one demonstration rather than starting a new subject. See the chapter rules in style.css. Roughly half to a third of a section gap, so the eye reads a group where it used to read a list. */ --v2-gap-join: clamp(2.25rem, 3vw, 3rem); --v2-gap-item: 1.25rem; /* Main marketing heroes share rows on wide screens; narrow screens flow. */ --v2-hero-display: clamp(2.75rem, 4.45vw, 4rem); --v2-hero-height: 40rem; --v2-hero-padding: 4rem; --v2-measure: 34rem; /* ~66 characters, a readable line length */ /* ── Colour. Navy, off-white, one accent, and greys in between. ── */ /* Brand navy, --brand-primary in redlines-tokens.css. The v2 block had #0a0a2e, which is a hair off it (19.16:1 vs 19.65:1 on white) for no reason anyone chose. Drift, not a decision. */ --v2-ink: #01003d; /* All derived from brand navy #01003D = 1, 0, 61. These were rgba() of the old #0a0a2e, so the page carried two navies that differed just enough to be wrong without being visibly wrong. */ --v2-ink-soft: rgba(1, 0, 61, 0.62); /* 0.34 alpha measured at 2.24:1 on white by Lighthouse, which fails AA for 14px text and cost the accessibility score 5 points. 0.58 gives about 4.9:1 and still reads as a quiet grey. Use --v2-ink-quiet for any TEXT that needs to recede; keep --v2-ink-faint for rules, borders and other non-text decoration where contrast rules do not apply. */ --v2-ink-faint:rgba(1, 0, 61, 0.34); --v2-ink-quiet:rgba(1, 0, 61, 0.58); --v2-rule: rgba(1, 0, 61, 0.10); /* Control boundaries (input borders, checkbox outlines) need 3:1 against their background to be perceivable. --v2-ink-faint is 2.33:1 and is for decoration only, so controls get their own value. */ --v2-control-border: rgba(1, 0, 61, 0.45); /* A warm off-white rather than pure #fff on a cool grey. Chosen tones read as a decision; #ffffff over #f6f6f9 is what a generator emits. */ --v2-paper: #fdfcfa; --v2-paper-2: #f3f4f5; /* Opt-in panels from the 16 October review; existing surfaces keep their tone. */ --v2-panel: #f3f4f5; --v2-panel-raised: #fff; --v2-panel-radius: 0.375rem; --v2-panel-shadow: 0 0.25rem 1.25rem rgba(1, 0, 61, 0.06); /* THE BRAND RED, and the two working variants under it. Red1 #EC5252 is the identity. It is what the logo and large fills use and it is not up for negotiation. What it cannot do is carry small text or sit behind white button text: 3.56:1 on white, against the 4.5:1 that WCAG AA requires and that npm run lighthouse gates at 100. So it stays for fills and identity, and the two darker steps below do the jobs that need contrast. Both are on the same hue, so they read as the same red. This is not a rejection of the palette. A brand red and an accessible text red are normally different values; most systems carry both. */ --v2-accent: #ec5252; /* Red1. Identity, large fills, logo. */ --v2-accent-mid: #d93b30; /* Buttons. 4.55:1 behind white text. */ --v2-accent-pale: #ebabab; /* Red2. Fills and tints only, never text. */ } /* The PAGE presentation, kept on .rl-v2 alone. These are deliberately NOT inherited by .site-header above: the header has its own white ground and its own type, and painting it with the page's paper colour and body font would restyle it as a side effect of declaring variables. The header changes only through the explicit rules in style.css. */ .rl-v2 { background: var(--v2-paper); font-family: var(--v2-font-body); font-size: var(--v2-body); color: var(--v2-ink); -webkit-font-smoothing: antialiased; }