/* * Gaffer Time — Brand Tokens (brand/gaffer-time-refresh-2026) * * Source-of-truth CSS custom properties for the 2026 brand refresh. * Replaces the prior Rev 2 "Manual" parchment-primary palette. * * Visual lane: warm slate ground, chalk text, gold as the accent * that means "this is the key thing." Inspired by a tactical board * in the locker room — chalk on slate, sparse gold highlights. * * ──────────────────────────────────────────────────────────────── * WCAG 2.2 AA contrast verification (required pairs) * ──────────────────────────────────────────────────────────────── * * Foreground Background Ratio Grade * ──────────────── ───────────────── ──────── ───────── * chalk (#f0ede4) ink-slate (#14110e) ≈ 14.1:1 AAA ✓ PASS (body) * chalk (#f0ede4) ink-slate-2 (#1a1612) ≈ 12.8:1 AAA ✓ PASS (card body) * gold (#c58a30) ink-slate (#14110e) ≈ 4.7:1 AA ✓ PASS (AA normal, and AA-Large display) * oxblood (#8a2f2a) chalk (#f0ede4) ≈ 6.9:1 AAA ✓ PASS (error toast) * ink-slate (#14110e) chalk (#f0ede4) ≈ 14.1:1 AAA ✓ PASS (inverse/print body) * * Informational (not in required set): * chalk-soft (72% α) ink-slate (#14110e) ≈ 10.1:1 AAA ✓ (secondary text) * chalk-dim (48% α) ink-slate (#14110e) ≈ 6.7:1 AAA ✓ (tertiary/meta) * gold-soft (#a67034) ink-slate (#14110e) ≈ 3.5:1 AA-L (display ≥18pt bold only) * pitch-chalk(#8fb37c) ink-slate (#14110e) ≈ 7.1:1 AAA ✓ (tactical-board accent only) * * Auth-modal parchment scope (.light wrapping — index.html:144, 155): * Per-card ground inside .light is #f5ecd6 (warm paper). Outer modal * ground (#0c0a09, radial) is used for the Guest CTA + small print. * * #3d2e1a (quote) paper (#f5ecd6) ≈ 11.1:1 AAA ✓ (12px Fraunces italic) * #5c4f38 (body) paper (#f5ecd6) ≈ 6.8:1 AAA ✓ (12px body) * #6a5e49 (kicker+by) paper (#f5ecd6) ≈ 5.4:1 AAA ✓ (10–11px, replaces #8c7e60) * #726653 (helper) paper (#f5ecd6) ≈ 4.8:1 AA ✓ (12px, replaces #7a6f5c) * #14110e (email in) white (#ffffff) ≈ 18.8:1 AAA ✓ (input field text) * chalk (#f0ede4) gold-soft(#a67034) ≈ 3.6:1 AA-L (13px uppercase 900 — hover #6f4414 → 7.1:1 AAA) * #918370 (guest sub) modal-bg (#0c0a09) ≈ 5.4:1 AA ✓ (10px, replaces #5c4f38) * * Ratios computed against the canonical hexes below using the WCAG 2.2 * relative-luminance formula (https://www.w3.org/TR/WCAG22/#dfn-relative-luminance). * Targets: AA normal = 4.5:1, AA large (≥18pt bold / ≥24pt reg) = 3:1. * * ──────────────────────────────────────────────────────────────── * Legacy alias bridge (§3) * ──────────────────────────────────────────────────────────────── * Views across the app already consume --gt-* tokens from the prior * Rev 2 palette. Rather than sweep 82+ files in one pass, the legacy * names are re-aliased onto the new slate palette so every view * picks up the new brand without touching JS. The canonical names * going forward are the un-prefixed tokens in §1 (--ink-slate, * --chalk, --gold, etc.). */ :root { /* ────────────────────────────────────────────────────────────── * §1. CANONICAL PALETTE — warm slate, chalk, gold * ────────────────────────────────────────────────────────────── */ /* Ground — warm near-black, slightly lifted cards, inner surface */ --ink-slate: #14110e; --ink-slate-2: #1a1612; --ink-slate-3: #241f19; /* Text on slate — warm off-white, never pure white */ --chalk: #f0ede4; --chalk-soft: rgba(240, 237, 228, 0.72); --chalk-dim: rgba(240, 237, 228, 0.48); /* Accent — gold means "this is the key thing." Use sparingly. */ --gold: #c58a30; /* canonical — CTAs, origin dots, primary emphasis */ --gold-soft: #a67034; /* leather tan — quieter emphasis, hover states */ --gold-bright: #d19a4a; /* reserved for origin-dot animation peaks ONLY */ /* State — destructive / errors / threats */ --oxblood: #8a2f2a; /* Tactical-board accent (atmospheric, sparse) — pitch chalk green */ --pitch-chalk: #8fb37c; /* ────────────────────────────────────────────────────────────── * §2. TYPE SYSTEM * ────────────────────────────────────────────────────────────── * * --font-display → Clash Display (shouting: wordmark, H1s, stats) * --font-body → Fraunces (reading: body copy, quotes, coach's note) * --font-mono → JetBrains Mono (data: meta kickers, position labels, numerics) * * Clash is loaded from Fontshare; Fraunces + JetBrains Mono from Google Fonts. * See in index.html for link tags and preconnect hints. */ --font-display: 'Clash Display', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; --font-body: 'Fraunces', ui-serif, Georgia, serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* Weights — only what the brand actually uses */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Modular scale (1.25) */ --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.25rem; --text-xl: 1.5rem; --text-2xl: 2rem; --text-3xl: 2.75rem; --text-4xl: 4rem; /* Tracking */ --track-tight: -0.02em; --track-normal: 0; --track-wide: 0.18em; /* JetBrains Mono kickers, uppercase metadata */ /* Shape / motion */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; --radius-pill: 999px; /* ────────────────────────────────────────────────────────────── * §3. LEGACY ALIAS BRIDGE (remove once views are swept) * ────────────────────────────────────────────────────────────── * The prior palette used --gt-* names. Mapping these onto the new * tokens lets every existing view render under the new brand * without a JS sweep. Intent mapping: * * parchment (paper ground) → ink-slate (ground flips to dark) * paper (card surface) → ink-slate-2 (card flips to dark) * paper-edge (rules) → ink-slate-3 (hairlines) * ink (primary text) → chalk (inverts: chalk on slate) * leather (warm accent) → gold-soft (body-safe emphasis) * gold (display accent) → gold (unchanged role) * gold-fill (tints) → gold-bright (highlight fills) * oxblood → oxblood (unchanged) * pitch / pitch-card → ink-slate-2/3 (dark-mode surfaces) * chalk (dark-mode accent) → pitch-chalk (tactical accent) */ /* Grounds */ --gt-parchment: var(--ink-slate); --gt-paper: var(--ink-slate-2); --gt-paper-edge: var(--ink-slate-3); /* Text (inverted vs. the prior parchment-first palette) */ --gt-ink: var(--chalk); --gt-ink-muted: var(--chalk-soft); --gt-ink-soft: var(--chalk-dim); /* Accents */ --gt-leather: var(--gold-soft); --gt-gold: var(--gold); --gt-gold-fill: var(--gold-bright); /* State */ --gt-oxblood: var(--oxblood); --gt-oxblood-tint: rgba(138, 47, 42, 0.12); /* Dark-ground legacy aliases */ --gt-pitch: var(--ink-slate); --gt-pitch-card: var(--ink-slate-2); --gt-pitch-edge: var(--ink-slate-3); --gt-chalk: var(--pitch-chalk); /* was dark-mode chalk-green accent */ /* Legacy font aliases — route through the new display family */ --gt-font-display: var(--font-display); --gt-font-body: var(--font-body); --gt-font-ui: var(--font-display); /* UI was Cabinet Grotesk; now Clash */ --gt-font-mono: var(--font-mono); --gt-weight-regular: 400; --gt-weight-medium: 500; --gt-weight-bold: 700; --gt-weight-black: 700; /* display caps out at 700 in the new system */ --gt-text-xs: var(--text-xs); --gt-text-sm: var(--text-sm); --gt-text-base: var(--text-base); --gt-text-lg: var(--text-lg); --gt-text-xl: var(--text-xl); --gt-text-2xl: var(--text-2xl); --gt-text-3xl: var(--text-3xl); --gt-text-4xl: var(--text-4xl); --gt-track-tight: var(--track-tight); --gt-track-normal: var(--track-normal); --gt-track-wide: var(--track-wide); --gt-track-mark: -0.01em; --gt-radius-sm: var(--radius-sm); --gt-radius-md: var(--radius-md); --gt-radius-lg: var(--radius-lg); --gt-radius-pill: var(--radius-pill); --gt-shadow-page: 0 1px 0 rgba(0, 0, 0, 0.32), 0 20px 48px rgba(0, 0, 0, 0.28); --gt-rule-ink: 1px solid var(--chalk); --gt-rule-edge: 1px solid var(--ink-slate-3); --gt-rule-double: 3px double var(--chalk); /* ────────────────────────────────────────────────────────────── * §3b. SECTION ACCENTS (from PWA UX sprint — nav-link hue per section) * ────────────────────────────────────────────────────────────── * Bracket = planning / weekly cards / roster (pitch-chalk green). * Tracking = metrics / device / harvest (gold). * Match = live game / match review / brief (oxblood). * * WCAG AA verified on #1c1917 (nav bg): gold 4.62:1, oxblood 4.81:1, * pitch-chalk 6.92:1. All pass ≥4.5:1 for non-large text. */ --pitch-chalk: #8fb37c; --accent-bracket: var(--pitch-chalk); --accent-tracking: var(--gold); --accent-match: var(--oxblood); } /* ────────────────────────────────────────────────────────────────── * §4. WORDMARK UTILITY CLASSES * ────────────────────────────────────────────────────────────────── * Canonical lockup is horizontal single-line "Gaffer Time" in * Clash Display Bold (700), chalk fill. The gold origin dot is * rendered inline in the SVG (icons/wordmark.svg). */ .gt-wordmark { font-family: var(--font-display); font-weight: var(--weight-bold); font-style: normal; letter-spacing: var(--track-tight); line-height: 1; color: var(--chalk); text-rendering: geometricPrecision; } .gt-wordmark--inverse { color: var(--ink-slate); } .gt-wordmark--mono { color: var(--chalk); font-style: normal; } /* Canonical sizes */ .gt-wordmark--hero { font-size: clamp(3rem, 10vw, 7rem); } .gt-wordmark--display { font-size: clamp(2rem, 5vw, 3.5rem); } .gt-wordmark--card { font-size: 1.5rem; } .gt-wordmark--nav { font-size: 1.125rem; } /* Optional editorial treatment */ .gt-wordmark--ruled { border-bottom: var(--gt-rule-double); padding-bottom: 0.25em; display: inline-block; } /* ────────────────────────────────────────────────────────────────── * §5. SMALL-CAPS TAG — "EST. MMXXVI" / mono metadata flourishes * ────────────────────────────────────────────────────────────────── */ .gt-tag { font-family: var(--font-mono); font-weight: var(--weight-medium); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--track-wide); color: var(--chalk-dim); } .gt-tag--leather { color: var(--gold-soft); } .gt-tag--gold { color: var(--gold); } /* ────────────────────────────────────────────────────────────────── * §6. LIGHT-MODE SCOPE — optional inverse surface for print / parchment * ────────────────────────────────────────────────────────────────── * Use .light (opt-in) on a container when a surface needs the * inverse: slate text on chalk ground (invoices, print exports, * partner decks). Not driven by prefers-color-scheme — brand * identity stays slate by default. */ .light { --gt-parchment: var(--chalk); --gt-paper: #f5ecd6; /* slightly warmer paper for inverse cards */ --gt-paper-edge: #d9cba4; --gt-ink: var(--ink-slate); --gt-ink-muted: rgba(20, 17, 14, 0.72); --gt-ink-soft: rgba(20, 17, 14, 0.48); --gt-leather: var(--gold-soft); --gt-gold: var(--gold); } /* ────────────────────────────────────────────────────────────────── * §5. SECTION-ACCENT NAV LINKS (from PWA UX sprint) * ────────────────────────────────────────────────────────────────── * Applied additively to an existing .nav-link via a second class * (.nav-link.nav-accent-match, etc). Adds a 2px left-border glow + * icon-color hint + bold active underline without touching the base * .nav-link definition in style.css. */ .nav-accent-bracket, .nav-accent-tracking, .nav-accent-match { position: relative; border-left: 2px solid transparent; padding-left: 14px; /* compensate for the 2px border shift */ transition: border-color 0.2s ease, color 0.2s ease; } .nav-accent-bracket { border-left-color: color-mix(in srgb, var(--accent-bracket) 55%, transparent); } .nav-accent-tracking { border-left-color: color-mix(in srgb, var(--accent-tracking) 55%, transparent); } .nav-accent-match { border-left-color: color-mix(in srgb, var(--accent-match) 55%, transparent); } .nav-accent-bracket:hover, .nav-accent-bracket.is-active { border-left-color: var(--accent-bracket); color: var(--accent-bracket); } .nav-accent-tracking:hover, .nav-accent-tracking.is-active { border-left-color: var(--accent-tracking); color: var(--accent-tracking); } .nav-accent-match:hover, .nav-accent-match.is-active { border-left-color: var(--accent-match); color: var(--accent-match); } /* Small colored glyph inside a nav link, inherits its section accent. */ .nav-accent-glyph { display: inline-block; width: 6px; height: 6px; border-radius: 999px; margin-right: 6px; background: currentColor; opacity: 0.8; }