/* Team-Pages Design Tokens * ------------------------------------------------------------------------- * Shared-across-all-teams foundation. Per-team accent colors are injected * via inline custom-properties on the element at render time. * * 538/Pudding design system (docs/design-system/90-538-pudding-design-system.md): * - Light-only, Fraunces (serif headlines) + Archivo (sans UI/data) — no other faces * - OKLCH percentile + belief ramps * - 44px touch targets, mobile-first spacing rhythm */ :root { /* ----- Color system (538/Pudding light — Phase 3 2026-06-16) ------ */ --bg-0: #ffffff; --bg-1: #ffffff; --bg-2: #f0f0f0; /* 538 chart-panel fill */ --bg-card: #ffffff; --bg-card-raised: #f0f0f0; --bg-overlay: rgba(34, 34, 34, 0.55); /* modal scrim (ink, semi) */ --fg-primary: #222222; --fg-secondary: #5b5b5b; --fg-muted: #8b8b8b; --fg-subtle: #a8a8a4; --fg-on-accent: #222222; /* ink on accent (doc-90 Appendix C) */ --stroke-default: #e4e4e1; --stroke-subtle: rgba(34, 34, 34, 0.05); --stroke-strong: #d7d7d4; /* ----- Accent (overridden per-team via inline style) ------ */ --accent-primary: #c5b358; --accent-secondary: #084c24; --accent-gradient: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); --accent-on: #0b0d12; /* ----- Percentile / belief ramps ------ */ --pct-low: #c04a4a; --pct-mid-low: #d9845e; --pct-mid: #8a90a1; --pct-mid-high: #5a9dd1; --pct-high: #3570b5; --belief-doom: #c04a4a; --belief-mixed: #8a90a1; --belief-bullish: #3ea073; --accolade-gold: #c5b358; /* ----- Emotional-key accents (seasonal sentience) ------ */ --tone-red: #c04a4a; --tone-amber: #d9a55e; --tone-navy: #3570b5; --tone-gray: #8a90a1; --tone-coral: #d95e7c; --tone-green: #3ea073; /* ----- Typography ------ */ /* --font-display (Archivo) drives hero numbers + metric tiles + labels, * which must stay sans/tabular, never serif. Editorial serif * headlines/prose use --font-serif (Fraunces). */ --font-display: 'Archivo', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-body: 'Archivo', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* --font-sans was never one of this system's real names (--font-body/--font-display * are) -- 67 var(--font-sans, 'Inter', ...) call sites across 26 team_pages modules * were silently rendering in Inter (a retired font) instead of Archivo because of it, * confirmed live 2026-07-26. Defined as an alias of --font-body's exact value rather * than rewriting 26 files, since that's what every one of those call sites actually * meant by "sans". */ --font-sans: 'Archivo', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-serif: 'Fraunces', Georgia, serif; --font-mono: "JetBrains Mono", "SF Mono", "Menlo", monospace; --fs-label: clamp(10px, 0.72vw + 8px, 12px); --fs-metric-sm: clamp(14px, 1vw + 10px, 16px); --fs-body: clamp(14px, 0.8vw + 10px, 16px); --fs-body-lg: clamp(15px, 0.9vw + 11px, 18px); --fs-headline-sm: clamp(18px, 1.2vw + 12px, 22px); --fs-headline: clamp(22px, 1.8vw + 14px, 30px); --fs-hero: clamp(32px, 3.5vw + 16px, 56px); --fs-serif-body: clamp(16px, 0.8vw + 12px, 19px); --fs-metric: clamp(24px, 2vw + 12px, 36px); --lh-tight: 1.12; --lh-snug: 1.28; --lh-normal: 1.48; --lh-relaxed: 1.65; --ls-tight: -0.02em; --ls-normal: 0em; --ls-wide: 0.04em; --ls-label: 0.08em; /* ----- Spacing rhythm ------ */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; --sp-9: 56px; --sp-10: 80px; /* ----- Radii (538 sharp; pill kept for circular avatars only) ------ */ --radius-sm: 2px; --radius-md: 3px; --radius-lg: 3px; --radius-xl: 3px; --radius-pill: 999px; /* ----- Elevation (538 flat — hierarchy from hairlines, not shadows) ------ */ --elev-card: none; --elev-raised: 0 2px 8px rgba(0,0,0,0.12); /* the single allowed overlay shadow */ /* ----- Motion ------ */ --motion-reveal: 240ms cubic-bezier(.2,.7,.25,1); --motion-state: 180ms cubic-bezier(.2,.7,.25,1); --motion-data: 420ms cubic-bezier(.2,.7,.25,1); --motion-delight: 800ms cubic-bezier(.2,.7,.25,1); /* ----- Touch targets ------ */ --touch-min: 44px; --touch-medium: 48px; --touch-large: 60px; /* ----- Layout ------ */ --content-max-w: 1100px; --content-side-pad: clamp(16px, 4vw, 32px); } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { :root { --motion-reveal: 0ms; --motion-state: 0ms; --motion-data: 0ms; --motion-delight: 0ms; } } /* ============================================================================ WORLD-CLASS RANKINGS PAGE STYLES ============================================================================ */ /* ----- Tiered Row Styling ------ */ .rankings-row--elite { background: linear-gradient(90deg, var(--tone-navy) 0%, transparent 30%); font-weight: 600; } .rankings-row--elite .rank-cell { font-size: 1.2em; color: var(--tone-navy); font-weight: 700; } .rankings-row--power { background: transparent; } .rankings-row--all { opacity: 0.8; font-size: 0.95em; } /* ----- Rank Change Magnitude ------ */ .rank-delta--large { font-weight: 700; font-size: 1.1em; padding: 2px 6px; border-radius: 4px; } .rank-delta--large.rank-delta--up { background: var(--belief-bullish); color: var(--bg-0); } .rank-delta--large.rank-delta--down { background: var(--tone-red); color: var(--bg-0); } .rank-delta--medium { font-weight: 600; } /* ----- Movement Dashboard ------ */ .movement-dashboard { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); margin: var(--sp-8) 0; } .movement-panel { background: var(--bg-1); border: 1px solid var(--stroke-default); border-radius: var(--radius-lg); padding: var(--sp-4); } .movement-panel__title { font-family: var(--font-display); font-size: var(--fs-label); text-transform: none; letter-spacing: 0.1em; margin-bottom: var(--sp-3); color: var(--fg-secondary); } .movement-card { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) 0; border-bottom: 1px solid var(--stroke-subtle); } .movement-card:last-child { border-bottom: none; } .movement-card__rank { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-metric-sm); color: var(--tone-navy); min-width: 40px; } .movement-card__team { flex: 1; display: flex; flex-direction: column; } .movement-card__team .team-link { font-weight: 600; color: var(--fg-primary); } .movement-card__team .submetric { font-size: var(--fs-label); color: var(--fg-muted); } .movement-card__change { min-width: 60px; text-align: right; } /* ----- Tier Toggles ------ */ .rankings-tier-toggles { display: flex; gap: var(--sp-2); margin: var(--sp-6) 0; justify-content: center; } .tier-toggle { padding: var(--sp-2) var(--sp-4); background: var(--bg-1); border: 1px solid var(--stroke-default); border-radius: var(--radius-md); font-family: var(--font-display); font-size: var(--fs-label); font-weight: 600; color: var(--fg-secondary); cursor: pointer; transition: all var(--motion-state); text-transform: none; letter-spacing: 0.05em; } .tier-toggle:hover { background: var(--bg-2); border-color: var(--stroke-strong); color: var(--fg-primary); } .tier-toggle--active { background: var(--tone-navy); color: var(--fg-on-accent); border-color: var(--tone-navy); } /* ----- Quick Filter Chips ------ */ .rankings-quick-filters { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-6) 0; padding: var(--sp-4); background: var(--bg-1); border-radius: var(--radius-lg); justify-content: center; } .filter-chip { padding: var(--sp-2) var(--sp-3); background: var(--bg-2); border: 1px solid var(--stroke-default); border-radius: var(--radius-md); font-family: var(--font-display); font-size: var(--fs-label); font-weight: 600; color: var(--fg-secondary); cursor: pointer; transition: all var(--motion-state); text-transform: none; letter-spacing: 0.05em; } .filter-chip:hover { background: var(--bg-0); border-color: var(--tone-navy); color: var(--fg-primary); } .filter-chip--active { background: var(--tone-navy); border-color: var(--tone-navy); color: var(--fg-on-accent); } /* ----- Sparkline Styling ------ */ .rank-sparkline { display: block; margin-top: 4px; opacity: 0.8; } .rank-change-wrapper { display: flex; flex-direction: column; align-items: flex-start; } /* ----- Accessibility ------ */ .skip-link { position: absolute; top: -40px; left: 0; background: var(--tone-navy); color: var(--fg-on-accent); padding: var(--sp-2) var(--sp-3); text-decoration: none; border-radius: var(--radius-md); z-index: 9999; } .skip-link:focus { top: 0; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } /* ----- Responsive Design ------ */ @media (max-width: 640px) { .rankings-tier-toggles { flex-wrap: wrap; } .tier-toggle { flex: 1 1 calc(50% - var(--sp-2)); text-align: center; min-width: 100px; } .movement-dashboard { grid-template-columns: 1fr; } .rankings-quick-filters { gap: var(--sp-1); } .filter-chip { font-size: 10px; padding: var(--sp-1) var(--sp-2); flex: 1 1 calc(33% - var(--sp-1)); text-align: center; } .rank-sparkline { width: 60px; height: 18px; } /* Transform table rows into cards on mobile */ #rankingsTableBody tr { display: block; margin-bottom: var(--sp-4); background: var(--bg-1); border: 1px solid var(--stroke-default); border-radius: var(--radius-md); padding: var(--sp-3); } #rankingsTableBody thead { display: none; } #rankingsTableBody td { display: block; padding: var(--sp-1) 0; border: none; } #rankingsTableBody td::before { content: attr(data-label); font-weight: 600; margin-right: var(--sp-2); color: var(--fg-muted); } .movement-card { flex-direction: column; align-items: flex-start; } .movement-card__rank { font-size: var(--fs-body); } } /* ------------------------------------------------------------------------- * Light-mode override for profiled team pages (Sprint v5-11.5 Surface 2) * * When the theme toggle sets data-theme="light" on , override the * dark-default tokens above with their light-mode equivalents. The * accent ramps (--accent-primary, --pct-*, --tone-*, --belief-*) stay * team/data-driven because they read fine on both backgrounds. * * Specificity: :root[data-theme="light"] (0,1,1) beats :root (0,0,1) * defined above. No :where() neutralizer needed here because the * defaults aren't behind an @media block. * ------------------------------------------------------------------------- */ /* Base :root is now 538 light. This explicit-toggle block matches it so the * legacy theme toggle stays consistent until it is retired in Phase 8. */ :root[data-theme="light"] { --bg-0: #ffffff; --bg-1: #ffffff; --bg-2: #f0f0f0; --bg-card: #ffffff; --bg-card-raised: #f0f0f0; --bg-overlay: rgba(34, 34, 34, 0.55); --fg-primary: #222222; --fg-secondary: #5b5b5b; --fg-muted: #8b8b8b; --fg-subtle: #a8a8a4; --fg-on-accent: #222222; --stroke-default: #e4e4e1; --stroke-subtle: rgba(34, 34, 34, 0.05); --stroke-strong: #d7d7d4; } @view-transition{navigation:auto} ::view-transition-old(root){animation:.2s ease-in both pk-fade-out} ::view-transition-new(root){animation:.2s ease-in both pk-fade-in} @keyframes pk-fade-out{from{opacity:1}to{opacity:0}} @keyframes pk-fade-in {from{opacity:0}to{opacity:1}} @keyframes slideIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}} @keyframes riseIn {from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;}} .ttag{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700; padding:1px 6px;border-radius:2px;vertical-align:middle;line-height:1.6; font-family:"Archivo",system-ui,sans-serif} .ttag.fact{color:#0a5a86;background:#e7f3fb} .ttag.read{color:#7a5a00;background:#faf3e0} .ttag .td{width:6px;height:6px;border-radius:50%;display:inline-block} .ttag.fact .td{background:var(--blue,#008fd5)} .ttag.read .td{background:var(--gold,#e5ae38)} .xp{border:1px solid var(--rule,#d7d7d4);border-radius:2px} .xp-btn{width:100%;text-align:left;display:flex;align-items:center;justify-content:space-between; gap:10px;background:none;border:none;padding:10px 14px; font-family:"Archivo",system-ui,sans-serif;font-size:13.5px;font-weight:600; color:var(--ink,#222);cursor:pointer;transition:background .12s ease} .xp-btn:hover{background:var(--row,#f7f7f6)} .xp-chev{font-size:15px;flex:0 0 auto;transition:transform .22s cubic-bezier(.34,1.56,.64,1); display:inline-block} .xp.open .xp-chev{transform:rotate(180deg)} .xp-body{display:grid;grid-template-rows:0fr;overflow:hidden; transition:grid-template-rows .24s ease} .xp.open .xp-body{grid-template-rows:1fr} .xp-inner{min-height:0;padding:0 14px} .xp.open .xp-inner{padding:10px 14px 14px} .hfoot{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:11.5px;line-height:1.5; color:var(--ink-3,#8b8b8b);font-family:"Archivo",system-ui,sans-serif; font-variant-numeric:tabular-nums;border-top:1px solid var(--line,#e4e4e1); padding-top:6px;margin-top:8px} .hfoot b{color:var(--ink-2,#5b5b5b);font-weight:600} /* Team-Pages Component Styles * ------------------------------------------------------------------------- * Reads from tokens.css. No raw color or size values here — everything * through custom properties so per-team theming works by swapping tokens. */ /* Quote-as-headline rule (BUILD_PLAN.md Chunk D5 / Fable Pass-2 primitive): * generated summary text may never render at larger type than the verbatim * receipt it summarizes -- a template rule against flatness on any surface * that pairs an AI/computed take with the real quote or stat it's based on. * .tp-generated-take is the take; .tp-verbatim-receipt is the receipt it * points at. Apply both classes together; the receipt's size floor tracks * the take's cap so this holds regardless of which one a future edit resizes. */ .tp-generated-take { font-size: var(--fs-headline-sm); } .tp-verbatim-receipt { font-size: max(var(--fs-body), var(--fs-headline-sm)); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; /* overflow-x: clip (not hidden) + explicit overflow-y: visible — plain overflow-x: hidden on an ancestor breaks position:sticky on every descendant (incl. .team-tabs below), because browsers force the other axis to a scroll-container value unless clip is used with visible explicitly paired. Found 2026-07-03: the tab spine's sticky rule was correctly declared but silently defeated by this. */ overflow-x: clip; overflow-y: visible; background: var(--bg-0); color: var(--fg-primary); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-normal); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: inherit; text-decoration: none; } .team-page { min-height: 100vh; overflow-x: clip; overflow-y: visible; background: var(--bg-0); } .content { max-width: var(--content-max-w); margin: 0 auto; padding: var(--sp-6) var(--content-side-pad) var(--sp-10); } /* ------------------------------------------------------------------ */ /* Hero */ /* ------------------------------------------------------------------ */ .hero { display: grid; gap: var(--sp-6); padding: var(--sp-8) 0 var(--sp-7); border-bottom: 1px solid var(--stroke-default); } .hero__identity-bar { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; row-gap: var(--sp-3); } .hero__logo { width: 80px; height: 80px; object-fit: contain; flex-shrink: 0; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3)); } @media (max-width: 640px) { .hero__logo { width: 56px; height: 56px; } } .hero__wordmark { font-family: var(--font-display); font-size: var(--fs-hero); font-weight: 800; letter-spacing: var(--ls-tight); line-height: var(--lh-tight); background: var(--accent-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; margin: 0; } /* Identity phrase — one-line voice anchor below the wordmark. * Hand-authored profiles surface their bespoke identity_phrase here; * synthesized profiles surface a conference-register template phrase. */ .hero__identity-phrase { font-family: var(--font-serif, 'Fraunces', Georgia, serif); font-size: clamp(15px, 0.5vw + 14px, 19px); font-style: italic; line-height: 1.4; color: var(--fg-secondary); margin: clamp(6px, 1vw, 12px) 0 0 0; max-width: 70ch; } .hero__record { /* Sprint B 2026-05-22: was --font-mono. The record (10-2) is the loudest * single stat on the page and the brief calls for "big display-font * number" treatment. Promoted to --font-display (Bebas Neue) at the * --fs-headline scale so it lands as the visual anchor below the * wordmark, not as quiet pill text next to it. */ font-family: var(--font-display); font-size: var(--fs-headline); color: var(--accent-primary); padding: var(--sp-1) var(--sp-3); border: 1px solid var(--accent-primary); border-radius: 3px; background: var(--bg-card); letter-spacing: var(--ls-normal); line-height: 1; } .hero__record-qualifier { font-family: var(--font-body); font-size: var(--fs-micro, 11px); text-transform: none; letter-spacing: 0.08em; color: var(--fg-2, #6a6a6a); align-self: center; } .hero__rank-chip { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-label); text-transform: none; letter-spacing: var(--ls-label); padding: var(--sp-1) var(--sp-3); border-radius: 3px; color: var(--fg-primary); border: 1px solid var(--stroke-strong); background: var(--bg-card-raised); } .hero__rank-chip--cfp { color: var(--accolade-gold); border-color: var(--accolade-gold); } .hero__rank-chip--d3 { color: var(--accent-primary, #5a9fd4); border-color: var(--accent-primary, #5a9fd4); } .hero__eyebrow { font-family: var(--font-display); text-transform: none; letter-spacing: var(--ls-label); font-size: var(--fs-label); color: var(--fg-muted); } .hero__heritage { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); padding: var(--sp-3) 0; color: var(--fg-secondary); font-size: var(--fs-label); text-transform: none; letter-spacing: var(--ls-label); border-top: 1px solid var(--stroke-subtle); border-bottom: 1px solid var(--stroke-subtle); } .hero__heritage span { white-space: nowrap; } .hero__heritage strong { color: var(--fg-primary); font-weight: 600; font-family: var(--font-mono); letter-spacing: var(--ls-normal); } .hero__state { font-family: var(--font-serif); font-size: var(--fs-serif-body); line-height: var(--lh-relaxed); color: var(--fg-primary); max-width: 62ch; margin: 0; } .hero__state strong { color: var(--fg-primary); font-weight: 600; } .hero__metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); } @media (min-width: 760px) { .hero__metrics { grid-template-columns: repeat(4, 1fr); } } .metric-tile { background: var(--bg-card); border: 1px solid var(--stroke-default); border-radius: var(--radius-lg); padding: var(--sp-4) var(--sp-4); display: grid; gap: var(--sp-2); min-height: var(--touch-large); } .metric-tile__label { font-family: var(--font-display); text-transform: none; letter-spacing: var(--ls-label); font-size: var(--fs-label); color: var(--fg-muted); } .metric-tile__value { font-family: var(--font-display); font-size: var(--fs-metric); font-weight: 700; letter-spacing: var(--ls-tight); line-height: var(--lh-tight); color: var(--fg-primary); } .metric-tile__value--accent { color: var(--accent-primary); } .metric-tile__delta { font-family: var(--font-mono); font-size: var(--fs-label); color: var(--fg-secondary); } .metric-tile__delta--up { color: var(--tone-green); } .metric-tile__delta--down { color: var(--tone-red); } /* ------------------------------------------------------------------ */ /* Pulse module */ /* ------------------------------------------------------------------ */ .pulse { margin-top: var(--sp-8); background: var(--bg-card); border: 1px solid var(--stroke-default); border-radius: var(--radius-xl); padding: var(--sp-6); display: grid; gap: var(--sp-5); box-shadow: var(--elev-card); } .pulse__header { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; } .pulse__title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-headline-sm); letter-spacing: var(--ls-tight); color: var(--fg-primary); margin: 0; } .pulse__live-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--tone-green); box-shadow: 0 0 0 4px color-mix(in oklab, var(--tone-green) 20%, transparent); animation: pulse-dot 2s infinite; } .pulse__live-dot--quiet { background: var(--fg-muted); box-shadow: none; animation: none; } @keyframes pulse-dot { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--tone-green) 35%, transparent); } 70% { box-shadow: 0 0 0 8px color-mix(in oklab, var(--tone-green) 0%, transparent); } 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--tone-green) 0%, transparent); } } .pulse__meta { font-family: var(--font-mono); font-size: var(--fs-label); color: var(--fg-muted); letter-spacing: var(--ls-wide); } .pulse__grid { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; } @media (min-width: 760px) { .pulse__grid { grid-template-columns: 1.2fr 1fr; } } .pulse__mood-card { display: grid; gap: var(--sp-3); } .pulse__mood-number { font-family: var(--font-display); font-size: clamp(44px, 5vw + 16px, 84px); font-weight: 800; letter-spacing: var(--ls-tight); line-height: 1; color: var(--accent-primary); } .pulse__mood-delta { font-family: var(--font-mono); font-size: var(--fs-body); color: var(--fg-secondary); } .pulse__trajectory { display: flex; align-items: flex-end; gap: 3px; height: 48px; padding: var(--sp-2) 0; } .pulse__trajectory-bar { flex: 1; min-width: 6px; background: color-mix(in oklab, var(--accent-primary) 28%, var(--bg-1) 72%); border-radius: 2px 2px 0 0; } .pulse__trajectory-bar--current { background: var(--accent-primary); } .pulse__event-log { display: grid; gap: var(--sp-3); padding: var(--sp-4); background: var(--bg-card-raised); border-radius: var(--radius-md); border: 1px solid var(--stroke-default); } .pulse__event-log-title { font-family: var(--font-display); text-transform: none; letter-spacing: var(--ls-label); font-size: var(--fs-label); color: var(--fg-muted); margin: 0; } .pulse__event { display: grid; grid-template-columns: 58px 1fr auto; gap: var(--sp-3); align-items: baseline; padding-bottom: var(--sp-3); border-bottom: 1px solid var(--stroke-subtle); } .pulse__event:last-child { border-bottom: 0; padding-bottom: 0; } .pulse__event-time { font-family: var(--font-mono); font-size: var(--fs-label); color: var(--fg-muted); letter-spacing: var(--ls-wide); } .pulse__event-text { font-size: var(--fs-body); color: var(--fg-primary); line-height: var(--lh-snug); } .pulse__event-delta { font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 600; } .pulse__event-delta--up { color: var(--tone-green); } .pulse__event-delta--down { color: var(--tone-red); } .pulse__top-take { padding: var(--sp-4); background: var(--bg-card-raised); border-radius: var(--radius-md); border: 1px solid var(--stroke-default); font-family: var(--font-serif); font-size: var(--fs-body); line-height: var(--lh-relaxed); color: var(--fg-secondary); } .pulse__top-take-attr { display: block; margin-top: var(--sp-2); font-family: var(--font-display); font-size: var(--fs-label); color: var(--fg-muted); text-transform: none; letter-spacing: var(--ls-label); font-style: normal; } /* ============================================================================ * Five-axis Pulse strip — Brief §4.2 Panel 2 (Sprint D) * Reality Gap / Respect Gap / Cohort Divergence / Rival Heat / Volatility * ========================================================================= */ .pulse-five-axis { display: grid; gap: var(--sp-3); padding: var(--sp-4); margin-top: var(--sp-4); background: rgba(255, 255, 255, 0.02); border: 1px solid var(--stroke-default); border-radius: var(--radius-md); } .pulse-five-axis__eyebrow { font-family: var(--font-display); font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--ls-label); text-transform: none; color: var(--fg-muted); margin: 0; } .pulse-axis { display: grid; grid-template-columns: minmax(0, 120px) 1fr auto; align-items: center; gap: var(--sp-3); padding: var(--sp-2) 0; border-top: 1px solid var(--stroke-subtle); } .pulse-axis:first-of-type { border-top: 0; } .pulse-axis__label { font-family: var(--font-sans); font-size: var(--fs-body); font-weight: 600; color: var(--fg-primary); } .pulse-axis__bar { position: relative; height: 10px; background: rgba(255, 255, 255, 0.05); border-radius: 5px; overflow: hidden; } .pulse-axis__fill { position: absolute; inset: 0; width: var(--pct, 0%); background: var(--pct-mid); border-radius: 5px; transition: width 240ms ease-out; } .pulse-axis[data-band="high"] .pulse-axis__fill { background: var(--pct-high); } .pulse-axis[data-band="mid"] .pulse-axis__fill { background: var(--pct-mid); } .pulse-axis[data-band="low"] .pulse-axis__fill { background: var(--pct-low); } .pulse-axis__chip { font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 600; color: var(--fg-secondary); white-space: nowrap; font-variant-numeric: tabular-nums; } .pulse-axis__desc { grid-column: 1 / -1; font-family: var(--font-serif); font-size: var(--fs-label); color: var(--fg-muted); line-height: 1.4; font-style: italic; } .pulse-axis--awaiting .pulse-axis__label, .pulse-axis--awaiting .pulse-axis__desc { color: var(--fg-muted); } .pulse-axis--awaiting .pulse-axis__fill { opacity: 0.45; } .pulse-axis--awaiting .pulse-axis__chip { font-style: italic; } @media (max-width: 720px) { .pulse-axis { grid-template-columns: minmax(0, 1fr) auto; } .pulse-axis__bar { grid-column: 1 / -1; } } .pulse__velocity { display: flex; align-items: baseline; gap: var(--sp-3); } .pulse__velocity-number { font-family: var(--font-display); font-size: var(--fs-headline-sm); font-weight: 700; color: var(--fg-primary); } .pulse__velocity-context { font-family: var(--font-mono); font-size: var(--fs-label); color: var(--fg-muted); } .pulse__badge-row { display: flex; justify-content: flex-end; margin-top: var(--sp-3); } .pulse__badge { font-family: var(--font-mono); font-size: 9px; letter-spacing: var(--ls-label); text-transform: none; color: var(--fg-subtle); padding: 2px 6px; border-radius: 3px; border: 1px solid var(--stroke-default); background: var(--bg-card-raised); } .pulse__badge--awaiting { color: var(--fg-muted); } .pulse__badge--growing { color: var(--fg-secondary); } /* ------------------------------------------------------------------ */ /* Chronicle cards (compact render) */ /* ------------------------------------------------------------------ */ .chronicle { margin-top: var(--sp-8); display: grid; gap: var(--sp-5); } .chronicle__header { display: flex; align-items: baseline; gap: var(--sp-3); border-bottom: 1px solid var(--stroke-default); padding-bottom: var(--sp-3); } .chronicle__title { font-family: var(--font-display); font-size: var(--fs-headline-sm); font-weight: 700; margin: 0; } .chronicle__grid { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; } @media (min-width: 760px) { .chronicle__grid { grid-template-columns: repeat(2, 1fr); } } .chronicle-card { background: var(--bg-card); border: 1px solid var(--stroke-default); border-left: 4px solid var(--accent-primary); border-radius: var(--radius-md); padding: var(--sp-5); display: grid; gap: var(--sp-3); } .chronicle-card--anomaly { border-left-color: var(--tone-amber); } .chronicle-card--moment { border-left-color: var(--tone-coral); } .chronicle-card--flashpoint { border-left-color: var(--tone-navy); } .chronicle-card--echo { border-left-color: var(--tone-gray); } .chronicle-card--retroactive { border-left-color: #a07ccf; } .chronicle-card--player_arc { border-left-color: #5ec9c4; } .chronicle-card__type { font-family: var(--font-display); text-transform: none; letter-spacing: var(--ls-label); font-size: var(--fs-label); color: var(--fg-muted); } .chronicle-card__headline { font-family: var(--font-display); font-size: var(--fs-body-lg); font-weight: 700; color: var(--fg-primary); margin: 0; line-height: var(--lh-snug); } .chronicle-card__body { font-family: var(--font-serif); font-size: var(--fs-body); line-height: var(--lh-relaxed); color: var(--fg-secondary); margin: 0; } .chronicle-card__source { font-family: var(--font-mono); font-size: var(--fs-label); color: var(--fg-subtle); letter-spacing: var(--ls-wide); } /* ------------------------------------------------------------------ */ /* Page footer + subnav */ /* ------------------------------------------------------------------ */ .page-footer { margin-top: var(--sp-10); padding: var(--sp-6) 0; border-top: 1px solid var(--stroke-default); color: var(--fg-muted); font-size: var(--fs-label); text-transform: none; letter-spacing: var(--ls-label); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-3); } .page-footer__mantra { font-family: var(--font-serif); font-style: italic; color: var(--fg-secondary); text-transform: none; letter-spacing: var(--ls-normal); font-size: var(--fs-body); } .page-footer__link { color: var(--accent-primary, #c9a24a); text-decoration: none; font-weight: 700; letter-spacing: 0.10em; transition: opacity 0.18s ease; } .page-footer__link:hover { opacity: 0.75; text-decoration: underline; } /* ------------------------------------------------------------------ */ /* Responsive tweaks */ /* ------------------------------------------------------------------ */ @media (max-width: 480px) { .hero { padding: var(--sp-6) 0; } .hero__wordmark { letter-spacing: var(--ls-tight); } .pulse { padding: var(--sp-5); } .pulse__mood-number { font-size: clamp(40px, 12vw, 64px); } .chronicle-card { padding: var(--sp-4); } } /* ------------------------------------------------------------------ */ /* Entrance animations (keyframes from motion_css, inlined above) */ /* ------------------------------------------------------------------ */ .hero__eyebrow { animation: slideIn .22s ease-out both; } .hero__identity-bar { animation: slideIn .26s .07s ease-out both; } .hero__identity-phrase { animation: riseIn .22s .16s ease-out both; } .hero__heritage { animation: riseIn .2s .24s ease-out both; } .chronicle-card { transition: transform .18s cubic-bezier(.34, 1.56, .64, 1); } .chronicle-card:hover { transform: translateY(-2px); } /* Savant Card — 13-metric percentile grid with peer-set toggle. Tokens live in tokens.css; this file composes cards from those tokens. */ .savant-card { background: var(--surface-card, #fff); border: 1px solid var(--line-subtle, #e6e6e6); border-top: 3px solid var(--accent-primary, #0C2340); border-radius: var(--radius-md, 8px); padding: var(--sp-4, 16px) var(--sp-5, 20px); margin-top: var(--sp-5, 24px); font-family: var(--font-sans, system-ui, sans-serif); color: var(--text-primary, #111); } .savant-card__header { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3, 12px); flex-wrap: wrap; margin-bottom: var(--sp-3, 12px); } .savant-card__eyebrow { font-family: var(--font-sans, system-ui); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: none; color: var(--text-muted, #666); font-weight: 600; } .savant-card__toggle { display: inline-flex; gap: 2px; background: var(--surface-muted, #f2f2f2); border-radius: 3px; padding: 3px; } .savant-card__chip { background: transparent; border: none; padding: 5px 11px; border-radius: 3px; font-size: 0.72rem; letter-spacing: 0.04em; text-transform: none; font-weight: 600; color: var(--text-muted, #555); cursor: pointer; transition: background 120ms ease, color 120ms ease; } .savant-card__chip:hover { color: var(--text-primary, #111); } .savant-card__chip--active { background: var(--accent-primary, #0C2340); color: #fff; } .savant-card__narrative { font-family: var(--font-serif, Georgia, serif); font-size: 1.08rem; line-height: 1.55; color: var(--text-primary, #111); margin: 0 0 var(--sp-4, 16px) 0; padding: var(--sp-3, 12px) var(--sp-4, 16px); background: linear-gradient(90deg, rgba(0,0,0,0.02), transparent); border-left: 3px solid var(--accent-primary, #0C2340); } .savant-card__narrative--fallback { color: var(--text-muted, #555); font-style: italic; } .savant-card__section { padding: var(--sp-3, 12px) 0; border-top: 1px solid var(--line-subtle, #e6e6e6); } .savant-card__section:first-of-type { border-top: none; } .savant-card__section-eyebrow { font-size: 0.68rem; letter-spacing: 0.09em; text-transform: none; color: var(--text-muted, #666); font-weight: 600; margin: 0 0 var(--sp-3, 12px) 0; } /* Bar layout: label | track | value */ .savant-bar { display: grid; grid-template-columns: 160px 1fr 56px; align-items: center; gap: var(--sp-3, 12px); padding: 6px 0; transition: background 120ms ease; } .savant-bar:hover { background: rgba(0,0,0,0.02); } .savant-bar__label { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .savant-bar__label-text { font-size: 0.86rem; color: var(--text-primary, #111); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .savant-bar__raw { font-size: 0.68rem; color: var(--text-muted, #888); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; } .savant-bar__track { position: relative; background: var(--surface-muted, #f2f2f2); height: 10px; border-radius: 3px; overflow: hidden; } .savant-bar__fill { height: 100%; width: 0; border-radius: 3px; transition: width 260ms cubic-bezier(.2,.8,.3,1), background 260ms ease; background: var(--band-color, #9aa0a6); } .savant-bar__midline { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: rgba(0,0,0,0.08); } .savant-bar__value { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text-primary, #111); text-align: right; font-size: 0.98rem; } .savant-bar__pct-sup { font-size: 0.6em; vertical-align: super; color: var(--text-muted, #888); font-weight: 500; margin-left: 1px; } /* Band colors — encoded via data-band so the peer toggle can swap them without rewriting inline styles. */ .savant-bar[data-band="elite"] .savant-bar__fill { background: #22c55e; } .savant-bar[data-band="strong"] .savant-bar__fill { background: #65a30d; } .savant-bar[data-band="average"] .savant-bar__fill { background: #a3a3a3; } .savant-bar[data-band="concern"] .savant-bar__fill { background: #f59e0b; } .savant-bar[data-band="bottom"] .savant-bar__fill { background: #dc2626; } .savant-bar[data-band="missing"] .savant-bar__fill { background: transparent; } .savant-bar[data-band="missing"] .savant-bar__value .savant-bar__pct { color: var(--text-muted, #999); } .savant-card__echo { margin-top: var(--sp-3, 12px); padding: var(--sp-3, 12px) var(--sp-4, 14px); background: var(--surface-muted, #f2f2f2); border-left: 2px solid #6b7280; border-radius: 4px; } .savant-card__echo-eyebrow { display: block; font-size: 0.65rem; letter-spacing: 0.1em; color: var(--text-muted, #666); font-weight: 700; margin-bottom: 4px; } .savant-card__echo-body { margin: 0; font-family: var(--font-serif, Georgia, serif); font-size: 0.95rem; line-height: 1.5; color: var(--text-primary, #222); } .savant-card__echo-body strong { font-weight: 600; } .savant-card__legend { display: flex; flex-wrap: wrap; gap: 8px; margin: var(--sp-3, 12px) 0 0 0; padding-top: var(--sp-3, 12px); border-top: 1px dashed var(--line-subtle, #e6e6e6); } .savant-card__legend-chip { font-size: 0.62rem; letter-spacing: 0.06em; text-transform: none; font-weight: 600; padding: 3px 7px; border-radius: 3px; color: #fff; } .savant-card__legend-chip--elite { background: #22c55e; } .savant-card__legend-chip--strong { background: #65a30d; } .savant-card__legend-chip--average { background: #a3a3a3; } .savant-card__legend-chip--concern { background: #f59e0b; } .savant-card__legend-chip--bottom { background: #dc2626; } .savant-card__source { margin-top: var(--sp-3, 12px); padding-top: var(--sp-3, 10px); border-top: 1px solid var(--line-subtle, #eee); font-size: 0.7rem; color: var(--text-muted, #888); letter-spacing: 0.02em; } @media (max-width: 640px) { .savant-bar { grid-template-columns: 104px 1fr 44px; gap: 8px; } .savant-bar__label-text { font-size: 0.78rem; } .savant-bar__value { font-size: 0.86rem; } .savant-card__header { gap: 10px; } .savant-card__toggle { flex-wrap: wrap; } .savant-card__chip { padding: 5px 9px; font-size: 0.64rem; } } /* Rivalry Card — mythic header + meta strip + trajectory + panels + meetings + stakes. */ .rivalry-card { background: var(--surface-card, #fff); border: 1px solid var(--line-subtle, #e6e6e6); border-top: 3px solid var(--accent-primary, #0C2340); border-radius: var(--radius-md, 8px); padding: var(--sp-4, 18px) var(--sp-5, 24px); margin-top: var(--sp-5, 24px); font-family: var(--font-sans, system-ui, sans-serif); color: var(--text-primary, #111); } /* ---------- Header ---------- */ .rivalry-card__header { text-align: center; padding-bottom: var(--sp-4, 16px); margin-bottom: var(--sp-4, 18px); border-bottom: 1px solid var(--line-subtle, #eee); } .rivalry-card__eyebrow { display: block; font-size: 0.7rem; letter-spacing: 0.14em; font-weight: 600; color: var(--text-muted, #666); margin-bottom: 8px; } .rivalry-card__title { font-family: var(--font-serif, Georgia, serif); font-size: clamp(1.5rem, 3.5vw, 2.4rem); line-height: 1.15; margin: 0 0 6px 0; color: var(--text-primary, #111); letter-spacing: -0.02em; font-weight: 400; } .rivalry-card__trophy { display: inline-block; font-family: var(--font-serif, Georgia, serif); font-style: italic; color: var(--accent-primary, #0C2340); font-size: 1.02rem; margin-bottom: 6px; } .rivalry-card__lineage { display: block; font-size: 0.78rem; color: var(--text-muted, #666); font-variant-numeric: tabular-nums; letter-spacing: 0.03em; } .rivalry-card__full-history { display: inline-block; margin-top: 10px; font-size: 0.82rem; font-weight: 600; color: var(--panel-accent, #008fd5); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.15s ease; } .rivalry-card__full-history:hover { border-bottom-color: currentColor; } /* ---------- Meta strip ---------- */ .rivalry-card__meta-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line-subtle, #eee); } .rivalry-card__meta-tile { display: flex; flex-direction: column; gap: 4px; padding: 10px 14px; border-left: 2px solid var(--accent-primary, #0C2340); background: linear-gradient(90deg, rgba(0,0,0,0.02), transparent); } .rivalry-card__meta-label { font-size: 0.64rem; letter-spacing: 0.1em; text-transform: none; color: var(--text-muted, #777); font-weight: 600; } .rivalry-card__meta-value { font-family: var(--font-serif, Georgia, serif); font-size: 1.35rem; font-weight: 500; color: var(--text-primary, #111); font-variant-numeric: tabular-nums; } .rivalry-card__meta-sub { font-size: 0.72rem; color: var(--text-muted, #888); } /* ---------- Trajectory ---------- */ .rivalry-card__trajectory { padding: 14px 0; border-bottom: 1px solid var(--line-subtle, #eee); } .rivalry-card__trajectory-header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; } .rivalry-card__section-eyebrow { font-size: 0.66rem; letter-spacing: 0.12em; text-transform: none; color: var(--text-muted, #666); font-weight: 600; } .rivalry-card__gap { font-family: var(--font-serif, Georgia, serif); font-size: 0.95rem; color: var(--accent-primary, #0C2340); font-variant-numeric: tabular-nums; font-style: italic; } .rivalry-card__trajectory-svg { width: 100%; height: 140px; display: block; } .rivalry-card__trajectory-note { font-size: 0.72rem; color: var(--text-muted, #999); margin: 6px 0 0 0; font-style: italic; } /* ---------- Panels ---------- */ .rivalry-card__panels { display: grid; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line-subtle, #eee); } .rivalry-card__panels--dual { grid-template-columns: 1fr 1fr; } .rivalry-card__panels--single { grid-template-columns: 1fr; } .rivalry-card__panel { border: 1px solid var(--line-subtle, #eee); border-top: 3px solid var(--panel-accent, #111); border-radius: 6px; padding: 14px 16px; background: var(--surface-muted, #fafafa); } .rivalry-card__panel--primary { background: linear-gradient(180deg, rgba(0,0,0,0.02), transparent); } .rivalry-card__panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; } .rivalry-card__panel-name { font-family: var(--font-serif, Georgia, serif); font-size: 1.04rem; color: var(--panel-accent, #111); font-weight: 500; } .rivalry-card__panel-posture { font-size: 0.68rem; letter-spacing: 0.1em; text-transform: lowercase; font-style: italic; color: var(--text-muted, #555); font-weight: 500; } .rivalry-card__panel-quote { font-family: var(--font-serif, Georgia, serif); font-size: 1.02rem; line-height: 1.5; margin: 0 0 8px 0; color: var(--text-primary, #222); } .rivalry-card__panel-attr { display: block; font-size: 0.72rem; color: var(--text-muted, #777); font-style: normal; } /* ---------- Meetings ---------- */ .rivalry-card__meetings { padding: 16px 0; border-bottom: 1px solid var(--line-subtle, #eee); } .rivalry-card__meetings-list { list-style: none; padding: 0; margin: 10px 0 0 0; display: flex; flex-direction: column; gap: 8px; } .rivalry-card__meeting { display: grid; grid-template-columns: 30px 48px 1fr; gap: 10px; align-items: baseline; padding: 8px 0; border-bottom: 1px dashed var(--line-subtle, #f0f0f0); font-family: var(--font-serif, Georgia, serif); font-size: 0.94rem; line-height: 1.45; } .rivalry-card__meeting:last-child { border-bottom: none; } .rivalry-card__meeting-result { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; font-family: var(--font-sans, system-ui); font-size: 0.7rem; font-weight: 700; letter-spacing: 0; color: var(--text-muted, #888); background: var(--surface-muted, #f3f3f3); } .rivalry-card__meeting-result--win { background: #22c55e; color: #fff; } .rivalry-card__meeting-result--loss { background: #dc2626; color: #fff; } .rivalry-card__meeting-year { font-family: var(--font-sans, system-ui); font-size: 0.84rem; font-weight: 600; color: var(--text-muted, #666); font-variant-numeric: tabular-nums; } .rivalry-card__meeting-body { color: var(--text-primary, #222); } .rivalry-card__meeting-body--placeholder { color: var(--text-muted, #888); font-style: italic; font-size: 0.9em; } /* ---------- Stakes ---------- */ .rivalry-card__stakes { padding: 16px 0 4px 0; } .rivalry-card__stakes-grid { display: grid; gap: 14px; margin-top: 10px; } .rivalry-card__stakes--dual .rivalry-card__stakes-grid { grid-template-columns: 1fr 1fr; } .rivalry-card__stake { padding: 12px 14px; background: var(--surface-muted, #fafafa); border-left: 2px solid var(--accent-primary, #0C2340); border-radius: 4px; } .rivalry-card__stake-label { display: block; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: none; color: var(--text-muted, #666); font-weight: 600; margin-bottom: 6px; } .rivalry-card__stake-text { margin: 0; font-family: var(--font-serif, Georgia, serif); font-size: 0.98rem; line-height: 1.5; color: var(--text-primary, #222); } /* ---------- Responsive ---------- */ @media (max-width: 720px) { .rivalry-card { padding: 14px 16px; } .rivalry-card__meta-strip { grid-template-columns: repeat(2, 1fr); } .rivalry-card__panels--dual { grid-template-columns: 1fr; } .rivalry-card__stakes--dual .rivalry-card__stakes-grid { grid-template-columns: 1fr; } .rivalry-card__meeting { grid-template-columns: 24px 40px 1fr; gap: 8px; font-size: 0.86rem; } } /* ============================================================================ * Fan Heat Index dual-thermometer — Brief §7.2 Zone 4 (Sprint E finish) * Two opposing thermometers. cool→warm→hot gradient — explicitly NOT * the percentile ramp; brief §7 carves rivalry-heat as its own semantic. * Migrated to doc-90 light tokens 2026-06-18 (removed Bebas Neue / dark rgba). * ========================================================================= */ .rivalry-heat { display: grid; gap: 12px; padding: 18px 20px; margin: 14px 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-2); } .rivalry-heat__header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; } .rivalry-heat__title { font-family: 'Fraunces', Georgia, serif; font-size: 20px; font-weight: 600; line-height: 1; color: var(--ink); margin: 0; } .rivalry-heat__eyebrow { font-family: 'Archivo', system-ui, sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; color: var(--ink-3); margin: 0; } .rivalry-heat__body { font-family: 'Archivo', system-ui, sans-serif; font-size: 13px; line-height: 1.5; color: var(--ink-2); margin: 0; max-width: 60ch; } .rivalry-heat__body em { font-style: italic; } .rivalry-heat__pair { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: stretch; margin-top: 4px; } .rivalry-heat__pair::before { content: "VS"; grid-column: 2 / 3; align-self: center; font-family: 'Archivo', system-ui, sans-serif; font-weight: 800; font-size: 13px; color: var(--ink-3); letter-spacing: 0.08em; } .rivalry-heat__side { display: grid; gap: 6px; padding: 10px 12px; background: var(--page); border: 1px solid color-mix(in oklab, var(--side-accent) 30%, transparent); border-radius: var(--r-2); text-align: left; } .rivalry-heat__side--opponent { text-align: right; } .rivalry-heat__name { font-family: 'Archivo', system-ui, sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: var(--side-accent); } .rivalry-heat__column { display: flex; align-items: stretch; } .rivalry-heat__side--opponent .rivalry-heat__column { justify-content: flex-end; } .rivalry-heat__bar { position: relative; width: 100%; height: 16px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-2); overflow: hidden; } .rivalry-heat__side--opponent .rivalry-heat__bar { transform: scaleX(-1); } .rivalry-heat__fill { position: absolute; inset: 0; width: var(--fill, 0%); background: linear-gradient(90deg, #008fd5 0%, #e5ae38 50%, #fc4f30 100%); border-radius: var(--r-2); transition: width 240ms ease-out; } .rivalry-heat__bar--awaiting .rivalry-heat__fill { opacity: 0.35; filter: grayscale(0.6); } .rivalry-heat__label { font-family: 'Archivo', system-ui, sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: var(--ink-2); font-variant-numeric: tabular-nums; } @media (max-width: 540px) { .rivalry-heat__pair { grid-template-columns: 1fr; gap: 8px; } .rivalry-heat__pair::before { display: none; } .rivalry-heat__side--opponent { text-align: left; } .rivalry-heat__side--opponent .rivalry-heat__column { justify-content: flex-start; } .rivalry-heat__side--opponent .rivalry-heat__bar { transform: none; } } /* CFPEraView — zoomed-out 2014+ trajectory + brick chapter index. */ .arc-card { background: var(--surface-card, #fff); border: 1px solid var(--line-subtle, #e6e6e6); border-top: 3px solid var(--accent-primary, #0C2340); border-radius: var(--radius-md, 8px); padding: var(--sp-4, 18px) var(--sp-5, 24px); margin-top: var(--sp-5, 24px); font-family: var(--font-sans, system-ui, sans-serif); color: var(--text-primary, #111); } /* ---------- Header ---------- */ .arc-card__header { padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--line-subtle, #eee); } .arc-card__eyebrow, .arc-card__section-eyebrow { font-size: 0.66rem; letter-spacing: 0.13em; text-transform: none; color: var(--text-muted, #666); font-weight: 600; } .arc-card__title { font-family: var(--font-serif, Georgia, serif); font-size: clamp(1.4rem, 3.2vw, 2.2rem); line-height: 1.1; margin: 6px 0 8px 0; font-weight: 400; letter-spacing: -0.02em; color: var(--text-primary, #111); } .arc-card__thesis { font-family: var(--font-serif, Georgia, serif); font-size: 1.05rem; line-height: 1.55; color: var(--text-primary, #222); margin: 0; max-width: 68ch; } .arc-card__thesis--fallback { color: var(--text-muted, #555); font-style: italic; } /* ---------- Meta strip (5-col) ---------- */ .arc-card__meta-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line-subtle, #eee); } .arc-card__meta-tile { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-left: 2px solid var(--accent-primary, #0C2340); background: linear-gradient(90deg, rgba(0,0,0,0.02), transparent); } .arc-card__meta-label { font-size: 0.62rem; letter-spacing: 0.1em; text-transform: none; color: var(--text-muted, #777); font-weight: 600; } .arc-card__meta-value { font-family: var(--font-serif, Georgia, serif); font-size: 1.5rem; font-weight: 500; color: var(--text-primary, #111); font-variant-numeric: tabular-nums; } .arc-card__meta-sub { font-size: 0.68rem; color: var(--text-muted, #888); } /* ---------- Chart ---------- */ .arc-card__chart-frame { padding: 14px 0; border-bottom: 1px solid var(--line-subtle, #eee); } .arc-card__chart-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 6px; } .arc-card__legend { display: flex; gap: 14px; flex-wrap: wrap; } .arc-card__legend-item { font-size: 0.66rem; letter-spacing: 0.06em; text-transform: none; font-weight: 600; color: var(--text-muted, #666); display: inline-flex; align-items: center; gap: 6px; } .arc-card__legend-item::before { content: ""; display: inline-block; width: 14px; height: 2px; background: var(--legend-color, #111); border-radius: 1px; } .arc-card__legend-item--quality::before { height: 2.5px; } .arc-card__legend-item--ap::before { background: #6b7280; border-top: 1.5px dotted #6b7280; background-color: transparent; height: 0; } .arc-card__legend-item--cfp::before { background: #d97706; width: 2px; height: 14px; } .arc-card__chart { width: 100%; height: 180px; display: block; } .arc-chart__grid { stroke: #e5e7eb; stroke-width: 1; } .arc-chart__quality { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; opacity: 0.95; } .arc-chart__ap { fill: none; stroke: #6b7280; stroke-width: 1.3; stroke-dasharray: 3 3; stroke-linejoin: round; opacity: 0.7; } .arc-chart__ap-dot { fill: #6b7280; opacity: 0.85; } .arc-chart__cfp { stroke: #d97706; stroke-width: 1; stroke-dasharray: 2 2; opacity: 0.55; } .arc-chart__cfp--title { stroke-width: 1.4; stroke-dasharray: none; opacity: 0.75; } .arc-chart__cfp-dot { fill: #d97706; stroke: #fff; stroke-width: 1; } .arc-chart__cfp-eyebrow { fill: #b45309; font-size: 9px; font-family: var(--font-sans, system-ui); font-weight: 600; letter-spacing: 0.12em; } .arc-chart__cfp-label { fill: #d97706; font-size: 10px; font-family: var(--font-sans, system-ui); font-weight: 600; } .arc-chart__cfp-label--won { font-weight: 700; fill: #b45309; } .arc-chart__xlabel { fill: #9ca3af; font-size: 10px; font-family: var(--font-sans, system-ui); font-weight: 500; } .arc-chart__xlabel--now { fill: var(--accent-primary, #0C2340); font-weight: 600; letter-spacing: 0.08em; } .arc-chart__ribbon-band { /* fill + opacity set inline per-band */ } .arc-chart__ribbon-label { fill: #ffffff; font-size: 9px; font-family: var(--font-sans, system-ui); font-weight: 600; letter-spacing: 0.08em; text-shadow: 0 1px 2px rgba(0,0,0,0.35); paint-order: stroke; stroke: rgba(0,0,0,0.35); stroke-width: 0.3; } .arc-chart__annotation { font-family: var(--font-serif, Georgia, serif); font-style: italic; font-size: 10px; /* fill set inline per annotation */ } .arc-chart__annot-leader { stroke-width: 0.75; stroke-dasharray: 2 1.5; opacity: 0.7; fill: none; } /* ---------- Chapter bricks ---------- */ .arc-card__chapters { padding: 16px 0; border-bottom: 1px solid var(--line-subtle, #eee); } .arc-card__chapter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(74px, 1fr)); gap: 8px; margin-top: 10px; } .season-brick { display: flex; flex-direction: column; gap: 2px; padding: 10px 8px 8px 8px; border: 1px solid var(--line-subtle, #ddd); border-radius: 5px; text-decoration: none; color: inherit; text-align: center; background: #fff; transition: transform 120ms ease, box-shadow 120ms ease; position: relative; } .season-brick:hover { transform: translateY(-1px); box-shadow: none; } .season-brick__year { font-family: var(--font-serif, Georgia, serif); font-size: 0.95rem; color: var(--text-primary, #111); font-variant-numeric: tabular-nums; } .season-brick__record { font-size: 0.74rem; color: var(--text-muted, #555); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; } .season-brick__badge { position: absolute; top: 4px; right: 6px; font-size: 0.7rem; color: #d97706; line-height: 1; } .season-brick--winning { background: rgba(15, 23, 42, 0.04); border-color: rgba(15, 23, 42, 0.2); } .season-brick--peak { background: rgba(217, 119, 6, 0.12); border-color: rgba(217, 119, 6, 0.45); } .season-brick--title-era { background: rgba(217, 119, 6, 0.22); border-color: rgba(217, 119, 6, 0.7); } .season-brick--title-era .season-brick__year { font-weight: 600; } .season-brick--crisis { background: rgba(220, 38, 38, 0.1); border-color: rgba(220, 38, 38, 0.35); } .season-brick--current { background: transparent; border: 1.5px solid var(--text-primary, #111); } .season-brick--baseline { background: #fff; } .season-brick--data-gap { background: repeating-linear-gradient(45deg, #fafafa, #fafafa 4px, #eee 4px, #eee 8px); border-color: #ddd; color: var(--text-muted, #999); font-style: italic; } .season-brick--partial-data { background: #fff; border-color: var(--line-subtle, #d8d8d8); } .season-brick--partial-data .season-brick__record, .season-brick--is-partial .season-brick__record { /* Phase 9 a11y: WCAG AA — was #aaa (2.32:1 fail on #fff) */ color: #707070; font-style: italic; } .season-brick--partial-data .season-brick__year { /* Phase 9 a11y: WCAG AA — was #777 (4.48:1 borderline) */ color: var(--text-muted, #595959); } /* ---------- Closing + peer footer ---------- */ .arc-card__closing { padding: 16px 0 4px 0; } .arc-card__closing-text { font-family: var(--font-serif, Georgia, serif); font-size: 1.05rem; line-height: 1.55; color: var(--text-primary, #222); margin: 0 0 14px 0; max-width: 72ch; } .arc-card__peer-footer { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 10px 0 0 0; padding-top: 12px; border-top: 1px dashed var(--line-subtle, #eee); } .arc-card__peer-footer > div { display: flex; flex-direction: column; gap: 2px; } .arc-card__peer-footer dt { font-size: 0.62rem; letter-spacing: 0.1em; text-transform: none; color: var(--text-muted, #777); font-weight: 600; margin: 0; } .arc-card__peer-footer dd { font-family: var(--font-serif, Georgia, serif); font-size: 1.15rem; color: var(--text-primary, #111); margin: 0; font-variant-numeric: tabular-nums; } /* ---------- Responsive ---------- */ @media (max-width: 720px) { .arc-card { padding: 14px 16px; } .arc-card__meta-strip { grid-template-columns: repeat(2, 1fr); } .arc-card__meta-value { font-size: 1.2rem; } .arc-card__peer-footer { grid-template-columns: 1fr; } } /* Rituals strip (Sprint v5-8.5) * ------------------------------------------------------------------------- * Live-site styles for the rituals strip rendered by * `cfb_rankings.team_pages.rituals_module`. Class names match the locked * mockup_02_team_alabama_v2.html structure so the renderer output is a * drop-in. Mockup tokens are mapped to the live team-pages token system: * --color-surface-card → var(--bg-card) * --color-line → var(--stroke-default) * --color-text-muted → var(--fg-muted) * --color-ink → var(--fg-primary) * --color-accent-primary → var(--accent-primary) * --font-ui → var(--font-body) * --font-tabular → var(--font-mono) * amber-50/100/800 layers → mix of var(--tone-amber) + accent */ .rituals.program-section { margin: var(--sp-9) 0 var(--sp-7); } .rituals .program-section__head { margin-bottom: var(--sp-5); } .rituals .section-title { display: flex; align-items: center; gap: var(--sp-4); font-family: var(--font-display); font-size: var(--fs-headline-sm); font-weight: 700; letter-spacing: var(--ls-tight); color: var(--fg-primary); margin: 0 0 var(--sp-2); } .rituals .section-title__rule { flex: 1; height: 1px; background: var(--stroke-default); } .rituals .caption { font-family: var(--font-serif); font-size: var(--fs-serif-body); color: var(--fg-secondary); line-height: var(--lh-snug); margin: 0; } .rituals.program-section { overflow-x: clip; } .rituals-track { display: flex; gap: var(--sp-4); max-width: 100%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--sp-3); -webkit-overflow-scrolling: touch; } @media (min-width: 1024px) { .rituals-track { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-4); overflow: visible; } } .ritual-card { flex: 0 0 140px; scroll-snap-align: start; background: var(--bg-card); border: 1px solid var(--stroke-default); border-radius: var(--radius-md); padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); min-height: 180px; } @media (min-width: 1024px) { .ritual-card { flex: 1; } } .ritual-card__glyph { width: 100%; aspect-ratio: 1 / 1; background: linear-gradient( 180deg, color-mix(in srgb, var(--accent-primary) 18%, var(--bg-card-raised)), var(--bg-card) ); border-radius: var(--radius-sm); display: grid; place-items: center; font-family: var(--font-display); font-size: 30px; color: var(--accent-primary); letter-spacing: 0.05em; text-align: center; line-height: 1; box-shadow: none; } .ritual-card__glyph small { display: block; font-family: var(--font-body); font-size: 9px; letter-spacing: 0.18em; color: color-mix(in srgb, var(--accent-primary) 65%, var(--fg-muted)); margin-top: 4px; font-weight: 600; text-transform: none; } .ritual-card__name { font-family: var(--font-body); font-size: var(--fs-body); font-weight: 500; line-height: 1.25; color: var(--fg-primary); margin: 0; } .ritual-card__since { font-family: var(--font-mono); font-size: var(--fs-label); font-variant-numeric: tabular-nums; color: var(--fg-muted); letter-spacing: 0.04em; margin: 0; } /* Screen-reader-only description for accessibility; visible text is the * monogram + name. The full ritual description is read by AT only. */ .ritual-card__description.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Cultural anchors (renderer-only; rendered when profile YAML carries * `cultural_anchors.one_sentence`). Positioned as a quiet sidebar block * below the rituals strip in the page flow. */ .cultural-anchors { margin: var(--sp-6) 0 var(--sp-8); padding: var(--sp-5) var(--sp-6); background: var(--bg-card); border: 1px solid var(--stroke-default); border-radius: var(--radius-md); } .cultural-anchors__eyebrow { font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.04em; color: var(--fg-muted); margin: 0 0 var(--sp-2); } .cultural-anchors__one-sentence { font-family: var(--font-serif); font-size: var(--fs-body-lg); line-height: var(--lh-snug); color: var(--fg-primary); margin: 0 0 var(--sp-4); } .cultural-anchors__archetypes { display: grid; gap: var(--sp-2) var(--sp-5); grid-template-columns: max-content 1fr; margin: 0 0 var(--sp-3); font-size: var(--fs-body); } .cultural-anchors__archetypes dt { font-family: var(--font-body); font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--ls-label); text-transform: none; color: var(--fg-muted); align-self: center; } .cultural-anchors__archetypes dd { margin: 0; font-family: var(--font-body); color: var(--fg-primary); } .cultural-anchors__if-lost { margin: var(--sp-3) 0 0; font-family: var(--font-body); font-size: var(--fs-body); color: var(--fg-secondary); line-height: var(--lh-normal); } .cultural-anchors__if-lost strong { font-weight: 600; color: var(--fg-primary); margin-right: 0.4em; } /* Visual identity chip — small eyebrow chip; renderer hands back inline. */ .vi-chip { display: inline-flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); align-items: center; font-family: var(--font-body); font-size: var(--fs-label); color: var(--fg-muted); letter-spacing: var(--ls-wide); text-transform: none; } .vi-chip__helmet, .vi-chip__colors { padding: 2px 8px; border-radius: 3px; background: color-mix(in srgb, var(--accent-primary) 8%, var(--bg-card)); border: 1px solid color-mix(in srgb, var(--accent-primary) 22%, transparent); } /* Division III Playoff Path — conference race + CFB Index (doc 78) */ .d3pp{margin:34px 0;padding:0} .d3pp-eyebrow{font-family:var(--font-mono,'IBM Plex Mono',monospace);font-size:11px;letter-spacing:.12em; font-weight:700;color:var(--accent-primary,#9fb3d8);text-transform:none;margin-bottom:8px} .d3pp-headline{font-family:var(--font-serif,'Fraunces',Georgia,serif);font-weight:700; font-size:clamp(20px,2.4vw,27px);line-height:1.25;margin:0 0 18px;color:var(--fg-strong,#222222)} .d3pp-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:22px} @media (max-width:720px){.d3pp-grid{grid-template-columns:1fr}} .d3pp-cap{font-family:var(--font-mono,monospace);font-size:11px;letter-spacing:.08em;color:var(--fg-muted,#8b8b8b); text-transform:none;margin-bottom:6px} .d3pp-table{width:100%;border-collapse:collapse;font-size:14px} .d3pp-table th{font-family:var(--font-mono,monospace);font-size:10px;letter-spacing:.06em;text-transform:none; color:var(--fg-muted,#8b8b8b);text-align:left;padding:4px 8px;border-bottom:1px solid var(--rule,#2a3142)} .d3pp-table td{padding:6px 8px;border-bottom:1px solid var(--rule-faint,#1c2230);color:var(--fg,#222222); font-variant-numeric:tabular-nums} .d3pp-pl{color:var(--fg-muted,#8b8b8b);width:1.5em} .d3pp-tm{font-weight:600;color:var(--fg-strong,#222222)} .d3pp-row--me td{background:color-mix(in srgb,var(--accent-primary,#6d4ac9) 16%,transparent)} .d3pp-row--me .d3pp-tm{color:var(--accent-primary,#cdb8ff)} .d3pp-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px} .d3pp-chip{font-family:var(--font-mono,monospace);font-size:12px;color:var(--fg,#222222); background:var(--surface-2,#f0f0f0);border:1px solid var(--rule,#2a3142);border-radius:3px;padding:5px 11px} .d3pp-chip b{color:var(--fg-strong,#222222)} .d3pp-explainer{font-family:var(--font-serif,Georgia,serif);font-size:15px;line-height:1.5; color:var(--fg,#222222);margin:0 0 12px} .d3pp-explainer b{color:var(--fg-strong,#222222)} .d3pp-receipt{font-family:var(--font-mono,monospace);font-size:11px;color:var(--fg-muted,#8b8b8b);line-height:1.4} /* The Season — game-by-game margin chart */ .d3s{margin:30px 0} .d3s-eyebrow{font-family:var(--font-mono,'IBM Plex Mono',monospace);font-size:11px;letter-spacing:.12em; font-weight:700;color:var(--accent-primary,#9fb3d8);text-transform:none;margin-bottom:10px} .d3s-chart{max-width:760px} .d3s-svg{display:block} .d3s-zero{stroke:var(--rule,#2a3142);stroke-width:1.5} .d3s-bar rect{transition:opacity .12s ease} .d3s-bar:hover rect{opacity:.78} .d3s-win{fill:var(--accent-primary,#5b8def)} .d3s-loss{fill:#c2683f} .d3s-mg{font-family:var(--font-mono,monospace);font-size:10px;fill:var(--fg-muted,#8b8b8b)} .d3s-op{font-family:var(--font-mono,monospace);font-size:9.5px;fill:var(--fg-muted,#8b8b8b)} .d3s-summary{font-family:var(--font-serif,Georgia,serif);font-size:14px;line-height:1.5; color:var(--fg,#222222);margin:12px 0 0} /* The Rivalry */ .d3r{margin:30px 0;padding:20px 22px;border-left:3px solid var(--accent-primary,#5b8def); background:var(--surface-2,#f0f0f0);border-radius:0 3px 3px 0} .d3r-eyebrow{font-family:var(--font-mono,'IBM Plex Mono',monospace);font-size:11px;letter-spacing:.1em; font-weight:700;color:var(--fg-muted,#8b8b8b);text-transform:none;margin-bottom:6px} .d3r-name{font-family:var(--font-serif,'Fraunces',Georgia,serif);font-weight:700; font-size:clamp(20px,2.3vw,26px);line-height:1.2;margin:0 0 10px;color:var(--accent-primary,#cdb8ff)} .d3r-allt{font-family:var(--font-serif,Georgia,serif);font-size:16px;line-height:1.45;font-weight:600; color:var(--fg-strong,#222222);margin:0 0 8px} .d3r-since,.d3r-recent{font-family:var(--font-serif,Georgia,serif);font-size:14px;line-height:1.5; color:var(--fg,#222222);margin:0 0 6px} /* Hero Arc 13-brick CFP-era stripe — Sprint E (Brief §20) */ /* Hero Arc Stripe — TEAM_PAGE_WORLD_CLASS_BRIEF §20, v1.0 CFP era */ .hero-arc-stripe { --has-cfp: var(--accolade-gold); --brick-empty: color-mix(in oklab, var(--bg-card-raised) 80%, var(--bg-card)); --label-fg: var(--fg-secondary); display: grid; gap: var(--sp-3, 12px); padding: clamp(16px, 2.2vw, 28px) clamp(16px, 2.6vw, 32px); background: linear-gradient( 135deg, color-mix(in oklab, var(--accent-primary) 6%, transparent) 0%, color-mix(in oklab, var(--accent-secondary) 4%, transparent) 60%, transparent 100% ); border: 1px solid var(--stroke-default); border-radius: var(--radius-lg, 16px); margin-bottom: clamp(20px, 3vw, 32px); } .hero-arc-stripe__header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; } .hero-arc-stripe__title { font-family: var(--font-display); font-size: clamp(20px, 1.5vw + 10px, 28px); font-weight: 400; line-height: 1; letter-spacing: 0.02em; text-transform: none; color: var(--fg-primary); margin: 0; } .hero-arc-stripe__sub { font-family: var(--font-sans); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: none; color: var(--fg-muted); margin: 0; } .hero-arc-stripe__bricks { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: end; gap: 6px; height: 96px; padding: 4px 0; } .hero-arc-stripe__brick { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; min-width: 0; height: 100%; cursor: default; } .hero-arc-stripe__bar { display: block; width: 100%; border-radius: 4px 4px 2px 2px; background: var(--brick-color, var(--brick-empty)); border: 1px solid color-mix(in oklab, var(--brick-color, var(--brick-empty)) 60%, transparent); min-height: 16px; transition: filter 120ms ease; } .hero-arc-stripe__brick--cfp .hero-arc-stripe__bar { border: 2px solid var(--has-cfp); box-shadow: 0 0 0 2px color-mix(in oklab, var(--has-cfp) 22%, transparent); } .hero-arc-stripe__brick--current .hero-arc-stripe__bar { outline: 2px solid var(--accent-primary); outline-offset: 2px; } .hero-arc-stripe__brick:hover .hero-arc-stripe__bar { filter: brightness(1.18); } .hero-arc-stripe__brick-label { font-family: var(--font-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.04em; color: var(--fg-muted); text-align: center; margin-top: 4px; font-variant-numeric: tabular-nums; white-space: nowrap; } .hero-arc-stripe__brick--cfp .hero-arc-stripe__brick-label { color: var(--has-cfp); } .hero-arc-stripe__legend { display: flex; flex-wrap: wrap; gap: 4px 18px; font-family: var(--font-sans); font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: none; color: var(--fg-muted); margin: 0; } .hero-arc-stripe__legend-dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; vertical-align: middle; } .hero-arc-stripe__legend-dot--high { background: var(--pct-high); } .hero-arc-stripe__legend-dot--mid { background: var(--pct-mid); } .hero-arc-stripe__legend-dot--low { background: var(--pct-low); } .hero-arc-stripe__legend-dot--cfp { background: transparent; border: 2px solid var(--has-cfp); width: 10px; height: 10px; } @media (max-width: 540px) { .hero-arc-stripe__bricks { height: 72px; gap: 4px; } .hero-arc-stripe__brick-label { font-size: 8px; } .hero-arc-stripe__title { font-size: 20px; } } /* Season Standing Rail — Brief §3.1 (team-page analog) */ /* Season Standing Rail — Brief §3.1 * * Visual sibling of the player Standing Rail. Reads --accent-primary / * --accent-secondary from the enclosing body so each team page's rail * takes on the program brand pair. */ .season-standing-rail { --rail-track: rgba(34, 34, 34, 0.08); --rail-tick: rgba(34, 34, 34, 0.18); --rail-marker: var(--accent-primary, #c9a24a); --rail-marker-soft: var(--accent-secondary, var(--accent-primary, #c9a24a)); --rail-ghost: rgba(34, 34, 34, 0.22); --rail-tier-bg: rgba(34, 34, 34, 0.03); --rail-champion: #d4af37; display: grid; gap: clamp(12px, 1.5vw, 18px); padding: clamp(18px, 2.4vw, 28px) clamp(18px, 2.6vw, 32px); background: rgba(34, 34, 34, 0.02); border: 1px solid var(--stroke-default, var(--rail-tick)); border-radius: 3px; margin-bottom: clamp(20px, 3vw, 32px); font-variant-numeric: tabular-nums; } .season-standing-rail__header { display: grid; gap: 6px; } .season-standing-rail__eyebrow { font-family: var(--font-sans, system-ui, sans-serif); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: none; color: var(--fg-muted); margin: 0; } .season-standing-rail__rung-name { font-family: var(--font-display, 'Archivo', 'Archivo', system-ui, sans-serif); font-size: clamp(28px, 2.6vw + 12px, 40px); font-weight: 400; line-height: 1; letter-spacing: 0.02em; text-transform: none; color: var(--fg-primary); margin: 0; } .season-standing-rail__rung-narrative { font-family: var(--font-serif, 'Fraunces', Georgia, serif); font-size: clamp(14px, 0.4vw + 13px, 17px); font-style: italic; line-height: 1.45; color: var(--fg-secondary); margin: 0; max-width: 64ch; } /* === The rail itself: 10 ticks === */ .season-standing-rail__rail { position: relative; display: grid; grid-template-columns: repeat(10, 1fr); align-items: center; height: 56px; padding: 0 6px; } .season-standing-rail__rail::before { content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 4px; background: var(--rail-track); border-radius: 2px; transform: translateY(-50%); } .season-standing-rail__tick { position: relative; height: 12px; display: flex; align-items: center; justify-content: center; } .season-standing-rail__tick::before { content: ""; width: 2px; height: 12px; background: var(--rail-tick); border-radius: 1px; } .season-standing-rail__tick[data-current="true"]::before { width: 18px; height: 28px; background: var(--rail-marker); border-radius: 4px; box-shadow: none; } .season-standing-rail__tick[data-ghost="true"]::before { width: 8px; height: 18px; background: var(--rail-ghost); border-radius: 3px; } /* Championship rung (R9) — accolade gold even when not current. */ .season-standing-rail__tick[data-rung="9"]::before { background: var(--rail-champion); width: 4px; height: 16px; } .season-standing-rail__tick[data-rung="9"][data-current="true"]::before { background: var(--rail-champion); box-shadow: none; } .season-standing-rail__rung-num { position: absolute; bottom: -22px; font-family: var(--font-sans, system-ui, sans-serif); font-size: 9px; font-weight: 600; letter-spacing: 0.04em; color: var(--fg-muted); } .season-standing-rail__tick[data-current="true"] .season-standing-rail__rung-num { color: var(--rail-marker); } /* === Tier pill row === */ .season-standing-rail__tiers { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; padding: 4px; background: var(--rail-tier-bg); border-radius: 3px; } .season-standing-rail__tier { font-family: var(--font-sans, system-ui, sans-serif); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: none; text-align: center; padding: 8px 6px; color: var(--fg-muted); background: transparent; border-radius: 3px; border: 1px solid transparent; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .season-standing-rail__tier[data-current="true"] { background: var(--rail-marker); color: #ffffff; border-color: var(--rail-marker); } @media (max-width: 640px) { .season-standing-rail__tiers { grid-template-columns: repeat(3, 1fr); } .season-standing-rail__rung-name { font-size: 26px; } } /* Empty state — drawn when compute_season_rung returns None */ .season-standing-rail--empty { display: grid; gap: 4px; padding: 16px 18px; background: rgba(34, 34, 34, 0.02); border: 1px dashed var(--rail-tick); border-radius: 3px; margin-bottom: clamp(20px, 3vw, 32px); } .season-standing-rail--empty p { margin: 0; font-family: var(--font-serif, 'Fraunces', Georgia, serif); font-style: italic; color: var(--fg-muted); font-size: 14px; } /* Program Prestige Bar — Brief §3.2 */ /* Program Prestige Bar — Brief §3.2 * * Sibling of the Season Standing rail. Reads accent tokens from the * enclosing body so each program brand colors the active tier pill. */ .program-prestige-bar { --pp-track: rgba(34, 34, 34, 0.08); --pp-tier-bg: rgba(34, 34, 34, 0.02); --pp-marker: var(--accent-primary, #c9a24a); --pp-marker-soft: var(--accent-secondary, var(--accent-primary, #c9a24a)); --pp-ghost: rgba(34, 34, 34, 0.22); display: grid; gap: clamp(12px, 1.5vw, 18px); padding: clamp(18px, 2.4vw, 28px) clamp(18px, 2.6vw, 32px); background: rgba(34, 34, 34, 0.02); border: 1px solid var(--stroke-default, var(--pp-track)); border-radius: 3px; margin-bottom: clamp(20px, 3vw, 32px); } .program-prestige-bar__header { display: grid; gap: 6px; } .program-prestige-bar__eyebrow { font-family: var(--font-sans, system-ui, sans-serif); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: none; color: var(--fg-muted); margin: 0; } .program-prestige-bar__tier-name { font-family: var(--font-display, 'Archivo', system-ui, sans-serif); font-size: clamp(32px, 3vw + 14px, 56px); font-weight: 400; line-height: 1; letter-spacing: 0.03em; text-transform: none; color: var(--fg-primary); margin: 0; } .program-prestige-bar__narrative { font-family: var(--font-serif, 'Fraunces', Georgia, serif); font-size: clamp(14px, 0.4vw + 13px, 17px); font-style: italic; line-height: 1.45; color: var(--fg-secondary); margin: 0; max-width: 64ch; } .program-prestige-bar__peak { font-family: var(--font-sans, system-ui, sans-serif); font-size: 13px; color: var(--fg-secondary); margin: 0; } .program-prestige-bar__peak strong { color: var(--fg-primary); font-weight: 700; } /* === Tier-bar: 7 segments === */ .program-prestige-bar__bar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; padding: 5px; background: var(--pp-tier-bg); border-radius: 3px; border: 1px solid var(--pp-track); } .program-prestige-bar__segment { position: relative; font-family: var(--font-sans, system-ui, sans-serif); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: none; text-align: center; padding: 12px 6px 26px 6px; color: var(--fg-muted); background: transparent; border-radius: 3px; border: 1px solid transparent; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 56px; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; gap: 4px; } .program-prestige-bar__segment-num { font-family: var(--font-sans, system-ui, sans-serif); font-size: 9px; font-weight: 600; letter-spacing: 0.04em; color: var(--fg-muted); opacity: 0.6; } .program-prestige-bar__segment[data-current="true"] { background: var(--pp-marker); color: #ffffff; border-color: var(--pp-marker); } .program-prestige-bar__segment[data-current="true"] .program-prestige-bar__segment-num { color: rgba(34, 34, 34,0.85); opacity: 1; } .program-prestige-bar__segment[data-peak="true"]:not([data-current="true"]) { background: color-mix(in oklab, var(--pp-marker) 14%, transparent); border-color: color-mix(in oklab, var(--pp-marker) 50%, transparent); color: var(--fg-primary); } .program-prestige-bar__segment[data-peak="true"]:not([data-current="true"])::after { content: "PEAK"; position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); font-size: 8px; font-weight: 800; letter-spacing: 0.12em; color: var(--pp-marker); } @media (max-width: 640px) { .program-prestige-bar__tier-name { font-size: 32px; } .program-prestige-bar__bar { grid-template-columns: repeat(4, 1fr); grid-auto-rows: auto; } } .program-prestige-bar--empty { display: none; /* every team renders the bar; only override fully missing */ } .stature-chip{--sc-muted:#6d6d68;text-decoration:none;font-family:Archivo,system-ui,sans-serif} .sc-inline,.sc-micro,.sc-standard{display:inline-flex;align-items:center;gap:6px;vertical-align:middle} .sc-tick{display:inline-block;width:4px;height:13px;border-radius:1px;flex:none} .sc-band{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase} .sc-rank{font-size:11.5px;color:var(--sc-muted);font-variant-numeric:tabular-nums;font-weight:600} .sc-traj{font-size:11px;color:var(--sc-muted)} .sc-hero{display:inline-flex;gap:12px;align-items:stretch} .sc-ladder{display:flex;flex-direction:column;gap:1.5px;justify-content:center;width:15px} .sc-lt{height:2px;background:rgba(28,28,26,.13);border-radius:1px} .sc-hbody{display:flex;flex-direction:column;gap:2px;justify-content:center} .sc-eyebrow{font-size:9.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--sc-muted)} .sc-hband{font-family:Fraunces,Georgia,serif;font-size:21px;font-weight:600;letter-spacing:0;text-transform:none;line-height:1} .sc-hmeta{display:flex;gap:10px;align-items:baseline;font-size:12px;color:var(--sc-muted);font-variant-numeric:tabular-nums} .sc-at{font-weight:700;color:#1c1c1a} .sc-note{font-size:11.5px;color:var(--sc-muted);margin-top:1px} .sc-held{color:#c2371c} /* External Ratings / Model Consensus — surfaces SP+/FPI/Elo/SRS vs CFB Index */ .external-ratings { display: grid; gap: clamp(10px, 1.4vw, 14px); padding: clamp(14px, 1.8vw, 20px) clamp(16px, 2vw, 24px); background: rgba(34, 34, 34, 0.025); border: 1px solid var(--stroke-subtle, rgba(34, 34, 34, 0.08)); border-radius: 3px; margin-bottom: clamp(20px, 3vw, 32px); } .external-ratings__eyebrow { font-family: var(--font-sans, system-ui, sans-serif); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: none; color: var(--fg-muted, #8b8b8b); margin: 0; } .external-ratings__title { font-family: var(--font-display, 'Archivo', system-ui, sans-serif); font-size: clamp(20px, 1.4vw + 9px, 26px); font-weight: 400; line-height: 1; letter-spacing: 0.02em; text-transform: none; color: var(--fg-primary, #222222); margin: 2px 0 0; } .external-ratings__grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(116px, 1fr)); } .external-ratings__card { display: grid; gap: 4px; padding: 12px 10px; text-align: center; background: rgba(34, 34, 34, 0.02); border: 1px solid var(--stroke-subtle, rgba(34, 34, 34, 0.08)); border-radius: 3px; } .external-ratings__card--ours { background: rgba(201, 162, 74, 0.10); border-color: var(--accent-primary, #c9a24a); } .external-ratings__system { font-family: var(--font-sans, system-ui, sans-serif); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: none; color: var(--fg-secondary, #5b5b5b); margin: 0; } .external-ratings__rank { font-family: var(--font-display, 'Archivo', system-ui, sans-serif); font-size: 30px; font-weight: 400; line-height: 1; margin: 2px 0; color: var(--fg-primary, #222222); font-variant-numeric: tabular-nums; } .external-ratings__card--ours .external-ratings__rank { color: var(--accent-primary, #c9a24a); } .external-ratings__rating { font-family: var(--font-sans, system-ui, sans-serif); font-size: 11px; color: var(--fg-muted, #8b8b8b); margin: 0; font-variant-numeric: tabular-nums; } .external-ratings__note { font-family: var(--font-serif, 'Fraunces', Georgia, serif); font-size: 13px; line-height: 1.5; color: var(--fg-secondary, #5b5b5b); margin: 0; } /* Identity strip — doc 97 §3a Pass 1, the thin line above the Face-Off */ .idstrip{display:flex;align-items:center;gap:8px;flex-wrap:wrap; margin:18px 0 2px;font-family:var(--font-ui,'Archivo',system-ui,sans-serif)} .idstrip__logo{width:22px;height:22px;object-fit:contain;flex:none} .idstrip__name{font-weight:700;font-size:15px;color:var(--fg-primary,#222)} .idstrip__record{font-size:13px;font-weight:600;color:var(--fg-secondary,#5b5b5b); font-variant-numeric:tabular-nums} .idstrip__qualifier{font-size:11px;color:var(--fg-tertiary,#8b8b8b)} /* Curated program blurb — doc 97 §3a Pass 1, moved to a History-tab drawer */ .history-blurb-drawer{margin:0 0 1.5rem;border-top:1px solid var(--stroke-default,#e4e4e1); padding-top:.6rem} .history-blurb-drawer__toggle{font:600 .82rem/1 Archivo,sans-serif;color:var(--blue,#008fd5); cursor:pointer;list-style:none;padding:.15rem 0} .history-blurb-drawer__toggle::-webkit-details-marker{display:none} .history-blurb-drawer__toggle::after{content:" ↓";font-size:.75rem} details[open]>.history-blurb-drawer__toggle::after{content:" ↑"} .history-blurb-drawer__body{margin-top:.85rem} .follow-btn{font:600 12px/1 Archivo,sans-serif;padding:6px 12px;border:1px solid var(--line,#e4e4e1); border-radius:2px;background:var(--page,#fff);color:var(--ink,#222);cursor:pointer; white-space:nowrap} .follow-btn:hover{background:var(--row,#f7f7f6)} .follow-btn[aria-pressed="true"]{background:var(--blue,#008fd5);border-color:var(--blue,#008fd5);color:#fff} /* Latest strip — plain-text explore links directly below the identity strip */ .latest{display:flex;align-items:center;gap:16px;padding:9px 18px; border-bottom:1px solid var(--stroke-default,#e4e4e1);overflow:hidden} .latest__label{font-weight:800;font-size:11px;letter-spacing:.02em; color:var(--fg-muted,#8b8b8b);flex:none;position:relative;padding-right:16px} .latest__label::after{content:"";position:absolute;right:0;top:-2px;bottom:-2px;width:1px; background:var(--stroke-default,#e4e4e1)} .latest__row{display:flex;align-items:baseline;gap:16px;flex:1;overflow-x:auto; scrollbar-width:none;-webkit-overflow-scrolling:touch} .latest__row::-webkit-scrollbar{display:none} .latest__item{display:inline-flex;align-items:baseline;gap:6px;flex:none;white-space:nowrap} .latest__row a,.latest__row .latest__fact{font-size:13px;white-space:nowrap;flex:none} .latest__row a{color:var(--fg-tertiary,#8b8b8b);font-weight:600;text-decoration:none} .latest__row a:hover{color:var(--fg-primary,#222)} .latest__row a.now{color:var(--fg-primary,#222);font-weight:700; border-bottom:2px solid var(--gold,#e5ae38);padding-bottom:1px} .latest__row .latest__fact{color:var(--fg-tertiary,#8b8b8b);font-weight:600} .latest--solo{gap:0} .latest--solo a,.latest--solo .latest__fact{font-size:13px;color:var(--fg-tertiary,#8b8b8b);font-weight:600;text-decoration:none} .latest--solo a:hover{color:var(--fg-primary,#222)} @media(max-width:640px){ .latest{gap:10px;padding:8px 14px} .latest__label{padding-right:10px} } /* The Walk-Off — bottom-of-page component, §19 */ .walkoff-rivalry{display:flex;flex-direction:column;gap:4px;margin:24px 0; padding:14px 18px;border:1px solid var(--line,#e4e4e1);border-radius:2px; background:var(--row,#f7f7f6)} .walkoff-rivalry__claim{font:400 14px/1.5 Archivo,sans-serif;color:var(--ink,#222)} .walkoff-rivalry__meta{font:400 12px/1.4 Archivo,sans-serif;color:var(--ink-3,#8b8b8b)} .walkoff-chapter-next{display:flex;flex-direction:column;gap:6px;margin:24px 0; padding:14px 18px;border:1px solid var(--line,#e4e4e1);border-radius:2px} .walkoff-chapter-next__label{font:600 11px/1 Archivo,sans-serif;letter-spacing:.04em; color:var(--ink-3,#8b8b8b)} .walkoff-chapter-next__link{font:600 16px/1.3 Fraunces,serif;color:var(--ink,#222); text-decoration:none} .walkoff-chapter-next__link:hover{color:var(--blue,#008fd5)} /* Above-fold Belief Lead — doc 97 §3a/§11 */ .ttag{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700; padding:1px 6px;border-radius:2px;vertical-align:middle;line-height:1.6; font-family:"Archivo",system-ui,sans-serif} .ttag.fact{color:#0a5a86;background:#e7f3fb} .ttag.read{color:#7a5a00;background:#faf3e0} .ttag .td{width:6px;height:6px;border-radius:50%;display:inline-block} .ttag.fact .td{background:var(--blue,#008fd5)} .ttag.read .td{background:var(--gold,#e5ae38)} .xp{border:1px solid var(--rule,#d7d7d4);border-radius:2px} .xp-btn{width:100%;text-align:left;display:flex;align-items:center;justify-content:space-between; gap:10px;background:none;border:none;padding:10px 14px; font-family:"Archivo",system-ui,sans-serif;font-size:13.5px;font-weight:600; color:var(--ink,#222);cursor:pointer;transition:background .12s ease} .xp-btn:hover{background:var(--row,#f7f7f6)} .xp-chev{font-size:15px;flex:0 0 auto;transition:transform .22s cubic-bezier(.34,1.56,.64,1); display:inline-block} .xp.open .xp-chev{transform:rotate(180deg)} .xp-body{display:grid;grid-template-rows:0fr;overflow:hidden; transition:grid-template-rows .24s ease} .xp.open .xp-body{grid-template-rows:1fr} .xp-inner{min-height:0;padding:0 14px} .xp.open .xp-inner{padding:10px 14px 14px} .hfoot{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:11.5px;line-height:1.5; color:var(--ink-3,#8b8b8b);font-family:"Archivo",system-ui,sans-serif; font-variant-numeric:tabular-nums;border-top:1px solid var(--line,#e4e4e1); padding-top:6px;margin-top:8px} .hfoot b{color:var(--ink-2,#5b5b5b);font-weight:600} .bf-lead{margin:18px 0 4px} .bf-take{font-family:var(--serif,"Fraunces",Georgia,serif);font-weight:600; font-size:clamp(24px,4vw,38px);line-height:1.1;color:var(--fg-primary,#222); margin:0 0 12px;max-width:20ch;letter-spacing:-.01em; animation:bf-slide .5s ease-out both} .bf-take .bf-ent{color:var(--accent-primary,#fc4f30)} .bf-tension{font-family:var(--font-ui,"Archivo",system-ui,sans-serif);font-size:14.5px; line-height:1.4;color:var(--fg-secondary,#5b5b5b);margin:0 0 14px;max-width:52ch; animation:bf-rise .42s ease-out .03s both} .bf-trend{display:flex;align-items:center;gap:12px;margin:0 0 16px;flex-wrap:wrap; animation:bf-rise .42s ease-out .06s both} .bf-dchip{display:inline-flex;align-items:center;gap:4px; font-family:var(--font-ui,"Archivo",system-ui,sans-serif);font-size:12px;font-weight:700; padding:3px 11px;border-radius:3px} /* Unified onto the canonical 538 palette's --green-text/--red-text (Tier 3 item 1 judgment call, 2026-07-10 -- doc 90 governs site-wide, not just the homepage; hardcoded here since the team-page token dialect has no green/red semantic variable of its own). Matches morning_read/ faceoff.py's own .fo-net-up/.fo-net-dn convention: solid token text color on a 10%-opacity tint of the same hue. */ .bf-dchip.up{color:#4f7538;background:rgba(109,144,79,.1)} .bf-dchip.down{color:#c23a20;background:rgba(252,79,48,.1)} .bf-dchip.flat{color:var(--fg-secondary,#5b5b5b);background:var(--panel,#f0f0f0)} .bf-drilldown{display:inline-block;margin-top:10px;font:600 13px/1 var(--font-ui,"Archivo",system-ui,sans-serif); color:var(--blue,#008fd5);text-decoration:none;transition:opacity .1s ease-in} .bf-drilldown:hover{opacity:.75} .bf-trend-note{font-size:11.5px;color:var(--fg-tertiary,#8b8b8b)} .bf-spark{color:var(--fg-tertiary,#8b8b8b);display:block;margin-left:auto} @media(max-width:560px){.bf-spark{margin-left:0}} .bf-strip{display:flex;flex-wrap:wrap;gap:1px; background:var(--stroke-default,#e4e4e1);border:1px solid var(--stroke-default,#e4e4e1); border-radius:3px;overflow:hidden;animation:bf-rise .42s ease-out .12s both} .bf-cell{flex:1 1 140px;background:var(--bg-0,#fff);padding:12px 16px} .bf-cell .bf-lbl{display:block;font-family:var(--font-ui,"Archivo",system-ui,sans-serif); font-size:10.5px;font-weight:700;letter-spacing:.04em; color:var(--fg-tertiary,#8b8b8b)} /* Fan-persona audit 2026-08-16 §3.1: "Grounding" and "Volatility: Chaotic" were named unprompted by 3-4 personas each as unexplained jargon (is Chaotic good or bad?). Same .gloss dotted-underline convention as recruiting_center.py -- links straight to the glossary's plain-English definition, title= gives the same answer on hover with zero clicks. */ .bf-cell .bf-lbl.gloss{text-decoration:underline;text-decoration-style:dotted; text-decoration-color:var(--fg-tertiary,#8b8b8b);text-decoration-thickness:1px; text-underline-offset:2px;color:inherit;cursor:help} .bf-cell .bf-lbl.gloss:hover{color:var(--blue,#008fd5); text-decoration-color:var(--blue,#008fd5)} .bf-cell .bf-val{font-family:var(--serif,"Fraunces",serif);font-weight:600; font-size:22px;margin:2px 0 0;line-height:1.1;font-variant-numeric:tabular-nums} .bf-cell .bf-val.bf-ground{font-family:var(--font-ui,"Archivo",system-ui,sans-serif); font-size:15px;font-weight:700;letter-spacing:-.005em;line-height:1.2} .bf-cell .bf-sub{font-size:11.5px;color:var(--fg-tertiary,#8b8b8b);margin-top:1px;line-height:1.3} /* .bf-tag (own copy of the shared honesty-tag chip) removed 2026-07-10 -- migrated to common/components.py::render_trust_tag(), same exact hex values, see the ttag rules pulled in via _SHARED_COMPONENT_CSS above. .bf-tag-mini survives as render_trust_tag()'s extra_class param. */ .ttag.bf-tag-mini{margin-top:0;font-size:9px;padding:0 4px;vertical-align:middle} .bf-vol-chip{font-weight:700;font-size:11px;color:var(--fg-secondary,#5b5b5b)} @keyframes bf-slide{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:translateX(0)}} @keyframes bf-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}} /* Program Trajectory chip — Brief §11.4 */ /* Program Trajectory Chip — Brief §11.4 */ .trajectory-chip { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 14px 18px; padding: 12px clamp(14px, 1.8vw, 20px); background: rgba(34, 34, 34, 0.025); border: 1px solid var(--stroke-subtle, rgba(34, 34, 34,0.08)); border-radius: 3px; margin-bottom: clamp(20px, 3vw, 32px); } .trajectory-chip__direction { font-family: var(--font-display, 'Archivo', 'Archivo', system-ui, sans-serif); font-size: clamp(22px, 1.8vw + 10px, 30px); font-weight: 400; line-height: 1; letter-spacing: 0.03em; text-transform: none; color: var(--accent-primary, #c9a24a); white-space: nowrap; } .trajectory-chip__direction--rising { color: #2c8f5a; } .trajectory-chip__direction--declining { color: #c95151; } .trajectory-chip__direction--volatile { color: #c98c1a; } .trajectory-chip__direction--steady { color: var(--accent-primary, #c9a24a); } .trajectory-chip__story { font-family: var(--font-serif, 'Fraunces', Georgia, serif); font-size: 14px; font-style: italic; line-height: 1.45; color: var(--fg-secondary); margin: 0; max-width: 64ch; } .trajectory-chip__spark { display: block; height: 36px; width: clamp(80px, 12vw, 160px); font-variant-numeric: tabular-nums; } .trajectory-chip__spark path { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; } .trajectory-chip__spark circle { fill: var(--accent-primary, #c9a24a); } .trajectory-chip__spark line.baseline { stroke: var(--fg-muted); stroke-dasharray: 2 3; stroke-width: 0.5; opacity: 0.5; } .trajectory-chip__glyph { width: 48px; height: 48px; object-fit: contain; opacity: 0.72; flex: none; } @media (max-width: 540px) { .trajectory-chip { grid-template-columns: auto auto 1fr; } .trajectory-chip__glyph { width: 36px; height: 36px; } .trajectory-chip__spark { display: none; } } /* Kickoff Countdown — Brief §22.1 */ /* Kickoff Countdown — Brief Part II §22.1 * One-line presence chip that anchors every team page in calendar time. */ .kickoff-countdown { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; padding: 10px clamp(14px, 1.8vw, 18px); background: rgba(34, 34, 34, 0.03); border: 1px solid var(--stroke-subtle, rgba(34, 34, 34, 0.08)); border-left: 3px solid var(--accent-primary, #c9a24a); border-radius: 3px; margin-bottom: clamp(16px, 2vw, 24px); font-variant-numeric: tabular-nums; } .kickoff-countdown__eyebrow { font-family: var(--font-sans, system-ui, sans-serif); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: none; color: var(--fg-muted); margin: 0; } .kickoff-countdown__number { font-family: var(--font-display, 'Archivo', 'Archivo', system-ui, sans-serif); font-size: clamp(24px, 2.0vw + 10px, 32px); font-weight: 400; line-height: 1; letter-spacing: 0.02em; color: var(--accent-primary, #c9a24a); margin: 0; } .kickoff-countdown__story { font-family: var(--font-serif, 'Fraunces', Georgia, serif); font-size: 13px; font-style: italic; color: var(--fg-secondary); margin: 0; } .kickoff-countdown--live { border-left-color: #d94747; } .kickoff-countdown--live .kickoff-countdown__number { color: #d94747; animation: kickoff-live-pulse 1.4s ease-in-out infinite; } @keyframes kickoff-live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } } .kickoff-countdown--gameday { border-left-color: #c98c1a; } .kickoff-countdown--gameweek { border-left-color: #2c8f5a; } .kickoff-countdown--offseason { border-left-color: rgba(34, 34, 34, 0.18); } .kickoff-countdown--offseason .kickoff-countdown__number { color: var(--fg-secondary); } .kickoff-countdown-link { display: block; color: inherit; text-decoration: none; } .kickoff-countdown-link:hover .kickoff-countdown { border-left-width: 4px; } /* Refusal component — BUILD_PLAN.md Chunk D5, FACT_SHEET_DESIGN.md's "we don't know" primitive; shared across any TeamFactSheet consumer */ .tp-refusal { display: flex; align-items: baseline; gap: 6px; padding: 10px 12px; background: var(--bg-2); border: 1px solid var(--stroke-default); border-radius: 3px; font-family: var(--font-body); } .tp-refusal__icon { color: var(--fg-subtle); font-size: var(--fs-body); line-height: 1; } .tp-refusal__text { color: var(--fg-muted); font-size: var(--fs-body); line-height: var(--lh-snug); } /* Program Peer Comparator — Brief §26 */ /* Program Peer Comparator — Brief §26 */ .peer-comparator { display: grid; gap: clamp(8px, 1.2vw, 14px); padding: clamp(14px, 1.8vw, 22px) clamp(16px, 2.0vw, 26px); background: rgba(34, 34, 34, 0.025); border: 1px solid var(--stroke-subtle, rgba(34, 34, 34,0.08)); border-radius: 3px; margin-bottom: clamp(20px, 3vw, 32px); } .peer-comparator__eyebrow { font-family: var(--sans, "Archivo", system-ui, sans-serif); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: none; color: var(--fg-muted); margin: 0; } .peer-comparator__title { font-family: var(--sans, "Archivo", system-ui, sans-serif); font-size: clamp(20px, 1.5vw + 9px, 26px); font-weight: 400; line-height: 1; letter-spacing: 0.02em; text-transform: none; color: var(--fg-primary); margin: 0; } .peer-comparator__peers { display: grid; gap: 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); } .peer-comparator__peer { display: grid; gap: 4px; padding: 10px 12px; background: rgba(34, 34, 34, 0.02); border: 1px solid var(--stroke-subtle, rgba(34, 34, 34,0.08)); border-left: 3px solid var(--team-accent, #e5ae38); border-radius: 3px; text-decoration: none; color: inherit; transition: opacity .1s ease-in; } .peer-comparator__peer:hover { opacity: .93; } .peer-comparator__peer-name { font-family: var(--sans, "Archivo", system-ui, sans-serif); font-size: 14px; font-weight: 700; color: var(--fg-primary); } .peer-comparator__peer-reason { font-family: var(--serif, "Fraunces", Georgia, serif); font-size: 11px; font-style: italic; color: var(--fg-secondary); line-height: 1.35; } .peer-comparator__caveat { font-family: var(--sans, "Archivo", system-ui, sans-serif); font-size: 10px; font-style: italic; color: var(--fg-muted); margin: 0; opacity: 0.7; } @media (max-width: 640px) { .peer-comparator__peers { grid-template-columns: 1fr; } } .hecho{margin:0 0 24px;border:1px solid rgba(34,34,34,.1);border-radius:4px;padding:18px 20px 16px;background:#fff} .hecho__eye{font-size:10px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:#6d6d68;margin:0} .hecho__head{font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:clamp(17px,2vw,21px);line-height:1.25; margin:6px 0 3px;color:#1c1c1a;text-wrap:balance} .hecho__sub{font-size:12.5px;color:#6d6d68;margin:0 0 14px} .hecho__list{display:flex;flex-direction:column;gap:2px} .hecho__row{display:grid;grid-template-columns:1fr 84px auto;gap:12px;align-items:center; padding:9px 2px;border-top:1px solid rgba(34,34,34,.07)} .hecho__who{min-width:0} .hecho__who a{font-family:"Fraunces",serif;font-size:15.5px;font-weight:600;color:#1c1c1a;text-decoration:none; border-bottom:1px solid rgba(34,34,34,.16)} .hecho__who a:hover{border-bottom-color:#1c1c1a} .hecho__yrs{font-size:12px;color:#6d6d68;font-variant-numeric:tabular-nums} .hecho__spark{width:84px;height:26px;display:block} .hecho__verdict{font-size:11.5px;font-weight:700;letter-spacing:.02em;text-align:right;white-space:nowrap} .hecho__verdict.bad{color:#c2371c}.hecho__verdict.good{color:#3a7d34}.hecho__verdict.mid{color:#6d6d68} .hecho__note{font-size:11px;color:#8b8b8b;margin:12px 0 0;line-height:1.5} /* Wrapped stack — Brief §21.3 */ /* Wrapped stack — Brief §21.3 * Vertical card stack, each card claims its own viewport vibe. */ .wrapped-stack { display: grid; gap: clamp(10px, 1.4vw, 18px); padding: clamp(18px, 2.4vw, 28px) clamp(18px, 2.6vw, 32px); background: linear-gradient(180deg, rgba(34, 34, 34,0.03), rgba(34, 34, 34,0.0)); border: 1px solid var(--stroke-default, rgba(34, 34, 34,0.10)); border-radius: 3px; margin-bottom: clamp(20px, 3vw, 32px); } .wrapped-stack__header { display: grid; gap: 4px; } .wrapped-stack__eyebrow { font-family: var(--font-sans, system-ui, sans-serif); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: none; color: var(--fg-muted); margin: 0; } .wrapped-stack__title { font-family: var(--font-display, 'Archivo', 'Archivo', system-ui, sans-serif); font-size: clamp(28px, 2.5vw + 12px, 42px); font-weight: 400; line-height: 1; letter-spacing: 0.03em; text-transform: none; color: var(--fg-primary); margin: 0; } .wrapped-stack__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: clamp(8px, 1.2vw, 14px); } .wrapped-stack__card { display: grid; gap: 6px; padding: 14px 16px; background: rgba(34, 34, 34, 0.025); border: 1px solid var(--stroke-subtle, rgba(34, 34, 34,0.08)); border-left: 3px solid var(--accent-primary, #c9a24a); border-radius: 3px; } .wrapped-stack__card[data-card-kind="win"] { border-left-color: #2c8f5a; } .wrapped-stack__card[data-card-kind="loss"] { border-left-color: #c95151; } .wrapped-stack__card[data-card-kind="rivalry"] { border-left-color: #c98c1a; } .wrapped-stack__card[data-card-kind="trajectory"]{ border-left-color: var(--accent-secondary, var(--accent-primary, #c9a24a)); } .wrapped-stack__card[data-card-kind="forward"] { border-left-color: #5a7fc9; } .wrapped-stack__card[data-card-kind="boom_bust"] { border-left-color: #9a5ec9; } .wrapped-stack__card-kind { font-family: var(--font-sans, system-ui, sans-serif); font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: none; color: var(--fg-muted); } .wrapped-stack__card-headline { font-family: var(--font-display, 'Archivo', 'Archivo', system-ui, sans-serif); font-size: clamp(18px, 1.2vw + 8px, 22px); font-weight: 400; line-height: 1.05; letter-spacing: 0.02em; text-transform: none; color: var(--fg-primary); } .wrapped-stack__card-story { font-family: var(--font-serif, 'Fraunces', Georgia, serif); font-size: 13px; font-style: italic; line-height: 1.45; color: var(--fg-secondary); } /* Fanbase Health Index — Brief §11.1 */ /* Fanbase Health Index — Brief §11.1 */ .fanbase-health { display: grid; gap: clamp(10px, 1.2vw, 14px); padding: clamp(14px, 1.8vw, 20px) clamp(16px, 2.0vw, 24px); background: rgba(34, 34, 34, 0.025); border: 1px solid var(--stroke-subtle, rgba(34, 34, 34, 0.08)); border-radius: 3px; margin-bottom: clamp(20px, 3vw, 32px); font-variant-numeric: tabular-nums; } .fanbase-health__header { display: grid; gap: 4px; } .fanbase-health__eyebrow { font-family: var(--font-sans, system-ui, sans-serif); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: none; color: var(--fg-muted); margin: 0; } .fanbase-health__band { font-family: var(--font-display, 'Archivo', 'Archivo', system-ui, sans-serif); font-size: clamp(22px, 1.8vw + 10px, 30px); font-weight: 400; line-height: 1; letter-spacing: 0.03em; text-transform: none; color: var(--fg-primary); margin: 0; } .fanbase-health__band--declining { color: #c95151; } .fanbase-health__band--stable { color: var(--accent-primary, #c9a24a); } .fanbase-health__band--growing { color: #2c8f5a; } .fanbase-health__band--surging { color: #c98c1a; } .fanbase-health__awaiting-art { display: flex; justify-content: center; padding: 8px 0 4px; } .fanbase-health__awaiting-art img { width: 120px; height: 120px; object-fit: contain; opacity: 0.72; } .fanbase-health__gauge { position: relative; height: 14px; background: rgba(34, 34, 34, 0.06); border-radius: 3px; overflow: hidden; } .fanbase-health__gauge-fill { position: absolute; inset: 0; width: calc(var(--health-score, 50) * 1%); background: linear-gradient(90deg, #c95151 0%, var(--accent-primary, #c9a24a) 50%, #2c8f5a 100%); border-radius: 3px; transition: width 0.4s ease; } .fanbase-health__gauge-needle { position: absolute; top: -3px; bottom: -3px; left: calc(var(--health-score, 50) * 1%); width: 3px; background: var(--fg-primary); border-radius: 2px; transform: translateX(-50%); } .fanbase-health__legend { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; font-family: var(--font-sans, system-ui, sans-serif); font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: none; color: var(--fg-muted); } .fanbase-health__legend span { text-align: center; } .fanbase-health__legend span:nth-child(1) { text-align: left; } .fanbase-health__legend span:nth-child(4) { text-align: right; } .fanbase-health__components { display: grid; gap: 4px; padding-top: 4px; border-top: 1px dashed var(--stroke-subtle, rgba(34, 34, 34, 0.08)); font-family: var(--font-serif, 'Fraunces', Georgia, serif); font-size: 12px; font-style: italic; color: var(--fg-secondary); } .fanbase-health__components-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 8px; } .fanbase-health__components-row strong { font-style: normal; color: var(--fg-primary); font-family: var(--font-sans, system-ui, sans-serif); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: none; } .fanbase-health__components-row em { font-style: normal; color: var(--accent-primary, #c9a24a); font-family: var(--font-mono, monospace); font-size: 12px; font-weight: 600; } /* Experience module — doc 97 §11 */ /* Experience module — doc 97 §11 */ .exp-section{padding:20px 0 8px} .exp-eyebrow{font:700 11px/1 var(--font-ui,'Archivo',system-ui);letter-spacing:.06em;color:var(--fg-tertiary,#8b8b8b);margin-bottom:8px} .exp-phrase{font:400 16px/1.55 var(--font-ui,'Archivo',system-ui);color:var(--fg-secondary,#5b5b5b);margin:0 0 12px;max-width:60ch} .exp-axes{display:flex;flex-wrap:wrap;gap:6px} .exp-axis{font:600 11px/1 var(--font-ui,'Archivo');letter-spacing:.04em;color:var(--fg-secondary,#5b5b5b);background:var(--panel,#f0f0f0);padding:4px 8px;border-radius:3px} /* Stat Ledger fingerprint + full drawer (doc 97 P6) */ /* ── Stat Ledger (doc 97 P6) ── */ .stat-ledger{margin:.5rem 0 1.5rem;padding:1rem 1.25rem;border-radius:3px; background:var(--bg-card,#f0f0f0);border-left:4px solid var(--team-accent,#aaa)} .sl-eyebrow{font:700 10px/1 Archivo,sans-serif;letter-spacing:.08em; color:var(--fg-tertiary,#8b8b8b);margin-bottom:.85rem} /* Fingerprint rows — label(+triplet) | bar | value, doc 97 §10a grammar */ .sl-fp-row{display:grid;grid-template-columns:11rem 1fr 4rem; align-items:center;gap:.5rem .75rem;padding:.3rem 0} .sl-fp-row+.sl-fp-row{border-top:1px solid rgba(0,0,0,.04)} .sl-fp-label{display:flex;flex-direction:column;min-width:0} .sl-fp-lbl{font:500 .8rem/1.2 Archivo,sans-serif;color:var(--fg-secondary,#555)} /* Crux row (Chunk F1) -- the stat the page's own tension turns on. */ .sl-fp-row--crux{border-left:2px solid var(--team-accent,#aaa);padding-left:.5rem;margin-left:-.5rem} .sl-fp-crux-tag{font:700 .62rem/1.4 Archivo,sans-serif;letter-spacing:.03em; color:var(--team-accent,#888);margin-bottom:.05rem} .sl-fp-val{font:700 .85rem/1 Archivo,sans-serif;color:var(--fg-primary,#222);text-align:right; font-variant-numeric:tabular-nums} /* The context triplet — "#rank / cohort · pctth pct" — under every label, matching player_pages/box_savant.py's exactly (doc 97 §10a-B). */ .sl-triplet{display:block;font:600 .64rem/1.3 Archivo,sans-serif; color:var(--fg-tertiary,#8b8b8b);letter-spacing:.01em;white-space:nowrap; overflow:hidden;text-overflow:ellipsis} /* Bar — diverging red->neutral->blue scale with a pinned marker, now the shared theme/percentile_bar.py component (render_percentile_track(), .wcfb-percentile-bar__track/__fill/__dot — Phase 3 item 13 consolidation, 2026-08-06) instead of this file's own sl-bar-track/-pin gradient. Percentile position is always goodness-oriented (see _bar_html docstring), so the fill never needs to flip direction. Team pages don't load the shared component's stylesheet (theme/assets/stats_table.css, shipped as /assets/stats_table.css and linked in _global_link_tags() — team_pages/renderer.py explicitly bypasses that function and inlines its own self-contained CSS bundle instead, see renderer.py's "doesn't go through _global_link_tags()" comment). So this file carries its own copy of the base track/fill/dot rules the shared markup needs — same class names and colors as theme/assets/stats_table.css (538 palette: #fc4f30/#e4e4e1/#008fd5, matching this file's own pre-consolidation gradient) so the two stay visually identical even though they're two separate stylesheets. The compound selectors below (two classes required) make the height/sizing overrides win regardless of rule order within this bundle. */ .wcfb-percentile-bar__track{position:relative;height:4px;border-radius:2px; background:rgba(0,0,0,.12);overflow:hidden} .wcfb-percentile-bar__fill{position:absolute;left:0;top:0;height:100%; border-radius:2px} .wcfb-percentile-bar__fill[data-pct-low="true"]{background:#fc4f30} .wcfb-percentile-bar__fill[data-pct-medium="true"]{background:#e4e4e1} .wcfb-percentile-bar__fill[data-pct-high="true"]{background:#008fd5} .wcfb-percentile-bar__dot{position:absolute;top:50%;width:14px;height:14px; background:#fff;border:2px solid #222;border-radius:50%; transform:translate(-50%,-50%);transition:left .4s cubic-bezier(.34,1.56,.64,1)} .wcfb-percentile-bar__dot--unknown{background:#fff;border-color:#bbb} .wcfb-percentile-bar__track.sl-bar-track{height:8px;overflow:visible;min-width:60px} .wcfb-percentile-bar__track.sl-bar-track--tall{height:12px} /* Per-game toggle */ .sl-toggle-row{display:flex;gap:.35rem;margin:.75rem 0 0} .sl-pg-btn{font:600 .7rem/1 Archivo,sans-serif;border:1px solid var(--stroke-default,#e4e4e1); background:var(--page,#fff);color:var(--fg-secondary,#555);border-radius:2px; padding:.25rem .55rem;cursor:pointer;transition:background .15s,color .15s} .sl-pg-btn.sl-pg-active{background:var(--blue,#008fd5);color:#fff;border-color:var(--blue,#008fd5)} /* 3-way normalization (doc 97 W8): Total (default) / Per game / Per play. Per-play (.sl-pp) only exists on rows _row_value_strs() gave one to (yardage stats) — everything else has no .sl-pp span to reveal, so switching to Per-play mode on a counting-stat row just shows nothing extra, never a wrong number. */ .sl-abs{display:inline} .sl-pg,.sl-pp{display:none;font-variant-numeric:tabular-nums} .sl-pg-sfx,.sl-pp-sfx{display:none;color:var(--fg-tertiary,#8b8b8b);font-weight:400;font-size:.7rem} .stat-ledger.sl-mode-per-game .sl-abs,.stat-ledger.sl-mode-per-play .sl-abs{display:none} .stat-ledger.sl-mode-per-game .sl-pg,.stat-ledger.sl-mode-per-game .sl-pg-sfx{display:inline} /* Peer-set toggle (doc 97 W8, 2026-07-08): FBS / P4 / Conference / CFP Era. Independent of the Total/Per-game/Per-play toggle above -- this swaps which rank/bar/triplet variant is visible, never the value spans, so the two toggles compose without interference (see _peer_variants). */ .sl-peer-toggle-row{margin-top:.35rem} .sl-peer-btn{font:600 .7rem/1 Archivo,sans-serif;border:1px solid var(--stroke-default,#e4e4e1); background:var(--page,#fff);color:var(--fg-secondary,#555);border-radius:2px; padding:.25rem .55rem;cursor:pointer;transition:background .15s,color .15s} .sl-peer-btn.sl-peer-active{background:var(--blue,#008fd5);color:#fff;border-color:var(--blue,#008fd5)} /* Each stat renders one .sl-peer-variant per peer set it can honestly answer (fbs always; p4/conf/cfp only when that row has real data — see _peer_variants). display:contents on the active one keeps the wrapper out of the CSS grid/flow entirely, so toggling never disturbs .sl-row's grid layout or .sl-name's stacked triplet -- only the real .sl-bar-track / .sl-triplet inside participates. */ .sl-peer-variant{display:none} .stat-ledger.sl-peer-fbs .sl-peer-variant[data-peer="fbs"]{display:contents} .stat-ledger.sl-peer-p4 .sl-peer-variant[data-peer="p4"]{display:contents} .stat-ledger.sl-peer-conf .sl-peer-variant[data-peer="conf"]{display:contents} .stat-ledger.sl-peer-cfp .sl-peer-variant[data-peer="cfp"]{display:contents} /* A row with no variant for the active peer set (e.g. a stat with no CFP-era history yet) shows its value with no bar/triplet at all -- honest omission, never a fabricated or stale-peer-set number. */ .stat-ledger.sl-mode-per-play .sl-pp,.stat-ledger.sl-mode-per-play .sl-pp-sfx{display:inline} /* Ledger sub-tabs (doc 97 W8) — real panes, not a flat scroll */ .sl-subtabs{display:flex;gap:2px;flex-wrap:wrap;border-bottom:1px solid var(--stroke-default,#e4e4e1); margin-bottom:.75rem} .sl-subtab{font:600 .72rem/1 Archivo,sans-serif;color:var(--fg-secondary,#555); background:none;border:none;border-bottom:2px solid transparent; padding:.4rem .6rem;cursor:pointer;transition:color .12s} .sl-subtab.sl-subtab-active{color:var(--accent-primary,#fc4f30); border-bottom-color:var(--accent-primary,#fc4f30)} .sl-subtab:hover:not(.sl-subtab-active){opacity:.8} /* Drawer */ .sl-drawer{margin-top:.85rem;border-top:1px solid var(--stroke-default,#e4e4e1);padding-top:.6rem} .sl-drawer-toggle{font:600 .78rem/1 Archivo,sans-serif;color:var(--blue,#008fd5); cursor:pointer;list-style:none;padding:.15rem 0; display:flex;align-items:center;gap:.35rem} .sl-drawer-toggle::after{content:"↓";font-size:.7rem;transition:transform .2s} details[open] .sl-drawer-toggle::after{transform:rotate(180deg)} .sl-drawer-toggle::-webkit-details-marker{display:none} .sl-drawer-body{margin-top:.7rem} .sl-section{margin-bottom:.85rem} .sl-sec-hdr{font:700 9.5px/1 Archivo,sans-serif;letter-spacing:.07em; color:var(--fg-tertiary,#8b8b8b); border-bottom:1px solid var(--stroke-default,#e4e4e1); padding-bottom:.25rem;margin-bottom:.35rem} .sl-pbp-note{font-weight:400;letter-spacing:0;text-transform:none;color:var(--fg-tertiary,#8b8b8b)} /* Full-ledger rows — label(+triplet) | bar | value (doc 97 §10a triplet, no separate rank column — the triplet under the label already carries it) */ .sl-row{display:grid;grid-template-columns:10.5rem 1fr 5.5rem; align-items:center;gap:.4rem .6rem;padding:.22rem 0} .sl-name{display:block;font:400 .76rem/1.3 Archivo,sans-serif;color:var(--fg-secondary,#555)} .sl-val{font:500 .75rem/1 Archivo,sans-serif;color:var(--fg-primary,#222); text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap} .sl-foot{font:400 10px/1.4 Archivo,sans-serif;color:var(--fg-tertiary,#8b8b8b); margin:.75rem 0 0} /* Team-vs-Opponent mirrored row (doc 97 §10b) — one stat, Team + Opp bars stacked beneath a shared label, instead of two separate sections. */ .sl-mrow{padding:.35rem 0;border-top:1px solid rgba(0,0,0,.04)} .sl-mrow-name{display:block;font:600 .76rem/1.3 Archivo,sans-serif; color:var(--fg-primary,#222);margin-bottom:.2rem} .sl-mrow-side{display:grid;grid-template-columns:2.6rem 1fr 6rem; align-items:center;gap:.4rem .6rem;padding:.1rem 0} .sl-mrow-tag{font:700 .64rem/1 Archivo,sans-serif;letter-spacing:.04em; color:var(--fg-tertiary,#8b8b8b)} .sl-mrow-valwrap{display:flex;flex-direction:column;align-items:flex-end} /* ── Situational small-multiples (doc 97 P6) ── */ .sit-pair-label{font:600 .72rem/1 Archivo,sans-serif;color:var(--fg-secondary,#555); margin:.45rem 0 .2rem;letter-spacing:.01em} .sit-pair{display:flex;flex-direction:column;gap:.15rem;margin-bottom:.5rem} .sit-pair-row{display:grid;grid-template-columns:2.2rem 1fr 3rem 3rem; align-items:center;gap:.35rem .5rem} .sit-side{font:700 .68rem/1 Archivo,sans-serif;color:var(--fg-tertiary,#8b8b8b); letter-spacing:.04em} .sit-pct{font:600 .75rem/1 Archivo,sans-serif;color:var(--fg-primary,#222); text-align:right;font-variant-numeric:tabular-nums} .sit-single-row{display:grid;grid-template-columns:9.5rem 1fr 5.5rem; align-items:center;gap:.35rem .5rem;padding:.22rem 0;margin-bottom:.15rem} /* Turnover margin chip */ .sit-chip{font:700 .75rem/1 Archivo,sans-serif;text-align:right; font-variant-numeric:tabular-nums;color:var(--fg-secondary,#555)} .sit-chip--pos{color:var(--green,#6d904f)} .sit-chip--neg{color:var(--red,#fc4f30)} /* The triplet doesn't fit a column in these compact rows — bump it to its own full-width line below (grid auto-flow pushes an overlapping span to the next row automatically). */ .sit-pair-row .sl-triplet,.sit-single-row .sl-triplet{grid-column:1/-1;margin-top:-.1rem} @media(max-width:480px){ .sl-fp-row{grid-template-columns:8rem 1fr 3.5rem;gap:.4rem .5rem} .sl-row{grid-template-columns:7.5rem 1fr 4.5rem} .sl-mrow-side{grid-template-columns:2.2rem 1fr 4.5rem} .sit-pair-row{grid-template-columns:1.8rem 1fr 2.8rem 2.5rem} .sit-single-row{grid-template-columns:7.5rem 1fr 3.5rem} } /* Scheme Identity claim cards — specs/18 Phase 1 (Team Closer/Boom-vs-Grind/fragility) */ .chart-card { margin: 0 0 1.5rem; padding: 0; border: 0; } .chart-card__head { margin-bottom: .6rem; } .chart-card__eyebrow { margin: 0 0 .2rem; font-size: .68rem; letter-spacing: .14em; text-transform: none; font-weight: 700; color: var(--chart-card-eyebrow, var(--fg-muted, #7a7a7a)); } .chart-card__headline { margin: 0; font-size: 1.18rem; line-height: 1.2; font-weight: 700; color: var(--chart-card-fg, var(--fg, #1a1a1a)); } .chart-card__lede { margin: .25rem 0 0; font-size: .9rem; line-height: 1.45; color: var(--chart-card-muted, var(--fg-secondary, #555)); } .chart-card__body { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "ylabel plot" ". xlabel"; align-items: center; gap: .35rem .5rem; } .chart-card__plot { grid-area: plot; position: relative; min-width: 0; } .chart-card__plot > svg { max-width: 100%; height: auto; display: block; } .chart-card__overlay { position: absolute; inset: 0; pointer-events: none; } .chart-card__overlay > svg { width: 100%; height: 100%; display: block; } .chart-card__ylabel { grid-area: ylabel; writing-mode: vertical-rl; transform: rotate(180deg); font-size: .68rem; letter-spacing: .1em; text-transform: none; color: var(--chart-card-muted, var(--fg-muted, #7a7a7a)); white-space: nowrap; } .chart-card__xlabel { grid-area: xlabel; text-align: center; font-size: .68rem; letter-spacing: .1em; text-transform: none; color: var(--chart-card-muted, var(--fg-muted, #7a7a7a)); } .chart-card__source { margin-top: .5rem; font-size: .72rem; line-height: 1.4; color: var(--chart-card-muted, var(--fg-muted, #7a7a7a)); } .chart-card__source-label { text-transform: none; letter-spacing: .1em; font-weight: 700; margin-right: .35rem; } @media (max-width: 360px) { .chart-card__body { grid-template-columns: 1fr; grid-template-areas: "plot" "xlabel"; } .chart-card__ylabel { display: none; } } .qs-svg{width:100%;height:auto;display:block} .qs-panel{fill:var(--panel,#f0f0f0)} .qs-median{stroke:#ffffff;stroke-width:1.5} .qs-quadrant-label{font-family:"Archivo",system-ui,sans-serif;font-size:12px;font-weight:600; fill:var(--ink-3,#8b8b8b);paint-order:stroke fill;stroke:var(--panel,#f0f0f0); stroke-width:3.5px;stroke-linejoin:round} .qs-dot-context{opacity:.6;stroke:var(--panel,#f0f0f0);stroke-width:1.4} .qs-dot-focal{stroke:var(--panel,#f0f0f0);stroke-width:2.5} /* Identity rides the colored dot, not the type: #fc4f30 as 13px text is 3.3:1 on white. The label stays ink and the mark beside it carries the team color. */ .qs-focal-label{font-family:"Archivo",system-ui,sans-serif;font-size:13px;font-weight:700; fill:var(--ink,#222);paint-order:stroke fill;stroke:var(--panel,#f0f0f0); stroke-width:4px;stroke-linejoin:round} .qs-axis-label{font-family:"Archivo",system-ui,sans-serif;font-size:11px;fill:var(--ink-3,#8b8b8b)} /* Hover layer — sharp white box, 1px rule border, opacity as the only signal (doc 90 §3.6 + motion table). No JS: :hover on the transparent hit target. */ .qs-hit-target{fill:none;pointer-events:all} .qs-tip{opacity:0;pointer-events:none;transition:opacity .1s ease-in} .qs-hit:hover .qs-tip{opacity:1} .qs-tip-box{fill:#ffffff;stroke:var(--rule,#d7d7d4);stroke-width:1;rx:2} .qs-tip-name{font-family:"Archivo",system-ui,sans-serif;font-size:12.5px;font-weight:700; fill:var(--ink,#222)} .qs-tip-detail{font-family:"Archivo",system-ui,sans-serif;font-size:11px;font-weight:500; fill:var(--ink-2,#5b5b5b)} .db-svg{width:100%;height:auto;display:block} .db-conn{stroke:var(--rule,#d7d7d4);stroke-width:2} .db-taper{fill:var(--rule,#d7d7d4)} .db-tick{stroke:var(--rule,#d7d7d4);stroke-width:1;stroke-dasharray:2 2} .db-band{stroke-dasharray:3 3;stroke-width:1} .db-lab{font-family:"Archivo",system-ui,sans-serif;font-size:11.5px;font-weight:600;fill:var(--ink,#222)} .db-end{font-family:"Archivo",system-ui,sans-serif;font-size:10.5px;fill:var(--ink-3,#8b8b8b)} .db-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} .dlt-svg{width:100%;height:100%;display:block} .dlt-grid{stroke:rgba(0,0,0,.08);stroke-width:1} .dlt-axis{font-family:"Archivo",system-ui,sans-serif;font-size:10px;fill:var(--ink-2,#5b5b5b)} .dlt-line{fill:none;stroke-width:2.25;stroke-linecap:round;stroke-linejoin:round} .dlt-line-raw{stroke-width:2;stroke-dasharray:4 3} .dlt-end-lab{font-family:"Archivo",system-ui,sans-serif;font-size:11px;font-weight:700} .scheme-identity-claims{display:grid;gap:1rem;margin-top:.5rem} .si-card-group{display:flex;flex-direction:column} .si-table-fallback{margin-top:.5rem;font-family:"Archivo",system-ui,sans-serif;font-size:13px} .si-table-fallback summary{cursor:pointer;color:var(--ink-2,#5b5b5b);font-weight:600} .si-table-fallback table{width:100%;border-collapse:collapse;margin-top:.5rem;font-size:12.5px} .si-table-fallback th,.si-table-fallback td{text-align:left;padding:4px 8px;border-bottom:1px solid var(--line,#e4e4e1)} .si-table-fallback th{color:var(--ink-2,#5b5b5b);font-weight:600} /* Mobile gate (specs/18 Phase 1): below md, the table view leads and the dense quadrant-scatter SVG is secondary — 130+ context dots at 320px is unreadable regardless of font-size tweaks. Reorder is scoped to each .si-card-group (flex column) so it flips locally without disturbing the top-to-bottom sequence of the three claim cards. */ @media (max-width: 640px) { .si-card-group .si-chart-slot { order: 2; margin-top: .5rem; } .si-card-group .si-table-fallback { order: 1; } .si-card-group .si-table-fallback[open] summary { margin-bottom: .25rem; } } /* National Spotlight — specs/18 Phase 3 */ /* National Spotlight card — specs/18 Phase 3 */ .ns{border:1px solid var(--line,#e4e4e1);border-left:4px solid var(--team,#008fd5); border-radius:3px;padding:14px 16px 12px;margin:0 0 16px; animation:riseIn .35s ease-out both;transition:opacity .1s ease-in} .ns-eyebrow{font:700 10px/1 var(--font-ui,'Archivo',system-ui);letter-spacing:.07em; color:var(--fg-tertiary,#8b8b8b);margin:0 0 8px} .ns-opener{font:600 16px/1.35 'Fraunces',Georgia,serif;color:var(--ink,#222);margin:0 0 4px} .ns-sub{font:400 12.5px/1.4 var(--font-ui,'Archivo',system-ui); color:var(--fg-secondary,#5b5b5b);margin:0} @media(max-width:460px){.ns-opener{font-size:14.5px}} @media(prefers-reduced-motion:reduce){.ns{animation:none}} /* Weather identity (venue texture) — specs/18 Phase 4 */ /* Weather identity (venue texture) — specs/18 Phase 4 */ .wxid{border:1px solid var(--line,#e4e4e1);border-left:4px solid var(--team,#008fd5); border-radius:3px;padding:14px 16px 12px;margin:0 0 16px; animation:riseIn .35s ease-out both;transition:opacity .1s ease-in} .wxid-eyebrow{font:700 10px/1 var(--font-ui,'Archivo',system-ui);letter-spacing:.07em; color:var(--fg-tertiary,#8b8b8b);margin:0 0 8px} .wxid-body{font:400 14px/1.4 var(--font-ui,'Archivo',system-ui);color:var(--ink,#222); margin:0 0 6px} .wxid-honesty{font:400 10px/1.4 var(--font-ui,'Archivo',system-ui); color:var(--fg-tertiary,#8b8b8b);margin:0} @media(prefers-reduced-motion:reduce){.wxid{animation:none}} /* Turnover luck — specs/18 Phase 5 */ /* Turnover luck — specs/18 Phase 5 */ .tol{border:1px solid var(--line,#e4e4e1);border-left:4px solid var(--team,#008fd5); border-radius:3px;padding:14px 16px 12px;margin:0 0 16px; animation:riseIn .35s ease-out both;transition:opacity .1s ease-in} .tol-eyebrow{font:700 10px/1 var(--font-ui,'Archivo',system-ui);letter-spacing:.07em; color:var(--fg-tertiary,#8b8b8b);margin:0 0 8px} .tol-body{font:600 15px/1.4 'Fraunces',Georgia,serif;color:var(--ink,#222);margin:0 0 6px} .tol-honesty{font:400 10px/1.4 var(--font-ui,'Archivo',system-ui); color:var(--fg-tertiary,#8b8b8b);margin:0} @media(prefers-reduced-motion:reduce){.tol{animation:none}} /* Takeaway conversion — companion to turnover luck */ /* Takeaway conversion — companion to turnover luck */ .tkc{border:1px solid var(--line,#e4e4e1);border-left:4px solid var(--team,#008fd5); border-radius:3px;padding:14px 16px 12px;margin:0 0 16px; animation:riseIn .35s ease-out both;transition:opacity .1s ease-in} .tkc-eyebrow{font:700 10px/1 var(--font-ui,'Archivo',system-ui);letter-spacing:.07em; color:var(--fg-tertiary,#8b8b8b);margin:0 0 8px} .tkc-body{font:600 15px/1.4 'Fraunces',Georgia,serif;color:var(--ink,#222);margin:0 0 6px} .tkc-honesty{font:400 10px/1.4 var(--font-ui,'Archivo',system-ui); color:var(--fg-tertiary,#8b8b8b);margin:0} @media(prefers-reduced-motion:reduce){.tkc{animation:none}} /* Penalty discipline — companion to turnover luck */ /* Penalty discipline — companion to turnover luck */ .pdi{border:1px solid var(--line,#e4e4e1);border-left:4px solid var(--team,#008fd5); border-radius:3px;padding:14px 16px 12px;margin:0 0 16px; animation:riseIn .35s ease-out both;transition:opacity .1s ease-in} .pdi-eyebrow{font:700 10px/1 var(--font-ui,'Archivo',system-ui);letter-spacing:.07em; color:var(--fg-tertiary,#8b8b8b);margin:0 0 8px} .pdi-body{font:600 15px/1.4 'Fraunces',Georgia,serif;color:var(--ink,#222);margin:0 0 6px} .pdi-honesty{font:400 10px/1.4 var(--font-ui,'Archivo',system-ui); color:var(--fg-tertiary,#8b8b8b);margin:0} @media(prefers-reduced-motion:reduce){.pdi{animation:none}} /* Ballot spread — AP voter spread, companion to turnover luck / penalty discipline */ /* Ballot spread — companion to turnover luck / penalty discipline */ .bsp{border:1px solid var(--line,#e4e4e1);border-left:4px solid var(--team,#008fd5); border-radius:3px;padding:14px 16px 12px;margin:0 0 16px; animation:riseIn .35s ease-out both;transition:opacity .1s ease-in} .bsp-eyebrow{font:700 10px/1 var(--font-ui,'Archivo',system-ui);letter-spacing:.07em; color:var(--fg-tertiary,#8b8b8b);margin:0 0 8px} .bsp-body{font:600 15px/1.4 'Fraunces',Georgia,serif;color:var(--ink,#222);margin:0 0 6px} .bsp-honesty{font:400 10px/1.4 var(--font-ui,'Archivo',system-ui); color:var(--fg-tertiary,#8b8b8b);margin:0} @media(prefers-reduced-motion:reduce){.bsp{animation:none}} /* Player Stats Table — Tape tab individual stats (doc 97 P6) */ /* Player Stats Table — Tape tab (doc 97 P6) */ .pst-section{margin:.5rem 0 1.5rem} .pst-eyebrow{font:700 10px/1 Archivo,sans-serif;letter-spacing:.08em; color:var(--fg-tertiary,#8b8b8b);margin-bottom:.6rem} /* Inner tab bar */ .pst-tabs{display:flex;border-bottom:2px solid var(--stroke-default,#e4e4e1); margin-bottom:.9rem;overflow-x:auto;scrollbar-width:none} .pst-tabs::-webkit-scrollbar{display:none} .pst-tab{flex:none;padding:7px 16px;font:600 12.5px/1 Archivo,sans-serif; color:var(--fg-secondary,#5b5b5b);background:none;border:none; border-bottom:3px solid transparent;cursor:pointer;white-space:nowrap; margin-bottom:-2px;transition:color .1s,border-color .1s} .pst-tab--active{color:var(--accent-primary,#fc4f30); border-bottom-color:var(--accent-primary,#fc4f30)} .pst-tab:hover:not(.pst-tab--active){opacity:.75} /* Position group */ .pst-group{margin-bottom:1.4rem} .pst-group-hdr{font:700 9.5px/1 Archivo,sans-serif;letter-spacing:.07em; color:var(--fg-tertiary,#8b8b8b); border-bottom:1px solid var(--stroke-default,#e4e4e1); padding:.25rem 0;margin-bottom:.35rem} /* Horizontal-scroll wrapper */ .pst-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch} .pst-table{border-collapse:collapse;width:100%;min-width:480px; font:400 .775rem/1.3 Archivo,system-ui,sans-serif} /* Headers */ .pst-th{font:700 .68rem/1 Archivo,sans-serif;letter-spacing:.03em; color:var(--fg-tertiary,#8b8b8b);padding:.3rem .5rem; border-bottom:2px solid var(--stroke-default,#e4e4e1); white-space:nowrap;text-align:right;background:var(--bg-0,#fff)} .pst-name-col{text-align:left!important;position:sticky;left:0; background:var(--bg-0,#fff)!important;z-index:2; min-width:120px;max-width:175px} .pst-sortable{cursor:pointer;user-select:none} .pst-sortable:hover{color:var(--fg-primary,#222)} .pst-th--sorted{color:var(--accent-primary,#fc4f30)!important} /* Data rows */ .pst-row{border-bottom:1px solid rgba(0,0,0,.05);transition:background .1s} .pst-row:hover{background:rgba(0,0,0,.02)} .pst-leader td,.pst-leader .pst-name-col{background:rgba(0,143,213,.035)!important} .pst-leader .pst-name-col{border-left:3px solid var(--blue,#008fd5)} .pst-td{padding:.38rem .5rem;text-align:right;white-space:nowrap; color:var(--fg-primary,#222);vertical-align:top; font-variant-numeric:tabular-nums} .pst-td.pst-name-col{text-align:left;position:sticky;left:0; background:var(--bg-0,#fff);z-index:1} /* Player name button */ .pst-name-btn{background:none;border:none;padding:0; font:600 .8rem/1.25 Fraunces,Georgia,serif; color:var(--fg-primary,#222);cursor:pointer;text-align:left; transition:color .1s} .pst-name-btn:hover{color:var(--blue,#008fd5)} /* Archetype + EPA sub-line */ .pst-subline{font:400 .67rem/1.4 Archivo,sans-serif; color:var(--fg-tertiary,#8b8b8b);display:block;margin-top:2px} .pst-subline em{font-style:normal;font-weight:500} .pst-epa-pos{color:var(--green,#6d904f);font-weight:600} .pst-epa-neg{color:var(--red,#fc4f30);font-weight:600} /* National rank badges */ .pst-rnk{display:inline-block;font:700 8.5px/1 Archivo,sans-serif; padding:1px 4px;border-radius:2px;white-space:nowrap} .pst-rnk-green{color:#1a5e0a;background:#e6f4e1} .pst-rnk-blue{color:#0a4f8c;background:#e3f0fb} .pst-rnk-grey{color:#555;background:#f0f0f0} .pst-rank-line{display:block;margin-top:2px} /* Inline bar */ .pst-bar-col{width:72px;min-width:72px;padding:.38rem .35rem!important} .pst-bar-track{background:rgba(0,0,0,.08);border-radius:1px;height:5px; margin:7px 0;overflow:hidden;min-width:60px} .pst-bar-fill{height:100%;background:var(--blue,#008fd5);border-radius:1px; transition:width .4s cubic-bezier(.34,1.56,.64,1)} /* Sparkline expand row */ .pst-exp-row{background:var(--panel,#f0f0f0)} .pst-exp-cell{padding:.5rem .75rem} .pst-spark-wrap{display:flex;align-items:center;gap:.6rem} .pst-spark-lbl{font:.63rem/1 Archivo,sans-serif; color:var(--fg-tertiary,#8b8b8b);white-space:nowrap} .pst-spark rect{opacity:.82} .pst-empty{font:.78rem/1.4 Archivo,sans-serif; color:var(--fg-tertiary,#8b8b8b);padding:.5rem 0;margin:0} /* Archetype label in the name-cell subline (colored, no italic — replaces the old bare treatment) */ .pst-arch-label{font-weight:600;font-style:normal} /* Archetype drawer — appears inside the sparkline expand row, tiered depth (full/mid/minimal). The row itself is still a hard hidden-attribute toggle (JS L1391-ish just flips .hidden), but the card inside it gets a self-triggering entrance: a CSS @keyframes animation (not a transition) plays automatically the instant the row goes from display:none to laid out, with no JS double-step needed — the same self-trigger mechanism as the receipt-bar fill-in below (fable R5.4/R6.2: adopted as in-law polish, NOT via common/components.py's render_expand_panel grid-rows/open-class trick, which assumes a persistent block wrapper and would need either a second JS class flip or restructuring this table row — a keyframe animation gets the identical "opens with a little life" result without fighting the structure). */ @keyframes pst-arch-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}} .pst-arch{border-left:4px solid var(--stroke-default,#e4e4e1); padding:.1rem 0 .3rem 1rem;margin:.4rem 0 .1rem; display:flex;flex-direction:column;gap:.7rem;max-width:520px; animation:pst-arch-in .32s cubic-bezier(.34,1.56,.64,1) both} .pst-arch-h{font:600 1.2rem/1.2 Fraunces,Georgia,serif;margin:0 0 .15rem; text-wrap:balance} .pst-arch-desc{font:400 .82rem/1.5 Archivo,sans-serif; color:var(--fg-secondary,#5b5b5b);margin:0;max-width:56ch} .pst-arch-standing{font:400 .74rem/1.4 Archivo,sans-serif; color:var(--fg-tertiary,#8b8b8b);margin:.3rem 0 0} .pst-arch-claim{font:400 .78rem/1.5 Archivo,sans-serif; color:var(--fg-secondary,#5b5b5b);margin:0} .pst-arch-claim strong{color:var(--fg-primary,#222);font-weight:600} .pst-arch-take{font:400 .78rem/1.5 Archivo,sans-serif; color:var(--fg-secondary,#5b5b5b);margin:0} .pst-arch-slabel{display:block;font:600 .63rem/1.2 Archivo,sans-serif; letter-spacing:.02em; color:var(--fg-muted,#8b8b8b);margin:0 0 .4rem} /* Style-lane beat-1 tag (research §22.2/§22.3) — a quiet, bordered chip beside the leaf label, NOT a second bar/badge system: Archivo 600, sentence case, ink-2, hairline border, no fill. Quieter than "the rare part" lead-in and far quieter than the gold two-way star (R9.1). Renders at every drawer tier a style modifier fires -- a tag is beat-1 identity, not a beat-3 twist, so it never needs the "full"-tier promotion the receipts/radar do. */ .pst-arch-style-tag{display:inline-block;margin-left:.4rem; font:600 .75rem/1.2 Archivo,sans-serif;color:var(--fg-secondary,#5b5b5b); border:1px solid var(--stroke-default,#e4e4e1);border-radius:2px; padding:1px 6px;vertical-align:middle} /* The style signature phrase -- only ever a second line when the card has no twist (rule 1, §22.5), so it never has to share the card with a compound/flaw sentence. Same voice as pst-arch-desc, one notch quieter. */ .pst-arch-style-phrase{font:400 .8rem/1.5 Archivo,sans-serif; color:var(--fg-tertiary,#8b8b8b);margin:0;max-width:56ch} /* "The rare part" — additive compound-excellence callout (fable §19.4 / R4.2A). Lead-in is Archivo 600 ink inline (NOT an eyebrow, no badge/fill/ border accent — the two full receipt bars below ARE the badge, per the R5.2 unification ruling: this is a label over the existing bars, not a second bar system). */ .pst-rare{font:400 .82rem/1.5 Archivo,sans-serif;color:var(--fg-secondary,#5b5b5b); margin:0;max-width:56ch} .pst-rare__lead{font-weight:600;color:var(--fg-primary,#222)} .pst-rare__clause{font-weight:400} /* Receipts (percentile bars) — ONE Savant red→grey→blue value ramp for every bar on this card (fable R5.2/R5.4): replaces the old red/gold/green threshold fill so a compound bar and a flaw bar never disagree about what color means. Fill reveals once per drawer-open via a self-triggering CSS keyframe (a scaleX transform under the fixed inline width — no JS, no count-up numerals) exactly like the drawer's own entrance above. */ .pst-arch-receipts{display:flex;flex-direction:column;gap:.6rem;max-width:380px} .pst-rr-top{display:flex;justify-content:space-between;align-items:baseline; gap:.5rem;margin-bottom:.2rem} .pst-rr-name{font:600 .75rem/1.2 Archivo,sans-serif;color:var(--fg-primary,#222)} .pst-rr-val{font:800 1rem/1 Archivo,sans-serif;font-variant-numeric:tabular-nums; color:var(--fg-primary,#222);white-space:nowrap} .pst-rr-track{background:var(--panel,#f0f0f0);border-radius:2px;height:8px; overflow:hidden} @keyframes pst-rr-fill-in{from{transform:scaleX(0)}to{transform:scaleX(1)}} .pst-rr-fill{height:100%;border-radius:2px;transform-origin:left; animation:pst-rr-fill-in .42s ease-out both} .pst-rr-cap{margin-top:.25rem;font:400 .68rem/1.4 Archivo,sans-serif; color:var(--fg-tertiary,#8b8b8b)} /* Trait fingerprint radar */ .pst-arch-radar{display:flex;flex-direction:column;align-items:flex-start} .radar-svg{display:block;flex:none;margin-top:.35rem} /* Plays-like comps */ .pst-arch-comps{display:flex;flex-wrap:wrap;gap:.5rem} .pst-arch-comp{display:flex;align-items:center;gap:.5rem; padding:.25rem .6rem .25rem .25rem;border:1px solid var(--stroke-default,#e4e4e1); border-radius:3px;text-decoration:none;transition:opacity .1s ease-in} .pst-arch-comp:hover{opacity:.7} .pst-arch-comp-mono{width:26px;height:26px;border-radius:50%;flex:none; display:flex;align-items:center;justify-content:center;overflow:hidden; background:var(--bg-0,#fff);border:1px solid var(--stroke-default,#e4e4e1)} .pst-arch-comp-mono img{width:100%;height:100%;object-fit:contain;display:block} .pst-arch-comp-name{font:600 .72rem/1.2 Archivo,sans-serif; color:var(--fg-primary,#222);display:block} .pst-arch-comp-meta{font:400 .66rem/1.2 Archivo,sans-serif; color:var(--fg-tertiary,#8b8b8b);display:block;margin-top:1px} /* Minimal-tier local fact */ .pst-arch-local{font:400 .8rem/1.5 Archivo,sans-serif; color:var(--fg-secondary,#5b5b5b);margin:0} /* The flaw note — additive, subordinate, always LAST (§20.5/R4.2B). One hairline above it, `~our read` via the shared render_trust_tag component (never a bespoke tag), body-sm ink-2, ONE bar on the same Savant ramp as everything else — no alert/status styling. The quietness is the point: strength gets two loud bars, the worry gets one small dim one. */ .pst-flaw{border-top:1px solid var(--stroke-default,#e4e4e1); padding-top:.6rem;margin-top:.1rem;display:flex;flex-direction:column;gap:.5rem} .pst-flaw__line{font:400 .8rem/1.5 Archivo,sans-serif; color:var(--fg-secondary,#5b5b5b);margin:0;display:flex;align-items:baseline; gap:.4rem;flex-wrap:wrap} .pst-flaw__body{color:var(--fg-secondary,#5b5b5b)} .pst-flaw__bar{max-width:380px} /* .pst-style-concern (§22.4, ball_security) reuses .pst-flaw/.pst-flaw__line/ .pst-flaw__body verbatim -- same quiet "~our read" register -- and simply never emits a .pst-flaw__bar child (no z-score to bar). No bespoke rule needed here; the marker class exists only so the concern block is greppable/testable as its own thing. Never renders alongside .pst-flaw on the same card: the QB-only flaw and the RB-only ball_security concern are disjoint pools by construction (§22.5). */ /* Footer player-page link — present on every tier */ .pst-arch-link{display:inline-flex;align-items:center;gap:.35rem; font:600 .78rem/1.2 Archivo,sans-serif;color:var(--blue,#008fd5); text-decoration:none;transition:opacity .1s ease-in} .pst-arch-link:hover{opacity:.7} .pst-arch-link svg{width:12px;height:12px} @media(max-width:480px){ .pst-table{min-width:400px} .pst-th{padding:.25rem .35rem;font-size:.63rem} .pst-td{padding:.3rem .35rem;font-size:.72rem} .pst-name-col{min-width:100px;max-width:145px} .pst-bar-col{width:48px;min-width:48px} .pst-arch{max-width:100%} } /* Watch forecast — doc 97 §13 season preview card (Now tab) */ /* Watch forecast card — doc 97 §13 */ .wf{border:1px solid var(--line,#e4e4e1);border-left:4px solid var(--team,#008fd5); border-radius:3px;padding:14px 16px 12px;margin:0 0 16px; animation:riseIn .35s ease-out both;transition:opacity .1s ease-in} .wf-eyebrow{font:700 10px/1 var(--font-ui,'Archivo',system-ui);letter-spacing:.07em; color:var(--fg-tertiary,#8b8b8b);margin:0 0 8px} .wf-opener{font:600 18px/1.3 'Fraunces',Georgia,serif;color:var(--ink,#222);margin:0 0 3px} .wf-sub{font:400 12.5px/1 var(--font-ui,'Archivo',system-ui); color:var(--fg-secondary,#5b5b5b);margin:0 0 10px} .wf-line{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px;margin:0 0 10px} .wf-line-label{font:400 12px/1 var(--font-ui,'Archivo',system-ui); color:var(--fg-secondary,#5b5b5b)} .wf-line-val{font:600 18px/1 'Fraunces',Georgia,serif;color:var(--team,#008fd5)} .wf-line-price{font:700 11px/1 var(--font-ui,'Archivo',system-ui); color:var(--fg-secondary,#5b5b5b)} .wf-axes{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 10px} .wf-axis{font:700 10.5px/1 var(--font-ui,'Archivo',system-ui);letter-spacing:.03em; background:var(--panel,#f0f0f0);color:var(--fg-secondary,#5b5b5b); padding:4px 8px;border-radius:3px} .wf-honesty{font:400 10px/1.4 var(--font-ui,'Archivo',system-ui); color:var(--fg-tertiary,#8b8b8b);margin:0} @media(max-width:460px){ .wf-opener{font-size:16px} .wf-line-val{font-size:16px} } @media(prefers-reduced-motion:reduce){.wf{animation:none}} /* Program résumé — doc 97 §13 all-time facts card (History tab) */ /* Program résumé card — doc 97 §13 */ .pf-section{margin:0 0 20px} .pf-eyebrow{font:700 10px/1 var(--font-ui,'Archivo',system-ui);letter-spacing:.07em; color:var(--fg-tertiary,#8b8b8b);margin:0 0 10px} .pf-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr)); gap:1px;background:var(--line,#e4e4e1); border:1px solid var(--line,#e4e4e1);border-radius:3px 3px 0 0;overflow:hidden} .pf-grid--solo{border-radius:3px} .pf-cell{background:var(--page,#fff);padding:12px 8px 10px;text-align:center} .pf-val{display:block;font:600 22px/1 'Fraunces',Georgia,serif; color:var(--ink,#222);margin:0 0 4px} .pf-val--team{color:var(--team,#008fd5)} .pf-val--gold{color:#e5ae38} .pf-lbl{display:block;font:700 9.5px/1 var(--font-ui,'Archivo',system-ui); letter-spacing:.06em;color:var(--fg-tertiary,#8b8b8b)} .pf-meta{display:flex;flex-wrap:wrap;gap:1px; background:var(--line,#e4e4e1); border:1px solid var(--line,#e4e4e1);border-top:none; border-radius:0 0 3px 3px;overflow:hidden} .pf-meta-cell{flex:1 1 140px;background:var(--page,#fff);padding:9px 10px} .pf-meta-lbl{display:block;font:700 9px/1 var(--font-ui,'Archivo',system-ui); letter-spacing:.06em; color:var(--fg-tertiary,#8b8b8b);margin-bottom:3px} .pf-meta-val{display:block;font:400 13px/1.3 var(--font-ui,'Archivo',system-ui); color:var(--ink,#222);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} @media(max-width:400px){.pf-grid{grid-template-columns:repeat(3,1fr)}} /* Sentiment River — fan memory visualization (Phase 0) */ /* Sentiment River — fan memory visualization (river.builder + sentiment-river.js) */ .sr-section{padding:20px 0 12px} .sr-eyebrow{font:700 10px/1 var(--font-ui,'Archivo',system-ui); letter-spacing:.06em;color:var(--fg-tertiary,#8b8b8b); margin-bottom:8px} /* Season selector tabs */ .sr-seasons{display:flex;gap:4px;margin-bottom:8px;flex-wrap:wrap} .sr-stab{ font:700 11px/1 'Archivo',system-ui; padding:3px 9px;border:1px solid #d0d0d0;border-radius:2px; background:#fff;color:#888;cursor:pointer; transition:border-color .1s,color .1s; } .sr-stab:hover{border-color:#008fd5;color:#008fd5} .sr-stab.active{border-color:#008fd5;color:#008fd5;background:rgba(0,143,213,.07)} .sr-lede{font:400 12px/1.5 var(--font-ui,'Archivo',system-ui); color:var(--fg-secondary,#666);margin-bottom:4px} .sr-provenance{font:400 11px/1.5 var(--font-ui,'Archivo',system-ui); color:var(--fg-tertiary,#8b8b8b);margin-bottom:8px} [data-sentiment-river]{position:relative;width:100%} .sr-loading{font:400 11px/1 'Archivo',system-ui;color:#999;padding:8px 0} .sr-empty{font:400 11px/1.5 'Archivo',system-ui;color:#999;padding:8px 0} /* Tooltip */ .sr-tooltip{ position:absolute;top:4px;left:0; background:#fff;border:1px solid #e0e0e0; padding:7px 10px; font:400 11px/1.5 'Archivo',system-ui; pointer-events:none;display:none; z-index:20;max-width:220px; } /* Week card */ .sr-week-card{ margin-top:8px;padding:12px 16px; background:#f9f9f9;border:1px solid #e4e4e1; border-radius:3px;position:relative; font:400 12px/1.5 'Archivo',system-ui; } .sr-wc-header{font-weight:600;margin-bottom:6px;line-height:1.4} .sr-wc-week{font:700 13px/1 'Archivo',system-ui;color:#222} .sr-wc-result{margin-left:6px;font-weight:700} .sr-win{color:#6d904f}.sr-loss{color:#fc4f30} .sr-wc-opp{margin-left:4px;color:#555} .sr-wc-venue,.sr-wc-weather,.sr-wc-noGame{ margin-left:4px;color:#888;font-weight:400;font-size:11px} .sr-wc-sentiment{margin:6px 0;color:#444} .sr-wc-conv{color:#888;font-size:11px;margin-left:4px} .sr-wc-receipt{ margin:8px 0 6px;padding:8px 12px; border-left:3px solid #e5ae38; background:#fffdf5; font-style:italic;color:#333; font-size:12px;line-height:1.55; } .sr-wc-receipt cite{ display:block;margin-top:4px; font-style:normal;font-size:10px; color:#888;font-weight:600;letter-spacing:.04em } .sr-wc-terms{display:flex;gap:5px;flex-wrap:wrap;margin-top:6px} .sr-wc-term{ font:600 10px/1 'Archivo',system-ui; background:#f0f0f0;border-radius:2px; padding:3px 6px;color:#555;letter-spacing:.03em; } .sr-wc-close{ position:absolute;top:8px;right:10px; background:none;border:none; font-size:18px;color:#bbb;cursor:pointer; padding:0;line-height:1 } .sr-wc-close:hover{color:#666} /* Fever Year river v2 — position-as-sentiment, emotion-hue, logo rails */ .srv2-section .sr-lede{color:var(--fg-secondary,#666)} [data-sentiment-river-v2]{position:relative} .srv2-controls{display:flex;align-items:center;gap:8px;margin:0 0 8px} .srv2-ctl-lbl{font:700 11px/1 'Archivo',system-ui;letter-spacing:.06em;text-transform:uppercase;color:#8b8b8b} .srv2-lens{font:600 12.5px/1 'Archivo',system-ui;padding:7px 28px 7px 11px;border:1px solid #d3d2cb;border-radius:3px;background:#fff;color:#222;cursor:pointer;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right 10px center} .srv2-svg{width:100%;height:auto;display:block;overflow:visible} @keyframes srv2Wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}} .srv2-band{animation:srv2Wipe 1s cubic-bezier(.4,0,.1,1) both} @media(prefers-reduced-motion:reduce){.srv2-band{animation:none}} .srv2-axis{font:600 10px/1 'Archivo',system-ui;fill:#9a9a94;letter-spacing:.04em;text-transform:uppercase} .srv2-score{font:700 10.5px/1 'Archivo',system-ui;fill:#5a5a56;font-variant-numeric:tabular-nums} .srv2-mk{cursor:pointer} .srv2-mk:hover{filter:brightness(1.06)} .srv2-cap{margin-top:8px;min-height:20px;font:400 13px/1.45 'Archivo',system-ui;color:#6f6f6a;border-top:1px solid #e4e3dd;padding-top:8px} .srv2-cap.srv2-empty2{color:#9a9a94;font-style:italic} .srv2-empty{color:#9a9a94;font-style:italic;padding:8px 0;font:400 12px/1 'Archivo',system-ui} .srv2-dossier{margin-top:14px;display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .35s ease,opacity .25s} .srv2-dossier.open{grid-template-rows:1fr;opacity:1} .srv2-dossier > *{overflow:hidden;min-height:0} .srv2-doshead{display:flex;flex-direction:column;gap:4px;border:1px solid #e4e3dd;border-bottom:none;border-radius:4px 4px 0 0;background:#f5f5f2;padding:16px 20px 12px} .srv2-doshead-row{display:flex;justify-content:space-between;align-items:baseline} .srv2-dostitle{font-family:'Fraunces',Georgia,serif;font-size:20px;font-weight:600} .srv2-w{color:#6d904f}.srv2-l{color:#fc4f30} /* River YAML overrides (Phase 3): rivalry/venue meta lines + moment note band */ .srv2-dosmeta{font:400 12px/1.4 'Archivo',system-ui;color:#6f6f6a} .srv2-dosnote{border:1px solid #e4e3dd;border-top:2px solid #e5ae38;background:#fff; font:400 13px/1.5 'Archivo',system-ui;color:#3c3c3c;padding:12px 20px} .srv2-dosnote-src{display:block;margin-top:4px;font-size:10.5px;color:#9a9a94} .srv2-close{cursor:pointer;border:1px solid #d3d2cb;background:#fff;border-radius:3px;font:600 11px/1 'Archivo',system-ui;padding:5px 9px;color:#6f6f6a} .srv2-dosgrid{display:grid;grid-template-columns:210px 1fr;gap:22px;border:1px solid #e4e3dd;border-top:none;border-radius:0 0 4px 4px;background:#f5f5f2;padding:16px 20px 18px} .srv2-lab{font:700 10.5px/1 'Archivo',system-ui;letter-spacing:.1em;text-transform:uppercase;color:#9a9a94;margin-bottom:9px} .srv2-emo{display:grid;grid-template-columns:56px 1fr 60px;gap:8px;align-items:center;font:400 12px/1 'Archivo',system-ui;margin-bottom:6px} .srv2-emo.hot span:first-child{font-weight:800} .srv2-track{height:9px;background:#e6e5df;border-radius:3px;overflow:hidden} .srv2-track>i{display:block;height:100%;width:100%;transform-origin:left} .srv2-pv{text-align:right;color:#6f6f6a;font-size:11px} .srv2-mult{color:#9a9a94} .srv2-note{font:400 11.5px/1.45 'Archivo',system-ui;color:#6f6f6a;margin-top:9px} .srv2-conv{font:400 11.5px/1.4 'Archivo',system-ui;color:#6f6f6a;margin-top:9px} .srv2-quote{border-left:2px solid #d3d2cb;padding:2px 0 2px 12px;margin:0 0 10px;font:400 13.5px/1.5 'Archivo',system-ui;color:#2a2a2a} .srv2-quote span{display:block;margin-top:4px;font-size:11px;color:#9a9a94} .srv2-related{margin-top:6px;font-size:12px} .srv2-storyon .srv2-mk{transition:opacity .5s ease} .srv2-storyon .srv2-mk.srv2-dim{opacity:.16} /* Moments are SEASON-level landmarks, not chapter-local detail — the ★ signature win is the shape of the whole year, and you should be able to see where the season's peaks sit while reading any chapter. The 0.16 dim above is right for game dots but erased every moment on load: the guided scroll always opens on Chapter 1 ("The season begins"), and the big moments are essentially never in Chapter 1. Recede them, never below legible. */ .srv2-storyon .srv2-mk.srv2-moment.srv2-dim{opacity:.55} .srv2-focus{fill:rgba(0,39,76,.05);stroke:rgba(0,39,76,.14);stroke-width:1;transition:transform .7s cubic-bezier(.4,0,.15,1),opacity .4s;transform-origin:0 0;opacity:0} .srv2-playhead{transition:cx .6s cubic-bezier(.4,0,.15,1),cy .6s cubic-bezier(.4,0,.15,1),opacity .4s;stroke:#fff;stroke-width:1.5;opacity:0} .srv2-story{margin-top:14px} .srv2-story-card{border:1px solid #e4e3dd;border-radius:4px;background:#faf9f6;padding:15px 18px;min-height:92px} .srv2-story-eyebrow{font:700 10.5px/1 'Archivo',system-ui;letter-spacing:.1em;text-transform:uppercase;color:var(--accent,#9a9a94);margin-bottom:6px} .srv2-story-title{font-family:'Fraunces',Georgia,serif;font-size:19px;font-weight:600;margin-bottom:8px;line-height:1.15} .srv2-story-chip{display:inline-block;font:600 11.5px/1 'Archivo',system-ui;border:1px solid #d3d2cb;border-radius:3px;padding:4px 8px;color:#444;margin-bottom:2px} .srv2-story-quote{margin:8px 0 0;padding:0 0 0 12px;border-left:2px solid #e2e1dc;font:400 14px/1.5 'Archivo',system-ui;color:#2a2a2a} .srv2-story-quote span{display:block;margin-top:4px;font-size:11px;color:#9a9a94} .srv2-story-nav{display:flex;align-items:center;gap:12px;margin-top:10px} .srv2-prev,.srv2-next{font-size:13px;border:1px solid #d3d2cb;background:#fff;border-radius:3px;width:30px;height:26px;cursor:pointer;color:#444} .srv2-prev:hover,.srv2-next:hover{border-color:#00274c} .srv2-dots{display:flex;gap:7px;flex:1;justify-content:center} .srv2-dot{width:8px;height:8px;border-radius:50%;border:0;background:#d3d2cb;cursor:pointer;padding:0;transition:background .3s,transform .3s} .srv2-dot.on{background:#00274c;transform:scale(1.3)} @media(prefers-reduced-motion:reduce){.srv2-focus,.srv2-playhead,.srv2-storyon .srv2-mk,.srv2-dot{transition:none}} /* offseason ledger (12-month layout) */ .srv2-oband{fill:#e9e8e1;opacity:.85} .srv2-kick{fill:#a7a69f;letter-spacing:.08em} .srv2-oglyph{font:700 13px/1 'Archivo',system-ui} .srv2-omk polygon,.srv2-omk rect{transition:filter .15s} .srv2-ologo{width:26px;height:26px;object-fit:contain;vertical-align:-7px;margin-right:8px} .srv2-osub{font:400 13px/1.45 'Archivo',system-ui;color:#2a2a2a;margin-bottom:6px} .srv2-odate{font:600 10.5px/1 'Archivo',system-ui;letter-spacing:.06em;text-transform:uppercase;color:#9a9a94;margin-bottom:12px} .srv2-odrow{display:flex;justify-content:space-between;gap:12px;font:400 12.5px/1.5 'Archivo',system-ui;color:#3a3a36;border-bottom:1px solid #ecebe4;padding:4px 0} .srv2-odrow span{color:#9a9a94;font-size:11px;text-align:right;white-space:nowrap} .srv2-mglyph{font:700 15px/1 'Archivo',system-ui;paint-order:stroke;stroke:#fff;stroke-width:2.5px;stroke-linejoin:round} .srv2-moment{cursor:pointer} .srv2-mombadge{display:inline-block;font:700 11px/1 'Archivo',system-ui;border:1px solid;border-radius:3px;padding:3px 7px;margin-left:10px;vertical-align:2px} .srv2-legend{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:8px;font:400 12px/1 'Archivo',system-ui;color:#6f6f6a} .srv2-leg-lbl{font:700 10.5px/1 'Archivo',system-ui;letter-spacing:.1em;text-transform:uppercase;color:#9a9a94} .srv2-leg-item{display:inline-flex;align-items:center;gap:5px} .srv2-leg-item i{font-style:normal;font-size:13px;line-height:1} .srv2-leg-note{color:#9a9a94;font-style:italic;margin-left:auto} @media(max-width:680px){.srv2-leg-note{margin-left:0;flex-basis:100%}} @media(max-width:680px){.srv2-dosgrid{grid-template-columns:1fr}} /* Rivalry Face-Off river — river family Package 3 (v1 static) */ .hero-river-block{margin:0 0 8px} .hero-title{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:1.1rem;margin:0 0 4px} .hero-dek{font-size:12.5px;color:var(--ink-2,#5b5b5b);margin:0 0 10px;display:flex;align-items:center;gap:6px;flex-wrap:wrap} .cfb-hero-river{display:block;width:100%;height:auto;max-width:900px} .cfb-hero-river .hr-mk{cursor:pointer} .cfb-hero-river .hr-mk:focus{outline:2px solid var(--ink,#222222);outline-offset:2px} .hero-cap{margin-top:8px;min-height:20px;font:400 13px/1.45 'Archivo',system-ui,sans-serif;color:var(--ink,#222222)} .hero-cap.hero-cap-empty{color:var(--ink-3,#8b8b8b);font-style:italic} .hero-foot{font-size:11.5px;color:var(--ink-3,#8b8b8b);margin:6px 0 0} /* Related-content chips — arcs/storylines crosslink inside a river week card */ .rc-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px} .rc-chip{font:600 10px/1 var(--font-ui,'Archivo',system-ui); padding:4px 8px;border-radius:2px;border:1px solid #d0d0d0; color:#0072a8;text-decoration:none;letter-spacing:.02em} .rc-chip:hover{border-color:#0072a8;background:rgba(0,114,168,.06)} .rc-chip[data-type="arc"]::before{content:"Arc: "} .rc-chip[data-type="storyline"]::before{content:"Storyline: "} /* Sentiment River guided-scroll — Season Storylines Tier 2 ("The Story") */ .srs-wrap{position:relative} .srs-sticky{position:sticky;top:12px;z-index:1;background:var(--page,#fff)} .srs-chapters{margin-top:-4px} .srs-chapter{min-height:40vh;padding:24px 0;border-top:1px solid #eee; display:flex;flex-direction:column;justify-content:center} .srs-chapter:first-child{border-top:none} .srs-chapter-title{font:700 15px/1.3 'Fraunces',Georgia,serif;color:#222;margin:0 0 8px} .srs-chapter-weeks{font:600 10px/1 var(--font-ui,'Archivo',system-ui); letter-spacing:.06em;color:#8b8b8b;margin-bottom:6px} .srs-chapter-body{margin:8px 0 0;padding:8px 12px;border-left:3px solid #e5ae38; background:#fffdf5;font-style:italic;color:#333;font-size:12.5px;line-height:1.55} .srs-chapter-body cite{display:block;margin-top:4px;font-style:normal; font-size:10px;color:#888;font-weight:600;letter-spacing:.04em} /* Hover PREVIEW disabled while a chapter is active -- pure CSS, scoped by the wrapper's data-active-chapter attribute. sentiment-river.js's own mousemove/click handlers are never modified or told this exists. Deliberately NOT pointer-events:none on the hit area: D-C requires that clicking to open a week card INSIDE a storyline's span still works (that click is what triggers the "Part of: ->" membership chip) -- only the hover-triggered tooltip/hairline/ghost-dot are suppressed, since those are the "two simultaneous highlight systems" the spec calls out as the actual scrollytelling failure mode, not click-to-open. */ .srs-wrap[data-active-chapter] [data-sentiment-river] .sr-tooltip{display:none !important} .srs-wrap[data-active-chapter] [data-sentiment-river] svg line{opacity:0 !important} .srs-wrap[data-active-chapter] [data-sentiment-river] svg circle[fill="#222"]{opacity:0 !important} .srs-membership-chip{display:inline-block;font:600 11px/1 var(--font-ui,'Archivo',system-ui); color:#0072a8;text-decoration:none;margin:0 0 8px;cursor:pointer} .srs-membership-chip:hover{text-decoration:underline} /* Season Storylines panel — Tier 3 ("The Room") */ .stl-section{padding:16px 0 12px;border-top:1px solid #e4e4e1;margin-top:8px} .stl-eyebrow{font:700 10px/1 var(--font-ui,'Archivo',system-ui); letter-spacing:.06em;color:var(--fg-tertiary,#8b8b8b);margin-bottom:10px} .stl-flat{font:400 13px/1.5 var(--font-ui,'Archivo',system-ui);color:#888;padding:4px 0} .stl-week{margin:0 0 16px;padding-bottom:14px;border-bottom:1px solid #eee} .stl-week:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0} .stl-week-label{font:700 12px/1 'Archivo',system-ui;color:#222;margin-bottom:6px} .stl-terms{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:8px} .stl-term{font:600 10px/1 'Archivo',system-ui;background:#f0f0f0;border-radius:2px; padding:3px 6px;color:#555;letter-spacing:.03em} .stl-quote{margin:0 0 6px;padding:8px 12px;border-left:3px solid #e5ae38; background:#fffdf5;font-style:italic;color:#333;font-size:12px;line-height:1.55} .stl-quote cite{display:block;margin-top:4px;font-style:normal;font-size:10px; color:#888;font-weight:600;letter-spacing:.04em} .stl-caption{font:400 12px/1.5 'Archivo',system-ui;color:#555;margin:0} /* Belief EKG — doc 97 §11.2 annotated season sentiment arc */ /* Belief EKG — doc 97 §11.2 + Session J */ .bekg{padding:20px 0 8px} .bekg-eyebrow{font:700 10px/1 var(--font-ui,'Archivo',system-ui); letter-spacing:.06em;color:var(--fg-tertiary,#8b8b8b); margin-bottom:8px} .bekg-svg{display:block;width:100%;max-width:360px} .bekg-meta{font:400 10px/1.4 var(--font-ui,'Archivo'); color:var(--fg-tertiary,#8b8b8b);margin-top:6px} .bekg-legend{display:flex;gap:12px;margin-top:5px;align-items:center;flex-wrap:wrap} .bekg-legend-dot{width:8px;height:8px;border-radius:50%;display:inline-block} .bekg-legend-label{font:400 9px/1 var(--font-ui,'Archivo'); color:var(--fg-tertiary,#8b8b8b)} /* Season toggle buttons */ .bekg-seasons{display:flex;gap:5px;margin-bottom:8px;flex-wrap:wrap} .bekg-yr-btn{font:600 10px/1 'Archivo',system-ui;padding:3px 8px; border:1px solid #d0d0d0;border-radius:2px;background:#fff; color:#666;cursor:pointer;transition:all .12s} .bekg-yr-btn.active{background:#222;color:#fff;border-color:#222} .bekg-yr-btn:hover:not(.active){background:#f0f0f0} /* Season panels — only active panel visible */ .bekg-panel{display:none} .bekg-panel.active{display:block} /* Range sub-toggle */ .bekg-range{display:flex;gap:6px;margin:0 14px 5px} .bekg-rng{font:500 11px/1 'Archivo',system-ui;padding:3px 9px; border-radius:2px;border:1px solid #d0d0d0;background:#fff; color:#444;cursor:pointer;transition:background 100ms,color 100ms} .bekg-rng.active{background:#222;color:#fff;border-color:#222} .bekg-rng:hover:not(.active){background:#f0f0f0} /* Diamond legend icon for arc peaks */ .bekg-legend-diamond{width:9px;height:9px;background:#e5ae38;display:inline-block; transform:rotate(45deg);flex-shrink:0;border:1px solid rgba(255,255,255,.7)} /* Ghost prior-year lines */ .bekg-ghost-line{stroke:#c8c8c8;stroke-width:1.2;fill:none; stroke-linejoin:round;stroke-linecap:round;opacity:.55} .bekg-legend-ghost{width:18px;height:2px;background:#c8c8c8; display:inline-block;vertical-align:middle;border-radius:1px} @keyframes bekg-draw{to{stroke-dashoffset:0}} /* Belief history chip — historical high/low comparison (doc 97 Session F) */ /* Belief history chip — doc 97 Session F */ .bhc{ display:flex;align-items:flex-start;gap:10px; padding:9px 14px;margin:10px 0 4px; border-radius:3px; font-family:'Archivo',system-ui,sans-serif; } .bhc-low{background:#fff5f5;border-left:3px solid #fc4f30} .bhc-below{background:#fffaf8;border-left:3px solid #f08060} .bhc-mid{background:#f8f8f8;border-left:3px solid #ccc} .bhc-above{background:#f6fbf2;border-left:3px solid #92c473} .bhc-high{background:#f4faf0;border-left:3px solid #6d904f} .bhc-arrow{font-size:18px;line-height:1.2;flex:0 0 auto} .bhc-low .bhc-arrow,.bhc-below .bhc-arrow{color:#fc4f30} .bhc-mid .bhc-arrow{color:#888} .bhc-above .bhc-arrow,.bhc-high .bhc-arrow{color:#6d904f} .bhc-body{min-width:0} .bhc-text{font-size:13px;font-weight:600;color:#222;margin:0} .bhc-sub{font-size:11px;color:#666;margin:2px 0 0} /* Market divergence chip — fan mood vs. Vegas win total O/U */ /* Market divergence chip — fan vs. Vegas (team pages Now tab) */ .mdc-wrap{ border:1px solid rgba(34,34,34,.1);border-radius:3px; border-left:4px solid var(--accent-primary,#008fd5); padding:14px 16px 12px;margin:12px 0; font-family:'Archivo',system-ui,sans-serif; background:var(--page,#fff); } .mdc-header{ display:flex;justify-content:space-between;align-items:center; margin-bottom:12px; } .mdc-title{ font-size:11px;font-weight:700;color:var(--ink-3,#888); letter-spacing:.08em; } .mdc-dir{ font-size:20px;font-weight:800;line-height:1; color:var(--ink-3,#ccc);transition:color .15s; } .mdc-dir--fans{color:var(--green,#6d904f)} .mdc-dir--mkt{color:var(--blue,#008fd5)} .mdc-dir--tied{color:var(--ink-3,#aaa)} .mdc-stats{ display:grid;grid-template-columns:1fr 1fr; gap:0;margin-bottom:12px; } .mdc-stat{ padding:0 12px; } .mdc-stat:first-child{ border-right:1px solid rgba(34,34,34,.1); padding-left:0; } .mdc-stat__num{ font-size:30px;font-weight:800;letter-spacing:-.04em; color:var(--ink);line-height:1; font-family:'Archivo',system-ui,sans-serif; } .mdc-stat__num sup{font-size:.45em;font-weight:700;vertical-align:super;letter-spacing:0} .mdc-stat__label{ font-size:11px;color:var(--ink-3,#888);margin-top:4px;line-height:1.3; } .mdc-verdict{ font-size:12.5px;font-weight:600;color:var(--ink,#222); border-top:1px solid rgba(34,34,34,.08); padding-top:9px;line-height:1.4; } .mdc-verdict .fans-bull{color:var(--green,#6d904f)} .mdc-verdict .mkt-bull{color:var(--blue,#008fd5)} .mdc-verdict .aligned{color:var(--ink-3,#888)} .mdc-foot{ font-size:11px;color:var(--ink-3,#888);margin-top:3px;line-height:1.4; } /* Divergence chip — links to /topics/divergence/ when fanbase is 50/50 split */ /* Divergence chip (Session G) */ .div-chip{ display:flex;align-items:flex-start;gap:10px; padding:9px 14px;margin:10px 0 4px; background:#fffdf5;border-left:3px solid #e5ae38; border-radius:3px;font-family:'Archivo',system-ui,sans-serif; } .div-chip-icon{font-size:16px;line-height:1.3;flex:0 0 auto;color:#e5ae38} .div-chip-body{min-width:0} .div-chip-text{font-size:13px;font-weight:600;color:#222;margin:0} .div-chip-sub{font-size:11px;color:#666;margin:2px 0 0} .div-chip-sub a{color:#008fd5;text-decoration:none} .div-chip-sub a:hover{text-decoration:underline} /* Fault Line — intra-fanbase divergence card (doc 94 §Tier-2) */ .ttag{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700; padding:1px 6px;border-radius:2px;vertical-align:middle;line-height:1.6; font-family:"Archivo",system-ui,sans-serif} .ttag.fact{color:#0a5a86;background:#e7f3fb} .ttag.read{color:#7a5a00;background:#faf3e0} .ttag .td{width:6px;height:6px;border-radius:50%;display:inline-block} .ttag.fact .td{background:var(--blue,#008fd5)} .ttag.read .td{background:var(--gold,#e5ae38)} .xp{border:1px solid var(--rule,#d7d7d4);border-radius:2px} .xp-btn{width:100%;text-align:left;display:flex;align-items:center;justify-content:space-between; gap:10px;background:none;border:none;padding:10px 14px; font-family:"Archivo",system-ui,sans-serif;font-size:13.5px;font-weight:600; color:var(--ink,#222);cursor:pointer;transition:background .12s ease} .xp-btn:hover{background:var(--row,#f7f7f6)} .xp-chev{font-size:15px;flex:0 0 auto;transition:transform .22s cubic-bezier(.34,1.56,.64,1); display:inline-block} .xp.open .xp-chev{transform:rotate(180deg)} .xp-body{display:grid;grid-template-rows:0fr;overflow:hidden; transition:grid-template-rows .24s ease} .xp.open .xp-body{grid-template-rows:1fr} .xp-inner{min-height:0;padding:0 14px} .xp.open .xp-inner{padding:10px 14px 14px} .hfoot{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:11.5px;line-height:1.5; color:var(--ink-3,#8b8b8b);font-family:"Archivo",system-ui,sans-serif; font-variant-numeric:tabular-nums;border-top:1px solid var(--line,#e4e4e1); padding-top:6px;margin-top:8px} .hfoot b{color:var(--ink-2,#5b5b5b);font-weight:600}.outlet-ic{width:12px;height:12px;flex-shrink:0}.fl-root{--blue:#008fd5;--red:#fc4f30;--gold:#e5ae38;--green:#6d904f;--ink:#222;--ink-2:#5b5b5b;--ink-3:#8b8b8b;--line:#e4e4e1;--rule:#d7d7d4;--row:#f7f7f6;max-width:780px;margin:0 auto;padding:40px 24px 90px;font-family:"Archivo",system-ui,sans-serif;color:var(--ink);font-variant-numeric:tabular-nums} .fl-root h1{font-family:"Fraunces",Georgia,serif;font-weight:600;line-height:1.1;margin:0;letter-spacing:-.01em} .fl-root a{color:var(--blue);text-decoration:none;transition:opacity .1s ease-in}.fl-root a:hover{opacity:.7} /* .fl-tag (own copy of the shared honesty-tag chip) removed 2026-07-10 -- migrated to common/components.py::render_trust_tag() (.ttag), pulled in via the _COMPONENT_CSS prefix above; identical hex values, zero visual change. */ .fl-ribbon{height:4px;width:54px;border-radius:2px;margin:0 0 16px} .fl-eyebrow{font-size:12px;font-weight:700;letter-spacing:2px;color:var(--ink-3);animation:flslide .5s ease-out both} .fl-verdict{font-size:clamp(30px,4.4vw,46px);margin:10px 0 0;animation:flslide .6s ease-out both} .fl-subhead{font-size:17px;line-height:1.5;color:var(--ink-2);margin:14px 0 0;max-width:60ch;font-family:"Fraunces"} .fl-subhead b{color:var(--ink);font-weight:500} .fl-since{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-2);background:var(--row);border:1px solid var(--line);border-radius:3px;padding:5px 12px;margin:18px 0 0} .fl-dchip{font-weight:700;display:inline-flex;align-items:center;gap:3px} .fl-pulse{position:relative;width:7px;height:7px;border-radius:50%;background:var(--green);flex:0 0 auto} .fl-pulse::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--green);animation:flpulse 2.1s ease-out infinite} @keyframes flpulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.8);opacity:0}} .fl-pile-row{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;margin:22px 0 0} .fl-vpile{display:flex;align-items:center;filter:blur(10px);opacity:.4;transition:filter .5s ease-out,opacity .5s ease-out} .fl-pile-row.seen .fl-vpile{filter:none;opacity:1} .fl-ava{position:relative;width:34px;height:34px;border-radius:50%;border:2.5px solid #fff;margin-left:-11px;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.16);transform:rotate(var(--rot));transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s;background:var(--pc,#ccc)} .fl-ava:first-child{margin-left:0} .fl-ava>.fl-img{position:absolute;inset:0;border-radius:50%;overflow:hidden;background:var(--pc);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center} .fl-ava:hover{transform:rotate(0) scale(1.22) translateY(-7px);z-index:8;box-shadow:0 10px 22px rgba(0,0,0,.26)} .fl-vlabel{position:absolute;bottom:calc(100% + 9px);left:50%;transform:translateX(-50%) translateY(5px);background:var(--ink);color:#fff;font-size:11px;font-weight:600;padding:4px 9px;border-radius:3px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .12s,transform .12s} .fl-ava:hover .fl-vlabel{opacity:1;transform:translateX(-50%) translateY(0)} .fl-pile-cap{font-size:13px;color:var(--ink-2)}.fl-pile-cap b{font-family:"Fraunces";font-weight:600;font-size:19px;color:var(--ink)} .fl-dot{position:relative;width:16px;height:16px;border-radius:4px;background:var(--pc,#999);color:#fff;font-size:8.5px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;flex:0 0 auto} .fl-mark{display:inline-flex;align-items:center;justify-content:center;color:#fff} .fl-mark .outlet-ic{width:11px;height:11px} .fl-mark-lg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff} .fl-mark-lg .outlet-ic{width:26px;height:26px} .fl-sec{margin:46px 0 0}.fl-sec-label{font-size:12px;font-weight:700;letter-spacing:1.5px;color:var(--ink-3);margin:0 0 18px} .fl-faceoff{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch} @media(max-width:620px){.fl-faceoff{grid-template-columns:1fr;row-gap:6px}.fl-side{padding:0!important}.fl-vs{flex-direction:row!important;padding:8px 0!important}.fl-vs .bar{width:54px!important;height:1px!important}.fl-pole-tag{font-size:11.5px}} .fl-side{padding:0 20px;display:flex;flex-direction:column;text-align:left;opacity:0;transition:opacity .55s ease-out,transform .55s ease-out} .fl-side.left{transform:translateX(-26px)}.fl-side.right{transform:translateX(26px)} .fl-faceoff.seen .fl-side{opacity:1;transform:none} .fl-vs{opacity:0;align-self:center;display:flex;flex-direction:column;align-items:center;gap:7px;padding:0 6px;transition:opacity .4s ease-out .28s}.fl-faceoff.seen .fl-vs{opacity:1} .fl-vs .bar{width:1px;height:62px;background:var(--rule)}.fl-vs .vsx{font-family:"Fraunces";font-weight:600;font-size:14px;color:var(--ink-3);font-style:italic} .fl-head{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-size:11px;font-weight:700;letter-spacing:1.2px} .fl-head .fl-pdot{width:10px;height:10px;border-radius:50%}.fl-head .fl-pv{font-size:14px;font-weight:700} .fl-side.left .fl-pv{margin-left:auto}.fl-side.right .fl-head{flex-direction:row-reverse}.fl-side.right .fl-pv{margin-right:auto}.fl-side.right{text-align:right} .fl-side.right .fl-nrd,.fl-side.right .fl-nart,.fl-side.right .fl-pole-card{text-align:left} .fl-pole-card{background:#fff;border:1px solid var(--line);border-radius:8px;padding:14px 16px} .fl-pole-name{font-family:"Fraunces";font-weight:600;font-size:20px;color:var(--ink);line-height:1.1} .fl-pole-sub{font-size:12.5px;color:var(--ink-3);margin:5px 0 0} .fl-loud{display:grid;gap:12px} .fl-npod{display:flex;gap:13px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:12px 13px} .fl-npod-art{position:relative;width:52px;height:52px;border-radius:6px;flex:0 0 auto;overflow:hidden;background:#2b1a4a;display:flex;align-items:center;justify-content:center} .fl-npod-play{position:absolute;inset:0;background:rgba(20,8,40,.42);color:#fff;display:flex;align-items:center;justify-content:center;font-size:17px;text-decoration:none;transition:background .12s}.fl-npod-play:hover{background:rgba(20,8,40,.6)} .fl-npod-main{min-width:0;flex:1}.fl-npod-show{font-size:11px;font-weight:700;letter-spacing:.3px;color:#7a5bbf;margin:0 0 3px} .fl-npod-title{font-family:"Fraunces";font-size:14px;line-height:1.45;margin:0;color:var(--ink)} .fl-npod-foot{display:flex;align-items:center;gap:12px;margin:9px 0 0;font-size:12px;color:var(--ink-3);font-weight:600}.fl-npod-foot .fl-readit{margin-left:auto;color:var(--blue)} .fl-wave{display:inline-flex;align-items:flex-end;gap:2px;height:15px;color:#7a5bbf} .fl-wave span{width:2.5px;border-radius:2px;background:currentColor;display:block;height:6px} .fl-wave span:nth-child(1){animation:flw1 .80s steps(4) infinite alternate}.fl-wave span:nth-child(2){animation:flw2 .66s steps(4) infinite alternate}.fl-wave span:nth-child(3){animation:flw3 .90s steps(4) infinite alternate}.fl-wave span:nth-child(4){animation:flw4 .74s steps(4) infinite alternate}.fl-wave span:nth-child(5){animation:flw5 .70s steps(4) infinite alternate} @keyframes flw1{0%{height:5px}50%{height:13px}100%{height:7px}}@keyframes flw2{0%{height:10px}50%{height:5px}100%{height:13px}}@keyframes flw3{0%{height:6px}50%{height:14px}100%{height:8px}}@keyframes flw4{0%{height:11px}50%{height:6px}100%{height:5px}}@keyframes flw5{0%{height:7px}50%{height:12px}100%{height:6px}} .fl-ctx{font-size:12.5px;line-height:1.45;color:var(--ink-2);font-style:italic;margin:0 0 9px;padding-left:10px;border-left:2px solid var(--rule)}.fl-ctx b{font-style:normal;color:var(--ink)} .fl-nrd,.fl-nart{background:#fff;border:1px solid var(--line);border-radius:8px;padding:12px 14px;text-align:left} .fl-nrd-head{display:flex;align-items:center;gap:7px;font-size:12px;margin:0 0 8px}.fl-nrd-sub{font-weight:700} .fl-nrd-body,.fl-nart-quote{font-family:"Fraunces";font-size:14.5px;line-height:1.5;margin:0;color:var(--ink)} .fl-nrd-foot{display:flex;align-items:center;gap:14px;margin:11px 0 0;font-size:12px;color:var(--ink-3);font-weight:600} .fl-vote .uv{color:#fc4f30;font-size:13px}.fl-vote .dv{color:var(--ink-3);opacity:.5;font-size:13px}.fl-nrd-foot .fl-readit{margin-left:auto;color:var(--blue)} .fl-vibe{border-left:3px solid var(--red)} .fl-vibe-tag{margin-left:auto;font-size:10px;font-weight:700;letter-spacing:.5px;color:var(--red);background:#fdeae6;border-radius:3px;padding:1px 7px} .fl-vibe-note{font-size:11.5px;color:var(--ink-3);margin:9px 0 0;max-width:60ch} .fl-nart{display:block;transition:box-shadow .11s}.fl-nart:hover{box-shadow:0 4px 14px rgba(0,0,0,.09)} .fl-nart-head{display:flex;align-items:center;gap:7px;font-size:12px;margin:0 0 9px}.fl-nart-site{font-weight:700;color:var(--ink)}.fl-nart-quote{font-style:italic} .fl-nart-kind{margin-left:auto;font-size:10px;font-weight:700;letter-spacing:.4px;color:var(--ink-3);border:1px solid var(--line);border-radius:3px;padding:1px 6px} .fl-nart-url{display:inline-flex;gap:4px;font-size:12px;font-weight:600;color:var(--blue);margin:11px 0 0} .fl-axis{position:relative;height:108px;margin:22px 6px 0} .fl-axis-line{position:absolute;left:0;right:0;top:54px;height:2px;background:var(--rule);transform:scaleX(0);transform-origin:left;transition:transform .6s ease-out} .fl-axis.seen .fl-axis-line{transform:scaleX(1)} .fl-pole,.fl-pole-tag{opacity:0;transition:opacity .4s ease-out}.fl-axis.seen .fl-pole,.fl-axis.seen .fl-pole-tag{opacity:1} .fl-pole{position:absolute;top:54px;width:13px;height:13px;border-radius:50%;transform:translate(-50%,-50%);border:2.5px solid #fff;z-index:3;transition:opacity .4s ease-out,transform .15s cubic-bezier(.34,1.56,.64,1)} .fl-pole.lab{width:17px;height:17px}.fl-pole:hover{transform:translate(-50%,-50%) scale(1.5)} .fl-pole-tag{position:absolute;top:16px;transform:translateX(-50%);font-size:12.5px;font-weight:600;white-space:nowrap;text-align:center}.fl-pole-tag .n{font-size:11px;color:var(--ink-3);font-weight:400;display:block} .fl-axis-end{position:absolute;top:84px;font-size:11px;color:var(--ink-3);font-weight:600} .fl-consensus{background:var(--row);border:1px solid var(--line);border-radius:8px;padding:20px 22px} .fl-con-stat{display:flex;align-items:baseline;gap:12px}.fl-con-num{font-family:"Fraunces";font-weight:600;font-size:40px;line-height:1} .fl-con-cap{font-size:13px;color:var(--ink-3)}.fl-con-prose{font-family:"Fraunces";font-size:15px;line-height:1.5;color:var(--ink-2);margin:14px 0 12px}.fl-con-prose b{color:var(--ink)} .fl-thin{display:grid;gap:8px;max-width:380px}.fl-thin-row{display:flex;align-items:center;gap:10px;font-size:14px;padding:8px 12px;background:var(--row);border-radius:3px} .fl-thin-dot{width:10px;height:10px;border-radius:50%}.fl-thin-v{margin-left:auto;font-weight:600;color:var(--ink-2)} .fl-more{margin:26px 0 0;border-top:1px solid var(--rule);padding:16px 0 0} .fl-more>summary{font-size:13px;font-weight:600;color:var(--blue);cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:5px}.fl-more>summary::-webkit-details-marker{display:none}.fl-more[open]>summary{margin:0 0 16px} .fl-chips{display:flex;flex-wrap:wrap;gap:7px} .fl-chip{display:inline-flex;align-items:center;gap:7px;padding:6px 12px 6px 10px;border-radius:3px;background:#fff;border:1px solid var(--rule);font-size:13px;font-weight:600;color:var(--ink-2);cursor:pointer;transition:border-color .12s,color .12s} .fl-chip:hover{border-color:var(--ink-3);color:var(--ink)}.fl-chip .cdot{width:9px;height:9px;border-radius:50%;background:var(--cc,#999)}.fl-chip .csent{font-size:11px;color:var(--ink-3)} .fl-mix{font-size:11.5px;color:var(--ink-3);margin:12px 0 0} .fl-root [data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .55s ease-out,transform .55s ease-out}.fl-root [data-reveal].seen{opacity:1;transform:none} .fl-foot{margin:50px 0 0;padding:18px 0 0;border-top:1px solid var(--rule);font-size:12px;color:var(--ink-3);line-height:1.6} @keyframes flslide{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}} .fl-conflict{margin:20px 0 0;font-size:14px;font-family:"Fraunces";color:var(--ink-2);line-height:1.5}.fl-conflict b{color:var(--ink);font-weight:600} .fl-tp-sec{margin-top:40px} .fl-tp-bars{margin:14px 0 10px;display:flex;flex-direction:column;gap:9px} .fl-tp-row{display:grid;grid-template-columns:130px 1fr 36px;align-items:center;gap:10px} .fl-tp-label{font-family:"Archivo";font-size:13px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .fl-tp-track{background:var(--row);border-radius:2px;height:6px;overflow:hidden} .fl-tp-fill{height:100%;background:var(--blue);border-radius:2px;transition:width .6s ease-out} .fl-tp-pct{font-family:"Archivo";font-size:12px;font-weight:700;color:var(--ink);text-align:right} .fl-tp-note{font-size:11.5px;color:var(--ink-3);margin:0;line-height:1.5} @media(max-width:480px){.fl-tp-row{grid-template-columns:100px 1fr 32px}} @media(prefers-reduced-motion:reduce){.fl-root *{animation-duration:.001ms!important;transition-duration:.001ms!important}} /* Belief Check — grounding story card (The Room, doc 97) */ .bc-card { position: relative; background: #fff; border: 1px solid #dcdcdc; border-radius: 3px; padding: 18px 20px 20px; max-width: 560px; font-family: 'Archivo', system-ui, sans-serif; color: #222222; } .bc-ribbon { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--team, #222222); border-radius: 3px 0 0 3px; } .bc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .bc-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .02em; color: #6b6b6b; } .bc-chip { font-size: 12px; font-weight: 700; color: #fff; background: var(--chip, #6b6b6b); padding: 2px 8px; border-radius: 3px; } .bc-take { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 21px; line-height: 1.3; margin: 10px 0 16px; } .bc-tag { display: inline-block; font-family: 'Archivo', sans-serif; font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 3px; margin-right: 8px; vertical-align: middle; letter-spacing: .01em; } .bc-tag-read { background: #f0f0f0; color: #6b6b6b; } .bc-tag-fact { background: #e8f4ea; color: #6d904f; } .bc-viz { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 14px; } @media (max-width: 460px) { .bc-viz { grid-template-columns: 1fr; } } .bc-viz-h { font-size: 12px; font-weight: 700; color: #6b6b6b; margin-bottom: 7px; } .bc-bar { position: relative; height: 10px; background: #f0f0f0; border-radius: 3px; overflow: hidden; } .bc-bar-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; } .bc-bar-tick { position: absolute; top: -2px; bottom: -2px; width: 2px; background: #222222; overflow: visible; } .bc-mood { display: flex; height: 10px; border-radius: 3px; overflow: hidden; } .bc-mood span { display: block; height: 100%; } .bc-bar-legend { display: flex; justify-content: space-between; font-size: 12px; margin-top: 6px; color: #222222; } .bc-mute, .bc-bar-legend .bc-mute { color: #6b6b6b; } .bc-receipt { font-size: 13px; color: #222222; margin: 4px 0 0; } .bc-thin { font-size: 14px; color: #6b6b6b; line-height: 1.5; margin: 6px 0 0; } /* Arc Reactions — Fan Verdict module (The Room, doc 97) */ /* Arc reactions — Fan Verdict module (.arc-rx) */ @keyframes barIn { from { transform: scaleX(0); } to { transform: scaleX(1); } } .arc-rx { padding: clamp(14px, 1.8vw, 22px) clamp(16px, 2.0vw, 26px); background: rgba(34,34,34,.025); border: 1px solid var(--stroke-subtle, rgba(34,34,34,.08)); border-radius: 3px; margin-bottom: clamp(20px, 3vw, 32px); } .arc-rx__eyebrow { font: 700 11px/1 var(--sans, "Archivo", system-ui, sans-serif); letter-spacing: .14em; color: var(--fg-muted, #8b8b8b); margin: 0 0 4px; } .arc-rx__heading { font: 600 clamp(17px, 1.2vw + 8px, 22px)/1.15 var(--sans, "Archivo", system-ui, sans-serif); color: var(--fg-primary, #222); margin: 0 0 clamp(12px, 2vw, 20px); } .arc-rx__list { display: grid; gap: 0; } .arc-rx__item { animation: riseIn .4s ease-out both; animation-delay: calc(var(--ai, 0) * 90ms); padding-bottom: clamp(12px, 1.5vw, 18px); } .arc-rx__item + .arc-rx__item { padding-top: clamp(12px, 1.5vw, 18px); border-top: 1px solid var(--stroke-subtle, rgba(34,34,34,.08)); } .arc-rx__question { font: 400 italic clamp(13px, .9vw + 7px, 16px)/1.4 var(--serif, "Fraunces", Georgia, serif); color: var(--fg-primary, #222); margin: 0 0 8px; } .arc-rx__meta { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; } .arc-rx__velocity { font: 700 9px/1 var(--sans, "Archivo", system-ui, sans-serif); letter-spacing: .06em; color: var(--fg-muted, #8b8b8b); } .arc-rx__velocity.gaining { color: var(--green, #6d904f); } .arc-rx__velocity.settling { color: var(--fg-muted, #8b8b8b); } .arc-rx__freshness { font: 400 9px/1 var(--sans, "Archivo", system-ui, sans-serif); color: var(--fg-muted, #8b8b8b); } /* "Previously on" context line — sets up the arc before the question */ .arc-rx__context { font: 400 italic 10px/1.45 var(--sans, "Archivo", system-ui, sans-serif); color: var(--fg-muted, #8b8b8b); margin: 0 0 5px; } .arc-rx__cta { font: 700 11px/1 var(--sans, "Archivo", system-ui, sans-serif); color: var(--blue, #008fd5); text-decoration: none; margin-left: auto; } .arc-rx__cta:hover { text-decoration: underline; } /* Diverging sentiment bar — labeled ~read */ .arc-rx__bar-wrap { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; } .arc-rx__bar { height: 4px; background: #e0e0e0; border-radius: 2px; display: flex; overflow: hidden; } .arc-rx__bar-neg { background: var(--red, #fc4f30); transform-origin: left; animation: barIn .6s cubic-bezier(.34,1.56,.64,1) both; animation-delay: calc(var(--ai, 0) * 90ms + 160ms); } .arc-rx__bar-pos { background: var(--green, #6d904f); transform-origin: right; animation: barIn .6s cubic-bezier(.34,1.56,.64,1) both; animation-delay: calc(var(--ai, 0) * 90ms + 160ms); } .arc-rx__read-tag { font: 400 italic 9px/1 var(--sans, "Archivo", system-ui, sans-serif); color: var(--fg-muted, #8b8b8b); align-self: flex-end; } /* Quotes */ .arc-rx__quotes { animation: blurIn .4s ease-out both; animation-delay: calc(var(--ai, 0) * 90ms + 280ms); display: grid; gap: 8px; } .arc-rx__quotes.split { grid-template-columns: 1fr 1fr; } .arc-rx__quote { margin: 0; padding: 8px 10px; background: rgba(34,34,34,.03); border-left: 3px solid var(--stroke-subtle, rgba(34,34,34,.12)); border-radius: 0 2px 2px 0; } .arc-rx__quote-text { font: 400 12px/1.5 var(--sans, "Archivo", system-ui, sans-serif); color: var(--fg-primary, #222); display: block; margin: 0 0 4px; } .arc-rx__quote-src { display: flex; align-items: center; font: 400 10px/1 var(--sans, "Archivo", system-ui, sans-serif); color: var(--fg-muted, #8b8b8b); } .arc-rx__quote-src .src-ic { width: 10px; height: 10px; margin-right: 3px; } /* Pending arc — unresolved storyline, pulsing gold accent */ .arc-rx__item.pending { border-left: 3px solid var(--gold, #e5ae38); padding-left: 10px; border-radius: 0 3px 3px 0; animation: riseIn .4s ease-out both, pendingPulse 2.5s ease-in-out infinite; animation-delay: calc(var(--ai, 0) * 90ms), calc(var(--ai, 0) * 90ms + .5s); } @keyframes pendingPulse { 0%,100% { border-left-color: var(--gold, #e5ae38); } 50% { border-left-color: rgba(229,174,56,.25); } } @media (max-width: 600px) { .arc-rx__quotes.split { grid-template-columns: 1fr; } } .src-ic{width:11px;height:11px;margin-right:3px;vertical-align:-1.5px;flex-shrink:0} /* Discourse Arcs — "What fans are arguing" (The Room, Phase 6) */ /* Discourse Arcs — "What fans are saying" (Phase 6, doc-90 light) */ .da{margin:clamp(20px,3vw,30px) 0;} .da-head{margin-bottom:14px;} .da-title{font:600 1.15rem/1.25 'Fraunces',Georgia,serif;color:var(--ink,#222222);margin:0 0 4px;} .da-honesty{font:400 .78rem/1.4 'Archivo',sans-serif;color:var(--ink-2,#5b5b5b);margin:0;} .da-cards{display:flex;flex-direction:column;gap:12px;} .da-card{background:var(--panel,#f0f0f0);border:1px solid var(--line,#e4e4e1); border-radius:3px;padding:14px 16px;border-left:2px solid var(--red,#fc4f30); scroll-margin-top:52px;} .da-card.da-media{border-left-color:var(--ink-3,#8b8b8b);} .da-card:focus-visible{outline:2px solid var(--ink,#222222);outline-offset:2px;} .da-eyebrow{display:flex;align-items:baseline;justify-content:space-between; gap:10px;margin-bottom:8px;flex-wrap:wrap;} .da-aspect{font:600 .68rem/1 'Archivo',sans-serif;letter-spacing:.04em; text-transform:capitalize;color:var(--ink-2,#5b5b5b);} .da-prevalence{font:600 .72rem/1 'Archivo',sans-serif;color:var(--ink-2,#5b5b5b); border-left:1px solid var(--line,#e4e4e1);padding-left:8px;} .da-headline{font:600 1.05rem/1.3 'Fraunces',Georgia,serif;color:var(--ink,#222222); margin:0 0 8px;text-wrap:balance;} .da-receipt{margin:0 0 10px;padding-left:12px;border-left:2px solid var(--line,#e4e4e1);} .da-receipt p{font:400 .92rem/1.5 'Archivo',sans-serif;color:var(--ink,#222222);margin:0;} .da-provenance{font:400 .75rem/1.4 'Archivo',sans-serif;color:var(--ink-2,#5b5b5b);margin:0;} .da-more{margin-top:10px;} .da-more summary{font:600 .82rem/1 'Archivo',sans-serif;color:#1a5dad;cursor:pointer; list-style:none;padding:6px 0;} .da-more summary::-webkit-details-marker{display:none;} .da-more summary:focus-visible{outline:2px solid var(--ink,#222222);outline-offset:2px;} .da-extra{display:flex;flex-direction:column;gap:12px;margin-top:10px;} @media(prefers-reduced-motion:reduce){.da-card{transition:none;}} /* Aggregate mood card — Phase 7 half 1, reuses discourse_arcs.py's .da-card shell */ .da-card.da-mood-positive{border-left-color:var(--green,#6d904f);} .da-card.da-mood-negative{border-left-color:var(--red,#fc4f30);} /* Conference Standing — Brief §10.2-10.3 */ /* Conference Standing — Brief §10.2-10.3 */ .conference-standing { display: grid; gap: clamp(10px, 1.4vw, 16px); padding: clamp(14px, 1.8vw, 20px) clamp(16px, 2.0vw, 24px); background: rgba(34, 34, 34, 0.025); border: 1px solid var(--stroke-subtle, rgba(34, 34, 34, 0.08)); border-radius: 3px; margin-bottom: clamp(20px, 3vw, 32px); font-variant-numeric: tabular-nums; } .conference-standing__header { display: grid; gap: 4px; } .conference-standing__eyebrow { font-family: var(--font-sans, system-ui, sans-serif); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: none; color: var(--fg-muted); margin: 0; } .conference-standing__title { font-family: var(--font-display, 'Archivo', 'Archivo', system-ui, sans-serif); font-size: clamp(22px, 1.8vw + 10px, 30px); font-weight: 400; line-height: 1; letter-spacing: 0.03em; text-transform: none; color: var(--fg-primary); margin: 0; } .conference-standing__summary { font-family: var(--font-serif, 'Fraunces', Georgia, serif); font-size: 14px; font-style: italic; line-height: 1.4; color: var(--fg-secondary); margin: 0; } .conference-standing__table { width: 100%; border-collapse: collapse; font-family: var(--font-sans, system-ui, sans-serif); } .conference-standing__table thead th { font-size: 10px; font-weight: 700; letter-spacing: 0.10em; text-transform: none; color: var(--fg-muted); text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--stroke-subtle, rgba(34, 34, 34, 0.08)); } .conference-standing__table tbody td { padding: 8px; font-size: 13px; color: var(--fg-secondary); border-bottom: 1px solid var(--stroke-subtle, rgba(34, 34, 34, 0.05)); } .conference-standing__table tbody tr:last-child td { border-bottom: none; } .conference-standing__table .conference-standing__row--focal { background: color-mix(in oklab, var(--accent-primary, #c9a24a) 12%, transparent); border-left: 3px solid var(--accent-primary, #c9a24a); } .conference-standing__table .conference-standing__row--focal td { color: var(--fg-primary); font-weight: 700; } .conference-standing__table .conference-standing__rank { font-family: var(--font-display, 'Archivo', 'Archivo', system-ui, sans-serif); font-size: 16px; letter-spacing: 0.02em; color: var(--accent-primary, #c9a24a); font-weight: 400; } .conference-standing__table .conference-standing__team-link { color: inherit; text-decoration: none; } .conference-standing__table .conference-standing__team-link:hover { text-decoration: underline; } .conference-standing__table .conference-standing__record { font-family: var(--font-mono, monospace); font-size: 12px; } /* Ceiling/Floor projection — Brief §11.2 */ /* Ceiling/Floor projection — Brief §11.2 */ .ceiling-floor { display: grid; gap: clamp(10px, 1.2vw, 16px); padding: clamp(14px, 1.8vw, 20px) clamp(16px, 2.0vw, 24px); background: rgba(34, 34, 34, 0.025); border: 1px solid var(--stroke-subtle, rgba(34, 34, 34, 0.08)); border-radius: 3px; margin-bottom: clamp(20px, 3vw, 32px); font-variant-numeric: tabular-nums; } .ceiling-floor__header { display: grid; gap: 4px; } .ceiling-floor__eyebrow { font-family: var(--font-sans, system-ui, sans-serif); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: none; color: var(--fg-muted); margin: 0; } .ceiling-floor__title { font-family: var(--font-display, 'Archivo', 'Archivo', system-ui, sans-serif); font-size: clamp(20px, 1.5vw + 10px, 26px); font-weight: 400; line-height: 1; letter-spacing: 0.02em; text-transform: none; color: var(--fg-primary); margin: 0; } /* Probability band — bell curve via gradient */ .ceiling-floor__band { position: relative; height: 56px; background: radial-gradient(circle at 50% 50%, rgba(201,162,74,0.32), transparent 65%), linear-gradient(180deg, rgba(34, 34, 34, 0.02), rgba(34, 34, 34, 0.02)); border-radius: 3px; overflow: hidden; border: 1px solid var(--stroke-subtle, rgba(34, 34, 34, 0.06)); } .ceiling-floor__band::before { /* The bell curve "spine" */ content: ""; position: absolute; inset: 8px 0; background: linear-gradient(90deg, color-mix(in oklab, #c95151 60%, transparent) 0%, color-mix(in oklab, var(--accent-primary, #c9a24a) 70%, transparent) 50%, color-mix(in oklab, #2c8f5a 60%, transparent) 100%); border-radius: 3px; filter: blur(8px); opacity: 0.45; } .ceiling-floor__marker { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--fg-primary); } .ceiling-floor__marker-label { position: absolute; top: 4px; font-family: var(--font-sans, system-ui, sans-serif); font-size: 9px; font-weight: 800; letter-spacing: 0.10em; text-transform: none; color: var(--fg-muted); white-space: nowrap; transform: translateX(-50%); } .ceiling-floor__marker-label--base { color: var(--accent-primary, #c9a24a); } .ceiling-floor__marker:first-child .ceiling-floor__marker-label { transform: translateX(0); } .ceiling-floor__marker:last-child .ceiling-floor__marker-label { transform: translateX(-100%); } /* Scenario cards */ .ceiling-floor__scenarios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .ceiling-floor__scenario { display: grid; gap: 4px; padding: 10px 12px; background: rgba(34, 34, 34, 0.025); border: 1px solid var(--stroke-subtle, rgba(34, 34, 34, 0.08)); border-radius: 3px; border-top: 3px solid var(--accent-primary, #c9a24a); } .ceiling-floor__scenario[data-kind="floor"] { border-top-color: #c95151; } .ceiling-floor__scenario[data-kind="base"] { border-top-color: var(--accent-primary, #c9a24a); } .ceiling-floor__scenario[data-kind="ceiling"] { border-top-color: #2c8f5a; } .ceiling-floor__scenario-kind { font-family: var(--font-sans, system-ui, sans-serif); font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: none; color: var(--fg-muted); } .ceiling-floor__scenario-record { font-family: var(--font-display, 'Archivo', 'Archivo', system-ui, sans-serif); font-size: clamp(20px, 1.4vw + 10px, 26px); font-weight: 400; line-height: 1; letter-spacing: 0.02em; color: var(--fg-primary); } .ceiling-floor__scenario-story { font-family: var(--font-serif, 'Fraunces', Georgia, serif); font-size: 12px; font-style: italic; line-height: 1.4; color: var(--fg-secondary); } .ceiling-floor__caveat { font-family: var(--font-sans, system-ui, sans-serif); font-size: 10px; font-style: italic; color: var(--fg-muted); margin: 0; opacity: 0.7; } @media (max-width: 640px) { .ceiling-floor__scenarios { grid-template-columns: 1fr; } .ceiling-floor { border-radius: 3px; } .ceiling-floor__marker-label { font-size: 8px; letter-spacing: 0.04em; } } /* Home-Field Advantage — Brief §11.3 */ /* Home-Field Advantage — Brief §11.3 */ .home-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 18px; padding: clamp(14px, 1.8vw, 20px) clamp(16px, 2.0vw, 24px); background: rgba(34, 34, 34, 0.025); border: 1px solid var(--stroke-subtle, rgba(34, 34, 34, 0.08)); border-left: 3px solid var(--accent-primary, #c9a24a); border-radius: 3px; margin-bottom: clamp(20px, 3vw, 32px); font-variant-numeric: tabular-nums; } .home-field__main { display: grid; gap: 4px; } .home-field__eyebrow { font-family: var(--font-sans, system-ui, sans-serif); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: none; color: var(--fg-muted); margin: 0; } .home-field__band { font-family: var(--font-display, 'Archivo', 'Archivo', system-ui, sans-serif); font-size: clamp(22px, 1.6vw + 10px, 30px); font-weight: 400; line-height: 1; letter-spacing: 0.02em; text-transform: none; color: var(--fg-primary); margin: 0; } .home-field__band--elite { color: #2c8f5a; } .home-field__band--strong { color: var(--accent-primary, #c9a24a); } .home-field__band--average { color: var(--fg-secondary); } .home-field__band--soft { color: #c98c1a; } .home-field__band--reversed { color: #c95151; } .home-field__story { font-family: var(--font-serif, 'Fraunces', Georgia, serif); font-size: 13px; font-style: italic; line-height: 1.4; color: var(--fg-secondary); margin: 0; max-width: 56ch; } .home-field__stats { display: grid; gap: 4px; align-self: center; text-align: right; min-width: 130px; } .home-field__stat-label { font-family: var(--font-sans, system-ui, sans-serif); font-size: 9px; font-weight: 700; letter-spacing: 0.10em; text-transform: none; color: var(--fg-muted); } .home-field__stat-value { font-family: var(--font-mono, monospace); font-size: 14px; font-weight: 600; color: var(--fg-primary); } @media (max-width: 640px) { .home-field { grid-template-columns: 1fr; } .home-field__stats { text-align: left; } } /* Moment of the Year — Brief §11.7 approximation */ /* Moment of the Year — Brief §11.7 adaptation */ .moment-of-year { display: grid; gap: clamp(10px, 1.2vw, 14px); padding: clamp(16px, 2.0vw, 22px) clamp(18px, 2.2vw, 26px); background: linear-gradient(180deg, color-mix(in oklab, var(--accent-primary, #c9a24a) 6%, transparent), rgba(34, 34, 34,0.02)); border: 1px solid var(--stroke-subtle, rgba(34, 34, 34,0.08)); border-left: 4px solid var(--accent-primary, #c9a24a); border-radius: 3px; margin-bottom: clamp(20px, 3vw, 32px); font-variant-numeric: tabular-nums; } .moment-of-year__eyebrow { font-family: var(--font-sans, system-ui, sans-serif); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: none; color: var(--fg-muted); margin: 0; } .moment-of-year__headline { font-family: var(--font-display, 'Archivo', system-ui, sans-serif); font-size: clamp(24px, 1.8vw + 12px, 34px); font-weight: 400; line-height: 1.05; letter-spacing: 0.02em; text-transform: none; color: var(--fg-primary); margin: 0; } .moment-of-year__headline--win { color: #2c8f5a; } .moment-of-year__headline--loss { color: #c95151; } .moment-of-year__story { font-family: var(--font-serif, 'Fraunces', Georgia, serif); font-size: clamp(14px, 0.4vw + 13px, 17px); line-height: 1.45; color: var(--fg-secondary); margin: 0; max-width: 64ch; } .moment-of-year__meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-family: var(--font-sans, system-ui, sans-serif); font-size: 11px; font-weight: 600; letter-spacing: 0.10em; text-transform: none; color: var(--fg-muted); } .moment-of-year__chip { padding: 2px 8px; background: rgba(34, 34, 34, 0.04); border-radius: 3px; color: var(--accent-primary, #c9a24a); } /* Offseason Ledger — deterministic "what changed" event feed (no LLM). */ .offseason-ledger { margin-bottom: clamp(20px, 3vw, 32px); padding: clamp(16px, 2.2vw, 24px) clamp(18px, 2.4vw, 28px); background: rgba(34, 34, 34, 0.018); border: 1px solid var(--stroke-subtle, rgba(34, 34, 34, 0.08)); border-left: 3px solid var(--accent-primary, #c9a24a); border-radius: 3px; font-variant-numeric: tabular-nums; } .olg-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: clamp(10px, 1.4vw, 16px); border-bottom: 1px dashed var(--stroke-subtle, rgba(34, 34, 34, 0.07)); padding-bottom: 10px; } .olg-title { font-family: var(--font-display, 'Archivo', system-ui, sans-serif); font-size: clamp(18px, 1.2vw + 10px, 24px); font-weight: 400; letter-spacing: 0.04em; text-transform: none; color: var(--fg-primary); margin: 0; } .olg-sub { font-family: var(--font-sans, system-ui, sans-serif); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: none; color: var(--fg-muted); white-space: nowrap; } .olg-list { list-style: none; margin: 0; padding: 0; } .olg-row { display: grid; grid-template-columns: 84px 1fr auto; gap: clamp(10px, 1.4vw, 16px); align-items: start; padding: clamp(10px, 1.3vw, 14px) 0; border-bottom: 1px solid var(--stroke-subtle, rgba(34, 34, 34, 0.05)); } .olg-row:last-child { border-bottom: 0; padding-bottom: 0; } .olg-tag { font-family: var(--font-sans, system-ui, sans-serif); font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: none; padding: 3px 8px; border-radius: 3px; align-self: start; white-space: nowrap; text-align: center; } .olg-portal { background: rgba(79, 157, 107, 0.12); color: #3f7d56; } .olg-recruit { background: rgba(201, 162, 74, 0.14); color: #9a7522; } .olg-coach { background: rgba(81, 113, 201, 0.12); color: #3f5aa0; } .olg-news { background: rgba(34, 34, 34, 0.06); color: var(--fg-muted); } .olg-body { min-width: 0; } .olg-action { font-family: var(--font-serif, 'Fraunces', Georgia, serif); font-size: clamp(14px, 0.5vw + 12px, 16px); line-height: 1.3; color: var(--fg-primary); margin: 0; overflow-wrap: anywhere; } .olg-why { font-family: var(--font-sans, system-ui, sans-serif); font-size: 12px; line-height: 1.4; color: var(--fg-secondary); margin: 4px 0 0 0; } .olg-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; text-align: right; white-space: nowrap; } .olg-date { font-family: var(--font-mono, ui-monospace, monospace); font-size: 11px; color: var(--fg-secondary); } .olg-src { font-family: var(--font-sans, system-ui, sans-serif); font-size: 10px; color: var(--fg-muted); text-decoration: none; } a.olg-src:hover { opacity:.8; text-decoration: underline; } @media (max-width: 560px) { .olg-row { grid-template-columns: 70px 1fr; } .olg-meta { grid-column: 2; align-items: flex-start; text-align: left; flex-direction: row; gap: 10px; margin-top: 2px; } } /* Story Right Now — structured beat storyline surface (Tier-B story engine) */ :root{--page:#fff;--panel:#f0f0f0;--ink:#222;--mut:#666;--line:#dcdcdc; --blue:#008fd5;--red:#fc4f30;--gold:#e5ae38;--green:#6d904f;--navy:#23243f} *{box-sizing:border-box} .sn-wrap{max-width:1080px;margin:0 auto;padding:26px 20px 90px; font-family:Archivo,system-ui,sans-serif;color:var(--ink);line-height:1.45} .sn-kicker{font:700 12px/1 Archivo;letter-spacing:.08em;color:var(--mut); display:inline-flex;gap:8px;align-items:center;text-transform:none} .sn-dot{width:7px;height:7px;border-radius:50%;background:var(--blue);display:inline-block} /* since-you-last-looked banner — display:flex so JS innerHTML reveals it; :empty keeps it invisible before JS runs (no flash of empty space) */ .sylb{display:flex;align-items:center;gap:12px;background:#eef7ee;border:1px solid #c7e3c4; border-left:3px solid var(--green);border-radius:3px;padding:12px 15px;margin:0 0 22px; font:500 14px/1.4 Archivo;color:#2c4a2a} .sylb:empty{display:none} .sylb b{font-weight:800} .sylb .reset,.sylb button.reset{margin-left:auto;font:600 11px Archivo;color:var(--mut);cursor:pointer; text-decoration:underline;background:none;border:none;padding:0} .sylb.firsttime{background:#f0f0f0;border-color:#dcdcdc;border-left-color:var(--blue);color:#444} /* section + team strip */ .story-now{border-top:3px solid var(--navy);padding-top:18px;margin:34px 0} .team-now{border-top:4px solid var(--accent);padding-top:16px} .sn-head{display:flex;align-items:baseline;gap:12px} .tn-kicker{color:var(--accent)} .tn-kicker .sn-dot{background:var(--accent)} .sn-count{margin-left:auto;font:600 12px Archivo;color:var(--mut)} .sn-h{font:600 25px/1.15 Fraunces;margin:8px 0 6px;letter-spacing:-.01em} .sn-dek{font:400 15px/1.5 Archivo;color:#444;margin:0 0 16px;max-width:62ch} /* open question */ .sn-q{font:500 16px/1.45 Fraunces;color:#1a1a1a;margin:6px 0 16px;padding:10px 14px; background:#f7f7f7;border-left:3px solid var(--accent);border-radius:0 3px 3px 0} .sn-q-lbl{display:block;font:700 9px Archivo;letter-spacing:.06em;color:var(--mut); margin-bottom:2px} /* lede storyline */ .lede{border:1px solid var(--line);border-top:4px solid var(--accent);border-radius:3px; padding:16px 18px 24px;margin:0 0 14px;background:#fff; animation:slideIn .24s ease-out both; transition:opacity .1s ease-in} .lede:hover{opacity:.94} .lede-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px} .lede-sum{font:600 22px/1.25 Fraunces;color:#141414;margin:2px 0 10px;letter-spacing:-.01em} .lede-fact{font:500 13px/1.4 Archivo;color:var(--ink-2,#5b5b5b);margin:0 0 10px; padding:5px 10px;background:var(--panel,#f0f0f0);border-radius:3px; display:flex;align-items:baseline;gap:8px;flex-wrap:wrap} .fact-lbl{font:700 8px Archivo;letter-spacing:.06em;color:var(--mut,#8b8b8b); white-space:nowrap;flex:0 0 auto} .lede-ctx{font-size:14px} /* the feed of beat cards */ .sn-feed,.desk-feed{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(330px,1fr))} .bcard{display:flex;border:1px solid var(--line);border-radius:3px;background:#fff;overflow:hidden; animation:riseIn .2s calc(var(--bi,0)*.06s) ease-out both; transition:opacity .1s ease-in} .bcard:hover{opacity:.94} .bc-ribbon{flex:0 0 4px;background:var(--accent)} .bc-body{flex:1;min-width:0;padding:12px 14px} .bc-top{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:5px} .chip{font:700 10px/1 Archivo;letter-spacing:.02em;color:#333;background:var(--panel); padding:3px 7px;border-radius:3px} .bc-when{font:600 11px Archivo;color:var(--mut)} .tag{display:inline-block;font:700 9px/1 Archivo;letter-spacing:.03em;padding:3px 5px;border-radius:3px} .tag.fact{background:#e7f4fb;color:#0a5e88;border:1px solid #bfe0f2} .tag.read{background:#fdf9ee;color:#7a6010;border:1px solid #e8d99c} .tag.attributed{background:#f3edf9;color:#5b3a8f;border:1px solid #ddc9f2} .infl{color:var(--gold);font-size:13px;line-height:1} .bc-team{font:700 11px Archivo;letter-spacing:.02em;color:var(--accent);margin:0 0 2px} .bc-sum{font:500 15px/1.4 Fraunces;color:#161616;margin:2px 0 8px} .bc-fact{font:500 12px/1.35 Archivo;color:#5b5b5b;margin:0 0 8px;padding:3px 8px; background:#f0f0f0;border-radius:3px;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap} .bc-ctx{font:500 13px/1.4 Archivo;color:#2a2a2a;margin:0 0 10px;padding:6px 10px; background:#f1f7fb;border-left:3px solid var(--blue);border-radius:0 3px 3px 0} .ctx-lbl{display:block;font:700 8px Archivo;letter-spacing:.06em;color:#0a5e88; margin-bottom:2px} /* LLM editorial note — gold border signals editorial interpretation vs blue for data */ .bc-our-read{font:500 13px/1.4 Archivo;color:#2a2a2a;margin:0 0 10px;padding:6px 10px; background:#fdf9ee;border-left:3px solid var(--gold);border-radius:0 3px 3px 0} .our-read-lbl{display:block;font:700 8px Archivo;letter-spacing:.06em;color:#7a6010; margin-bottom:2px} .lede-our-read{font-size:14px} .newpill{display:none;background:var(--green);color:#fff;font:700 8px Archivo;letter-spacing:.04em; padding:2px 5px;border-radius:3px} .bcard.isnew .newpill,.lede.isnew .newpill{display:inline-block} .bcard.isnew{box-shadow:inset 0 0 0 2px #c7e3c4} .lede.isnew{box-shadow:inset 0 0 0 2px #c7e3c4} /* thin 'our read' tension meter */ .meter{position:relative;height:5px;background:#eee;border-radius:3px;overflow:hidden} .meter-fill{position:absolute;inset:0;width:0;background:linear-gradient(90deg,#cfe6f5,#008fd5); border-radius:3px} .meter-lbl{position:absolute;left:0;top:8px;font:600 9px Archivo;color:#9a9a9a;letter-spacing:.02em; white-space:nowrap} .bc-body{padding-bottom:26px} /* national desks */ .desk{margin:0 0 30px} .desk-h{font:600 17px/1 Fraunces;margin:0 0 12px;display:flex;align-items:center;gap:9px} .desk-n{font:700 11px Archivo;color:#fff;background:var(--navy);border-radius:3px;padding:2px 7px} .hero-desk .desk-h{color:var(--red)} .hero-desk .desk-n{background:var(--red)} .empty{color:var(--mut);font:500 14px Archivo} /* compact ranked tail (de-monotonizes long leaderboards) */ .rest{margin-top:10px} .rest>summary{font:600 12px Archivo;color:var(--blue);cursor:pointer;list-style:none; padding:6px 0;user-select:none} .rest>summary::-webkit-details-marker{display:none} .rest>summary::before{content:"▸ ";color:var(--mut)} .rest[open]>summary::before{content:"▾ "} .rest-grid{display:grid;gap:0;grid-template-columns:repeat(auto-fill,minmax(330px,1fr))} .rest-row{display:flex;gap:8px;align-items:baseline;padding:5px 0 5px 9px; border-left:2px solid var(--accent);margin:3px 0} .rest-team{font:700 12px Archivo;color:#222;white-space:nowrap} .rest-sum{font:500 13px Archivo;color:#444} .sn-foot{margin-top:30px;font:400 12px/1.55 Archivo;color:var(--mut); border-top:1px solid var(--line);padding-top:12px;max-width:80ch} /* verdict strip -- how past storylines here turned out (D-081 Phase 2) */ .verdict-strip{margin-top:22px;padding-top:14px;border-top:1px solid var(--line)} .verdict-strip h4{font:700 11px Archivo;letter-spacing:.06em;color:var(--mut);margin:0 0 10px} .verdict-row{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap; border-left:3px solid var(--vaccent);padding:4px 0 4px 10px;margin-bottom:6px} .verdict-tag{font:700 10px/1 Archivo;letter-spacing:.03em;white-space:nowrap} .verdict-txt{font:500 13px/1.4 Archivo;color:#333} .verdict-txt a{color:var(--blue);font-weight:700;text-decoration:none} .verdict-txt a:hover{text-decoration:underline} /* Arc Hub entry — link to /arcs/teams// (§13.4) */ /* Arc hub — active storylines card list on team pages */ .team-arc-hub{margin:0 0 24px} .team-arc-hub__h{font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:1rem; color:var(--ink);margin-bottom:10px;padding-bottom:8px; border-bottom:1px solid rgba(34,34,34,.12)} .team-arc-hub__list{display:flex;flex-direction:column;gap:8px} .arc-entry{border:1px solid rgba(34,34,34,.12);border-left:4px solid var(--accent-primary,rgba(34,34,34,.3)); border-radius:3px;padding:11px 14px;background:var(--page);text-decoration:none;color:inherit; display:block} .arc-entry:hover{border-color:rgba(34,34,34,.3);border-left-color:var(--accent-primary,rgba(34,34,34,.3))} .arc-entry__heat{font-size:11px;font-weight:700;letter-spacing:.04em; margin-bottom:4px} .arc-entry__heat--hot{color:var(--red,#fc4f30)} .arc-entry__heat--active{color:var(--gold,#e5ae38)} .arc-entry__heat--cooling{color:var(--ink-3,#8b8b8b)} .arc-entry__title{font-size:13.5px;font-weight:600;line-height:1.35; color:var(--ink);margin-bottom:3px} .arc-entry__q{font-size:12.5px;color:var(--ink-2,#5b5b5b);line-height:1.4} .team-arc-hub__footer{font-size:12.5px;margin-top:8px} .team-arc-hub__footer a{color:var(--blue,#008fd5);font-weight:600;text-decoration:none} .team-arc-hub__footer a:hover{text-decoration:underline} /* Team Canon hub — "Featured in The Canon" (2026-07-08) */ /* Team Canon hub — "Featured in The Canon" card list on team pages (2026-07-08) */ .team-canon-hub{margin:0 0 24px} .team-canon-hub__h{font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:1rem; color:var(--ink);margin-bottom:10px;padding-bottom:8px; border-bottom:1px solid rgba(34,34,34,.12)} .team-canon-hub__list{display:flex;flex-direction:column;gap:8px} .canon-hub-entry{border:1px solid rgba(34,34,34,.12);border-left:4px solid var(--gold,#e5ae38); border-radius:3px;padding:11px 14px;background:var(--page);text-decoration:none;color:inherit; display:block} .canon-hub-entry:hover{border-color:rgba(34,34,34,.3);border-left-color:var(--gold,#e5ae38)} .canon-hub-entry__rank{font-size:11px;font-weight:700;letter-spacing:.04em; color:var(--gold,#e5ae38);margin-bottom:4px} .canon-hub-entry__title{font-size:13.5px;font-weight:600;line-height:1.35; color:var(--ink);margin-bottom:3px} .canon-hub-entry__list-name{font-size:12.5px;color:var(--ink-2,#5b5b5b);line-height:1.4} .team-canon-hub__footer{font-size:12.5px;margin-top:8px} .team-canon-hub__footer a{color:var(--blue,#008fd5);font-weight:600;text-decoration:none} .team-canon-hub__footer a:hover{text-decoration:underline} /* Portal snapshot chip (2026-07-08) */ /* Portal snapshot — links to /topics/portal/ + /portal-heat/ (2026-07-08) */ .portal-snapshot{border:1px solid rgba(34,34,34,.12);border-left:4px solid var(--blue,#008fd5); border-radius:3px;padding:12px 14px;margin:0 0 24px;background:var(--page)} .portal-snapshot__h{font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:1rem; color:var(--ink);margin-bottom:6px} .portal-snapshot__net{font-size:15px;font-weight:700;margin-bottom:8px} .portal-snapshot__net--up{color:var(--green,#6d904f)} .portal-snapshot__net--down{color:var(--red,#fc4f30)} .portal-snapshot__net--flat{color:var(--ink-3,#8b8b8b)} .portal-snapshot__raw{display:block;font-size:12px;color:var(--ink-3,#8b8b8b);margin:-4px 0 8px} .portal-snapshot__footer{font-size:12.5px;margin-top:8px} .portal-snapshot__footer a{color:var(--blue,#008fd5);font-weight:600;text-decoration:none;margin-right:12px} .portal-snapshot__footer a:hover{text-decoration:underline} /* Position ledger — dot+label+bar+signed-net row (fp-cs-rank-row shape, dm-bar's z-score-clamped-to-percent-track math, conference_pages/hub.py). */ .portal-ledger{display:flex;flex-direction:column} .portal-ledger__row{display:grid;grid-template-columns:14px 32px 1fr 48px; gap:8px;align-items:center;padding:5px 0;border-bottom:1px solid rgba(34,34,34,.08)} .portal-ledger__row:last-child{border-bottom:none} .portal-ledger__dot{width:8px;height:8px;border-radius:50%;flex-shrink:0} .portal-ledger__pos{font-family:"Archivo",system-ui,sans-serif;font-size:11px;font-weight:700; letter-spacing:.04em;color:var(--ink-2,#555)} .portal-ledger__bar-wrap{height:6px;background:rgba(34,34,34,.06);border-radius:2px; position:relative;overflow:hidden} .portal-ledger__bar-fill{position:absolute;top:0;height:100%;border-radius:2px} .portal-ledger__net{font-family:"Archivo",system-ui,sans-serif;font-size:12px;font-weight:700; text-align:right;font-variant-numeric:tabular-nums} .portal-ledger__chips{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:5px;margin:2px 0 4px 22px} .portal-ledger__chip{font-family:"Archivo",system-ui,sans-serif;font-size:10px;font-weight:600; letter-spacing:.03em;border-left:2px solid var(--ink-3,#8b8b8b);padding:1px 6px 1px 5px; background:rgba(34,34,34,.04);color:var(--ink-2,#555)} .portal-ledger__chip--risk{border-left-color:var(--red,#fc4f30);color:var(--red,#fc4f30)} .portal-ledger__chip--need{border-left-color:var(--gold,#e5ae38);color:var(--gold,#e5ae38)} .market-signals { display: grid; gap: clamp(10px, 1.2vw, 14px); padding: clamp(14px, 1.8vw, 20px) clamp(16px, 2vw, 24px); background: rgba(34, 34, 34, 0.025); border: 1px solid var(--stroke-subtle, rgba(34, 34, 34, 0.08)); border-radius: 3px; margin-bottom: clamp(20px, 3vw, 32px); } .market-signals__eyebrow { font-family: 'Archivo', var(--font-sans, system-ui, sans-serif); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: none; color: var(--fg-muted, #8b8b8b); margin: 0; } .market-signals__title { font-family: 'Archivo', var(--font-sans, system-ui, sans-serif); font-size: clamp(18px, 1.2vw + 8px, 22px); font-weight: 600; line-height: 1; color: var(--fg-primary, #222222); margin: 2px 0 0; } .market-signals__rows { display: grid; gap: 0; border-top: 1px solid var(--stroke-subtle, rgba(34, 34, 34, 0.08)); } .market-signals__row { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--stroke-subtle, rgba(34, 34, 34, 0.07)); font-variant-numeric: tabular-nums; } .market-signals__row:last-child { border-bottom: none; } .market-signals__label { font-family: 'Archivo', var(--font-sans, system-ui, sans-serif); font-size: 13px; color: var(--fg-secondary, #5b5b5b); } .market-signals__sublabel { font-size: 11px; color: var(--fg-muted, #8b8b8b); margin-left: 6px; } .market-signals__value { font-family: 'Fraunces', var(--font-serif, Georgia, serif); font-size: 20px; font-weight: 600; line-height: 1; color: var(--fg-primary, #222222); } .market-signals__value--muted { color: var(--fg-muted, #8b8b8b); font-size: 16px; } .market-signals__foot { font-family: 'Archivo', var(--font-sans, system-ui, sans-serif); font-size: 11px; color: var(--fg-muted, #8b8b8b); border-top: 1px solid var(--stroke-subtle, rgba(34, 34, 34, 0.07)); padding-top: 8px; margin: 0; } .market-signals__delta { font-family: 'Archivo', var(--font-sans, system-ui, sans-serif); font-size: 11px; font-weight: 700; margin-left: 8px; } .market-signals__delta--up { color: #6d904f; } .market-signals__delta--down { color: #fc4f30; } /* Backometer night band — fanbase belief verdict (Group Chat Noir) */ /* Backometer night band (Group Chat Noir, embedded in the light team page) */ .bm-band { margin: clamp(20px, 3vw, 32px) 0; border-radius: 3px; background: #ffffff; border: 1px solid rgba(34,34,34,0.12); overflow: hidden; } .bm-band__inner { padding: clamp(18px, 2.6vw, 30px) clamp(18px, 2.8vw, 32px); } .bm-band__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; } .bm-eyebrow { font-family: 'JetBrains Mono', 'SF Mono', 'Menlo', monospace; font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: none; color: #5b5b5b; } .bm-link { font-family: 'JetBrains Mono', 'SF Mono', 'Menlo', monospace; font-size: 11px; color: #5b5b5b; text-decoration: none; border-bottom: 1px solid rgba(34,34,34,0.12); } .bm-link:hover { opacity:.8; } .bm-verdict { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; } .bm-zone { font-family: 'Archivo', 'Arial Narrow', sans-serif; font-weight: 800; text-transform: none; line-height: 1; font-size: clamp(30px, 6vw, 52px); letter-spacing: .02em; color: var(--bm-zone); } .bm-score { font-family: 'Archivo', 'Arial Narrow', sans-serif; font-weight: 800; line-height: 1; color: var(--bm-zone); font-size: clamp(40px, 8vw, 68px); font-variant-numeric: tabular-nums; display: inline-flex; align-items: baseline; gap: 14px; } .bm-delta { font-family: 'JetBrains Mono', 'SF Mono', 'Menlo', monospace; font-size: 15px; font-weight: 500; } .bm-delta-unit { color: #5b5b5b; font-size: 12px; } .bm-chart { background: #f0f0f0; border: 1px solid rgba(34,34,34,0.12); border-radius: 3px; padding: 8px 10px; margin: 4px 0 14px; } .bm-chart svg { display: block; width: 100%; height: auto; } .bm-receipt { font-family: 'JetBrains Mono', 'SF Mono', 'Menlo', monospace; font-size: 12px; font-weight: 500; color: #5b5b5b; } @media (max-width: 520px) { .bm-chart { overflow-x: auto; -webkit-overflow-scrolling: touch; } .bm-chart svg { min-width: 520px; } } /* Rent Free night band — rival obsession readout (Group Chat Noir) */ /* Rent Free — two-sided rivalry obsession (doc-90 light, share-based) */ .rfx{margin:clamp(20px,3vw,30px) 0;background:var(--bg-card,#f0f0f0); border:1px solid var(--line,#e3e3e1);border-radius:3px;padding:clamp(16px,2.4vw,26px);} .rfx-eyebrow{font:600 .72rem/1 Archivo,sans-serif;letter-spacing:.04em; color:var(--text-3,#6b6b6b);margin-bottom:14px;} .rfx-trend{font:400 .82rem/1.5 Archivo,sans-serif;color:var(--text-2,#444); margin:0 0 16px;padding-bottom:14px;border-bottom:1px solid var(--line,#e3e3e1); display:flex;flex-wrap:wrap;align-items:baseline;gap:5px 10px;} .rfx-tlead{font-weight:700;color:var(--text-1,#222);} .rfx-trate{font-variant-numeric:tabular-nums;} .rfx-trank{color:var(--text-3,#6b6b6b);} .rfx-trank b{color:var(--text-2,#444);font-weight:600;} .rfx-tmv{font-weight:800;font-size:.78rem;font-variant-numeric:tabular-nums;letter-spacing:-.01em;} .rfx-tmv.up{color:#6d904f;}.rfx-tmv.dn{color:#008fd5;} .rfx-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,26px);} @media(max-width:560px){.rfx-cols{grid-template-columns:1fr;}} .rfx-h{font:600 1.02rem/1.2 'Fraunces','Source Serif 4',Georgia,serif; color:var(--text-1,#222);margin-bottom:12px;} .rfx-list{list-style:none;margin:0;padding:0;} .rfx-list li{display:grid;grid-template-columns:118px 1fr auto;align-items:center; gap:10px;padding:7px 0;border-top:1px solid var(--line,#e3e3e1);} .rfx-list li:first-child{border-top:none;} .rfx-list a,.rfx-list span{color:var(--text-1,#222);text-decoration:none; font:600 .9rem/1.2 Archivo,sans-serif;} .rfx-list a:hover{text-decoration:underline;} .rfx-bar{height:7px;background:#e3e3e1;border-radius:3px;overflow:hidden;} .rfx-fill{display:block;height:100%;background:var(--text-2,#444);} .rfx-pct{font:700 .82rem/1 Archivo,sans-serif;color:var(--text-1,#222); font-variant-numeric:tabular-nums;text-align:right;min-width:34px;} .rfx-sub{font:400 .72rem/1.4 Archivo,sans-serif;color:var(--text-3,#6b6b6b);margin-top:10px;} /* Board Pulse — forum diehard thread feed */ /* Board Pulse — §board-pulse */ .board-pulse { padding: clamp(14px, 1.8vw, 20px) clamp(16px, 2vw, 24px); background: rgba(34,34,34,0.025); border: 1px solid rgba(34,34,34,0.08); border-radius: 3px; margin-bottom: clamp(20px, 3vw, 32px); } .board-pulse__header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 12px; } .board-pulse__eyebrow { font-family: var(--font-sans, 'Archivo', system-ui, sans-serif); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; color: var(--fg-muted, #888); margin: 0; text-transform: none; } .board-pulse__attr { display: inline-flex; align-items: center; font-family: var(--font-sans, 'Archivo', system-ui, sans-serif); font-size: 11px; color: var(--fg-muted, #888); margin: 0; } .board-pulse__attr .src-ic { width: 10px; height: 10px; margin: 0 3px; } .bp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .bp-thread { display: grid; gap: 3px; } .bp-thread__title { font-family: var(--font-sans, 'Archivo', system-ui, sans-serif); font-size: clamp(13px, 1.1vw + 8px, 15px); font-weight: 500; color: var(--fg-primary, #222); line-height: 1.35; text-decoration: none; } .bp-thread__title:hover { text-decoration: underline; } a.bp-thread__title { color: #008fd5; } .bp-thread__meta { display: flex; gap: 8px; align-items: center; } .bp-thread__replies, .bp-thread__age { font-family: var(--font-sans, 'Archivo', system-ui, sans-serif); font-size: 11px; color: var(--fg-muted, #888); } .bp-thread + .bp-thread { padding-top: 10px; border-top: 1px solid rgba(34,34,34,0.06); } .src-ic{width:11px;height:11px;margin-right:3px;vertical-align:-1.5px;flex-shrink:0} /* Five Lenses — multi-source voice grid */ /* Five Lenses — §five-lenses */ .five-lenses { padding: clamp(14px, 1.8vw, 20px) clamp(16px, 2vw, 24px); background: var(--page, #ffffff); border: 1px solid rgba(34,34,34,0.10); border-radius: 3px; margin-bottom: clamp(20px, 3vw, 32px); } .five-lenses__header { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; } .fl-eyebrow { font-family: var(--font-sans, 'Archivo', system-ui, sans-serif); font-size: 11px; font-weight: 700; letter-spacing: 0.10em; color: var(--ink, #222); margin: 0; flex-shrink: 0; } .fl-subhead { font-family: var(--font-sans, 'Archivo', system-ui, sans-serif); font-size: 11px; color: var(--fg-muted, #888); margin: 0; } .fl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; } @media (max-width: 600px) { .fl-grid { grid-template-columns: 1fr; gap: 1px; background: rgba(34,34,34,0.08); border: 1px solid rgba(34,34,34,0.08); border-radius: 3px; overflow: hidden; } } .fl-card { padding: 12px 14px; background: rgba(34,34,34,0.025); border-radius: 3px; display: grid; gap: 6px; } @media (max-width: 600px) { .fl-card { border-radius: 0; background: var(--page, #ffffff); } } .fl-card__header { display: flex; align-items: center; justify-content: space-between; gap: 6px; } .fl-card__eyebrow { font-family: var(--font-sans, 'Archivo', system-ui, sans-serif); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; color: var(--fg-muted, #888); line-height: 1.2; } .fl-card__count { font-family: var(--font-sans, 'Archivo', system-ui, sans-serif); font-size: 10px; color: var(--fg-muted, #888); white-space: nowrap; background: rgba(34,34,34,0.06); padding: 1px 5px; border-radius: 2px; } .fl-card__title { font-family: var(--font-sans, 'Archivo', system-ui, sans-serif); font-size: clamp(12px, 1vw + 9px, 14px); font-weight: 500; line-height: 1.35; color: var(--ink, #222); text-decoration: none; display: block; } a.fl-card__title { color: #008fd5; } a.fl-card__title:hover { text-decoration: underline; } .fl-card__meta { font-family: var(--font-sans, 'Archivo', system-ui, sans-serif); font-size: 11px; color: var(--fg-muted, #888); margin: 0; line-height: 1.3; } /* ── Native receipt body (doc 97 P4) ── */ .fll-receipt { display: grid; gap: 5px; } /* Reddit subreddit badge */ .fll-sub { display: inline-flex; align-items: center; font: 700 10px/1 Archivo, system-ui, sans-serif; color: #fff; background: #FF4500; border-radius: 3px; padding: 2px 6px; width: fit-content; } /* Non-Reddit source pill */ .fll-src-pill { display: inline-flex; align-items: center; font: 600 10px/1 Archivo, system-ui, sans-serif; color: var(--fg-secondary, #555); background: rgba(34,34,34,.07); border-radius: 2px; padding: 2px 6px; width: fit-content; } /* Quote block */ .fll-quote { font: 400 .8rem/1.4 Archivo, system-ui, sans-serif; color: var(--fg-secondary, #555); font-style: italic; border-left: 2px solid var(--stroke-default, #e4e4e1); padding-left: 8px; margin: 0; } .fll-quote-link { color: inherit; text-decoration: none; } .fll-quote-link:hover { text-decoration: underline; color: var(--blue, #008fd5); } /* Footer attribution */ .fll-foot { display: flex; flex-wrap: wrap; gap: 2px 4px; align-items: center; font: 400 10px/1.3 Archivo, system-ui, sans-serif; color: var(--fg-tertiary, #8b8b8b); } .fll-user { font-weight: 600; color: var(--fg-secondary, #555); } .fll-score { font-variant-numeric: tabular-nums; } .fll-ago { } .fll-sub .src-ic, .fll-src-pill .src-ic { width: 9px; height: 9px; margin-right: 3px; vertical-align: -1px; } .src-ic{width:11px;height:11px;margin-right:3px;vertical-align:-1.5px;flex-shrink:0} .pcanon{margin:28px 0} .pcanon__header{margin-bottom:14px} .pcanon__eyebrow{font-family:'Archivo',sans-serif;font-size:11px;font-weight:700; letter-spacing:.08em;color:#8a8a84;margin:0 0 4px} .pcanon__title{font-family:'Fraunces',serif;font-weight:600;font-size:24px; line-height:1.15;color:#222;margin:0;text-wrap:balance} .pcanon__sub{font-family:'Archivo',sans-serif;font-size:13px;color:#6a6a64;margin:4px 0 0} /* Measured across the 158 PROFILED teams (not the corpus-wide spread, which is dominated by unprofiled trivia): 1 team has a single moment, 34 have two, 102 have three, 9 have four, 10 have five, 2 have six. Three is the case to design for; one and six are the cases that must not break. Only n=1 breaks, so only n=1 is special-cased: a lone card with a 1fr track ate every column and rendered as a full-width banner (Central Michigan). Capping the TRACK instead looks like the tidier fix and is a trap — at 340px three cards need 1040px and the grid is 1036, so Harvard's six silently re-wrapped 2-per-row and left a dead column. 1fr keeps every row full at 2..6; :only-child fixes the one case that isn't. */ .pcanon__grid{display:grid;gap:10px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr))} .pcanon__card:only-child{max-width:340px} .pcanon__card{position:relative;background:#f0f0f0;border-radius:3px; padding:14px 14px 14px 16px;border-left:4px solid var(--pcanon-accent,#7a7a74)} /* The slot is held open when the name already carries the year (~48% of moments), so every headline in the row starts on the same line. line-height and min-height must be the SAME explicit value: the filled chip's line box is 17.75px at this size, so a min-height guessed at 14px still left the blank card's headline 4px high. */ .pcanon__year{font-family:'Archivo',sans-serif;font-size:12px;font-weight:700; font-variant-numeric:tabular-nums;color:var(--pcanon-accent,#7a7a74); margin:0 0 2px;line-height:18px;min-height:18px} .pcanon__name{font-family:'Fraunces',serif;font-weight:600;font-size:17px; line-height:1.2;color:#222;margin:0;text-wrap:balance} .pcanon__name-link{color:inherit;text-decoration:none;border-bottom:1px solid var(--pcanon-accent,#7a7a74)} .pcanon__name-link:hover{border-bottom-width:2px} .pcanon__what{font-family:'Archivo',sans-serif;font-size:13px;line-height:1.45; color:#4a4a44;margin:6px 0 0} .pcanon__tag{font-family:'Archivo',sans-serif;font-size:11px;font-weight:700; letter-spacing:.06em;color:var(--pcanon-accent,#7a7a74);margin:8px 0 0} @media (max-width:640px){ .pcanon__grid{grid-template-columns:1fr} .pcanon__title{font-size:20px} } /* From the Booth — native podcast-episode embed (2026-07-14) */ .podcast-spotlight { margin: 28px 0 0 } .podcast-spotlight__head { display: flex; align-items: baseline; gap: 10px; border-bottom: 2px solid var(--ink, #222); margin-bottom: 18px; padding-bottom: 10px; } .podcast-spotlight__lbl { font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: 22px; color: var(--ink, #222); margin: 0; } .podcast-spotlight__meta { font-size: 12px; color: var(--ink-3, #8b8b8b); font-weight: 500 } @font-face{font-family:"Reddit Sans";src:url(/assets/fonts/RedditSans-Bold.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:"Roboto";src:url(/assets/fonts/Roboto-Bold.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:"Inter";src:url(/assets/fonts/Inter-Bold.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}.tlcard{border:1px solid var(--line);border-radius:var(--r2,3px);overflow:hidden;background:var(--page);transition:var(--card-hover-t,box-shadow .15s,transform .15s)}.tlcard:has(.tlface):hover{box-shadow:var(--card-hover-shadow,0 2px 10px rgba(0,0,0,.07));transform:var(--card-hover-lift,translateY(-1px))}.tlface{display:flex;flex-direction:column;width:100%;padding:0;border:0;background:none;text-align:left;font:inherit;color:inherit;cursor:pointer}.tlthumb{display:block;width:100%;aspect-ratio:16/9;background:#000 center/cover no-repeat;position:relative}.tlplay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:22px;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.6)}.tlmeta{display:flex;flex-direction:column;gap:4px;padding:12px}.tlprov{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700}.tlprov svg{width:13px;height:13px;margin-right:0;flex-shrink:0}.tlc-bluesky{color:var(--blue-text,var(--blue,#006ba3));font-family:"Inter","Archivo",sans-serif}.tlc-threads{color:var(--ink)}.tlc-youtube{color:var(--red-text,var(--red,#c23a20));font-family:"Roboto","Archivo",sans-serif}.tlc-podcast{color:var(--gold-text,var(--gold,#96690f))}.tlc-reddit{color:#c0340b;font-family:"Reddit Sans","Archivo",sans-serif}.tlaudio{width:100%;display:block;margin:6px 0 2px}.tlauthor{font-weight:600;font-size:13px}.tlsnip{font-size:12.5px;line-height:1.4;color:var(--ink-2);margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.tlcta{font-size:11px;font-weight:700;color:var(--red-text,var(--red,#c23a20));margin-top:2px}.tlframe{display:block;width:100%;aspect-ratio:16/9;border:0}.tlcard.tl-loaded .tlface{display:none} /* The Lexicon — fan-voice keyness specimen (Language Layer Wave 1) */ /* The Lexicon — fan-voice keyness specimen (Language Layer Wave 1) */ .lexicon-module { display: grid; gap: clamp(10px, 1.2vw, 14px); padding: clamp(14px, 1.8vw, 20px) clamp(16px, 2.0vw, 24px); background: rgba(34, 34, 34, 0.025); border: 1px solid var(--stroke-subtle, rgba(34, 34, 34, 0.08)); border-radius: 3px; margin-bottom: clamp(20px, 3vw, 32px); } .lexicon-module__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .lexicon-module__eyebrow { font-family: var(--font-sans, system-ui, sans-serif); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: none; color: var(--accent-primary, #c9a24a); } .lexicon-module__cohort { font-family: var(--font-mono, ui-monospace, monospace); font-size: 10.5px; letter-spacing: 0.08em; text-transform: none; color: var(--fg-muted); font-variant-numeric: tabular-nums; } .lexicon-module__specimen { text-align: center; padding: clamp(10px, 1.6vw, 20px) 0 4px; } .lexicon-module__specimen-term { font-family: var(--font-display, 'Archivo', Impact, sans-serif); font-size: clamp(44px, 9vw, 88px); line-height: 0.95; letter-spacing: 0.01em; text-transform: none; color: var(--accent-primary, #c9a24a); overflow-wrap: anywhere; } .lexicon-module__specimen-chip { display: inline-block; margin-top: 10px; padding: 5px 14px; border: 1px solid var(--stroke-subtle, rgba(34, 34, 34, 0.08)); border-radius: 3px; font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: none; color: var(--fg-primary); font-variant-numeric: tabular-nums; } .lexicon-module__wall { display: grid; gap: 0; } .lexicon-module__band { font-family: var(--font-mono, ui-monospace, monospace); font-size: 9.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: none; color: var(--fg-muted); padding: 14px 0 4px; } .lexicon-module__band--sig { color: var(--accent-primary, #c9a24a); } .lexicon-module__row { display: flex; align-items: baseline; gap: 14px; padding: 6px 0; border-bottom: 1px solid var(--stroke-subtle, rgba(34, 34, 34, 0.08)); } .lexicon-module__row:last-child { border-bottom: none; } .lexicon-module__term { font-family: var(--font-serif, 'Fraunces', Georgia, serif); color: var(--fg-primary); line-height: 1.1; min-width: 0; overflow-wrap: anywhere; } .lexicon-module__chip { font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px; font-weight: 600; color: var(--accent-primary, #c9a24a); white-space: nowrap; font-variant-numeric: tabular-nums; } .lexicon-module__count { font-family: var(--font-mono, ui-monospace, monospace); font-size: 10.5px; color: var(--fg-muted); margin-left: auto; white-space: nowrap; font-variant-numeric: tabular-nums; } .lexicon-module__receipt { border-top: 1px dashed var(--stroke-subtle, rgba(34, 34, 34, 0.08)); padding-top: 12px; } .lexicon-module__quote { font-family: var(--font-serif, 'Fraunces', Georgia, serif); font-size: 15px; line-height: 1.55; color: var(--fg-primary); margin: 0; } .lexicon-module__hl { color: inherit; /* override the UA's marktext default */ background: color-mix(in srgb, var(--accent-primary, #c9a24a) 18%, transparent); box-shadow: inset 0 -2px 0 var(--accent-primary, #c9a24a); padding: 0 2px; border-radius: 2px; } .lexicon-module__prov { font-family: var(--font-mono, ui-monospace, monospace); font-size: 10.5px; letter-spacing: 0.08em; text-transform: none; color: var(--fg-muted); margin-top: 8px; } /* Word of the Week — Language Layer Wave 2 (C1). Absent => no row at all. */ .lexicon-module__wow { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 8px 12px; border: 1px solid var(--accent-primary, #c9a24a); border-radius: 3px; background: color-mix(in srgb, var(--accent-primary, #c9a24a) 8%, transparent); } .lexicon-module__wow-eyebrow { font-family: var(--font-mono, ui-monospace, monospace); font-size: 9.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: none; color: var(--accent-primary, #c9a24a); } .lexicon-module__wow-term { font-family: var(--font-display, 'Archivo', Impact, sans-serif); font-size: clamp(20px, 3.6vw, 30px); line-height: 1; letter-spacing: 0.01em; text-transform: none; color: var(--fg-primary); overflow-wrap: anywhere; } .lexicon-module__wow-chip { font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px; font-weight: 600; color: var(--accent-primary, #c9a24a); white-space: nowrap; font-variant-numeric: tabular-nums; } .lexicon-module__wow-wk { font-family: var(--font-mono, ui-monospace, monospace); font-size: 10px; letter-spacing: 0.08em; text-transform: none; color: var(--fg-muted); margin-left: auto; white-space: nowrap; font-variant-numeric: tabular-nums; } .kwic { margin-top: .75rem; } .kwic__summary { cursor: pointer; font-size: .8rem; color: var(--color-muted, #8b8b8b); } .kwic__list { margin: .5rem 0 0; padding-left: 1.2rem; } .kwic__item { margin-bottom: .4rem; font-size: .82rem; } .kwic__q { font-style: italic; quotes: none; } .kwic__src { color: var(--color-muted, #8b8b8b); font-size: .75rem; } /* Beat Coverage — "Who covers this team" reporter grid */ .beat-cov{margin:28px 0 0} .beat-cov__head{display:flex;align-items:baseline;gap:10px; border-bottom:2px solid var(--ink,#222);margin-bottom:18px;padding-bottom:10px} .beat-cov__lbl{font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:22px; color:var(--ink,#222)} .beat-cov__meta{font-size:12px;color:var(--ink-3,#8b8b8b);font-weight:500} .beat-cov__grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px} .bc-card{background:#fff;border:1px solid var(--line,#e4e4e1);border-radius:8px; padding:12px 14px;display:flex;flex-direction:column; animation:riseIn .4s ease-out both;transition:border-color .11s} .bc-card:hover{border-color:#008fd5} .bc-card-head{display:flex;align-items:center;gap:7px;font-size:12px;margin:0 0 9px} .bc-card-dot{position:relative;width:20px;height:20px;border-radius:4px; background:var(--pc,#999);color:#fff;font-size:9px;font-weight:700; display:inline-flex;align-items:center;justify-content:center; overflow:hidden;flex:0 0 auto} .bc-card-outlet{font-weight:700;color:var(--ink,#222)} .bc-card-paywall{margin-left:auto;font-size:10px;font-weight:700; letter-spacing:.4px;color:var(--ink-3,#8b8b8b); border:1px solid var(--line,#e4e4e1);border-radius:3px;padding:1px 5px} .bc-card-name{font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:16px; color:var(--ink,#222);margin:0 0 2px} .bc-card-title{font-size:12.5px;color:var(--ink-2,#5b5b5b);margin:0 0 10px;flex:1} .bc-card-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:auto} .bc-card-link,.bc-card-follow{font-size:12px;font-weight:600;color:var(--blue,#008fd5); text-decoration:none;display:inline-flex;align-items:center;gap:3px; transition:opacity .1s ease-in} .bc-card-link:hover,.bc-card-follow:hover{opacity:.6} .bc-card-follow{color:var(--ink-3,#8b8b8b)} .beat-cov__notice{font-size:11px;color:var(--ink-3,#8b8b8b);margin-top:14px; line-height:1.6} .beat-cov__xp-wrap{margin-top:12px}.bc-card--d1{animation-delay:.04s} .bc-card--d2{animation-delay:.12s} .bc-card--d3{animation-delay:.20s} .bc-card--d4{animation-delay:.28s} /* Rivalry Mirror night band — fight card (Group Chat Noir, Language Layer Wave 2) */ /* Rivalry Mirror night band (Group Chat Noir, Language Layer Wave 2) */ .mirror-band { margin: clamp(20px, 3vw, 32px) 0; border-radius: 3px; background: #ffffff; border: 1px solid rgba(34,34,34,0.12); overflow: hidden; } .mirror-band__inner { padding: clamp(18px, 2.6vw, 30px) clamp(18px, 2.8vw, 32px); } .mirror-band__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; } .mirror-band__eyebrow { font-family: 'IBM Plex Mono', ui-monospace, 'Courier New', monospace; font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: none; color: #5b5b5b; } .mirror-band__season { font-family: 'IBM Plex Mono', ui-monospace, 'Courier New', monospace; font-size: 11px; color: #5b5b5b; font-variant-numeric: tabular-nums; } .mirror-band__tape { display: grid; grid-template-columns: 1fr 56px 1fr; align-items: center; padding: 14px 0 8px; gap: 6px; } .mirror-band__name { font-family: Archivo, 'Arial Narrow', 'Helvetica Neue', sans-serif; text-transform: none; line-height: .95; letter-spacing: .01em; font-size: clamp(24px, 5vw, 44px); } .mirror-band__name--l { text-align: right; color: var(--mirror-l, #222222); } .mirror-band__name--r { text-align: left; color: var(--mirror-r, #222222); } .mirror-band__x { font-family: Archivo, 'Arial Narrow', 'Helvetica Neue', sans-serif; font-size: clamp(18px, 3.6vw, 30px); color: #5b5b5b; text-align: center; } .mirror-band__sub { text-align: center; font-family: 'IBM Plex Mono', ui-monospace, 'Courier New', monospace; font-size: 10.5px; color: #5b5b5b; letter-spacing: .10em; text-transform: none; padding: 0 0 16px; font-variant-numeric: tabular-nums; } .mirror-band__tug { padding: 6px 0; } .mirror-band__tug-head { display: grid; grid-template-columns: 1fr 1fr; padding: 0 0 10px; gap: 12px; } .mirror-band__tug-head div { font-family: 'IBM Plex Mono', ui-monospace, 'Courier New', monospace; font-size: 10px; letter-spacing: .10em; text-transform: none; color: #5b5b5b; } .mirror-band__tug-head div:last-child { text-align: right; } .mirror-band__row { display: grid; grid-template-columns: 1fr 1fr; align-items: center; min-height: 30px; } .mirror-band__cell { position: relative; height: 24px; } .mirror-band__spine { position: absolute; top: -4px; bottom: -4px; width: 1px; background: rgba(237, 230, 214, 0.18); } .mirror-band__cell--l .mirror-band__spine { right: 0; } .mirror-band__cell--r .mirror-band__spine { left: 0; } .mirror-band__stem { position: absolute; top: 50%; height: 2px; transform: translateY(-50%); } .mirror-band__cell--l .mirror-band__stem { right: 0; background: linear-gradient(270deg, color-mix(in srgb, var(--mirror-l, #222222) 60%, transparent), color-mix(in srgb, var(--mirror-l, #222222) 10%, transparent)); } .mirror-band__cell--r .mirror-band__stem { left: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--mirror-r, #222222) 60%, transparent), color-mix(in srgb, var(--mirror-r, #222222) 10%, transparent)); } .mirror-band__tdot { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 11px; height: 11px; border-radius: 50%; border: 2px solid #ffffff; } .mirror-band__cell--l .mirror-band__tdot { background: var(--mirror-l, #222222); } .mirror-band__cell--r .mirror-band__tdot { background: var(--mirror-r, #222222); } .mirror-band__tlabel { position: absolute; top: 50%; transform: translateY(-50%); font-size: 12.5px; font-weight: 600; white-space: nowrap; color: #222222; background: #f0f0f0; padding: 0 6px; border-radius: 3px; } .mirror-band__tz { font-family: 'IBM Plex Mono', ui-monospace, 'Courier New', monospace; font-size: 9.5px; color: #5b5b5b; font-weight: 400; margin-left: 6px; font-variant-numeric: tabular-nums; } .mirror-band__asym { font-family: 'IBM Plex Mono', ui-monospace, 'Courier New', monospace; font-size: 11px; color: #5b5b5b; padding: 10px 0 4px; letter-spacing: .04em; } .mirror-band__asym--l { text-align: left; } .mirror-band__asym--r { text-align: right; } .mirror-band__receipt { border-top: 1px dashed rgba(34,34,34,0.12); margin-top: 14px; padding-top: 12px; } .mirror-band__quote { font-family: var(--font-serif, 'Fraunces', Georgia, serif); font-size: 15px; line-height: 1.55; color: #222222; margin: 0; } .mirror-band__prov { font-family: 'IBM Plex Mono', ui-monospace, 'Courier New', monospace; font-size: 10.5px; letter-spacing: .08em; text-transform: none; color: #5b5b5b; margin-top: 8px; } .mirror-band__foot { font-family: 'IBM Plex Mono', ui-monospace, 'Courier New', monospace; font-size: 10px; color: #5b5b5b; margin-top: 14px; letter-spacing: .06em; } @media (max-width: 540px) { .mirror-band__tlabel { font-size: 11px; } .mirror-band__tug-head div { font-size: 9px; } } /* Fanbase Voice — personality percentile card (Language Layer Wave 2) */ /* Fanbase Voice — personality percentile card (Language Layer Wave 2) */ .voice-profile { display: grid; gap: clamp(10px, 1.2vw, 14px); padding: clamp(14px, 1.8vw, 20px) clamp(16px, 2.0vw, 24px); background: rgba(34, 34, 34, 0.025); border: 1px solid var(--stroke-subtle, rgba(34, 34, 34,0.08)); border-radius: 3px; margin-bottom: clamp(20px, 3vw, 32px); font-variant-numeric: tabular-nums; } .voice-profile__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .voice-profile__eyebrow { font-family: var(--font-sans, system-ui, sans-serif); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: none; color: var(--accent-primary, #c9a24a); } .voice-profile__mentions { font-family: var(--font-mono, ui-monospace, monospace); font-size: 10.5px; letter-spacing: 0.08em; text-transform: none; color: var(--fg-muted); } .voice-profile__arch { font-family: var(--font-display, 'Archivo', Impact, sans-serif); font-size: clamp(22px, 1.8vw + 10px, 30px); line-height: 1.05; letter-spacing: 0.02em; text-transform: none; color: var(--fg-primary); } .voice-profile__bars { display: grid; gap: 2px; } .voice-profile__row { display: grid; grid-template-columns: 84px 1fr 44px; gap: 10px; align-items: center; padding: 5px 0; } .voice-profile__lbl { font-family: var(--font-sans, system-ui, sans-serif); font-size: 12.5px; font-weight: 600; color: var(--fg-primary); } .voice-profile__track { position: relative; height: 8px; background: rgba(34, 34, 34, 0.06); border-radius: 3px; } .voice-profile__med { position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: color-mix(in srgb, var(--accent-primary, #c9a24a) 45%, transparent); } .voice-profile__dot { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 15px; height: 15px; border-radius: 50%; background: var(--accent-primary, #c9a24a); border: 2px solid var(--bg-primary, #ffffff); } .voice-profile__pct { font-family: var(--font-mono, ui-monospace, monospace); font-size: 11.5px; text-align: right; color: var(--fg-primary); } .voice-profile__cohort { font-family: var(--font-mono, ui-monospace, monospace); font-size: 10.5px; letter-spacing: 0.08em; text-transform: none; color: var(--fg-muted); } @media (max-width: 480px) { .voice-profile__row { grid-template-columns: 72px 1fr 40px; gap: 8px; } .voice-profile__lbl { font-size: 11.5px; } } /* Season Vocabulary strip — fan-voice era bands (Language Layer Wave 3) */ /* Season Vocabulary strip — Language Layer Wave 3 */ .story-words { display: grid; gap: clamp(8px, 1.2vw, 12px); padding: clamp(14px, 1.8vw, 20px) clamp(16px, 2.0vw, 24px); background: rgba(34, 34, 34,0.025); border: 1px solid var(--stroke-subtle, rgba(34, 34, 34,0.08)); border-radius: 3px; margin-bottom: clamp(20px, 3vw, 32px); } .story-words__head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } .story-words__eyebrow { font-family: var(--font-sans, system-ui, sans-serif); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: none; color: var(--accent-primary, #c9a24a); } .story-words__subhead { font-family: var(--font-mono, ui-monospace, monospace); font-size: 10px; letter-spacing: 0.08em; text-transform: none; color: var(--fg-muted); } .story-words__era { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; padding: 6px 0; border-bottom: 1px solid var(--stroke-subtle, rgba(34, 34, 34,0.06)); } .story-words__era:last-child { border-bottom: none; } .story-words__year { font-family: var(--font-display, 'Archivo', Impact, sans-serif); font-size: clamp(22px, 3.5vw, 32px); line-height: 1; color: var(--fg-muted); min-width: 60px; flex-shrink: 0; } .story-words__chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-top: 4px; } .story-words__chip { font-family: var(--font-serif, 'Fraunces', Georgia, serif); font-size: clamp(13px, 1.8vw, 16px); line-height: 1; color: var(--fg-primary); display: inline-flex; align-items: baseline; gap: 4px; padding: 4px 10px; border-radius: 3px; background: rgba(34, 34, 34,0.04); border: 1px solid rgba(34, 34, 34,0.06); overflow-wrap: anywhere; } .story-words__chip--signature { border-color: color-mix(in srgb, var(--accent-primary, #c9a24a) 40%, transparent); background: color-mix(in srgb, var(--accent-primary, #c9a24a) 8%, transparent); } .story-words__chip-ratio { font-family: var(--font-mono, ui-monospace, monospace); font-size: 10px; font-weight: 500; color: var(--accent-primary, #c9a24a); letter-spacing: 0.06em; font-variant-numeric: tabular-nums; white-space: nowrap; } /* Fan-voice era chapter bands (Language Layer Wave 4) */ /* === Era Chapter Module === */ .era-ch { margin: 2rem 0; padding: 0; } .era-ch__heading { font-family: 'Archivo', 'Impact', sans-serif; font-size: 1.1rem; letter-spacing: 0.12em; text-transform: none; color: var(--text-secondary, #888); margin: 0 0 1rem 0; } .era-ch__band { border-left: 3px solid var(--accent-primary, #e8a838); background: rgba(232, 168, 56, 0.05); padding: 0.85rem 1rem 0.85rem 1.1rem; margin-bottom: 0.75rem; border-radius: 0 4px 4px 0; } .era-ch__year { font-family: 'Archivo', 'Impact', sans-serif; font-size: 1.35rem; letter-spacing: 0.08em; color: var(--accent-primary, #e8a838); display: block; margin-bottom: 0.25rem; } .era-ch__label { font-family: 'Archivo', 'Impact', sans-serif; font-size: 1.05rem; letter-spacing: 0.06em; color: var(--text-primary, #222222); display: block; margin-bottom: 0.55rem; } .era-ch__chips { display: flex; flex-wrap: wrap; gap: 0.35rem 0.5rem; margin-bottom: 0.6rem; } .era-ch__chip { font-family: var(--font-serif, 'Fraunces', 'Georgia', serif); font-size: 0.82rem; color: var(--text-primary, #222222); background: rgba(34, 34, 34, 0.07); border: 1px solid rgba(232, 168, 56, 0.2); border-radius: 3px; padding: 0.15rem 0.45rem; white-space: nowrap; line-height: 1.5; } .era-ch__receipt { margin: 0.5rem 0 0 0; padding: 0.45rem 0.7rem; border-left: 2px solid var(--accent-primary, #e8a838); background: rgba(0, 0, 0, 0.2); font-family: 'Fraunces', 'Georgia', serif; font-size: 0.82rem; line-height: 1.55; color: var(--text-secondary, #aaa); font-style: italic; border-radius: 0 3px 3px 0; } .era-ch__hl { background: rgba(232, 168, 56, 0.30); color: var(--text-primary, #222222); font-style: normal; padding: 0 0.15em; border-radius: 2px; } @media (max-width: 640px) { .era-ch__band { padding: 0.7rem 0.75rem 0.7rem 0.9rem; } .era-ch__year { font-size: 1.15rem; } .era-ch__label { font-size: 0.95rem; } .era-ch__chip { font-size: 0.78rem; padding: 0.12rem 0.38rem; } .era-ch__receipt { font-size: 0.78rem; } } /* Current-chapter spine — doc 97 §13 */ /* Chapter spine — doc 97 §13 */ .ch-wrap{margin:0 0 12px} .chapter{display:flex;align-items:stretch;background:var(--row,#f7f7f6); border:1px solid var(--line,#e4e4e1);border-left:4px solid var(--team,#008fd5); border-radius:var(--r-2,3px);overflow:hidden; animation:riseIn .35s ease-out both;transition:opacity .1s ease-in} .chapter:hover{opacity:.93} .ch-n{flex:0 0 60px;display:flex;flex-direction:column;align-items:center; justify-content:center;gap:5px;padding:14px 0 12px; border-right:1px solid var(--line,#e4e4e1)} .ch-logo{width:24px;height:24px;object-fit:contain;display:block} .ch-n-val{font-family:'Fraunces',serif;font-weight:700;font-size:28px; line-height:1;color:var(--team,#008fd5)} .ch-body{flex:1;min-width:0;padding:13px 18px 12px} .ch-cat{display:inline-block;font-family:'Archivo',system-ui,sans-serif; font-size:9.5px;font-weight:700;letter-spacing:.07em; color:var(--team,#008fd5);background:var(--panel,#f0f0f0); border-radius:var(--r-1,2px);padding:2px 7px 2px 6px;margin-bottom:6px} .ch-headline{font-family:'Fraunces',serif;font-size:19px;font-weight:600; line-height:1.3;color:var(--ink,#222);margin:0 0 7px} .ch-headline a{color:inherit;text-decoration:none} .ch-take{font-family:'Fraunces',serif;font-style:italic;font-size:13.5px; font-weight:400;line-height:1.65;color:var(--ink-2,#5b5b5b);margin:0 0 11px} .ch-footer{display:flex;align-items:baseline;gap:10px; font-family:'Archivo',system-ui,sans-serif;font-size:10.5px; color:var(--ink-3,#8b8b8b)} .ch-status{flex:1;min-width:0} .ch-status::before{content:'— '} .ch-cta{font-size:10.5px;font-weight:700;font-family:'Archivo',system-ui,sans-serif; color:var(--team,#008fd5);text-decoration:none;white-space:nowrap; flex-shrink:0;transition:opacity .12s ease} .ch-cta:hover{opacity:.75} @media(max-width:460px){ .ch-n{flex:0 0 50px} .ch-logo{width:20px;height:20px} .ch-n-val{font-size:24px} .ch-headline{font-size:17px} .ch-take{font-size:13px} .ch-footer{flex-wrap:wrap} .ch-status{flex:1 1 100%;order:2} .ch-cta{order:1} } @media(prefers-reduced-motion:reduce){.chapter{animation:none}} /* Discourse Atlas fanbase cluster chip (Language Layer Wave 4) */ .atlas-chip { display: inline-flex; flex-direction: column; gap: 6px; border: 1px solid var(--stroke-default, #e4e4e1); border-radius: 3px; padding: 12px 16px; background: var(--bg-card, #ffffff); min-width: 200px; max-width: 100%; } .atlas-chip__label { font-family: 'Archivo', system-ui, sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: none; color: var(--fg-muted, #8b8b8b); line-height: 1; } .atlas-chip__name { font-family: 'Archivo', Impact, sans-serif; font-size: 22px; font-weight: 700; letter-spacing: 0.04em; color: var(--fg-primary, #222222); line-height: 1.1; } .atlas-chip__terms { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; } .atlas-chip__term-pill { /* was border-radius: 4px -- over the site's 3px max (docs/design-system/90 SS1.4: "Never exceed 3px. No pills, no capsules"); a class named "pill" is the clearest possible signal this one was never checked against that rule. */ font-family: 'Archivo', system-ui, sans-serif; font-size: 11px; font-weight: 500; color: var(--color-accent, #e8a400); background: var(--color-accent-subtle, rgba(232, 164, 0, 0.12)); border: 1px solid var(--color-accent-border, rgba(232, 164, 0, 0.25)); border-radius: 2px; padding: 2px 7px; line-height: 1.5; white-space: nowrap; } .atlas-chip__count { font-family: 'Archivo', system-ui, sans-serif; font-size: 11px; color: var(--fg-muted, #8b8b8b); margin-top: 2px; } @media (max-width: 600px) { .atlas-chip { width: 100%; box-sizing: border-box; } } /* Delusion Premium night band — belief vs market (Group Chat Noir) */ /* Delusion Premium night band (Group Chat Noir) */ .dp-band { margin: clamp(20px,3vw,32px) 0; border-radius: 16px; background: #ffffff; border: 1px solid rgba(34,34,34,0.12); overflow: hidden; } .dp-band__inner { padding: clamp(18px,2.6vw,30px) clamp(18px,2.8vw,32px); } .dp-band__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; } .dp-eyebrow { font-family: 'IBM Plex Mono', ui-monospace, 'Courier New', monospace; font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: none; color: #5b5b5b; } .dp-link { font-family: 'IBM Plex Mono', ui-monospace, 'Courier New', monospace; font-size: 11px; color: #5b5b5b; text-decoration: none; border-bottom: 1px solid rgba(34,34,34,0.12); } .dp-link:hover { opacity:.8; } .dp-verdict { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; } .dp-word { font-family: Archivo, 'Arial Narrow', 'Helvetica Neue', sans-serif; text-transform: none; line-height: 1; font-size: clamp(28px,5vw,46px); letter-spacing: .02em; color: var(--dp-accent); } .dp-rank { font-family: Archivo, 'Arial Narrow', 'Helvetica Neue', sans-serif; font-size: clamp(30px,5vw,46px); line-height: 1; color: var(--dp-accent); font-variant-numeric: tabular-nums; } .dp-rank-unit { font-family: 'IBM Plex Mono', ui-monospace, 'Courier New', monospace; font-size: 13px; color: #5b5b5b; } .dp-rows { display: flex; flex-direction: column; gap: 10px; } .dp-row { display: grid; grid-template-columns: 130px 1fr 52px; align-items: center; gap: 12px; } .dp-label { font-family: 'IBM Plex Mono', ui-monospace, 'Courier New', monospace; font-size: 12px; } .dp-track { background: #f0f0f0; border-radius: 5px; height: 16px; overflow: hidden; } .dp-track > i { display: block; height: 100%; border-radius: 5px; } .dp-val { font-family: 'IBM Plex Mono', ui-monospace, 'Courier New', monospace; font-size: 15px; color: #222222; text-align: right; font-variant-numeric: tabular-nums; } .dp-receipt { font-family: 'IBM Plex Mono', ui-monospace, 'Courier New', monospace; font-size: 12px; color: #5b5b5b; margin-top: 14px; } @media (max-width: 520px) { .dp-row { grid-template-columns: 110px 1fr 46px; } } /* Roster Reload - separated continuity, portal, draft, and recruiting */ /* Roster Reload dashboard */ .roster-reload { margin-bottom: clamp(20px, 3vw, 32px); padding: clamp(16px, 2.2vw, 24px) clamp(18px, 2.4vw, 28px); background: rgba(34, 34, 34, 0.026); border: 1px solid var(--stroke-subtle, rgba(34, 34, 34,0.08)); border-left: 3px solid var(--accent-primary, #c9a24a); border-radius: 3px; font-variant-numeric: tabular-nums; } .roster-reload__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: clamp(12px, 1.6vw, 18px); border-bottom: 1px dashed var(--stroke-subtle, rgba(34, 34, 34,0.07)); padding-bottom: 10px; } .roster-reload__title { font-family: var(--font-display, 'Archivo', system-ui, sans-serif); font-size: clamp(20px, 1.2vw + 10px, 26px); font-weight: 400; letter-spacing: 0.04em; text-transform: none; color: var(--fg-primary); margin: 0; } .roster-reload__tag { font-family: var(--font-sans, system-ui, sans-serif); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: none; color: var(--fg-muted); white-space: nowrap; } .roster-reload__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(8px, 1.2vw, 12px); } @media (max-width: 1100px) { .roster-reload__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .roster-reload__metric { min-height: 102px; padding: 10px 12px; border: 1px solid var(--stroke-subtle, rgba(34, 34, 34,0.06)); border-radius: 3px; background: rgba(34, 34, 34, 0.02); overflow-wrap: anywhere; } .roster-reload__metric-label { display: block; font-family: var(--font-sans, system-ui, sans-serif); font-size: 9px; font-weight: 800; letter-spacing: 0.13em; text-transform: none; color: var(--fg-muted); margin-bottom: 7px; } .roster-reload__metric-value { display: block; font-family: var(--font-display, 'Archivo', system-ui, sans-serif); font-size: clamp(24px, 1.8vw + 8px, 36px); line-height: 1; color: var(--fg-primary); /* Override the parent's overflow-wrap:anywhere -- that eagerly breaks ordinary words like "nationally" mid-word in the narrow grid track even when a full-word wrap would fit. break-word only splits a token as a last resort when it truly can't fit on its own line. */ overflow-wrap: break-word; } .roster-reload__metric-value--add { color: #4f9d6b; } .roster-reload__metric-value--loss { color: #c98c1a; } .roster-reload__metric-note { display: block; margin-top: 6px; font-family: var(--font-serif, 'Fraunces', Georgia, serif); font-size: 12px; line-height: 1.35; color: var(--fg-secondary); } .roster-reload__positions { margin-top: clamp(12px, 1.8vw, 18px); display: grid; gap: 8px; } .roster-reload__position { display: grid; grid-template-columns: minmax(48px, 0.4fr) repeat(2, minmax(0, 1fr)) minmax(0, 1.1fr); gap: 10px; align-items: center; padding: 9px 10px; border: 1px solid var(--stroke-subtle, rgba(34, 34, 34,0.06)); border-radius: 3px; background: rgba(34, 34, 34, 0.018); } .roster-reload__pos { font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px; font-weight: 800; color: var(--fg-primary); } .roster-reload__flow { font-family: var(--font-sans, system-ui, sans-serif); font-size: 12px; color: var(--fg-secondary); } .roster-reload__flow strong { color: var(--fg-primary); font-weight: 800; } .roster-reload__player-link { color: var(--fg-secondary); text-decoration: none; } .roster-reload__player-link:hover { color: var(--fg-primary); text-decoration: underline; } .roster-reload__flag { justify-self: end; font-family: var(--font-sans, system-ui, sans-serif); font-size: 10px; font-weight: 800; letter-spacing: 0.11em; text-transform: none; color: var(--accent-primary, #c9a24a); } .roster-reload__flag--up { color: #4f9d6b; } .roster-reload__flag--down { color: #c98c1a; } .roster-reload__flag--even { color: var(--fg-muted); } .roster-reload__rating { font-family: var(--font-mono, ui-monospace, monospace); font-size: 10px; font-weight: 700; color: var(--fg-muted); margin-left: 2px; } @media (max-width: 900px) { .roster-reload__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .roster-reload__position { grid-template-columns: minmax(42px, 0.35fr) minmax(0, 1fr); } .roster-reload__flag { justify-self: start; } } @media (max-width: 480px) { .roster-reload__head { flex-direction: column; align-items: flex-start; } .roster-reload__grid { grid-template-columns: 1fr; } .roster-reload__metric { min-height: 0; } .roster-reload__position { grid-template-columns: minmax(38px, auto) minmax(0, 1fr); gap: 8px; } .roster-reload__flow { font-size: 11px; } } /* Incoming-transfer identity line (player-quality-signals-fable R3.2/R4.2D). Strictly nano: leaf chip + signature phrase, no bars. Rendered NATIVE to the 538 light system (Archivo, ink/ink-2/line hex) per the build brief, even though the surrounding module still runs on legacy --accent-primary/Inter tokens -- a deliberate, minimal reconciliation, not a module-wide restyle. Spans the position row's full grid width as its own line. */ .roster-reload__transfer { grid-column: 1 / -1; margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--stroke-subtle, rgba(34, 34, 34, 0.07)); font-family: 'Archivo', system-ui, sans-serif; } .roster-reload__size { grid-column: 1 / -1; font-family: var(--font-sans, system-ui, sans-serif); font-size: 11px; color: var(--fg-muted); } .roster-reload__size-note { font-style: italic; } .roster-reload__transfer-chip { display: inline-block; border: 1px solid var(--line, #e4e4e1); border-radius: 2px; padding: 1px 6px; font-size: 13px; font-weight: 600; color: var(--ink, #222222); background: #ffffff; } .roster-reload__transfer-star { margin-left: 4px; font-size: 13px; color: var(--gold, #e5ae38); } .roster-reload__transfer-season { margin-left: 6px; font-size: 11px; color: var(--ink-3, #8b8b8b); } .roster-reload__transfer-phrase { display: block; margin-top: 3px; font-size: 13px; line-height: 1.4; color: var(--ink-2, #5b5b5b); } .roster-reload__transfer-flaw { display: block; margin-top: 4px; font-size: 13px; line-height: 1.4; color: var(--ink-2, #5b5b5b); } .roster-reload__transfer-tag { color: var(--gold, #e5ae38); font-weight: 600; } /* Style-lane beat-1 tag (research §22.6.B) -- quiet bordered chip, one of the four positive modifiers, using the module's OWN legacy tokens (this module still runs on --accent-primary/Inter, not the 538 --ink/--line tokens the sibling .roster-reload__transfer-chip uses -- a deliberate, minimal reconciliation per the R5.2 note above, not a module-wide restyle). Never shown for ball_security, which reroutes to its own concern sub-line (.roster-reload__transfer-flaw, reused verbatim below). */ .roster-reload__transfer-style { margin-left: 4px; display: inline-block; border: 1px solid var(--stroke-subtle, rgba(34, 34, 34, 0.12)); border-radius: 2px; padding: 0 5px; font-size: 11px; font-weight: 700; color: var(--fg-muted); } /* Draft-loss succession (Next Man Up) Face-Off cards -- native 538 tokens (--ink/--line/--blue/--red), the same deliberate, minimal reconciliation the transfer-identity block above already establishes for this otherwise legacy-token module. Doc 94 Move 2 (stage conflict side-by-side) applied to a place that never used it: departed-vs-heir, not a bare count. */ .roster-reload__succession { grid-column: 1 / -1; margin-top: clamp(12px, 1.8vw, 18px); display: grid; gap: 8px; } .roster-reload__succession-head { font-family: 'Archivo', system-ui, sans-serif; font-size: 10px; font-weight: 800; letter-spacing: 0.13em; color: var(--ink-3, #8b8b8b); } .roster-reload__faceoff { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line, #e4e4e1); border-radius: 3px; background: #ffffff; font-family: 'Archivo', system-ui, sans-serif; } .roster-reload__fo-side { min-width: 0; } .roster-reload__fo-side--right { text-align: right; } .roster-reload__fo-pos { display: block; font-size: 10px; font-weight: 800; letter-spacing: 0.1em; color: var(--ink-3, #8b8b8b); margin-bottom: 2px; } .roster-reload__fo-name { font-size: 14px; font-weight: 600; color: var(--ink, #222222); text-decoration: none; } a.roster-reload__fo-name:hover { text-decoration: underline; } .roster-reload__fo-meta { display: block; font-size: 11px; color: var(--ink-2, #5b5b5b); margin-top: 2px; } .roster-reload__fo-arrow { font-size: 13px; color: var(--ink-3, #8b8b8b); } .roster-reload__fo-read { grid-column: 1 / -1; margin-top: 4px; padding-top: 8px; border-top: 1px dashed var(--line, #e4e4e1); } /* confidence.py::render_band_chip()'s ``.confidence confidence--*`` chip (doc-90 §3.5: HIGH=blue/MEDIUM=gold/LOW=gray, redundant glyph). Its home stylesheet (static_assets/css/blocks/confidence.css) is only linked into reporting.py's legacy page pipeline, never team_pages' -- confirmed via grep, no cross-reference exists. Every team_pages module ships its own complete CSS as a self-contained constant (this file's own convention), so rather than add a first-ever team_pages -> reporting.py CSS coupling, this is copied verbatim from confidence.css's own ``.confidence`` block. */ .confidence { display: inline-flex; align-items: baseline; gap: 0.3em; font-size: 0.72rem; font-weight: 600; line-height: 1.2; padding: 0.12em 0.5em; border-radius: 3px; font-variant-numeric: tabular-nums; white-space: nowrap; text-transform: none; letter-spacing: 0.01em; } .confidence::before { font-weight: 700; margin-right: 0.15em; } .confidence--high { color: var(--blue, #008fd5); background: color-mix(in srgb, var(--blue, #008fd5) 12%, transparent); } .confidence--high::before { content: "\2713"; } .confidence--medium { color: var(--gold, #e5ae38); background: color-mix(in srgb, var(--gold, #e5ae38) 14%, transparent); } .confidence--medium::before { content: "\2022"; } .confidence--low { color: var(--gray, #8b8b8b); background: color-mix(in srgb, var(--gray, #8b8b8b) 14%, transparent); font-style: italic; } .confidence--low::before { content: "?"; } /* Full-roster drawer (2026-08-25, SEO pass) -- native
, no JS. Collapsed by default so it adds zero visible layout/paint cost; content is still present in the DOM for crawlers regardless of open state. */ .roster-reload__full { grid-column: 1 / -1; margin-top: clamp(10px, 1.6vw, 16px); font-family: 'Archivo', system-ui, sans-serif; } .roster-reload__full > summary { cursor: pointer; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: var(--ink-2, #5b5b5b); list-style: none; } .roster-reload__full > summary::-webkit-details-marker { display: none; } .roster-reload__full > summary::before { content: "+ "; color: var(--ink-3, #8b8b8b); } .roster-reload__full[open] > summary::before { content: "\2212 "; } .roster-reload__full-body { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line, #e4e4e1); display: grid; gap: 6px; } .roster-reload__full-group { display: grid; grid-template-columns: minmax(42px, 0.2fr) 1fr; gap: 8px; font-size: 12px; line-height: 1.5; } .roster-reload__full-pos { font-weight: 800; font-size: 10px; letter-spacing: 0.08em; color: var(--ink-3, #8b8b8b); padding-top: 2px; } .roster-reload__full-names { color: var(--ink-2, #5b5b5b); } .roster-reload__full-names a { color: var(--ink, #222222); text-decoration: none; } .roster-reload__full-names a:hover { text-decoration: underline; } /* Evidence-gated preview thesis */ /* Evidence-gated preview thesis */ .preview-thesis { border: 1px solid color-mix(in srgb, var(--accent-primary) 36%, var(--border)); border-radius: 8px; padding: clamp(1rem, 2vw, 1.4rem); background: color-mix(in srgb, var(--accent-primary) 9%, var(--surface)); overflow-wrap: anywhere; } .preview-thesis__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .7rem; font: 700 .72rem/1.2 var(--font-sans); letter-spacing: .08em; text-transform: none; color: var(--text-muted); margin-bottom: .2rem; } .preview-thesis__badge { background: color-mix(in srgb, var(--accent-primary) 22%, transparent); color: var(--accent-primary); border-radius: 4px; padding: .15em .55em; font-size: .68rem; letter-spacing: .06em; } .preview-thesis__title { margin: .45rem 0 .4rem; font: 700 clamp(1.28rem, 2.2vw, 1.95rem)/1.08 var(--font-display); letter-spacing: 0; color: var(--text); } .preview-thesis__body { max-width: 76ch; margin: 0 0 .75rem; font: 500 clamp(.98rem, 1.25vw, 1.08rem)/1.55 var(--font-sans); color: var(--text); } .preview-thesis__chips { list-style: none; margin: 0 0 .8rem; padding: 0; display: flex; flex-direction: column; gap: .35rem; } .preview-thesis__chip { display: flex; align-items: baseline; gap: .5rem; font-size: .84rem; line-height: 1.45; color: var(--text); } .preview-thesis__chip-label { flex-shrink: 0; font: 700 .66rem/1.2 var(--font-sans); letter-spacing: .07em; text-transform: none; color: var(--accent-primary); min-width: 6rem; } .preview-thesis__chip-text { color: var(--text-secondary, var(--text-muted)); font-size: .88rem; } .preview-thesis__receipt { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; font: 400 .72rem/1.2 var(--font-sans); letter-spacing: .05em; color: var(--text-muted); border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent); padding-top: .65rem; margin-top: .2rem; } @media (max-width: 540px) { .preview-thesis { padding: 1rem; } .preview-thesis__meta { font-size: .66rem; gap: .35rem .55rem; } .preview-thesis__title { font-size: 1.28rem; line-height: 1.12; } .preview-thesis__chip-label { min-width: 5rem; } } /* Recent Form chip — last 10 games */ /* Recent Form chip */ .recent-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 22px; align-items: center; padding: clamp(14px, 1.8vw, 20px) clamp(16px, 2.0vw, 24px); background: rgba(34, 34, 34, 0.025); border: 1px solid var(--stroke-subtle, rgba(34, 34, 34,0.08)); border-left: 3px solid var(--accent-primary, #c9a24a); border-radius: 3px; margin-bottom: clamp(20px, 3vw, 32px); font-variant-numeric: tabular-nums; } .recent-form__head { display: grid; gap: 4px; } .recent-form__eyebrow { font-family: var(--font-sans, system-ui, sans-serif); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: none; color: var(--fg-muted); margin: 0; } .recent-form__verdict { font-family: var(--font-display, 'Archivo', system-ui, sans-serif); font-size: clamp(22px, 1.4vw + 10px, 28px); font-weight: 400; letter-spacing: 0.02em; text-transform: none; line-height: 1; margin: 0; } .recent-form__verdict--hot { color: #4f9d6b; } .recent-form__verdict--warming { color: var(--accent-primary, #c9a24a); } .recent-form__verdict--mixed { color: var(--fg-primary); } .recent-form__verdict--cooling { color: #c98c1a; } .recent-form__verdict--cold { color: #c95151; } .recent-form__verdict--hibernating { color: var(--fg-secondary); } .recent-form__story { font-family: var(--font-serif, 'Fraunces', Georgia, serif); font-size: 13px; font-style: italic; line-height: 1.4; color: var(--fg-secondary); margin: 0; max-width: 56ch; } .recent-form__glyphs { display: flex; gap: 5px; align-items: end; } .recent-form__glyph { width: 14px; height: 28px; border-radius: 3px; background: rgba(34, 34, 34, 0.08); } .recent-form__glyph--w { background: var(--accent-primary, #c9a24a); } .recent-form__glyph--l { background: rgba(34, 34, 34, 0.14); } .recent-form__glyph--t { background: #c98c1a; } .recent-form__glyph-row { display: flex; gap: 5px; align-items: end; } .recent-form__meta { display: grid; gap: 4px; margin-top: 6px; } .recent-form__chips { display: flex; gap: 8px; flex-wrap: wrap; font-family: var(--font-sans, system-ui, sans-serif); font-size: 11px; color: var(--fg-secondary); } .recent-form__chip { padding: 3px 8px; border-radius: 3px; background: rgba(34, 34, 34, 0.04); border: 1px solid var(--stroke-subtle, rgba(34, 34, 34,0.06)); font-weight: 600; letter-spacing: 0.04em; } .recent-form__chip--win { color: #4f9d6b; border-color: rgba(79, 157, 107, 0.35); } .recent-form__chip--loss { color: #c95151; border-color: rgba(201, 81, 81, 0.35); } @media (max-width: 640px) { .recent-form { grid-template-columns: 1fr; } } /* Bowl History chip — postseason ledger */ /* Bowl History chip */ .bowl-history { display: grid; gap: 8px; padding: clamp(14px, 1.8vw, 20px) clamp(16px, 2.0vw, 24px); background: rgba(34, 34, 34, 0.025); border: 1px solid var(--stroke-subtle, rgba(34, 34, 34, 0.08)); border-left: 3px solid var(--accent-secondary, var(--accent-primary, #c9a24a)); border-radius: 3px; margin-bottom: clamp(20px, 3vw, 32px); font-variant-numeric: tabular-nums; } .bowl-history__eyebrow { font-family: var(--font-sans, system-ui, sans-serif); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: none; color: var(--fg-muted); margin: 0; } .bowl-history__verdict { font-family: var(--font-display, 'Archivo', system-ui, sans-serif); font-size: clamp(22px, 1.4vw + 10px, 30px); font-weight: 400; letter-spacing: 0.02em; text-transform: none; line-height: 1; color: var(--fg-primary); margin: 0; } .bowl-history__recent { font-family: var(--font-serif, 'Fraunces', Georgia, serif); font-size: 13px; line-height: 1.4; color: var(--fg-secondary); margin: 0; } .bowl-history__row { display: flex; gap: 6px; flex-wrap: wrap; } .bowl-history__year { font-family: var(--font-mono, ui-monospace, monospace); font-size: 11px; padding: 3px 9px; border-radius: 3px; border: 1px solid var(--stroke-subtle, rgba(34, 34, 34, 0.08)); background: rgba(34, 34, 34, 0.025); } .bowl-history__year--win { color: #4f9d6b; border-color: rgba(79, 157, 107, 0.35); } .bowl-history__year--loss { color: #c95151; border-color: rgba(201, 81, 81, 0.35); } /* All-Time Record card — full-history W-L + splits + by-decade */ /* All-Time Record card */ .all-time-record { display: grid; gap: 10px; padding: clamp(14px, 1.8vw, 20px) clamp(16px, 2.0vw, 24px); background: rgba(34, 34, 34, 0.025); border: 1px solid var(--stroke-subtle, rgba(34, 34, 34, 0.08)); border-left: 3px solid var(--accent-primary, #008fd5); border-radius: 3px; margin-bottom: clamp(20px, 3vw, 32px); font-variant-numeric: tabular-nums; } .all-time-record__eyebrow { font-family: var(--font-sans, 'Archivo', system-ui, sans-serif); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: none; color: var(--fg-muted); margin: 0; } .all-time-record__hero { font-family: var(--font-display, 'Archivo', system-ui, sans-serif); font-size: clamp(26px, 1.6vw + 12px, 36px); font-weight: 400; letter-spacing: 0.01em; line-height: 1; color: var(--fg-primary); margin: 0; } .all-time-record__sub { font-family: var(--font-serif, 'Fraunces', Georgia, serif); font-size: 13px; line-height: 1.4; color: var(--fg-secondary); margin: 0; } .all-time-record__splits { display: flex; gap: 10px; flex-wrap: wrap; } .all-time-record__split { display: grid; gap: 2px; padding: 6px 10px; border-radius: 3px; border: 1px solid var(--stroke-subtle, rgba(34, 34, 34, 0.08)); background: rgba(34, 34, 34, 0.02); min-width: 84px; } .all-time-record__split-label { font-family: var(--font-sans, 'Archivo', system-ui, sans-serif); font-size: 9px; font-weight: 700; letter-spacing: 0.1em; color: var(--fg-muted); } .all-time-record__split-value { font-family: var(--font-sans, 'Archivo', system-ui, sans-serif); font-size: 14px; font-weight: 600; color: var(--fg-primary); } .all-time-record__decades { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 4px; margin-top: 4px; } .all-time-record__decade { display: grid; gap: 3px; text-align: center; } .all-time-record__decade-label { font-family: var(--font-sans, 'Archivo', system-ui, sans-serif); font-size: 9px; color: var(--fg-muted); } .all-time-record__decade-bar { height: 24px; border-radius: 2px; background: rgba(34, 34, 34, 0.06); display: flex; align-items: flex-end; overflow: hidden; } .all-time-record__decade-fill { width: 100%; background: var(--accent-primary, #008fd5); } /* Positional competition — Second Signal Phase 5 (specs/17) */ .ttag{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700; padding:1px 6px;border-radius:2px;vertical-align:middle;line-height:1.6; font-family:"Archivo",system-ui,sans-serif} .ttag.fact{color:#0a5a86;background:#e7f3fb} .ttag.read{color:#7a5a00;background:#faf3e0} .ttag .td{width:6px;height:6px;border-radius:50%;display:inline-block} .ttag.fact .td{background:var(--blue,#008fd5)} .ttag.read .td{background:var(--gold,#e5ae38)} .xp{border:1px solid var(--rule,#d7d7d4);border-radius:2px} .xp-btn{width:100%;text-align:left;display:flex;align-items:center;justify-content:space-between; gap:10px;background:none;border:none;padding:10px 14px; font-family:"Archivo",system-ui,sans-serif;font-size:13.5px;font-weight:600; color:var(--ink,#222);cursor:pointer;transition:background .12s ease} .xp-btn:hover{background:var(--row,#f7f7f6)} .xp-chev{font-size:15px;flex:0 0 auto;transition:transform .22s cubic-bezier(.34,1.56,.64,1); display:inline-block} .xp.open .xp-chev{transform:rotate(180deg)} .xp-body{display:grid;grid-template-rows:0fr;overflow:hidden; transition:grid-template-rows .24s ease} .xp.open .xp-body{grid-template-rows:1fr} .xp-inner{min-height:0;padding:0 14px} .xp.open .xp-inner{padding:10px 14px 14px} .hfoot{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:11.5px;line-height:1.5; color:var(--ink-3,#8b8b8b);font-family:"Archivo",system-ui,sans-serif; font-variant-numeric:tabular-nums;border-top:1px solid var(--line,#e4e4e1); padding-top:6px;margin-top:8px} .hfoot b{color:var(--ink-2,#5b5b5b);font-weight:600}.dbs-stack{display:flex;flex-direction:column;gap:10px} .dbs-legend{display:flex;gap:14px;font-family:"Archivo",system-ui,sans-serif; font-size:12px;font-weight:600;color:var(--ink-2,#5b5b5b);margin-bottom:2px} .dbs-leg-item{display:inline-flex;align-items:center;gap:5px} .dbs-dot{width:8px;height:8px;border-radius:50%;display:inline-block} .dbs-row{display:grid;grid-template-columns:104px 1fr;align-items:center;gap:8px} .dbs-label{font-family:"Archivo",system-ui,sans-serif;font-size:12.5px; font-weight:600;color:var(--ink,#222)} .dbs-annotation{grid-column:2;font-family:"Archivo",system-ui,sans-serif; font-size:11px;color:var(--ink-3,#8b8b8b);margin-top:-4px}.sht-svg{width:100%;height:100%;display:block} .sht-ref{stroke:#d7d7d4;stroke-width:1.5;stroke-dasharray:4 3} .sht-ref-lab{font-family:"Archivo",system-ui,sans-serif;font-size:9.5px;fill:#8b8b8b} .sht-axis{font-family:"Archivo",system-ui,sans-serif;font-size:10px;fill:#5b5b5b} .sht-line{fill:none;stroke-width:2.25;stroke-linecap:round;stroke-linejoin:round} .sht-dot{stroke:#fff;stroke-width:1.5} .sht-end-lab{font-family:"Archivo",system-ui,sans-serif;font-size:11px;font-weight:700} .poscomp{margin:1rem 0 1.5rem 0;padding:clamp(14px,1.8vw,20px) clamp(16px,2.0vw,24px); background:#ffffff;border:1px solid #e4e4e1;border-left:4px solid #008fd5; border-radius:3px;font-variant-numeric:tabular-nums} .poscomp__eyebrow{font-size:.72rem;letter-spacing:.10em;color:#8b8b8b;margin:0 0 4px 0; font-family:"Archivo",system-ui,sans-serif} .poscomp__title{font-family:"Fraunces",Georgia,serif;font-size:1.3rem;font-weight:600; margin:0 0 8px 0;color:#222222} .poscomp__take{font-size:.86rem;line-height:1.5;color:#5b5b5b;margin:0 0 12px 0; font-family:"Archivo",system-ui,sans-serif} .poscomp__chart{margin-bottom:8px} .poscomp__trend{margin:4px 0 10px 0;border-top:1px solid #e4e4e1;padding-top:8px} .poscomp__trend summary{font-family:"Archivo",system-ui,sans-serif;font-size:.78rem; font-weight:600;color:#008fd5;cursor:pointer} .poscomp__trend-caption{font-family:"Archivo",system-ui,sans-serif;font-size:.76rem; color:#8b8b8b;margin:8px 0 4px 0} .poscomp__trend-chart{max-width:460px} /* Pass-zone defense — Second Signal Phase 7 item 7d (specs/17) */ .ttag{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700; padding:1px 6px;border-radius:2px;vertical-align:middle;line-height:1.6; font-family:"Archivo",system-ui,sans-serif} .ttag.fact{color:#0a5a86;background:#e7f3fb} .ttag.read{color:#7a5a00;background:#faf3e0} .ttag .td{width:6px;height:6px;border-radius:50%;display:inline-block} .ttag.fact .td{background:var(--blue,#008fd5)} .ttag.read .td{background:var(--gold,#e5ae38)} .xp{border:1px solid var(--rule,#d7d7d4);border-radius:2px} .xp-btn{width:100%;text-align:left;display:flex;align-items:center;justify-content:space-between; gap:10px;background:none;border:none;padding:10px 14px; font-family:"Archivo",system-ui,sans-serif;font-size:13.5px;font-weight:600; color:var(--ink,#222);cursor:pointer;transition:background .12s ease} .xp-btn:hover{background:var(--row,#f7f7f6)} .xp-chev{font-size:15px;flex:0 0 auto;transition:transform .22s cubic-bezier(.34,1.56,.64,1); display:inline-block} .xp.open .xp-chev{transform:rotate(180deg)} .xp-body{display:grid;grid-template-rows:0fr;overflow:hidden; transition:grid-template-rows .24s ease} .xp.open .xp-body{grid-template-rows:1fr} .xp-inner{min-height:0;padding:0 14px} .xp.open .xp-inner{padding:10px 14px 14px} .hfoot{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:11.5px;line-height:1.5; color:var(--ink-3,#8b8b8b);font-family:"Archivo",system-ui,sans-serif; font-variant-numeric:tabular-nums;border-top:1px solid var(--line,#e4e4e1); padding-top:6px;margin-top:8px} .hfoot b{color:var(--ink-2,#5b5b5b);font-weight:600} .pzd{margin:1rem 0 1.5rem 0;padding:clamp(14px,1.8vw,20px) clamp(16px,2.0vw,24px); background:#ffffff;border:1px solid #e4e4e1;border-left:4px solid #fc4f30; border-radius:3px;font-variant-numeric:tabular-nums} .pzd__eyebrow{font-size:.72rem;letter-spacing:.10em;color:#8b8b8b;margin:0 0 4px 0; font-family:"Archivo",system-ui,sans-serif} .pzd__title{font-family:"Fraunces",Georgia,serif;font-size:1.3rem;font-weight:600; margin:0 0 8px 0;color:#222222} .pzd__take{font-size:.86rem;line-height:1.5;color:#5b5b5b;margin:0 0 8px 0; font-family:"Archivo",system-ui,sans-serif} .pzd__refusal{font-size:.76rem;line-height:1.4;color:#8b8b8b;margin:0 0 10px 0; font-family:"Archivo",system-ui,sans-serif;font-style:italic} /* Top Commits — 3 highest-rated recruits per class */ /* Top Commits module */ .top-commits { padding: clamp(14px, 1.8vw, 20px) clamp(16px, 2.0vw, 24px); background: rgba(34, 34, 34, 0.025); border: 1px solid var(--stroke-subtle, rgba(34, 34, 34,0.08)); border-left: 3px solid var(--accent-secondary, var(--accent-primary, #c9a24a)); border-radius: 3px; margin-bottom: clamp(20px, 3vw, 32px); font-variant-numeric: tabular-nums; } .top-commits__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; } .top-commits__eyebrow { font-family: var(--font-sans, system-ui, sans-serif); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: none; color: var(--fg-muted); margin: 0; } .top-commits__class-tag { font-family: var(--font-sans, system-ui, sans-serif); font-size: 10px; font-weight: 700; letter-spacing: 0.10em; text-transform: none; color: var(--fg-muted); padding: 3px 8px; border-radius: 3px; background: rgba(34, 34, 34, 0.04); } .top-commits__list { display: grid; gap: 10px; } .top-commits__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px 14px; padding: 8px 10px; background: rgba(34, 34, 34, 0.02); border-radius: 3px; border: 1px solid var(--stroke-subtle, rgba(34, 34, 34,0.06)); } .top-commits__stars { font-family: var(--font-mono, ui-monospace, monospace); font-size: 14px; letter-spacing: 0.04em; color: var(--accent-primary, #c9a24a); font-weight: 600; min-width: 56px; } .top-commits__name { font-family: var(--font-display, 'Archivo', system-ui, sans-serif); font-size: clamp(15px, 0.9vw + 9px, 19px); letter-spacing: 0.02em; color: var(--fg-primary); line-height: 1.1; } .top-commits__meta { font-family: var(--font-sans, system-ui, sans-serif); font-size: 11px; color: var(--fg-secondary); margin-top: 2px; } .top-commits__rank { font-family: var(--font-mono, ui-monospace, monospace); font-size: 11px; color: var(--fg-muted); text-align: right; } .top-commits__rank strong { color: var(--fg-primary); font-weight: 600; } @media (max-width: 540px) { .top-commits__row { grid-template-columns: auto minmax(0, 1fr); } .top-commits__rank { grid-column: 2 / 3; text-align: left; } } /* Projection lane (research §8/§23.4, render owner-confirmed 2026-07-23): gray ink always, never an archetype color -- the structural marker that this is a projection, not an earned classification (§8's "no drawer at all" rule -- no color, no interactivity, one fixed line). Spans the full row width under the name/meta column, State A (chip) and State B (sentence-only) share the same wrapper/honesty-suffix styling. */ .top-commits__projection { grid-column: 1 / -1; margin-top: 4px; font-family: var(--font-sans, system-ui, sans-serif); font-size: 11px; line-height: 1.45; color: var(--fg-secondary); } .top-commits__projection-tag { font-weight: 700; color: var(--fg-primary); } .top-commits__projection-honesty { display: block; color: var(--fg-muted); font-style: italic; margin-top: 1px; } /* NFL Draft Pipeline — last 5 cycles of draft picks */ /* NFL Draft Pipeline chip */ .nfl-draft-pipeline { padding: clamp(14px, 1.8vw, 20px) clamp(16px, 2.0vw, 24px); background: rgba(34, 34, 34, 0.025); border: 1px solid var(--stroke-subtle, rgba(34, 34, 34,0.08)); border-left: 3px solid var(--accent-secondary, var(--accent-primary, #c9a24a)); border-radius: 3px; margin-bottom: clamp(20px, 3vw, 32px); font-variant-numeric: tabular-nums; display: grid; gap: 10px; } .nfl-draft-pipeline__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-bottom: 1px dashed var(--stroke-subtle, rgba(34, 34, 34,0.07)); padding-bottom: 8px; } .nfl-draft-pipeline__eyebrow { font-family: var(--font-sans, system-ui, sans-serif); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: none; color: var(--fg-muted); margin: 0; } .nfl-draft-pipeline__window { font-family: var(--font-sans, system-ui, sans-serif); font-size: 10px; font-weight: 700; letter-spacing: 0.10em; text-transform: none; color: var(--fg-muted); padding: 3px 8px; border-radius: 3px; background: rgba(34, 34, 34, 0.04); } .nfl-draft-pipeline__verdict { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; align-items: baseline; } .nfl-draft-pipeline__band { font-family: var(--font-display, 'Archivo', system-ui, sans-serif); font-size: clamp(22px, 1.6vw + 8px, 32px); font-weight: 400; line-height: 1; letter-spacing: 0.02em; color: var(--fg-primary); margin: 0; } .nfl-draft-pipeline__band--elite { color: #4f9d6b; } .nfl-draft-pipeline__band--strong { color: var(--accent-primary, #c9a24a); } .nfl-draft-pipeline__band--steady { color: var(--fg-primary); } .nfl-draft-pipeline__band--developing { color: var(--fg-secondary); } .nfl-draft-pipeline__band--thin { color: var(--fg-secondary); } .nfl-draft-pipeline__count { font-family: var(--font-display, 'Archivo', system-ui, sans-serif); font-size: clamp(28px, 2vw + 10px, 40px); font-weight: 400; line-height: 1; color: var(--accent-primary, #c9a24a); } .nfl-draft-pipeline__count-label { font-family: var(--font-sans, system-ui, sans-serif); font-size: 10px; letter-spacing: 0.14em; color: var(--fg-muted); text-transform: none; text-align: right; display: block; } .nfl-draft-pipeline__story { font-family: var(--font-serif, 'Fraunces', Georgia, serif); font-size: 13px; font-style: italic; line-height: 1.4; color: var(--fg-secondary); margin: 0; max-width: 56ch; } .nfl-draft-pipeline__marquee { display: grid; gap: 6px; margin-top: 4px; } .nfl-draft-pipeline__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: baseline; font-family: var(--font-mono, ui-monospace, monospace); font-size: 11px; padding: 4px 8px; background: rgba(34, 34, 34, 0.02); border-radius: 3px; border: 1px solid var(--stroke-subtle, rgba(34, 34, 34,0.06)); } .nfl-draft-pipeline__pick { color: var(--accent-primary, #c9a24a); font-weight: 600; font-variant-numeric: tabular-nums; } .nfl-draft-pipeline__name { color: var(--fg-primary); font-family: var(--font-sans, system-ui, sans-serif); font-weight: 600; } .nfl-draft-pipeline__pos { color: var(--fg-muted); font-size: 10px; text-transform: none; letter-spacing: 0.08em; } .nfl-draft-pipeline__receipt { grid-column: 1 / -1; margin-top: 3px; font-family: 'Archivo', system-ui, sans-serif; font-size: 11px; color: var(--ink-2, #5b5b5b); } .nfl-draft-pipeline__receipt a { color: var(--blue, #008fd5); text-decoration: none; font-weight: 600; } .nfl-draft-pipeline__receipt a:hover { text-decoration: underline; } /* Coaching Era Strip — current HC + tenure */ /* Coaching Era Strip chip */ .coaching-era { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 22px; align-items: center; padding: clamp(14px, 1.8vw, 20px) clamp(16px, 2.0vw, 24px); background: rgba(34, 34, 34, 0.025); border: 1px solid var(--stroke-subtle, rgba(34, 34, 34, 0.08)); border-left: 3px solid var(--accent-secondary, var(--accent-primary, #c9a24a)); border-radius: 3px; margin-bottom: clamp(20px, 3vw, 32px); font-variant-numeric: tabular-nums; } .coaching-era__head { display: grid; gap: 4px; } .coaching-era__eyebrow { font-family: var(--font-sans, system-ui, sans-serif); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: none; color: var(--fg-muted); margin: 0; } .coaching-era__name { font-family: var(--font-display, 'Archivo', system-ui, sans-serif); font-size: clamp(22px, 1.4vw + 10px, 30px); font-weight: 400; letter-spacing: 0.02em; line-height: 1; color: var(--fg-primary); margin: 0; } .coaching-era__story { font-family: var(--font-serif, 'Fraunces', Georgia, serif); font-size: 13px; font-style: italic; line-height: 1.4; color: var(--fg-secondary); margin: 0; max-width: 56ch; } .coaching-era__chips { display: flex; gap: 8px; margin-top: 4px; flex-wrap: wrap; } .coaching-era__chip { font-family: var(--font-mono, ui-monospace, monospace); font-size: 11px; padding: 3px 9px; border-radius: 3px; background: rgba(34, 34, 34, 0.04); border: 1px solid var(--stroke-subtle, rgba(34, 34, 34, 0.08)); color: var(--fg-secondary); } .coaching-era__chip--era { color: var(--accent-primary, #c9a24a); border-color: rgba(201, 162, 74, 0.35); } .coaching-era__chip a { color: inherit; text-decoration: underline; text-decoration-color: rgba(34, 34, 34, 0.25); } .coaching-era__chip a:hover { text-decoration-color: currentColor; } .coaching-era__era-link { display: inline-block; margin-top: 10px; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: var(--accent-primary, #c9a24a); text-decoration: none; } .coaching-era__era-link:hover { text-decoration: underline; } .coaching-era__links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; } .coaching-era__links .coaching-era__era-link { margin-top: 0; } .coaching-era__tenure { display: grid; gap: 4px; text-align: right; } .coaching-era__tenure-years { font-family: var(--font-display, 'Archivo', system-ui, sans-serif); font-size: clamp(28px, 2vw + 10px, 40px); line-height: 1; color: var(--accent-primary, #c9a24a); } .coaching-era__tenure-label { font-family: var(--font-sans, system-ui, sans-serif); font-size: 10px; letter-spacing: 0.14em; color: var(--fg-muted); text-transform: none; } @media (max-width: 640px) { .coaching-era { grid-template-columns: 1fr; } .coaching-era__tenure { text-align: left; } } /* Unit Lineage Timeline — offense/defense percentile history by coordinator */ /* Unit Lineage Timeline — offense/defense percentile history + coordinator tenures */ .unit-lineage { padding: clamp(14px, 1.8vw, 20px) clamp(16px, 2.0vw, 24px); background: rgba(34, 34, 34, 0.025); border: 1px solid var(--stroke-subtle, rgba(34, 34, 34, 0.08)); border-radius: 3px; margin-bottom: clamp(20px, 3vw, 32px); } .unit-lineage__eyebrow { font-family: var(--font-sans, system-ui, sans-serif); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; color: var(--fg-muted); margin: 0 0 4px; } .unit-lineage__title { font-family: var(--font-display, 'Archivo', system-ui, sans-serif); font-size: clamp(18px, 1.1vw + 10px, 24px); font-weight: 400; color: var(--fg-primary); margin: 0 0 4px; } .unit-lineage__note { font-family: var(--font-serif, 'Fraunces', Georgia, serif); font-size: 12.5px; font-style: italic; color: var(--fg-secondary); margin: 0 0 14px; max-width: 68ch; } .unit-lineage__panel { margin-top: 16px; } .unit-lineage__panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 4px; } .unit-lineage__panel-label { font-family: var(--font-sans, system-ui, sans-serif); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; color: var(--fg-primary); } .unit-lineage__panel-range { font-family: ui-monospace, monospace; font-size: 10.5px; color: var(--fg-muted); font-variant-numeric: tabular-nums; } .unit-lineage__svg-wrap { width: 100%; overflow-x: auto; } .ult-svg { display: block; height: 84px; } .ult-line { stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; } .ult-line--offense { stroke: #008fd5; } .ult-line--defense { stroke: #fc4f30; } .ult-ref { stroke: var(--fg-muted, #999); stroke-width: 0.75; stroke-dasharray: 2 3; opacity: 0.6; } .ult-transition { stroke: var(--fg-muted, #999); stroke-width: 1; stroke-dasharray: 3 2; opacity: 0.55; } .ult-year-label { font-family: ui-monospace, monospace; font-size: 9px; fill: var(--fg-muted, #999); } .unit-lineage__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .unit-lineage__chip { font-family: ui-monospace, monospace; font-size: 10.5px; padding: 2px 8px; border-radius: 3px; background: rgba(34, 34, 34, 0.04); border: 1px solid var(--stroke-subtle, rgba(34, 34, 34, 0.08)); color: var(--fg-secondary); } .unit-lineage__pending { font-family: var(--font-sans, system-ui, sans-serif); font-size: 11px; color: var(--fg-muted); margin-top: 4px; } .unit-lineage__legend { display: flex; gap: 16px; margin-top: 12px; font-family: var(--font-sans, system-ui, sans-serif); font-size: 10.5px; color: var(--fg-muted); } .unit-lineage__legend-swatch { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 4px; vertical-align: middle; } @media (max-width: 640px) { .unit-lineage__panel-head { flex-direction: column; align-items: flex-start; gap: 2px; } } /* Coordinator Tendency Change — predecessor vs. successor play-calling fingerprint */ .db-svg{width:100%;height:auto;display:block} .db-conn{stroke:var(--rule,#d7d7d4);stroke-width:2} .db-taper{fill:var(--rule,#d7d7d4)} .db-tick{stroke:var(--rule,#d7d7d4);stroke-width:1;stroke-dasharray:2 2} .db-band{stroke-dasharray:3 3;stroke-width:1} .db-lab{font-family:"Archivo",system-ui,sans-serif;font-size:11.5px;font-weight:600;fill:var(--ink,#222)} .db-end{font-family:"Archivo",system-ui,sans-serif;font-size:10.5px;fill:var(--ink-3,#8b8b8b)} .db-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} /* Coordinator Tendency Change — predecessor vs. successor play-calling fingerprint. Fonts/colors hardcoded to the proven team_pages convention (Fraunces headline, Archivo UI, --ink/--ink-3/--line from TOKENS_CSS) rather than var(--font-sans)/ var(--font-display)/var(--fg-primary)/var(--fg-muted) -- confirmed 2026-07-26 those custom properties are never defined at :root in team_pages/renderer.py's rendered