/* * Nuclear Resister — Design Tokens (CSS custom properties) * Source of truth: ../../../design/tokens.md (Willa v2.0, 2026-05-14) * * Locked palette — do NOT introduce new color values. * Every contrast ratio claimed here is verified in tokens.md §7. * * =========================================================================== * THIS FILE LIVES IN public/, NOT src/styles/, AND THAT IS LOAD-BEARING. * =========================================================================== * Moved 2026-08-15. It used to be `@import './tokens.css'` at the top of * src/styles/global.css, which meant Vite inlined it into a content-hashed * bundle (/_astro/BaseLayout..css) whose name changes on every build. * * The Lowthian Editor's style bridge fetches the front end's content CSS and * injects it into the WordPress block-editor canvas, so the client edits * against the same bytes a visitor gets. It needs a STABLE, PREDICTABLE URL — * a build hash is unfetchable by anything that is not this build. public/ is * copied to dist/ verbatim, so this file is served at exactly /tokens.css. * * It is loaded FIRST, ahead of the Astro bundle, by a in * src/layouts/BaseLayout.astro. Every rule in /wp-content.css is written in * var(--nr-*), so the bridge must load this file before that one. * * Consequences, so nobody re-"optimises" this back: * - Do NOT re-add the @import to global.css. Two copies of :root would ship. * - Do NOT inline a :root block into /wp-content.css as a shortcut. Same * duplication, and the palette Willa locked would then have two homes. * - This file is unhashed, so it is cached by URL. A token change needs a * Cloudflare purge of /tokens.css; the hashed bundles purge themselves. * =========================================================================== */ :root { /* ============================================================ * 1. COLOR TOKENS (tokens.md §1) * ============================================================ */ /* Brand primitives — palette, locked */ --nr-navy: #3371A3; --nr-bright-blue: #3166C4; /* CLIENT-DIRECTED 2026-06-07 Round 2: OREPA blue. Churn: #225EC6 → #0000FF → #3166C4. 5.49:1 on white / 4.78–4.89:1 on #efefef — Tate-confirmed AA at all sizes (accessibility-audit-2026-06-06-client-color-round.md, Round-2 update). Header wordmark SVG fills (nuclear-resister-logo.svg) now match this value too — recolored 2026-06-30 (Geoffrey-confirmed in conversation), retiring the prior #0000FF exception. */ --nr-rust: #cf2e2e; --nr-yellow: #fcb900; --nr-yellow-dark: #f0a800; --nr-yellow-darker: #e5a700; --nr-light-gray: #efefef; --nr-mid-gray: #555555; --nr-white: #ffffff; --nr-black: #000000; /* Footer Navy — locked-palette member (PROJECT_BRIEF / CLAUDE.md): * "Footer Navy #1d3a52 (darker)". This is distinct from the primary * Navy #3371A3 and is the correct footer background. The footer * previously rendered #3371A3 because --nr-footer-bg pointed at * --nr-navy (regression context: 2026-05-15 revision item 5 follow-up). * White text on #1d3a52 = 11.80:1 (vs 5.21:1 on #3371A3) — see §7. */ --nr-footer-navy: #1d3a52; /* Page-top accent line — thin full-bleed band above the masthead. * Client revision 2026-05-15 item 1: "thin blue line across the very * top, like the red line in the reference". Reference screenshot * measured a ~2px full-bleed hairline; client requested Navy (not the * reference's red). Navy = locked-palette brand primitive. */ --nr-topbar-line: var(--nr-bright-blue); --nr-topbar-line-height: 6px; /* client 2026-06-06 item 2b: top blue line twice as thick (was 3px) */ /* Masthead */ --nr-masthead-bg: var(--nr-white); --nr-masthead-top-line: var(--nr-navy); --nr-masthead-wordmark: var(--nr-bright-blue); /* client 2026-06-06: wordmark in pure logo blue. Actual wordmark color lives in the logo SVG fills (nuclear-resister-logo.svg) — recolored from #0000FF to #3166C4 2026-06-30, now matches this token exactly, no exception remaining. */ /* Menu bar. * Client revision 2026-05-15 item 2: nav background -> gradient, * derived from the reference screenshots. Reference was measured * (PIL median sweep) as a VERTICAL gold gradient, darker at the top * easing lighter toward the bottom. Implemented inside the locked * palette: top = yellow-dark #f0a800, bottom = yellow #fcb900 (both * are locked primitives — no new color invented). * Direction lives here (SSOT) so desktop + mobile stay in sync. * Contrast: nav text is black (--nr-menu-text). Worst-case black on * the darkest gradient stop (#f0a800) = 10.31:1 — clears WCAG AA * (4.5:1) with wide headroom at every point of the gradient. */ /* Round 2 2026-06-09: deepened the top stop so the gradient actually READS on the short menu bar (42px) + footer strip (59px) — the locked golds were too close and rendered flat. #d98700 is a deeper gold beyond the locked primitives (PALETTE EXTENSION — flag for Willa/Tate blessing). Black text on #d98700 = 7.41:1, still clears AA (was 10.31:1 on #f0a800). */ --nr-gold-gradient-top: #d98700; --nr-menu-bg-gradient-start: var(--nr-gold-gradient-top); --nr-menu-bg-gradient-end: var(--nr-yellow); --nr-menu-bg-gradient: linear-gradient( to bottom, var(--nr-menu-bg-gradient-start), var(--nr-menu-bg-gradient-end) ); --nr-menu-text: var(--nr-black); --nr-menu-text-hover: var(--nr-black); --nr-menu-text-focus: var(--nr-black); --nr-menu-dropdown-bg: var(--nr-white); --nr-menu-dropdown-text: var(--nr-bright-blue); /* client 2026-06-06 */ --nr-menu-dropdown-text-hover: var(--nr-bright-blue); /* client 2026-06-06 item 2e: NO red on menu hover — stays blue, underline carries the hover affordance (was --nr-rust) */ /* Intro */ --nr-intro-bg: var(--nr-white); /* --nr-intro-text-primary RETIRED Round 2 2026-06-09 — split into two tokens below. Headline and sub-text are now different colors. Do not reintroduce this token. */ --nr-intro-text-headline: var(--nr-bright-blue); /* intro headline — blue, 5.49:1 on white PASS */ --nr-intro-text-sub: var(--nr-black); /* intro sub-text — black per client 2026-06-07 (Round-1 reversal). 21:1 PASS AAA */ --nr-intro-readmore: var(--nr-rust); /* top "Read More" link — rust per client 2026-06-07 (Round-1 reversal: was navy). 5.85:1 PASS */ --nr-intro-accent: var(--nr-rust); /* Yellow on white = 1.85:1 FAIL — Rust substituted */ /* News */ --nr-news-bg: var(--nr-white); --nr-news-section-title: var(--nr-bright-blue); /* client 2026-06-06: "Resistance News" title in pure logo blue (Palatino unchanged) */ --nr-news-headline: var(--nr-bright-blue); /* client 2026-06-06: post headlines in pure logo blue */ --nr-news-body: var(--nr-black); --nr-news-date: var(--nr-mid-gray); --nr-news-readmore: var(--nr-rust); --nr-news-readmore-hover: var(--nr-rust); /* All reports */ --nr-all-reports-link: var(--nr-rust); --nr-all-reports-link-hover: var(--nr-rust); /* Footer */ --nr-footer-bg: var(--nr-footer-navy); /* #1d3a52 — locked Footer Navy, NOT primary Navy */ /* Client 2026-06-06: footer bg → "brighter blue, like the current NR header background". * The *visible* old-site header is a royal-blue watercolor gradient image (header2.jpg, * canvas-sampled ~#005dff top → #25408f bottom; Desk 1 cited #0856e5) — NOT the #3371A3 * CSS solid sitting behind it. Geoffrey 2026-06-06 (reversing an earlier "keep #3371A3" * call): make it TRUE to the clients' request — use the royal blue #0856e5 so they review * it the way they asked. (Geoffrey intends to push back on them, but lets them see it first.) * FINAL VALUE = #0856e5 (Geoffrey 2026-06-06, header-match): the brighter royal blue that * matches the live old-site header background, which is exactly what the clients asked for * (verbatim line 34: "Brighter blue for the footer background (like the current NR website * header background)"). This supersedes the brief interim #3953a4 (the footer-emblem's own * darker backdrop) — that was too dark and not their stated ask. White footer text/icons * on #0856e5 = ~6.0:1 PASS AA. The emblem's own black linework reads ~2.4:1 here but is a * LOGO and WCAG 1.4.x-exempt; the visible-rectangle/halo risk is checked on the rendered page. * History: #3371A3 (CSS-fallback trap) → #0856e5 (true-to-header royal) → #3953a4 (emblem * backdrop, too dark) → #0856e5 (back to the clients' header-match ask, Geoffrey-confirmed). * Note: yellow clears ~4.4:1 here — footer link-hover + focus rings stay WHITE * (--nr-focus-ring-on-navy-mid) for safety/consistency. * accessibility-audit-2026-06-06-client-color-round.md §3. */ --nr-footer-bright-bg: #3166C4; /* Round 2 2026-06-09: OREPA blue per client 2026-06-07. Churn: #3371A3 → #0856e5 → #3953a4 → #0856e5 → #3166C4. White text = 5.49:1 PASS. */ /* Round 3 2026-06-30 item 5: client asked for an OREPA-style gradient footer body (concept only, not their literal CSS) — headline blue at top fading to a darker shade at the bottom. Reuses two already-locked palette tokens, no new color invented: --nr-bright-blue (#3166C4, top) -> --nr-footer-navy (#1d3a52, bottom, the project's locked "Footer Navy"). Both channels decrease monotonically top->bottom so contrast only improves down the gradient — white text: top stop 5.49:1 PASS, bottom stop 11.80:1 PASS (verified via WCAG relative- luminance formula, both far past the 4.5:1 normal-text floor). Does NOT touch --nr-footer-strip-bg (separate gold strip, Round 2 item 7, unaffected). */ --nr-footer-gradient: linear-gradient( to bottom, var(--nr-bright-blue), var(--nr-footer-navy) ); --nr-footer-text-primary: var(--nr-white); --nr-footer-text-secondary: var(--nr-white); /* Revised from #d0dce8 per tokens.md §7 correction */ --nr-footer-text-accent: var(--nr-yellow); --nr-footer-link-default: var(--nr-white); --nr-footer-link-hover: var(--nr-yellow); /* Donate */ --nr-donate-bg: var(--nr-yellow); --nr-donate-bg-hover: var(--nr-yellow-darker); --nr-donate-text: var(--nr-black); --nr-donate-text-hover: var(--nr-black); /* Social icons */ --nr-social-icon: var(--nr-bright-blue); /* client 2026-06-06: header FB/IG icons in pure logo blue (footer icons use --nr-footer-text-primary, unaffected) */ --nr-social-icon-hover: var(--nr-rust); --nr-social-icon-hover-on-yellow: var(--nr-black); /* tokens.md §3 / F-4 — Rust on Yellow fails 3:1 */ /* Page body */ --nr-body-bg: var(--nr-light-gray); /* Focus rings — three contexts (tokens.md §6) */ /* ⚠️ CEILING: --nr-focus-ring IS FOR LIGHT SURFACES ONLY. * Navy #3371A3 measures 2.27:1 on the footer/overlay navy (#1d3a52) and 1:1 on * the brighter-blue footer surface — both fail SC 1.4.11's 3:1, and an * invisible focus ring is a Level AA failure, not a cosmetic one. * On ANY dark surface use --nr-focus-ring-on-navy (Yellow, 6.79:1 on #1d3a52) * or --nr-focus-ring-on-navy-mid (White). * Added 2026-08-12 (Tate a11y gate A-3, lightbox). This is the FOURTH time * this project has hit ring-on-dark; the token file is where it stops * recurring, so check this line before styling a focus state on dark. */ --nr-focus-ring: var(--nr-navy); --nr-focus-ring-on-yellow: var(--nr-black); --nr-focus-ring-on-navy: var(--nr-yellow); /* Client 2026-06-06: focus ring for the #3371A3 brighter-blue footer surface. * Default --nr-focus-ring (#3371A3) on #3371A3 = 1:1 invisible (Critical). White = 5.21:1 PASS. */ --nr-focus-ring-on-navy-mid: #ffffff; /* ============================================================ * 2. TYPOGRAPHY (tokens.md §2) * ============================================================ */ --nr-font-body: Verdana, Geneva, Tahoma, "DejaVu Sans", sans-serif; --nr-font-display: Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif; /* ============================================================ * 3. TYPE SCALE (tokens.md §3) * 16px minimum everywhere — no exceptions. * ============================================================ */ --nr-text-body: 1rem; /* 16px */ --nr-text-date: 1rem; /* 16px (discretion via color, not size) */ --nr-text-readmore: 1rem; /* 16px */ --nr-text-summary: 1.125rem; /* 18px */ --nr-text-intro-large: 1.75rem; /* 28px */ --nr-text-post-headline: 1.375rem; /* 22px */ --nr-text-menu: 1rem; /* 16px */ --nr-text-dropdown: 1rem; /* 16px */ --nr-text-section-title: 2.25rem; /* 36px */ --nr-text-footer-org: 1.25rem; /* 20px */ --nr-leading-body: 1.65; --nr-leading-summary: 1.6; --nr-leading-headline: 1.3; --nr-leading-post-headline: 1.35; --nr-leading-tight: 1.2; --nr-leading-flat: 1; --nr-leading-normal: 1.5; --nr-weight-regular: 400; --nr-weight-bold: 700; /* ============================================================ * 4. SPACING (tokens.md §4) — 4px base grid * ============================================================ */ --nr-space-1: 0.25rem; /* 4 */ --nr-space-2: 0.5rem; /* 8 */ --nr-space-3: 0.75rem; /* 12 */ --nr-space-4: 1rem; /* 16 */ --nr-space-5: 1.25rem; /* 20 */ --nr-space-6: 1.5rem; /* 24 */ --nr-space-7: 1.75rem; /* 28 */ --nr-space-8: 2rem; /* 32 */ --nr-space-9: 2.25rem; /* 36 */ --nr-space-10: 2.5rem; /* 40 */ --nr-space-11: 3rem; /* 48 */ --nr-space-12: 4rem; /* 64 */ /* ============================================================ * 5. BREAKPOINTS (tokens.md §5) — reference values; @media queries hard-code these * ============================================================ */ /* Mobile < 640px * Tablet 640 – 1023px * Desktop >= 1024px */ /* ============================================================ * 6. RADII (tokens.md §6) * ============================================================ */ --nr-radius-button: 3px; --nr-radius-flat: 0; /* Container max-widths */ --nr-container-max: 1280px; --nr-content-max: 1140px; /* interior framed content column */ --nr-intro-headline-max: 720px; --nr-readable-measure: 65ch; --nr-footer-column-max: 720px; --nr-search-max: 780px; /* search page + results — wider than 65ch body, narrower than full content col */ /* New tokens — Willa design review 2026-06-03 */ --nr-rust-dark: #a82323; /* Rust hover — white text = 6.84:1 passes AA Normal */ --nr-divider: #e8e8e8; /* light divider line — replaces all raw #e8e8e8 in components */ /* Round 2 additions — 2026-06-09 (tokens.md v2.1, round2-spec-2026-06-09.md) */ --nr-footer-strip-bg: var(--nr-menu-bg-gradient); /* Item 7: footer bottom strip uses same gradient as menu bar. Black text on #f0a800 worst stop = 10.32:1 PASS AAA */ /* RETIRED 2026-08-01 (round 4 item 2). The interior-page title band these three describe was removed — clients asked for page titles on white, like Resistance News / Website Archive. Kept as a tombstone so nobody reintroduces them thinking the band is still a thing. No rule references them; see InteriorPageLayout.astro. */ --nr-title-band-top: var(--nr-body-bg); /* RETIRED — Item 10: space above interior page title band */ --nr-title-band-padding-top: 20px; /* RETIRED — Item 11: title band top inner padding */ --nr-title-band-padding-bottom: 30px; /* RETIRED — Item 11: title band bottom inner padding */ /* Future Actions listing — design/FUTURE-ACTIONS-SPEC-2026-08-30-REV4.md §7. REV3 replaced the flat hairline list with a bordered notice card, so --nr-fa-entry-pad is RETIRED: the card carries its own padding per area (§2.5) and one shared entry inset can no longer describe it. REV4 retired two more. --nr-fa-card-max (818px) WAS the 274px right gutter down the page — the card is now width:100% of the content column, so there is nothing left for that token to name. --nr-fa-img was the same 320px as --nr-fa-media-w below, under a name that did not say why it is 320; the two were never allowed to coexist (§7) and --nr-fa-media-w is the survivor. */ --nr-fa-measure: 620px; /* entry text measure — 70.7ch at 16px Verdana (§4) */ --nr-fa-section-gap: var(--nr-space-12); /* 64px above a section heading */ /* THE PICTURE COLUMN (REV4 §2.2, §7). */ --nr-fa-media-w: 320px; /* THE MEDIA PANEL'S WIDTH, and the grid track it sits in. It is also the native width of the narrowest supplied graphic, whose argument is set as type inside the image and goes soft above it. Matches /history/. IT IS NO LONGER "THE CONSTANT WIDTH OF EVERY PICTURE" (REV4 §13.1, 2026-08-30). Geoffrey told Felice and Jack width constant / height varies in August; Felice then saw the built page and asked for uniform card sizes instead. A picture narrower than this box now renders narrower than this box, on purpose. Changing the number is still a client conversation, not a build decision. */ --nr-fa-media-h: 230px; /* A HEIGHT CEILING, NOT A BOX. The picture's width is whatever its own shape makes it at this height, and nothing is cropped, padded or matted to reach it. 230 IS THE DRONE GRAPHIC'S NATIVE HEIGHT (320x230), and that is the whole derivation. Its entire argument is printed on it as type, so it cannot be scaled up without going soft — 230 is therefore the tallest ceiling that leaves every current picture at or below native size. The 480x640 mural comes down to 172x230 and the two cards match. WHAT THIS GUARANTEES AND WHAT IT DOES NOT. It guarantees no picture is ever TALLER than 230, so no picture can make its card the tall one. It does NOT guarantee equal cards: a picture whose native height is under 230 renders at its own height and its card is shorter. Today's two match because one of them IS 230. Geoffrey's ruling, 2026-08-30 — cap the height, let the width follow, add no filler. */ --nr-fa-media-col: calc( var(--nr-fa-media-w) /* 320px the picture */ + var(--nr-space-6) /* 24px gutter */ + 1px /* 1px the vertical rule */ ); /* = 345px. DERIVED, never hard-coded — the grid track has to move if the picture or the gutter moves. */ /* The datestamp — a solid block inlaid in the card's top-left corner (§3). */ --nr-fa-stamp-w: 144px; /* stamp width AND grid column 1. Sized from the WIDEST day string ("28-31" at 28px/700, ~104px) under a 1.4.12 letter-spacing override, against 112px of content width — not from taste. */ --nr-fa-stamp-bg: var(--nr-bright-blue); /* #3166C4 — the site's headline blue. The stamp is a filled block of the same hue the headline beside it is set in; one accent hue per card. White on it = 5.49:1 PASS AA at every size used. Aliased so a future palette move is one edit. */ --nr-fa-stamp-text: var(--nr-white); /* The card itself (§2). It has no max-width token any more, by design. */ --nr-fa-card-gap: var(--nr-space-8); /* 32px card to card, against the 64px section gap */ --nr-fa-card-pad: var(--nr-space-7); /* 28px card interior padding, desktop */ --nr-fa-card-rule: 3px; /* the black top edge — the card's masthead (§2.2) */ }