, so the whole card is one large click/tap target instead of a small text link buried in the body. Without this reset, the global `a { color: ...; }` rule would turn the entire card's text red (color inherits down from the anchor), which breaks the navy-default-text expectation for card content. The red "clickable" signal moves to the border instead, on hover/focus. */ a.ticket-card { color: inherit; text-decoration: none; transition: border-color 0.15s ease; } a.ticket-card:hover, a.ticket-card:focus-visible { border-color: var(--color-interactive); } /* Card grid — generic layout wrapper for arranging repeated ticket-stub cards. Not one of the seven named components; needed as soon as real content has more than one card side by side, and reusable across every 3-card block described in content-reference.md (Home, About, Request Tickets, Board). */ .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-5); } /* Icon sizing utility — shared across cards, hero, and section anchors. Color always comes from context via currentColor; these classes only set size. */ .icon--interface { width: 24px; height: 24px; } .icon--card { width: 48px; height: 48px; } .icon--anchor { width: 140px; height: 140px; } .icon--hero { width: 200px; height: 200px; } /* -------------------------------------------------------------------------- 6. Dot-Grid Hero Navy panel, faint dot overlay, eyebrow + headline + lead + CTAs. Always dark — sets its own text color per the rule. The dot overlay is a pseudo-element so it can sit behind the text content without affecting contrast or being read by assistive tech. -------------------------------------------------------------------------- */ .hero { position: relative; overflow: hidden; background-color: var(--color-bg-dark); color: var(--color-text-on-dark); padding: var(--space-10) var(--space-5); } .hero::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, 0.12) 1.5px, transparent 1.5px); background-size: 24px 24px; pointer-events: none; } .hero__inner { position: relative; max-width: var(--content-max-width); margin: 0 auto; display: grid; gap: var(--space-5); } /* Default: white, matching the rest of the hero's text. Still opt-in, not automatic — but per the relaxed gold rule (CLAUDE.md, Cross-cutting rules — gold usage, confirmed against the actual mockups), an eyebrow going gold no longer has to be the page's only gold usage. */ .hero__eyebrow { color: var(--color-text-on-dark); } /* Gold eyebrow — opt-in via this modifier class. No longer capped at one per page or traded off against the Front Row icon/section marker; all three can appear together on the same page now. */ .hero__eyebrow--gold-moment { color: var(--color-accent-on-dark); } .hero__headline { font-family: var(--font-display); font-stretch: var(--font-stretch-expanded); font-size: var(--text-hero); text-transform: uppercase; line-height: var(--leading-display); color: var(--color-text-on-dark); } .hero__lead { font-family: var(--font-body); font-size: var(--text-lead); max-width: 48rem; color: var(--color-text-on-dark); } .hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-3); } @media (prefers-reduced-motion: no-preference) { .hero::before { transition: opacity 0.3s ease; } } /* -------------------------------------------------------------------------- 7. Section Furniture Red label + rule, alternating white/navy backgrounds down the page. This is the other place the dark-background rule is centrally enforced: the --dark modifier sets color explicitly rather than leaving descendants to inherit from body. -------------------------------------------------------------------------- */ .section { padding: var(--space-8) var(--space-5); } .section--light { background-color: var(--color-bg-light); color: var(--color-text-on-light); } .section--dark { background-color: var(--color-bg-dark); color: var(--color-text-on-dark); } .section__inner { max-width: var(--content-max-width); margin: 0 auto; } /* The red label + rule — the section-furniture signature. Red is text here deliberately: this pairing is only ever used on light backgrounds in the brief's mockups (section markers between white/navy bands, read while on the light band). It must not be reused inside .section--dark. */ .section__label { display: flex; align-items: center; gap: var(--space-3); color: var(--color-interactive); font-family: var(--font-display); font-stretch: var(--font-stretch-condensed); font-size: var(--text-label); text-transform: uppercase; letter-spacing: var(--tracking-label); margin-bottom: var(--space-5); } .section__label::after { content: ""; flex: 1; height: 2px; background-color: var(--color-interactive); } /* On a dark section, the marker defaults to white (matching the rest of the dark-section text) — NOT gold. Red-as-text still fails contrast on navy, and gold still shouldn't fire automatically just because a section is dark — it stays a deliberate opt-in via the modifier below, even though the per-page gold cap itself has been relaxed (see CLAUDE.md, Cross-cutting rules — gold usage). Default. Split into two rules — color on the label text, and background-color on ::after only — because applying both properties to both selectors paints a solid color block behind the label text instead of just recoloring the thin rule line that follows it. */ .section--dark .section__label { color: var(--color-text-on-dark); } .section--dark .section__label::after { background-color: var(--color-text-on-dark); } /* Gold marker — opt-in via this modifier class. No longer capped at one per page (see CLAUDE.md, Cross-cutting rules — gold usage); it can appear alongside a gold eyebrow and/or the Front Row icon on the same page. Scoped under .section--dark so the modifier does nothing if ever misapplied inside a light section (falls back to the red default above instead of gold-on-white). Same color/::after split as above. */ .section--dark .section__label--gold-moment { color: var(--color-accent-on-dark); } .section--dark .section__label--gold-moment::after { background-color: var(--color-accent-on-dark); } /* -------------------------------------------------------------------------- 8. Status List Not one of the seven named components; a small utility used on Home ("Where We Are Right Now") and About ("The Mission"'s barriers-removed list) — used in both files before it had real styling. Handles generic list spacing, plus a badge treatment for status words like "Complete"/ "Next" when a list item contains one. Reuses the existing .label class for those words rather than inventing a new one — this only adds layout (border, padding, spacing), not typography, which .label already owns. -------------------------------------------------------------------------- */ .status-list { display: flex; flex-direction: column; gap: var(--space-3); margin: var(--space-5) 0; } .status-list li { display: flex; align-items: baseline; gap: var(--space-3); } .status-list .label { flex-shrink: 0; padding: var(--space-1) var(--space-2); border: 1px solid currentColor; } /* -------------------------------------------------------------------------- 9. Pull Quote New component, needed for Our Why's "pull quote" — the brief names it as its own thing, distinct from a normal

(used at body-text size for Home's shorter Our-Why excerpt). A real pull quote is a large, standalone visual moment. No decorative color accent: red is barred from decorative use by the brief, and gold is reserved for wherever a page's one gold moment lands, so scale is the only tool available here. Borrows the H1 font-size token for size only — sentence case, not the all-caps/ expanded H1 treatment, since a full sentence in caps would break the "all-caps for labels only" typography rule. Inherits color from whatever .section--light/--dark it sits in; no color of its own. -------------------------------------------------------------------------- */ .pull-quote { max-width: 44rem; margin: 0 auto; } .pull-quote__statement { font-family: var(--font-display); font-size: var(--text-h1); line-height: var(--leading-display); margin: 0 0 var(--space-5); } .pull-quote__note { font-family: var(--font-body); font-size: var(--text-lead); max-width: 40rem; } /* -------------------------------------------------------------------------- 10. Ledger Table New component — explicitly named in the brief as "the one genuinely custom build," and nothing existing (cards, receipt cells, lists) covers a real tabular dataset. Date, description, category, amount, running balance. HARD RULE: amounts are never color-coded by sign. Per the brief, "negative or 'money out' values are navy, not red — red does not mean negative on this site, it means clickable." Every amount cell uses the same plain navy text as everything else; the minus sign already in the data is the only negative indicator. Do not add red (or any other color) here even though "red for negative" is a strong, easy-to-slip- into instinct — flagging this in-code because a later pass could "fix" this back in without realizing it breaks a hard rule. Category has the same constraint from the other direction: it can't use color-coded tags either (red is interactive-only; gold can't touch a light section). It reuses the same border-badge treatment already established for .status-list .label rather than inventing a color system the palette doesn't support. NOT reused for What We Use's Money/Paperwork tables (see .stat-pair instead) — a 5-column dated running-balance table is the wrong shape for simple label+value pairs with no date or balance to show. -------------------------------------------------------------------------- */ .table-scroll { overflow-x: auto; } .ledger { width: 100%; border-collapse: collapse; } .ledger caption { text-align: left; font-family: var(--font-display); font-stretch: var(--font-stretch-condensed); font-size: var(--text-label); text-transform: uppercase; letter-spacing: var(--tracking-label); margin-bottom: var(--space-4); } .ledger th, .ledger td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border-on-light); font-size: var(--text-caption); text-align: left; white-space: nowrap; } .ledger th { font-family: var(--font-display); font-stretch: var(--font-stretch-condensed); font-size: var(--text-label); text-transform: uppercase; letter-spacing: var(--tracking-label); } .ledger__amount, .ledger__balance { text-align: right; font-variant-numeric: tabular-nums; } .ledger__category { display: inline-block; padding: var(--space-1) var(--space-2); border: 1px solid currentColor; font-family: var(--font-display); font-stretch: var(--font-stretch-condensed); font-size: var(--text-label); text-transform: uppercase; letter-spacing: var(--tracking-label); } /* -------------------------------------------------------------------------- 11. Stat Pair Generic layout primitive — not Where It Goes-specific. Needed for "100% Formation / 0% Program": two paired labeled numbers side by side, which is a different shape than the 3-cell bordered .receipt grid (forcing that component into a 2-up layout would look stretched and mismatched). Reuses .receipt__amount / .receipt__label for typography rather than inventing new number/label styles, since the visual vocabulary for "big number + small caption" already exists. -------------------------------------------------------------------------- */ .stat-pair { display: flex; flex-wrap: wrap; gap: var(--space-7); margin: var(--space-5) 0; } /* -------------------------------------------------------------------------- 12. Design System Reference Two new, page-specific primitives for /how-its-built/design — the one page whose actual content is the design tokens themselves, not copy that applies them. Nothing existing lets a raw color value or a live type-scale row be shown as content. -------------------------------------------------------------------------- */ .swatch { display: inline-block; width: 48px; height: 48px; border: 1px solid var(--color-border-on-light); flex-shrink: 0; } .specimen__row { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-5); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border-on-light); } .specimen__sample { font-family: var(--font-display); flex-shrink: 0; } .specimen__meta { font-family: var(--font-body); font-size: var(--text-caption); opacity: 0.75; }