/* ============================================================================ V5 TOKEN BRIDGE for the carried V3 static pages. 26 Jul 2026. PURPOSE. Ends the two-design-system split named in AWWWARDS_PREMORTEM_25JUL.md (Move 2) and WEBSITE_POSTMORTEM_AND_PLAN_23JUL.md (Phase C). The nav was already unified on 25 Jul (NAV_UNIFY_REPORT_25JUL.md); this file does the PAGE BODIES: colour, type scale and spacing come off the V5 token set in src/styles/tokens.css instead of the old V3 palette in assets/breakbone.css. HOW IT WORKS. Loaded LAST in , after breakbone.css and after the page's own polish-10jul block, so its :root wins on equal specificity. It does two things: 1. Declares the V5 token set by its real V5 names and exact V5 values. 2. Re-points every V3 alias name at those tokens, so the 40KB of existing V3 rules inherit V5 values with no markup rewrite, then patches the selectors in breakbone.css that hardcode off-palette literals and bypass the tokens. THE ONE NAME COLLISION, documented rather than papered over. V3 --ink means the BONE TEXT (#e8e4dc); V5 --ink means the INK GROUND (#0d0d0d). On these pages --ink keeps its V3 meaning because hundreds of legacy rules key off it; the V5 ink ground is carried here by --paper-deep, bound to the identical #0d0d0d. Every other V5 token name below is present with its exact V5 value. NEVER TOUCHES the unified nav: no .bbun selector appears in this file. Revert: drop the to this file from the 13 pages and rebuild. ========================================================================== */ /* ---- the V5 house faces, the SUBSET WOFF2 pipeline (V3 shipped full OTFs) ---- */ @font-face { font-family: 'Helvetica Neue LT Pro Blk'; src: local('HelveticaNeueLTPro-Blk'), url('/assets/fonts/bb-blk.woff2') format('woff2'), url('/assets/fonts/HelveticaNeueLTProBlk.otf') format('opentype'); font-weight: 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Helvetica Neue LT Pro BlkCn'; src: local('HelveticaNeueLTPro-BlkCn'), url('/assets/fonts/bb-blkcn.woff2') format('woff2'), url('/assets/fonts/HelveticaNeueLTProBlkCn.otf') format('opentype'); font-weight: 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Helvetica Neue LT Pro'; src: local('HelveticaNeueLTPro-Roman'), url('/assets/fonts/bb-roman.woff2') format('woff2'), url('/assets/fonts/Helvetica Neue LT Pro 55 Roman.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Bootzy Condensed'; src: local('Bootzy Condensed TM Regular'), url('/assets/fonts/bb-bootzy.woff2') format('woff2'), url('/assets/fonts/BootzyCondensedTM-Regular-66cee2fc.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } :root { /* ======================= THE V5 TOKENS, verbatim ======================= */ --bone: #e8e4dc; --red: #ff0f0f; --red-cta: #be1219; --smoke: #161616; --rule: #333333; --ink-100: rgba(232, 228, 220, 1); --ink-85: rgba(232, 228, 220, 0.85); --ink-60: rgba(232, 228, 220, 0.6); --font-display: 'Helvetica Neue LT Pro Blk', 'Archivo Black', Impact, sans-serif; --font-accent: 'Bootzy Condensed', 'Oswald', sans-serif; --font-body: 'Helvetica Neue LT Pro', 'Archivo', 'Helvetica Neue', Arial, sans-serif; --font-mono: 'Courier New', 'Courier', monospace; --fs-1: clamp(12px, 0.85vw, 13px); --fs-2: clamp(15px, 1.2vw, 16px); --fs-3: clamp(19px, 2vw, 22px); --fs-4: clamp(26px, 3.4vw, 34px); --fs-5: clamp(38px, 6.5vw, 56px); --fs-6: clamp(56px, 11vw, 116px); --lead-display: 0.98; --lead-head: 1.05; --lead-subhead: 1.15; --lead-body: 1.6; --track-display: -0.03em; --track-h1: -0.025em; --track-h2: -0.02em; --space: 8px; --pad-section: clamp(40px, 7vw, 96px); --measure: 68ch; --r-0: 0px; --r-1: 2px; --r-pill: 999px; --ease: cubic-bezier(0.22, 1, 0.36, 1); --ease-cut: steps(3, end); --t-hover: 180ms; --t-reveal: 420ms; /* ============ the V3 alias names, now bound to the V5 tokens ============ */ /* surfaces: the V3 three-level paper stack collapses onto V5's two dark surfaces (ink ground, smoke raised). The level the third grey used to carry is restored below by a --rule hairline on .sheet--bright, so the hierarchy survives on real tokens instead of an off-palette grey. */ --paper-deep: #0d0d0d; /* = the V5 --ink ground */ --paper: var(--smoke); /* was #141414 */ --paper-bright: var(--smoke);/* was #1b1b1b, differentiated by --rule below */ --ink: var(--bone); /* V3 semantics: this is the TEXT colour */ --ink-soft: var(--ink-60); /* was #9e9b96 */ --red-deep: var(--red-cta); /* was #9e1015 */ --blk: var(--font-display); --cond: 'Helvetica Neue LT Pro BlkCn', 'Helvetica Neue LT Pro Blk', 'Archivo Black', Impact, sans-serif; --body: var(--font-body); --boot: var(--font-accent); --mono: var(--font-mono); /* was 'Moms Typewriter' */ /* THE PAGE GUTTER, on the ramp V5's own page CSS uses for outer padding (clamp(24px, 7vw, ...)), topped out at --pad-section's maximum. Deliberately NOT --pad-section itself: that token's 40px floor is a section-internal value and takes 80px out of a 375px line, which is too tight for this 12-column zine grid. 24px floor matches what the V5 pages actually set on their own frames. */ --gut: clamp(24px, 7vw, 96px); /* was clamp(16px,4vw,56px) */ } /* ---------------------- baseline: the V5 reading voice ---------------------- */ /* V3 pinned a fluid root size, which made every rem/em consumer drift off the V5 scale; the V5 app assumes a 16px root and sets its own sizes in clamp(). */ html { font-size: 16px; } body { background: var(--paper-deep); color: var(--ink-85); font-family: var(--font-body); font-size: var(--fs-2); /* was 17px */ line-height: var(--lead-body); /* was 1.55 */ font-kerning: normal; font-variant-ligatures: common-ligatures; text-wrap: pretty; } /* ------------------- the V5 type scale, mapped by ROLE ---------------------- */ /* Each V3 class moves to the V5 tier that does its job, so the two systems set type identically. The desktop maxima come down: that IS the V5 scale, which is more restrained than V3's poster sizes, and matching it is the point. */ .h-poster { font-size: var(--fs-5); line-height: var(--lead-head); letter-spacing: var(--track-h1); font-family: var(--font-display); } .h-mid { font-size: var(--fs-4); line-height: var(--lead-head); letter-spacing: var(--track-h2); font-family: var(--font-display); } .masthead { font-size: var(--fs-6); line-height: var(--lead-display); letter-spacing: var(--track-display); color: var(--smoke); } .read p { font-size: var(--fs-2); line-height: var(--lead-body); } /* the role classes carry a `p.` variant so they outrank the contextual `.read p` body rule above (both 0,1,1; the later declaration wins). Without it a kicker or a margin note sitting inside a longread inherits body size, which is the bug the V3 sheet already had at 18.5px. */ .lede, p.lede { font-size: var(--fs-3); line-height: var(--lead-subhead); max-width: var(--measure); } .kick, p.kick { font-family: var(--font-mono); font-size: var(--fs-1); color: var(--ink-60); } .margin-note, p.margin-note { font-family: var(--font-mono); font-size: var(--fs-1); color: var(--ink-60); } .arrow-note, p.arrow-note { font-family: var(--font-accent); font-size: var(--fs-2); color: var(--bone); } .read .pull { font-family: var(--font-accent); font-size: var(--fs-4); line-height: var(--lead-subhead); } .read .datemark { font-family: var(--font-mono); font-size: var(--fs-1); color: var(--red); } .drop .ttl { font-family: var(--cond); font-size: var(--fs-4); line-height: var(--lead-head); } .drop .no { font-family: var(--font-mono); font-size: var(--fs-1); color: var(--red); } .drop .st { font-family: var(--font-mono); font-size: var(--fs-1); color: var(--ink-60); } .dymo { font-family: var(--font-mono); font-size: var(--fs-1); } .stamp { font-family: var(--font-accent); font-size: var(--fs-3); } /* the polaroid ground is BONE, so its caption takes the recessed-on-bone alpha, not the bone-on-ink one; --ink-60 here would be bone text on a bone card. Same value V5 uses for .register-loud figcaption. */ .polaroid .cap { font-family: var(--font-mono); font-size: var(--fs-1); color: rgba(13, 13, 13, 0.62); } .srclist li { font-size: var(--fs-2); line-height: var(--lead-body); } .bill p { font-size: var(--fs-5); line-height: var(--lead-display); letter-spacing: var(--track-h1); } .star { color: var(--red); font-size: var(--fs-3); } .cam__lbl { color: var(--bone); } /* ------- surfaces + colour: the selectors that bypassed the V3 tokens ------- */ /* The third surface level, restored on a real token instead of an off-palette grey */ .sheet--bright { background: var(--smoke); border: 1px solid var(--rule); } .sheet--red { background: var(--red); color: var(--bone); } .sheet--ink { background: var(--paper-deep); color: var(--bone); } .sheet--torn.sheet--ink::before { background: var(--paper-deep); } .band { background: var(--paper-deep); color: var(--bone); } .marquee { background: var(--smoke); } .marquee .mq { font-family: var(--font-mono); color: var(--ink-85); } .burst { font-family: var(--font-mono); background: var(--red); color: var(--bone); } .burst b { font-size: var(--fs-2); } .foot { background: var(--paper-deep); } .foot .mono { font-family: var(--font-mono); font-size: var(--fs-1); color: var(--ink-60); } .foot .bb { font-family: var(--font-display); color: var(--bone); letter-spacing: var(--track-h1); } .doorlist .dl { background: var(--smoke); color: var(--ink-85); } .doorlist .dl b { font-family: var(--font-mono); font-size: var(--fs-1); color: var(--ink-60); } .doorlist .dl span { font-size: var(--fs-2); } .bill { background: var(--smoke); color: var(--bone); } .docfig { background: var(--bone); } .docfig figcaption { font-family: var(--font-mono); font-size: var(--fs-1); color: rgba(13, 13, 13, 0.62); } .booth .cap { font-family: var(--font-mono); font-size: var(--fs-1); color: var(--ink-60); } .venue .nav { background: var(--paper-deep); } .venue .nav a { color: var(--bone); } .cinema { background: var(--paper-deep); } .cinema-sub { font-family: var(--font-mono); font-size: var(--fs-1); color: var(--ink-60); } .cinema-cue { color: var(--red); font-size: var(--fs-1); } .setwall { background: var(--paper-deep); } .setwall img { background: var(--smoke); } .setwall-cap { font-family: var(--font-mono); font-size: var(--fs-1); color: var(--ink-60); } .c76-in { font-family: var(--font-mono); font-size: var(--fs-2); color: var(--bone); } /* the ransom letters: paper/ink/red tiles now cut from the three house colours */ .ransom .rl { background: var(--bone); color: var(--paper-deep); } .ransom .rl--paper { background: var(--smoke); color: var(--bone); } .ransom .rl--ink { background: var(--paper-deep); color: var(--bone); } .ransom .rl--red { background: var(--red); color: var(--bone); } .polaroid { background: var(--bone); } .sheet--red h1 a:hover, .sheet--red h2 a:hover { color: var(--bone); } /* THE ONE-RED DISCIPLINE. The psych hero was the only place on the estate running an amber/orange ramp (#ff6a1f, #ff9e2c, #ffd23e, #ffe3b8) plus a second red (#d81e3c). Re-cut as a red-to-ink ramp on the house tokens only. */ .psych-hero { background: radial-gradient(120% 90% at 50% 8%, var(--red) 0%, var(--red-cta) 34%, #4a0508 62%, var(--paper-deep) 100%); color: var(--bone); } /* The inset scrim was tuned against the OLD bright amber/green oil wheel: at rgba(11,10,9,.62) it leaned on the canvas being light for its contrast. On the house red-to-ink ramp the canvas is dark, so the copy has to carry its own ground. A solid-enough ink scrim puts bone body text and the red kicker back over a known #0d0d0d-equivalent backdrop, where the V5 tokens are measured (bone-85 clears AA comfortably, --red on ink is 4.93:1). */ .psych-inset { background: rgba(13, 13, 13, 0.86); border: 1px solid var(--rule); } .psych-hero .kick { color: var(--ink-85); } .psych-hero .kick b { color: var(--red); } .psych-hero .h-poster { color: var(--bone); } /* ------------------------------ spacing ------------------------------------ */ /* one gutter definition for the page frame: --gut above, so a change lands once */ .wallgrid { padding: clamp(40px, 7vh, 96px) var(--gut); } .read { padding: clamp(40px, 7vh, 96px) var(--gut); max-width: 760px; } .foot .in { padding: calc(var(--space) * 4) var(--gut); } /* --------------------------- house focus ring ------------------------------ */ :focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }