/* ─────────────────────────────────────────────────────────────────────────
design-system.css · v1.4 · 2026-05-07
GleamingGymnast — single stylesheet consumed by build_site.py.
Every generated page links exactly one copy of this file.
Reference: DESIGN_SYSTEM.md v1.3 (2026-05-04). Every token here mirrors
a token specified there. Change DESIGN_SYSTEM.md first, then this file.
v1.3 (2026-05-04) — Workstream 2 v2: per Josh rulings D10/D11/D12/D14/D15/D16
on chrome elements, wireframes win over W1 chrome synthesis spec. §4 Header
rewritten to publication-style solid plum-900 (D10) + 2-stop gold→plum-500
wordmark (D11) + .gg-pub-link text-on-bar nav (D14). DROPPED: .gg-nav-chip
+ variants (Option B delete-now per Josh approval); .gg-footer--three-col
+ subclasses (D15 — wireframes use simple 1-row footer); .gg-watermark
+ --dense (D16 — wireframes use body.gg-silhouette only). KEPT from v1.2:
F/M tag tokens; rem-based type scale; .gg-header__hamburger (D13). Net
~80 LOC churn (promotes ≈ removes).
v1.1 (2026-04-23) — promotes 20 components from wireframes/_proposed_v11.css
into the canonical design system. Zero new tokens (all 25 v11 tokens
already existed in v1.0). Promoted components, in authoring order:
§5.10 body.gg-silhouette §5.20 .gg-empty-state
§5.11 .gg-hero (+ variants) §5.21 .gg-subnav
§5.12 .gg-eyebrow §5.22 .gg-entry-card
§5.13 .gg-defining-stat §5.23 .gg-otd-hero
§5.14 .gg-rail (+ header) §5.24 .gg-prose
§5.15 .gg-named-card §5.25 .gg-disclosure
§5.16 .gg-era-band §5.26 .gg-provenance
§5.17 .gg-score-with-era §5.27 .gg-chip--removable
§5.18 .gg-breadcrumb §5.28 .gg-skeleton
§5.19 .gg-pagination §5.29 .gg-header__signin
+ .gg-header__avatar
§5.7 .gg-table mobile-cards variant (extends v1.0 §5.7)
Structure:
1. :root token block
2. Reset + base
3. Inter font load (via @import; build_site may prefer )
4. Header
5. Components (5.1–5.29)
6. Mobile-first media queries
7. Reduced-motion override
───────────────────────────────────────────────────────────────────────── */
/* 1 ── Root token block ────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
:root {
color-scheme: dark;
/* Core palette */
--gg-color-plum-900: #7A1E48;
--gg-color-plum-700: #8E2E52;
--gg-color-plum-500: #C87D90;
--gg-color-surface-1: #1E1B2E;
--gg-color-surface-2: #2A2640;
--gg-color-border: #5C4468;
--gg-color-text-primary: #F0ECF4;
--gg-color-text-muted: #B8B0C4;
--gg-color-text-dark: #1E1B2E;
--gg-color-white: #FFFFFF;
/* Medal palette (medals-only rule — see DESIGN_SYSTEM.md § 2.2) */
--gg-color-medal-gold: #FFD700;
--gg-color-medal-silver: #C0C8D8;
--gg-color-medal-bronze: #CD7F32;
--gg-color-gold: var(--gg-color-medal-gold);
/* Functional */
--gg-color-focus-ring: var(--gg-color-medal-gold);
--gg-color-success: #5DDC9E;
--gg-color-danger: #F08080;
--gg-color-info: #7BB4E0;
/* F/M tag chip colors (W2 v1.2 additions per DESIGN_SYSTEM.md § 2.3 + chrome synthesis spec § 5) */
--gg-color-tag-female: #E8728A; /* plum-500 family for cohesion; pair with --gg-color-text-dark; AA-body 5.76:1 */
--gg-color-tag-male: #7BB4E0; /* same hex as --gg-color-info; pair with --gg-color-text-dark; AAA 7.55:1 */
/* Gradients */
--gg-gradient-header: linear-gradient(
135deg,
#7A1E48 0%, #8E2E52 25%, #A83D5E 50%, #BE5570 75%, #C87D90 100%
);
--gg-gradient-hero: linear-gradient(
135deg,
#7A1E48 0%, #2A2640 55%, #1E1B2E 100%
);
/* Type scale (W2 v1.2 CF-5: rem-based; respects user-set browser default font size) */
--gg-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
--gg-font-mono: "Menlo", "Consolas", "Monaco", monospace;
--gg-text-h1: 1.75rem; /* 28px @ 16px default */
--gg-text-h2: 1.375rem; /* 22px */
--gg-text-h3: 1.125rem; /* 18px */
--gg-text-body: 1rem; /* 16px */
--gg-text-small: 0.875rem;/* 14px */
--gg-text-micro: 0.6875rem;/* 11px */
--gg-text-mono: 0.8125rem;/* 13px */
--gg-text-stat: 1.75rem; /* 28px */
/* Spacing */
--gg-space-1: 4px;
--gg-space-2: 8px;
--gg-space-3: 12px;
--gg-space-4: 16px;
--gg-space-5: 24px;
--gg-space-6: 32px;
--gg-space-7: 48px;
--gg-space-8: 64px;
/* Radius */
--gg-radius-sm: 4px;
--gg-radius-md: 8px;
--gg-radius-lg: 12px;
--gg-radius-pill: 999px;
/* Shadow */
--gg-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
--gg-shadow-md: 0 6px 24px rgba(0, 0, 0, 0.3);
--gg-shadow-lg: 0 10px 36px rgba(0, 0, 0, 0.38);
/* Motion */
--gg-ease: cubic-bezier(0.4, 0, 0.2, 1);
--gg-duration-fast: 160ms;
--gg-duration-base: 220ms;
}
/* 2 ── Reset + base ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
font-family: var(--gg-font-sans);
font-size: var(--gg-text-body);
line-height: 1.55;
background: var(--gg-color-plum-900);
color: var(--gg-color-text-primary);
min-height: 100vh;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 { margin: 0; line-height: 1.25; letter-spacing: -0.01em; }
h1 { font-size: var(--gg-text-h1); font-weight: 700; }
h2 { font-size: var(--gg-text-h2); font-weight: 700; }
h3 { font-size: var(--gg-text-h3); font-weight: 600; }
p { margin: 0; }
a { color: var(--gg-color-plum-500); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--gg-color-text-primary); }
/* Shared focus-ring mixin — used on every interactive element. */
:focus-visible {
outline: 3px solid var(--gg-color-focus-ring);
outline-offset: 2px;
border-radius: inherit;
}
/* 4 ── Header ──────────────────────────────────────────────────────── */
/* W2 v2 (2026-05-04) per Josh rulings D10/D11/D12: ESPN-publication-style
solid plum-900 bar with 2-stop gold→plum-500 wordmark. Authority:
_archive/reports/design_alignment/2026-04-21_home_page_design_lock.md §1.
Nav class = .gg-pub-link text-on-bar with gold underline-current (D14;
replaces v1.2 .gg-nav-chip chip pattern, deleted). */
.gg-header {
background: var(--gg-color-plum-900);
padding: 0 var(--gg-space-5);
min-height: 64px;
display: flex;
align-items: stretch;
gap: var(--gg-space-5);
border-bottom: 1px solid rgba(255, 215, 0, 0.18);
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
position: relative;
z-index: 10;
}
.gg-header__title {
display: inline-flex;
align-items: center;
text-decoration: none;
align-self: center;
line-height: 1;
}
.gg-header__title:hover,
.gg-header__title:focus-visible {
text-decoration: none;
}
.gg-header__title:hover .gg-header__brand { filter: brightness(1.08); }
.gg-header__brand {
font-size: 26px;
font-weight: 900;
letter-spacing: -0.5px;
background: linear-gradient(135deg, #FFD700 0%, #C87D90 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
/* Breathing room so descenders on 'g' / 'y' aren't clipped by text-fill box. */
line-height: 1.2;
padding-bottom: 3px;
display: inline-block;
white-space: nowrap;
}
.gg-header__star {
color: var(--gg-color-medal-gold);
-webkit-text-fill-color: var(--gg-color-medal-gold);
margin: 0 3px;
font-size: 20px;
line-height: 1;
display: inline-block;
vertical-align: baseline;
}
@media (min-width: 768px) {
.gg-header__brand { font-size: 28px; }
.gg-header__star { font-size: 22px; }
}
.gg-header__nav {
display: flex;
gap: 0;
margin-left: var(--gg-space-3);
flex-wrap: nowrap;
align-items: stretch;
overflow-x: auto;
scrollbar-width: none;
}
.gg-header__nav::-webkit-scrollbar { display: none; }
/* .gg-pub-link — text-on-bar publication nav (W2 v2 D14).
Gold underline marks current page (.is-current OR [aria-current="page"]).
44×44 min touch target per Rule 11 + grandmother-test floor. */
.gg-pub-link {
display: inline-flex;
align-items: center;
padding: 0 14px;
color: rgba(255, 255, 255, 0.88);
font-size: 13.5px;
font-weight: 600;
letter-spacing: 0.02em;
text-decoration: none;
white-space: nowrap;
border-bottom: 2px solid transparent;
min-height: 44px;
transition: color 140ms var(--gg-ease), border-color 140ms var(--gg-ease);
}
.gg-pub-link:hover { color: #fff; }
.gg-pub-link.is-current,
.gg-pub-link[aria-current="page"] {
color: var(--gg-color-medal-gold);
border-bottom-color: var(--gg-color-medal-gold);
}
/* Ask elevation — the only pill on the bar. */
.gg-pub-link--ask {
align-self: center;
background: var(--gg-color-medal-gold);
color: var(--gg-color-plum-900);
font-weight: 800;
padding: 7px 14px;
border-radius: 999px;
margin: 0 6px;
border-bottom: none;
min-height: auto; /* pill sizes from padding, not min-height */
}
.gg-pub-link--ask:hover {
background: #FFE85C;
color: var(--gg-color-plum-900);
}
@media (max-width: 767px) {
.gg-header { padding: 0 var(--gg-space-3); gap: var(--gg-space-2); min-height: 58px; }
.gg-header__brand { font-size: 22px; letter-spacing: -0.4px; }
.gg-header__star { font-size: 18px; margin: 0 2px; }
.gg-pub-link { padding: 0 10px; font-size: 12.5px; }
.gg-pub-link--ask { padding: 6px 12px; }
}
/* 5 ── Card ────────────────────────────────────────────────────────── */
.gg-card {
background: var(--gg-color-surface-1);
border: 1px solid var(--gg-color-border);
border-radius: var(--gg-radius-lg);
padding: var(--gg-space-5);
box-shadow: var(--gg-shadow-sm);
color: var(--gg-color-text-primary);
}
.gg-card__title {
font-size: var(--gg-text-h3);
font-weight: 600;
margin-bottom: var(--gg-space-3);
}
.gg-card--elevated { box-shadow: var(--gg-shadow-md); }
.gg-card--gold-border { border-left: 3px solid var(--gg-color-medal-gold); }
/* 6 ── Stat callout ────────────────────────────────────────────────── */
.gg-stat {
display: flex;
flex-direction: column;
gap: var(--gg-space-1);
}
.gg-stat__value {
font-size: var(--gg-text-stat);
font-weight: 700;
color: var(--gg-color-text-primary);
line-height: 1;
font-variant-numeric: tabular-nums;
}
.gg-stat__value--medal { color: var(--gg-color-medal-gold); }
.gg-stat__label {
font-size: var(--gg-text-small);
font-weight: 400;
color: var(--gg-color-text-muted);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.gg-stat--inline {
flex-direction: row;
align-items: baseline;
gap: var(--gg-space-2);
}
/* 7 ── Medal chip ──────────────────────────────────────────────────── */
.gg-medal-chip {
display: inline-flex;
align-items: center;
gap: var(--gg-space-2);
background: var(--gg-color-surface-2);
border: 1px solid var(--gg-color-border);
border-radius: var(--gg-radius-pill);
padding: var(--gg-space-1) var(--gg-space-3);
min-height: 28px;
}
.gg-medal-chip__dot {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
flex-shrink: 0;
}
.gg-medal-chip__dot--gold { background: var(--gg-color-medal-gold); }
.gg-medal-chip__dot--silver { background: var(--gg-color-medal-silver); }
.gg-medal-chip__dot--bronze { background: var(--gg-color-medal-bronze); }
.gg-medal-chip__count {
font-size: var(--gg-text-body);
font-weight: 700;
color: var(--gg-color-text-primary);
font-variant-numeric: tabular-nums;
}
.gg-medal-chip__label {
font-size: var(--gg-text-micro);
font-weight: 600;
color: var(--gg-color-text-muted);
text-transform: uppercase;
letter-spacing: 0.08em;
}
/* 8 ── Tag / chip ──────────────────────────────────────────────────── */
.gg-tag {
display: inline-block;
background: rgba(255, 255, 255, 0.12);
color: var(--gg-color-text-primary);
font-size: var(--gg-text-micro);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
padding: var(--gg-space-1) 10px;
border-radius: var(--gg-radius-pill);
}
.gg-tag--muted { background: rgba(255, 255, 255, 0.06); color: var(--gg-color-text-muted); }
.gg-chip {
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.15);
color: rgba(255, 255, 255, 0.88);
padding: var(--gg-space-2) 14px;
border-radius: var(--gg-radius-pill);
font-size: 12px;
font-weight: 500;
font-family: inherit;
cursor: pointer;
transition: background var(--gg-duration-fast) var(--gg-ease),
border-color var(--gg-duration-fast) var(--gg-ease),
color var(--gg-duration-fast) var(--gg-ease),
transform var(--gg-duration-fast) var(--gg-ease);
min-height: 32px;
}
.gg-chip:hover {
background: rgba(255, 215, 0, 0.12);
border-color: rgba(255, 215, 0, 0.5);
color: var(--gg-color-medal-gold);
transform: translateY(-1px);
}
.gg-chip--active {
background: rgba(255, 215, 0, 0.18);
border-color: var(--gg-color-medal-gold);
color: var(--gg-color-medal-gold);
}
/* 9 ── Button ──────────────────────────────────────────────────────── */
.gg-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--gg-space-2);
font-family: inherit;
font-size: var(--gg-text-small);
font-weight: 600;
line-height: 1;
padding: 12px 14px;
border-radius: var(--gg-radius-md);
border: 1px solid transparent;
cursor: pointer;
min-height: 44px;
min-width: 44px;
transition: background var(--gg-duration-fast) var(--gg-ease),
border-color var(--gg-duration-fast) var(--gg-ease),
color var(--gg-duration-fast) var(--gg-ease),
transform var(--gg-duration-fast) var(--gg-ease),
box-shadow var(--gg-duration-fast) var(--gg-ease);
text-decoration: none;
}
.gg-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.gg-btn--primary {
background: linear-gradient(135deg, var(--gg-color-plum-500) 0%, var(--gg-color-plum-900) 100%);
color: var(--gg-color-white);
box-shadow: var(--gg-shadow-sm);
}
.gg-btn--primary:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: var(--gg-shadow-md);
}
.gg-btn--secondary {
background: transparent;
border-color: var(--gg-color-border);
color: var(--gg-color-text-primary);
}
.gg-btn--secondary:hover:not(:disabled) {
border-color: var(--gg-color-plum-500);
color: var(--gg-color-white);
}
.gg-btn--ghost {
background: transparent;
color: var(--gg-color-text-muted);
}
.gg-btn--ghost:hover:not(:disabled) { color: var(--gg-color-text-primary); }
/* 5.7 ── Table (.gg-table) ─────────────────────────────────────────── */
.gg-table-wrap {
overflow-x: auto;
border: 1px solid var(--gg-color-border);
border-radius: var(--gg-radius-md);
background: var(--gg-color-surface-2);
}
.gg-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
font-variant-numeric: tabular-nums;
color: var(--gg-color-text-primary);
}
.gg-table thead { background: var(--gg-color-surface-2); }
.gg-table th {
text-align: left;
padding: var(--gg-space-3) 14px;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--gg-color-medal-gold);
font-weight: 700;
border-bottom: 1px solid var(--gg-color-border);
white-space: nowrap;
}
.gg-table td {
padding: 10px 14px;
border-bottom: 1px solid rgba(92, 68, 104, 0.35);
}
.gg-table tr:last-child td { border-bottom: none; }
.gg-table tr:hover td { background: rgba(232, 114, 138, 0.06); }
.gg-table__num { text-align: right; }
.gg-table__place--gold { color: var(--gg-color-medal-gold); font-weight: 700; }
.gg-table__place--silver { color: var(--gg-color-medal-silver); font-weight: 700; }
.gg-table__place--bronze { color: var(--gg-color-medal-bronze); font-weight: 700; }
/* v1.1 mobile card-variant of .gg-table — see DESIGN_SYSTEM.md § 5.7.
Below 768 px the original .gg-table-wrap hides and the card list takes
over. Markup ships a parallel alongside the
table; both reflect the same query result. Pattern lifted from
wireframes/06_medals.html lines 42–70. */
.gg-table-cards { display: block; padding: 0; margin: 0; list-style: none; }
.gg-table-cards__item {
background: var(--gg-color-surface-1);
border: 1px solid var(--gg-color-border);
border-radius: var(--gg-radius-md);
padding: var(--gg-space-3) var(--gg-space-4);
margin-bottom: var(--gg-space-2);
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--gg-space-3);
flex-wrap: wrap;
}
.gg-table-cards__rank {
font-size: 14px;
font-weight: 800;
font-variant-numeric: tabular-nums;
color: var(--gg-color-medal-gold);
min-width: 32px;
}
.gg-table-cards__name {
font-size: 15px;
font-weight: 700;
color: var(--gg-color-white);
flex: 1;
}
.gg-table-cards__metrics {
display: flex;
gap: var(--gg-space-2);
align-items: center;
font-variant-numeric: tabular-nums;
}
@media (min-width: 768px) {
.gg-table-cards { display: none; }
}
@media (max-width: 767px) {
.gg-table-wrap { display: none; }
}
/* 11 ── Form input ─────────────────────────────────────────────────── */
.gg-input {
background: var(--gg-color-surface-2);
border: 1px solid var(--gg-color-border);
color: var(--gg-color-text-primary);
font-family: inherit;
font-size: var(--gg-text-body);
padding: 0 var(--gg-space-4);
border-radius: var(--gg-radius-md);
min-height: 44px;
width: 100%;
transition: border-color var(--gg-duration-fast) var(--gg-ease),
box-shadow var(--gg-duration-fast) var(--gg-ease);
}
.gg-input::placeholder { color: var(--gg-color-text-muted); }
.gg-input:focus {
outline: none;
border-color: var(--gg-color-focus-ring);
box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.18);
}
/* 12 ── Utilities ──────────────────────────────────────────────────── */
/* .sr-only — lifted verbatim from ask.html:343–351.
Hides content visually while keeping it available to screen readers.
Used by #gg-live (aria-live region) and any SR-only label. */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Focusable variant — invisible until focused (keyboard skip-to-content links).
2026-04-23 bug-fix #2 (design-lock §5): previously only the :focus state
was defined; the base class had no rules, so
rendered inline by default. Now the base state applies the same visually-
hidden rules as `.sr-only`, and :focus/:focus-visible paint a visible
focus link with a clear outline against plum-900. */
.sr-only-focusable {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.sr-only-focusable:focus,
.sr-only-focusable:focus-visible {
position: static;
width: auto;
height: auto;
padding: var(--gg-space-2) var(--gg-space-4);
margin: 0;
overflow: visible;
clip: auto;
white-space: normal;
background: var(--gg-color-plum-900);
color: var(--gg-color-medal-gold);
font-weight: 700;
text-decoration: none;
outline: 2px solid var(--gg-color-medal-gold);
outline-offset: 2px;
border-radius: var(--gg-radius-sm);
}
/* Live-region landmark — one per page.
Pages write state-change announcements into this element; the
aria-live='polite' contract ensures SR users hear exactly one
announcement per real change. */
.gg-live {
/* intentionally .sr-only; class pair is .sr-only .gg-live in HTML */
}
/* Global layout scaffolds */
.gg-page {
max-width: 1060px;
margin: 0 auto;
padding: var(--gg-space-6) var(--gg-space-6) var(--gg-space-8);
}
.gg-footer {
padding: var(--gg-space-5) var(--gg-space-6);
background: var(--gg-color-surface-2);
color: var(--gg-color-text-muted);
font-size: var(--gg-text-micro);
display: flex;
justify-content: space-between;
gap: var(--gg-space-4);
flex-wrap: wrap;
border-top: 1px solid var(--gg-color-border);
}
/* ─────────────────────────────────────────────────────────────────────
v1.1 components — promoted from wireframes/_proposed_v11.css 2026-04-23.
Authoring order preserved (no alphabetisation, no recategorisation).
───────────────────────────────────────────────────────────────────── */
/* 5.10 ── body.gg-silhouette ─────────────────────────────────────────
Background watermark borrowed from ask.html body::before. Apply the
.gg-silhouette modifier on . Fixed-position SVG silhouette,
z-index 0, ~7% opacity. */
body.gg-silhouette { position: relative; overflow-x: hidden; }
body.gg-silhouette::before {
content: '';
position: fixed;
bottom: -60px; right: -40px;
width: 520px; height: 520px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M100 15 a5 5 0 1 1 0.01 0 M92 25 Q85 35 80 55 L70 80 Q65 90 55 95 L40 100 M80 55 Q90 65 95 80 L100 110 Q102 125 95 140 L85 165 L80 185 M100 110 Q110 130 115 145 L125 175 L130 185 M95 80 Q105 75 120 65 L140 50 M95 55 Q100 50 115 55 L135 65' stroke='%23E8728A' stroke-width='2.5' fill='none' stroke-linecap='round' stroke-linejoin='round' opacity='0.07'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;
z-index: 0;
pointer-events: none;
}
body.gg-silhouette .gg-page,
body.gg-silhouette main { position: relative; z-index: 1; }
/* 5.11 ── .gg-hero ───────────────────────────────────────────────────
Dark-glass plum hero block. Four variants:
(default) listing-page hero band
--full-bleed marquee pages (Home, OTD) — largest padding
--compact tight utility pages (Medals header)
--profile detail pages, with accent left-border rail
*/
.gg-hero {
background: var(--gg-gradient-hero);
border: 1px solid var(--gg-color-border);
border-radius: var(--gg-radius-lg);
padding: 36px 24px 32px;
margin-bottom: var(--gg-space-6);
position: relative;
overflow: hidden;
box-shadow: var(--gg-shadow-lg);
}
.gg-hero::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at 85% 15%, rgba(255, 215, 0, 0.10), transparent 55%);
pointer-events: none;
}
.gg-hero > * { position: relative; }
.gg-hero--full-bleed { padding: 48px 24px 40px; }
.gg-hero--compact { padding: 28px 24px; }
.gg-hero--profile::after {
content: "";
position: absolute;
left: 0; top: 24px; bottom: 24px;
width: 4px;
background: linear-gradient(180deg, var(--gg-color-medal-gold), var(--gg-color-plum-500));
border-radius: 0 4px 4px 0;
}
@media (min-width: 768px) {
.gg-hero { padding: 44px 48px 38px; }
.gg-hero--full-bleed { padding: 64px 48px 52px; }
.gg-hero--compact { padding: 36px 48px; }
}
/* Hero title + subtitle — Inter-800 title (32px mobile, 44–56px desktop)
+ plum-500 subtitle. */
.gg-hero__title {
font-size: 32px;
font-weight: 800;
letter-spacing: -0.5px;
color: #fff;
margin: 0 0 8px;
line-height: 1.08;
}
.gg-hero__title .star { color: var(--gg-color-medal-gold); }
.gg-hero__subtitle {
color: var(--gg-color-plum-500);
font-size: 15px;
font-weight: 500;
margin: 0 0 var(--gg-space-4);
max-width: 60ch;
line-height: 1.45;
}
@media (min-width: 768px) {
.gg-hero__title { font-size: 44px; }
.gg-hero--full-bleed .gg-hero__title { font-size: 56px; }
.gg-hero__subtitle { font-size: 17px; }
}
/* 5.12 ── .gg-eyebrow ────────────────────────────────────────────────
Uppercase gold label preceding a hero title. Consistent across every
hero. */
.gg-eyebrow {
font-size: 11px;
color: var(--gg-color-medal-gold);
text-transform: uppercase;
letter-spacing: 1.6px;
font-weight: 700;
margin-bottom: 10px;
font-variant-numeric: tabular-nums;
}
/* 5.13 ── .gg-defining-stat ──────────────────────────────────────────
One big number + tight caption. Replaces the 4-tile stats row on
profile/detail pages. Gold by default; --plum variant for non-medal
counts (so the gold-rule stays load-bearing). */
.gg-defining-stat {
display: flex;
flex-direction: column;
gap: 4px;
margin: var(--gg-space-5) 0 0;
}
.gg-defining-stat__value {
font-size: 48px;
font-weight: 800;
color: var(--gg-color-medal-gold);
line-height: 1;
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
}
.gg-defining-stat__label {
font-size: 13px;
color: rgba(255, 255, 255, 0.82);
font-weight: 500;
letter-spacing: 0.2px;
max-width: 48ch;
}
.gg-defining-stat__follow {
font-size: 13px;
color: var(--gg-color-text-muted);
margin-top: 6px;
max-width: 60ch;
line-height: 1.45;
}
.gg-defining-stat--plum .gg-defining-stat__value { color: var(--gg-color-plum-500); }
@media (min-width: 768px) {
.gg-defining-stat__value { font-size: 56px; }
}
/* 5.14 ── .gg-rail ───────────────────────────────────────────────────
Horizontal-scroll curated row. Used on Home + Athletes Explorer
editorial rails. Mobile: scrollable; desktop: can be scrollable or
wrap depending on parent. */
.gg-rail {
display: flex;
gap: var(--gg-space-3);
overflow-x: auto;
padding: var(--gg-space-2) 0 var(--gg-space-4);
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: var(--gg-color-border) transparent;
}
.gg-rail::-webkit-scrollbar { height: 6px; }
.gg-rail::-webkit-scrollbar-thumb { background: var(--gg-color-border); border-radius: 3px; }
.gg-rail::-webkit-scrollbar-track { background: transparent; }
.gg-rail > * {
flex: 0 0 auto;
scroll-snap-align: start;
min-width: 240px;
max-width: 280px;
}
.gg-rail__header {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--gg-space-3);
margin: var(--gg-space-6) 0 var(--gg-space-2);
}
.gg-rail__heading {
font-size: 18px;
font-weight: 700;
color: var(--gg-color-text-primary);
letter-spacing: -0.01em;
}
.gg-rail__sublabel {
font-size: 12px;
color: var(--gg-color-text-muted);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.gg-rail__more {
font-size: 13px;
color: var(--gg-color-medal-gold);
text-decoration: none;
white-space: nowrap;
}
.gg-rail__more:hover { text-decoration: underline; }
/* 5.15 ── .gg-named-card ─────────────────────────────────────────────
Replaces the dropped .gg-initials-tile concept. Named-card
typography — name does the visual work, not an initials disc.
Flag-code + discipline pill below. */
.gg-named-card {
background: linear-gradient(135deg, var(--gg-color-plum-700), var(--gg-color-plum-900));
border: 1px solid var(--gg-color-border);
border-radius: var(--gg-radius-lg);
padding: var(--gg-space-4);
color: var(--gg-color-text-primary);
display: flex;
flex-direction: column;
gap: var(--gg-space-2);
text-decoration: none;
min-height: 140px;
box-shadow: var(--gg-shadow-sm);
transition: transform 160ms var(--gg-ease), box-shadow 160ms var(--gg-ease), border-color 160ms var(--gg-ease);
position: relative;
overflow: hidden;
}
.gg-named-card::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at 90% 10%, rgba(255, 215, 0, 0.08), transparent 50%);
pointer-events: none;
}
.gg-named-card:hover {
transform: translateY(-2px);
box-shadow: var(--gg-shadow-md);
border-color: rgba(255, 215, 0, 0.3);
}
.gg-named-card__eyebrow {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255, 215, 0, 0.85);
font-variant-numeric: tabular-nums;
}
.gg-named-card__name {
font-size: 20px;
font-weight: 700;
color: #fff;
letter-spacing: -0.01em;
line-height: 1.15;
margin: 0;
}
.gg-named-card__meta {
font-size: 12px;
color: rgba(255, 255, 255, 0.72);
margin-top: auto;
display: flex;
flex-wrap: wrap;
gap: 6px 10px;
align-items: center;
}
.gg-named-card__pill {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 2px 8px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.1);
color: #fff;
}
/* 5.16 ── .gg-era-band ───────────────────────────────────────────────
Vertical-timeline component for Competitions Archive era groupings.
Label column + content column, with editorial caption slot. */
.gg-era-band {
display: grid;
grid-template-columns: 1fr;
gap: var(--gg-space-3);
padding: var(--gg-space-5) 0;
border-top: 1px solid var(--gg-color-border);
}
.gg-era-band:first-of-type { border-top: none; }
.gg-era-band__label {
font-size: 13px;
font-weight: 700;
color: var(--gg-color-medal-gold);
text-transform: uppercase;
letter-spacing: 0.1em;
font-variant-numeric: tabular-nums;
}
.gg-era-band__caption {
font-size: 14px;
color: var(--gg-color-text-muted);
max-width: 60ch;
line-height: 1.55;
}
.gg-era-band__body {
display: grid;
grid-template-columns: 1fr;
gap: var(--gg-space-3);
margin-top: var(--gg-space-3);
}
@media (min-width: 768px) {
.gg-era-band {
grid-template-columns: 140px 1fr;
gap: var(--gg-space-5);
}
.gg-era-band__body {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1200px) {
.gg-era-band__body { grid-template-columns: repeat(3, 1fr); }
}
/* 5.17 ── .gg-score-with-era ─────────────────────────────────────────
Score cell that carries its scoring-era badge. Solves the ambiguity
between 10.000 (Perfect 10 era, pre-2006) and 15.800 (open-ended,
post-2006). */
.gg-score-with-era {
display: inline-flex;
align-items: center;
gap: 8px;
white-space: nowrap;
}
.gg-score-with-era__value {
font-variant-numeric: tabular-nums;
font-weight: 700;
color: var(--gg-color-text-primary);
}
.gg-score-with-era__era {
/* WD-2026-05-09 Josh feedback: was a pill (gold background + border
+ rounded), which read as a clickable affordance ("what did she
score a perfect 10 in?"). De-pilled to a quiet meta-label — small
uppercase muted text, no background, no border. The era is now
unambiguously a passive marker, not a UI control. The label text
in build_site.py was also clarified from "Perfect 10" (the score)
to "Perfect-10 era" (the scoring era). */
font-size: 9.5px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--gg-color-medal-gold);
opacity: 0.62;
line-height: 1.4;
}
.gg-score-with-era__era--open {
/* Open-ended era marker (post-2006 scoring scale). Same de-pilled
treatment as the Perfect-10 era marker, plum-tinted. */
color: var(--gg-color-plum-500);
opacity: 0.62;
}
/* 5.18 ── .gg-breadcrumb ─────────────────────────────────────────────
Uppercase, muted, small. Above detail-page headings. */
.gg-breadcrumb {
display: flex;
gap: 6px;
align-items: center;
font-size: 11px;
color: var(--gg-color-text-muted);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: var(--gg-space-3);
flex-wrap: wrap;
}
.gg-breadcrumb a { color: var(--gg-color-text-muted); text-decoration: none; }
.gg-breadcrumb a:hover { color: var(--gg-color-medal-gold); text-decoration: underline; }
.gg-breadcrumb__sep { opacity: 0.5; }
.gg-breadcrumb__current { color: var(--gg-color-text-primary); }
/* 5.19 ── .gg-pagination ─────────────────────────────────────────────
Prev/next + info text. URL-driven; each anchor carries the target
page. */
.gg-pagination {
display: flex;
align-items: center;
justify-content: center;
gap: var(--gg-space-2);
margin-top: var(--gg-space-7);
flex-wrap: wrap;
}
.gg-pagination__info {
color: var(--gg-color-text-muted);
font-size: 13px;
margin: 0 var(--gg-space-3);
font-variant-numeric: tabular-nums;
}
/* 5.20 ── .gg-empty-state ────────────────────────────────────────────
Dashed-border card for no-results / no-facet-coverage / db-error. */
.gg-empty-state {
text-align: center;
padding: var(--gg-space-7) var(--gg-space-5);
color: var(--gg-color-text-muted);
border: 1px dashed var(--gg-color-border);
border-radius: var(--gg-radius-lg);
background: rgba(30, 27, 46, 0.4);
}
.gg-empty-state__icon {
font-size: 36px;
margin-bottom: var(--gg-space-3);
color: var(--gg-color-plum-500);
line-height: 1;
}
.gg-empty-state__title {
color: var(--gg-color-text-primary);
font-size: 17px;
font-weight: 700;
margin-bottom: var(--gg-space-2);
}
.gg-empty-state__body { font-size: 14px; max-width: 40ch; margin: 0 auto var(--gg-space-4); }
/* 5.21 ── .gg-subnav ─────────────────────────────────────────────────
Sticky within-page navigator for long scroll pages (Athlete Profile).
Replaces the 4-tab panel. Highlights current section on scroll. */
.gg-subnav {
position: sticky;
top: 0;
background: rgba(30, 27, 46, 0.92);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-bottom: 1px solid var(--gg-color-border);
padding: var(--gg-space-3) var(--gg-space-4);
margin: 0 calc(-1 * var(--gg-space-4)) var(--gg-space-5);
z-index: 5;
display: flex;
gap: var(--gg-space-5);
overflow-x: auto;
scrollbar-width: none;
}
.gg-subnav::-webkit-scrollbar { display: none; }
.gg-subnav a {
color: var(--gg-color-text-muted);
text-decoration: none;
font-size: 13px;
font-weight: 600;
white-space: nowrap;
padding: var(--gg-space-1) 0;
border-bottom: 2px solid transparent;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.gg-subnav a:hover { color: var(--gg-color-text-primary); }
.gg-subnav a.is-current {
color: var(--gg-color-medal-gold);
border-bottom-color: var(--gg-color-medal-gold);
}
/* 5.22 ── .gg-entry-card ─────────────────────────────────────────────
The "Start with a name / moment / era" entry-point tiles on Home.
Tall, plum-gradient, big gold verb + short invitation line. */
.gg-entry-card {
background: linear-gradient(155deg, var(--gg-color-plum-700) 0%, var(--gg-color-surface-1) 100%);
border: 1px solid var(--gg-color-border);
border-radius: var(--gg-radius-lg);
padding: var(--gg-space-5);
text-decoration: none;
color: var(--gg-color-text-primary);
display: flex;
flex-direction: column;
gap: var(--gg-space-2);
min-height: 180px;
position: relative;
overflow: hidden;
transition: transform 180ms var(--gg-ease), box-shadow 180ms var(--gg-ease);
}
.gg-entry-card::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at 10% 110%, rgba(255, 215, 0, 0.14), transparent 60%);
pointer-events: none;
}
.gg-entry-card:hover {
transform: translateY(-2px);
box-shadow: var(--gg-shadow-md);
}
.gg-entry-card__kicker {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--gg-color-medal-gold);
}
.gg-entry-card__verb {
font-size: 28px;
font-weight: 800;
color: #fff;
line-height: 1.05;
letter-spacing: -0.01em;
}
.gg-entry-card__body {
font-size: 14px;
color: var(--gg-color-text-muted);
margin-top: auto;
line-height: 1.45;
}
/* 5.23 ── .gg-otd-hero ───────────────────────────────────────────────
Marquee OTD card used on Home and OTD pages — matches the 1200×630
OG template shape so social and site feel continuous. */
.gg-otd-hero {
display: grid;
grid-template-columns: 1fr;
gap: var(--gg-space-5);
align-items: center;
}
.gg-otd-hero__date {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--gg-color-medal-gold);
}
.gg-otd-hero__headline {
font-size: 30px;
font-weight: 800;
color: #fff;
line-height: 1.12;
letter-spacing: -0.01em;
margin: var(--gg-space-2) 0 var(--gg-space-3);
}
.gg-otd-hero__context {
font-size: 15px;
color: var(--gg-color-plum-500);
line-height: 1.55;
max-width: 58ch;
font-weight: 500;
}
.gg-otd-hero__quote {
font-size: 13px;
color: rgba(255, 255, 255, 0.78);
border-left: 3px solid var(--gg-color-medal-gold);
padding-left: var(--gg-space-3);
margin-top: var(--gg-space-4);
font-style: italic;
max-width: 52ch;
}
.gg-otd-hero__og {
display: none;
}
@media (min-width: 1200px) {
.gg-otd-hero { grid-template-columns: 1fr auto; }
.gg-otd-hero__headline { font-size: 42px; }
.gg-otd-hero__og {
display: block;
width: 280px; height: 147px;
background:
radial-gradient(circle at 80% 20%, rgba(255, 215, 0, 0.15), transparent 55%),
linear-gradient(135deg, var(--gg-color-plum-900), var(--gg-color-surface-1));
border: 1px solid rgba(255, 215, 0, 0.2);
border-radius: var(--gg-radius-md);
position: relative;
flex-shrink: 0;
}
.gg-otd-hero__og::after {
content: "1200×630 OG TEMPLATE";
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: 700;
color: rgba(255, 215, 0, 0.5);
letter-spacing: 0.12em;
text-transform: uppercase;
}
}
/* 5.24 ── .gg-prose ──────────────────────────────────────────────────
Typographic prose block for About and editorial-dense sections. */
.gg-prose { max-width: 64ch; color: var(--gg-color-text-muted); }
.gg-prose p { margin: 0 0 var(--gg-space-4); line-height: 1.65; font-size: 16px; }
.gg-prose p strong { color: var(--gg-color-text-primary); font-weight: 600; }
.gg-prose h2 {
font-size: 20px;
color: var(--gg-color-text-primary);
margin: var(--gg-space-6) 0 var(--gg-space-3);
}
.gg-prose h3 {
font-size: 15px;
color: var(--gg-color-medal-gold);
text-transform: uppercase;
letter-spacing: 0.08em;
margin: var(--gg-space-5) 0 var(--gg-space-2);
}
.gg-prose a { color: var(--gg-color-medal-gold); text-decoration: underline; text-underline-offset: 3px; }
.gg-prose a:hover { color: #fff; }
/* 5.25 ── .gg-disclosure ─────────────────────────────────────────────
Native / treatment for "Browse A–Z" on Athletes
Explorer and "Filters" utility drawers. Keeps progressive-narrowing
alive but demoted to secondary affordance. */
.gg-disclosure {
background: var(--gg-color-surface-1);
border: 1px solid var(--gg-color-border);
border-radius: var(--gg-radius-md);
padding: 0;
margin-top: var(--gg-space-6);
}
.gg-disclosure > summary {
cursor: pointer;
list-style: none;
padding: var(--gg-space-4) var(--gg-space-5);
display: flex;
align-items: center;
gap: var(--gg-space-3);
color: var(--gg-color-text-primary);
font-weight: 600;
font-size: 15px;
border-radius: var(--gg-radius-md);
}
.gg-disclosure > summary::-webkit-details-marker { display: none; }
.gg-disclosure > summary::after {
content: "▾";
margin-left: auto;
color: var(--gg-color-medal-gold);
font-size: 12px;
transition: transform 160ms var(--gg-ease);
}
.gg-disclosure[open] > summary::after { transform: rotate(180deg); }
.gg-disclosure > summary:hover { background: rgba(255, 255, 255, 0.03); }
.gg-disclosure__body {
padding: var(--gg-space-2) var(--gg-space-5) var(--gg-space-5);
border-top: 1px solid var(--gg-color-border);
}
/* 5.26 ── .gg-provenance ─────────────────────────────────────────────
Footer-of-page source citation block. Muted, mono, T1-verifiable. */
.gg-provenance {
margin-top: var(--gg-space-7);
padding: var(--gg-space-4) var(--gg-space-5);
background: rgba(30, 27, 46, 0.6);
border: 1px solid var(--gg-color-border);
border-radius: var(--gg-radius-md);
font-family: var(--gg-font-mono);
font-size: 12px;
color: var(--gg-color-text-muted);
line-height: 1.6;
}
.gg-provenance__label {
color: var(--gg-color-medal-gold);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 10px;
margin-bottom: var(--gg-space-2);
display: block;
}
.gg-provenance a { color: var(--gg-color-plum-500); }
/* 5.27 ── .gg-chip--removable ────────────────────────────────────────
Active-filter chip variant (tiny delta on shipped .gg-chip). Adds ✕
affordance. Used in the facet disclosure drawer. */
.gg-chip--removable { padding-right: 8px; }
.gg-chip--removable::after {
content: "✕";
margin-left: 8px;
font-size: 10px;
opacity: 0.6;
}
.gg-chip--removable:hover::after { opacity: 1; }
/* 5.28 ── .gg-skeleton ───────────────────────────────────────────────
Image lazy-load placeholder. Reduced-motion override inherits from
the global @media (prefers-reduced-motion) block at the bottom. */
.gg-skeleton {
background: linear-gradient(
90deg,
var(--gg-color-surface-1),
var(--gg-color-surface-2),
var(--gg-color-surface-1)
);
background-size: 200% 100%;
animation: gg-skeleton-shimmer 1.4s linear infinite;
border-radius: var(--gg-radius-md);
min-height: 120px;
}
@keyframes gg-skeleton-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* 5.29 ── .gg-header__signin (+ .gg-header__avatar) ──────────────────
Right-anchored pill in .gg-header that flips between signed-out and
signed-in renderings based on GET /auth/me. Added by prompt #8 (OAuth
stack) on 2026-04-22; promoted verbatim from _proposed_v11.css here.
DOM shape (see ask.html + wireframes/01_home_v3_proposed.html):
Signed-in state replaces __label contents with a <.gg-header__avatar>
+ <.gg-header__signin__name>. */
.gg-header__signin {
position: relative;
margin-left: auto;
display: inline-flex;
align-items: center;
gap: var(--gg-space-1);
padding: 6px 12px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.22);
background: rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.92);
font-size: 13px;
font-weight: 600;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
user-select: none;
transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.gg-header__signin[hidden] { display: none; }
.gg-header__signin:hover,
.gg-header__signin:focus-visible {
color: var(--gg-color-medal-gold);
background: rgba(255, 255, 255, 0.16);
border-color: rgba(255, 215, 0, 0.5);
outline: none;
}
.gg-header__signin__caret { font-size: 9px; opacity: 0.7; }
.gg-header__avatar {
width: 22px;
height: 22px;
border-radius: 50%;
display: inline-grid;
place-items: center;
background: linear-gradient(135deg, var(--gg-color-medal-gold), var(--gg-color-plum-500));
color: var(--gg-color-plum-900);
font-size: 11px;
font-weight: 800;
}
.gg-header__signin__name {
max-width: 120px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.gg-header__signin__panel {
position: absolute;
top: calc(100% + 8px);
right: 0;
min-width: 240px;
background: var(--gg-color-surface-1);
border: 1px solid rgba(255, 215, 0, 0.28);
border-radius: var(--gg-radius-md);
padding: var(--gg-space-1);
box-shadow: var(--gg-shadow-lg);
z-index: 100;
display: none;
}
.gg-header__signin[aria-expanded="true"] .gg-header__signin__panel { display: block; }
.gg-header__signin__panel form { margin: 0; }
.gg-header__signin__panel button,
.gg-header__signin__panel a {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 10px 12px;
border: 0;
background: transparent;
color: var(--gg-color-text-primary);
font-size: 13px;
font-weight: 600;
border-radius: var(--gg-radius-sm);
cursor: pointer;
text-decoration: none;
text-align: left;
font-family: inherit;
}
.gg-header__signin__panel button:hover,
.gg-header__signin__panel a:hover {
background: rgba(255, 215, 0, 0.10);
color: var(--gg-color-medal-gold);
}
.gg-header__signin__panel hr {
border: 0;
border-top: 1px solid rgba(255, 255, 255, 0.08);
margin: 6px 4px;
}
.gg-header__signin__email {
padding: 8px 12px 4px;
font-size: 11px;
color: var(--gg-color-text-muted);
word-break: break-all;
line-height: 1.3;
}
@media (max-width: 767px) {
.gg-header__signin { padding: 5px 10px; font-size: 12.5px; }
.gg-header__signin__name { max-width: 80px; }
}
/* 6 ── Mobile-first media queries ──────────────────────────────────── */
/* Baseline above is mobile-first (≥ 375 px).
Tablet — adjusts page gutter and typography for wider screens. */
@media (min-width: 768px) {
.gg-page { padding: var(--gg-space-7) var(--gg-space-7) var(--gg-space-8); }
h1 { font-size: 32px; }
}
/* Desktop — additional breathing room; no token overrides. */
@media (min-width: 1200px) {
.gg-page { padding: var(--gg-space-7) 0 var(--gg-space-8); }
}
/* Narrow-mobile safety net — keeps 375 px layouts from breaking. */
@media (max-width: 420px) {
.gg-header { padding: 0 var(--gg-space-3); }
.gg-header__nav { gap: 0; }
.gg-pub-link { padding: 0 8px; font-size: 12px; }
.gg-card { padding: var(--gg-space-4); }
.gg-table { font-size: 12px; }
.gg-table th, .gg-table td { padding: 8px 10px; }
}
/* 7 ── Reduced-motion override ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ─────────────────────────────────────────────────────────────────────────
.gg-quiz-* — quiz answer-option modifiers (Prompt #18 Web Developer leg).
These extend .gg-btn for the post-answer reveal state on /quiz/play/.
Lifted from wireframes/12_quiz_play.html; rgba success/danger backgrounds
+ full-opacity borders preserve the visual contract from the Designer leg.
Anti-cheat: the modifier classes are added by the controller AFTER a
successful /quiz/answer POST — never before.
───────────────────────────────────────────────────────────────────────── */
.gg-quiz-option {
/* Post-answer locked state — lock visual without removing focus rings. */
}
.gg-quiz-option:disabled { opacity: 1; cursor: default; }
.gg-quiz-option--correct {
background: rgba(93, 220, 158, 0.14);
border-color: var(--gg-color-success);
color: var(--gg-color-text-primary);
}
.gg-quiz-option--picked-wrong {
background: rgba(240, 128, 128, 0.14);
border-color: var(--gg-color-danger);
color: var(--gg-color-text-primary);
}
.gg-quiz-option__indicator {
display: inline-block;
width: 18px;
height: 18px;
margin-right: var(--gg-space-2);
border-radius: 999px;
vertical-align: middle;
font-size: 12px;
font-weight: 700;
line-height: 18px;
text-align: center;
flex-shrink: 0;
}
.gg-quiz-option__indicator--ok {
background: var(--gg-color-success);
color: var(--gg-color-text-dark);
}
.gg-quiz-option__indicator--no {
background: var(--gg-color-danger);
color: var(--gg-color-text-dark);
}
/* ─────────────────────────────────────────────────────────────────────
v1.2/v1.3 — Workstream 2 chrome additions retained.
- F/M tag tokens + classes (v1.2; W1 chrome synthesis Element C).
- Hamburger sheet (v1.2; D13 retained per Josh ruling 2026-05-04).
DROPPED in v1.3 per Josh rulings 2026-05-04:
- .gg-watermark + --dense (D16 — wireframes use body.gg-silhouette only)
- .gg-footer--three-col + .gg-footer__columns/__column/__column-header/
__bottom/__tagline/__legal (D15 — wireframes use simple 1-row footer)
- .gg-nav-chip + --current + --accent (D14 — wireframes use .gg-pub-link
text-on-bar; deleted per Option B grep audit confirming all callers
migrated this leg).
───────────────────────────────────────────────────────────────────── */
/* F/M tag chip variants — extend `.gg-tag`. Pair with `--gg-color-text-dark`. */
.gg-tag--female { background: var(--gg-color-tag-female); color: var(--gg-color-text-dark); }
.gg-tag--male { background: var(--gg-color-tag-male); color: var(--gg-color-text-dark); }
/* Hamburger sheet (Element A mobile reflow at <600px; D13 KEEP per Josh 2026-05-04).
Pure CSS via ; no JS dependency. Desktop nav hides; sheet shows full
nav slate + Sign in + secondary links (Teams, Glossary, Privacy, Terms). */
.gg-header__hamburger { display: none; }
@media (max-width: 599px) {
.gg-header__nav { display: none; }
.gg-header__signin { display: none; }
.gg-header__hamburger { display: block; margin-left: auto; position: relative; }
.gg-header__hamburger summary { list-style: none; cursor: pointer; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: var(--gg-color-text-primary); font-size: 1.5rem; }
.gg-header__hamburger summary::-webkit-details-marker { display: none; }
.gg-header__hamburger[open] .gg-header__hamburger-sheet { display: flex; flex-direction: column; }
.gg-header__hamburger-sheet { display: none; position: absolute; top: 100%; right: 0; min-width: 240px; background: var(--gg-color-surface-1); border: 1px solid var(--gg-color-border); padding: var(--gg-space-4); gap: var(--gg-space-2); box-shadow: var(--gg-shadow-md); z-index: 100; border-radius: var(--gg-radius-md); }
.gg-header__hamburger-sheet a { color: var(--gg-color-text-primary); text-decoration: none; padding: var(--gg-space-3); min-height: 44px; display: flex; align-items: center; border-radius: var(--gg-radius-md); }
.gg-header__hamburger-sheet a:hover { background: rgba(255,255,255,0.06); }
}
/* ─────────────────────────────────────────────────────────────────────
v1.3 — Page-local CSS promoted from wireframes (per W2 v2 spec § 7).
Each section corresponds to a wireframe + render_* function it serves.
Ordering: home → athletes-list → competitions → competition-detail →
athlete-profile → medals → otd → legal pages → stub pages.
───────────────────────────────────────────────────────────────────── */
/* 5.30 ── Home (.home-marketing-hero + .home-stat-tiles + .home-hero-search
+ .home-featured-rail + .home-entry-grid + .home-ask-strip Voice 3).
Source: wireframes/01_home_v3_proposed.html lines 280-522. ── */
.home-marketing-hero { padding: 56px 28px 44px; }
@media (min-width: 768px) { .home-marketing-hero { padding: 76px 56px 60px; } }
.home-marketing-hero__headline {
font-size: 34px;
line-height: 1.06;
max-width: 22ch;
}
@media (min-width: 768px) { .home-marketing-hero__headline { font-size: 52px; } }
@media (min-width: 1200px) { .home-marketing-hero__headline { font-size: 60px; } }
.home-marketing-hero__subline {
max-width: 56ch;
margin-top: 14px;
margin-bottom: var(--gg-space-6);
}
.home-stat-tiles {
display: grid;
/* minmax(0, 1fr) lets columns shrink below intrinsic min-content; without
this the third tile's "50,582" value forces grid wider than .gg-hero,
which then clips it via overflow:hidden on the hero (mobile only). */
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--gg-space-3);
margin: var(--gg-space-5) 0 var(--gg-space-6);
max-width: 620px;
}
@media (min-width: 768px) {
.home-stat-tiles { gap: var(--gg-space-4); max-width: 680px; }
}
.home-stat-tile {
background: rgba(0, 0, 0, 0.22);
border: 1px solid rgba(255, 215, 0, 0.18);
border-radius: var(--gg-radius-md);
padding: 14px 16px;
/* Pair with grid-template-columns minmax(0, 1fr): allow the tile box to
shrink below its content's min-content width. */
min-width: 0;
}
@media (max-width: 480px) {
/* Tighten hero+tile padding on narrow viewports so the third stat tile
("50,582") fits. Previously the column content area was ~45px, which
forced "50,582" at 26px/800 to overflow the hero clip-edge. */
.home-marketing-hero { padding-left: 16px; padding-right: 16px; }
.home-stat-tiles { gap: var(--gg-space-2); }
.home-stat-tile { padding: 12px 8px; }
}
.home-stat-tile__value {
display: block;
/* Scale value with viewport so "50,582" at 800-weight always fits the
tile content area on small screens. Floor 20px keeps it readable; the
≥768px override below sets the desktop size. */
font-size: clamp(20px, 6vw, 26px);
font-weight: 800;
color: var(--gg-color-medal-gold);
line-height: 1;
letter-spacing: -0.01em;
font-variant-numeric: tabular-nums;
}
@media (min-width: 768px) { .home-stat-tile__value { font-size: 32px; } }
.home-stat-tile__label {
display: block;
margin-top: 8px;
/* Scale label so "RESULTS" with letter-spacing fits the column on
narrow phones. Tightened spacing on mobile via clamp+letter-spacing. */
font-size: clamp(11px, 3vw, 12px);
color: rgba(255, 255, 255, 0.78);
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 600;
}
@media (min-width: 768px) { .home-stat-tile__label { letter-spacing: 0.08em; } }
.home-hero-search {
display: flex;
gap: 0;
max-width: 720px;
margin-top: var(--gg-space-2);
background: rgba(0, 0, 0, 0.32);
border: 1px solid rgba(255, 215, 0, 0.28);
border-radius: 999px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}
.home-hero-search:focus-within {
border-color: var(--gg-color-medal-gold);
box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.22);
}
.home-hero-search__input {
flex: 1;
background: transparent;
border: 0;
outline: 0;
padding: 14px 22px;
font-size: 15px;
color: #fff;
font-family: var(--gg-font-sans);
min-width: 0;
min-height: 44px;
}
.home-hero-search__input::placeholder {
color: rgba(255, 255, 255, 0.55);
font-style: italic;
}
.home-hero-search__btn {
background: var(--gg-color-medal-gold);
color: var(--gg-color-plum-900);
border: 0;
padding: 0 22px;
font-weight: 800;
font-size: 14px;
letter-spacing: 0.04em;
cursor: pointer;
font-family: var(--gg-font-sans);
min-height: 44px;
}
.home-hero-search__btn:hover { background: #FFE85C; }
.home-featured-rail {
margin-top: var(--gg-space-4);
max-width: 100%;
}
.home-featured-rail__label {
display: block;
font-size: 11px;
font-weight: 700;
color: rgba(255, 215, 0, 0.85);
text-transform: uppercase;
letter-spacing: 0.14em;
margin-bottom: 10px;
}
.home-featured-rail__row {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.home-featured-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 16px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.18);
color: #fff;
border-radius: 999px;
text-decoration: none;
font-size: 13px;
font-weight: 600;
min-height: 44px;
transition: background 160ms var(--gg-ease), border-color 160ms var(--gg-ease);
}
.home-featured-pill:hover {
background: rgba(255, 215, 0, 0.16);
border-color: rgba(255, 215, 0, 0.55);
}
.home-entry-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--gg-space-4);
margin: var(--gg-space-7) 0 var(--gg-space-6);
}
@media (min-width: 768px) { .home-entry-grid { grid-template-columns: repeat(3, 1fr); } }
.gg-entry-card__date {
display: block;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--gg-color-medal-gold);
margin-bottom: 6px;
}
.home-ask-strip {
background: var(--gg-color-surface-1);
border: 1px solid var(--gg-color-border);
border-left: 3px solid var(--gg-color-medal-gold);
border-radius: var(--gg-radius-md);
padding: var(--gg-space-5);
margin-top: var(--gg-space-6);
display: grid;
gap: var(--gg-space-3);
position: relative;
overflow: hidden;
}
.home-ask-strip::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at 0% 0%, rgba(255, 215, 0, 0.08), transparent 45%);
pointer-events: none;
}
.home-ask-strip > * { position: relative; }
@media (min-width: 768px) {
.home-ask-strip {
grid-template-columns: 1fr auto;
align-items: center;
padding: var(--gg-space-5) var(--gg-space-6);
}
}
.home-ask-strip__pitch {
font-size: 17px;
font-weight: 700;
color: var(--gg-color-text-primary);
line-height: 1.35;
}
.home-ask-strip__pitch em {
font-style: italic;
color: var(--gg-color-medal-gold);
font-weight: 700;
}
.home-ask-strip__pitch .ask-verb {
color: var(--gg-color-medal-gold);
font-weight: 800;
}
.home-ask-strip__sub {
font-size: 14px;
color: var(--gg-color-text-muted);
margin-top: 6px;
line-height: 1.5;
}
.home-ask-strip__sub .name {
color: var(--gg-color-medal-gold);
font-weight: 600;
opacity: 0.92;
}
.home-ask-strip__cta.gg-btn--primary {
background: var(--gg-color-medal-gold);
color: var(--gg-color-plum-900);
font-weight: 800;
letter-spacing: 0.01em;
box-shadow: 0 4px 14px rgba(255, 215, 0, 0.22);
}
.home-ask-strip__cta.gg-btn--primary:hover {
background: #FFE85C;
color: var(--gg-color-plum-900);
box-shadow: 0 6px 20px rgba(255, 215, 0, 0.32);
}
.home-ask-strip__cta { justify-self: start; }
@media (min-width: 768px) { .home-ask-strip__cta { justify-self: end; } }
/* 5.31 ── Athletes list + Eras rail (.gg-era-card + .az-grid + .az-facet-row).
Source: wireframes/02_athletes.html lines 147-193. ── */
.gg-era-card {
background: linear-gradient(145deg, var(--gg-color-plum-900), var(--gg-color-surface-1) 80%);
border: 1px solid var(--gg-color-border);
border-radius: var(--gg-radius-lg);
padding: var(--gg-space-4);
color: var(--gg-color-text-primary);
text-decoration: none;
min-height: 160px;
display: flex; flex-direction: column; gap: var(--gg-space-2);
position: relative; overflow: hidden;
transition: transform 160ms var(--gg-ease), box-shadow 160ms var(--gg-ease);
}
.gg-era-card::before {
content: "";
position: absolute; inset: 0;
background: radial-gradient(circle at 85% 110%, rgba(255, 215, 0, 0.12), transparent 55%);
pointer-events: none;
}
.gg-era-card:hover { transform: translateY(-2px); box-shadow: var(--gg-shadow-md); }
.gg-era-card__years {
font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
text-transform: uppercase; color: var(--gg-color-medal-gold);
font-variant-numeric: tabular-nums;
}
.gg-era-card__title { font-size: 18px; font-weight: 800; color: #fff; line-height: 1.15; }
.gg-era-card__sub { font-size: 12px; color: var(--gg-color-text-muted); margin-top: auto; line-height: 1.5; }
.az-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--gg-space-3);
margin-top: var(--gg-space-4);
}
@media (min-width: 768px) { .az-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .az-grid { grid-template-columns: repeat(3, 1fr); } }
.az-facet-row {
display: flex; flex-wrap: wrap; gap: var(--gg-space-2);
margin-bottom: var(--gg-space-3);
}
.az-facet-row__label {
font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
text-transform: uppercase; color: var(--gg-color-text-muted);
align-self: center; margin-right: var(--gg-space-2);
}
/* 5.31.1 ── Athletes search input + zero-count chip styling.
Lifted from wireframes/02_athletes.html lines 108-145 (was page-local) +
filter_state_machine.md § 3.2 (zero-count chips). prompt22 § 3.7. ── */
/* WD-2026-05-09 round-6: structural rewrite. Was a flex-with-gap
container that emitted a detached round button + boxed input —
visually inconsistent with the home page hero search. Now mirrors
.home-hero-search: single 999px-pill wrapper, gold border, dark bg,
overflow:hidden so the button takes the right edge of the pill
without its own border-radius. Legacy .gg-input child styling +
absolutely-positioned ⌕ icon + "/" kbd glyph are removed; the
markup now uses .athletes-search-wrap__input on the input directly
and the kbd lives in the descriptive paragraph below the form. */
.athletes-search-wrap {
display: flex;
gap: 0;
max-width: 720px;
margin-top: var(--gg-space-4);
background: rgba(0, 0, 0, 0.32);
border: 1px solid rgba(255, 215, 0, 0.28);
border-radius: 999px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}
.athletes-search-wrap:focus-within {
border-color: var(--gg-color-medal-gold);
box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.22);
}
.athletes-search-wrap__input {
flex: 1;
background: transparent;
border: 0;
outline: 0;
padding: 14px 22px;
font-size: 15px;
color: #fff;
font-family: var(--gg-font-sans);
min-width: 0;
min-height: 44px;
}
.athletes-search-wrap__input::placeholder {
color: rgba(255, 255, 255, 0.55);
font-style: italic;
}
.athletes-search-wrap__btn {
background: var(--gg-color-medal-gold);
color: var(--gg-color-plum-900);
border: 0;
padding: 0 22px;
font-weight: 800;
font-size: 14px;
letter-spacing: 0.04em;
cursor: pointer;
font-family: var(--gg-font-sans);
min-height: 44px;
flex-shrink: 0;
}
.athletes-search-wrap__btn:hover { background: #FFE85C; }
.athletes-search-wrap__btn:focus-visible {
outline: 2px solid var(--gg-color-medal-gold);
outline-offset: 2px;
}
/* Zero-count facet chips per filter_state_machine.md § 3.2: rendered with
reduced opacity + not-allowed cursor, retained in the DOM (no layout
shift) but not navigable. Screen-reader-friendly — the chip text still
reads with the "(0)" count and aria-disabled flips the announcement. */
.gg-chip[aria-disabled="true"] {
opacity: 0.45;
cursor: not-allowed;
pointer-events: none;
}
/* JS-driven `card.hidden = true` (athletes-search.js filter) needs to win
over the explicit `display: flex/grid` on .gg-named-card and .az-grid.
Without this, the user-agent default `[hidden] { display: none }` is
overridden by the author rule, so cards stay visible and the search
appears broken. Universal rule, !important to guarantee precedence. */
[hidden] {
display: none !important;
}
/* 5.32 ── Competitions list (.gg-meet-card + .view-toggle).
Source: wireframes/04_competitions.html lines 107-141. ── */
.gg-meet-card {
display: flex;
flex-direction: column;
gap: var(--gg-space-2);
background: var(--gg-color-surface-1);
border: 1px solid var(--gg-color-border);
border-radius: var(--gg-radius-md);
padding: var(--gg-space-3) var(--gg-space-4);
text-decoration: none;
color: var(--gg-color-text-primary);
transition: transform 140ms var(--gg-ease), border-color 140ms var(--gg-ease);
min-height: 44px;
}
.gg-meet-card:hover { border-color: var(--gg-color-plum-500); transform: translateY(-1px); }
.gg-meet-card__year {
font-size: 11px; font-weight: 700; color: var(--gg-color-medal-gold);
text-transform: uppercase; letter-spacing: 0.1em;
font-variant-numeric: tabular-nums;
}
.gg-meet-card__title { font-size: 15px; font-weight: 700; color: #fff; letter-spacing: -0.01em; }
.gg-meet-card__sub { font-size: 12px; color: var(--gg-color-text-muted); }
.gg-meet-card--marquee { border-left: 3px solid var(--gg-color-medal-gold); }
.gg-meet-card--marquee .gg-meet-card__title { color: var(--gg-color-medal-gold); }
.view-toggle {
display: flex; gap: var(--gg-space-2);
margin: var(--gg-space-4) 0;
align-items: center;
flex-wrap: wrap;
}
.view-toggle__label {
font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
text-transform: uppercase; color: var(--gg-color-text-muted);
margin-right: var(--gg-space-2);
}
/* 5.33 ── Competition detail (.aa-card + .aa-podium + .apparatus-section
+ .summary-prose + .stats-trio + section[id] scroll-margin).
Source: wireframes/05_competition_detail.html lines 107-194. ── */
.stats-trio {
display: flex;
flex-wrap: wrap;
gap: var(--gg-space-4) var(--gg-space-6);
margin-top: var(--gg-space-4);
align-items: baseline;
}
.stats-trio .gg-stat { min-width: 80px; }
.aa-hero-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--gg-space-4);
margin-top: var(--gg-space-3);
}
@media (min-width: 1200px) { .aa-hero-grid { grid-template-columns: repeat(2, 1fr); } }
.aa-card {
background: linear-gradient(135deg, var(--gg-color-plum-900), var(--gg-color-surface-1));
border: 1px solid var(--gg-color-border);
border-radius: var(--gg-radius-lg);
padding: var(--gg-space-5);
position: relative;
overflow: hidden;
}
.aa-card::before {
content: "";
position: absolute; inset: 0;
background: radial-gradient(circle at 95% 5%, rgba(255, 215, 0, 0.08), transparent 60%);
pointer-events: none;
}
.aa-card__eyebrow {
font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
text-transform: uppercase; color: var(--gg-color-medal-gold);
margin-bottom: 6px;
}
.aa-card__title {
font-size: 20px; font-weight: 800; color: #fff;
letter-spacing: -0.01em; margin-bottom: var(--gg-space-3);
}
.aa-podium { display: flex; flex-direction: column; gap: var(--gg-space-2); position: relative; }
.aa-podium__row {
display: grid;
grid-template-columns: 28px 1fr auto;
gap: var(--gg-space-3);
align-items: baseline;
padding: 10px 0;
border-bottom: 1px solid rgba(92, 68, 104, 0.35);
}
.aa-podium__row:last-child { border-bottom: none; }
.aa-podium__place { font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.aa-podium__athlete { color: #fff; font-weight: 600; font-size: 15px; }
.aa-podium__country { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gg-color-text-muted); margin-left: 6px; }
.apparatus-section { display: grid; grid-template-columns: 1fr; gap: var(--gg-space-5); margin-top: var(--gg-space-5); }
.apparatus-section details {
background: var(--gg-color-surface-1);
border: 1px solid var(--gg-color-border);
border-radius: var(--gg-radius-md);
}
.apparatus-section summary {
cursor: pointer; list-style: none;
padding: var(--gg-space-4) var(--gg-space-5);
display: flex; align-items: baseline; gap: var(--gg-space-3);
font-size: 15px; font-weight: 700;
min-height: 44px;
}
.apparatus-section summary::-webkit-details-marker { display: none; }
.apparatus-section summary::after { content: "▾"; margin-left: auto; color: var(--gg-color-medal-gold); font-size: 12px; }
.apparatus-section details[open] summary::after { transform: rotate(180deg); }
.apparatus-section__kicker {
font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
text-transform: uppercase; color: var(--gg-color-text-muted);
}
main section[id] { scroll-margin-top: 72px; padding-top: var(--gg-space-5); }
main section[id] > h2 { font-size: 22px; margin-bottom: var(--gg-space-3); letter-spacing: -0.01em; }
.summary-prose {
color: var(--gg-color-text-primary);
font-size: 16px;
line-height: 1.7;
max-width: 64ch;
background: rgba(255, 215, 0, 0.04);
border-left: 3px solid var(--gg-color-medal-gold);
padding: var(--gg-space-4) var(--gg-space-5);
border-radius: 0 var(--gg-radius-md) var(--gg-radius-md) 0;
}
.summary-prose strong { color: var(--gg-color-medal-gold); }
/* 5.34 ── Athlete profile (.timeline + .profile-hero__lede + .apparatus-grid).
Source: wireframes/03_athlete_profile.html lines 107-168. ── */
.timeline {
display: grid;
grid-template-columns: 1fr;
gap: var(--gg-space-3);
padding: var(--gg-space-4) 0;
}
.timeline__year {
display: grid;
grid-template-columns: 64px 1fr;
gap: var(--gg-space-4);
padding: var(--gg-space-3) 0;
border-top: 1px solid rgba(92, 68, 104, 0.4);
}
.timeline__year:first-child { border-top: none; }
.timeline__label {
font-size: 18px; font-weight: 800;
color: var(--gg-color-medal-gold);
font-variant-numeric: tabular-nums;
line-height: 1;
}
.timeline__entry {
display: flex; flex-wrap: wrap;
gap: var(--gg-space-2);
font-size: 13px;
color: var(--gg-color-text-primary);
}
.timeline__entry strong { color: #fff; }
.timeline__meet { color: var(--gg-color-text-muted); font-size: 12px; display: block; }
.profile-hero__header {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: var(--gg-space-2) var(--gg-space-3);
}
.profile-hero__lede {
color: rgba(255, 255, 255, 0.92);
font-size: 16px;
margin: var(--gg-space-4) 0 0;
max-width: 58ch;
line-height: 1.55;
font-weight: 400;
}
@media (min-width: 768px) {
.profile-hero__lede { font-size: 18px; }
}
.apparatus-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--gg-space-3);
}
@media (min-width: 768px) { .apparatus-grid { grid-template-columns: repeat(2, 1fr); } }
.apparatus-grid .gg-card { padding: var(--gg-space-4); }
.apparatus-grid h3 { font-size: 15px; color: var(--gg-color-medal-gold); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--gg-space-2); }
/* 5.35 ── Medals (.scope-summary + .rollup-pullout + table aria-sort).
Source: wireframes/06_medals.html lines 107-191. ── */
.gg-table th[aria-sort] a {
color: inherit;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 6px;
}
.gg-table th[aria-sort]:hover a { color: #fff; }
.gg-table th[aria-sort="descending"] a::after { content: "▾"; opacity: 0.8; }
.gg-table th[aria-sort="ascending"] a::after { content: "▴"; opacity: 0.8; }
.gg-table th[aria-sort="none"] a::after { content: "⇅"; opacity: 0.4; font-size: 10px; }
.scope-summary {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 6px;
}
.scope-summary__pill {
font-size: 11px;
padding: 2px 9px;
border-radius: 999px;
background: rgba(255, 215, 0, 0.12);
border: 1px solid rgba(255, 215, 0, 0.3);
color: var(--gg-color-medal-gold);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.rollup-pullout {
margin-top: var(--gg-space-6);
background: rgba(255, 215, 0, 0.04);
border: 1px solid rgba(255, 215, 0, 0.25);
border-radius: var(--gg-radius-lg);
padding: var(--gg-space-5);
max-width: 70ch;
}
.rollup-pullout h3 {
color: var(--gg-color-medal-gold);
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: var(--gg-space-2);
}
.rollup-pullout p {
font-size: 15px;
color: var(--gg-color-text-primary);
line-height: 1.65;
margin-bottom: var(--gg-space-2);
}
.rollup-pullout p:last-child { margin-bottom: 0; color: var(--gg-color-text-muted); font-size: 13px; }
/* 5.36 ── On This Day (.otd-support-list + .otd-support-row + .calendar-utility).
Source: wireframes/07_ontd.html lines 107-174. ── */
.otd-support-list {
display: grid;
grid-template-columns: 1fr;
gap: var(--gg-space-2);
margin: var(--gg-space-5) 0 var(--gg-space-6);
}
.otd-support-row {
display: grid;
grid-template-columns: 56px 1fr;
gap: var(--gg-space-3);
align-items: baseline;
padding: var(--gg-space-3) var(--gg-space-4);
background: var(--gg-color-surface-1);
border: 1px solid var(--gg-color-border);
border-radius: var(--gg-radius-md);
text-decoration: none;
color: var(--gg-color-text-primary);
transition: border-color 140ms var(--gg-ease);
min-height: 44px;
}
.otd-support-row:hover { border-color: var(--gg-color-plum-500); }
.otd-support-row__year {
font-size: 14px; font-weight: 800;
color: var(--gg-color-medal-gold);
font-variant-numeric: tabular-nums;
}
.otd-support-row__title { font-size: 14px; font-weight: 600; color: #fff; letter-spacing: -0.01em; }
.otd-support-row__sub { font-size: 12px; color: var(--gg-color-text-muted); margin-top: 2px; }
.calendar-utility {
margin-top: var(--gg-space-7);
padding: var(--gg-space-5);
background: var(--gg-color-surface-1);
border: 1px solid var(--gg-color-border);
border-radius: var(--gg-radius-lg);
}
.calendar-utility__label {
font-size: 11px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.1em;
color: var(--gg-color-text-muted);
margin-bottom: var(--gg-space-3);
}
.calendar-utility__form {
display: flex;
flex-wrap: wrap;
gap: var(--gg-space-2);
align-items: center;
}
.calendar-utility__date-input {
padding: 8px 12px;
font-family: var(--gg-font-mono);
font-size: 13px;
width: auto;
}
.calendar-nav__kbd {
font-family: var(--gg-font-mono);
font-size: 11px;
background: rgba(255, 255, 255, 0.08);
padding: 2px 6px;
border-radius: 4px;
color: var(--gg-color-text-muted);
}
/* 5.37 ── Legal pages (.legal-meta + .arb-callout) + Stub pages
(.stub-callout + .stub-cta-row + .starter-glossary).
Sources: wireframes/09_privacy.html, 10_terms.html, 14_teams_stub.html,
15_glossary_stub.html. ── */
.legal-meta {
font-size: 13px;
color: var(--gg-color-text-muted);
margin-bottom: var(--gg-space-4);
padding-bottom: var(--gg-space-3);
border-bottom: 1px solid var(--gg-color-border);
}
.legal-meta strong { color: var(--gg-color-text-primary); }
.arb-callout {
border: 1px solid var(--gg-color-medal-gold);
background: rgba(255, 215, 0, 0.05);
padding: var(--gg-space-4);
border-radius: var(--gg-radius-md);
margin: var(--gg-space-4) 0;
font-size: 14.5px;
}
.arb-callout strong { color: var(--gg-color-medal-gold); }
.stub-callout {
background: var(--gg-color-surface-1);
border: 1px solid var(--gg-color-border);
border-left: 3px solid var(--gg-color-medal-gold);
border-radius: var(--gg-radius-md);
padding: var(--gg-space-5);
margin-top: var(--gg-space-5);
max-width: 64ch;
}
.stub-callout__label {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--gg-color-medal-gold);
display: block;
margin-bottom: var(--gg-space-2);
}
.stub-callout p {
font-size: 16px;
line-height: 1.6;
color: var(--gg-color-text-primary);
margin: 0 0 var(--gg-space-3);
}
.stub-callout p:last-child { margin-bottom: 0; }
.stub-cta-row {
margin-top: var(--gg-space-5);
display: flex;
flex-wrap: wrap;
gap: var(--gg-space-3);
}
.starter-glossary { margin-top: var(--gg-space-6); max-width: 64ch; }
.starter-glossary__h2 {
font-size: 18px;
font-weight: 700;
color: var(--gg-color-text-primary);
margin: 0 0 var(--gg-space-3);
}
.starter-glossary dl {
display: grid;
grid-template-columns: 80px 1fr;
gap: var(--gg-space-2) var(--gg-space-4);
margin: 0;
}
.starter-glossary dt {
font-family: var(--gg-font-mono);
font-weight: 700;
color: var(--gg-color-medal-gold);
font-size: 14px;
}
.starter-glossary dd {
margin: 0;
font-size: 15px;
color: var(--gg-color-text-primary);
line-height: 1.55;
}
/* 5.38 ── NCAA postseason — per-athlete profile section
audit-NCAA 2026-05-08 (web-developer).
Renders the new `` block in render_athlete_profile
for the ~3,450 athletes with NCAA roster entries (Chiles, Lee, Dunne,
Thomas, O'Keefe, Wong, Bowers, Bryant, Davis, etc.). Layout is:
gg-ncaa section wrapper
└─ gg-ncaa__intro lede paragraph (phrasing helper)
└─ gg-ncaa-seasons vertical stack of season blocks
└─ gg-ncaa-season one season — h3 head + meet list
└─ gg-ncaa-meet-list
└─ gg-ncaa-meet
├─ gg-ncaa-meet__header (date · label)
└─ gg-ncaa-meet__scores (apparatus pills)
Tokens used: --gg-color-medal-gold (Perfect 10 highlight, season
accent border) + --gg-color-surface-1 / surface-2 / border /
text-primary / text-muted + --gg-space-* + --gg-radius-*. All v1.4
tokens — no new tokens introduced. ── */
.gg-ncaa {
margin: var(--gg-space-6) 0;
}
.gg-ncaa__intro {
max-width: 64ch;
font-size: 16px;
line-height: 1.55;
color: var(--gg-color-text-primary);
margin: 0 0 var(--gg-space-5);
}
.gg-ncaa-seasons {
display: flex;
flex-direction: column;
gap: var(--gg-space-5);
list-style: none;
padding: 0;
margin: 0;
}
.gg-ncaa-season {
background: var(--gg-color-surface-1);
border: 1px solid var(--gg-color-border);
border-left: 3px solid var(--gg-color-medal-gold);
border-radius: var(--gg-radius-md);
padding: var(--gg-space-5);
}
.gg-ncaa-season__head {
font-family: var(--gg-font-mono, ui-monospace, SFMono-Regular,
"SF Mono", Menlo, Consolas, monospace);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--gg-color-medal-gold);
margin: 0 0 var(--gg-space-4);
}
.gg-ncaa-meet-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--gg-space-3);
}
.gg-ncaa-meet {
background: var(--gg-color-surface-2);
border: 1px solid var(--gg-color-border);
border-radius: var(--gg-radius-sm);
padding: var(--gg-space-3) var(--gg-space-4);
}
.gg-ncaa-meet__header {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: var(--gg-space-3);
margin-bottom: var(--gg-space-3);
}
.gg-ncaa-meet__date {
font-family: var(--gg-font-mono, ui-monospace, SFMono-Regular,
"SF Mono", Menlo, Consolas, monospace);
font-size: 13px;
color: var(--gg-color-text-muted);
white-space: nowrap;
min-width: 56px;
}
.gg-ncaa-meet__label {
font-size: 15px;
font-weight: 600;
color: var(--gg-color-text-primary);
line-height: 1.3;
}
.gg-ncaa-meet__scores {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
gap: var(--gg-space-2);
}
.gg-ncaa-score {
display: inline-flex;
align-items: baseline;
gap: 6px;
background: var(--gg-color-surface-1);
border: 1px solid var(--gg-color-border);
border-radius: var(--gg-radius-pill);
padding: 4px 10px;
font-size: 14px;
line-height: 1.2;
color: var(--gg-color-text-primary);
}
.gg-ncaa-score__app {
font-family: var(--gg-font-mono, ui-monospace, SFMono-Regular,
"SF Mono", Menlo, Consolas, monospace);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--gg-color-text-muted);
}
.gg-ncaa-score__val {
font-variant-numeric: tabular-nums;
font-weight: 600;
}
.gg-ncaa-score__tag {
font-size: 10.5px;
font-style: italic;
color: var(--gg-color-text-muted);
letter-spacing: 0.04em;
margin-left: 2px;
}
/* Perfect 10 — the top mark in NCAA's Perfect-10 system
(GYMNASTICS_FLUENCY.md § 5/§ 7). Subtle gold treatment matching
the medals page accent. */
.gg-ncaa-score--p10 {
background: rgba(255, 215, 0, 0.10);
border-color: var(--gg-color-medal-gold);
}
.gg-ncaa-score--p10 .gg-ncaa-score__val {
color: var(--gg-color-medal-gold);
font-weight: 700;
}
.gg-ncaa-score--p10 .gg-ncaa-score__app {
color: var(--gg-color-medal-gold);
}
/* Non-counting routine (5-of-6 lineup drop) — muted but legible. */
.gg-ncaa-score--noncount {
opacity: 0.72;
}
.gg-ncaa-score--noncount .gg-ncaa-score__val {
color: var(--gg-color-text-muted);
}
/* Exhibition routine (lineup add-on, doesn't count toward total). */
.gg-ncaa-score--exh {
opacity: 0.78;
font-style: italic;
}
.gg-ncaa-score--exh .gg-ncaa-score__val {
color: var(--gg-color-text-muted);
font-style: normal;
}
/* Narrow-viewport stacking: meet header wraps cleanly already, but
on phones the apparatus pills wrap into 2 rows of 2 for WAG (4
apparatus) and 3 rows of 2 for MAG (6 apparatus). The flex-wrap
above handles that without extra rules. */
/* 5.39 ── Athlete-profile redesign primitives — full-career Timeline,
per-tier meet cards, qual+final phase fold-in, tier chips.
Source authority: _drafts/2026-05-08_athlete_page_redesign_proposal.md.
Companion mockup: _drafts/2026-05-08_chiles_redesign_mockup.html.
Approved by Josh 2026-05-08 with all §8 question recommended-defaults.
STAGE 1 of multi-session implementation: CSS only — render path in
build_site.py is NOT yet wired to use these classes. Wiring lands in
Stage 2. Adding the primitives in advance keeps the design-system.css
diff clean per the ADR-style commit cadence used through prompts 18-22.
Naming convention:
.gg-timeline-v2 — vertical year-spine (replaces .timeline §5.34)
.gg-event-card — per-meet card used by Olympic/World/etc tabs
.gg-event-card__row — one row per event inside a meet card
.gg-phase-pair — qual+final fold-in inside a meet-card row
.gg-phase — single phase row (qual or final)
.gg-phase__label — uppercase Qual/Final chip
.gg-tier-chip — Olympic/World/Continental/NCAA chip on Timeline
── */
/* Tier color tokens — added here vs §1 so the redesign owns its palette
and they're co-located with consumers. If multiple sections need
them later, promote to §1 (root :root). */
.gg-tier-chip,
.gg-timeline-v2__entry {
--gg-tier-color-olympic: var(--gg-color-medal-gold);
--gg-tier-color-world: #c8c8d0;
--gg-tier-color-continental:#cd7f32;
--gg-tier-color-ncaa: var(--gg-color-plum-500, #8a4fbf);
--gg-tier-color-domestic: rgba(255, 255, 255, 0.32);
}
/* ── .gg-timeline-v2 — full-career chronology spine ── */
.gg-timeline-v2 {
display: grid;
grid-template-columns: 64px 1fr;
gap: 0;
margin: 0 0 var(--gg-space-6);
padding: 0;
list-style: none;
}
@media (max-width: 600px) {
.gg-timeline-v2 { grid-template-columns: 48px 1fr; }
}
.gg-timeline-v2__year {
font-family: var(--gg-font-display, var(--gg-font-sans));
font-size: 22px;
font-weight: 800;
color: var(--gg-color-medal-gold);
letter-spacing: -0.02em;
line-height: 1.1;
padding-top: 14px;
padding-right: 8px;
text-align: right;
font-variant-numeric: tabular-nums;
}
/* When the same year has multiple entries, second+ year-cells render
the year in a muted gold so the eye doesn't read "two 2022s" as a
visual glitch. The first instance is solid gold; repeats are muted. */
.gg-timeline-v2__year--repeat {
color: rgba(255, 215, 0, 0.32);
}
.gg-timeline-v2__entry {
background: var(--gg-color-surface-2);
border-left: 4px solid rgba(255, 255, 255, 0.10);
border-radius: 0 8px 8px 0;
padding: 12px 16px;
margin-bottom: 10px;
display: flex;
flex-direction: column;
gap: 6px;
}
.gg-timeline-v2__entry--olympic { border-left-color: var(--gg-tier-color-olympic); }
.gg-timeline-v2__entry--world { border-left-color: var(--gg-tier-color-world); }
.gg-timeline-v2__entry--continental { border-left-color: var(--gg-tier-color-continental); }
.gg-timeline-v2__entry--ncaa { border-left-color: var(--gg-tier-color-ncaa); }
.gg-timeline-v2__entry--domestic { border-left-color: var(--gg-tier-color-domestic); }
.gg-timeline-v2__head {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
font-weight: 700;
font-size: 14px;
color: rgba(255, 255, 255, 0.94);
}
.gg-timeline-v2__date {
font-size: 12px;
color: rgba(255, 255, 255, 0.56);
font-variant-numeric: tabular-nums;
}
.gg-timeline-v2__summary {
font-size: 13px;
color: rgba(255, 255, 255, 0.78);
line-height: 1.5;
}
/* ── .gg-tier-chip — small uppercase chip used on Timeline entries
and on category-tab headings. ── */
.gg-tier-chip {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 10.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 3px 7px;
border-radius: 999px;
border: 1px solid currentColor;
line-height: 1;
}
.gg-tier-chip--olympic { color: var(--gg-tier-color-olympic); }
.gg-tier-chip--world { color: var(--gg-tier-color-world); }
.gg-tier-chip--continental { color: var(--gg-tier-color-continental); }
.gg-tier-chip--ncaa { color: #c198eb; /* plum, brighter for chip readability */ }
.gg-tier-chip--domestic { color: rgba(255, 255, 255, 0.62); }
/* Inline medal pill used inside Timeline summaries ("Team gold"). */
.gg-medal {
display: inline-block;
padding: 1px 6px;
border-radius: 4px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
line-height: 1.4;
}
.gg-medal--gold { background: rgba(255, 215, 0, 0.15); color: var(--gg-color-medal-gold); }
.gg-medal--silver { background: rgba(200, 200, 208, 0.15); color: #d8d8e0; }
.gg-medal--bronze { background: rgba(205, 127, 50, 0.15); color: #e0a070; }
/* ── .gg-event-card — per-meet card for Olympic / World / Continental /
Domestic-Elite tabs. Mirrors the §5.38 NCAA postseason card
visually, with one row per event inside (not row-per-event-per-
apparatus the way the legacy Results table is). ── */
.gg-event-card {
background: var(--gg-color-surface-2);
border: 1px solid var(--gg-color-border);
border-radius: 10px;
padding: 18px 20px;
margin-bottom: 16px;
}
.gg-event-card__title {
font-size: 18px;
font-weight: 700;
color: rgba(255, 255, 255, 0.96);
margin: 0 0 4px;
line-height: 1.25;
}
.gg-event-card__date {
color: rgba(255, 255, 255, 0.56);
font-size: 12.5px;
font-variant-numeric: tabular-nums;
margin-bottom: 14px;
letter-spacing: 0.02em;
}
.gg-event-card__row {
display: grid;
grid-template-columns: minmax(160px, 220px) 1fr auto;
gap: 12px;
padding: 10px 0;
border-top: 1px solid rgba(255, 255, 255, 0.06);
align-items: baseline;
}
.gg-event-card__row:first-of-type { border-top: 0; }
@media (max-width: 600px) {
/* Mobile: 2-column collapse — event name + result on the top row,
phase detail spans full width on row 2. Keeps the result visually
tied to its event without horizontal scroll. */
.gg-event-card__row { grid-template-columns: 1fr auto; gap: 4px 12px; }
.gg-event-card__row > .gg-event-card__detail { grid-column: 1 / -1; font-size: 12px; }
}
.gg-event-card__event {
font-weight: 600;
color: rgba(255, 255, 255, 0.92);
font-size: 13.5px;
}
.gg-event-card__detail {
color: rgba(255, 255, 255, 0.66);
font-size: 12.5px;
font-variant-numeric: tabular-nums;
}
.gg-event-card__result {
font-weight: 700;
color: rgba(255, 255, 255, 0.92);
font-size: 13.5px;
text-align: right;
white-space: nowrap;
}
.gg-event-card__result--gold { color: var(--gg-color-medal-gold); }
.gg-event-card__result--silver { color: #d8d8e0; }
.gg-event-card__result--bronze { color: #e0a070; }
/* Footnote callout inside a meet-card row — used for things like the
CAS Floor reassignment annotation on Chiles' Paris 2024 card.
Distinct visual treatment so it reads as authoritative editorial,
not optional fluff. */
.gg-event-card__note {
grid-column: 1 / -1;
margin-top: 6px;
font-size: 12px;
color: rgba(255, 215, 0, 0.78);
line-height: 1.5;
background: rgba(255, 215, 0, 0.06);
border-left: 2px solid var(--gg-color-medal-gold);
padding: 6px 10px;
border-radius: 0 4px 4px 0;
}
/* ── .gg-phase-pair — one-row-per-event qual+final fold-in inside
a .gg-event-card__row. Per Josh feedback 2026-05-08:
collapsing two phases into one row reads as a single event
story. Each phase gets a small uppercase Qual/Final chip
so the eye groups them as one unit. ── */
.gg-phase-pair {
display: flex;
flex-direction: column;
gap: 3px;
}
.gg-phase {
display: flex;
align-items: baseline;
gap: 8px;
font-size: 12.5px;
color: rgba(255, 255, 255, 0.74);
font-variant-numeric: tabular-nums;
line-height: 1.45;
}
.gg-phase__label {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 36px;
padding: 1px 6px;
border-radius: 3px;
background: rgba(255, 255, 255, 0.07);
color: rgba(255, 255, 255, 0.84);
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
flex-shrink: 0;
}
/* Optional sub-line for team-event apparatus contributions
(e.g., "VT 14.566 · UB 14.866 · BB 14.000 · FX 13.766" under the
Team Final row). Always a sub-line on the same row, never a
sibling row. */
.gg-phase-pair__sub {
display: block;
margin-top: 6px;
font-size: 11.5px;
color: rgba(255, 255, 255, 0.52);
letter-spacing: 0.02em;
}
/* Tab-strip count badges on the new derived breakout tabs.
Currently the .gg-subnav rules in §5.34 render the tab strip; this
adds the numeric "(2)" / "(4 seasons)" badge styling without
touching the existing nav layout. Stage 3 wires it in. */
.gg-subnav .gg-subnav__count {
color: rgba(255, 255, 255, 0.45);
font-weight: 500;
margin-left: 4px;
font-variant-numeric: tabular-nums;
}
.gg-subnav a.is-current .gg-subnav__count {
color: rgba(255, 215, 0, 0.7);
}
/* WD-2026-05-09 Competitions Stage A — small additions: discipline tag
on legacy .gg-meet-card cards + section-heading pattern for the new
NCAA postseason section below the era bands. */
.gg-meet-card__disc {
display: inline;
color: rgba(255, 215, 0, 0.7);
font-weight: 600;
letter-spacing: 0.02em;
}
.gg-section-heading {
margin-top: var(--gg-space-7);
margin-bottom: var(--gg-space-2);
color: var(--gg-color-medal-gold);
font-size: 22px;
letter-spacing: -0.01em;
}
.gg-section-heading__count {
color: rgba(255, 215, 0, 0.55);
font-weight: 500;
font-size: 0.6em;
letter-spacing: 0.02em;
text-transform: none;
margin-left: 6px;
white-space: nowrap;
}
.gg-section-heading__lede {
color: var(--gg-color-text-muted);
font-size: 14px;
line-height: 1.6;
margin-bottom: var(--gg-space-5);
max-width: 60ch;
}
/* ── .gg-meet-section — wrapper around the per-tier meet-card lists
(Olympic / World / Continental / Domestic-Elite). The h2 carries a
muted count subhead ("— 2 appearances"). Stage 3 step 1-3. ── */
.gg-meet-section {
margin-top: var(--gg-space-6);
margin-bottom: var(--gg-space-6);
}
.gg-meet-section h2 {
/* Match the heading rhythm of other sections (.gg-skills, .gg-ncaa,
.gg-otd-anchor) — gold uppercase via the page's default h2 styling
in the athlete-profile context. */
}
.gg-meet-section__count {
color: rgba(255, 215, 0, 0.6);
font-weight: 500;
font-size: 0.55em; /* relative to h2 font-size, reads as a subhead */
letter-spacing: 0.02em;
text-transform: none; /* override h2 uppercase if present */
margin-left: 8px;
white-space: nowrap;
}
/* ─────────────────────────────────────────────────────────────────────────
End of design-system.css v1.4 (was v1.3 → v1.4 prompt22 athletes search + filter chips).
v1.3 (2026-05-04) churn:
PROMOTED from wireframe page-local CSS:
.gg-pub-link + .is-current + [aria-current="page"] + --ask (~50 LOC, in §4 Header)
Publication-style .gg-header solid plum-900 + 2-stop wordmark gradient (D10/D11)
REMOVED:
.gg-nav-chip + --current + --accent (D14)
.gg-watermark + --dense + media (D16)
.gg-footer--three-col + .gg-footer__* (D15)
RETAINED from v1.2: F/M tag tokens + classes; rem-based type scale;
11px micro reservation policy; .gg-header__hamburger + sheet (D13).
UPDATED: narrow-mobile media query references .gg-pub-link (was .gg-nav-chip).
Token count: 50 (unchanged from v1.2).
Component count: ~30 (was 33 in v1.2 — 3 dropped; .gg-pub-link
replaces .gg-nav-chip, net −2 components).
───────────────────────────────────────────────────────────────────────── */