/* ========================================================================== TRU72 — SHARED DESIGN TOKENS (Rev06 brand) -------------------------------------------------------------------------- ONE source of truth for colour, type, spacing and shape on EVERY Tru72 site. COLOUR IS THE APPROVED FIVE AND NOTHING ELSE. Bethany confirmed this palette on 2026-09-09; it is what the Rev06 brand guide records. It is NOT the North Carolina build's as-shipped colour set — NC drifted (B8952A, F5F0E8 and a rust family that the rebrand dropped). The layouts, structure, components and typography come from NC, which is correct. The colour comes from here. INK #3D3F3F SCENERY GREEN #696859 ANTIQUE GOLD #C39954 LINEN #CBC0AA PAPER #FFF6DC FIVE, PLUS ONE THAT DOES EXACTLY ONE JOB. (D83, 2026-09-22) GOLD-AGED #A8854A the italic display line, on PAPER, nowhere else D42 dropped GOLD-AGED and the palette ran at five. D83 puts it back, and deliberately puts it back NARROW: on the live T. Byrd's site the italic second half of a display headline is warm gold on cream, and that is the single most recognisable thing about the reference's typography. ANTIQUE GOLD cannot do that job — 2.43:1 on PAPER, a failure at every size, which no amount of making it bigger rescues. GOLD-AGED measures 3.18:1, which clears WCAG's 3.0 for LARGE text, so it does the job legitimately. It is NOT a general-purpose sixth colour, and the cage below is built so it cannot become one. There is still no rust, no B8952A and no F5F0E8, and there is no seventh colour. Identical on all four sites, no per-site variation. A contrast problem that cannot be solved inside these six gets REPORTED, not solved with another colour. --------------------------------------------------------------------------- THE GOLD-AGED CAGE — why it cannot be misused (D83) GOLD-AGED is declared ONCE, as --t72-gold-aged, and read ONCE, by --t72-display-italic-on-paper. Nothing else in any stylesheet on any of the four sites may name either one. tools/audit_phase5.py check 15 fails the build if anything does, and it also re-derives the two facts that make the colour legal: THE GROUND MUST BE PAPER. Measured on each light step — PAPER #FFF6DC 3.18:1 passes as large text PAPER-WARM #F6ECD3 2.92:1 FAILS, even as large text PAPER-DEEP #F0E7CE 2.78:1 FAILS, even as large text LINEN #CBC0AA 1.91:1 FAILS SCENERY GRN #696859 1.64:1 FAILS — and D83 says never on green INK #3D3F3F 3.09:1 passes, but ANTIQUE GOLD is 4.04:1 there and is already the display colour on ink, so ink keeps it The margin on PAPER is 0.18. A tint is enough to lose it. So the two LINEN-in-PAPER tints — .t72c-lite-warm and .t72c-lite-deep, which relevel() can put on ANY light band at build time — take the colour BACK to SCENERY GREEN, and so does every LINEN and green band. THE TYPE MUST BE LARGE. 3.18:1 clears AA for large text only: 24px, or 18.66px at weight 700. The italic line is Fraunces at weight 400, so the threshold is the full 24px. Only two rules in the system may read the role, and each is floored so its SMALLEST rendered size clears it: .t72c-h1 em .82em of clamp(40px, 4.6vw, 62px) -> 32.8px minimum .t72c-h em max(24px, .74em) of clamp(30px,…) -> 24px minimum Never body text, never a label, never an eyebrow, never a button fill, never a border or a rule — ANTIQUE GOLD keeps every decorative job. THIS BLOCK IS THE SWITCH. Every colour on all four sites resolves through the six declarations below. Changing Bethany's mind — for example adopting NC's as-built values instead — is editing this one block, not a rebuild. --------------------------------------------------------------------------- THE CONTRAST RULES THAT FOLLOW FROM SIX COLOURS (measured, WCAG 2.1) on PAPER INK 12.1:1 ok · SCENERY GREEN 5.2:1 ok ANTIQUE GOLD 2.4:1 FAILS at every size on INK PAPER 9.7:1 ok · LINEN 5.7:1 ok ANTIQUE GOLD 4.0:1 — large type only (24px+, or 18.7px bold); never small type on SCENERY GREEN PAPER 5.2:1 ok LINEN 3.1:1 FAILS small · ANTIQUE GOLD 2.2:1 FAILS at every size. There is NO gold type on green, ever. on LINEN INK 5.9:1 ok SCENERY GREEN 3.1:1 FAILS small · ANTIQUE GOLD 1.5:1 and PAPER 1.7:1 FAIL at every size. On a LINEN band the type is INK, all of it. So: gold is DECORATION as TYPE — rules, keylines, borders, hairlines — and a FILL only where D46's size goes with it. INK on ANTIQUE GOLD is 4.04:1, which clears AA large text, so a gold button is legal at 24px, or at 18.66px bold, and illegal below that. PAPER on ANTIQUE GOLD is 2.6:1 and is never used. --------------------------------------------------------------------------- THE TWO TINTS, AND WHY THEY ARE NOT A SEVENTH COLOUR A six-flat-colour site has no way to say "this band is not the last band". Rather than introduce a hue, the two light surfaces below are LINEN mixed into PAPER with color-mix(), so they carry no pigment that is not already in the palette and they move automatically if PAPER or LINEN move. The hex on the line above each is the pre-computed fallback for an engine without color-mix, and is the same mix arithmetic. No tint is ever used to solve a contrast problem, and no type colour is a tint — type is always one of the six. ========================================================================== */ /* -------------------------------------------------------------------------- THE DISPLAY FACE — self-hosted, one weight -------------------------------------------------------------------------- Friz Quadrata Bold is the only weight that exists, so it is display and titles only; Fraunces carries everything smaller. Nothing here synthesises a lighter or heavier cut. `font-weight: 400 700` is not a claim that the file holds a regular — it is how you stop a browser faking one. A page asking for weight 400 in this family matches the descriptor, so the real Bold outlines are drawn instead of a synthesised thin. `font-synthesis: none` on the body is the belt to that braces. Full face, not subset: the .otf already carries only 209 glyphs (Latin plus the punctuation the sites use) and the woff2 is 17 KB, so subsetting would save a rounding error and risk dropping a character. -------------------------------------------------------------------------- */ @font-face { font-family: 'Friz Quadrata Bold'; src: url('../fonts/friz-quadrata-bold.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; } :root { /* ======================= THE APPROVED FIVE ============================ */ --t72-paper: #FFF6DC; /* PAPER — the page */ --t72-ink: #3D3F3F; /* INK — type, dark surfaces */ --t72-green: #696859; /* SCENERY GREEN — muted type, mid band */ --t72-linen: #CBC0AA; /* LINEN — type on ink, hairlines */ --t72-gold: #C39954; /* ANTIQUE GOLD — decoration only */ /* ====================================================================== */ /* ---- THE SIXTH, CAGED (D83) ------------------------------------------- Declared here, read on the next line, and named nowhere else on any of the four sites. Do not reach for --t72-gold-aged in a stylesheet; reach for the role, and only from a rule that is on PAPER and 24px or larger. Audit check 15 enforces both halves of that sentence. */ --t72-gold-aged: #A8854A; /* GOLD-AGED — 3.18:1 on PAPER, large only */ --t72-display-italic-on-paper: var(--t72-gold-aged); /* Surface tints — LINEN in PAPER. No new pigment. Never used for type. */ --t72-paper-warm: #F6ECD3; --t72-paper-warm: color-mix(in srgb, var(--t72-linen) 18%, var(--t72-paper)); /* 28%, not 34%. At 34% this tint measured #EDE4CB, and SCENERY GREEN type on it is 4.45:1 — under the 4.5:1 AA needs for normal text, by a hair. The fix stays inside the five (D42): the same two colours, mixed a little lighter. At 28% the pair measures 4.57:1 and INK measures 8.59:1. Do not darken it again without re-measuring green on it. */ --t72-paper-deep: #F0E7CE; --t72-paper-deep: color-mix(in srgb, var(--t72-linen) 28%, var(--t72-paper)); /* Rules, drawn from INK and the gold at low alpha. */ --t72-rule: rgba(61,63,63,.14); --t72-rule-strong: rgba(61,63,63,.32); --t72-rule-on-ink: rgba(203,192,170,.24); --t72-rule-gold: rgba(195,153,84,.55); /* the hairline, ANTIQUE GOLD */ --t72-rule-gold-soft: rgba(195,153,84,.22); /* the nested keyline */ /* A PANEL NESTED ON A DARK SURFACE. (Phase 14) The reference site's "pick your market" cards are a TRANSLUCENT dark laid over the SCENERY GREEN booking card at about a third opacity, and the translucency is part of the effect: the panel reads as a recess in the green rather than as a second, unrelated block. A solid fill does not look the same. It is reproduced with INK at 34%, rather than with the second charcoal the reference reaches for, so it adds no pigment that is not already in the five. Over SCENERY GREEN it resolves to about #5A5A50, on which PAPER measures 6.46:1 — better than PAPER on flat green (5.23:1), so nesting the panel improves legibility rather than costing it. */ --t72-panel-on-dark: rgba(61,63,63,.34); --t72-panel-on-dark: color-mix(in srgb, var(--t72-ink) 34%, transparent); /* Semantic roles — what to reach for, so no page has to re-derive the contrast table above. */ --t72-type-on-paper: var(--t72-ink); /* 12.1:1 */ --t72-type-on-paper-muted: var(--t72-green); /* 5.2:1 */ --t72-type-on-ink: var(--t72-linen); /* 5.7:1 */ --t72-type-on-ink-strong: var(--t72-paper); /* 9.7:1 */ --t72-type-on-green: var(--t72-paper); /* 5.2:1 — the ONLY one */ --t72-display-on-ink: var(--t72-gold); /* 4.0:1 — 24px+ only */ /* ---- Type ------------------------------------------------------------- */ /* TWO BRAND FACES, AND ONLY TWO. Friz Quadrata for display and titles, Fraunces for accents and secondary. The two decorative faces Oregon used to load locally are retired permanently, and so are the two non-brand webfonts the NC build reached for. None of them is a Tru72 face, and none of them is loaded anywhere any more. docs/PHASE3B_OR_RESKIN_REPORT.md names them. Friz Quadrata Bold is licensed for web use and SELF-HOSTED from the site's own assets — no third-party font CDN. The @font-face below serves the woff2 built from the supplied .otf; the .otf stays in assets/fonts/ as the source of record. The .ttf copy in that folder is NOT used: it is missing the middot and the accented glyphs and renders empty boxes. The label voice — the wide, uppercase, tracked small type NC uses for eyebrows and nav — is Fraunces with tracking, not a third family. */ --t72-font-display: 'Friz Quadrata Bold', 'Fraunces', Georgia, 'Iowan Old Style', 'Times New Roman', 'DejaVu Serif', serif; --t72-font-body: 'Fraunces', Georgia, 'Iowan Old Style', 'Times New Roman', 'DejaVu Serif', serif; --t72-font-label: 'Fraunces', Georgia, 'Iowan Old Style', 'Times New Roman', 'DejaVu Serif', serif; --t72-font-mono: var(--t72-font-label); /* kept as an alias: the name is wrong now, the role is not */ --t72-track-display: .005em; /* inscriptional faces want POSITIVE */ --t72-track-mono: .2em; --t72-track-mono-tight: .16em; /* ---- Spacing + shape --------------------------------------------------- */ --t72-gutter: 56px; --t72-gutter-mobile: 22px; --t72-radius: 0; /* the system is square-cornered */ --t72-shadow-soft: 0 6px 28px rgba(61,63,63,.10); --t72-shadow-deep: 0 12px 48px rgba(61,63,63,.18); --t72-shadow-drop: 0 28px 64px -24px rgba(61,63,63,.35); }