/* ========================================================================== fd.css — FightingData design system (ANALYTICS_BUILD_PLAN Phase 1) Single stylesheet for all Python-generated pages. Consolidates the former inline CSS from generate_reports.py (REPORT_CSS + PROFILE_CSS) and generate.py (event preview + historical event blocks). Page scoping: each generated page sets a class on — .fd-compare → comparison pages (website/compare/) .fd-profile → fighter profile pages (website/fighters/) .fd-event → event pages (website/events/) + .fd-event-upcoming / .fd-event-past variant Scoped rules use :where(...) so specificity stays identical to the old inline sheets — the cascade resolves exactly as it did before the merge. ========================================================================== */ /* ── Design tokens ──────────────────────────────────────────────────────── */ :root { --fd-red: #d62828; /* fighter A / brand accent */ --fd-red-dark: #b71c1c; --fd-blue: #1d4ed8; /* fighter B */ --fd-ink: #111; /* headings / primary text / dark chrome */ --fd-text: #555; /* body copy */ --fd-muted: #777; /* secondary text */ --fd-faint: #999; /* tertiary text / labels */ --fd-bg: #f5f5f5; /* page background */ --fd-card: #fff; /* card background */ --fd-bg-subtle: #fafafa; /* table headers / hover */ --fd-border: #e2e2e2; --fd-hairline: #f0f0f0; --fd-win: #15803d; --fd-warn: #c2410c; --fd-sans: 'Helvetica Neue', Helvetica, Arial, sans-serif; --fd-mono: 'SF Mono', Menlo, monospace; --fd-radius: 6px; --fd-shadow: 0 1px 3px rgba(0,0,0,0.06); } /* ── Base ───────────────────────────────────────────────────────────────── */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--fd-sans); background: var(--fd-bg); color: var(--fd-ink); line-height: 1.6; overflow-x: hidden; } :where(.fd-compare, .fd-profile) a { color: var(--fd-red); text-decoration: none; } :where(.fd-compare, .fd-profile) a:hover { text-decoration: underline; } /* ── Chrome: header / nav (shared by every generated page) ──────────────── */ .site-header { background: var(--fd-ink); position: sticky; top: 0; z-index: 90; } .site-header-inner { max-width: 1100px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; height: 52px; } .site-logo { font-size: 1.2rem; font-weight: 800; color: #fff; text-decoration: none; letter-spacing: -0.5px; } .site-logo:hover { text-decoration: none; } .site-nav-desktop { display: flex; gap: 0; } .site-nav-link { color: rgba(255,255,255,0.55); text-decoration: none; padding: 16px 18px; font-size: 13px; font-weight: 500; } .site-nav-link:hover { color: #fff; text-decoration: none; } .site-nav-link.active { color: #fff; font-weight: 700; border-bottom: 2px solid var(--fd-red); } .site-nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; flex-direction: column; gap: 5px; } .site-nav-toggle span { display: block; width: 22px; height: 2px; background: #fff; } .site-nav-mobile { display: none; background: var(--fd-ink); } .site-nav-mobile .site-nav-link { display: block; padding: 14px 20px; border-top: 1px solid rgba(255,255,255,0.1); font-size: 14px; } /* ── Chrome: footer ─────────────────────────────────────────────────────── */ .site-footer { background: var(--fd-ink); padding: 28px 20px; margin-top: 40px; } .site-footer-inner { max-width: 1100px; margin: 0 auto; display: flex; justify-content: space-between; color: rgba(255,255,255,0.4); font-size: 12px; } .site-footer-links { display: flex; gap: 32px; } .site-footer-links a { color: rgba(255,255,255,0.4); text-decoration: none; } .site-footer-links a:hover { color: rgba(255,255,255,0.7); text-decoration: none; } @media (max-width: 768px) { .site-nav-desktop { display: none; } .site-nav-toggle { display: flex; } .site-nav-mobile.open { display: block; } .site-footer-inner { flex-direction: column; gap: 16px; } .site-footer-links { gap: 20px; } } /* ── Shared components (compare + profile pages) ────────────────────────── */ :where(.fd-compare, .fd-profile) .container { max-width: 1100px; margin: 0 auto; padding: 24px 20px; } :where(.fd-compare, .fd-profile) h2 { color: var(--fd-ink); margin-top: 1.5rem; margin-bottom: 0.75rem; font-size: 0.85rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; padding-bottom: 8px; border-bottom: 2px solid var(--fd-ink); } :where(.fd-compare, .fd-profile) .section-header { background: var(--fd-bg); color: var(--fd-faint); padding: 6px 16px; font-weight: 800; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 1.5px; } :where(.fd-compare, .fd-profile) .fight-card { background: var(--fd-card); border: 1px solid var(--fd-border); border-radius: var(--fd-radius); margin-bottom: 0.75rem; overflow: hidden; box-shadow: var(--fd-shadow); } :where(.fd-compare, .fd-profile) .fight-card-header { padding: 0.75rem 1rem; cursor: pointer; user-select: none; position: relative; border-left: 3px solid var(--fd-border); } :where(.fd-compare, .fd-profile) .fight-card-header:hover { background: var(--fd-bg-subtle); } :where(.fd-compare, .fd-profile) .fight-card-header.win-border { border-left-color: var(--fd-win); } :where(.fd-compare, .fd-profile) .fight-card-header.loss-border { border-left-color: var(--fd-red); } :where(.fd-compare, .fd-profile) .fight-result-badge { display: inline-block; font-size: 0.6rem; font-weight: 700; padding: 2px 8px; border-radius: 3px; letter-spacing: 0.08em; margin-bottom: 0.3rem; } :where(.fd-compare, .fd-profile) .result-win { background: #f0fdf4; color: var(--fd-win); border: 1px solid #bbf7d0; } :where(.fd-compare, .fd-profile) .result-loss { background: #fff5f5; color: var(--fd-red); border: 1px solid #fecaca; } :where(.fd-compare, .fd-profile) .result-nc { background: var(--fd-bg); color: var(--fd-faint); border: 1px solid var(--fd-border); } :where(.fd-compare, .fd-profile) .fight-opponent { font-weight: 700; font-size: 0.95rem; color: var(--fd-ink); margin-bottom: 0.15rem; } :where(.fd-compare, .fd-profile) .fight-event-label { position: absolute; top: 0.75rem; right: 1rem; font-size: 0.72rem; color: var(--fd-text); text-align: right; max-width: 50%; } :where(.fd-compare, .fd-profile) .fight-meta { font-size: 0.78rem; color: var(--fd-muted); margin-bottom: 0.3rem; } :where(.fd-compare, .fd-profile) .fight-totals-block { margin-top: 0.4rem; display: flex; flex-direction: column; gap: 0.15rem; } :where(.fd-compare, .fd-profile) .totals-line { display: flex; align-items: center; gap: 0.5rem; font-size: 0.78rem; flex-wrap: wrap; } :where(.fd-compare, .fd-profile) .totals-name { min-width: 130px; font-weight: 600; font-size: 0.78rem; } :where(.fd-compare, .fd-profile) .totals-name.featured { color: var(--fd-ink); } :where(.fd-compare, .fd-profile) .totals-name.opponent { color: var(--fd-muted); } :where(.fd-compare, .fd-profile) .totals-stat { color: var(--fd-ink); font-family: var(--fd-mono); font-size: 0.75rem; } :where(.fd-compare, .fd-profile) .totals-pct { color: var(--fd-muted); font-size: 0.73rem; } :where(.fd-compare, .fd-profile) .totals-kd { color: var(--fd-warn); font-size: 0.73rem; font-weight: 600; } :where(.fd-compare, .fd-profile) .expand-toggle { font-size: 0.72rem; color: var(--fd-red); margin-top: 0.2rem; font-weight: 600; } :where(.fd-compare, .fd-profile) .rounds-detail { border-top: 1px solid var(--fd-border); } :where(.fd-compare, .fd-profile) .rounds-table { width: 100%; border-collapse: collapse; background: var(--fd-bg-subtle); margin: 0; border-radius: 0; border: none; box-shadow: none; } :where(.fd-compare, .fd-profile) .rounds-table th { background: var(--fd-bg-subtle); color: var(--fd-faint); font-size: 0.65rem; padding: 6px 10px; text-transform: uppercase; letter-spacing: 0.5px; } :where(.fd-compare, .fd-profile) .rounds-table td { padding: 4px 10px; font-size: 0.78rem; color: var(--fd-ink); font-family: var(--fd-mono); border-bottom: none; } :where(.fd-compare, .fd-profile) .rounds-table tr:hover { background: var(--fd-hairline); } :where(.fd-compare, .fd-profile) .round-num { color: var(--fd-text); font-weight: 700; } :where(.fd-compare, .fd-profile) .fighter-label { color: var(--fd-muted); font-size: 0.73rem; font-family: inherit; } :where(.fd-compare, .fd-profile) .featured-row td { color: var(--fd-ink); } :where(.fd-compare, .fd-profile) .featured-row .fighter-label { color: var(--fd-red); font-weight: 600; } :where(.fd-compare, .fd-profile) .opponent-row td { color: var(--fd-muted); } :where(.fd-compare, .fd-profile) .round-spacer td { padding: 2px 0; background: var(--fd-bg-subtle); border-bottom: 1px solid var(--fd-border); } :where(.fd-compare, .fd-profile) .debut-disclaimer { background: #eff6ff; border: 1px solid #bfdbfe; color: var(--fd-blue); padding: 12px 16px; border-radius: var(--fd-radius); margin: 10px 0; font-size: 14px; line-height: 1.5; } :where(.fd-compare, .fd-profile) .debut-disclaimer strong { color: var(--fd-blue); } :where(.fd-compare, .fd-profile) .timestamp { text-align: center; color: var(--fd-faint); font-size: 0.7rem; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--fd-border); } /* ── Comparison pages (.fd-compare) ─────────────────────────────────────── */ :where(.fd-compare) h1 { text-align: center; color: var(--fd-ink); font-size: 1.8rem; font-weight: 900; text-transform: uppercase; letter-spacing: -0.5px; margin-bottom: 0; } :where(.fd-compare) .fighter-header { display: flex; justify-content: center; align-items: flex-start; margin: 1rem 0; padding: 1.5rem 0; background: var(--fd-card); border: 1px solid var(--fd-border); border-radius: var(--fd-radius); box-shadow: var(--fd-shadow); } :where(.fd-compare) .fighter-info { flex: 1; text-align: center; } :where(.fd-compare) .fighter-info h3 { margin: 0; color: var(--fd-ink); font-size: 1.6rem; font-weight: 900; text-transform: uppercase; letter-spacing: -0.5px; } :where(.fd-compare) .fighter-records { font-size: 0.85rem; color: var(--fd-text); margin-top: 6px; } :where(.fd-compare) .fighter-records strong { color: var(--fd-ink); font-family: var(--fd-mono); font-size: 0.95rem; } :where(.fd-compare) .vs-divider { display: flex; flex-direction: column; align-items: center; padding: 0 16px; flex-shrink: 0; } :where(.fd-compare) .vs-weight-class { display: inline-block; padding: 2px 10px; border-radius: 3px; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: var(--fd-text); border: 1px solid var(--fd-border); margin-bottom: 6px; } :where(.fd-compare) .vs-color-bar { display: flex; height: 3px; width: 160px; border-radius: 2px; overflow: hidden; } :where(.fd-compare) .vs-color-bar .red { flex: 1; background: var(--fd-red); } :where(.fd-compare) .vs-color-bar .blue { flex: 1; background: var(--fd-blue); } :where(.fd-compare) .vs-text { font-size: 0.7rem; color: var(--fd-faint); font-weight: 700; margin-top: 6px; } :where(.fd-compare) .record-label { display: none; } :where(.fd-compare) .record-pro, :where(.fd-compare) .record-ufc { display: none; } :where(.fd-compare) .bio-section { display: flex; justify-content: center; gap: 0; margin: 0 0 1.5rem; background: var(--fd-card); border: 1px solid var(--fd-border); border-radius: var(--fd-radius); box-shadow: var(--fd-shadow); padding: 14px 0; } :where(.fd-compare) .bio-card { display: none; } :where(.fd-compare) .bio-divider { display: none; } :where(.fd-compare) .bio-compare-item { flex: 1; text-align: center; padding: 0 12px; border-right: 1px solid var(--fd-hairline); } :where(.fd-compare) .bio-compare-item:last-child { border-right: none; } :where(.fd-compare) .bio-compare-label { font-size: 0.6rem; color: var(--fd-faint); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; } :where(.fd-compare) .bio-compare-values { display: flex; justify-content: center; gap: 12px; } :where(.fd-compare) .bio-compare-values span { font-family: var(--fd-mono); font-size: 0.8rem; font-weight: 600; color: var(--fd-ink); } :where(.fd-compare) .bio-compare-values .sep { color: #ddd; font-weight: 400; } :where(.fd-compare) table { width: 100%; border-collapse: collapse; background: var(--fd-card); margin: 0.5rem 0; border-radius: var(--fd-radius); overflow: hidden; border: 1px solid var(--fd-border); box-shadow: var(--fd-shadow); } :where(.fd-compare) th, :where(.fd-compare) td { padding: 8px 16px; text-align: left; border-bottom: 1px solid var(--fd-hairline); } :where(.fd-compare) th { background: var(--fd-bg-subtle); color: var(--fd-ink); font-weight: 700; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.5px; } :where(.fd-compare) th.stat-a { color: var(--fd-red); text-align: center; font-size: 0.75rem; } :where(.fd-compare) th.stat-b { color: var(--fd-blue); text-align: center; font-size: 0.75rem; } :where(.fd-compare) tr:hover { background: var(--fd-bg-subtle); } :where(.fd-compare) .stat-name { font-weight: 600; width: 40%; color: var(--fd-ink); font-size: 0.85rem; } :where(.fd-compare) .stat-a, :where(.fd-compare) .stat-b { width: 20%; text-align: center; font-family: var(--fd-mono); color: var(--fd-ink); font-size: 0.85rem; } :where(.fd-compare) .edge { width: 10%; text-align: center; font-weight: bold; font-size: 0.85rem; } :where(.fd-compare) .edge-a { color: var(--fd-red); } :where(.fd-compare) .edge-b { color: var(--fd-blue); } :where(.fd-compare) .edge-even { color: #ccc; } :where(.fd-compare) .edge-summary-row td { border-top: 2px solid var(--fd-border); background: var(--fd-bg-subtle); font-weight: 700; } :where(.fd-compare) .sample-warning { background: #fff7ed; border: 1px solid #fed7aa; color: var(--fd-warn); padding: 10px 15px; border-radius: var(--fd-radius); margin: 10px 0; font-size: 14px; } :where(.fd-compare) .narrative { background: var(--fd-card); padding: 1.25rem 1.5rem; border-radius: var(--fd-radius); margin: 0.5rem 0; border: 1px solid var(--fd-border); box-shadow: var(--fd-shadow); line-height: 1.7; color: var(--fd-text); font-size: 0.85rem; } :where(.fd-compare) .narrative p { margin-bottom: 0.6rem; } :where(.fd-compare) .narrative p:last-child { margin-bottom: 0; } :where(.fd-compare) .narrative strong { color: var(--fd-ink); } :where(.fd-compare) .last3-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 0.5rem 0; } :where(.fd-compare) .last3-name { color: var(--fd-ink); font-size: 0.85rem; font-weight: 800; margin-bottom: 0.5rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--fd-border); } :where(.fd-compare) .no-fight-data { color: var(--fd-muted); font-size: 0.9rem; padding: 1rem 0; } :where(.fd-compare) .common-opponents { margin: 0.5rem 0; } :where(.fd-compare) .no-common { color: var(--fd-muted); font-size: 0.9rem; padding: 1rem; background: var(--fd-card); border: 1px solid var(--fd-border); border-radius: var(--fd-radius); } :where(.fd-compare) .co-block { margin-bottom: 1.5rem; } :where(.fd-compare) .co-opponent-name { font-size: 1rem; font-weight: 700; color: var(--fd-ink); margin-bottom: 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--fd-border); } :where(.fd-compare) .co-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } :where(.fd-compare) .co-fighter-card { margin-bottom: 0; } :where(.fd-compare) .co-fighter-name-label { font-size: 0.85rem; font-weight: 700; color: var(--fd-ink); margin-bottom: 0.3rem; } :where(.fd-compare) .limited-data-banner { background: #fff7ed; border: 1px solid #fed7aa; color: var(--fd-warn); padding: 1.25rem 1.5rem; border-radius: var(--fd-radius); margin: 1.5rem 0; font-size: 0.9rem; line-height: 1.5; text-align: center; } :where(.fd-compare) .limited-data-banner strong { color: var(--fd-warn); display: block; font-size: 1rem; margin-bottom: 0.5rem; } @media (max-width: 768px) { :where(.fd-compare) h1 { font-size: 1.3rem; } :where(.fd-compare) .fighter-info h3 { font-size: 1.1rem; } :where(.fd-compare) .fighter-header { flex-direction: column; gap: 1rem; align-items: center; } :where(.fd-compare) .vs-divider { padding: 8px 0; } :where(.fd-compare) .stat-name { width: 35%; font-size: 0.75rem; } :where(.fd-compare) .stat-a, :where(.fd-compare) .stat-b { width: 22%; font-size: 0.75rem; } :where(.fd-compare) .edge { width: 10%; font-size: 0.7rem; } :where(.fd-compare) .last3-grid { grid-template-columns: 1fr; } :where(.fd-compare) .bio-section { flex-direction: column; padding: 10px 0; } :where(.fd-compare) .bio-compare-item { border-right: none; border-bottom: 1px solid var(--fd-hairline); padding: 8px 12px; } :where(.fd-compare) .co-grid { grid-template-columns: 1fr; } :where(.fd-compare, .fd-profile) .fight-event-label { position: static; text-align: left; max-width: 100%; margin-bottom: 0.2rem; font-size: 0.7rem; } :where(.fd-compare, .fd-profile) .totals-name { min-width: 100px; } } /* ── Fighter profile pages (.fd-profile) ────────────────────────────────── */ :where(.fd-profile) .profile-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.5rem; background: var(--fd-card); border: 1px solid var(--fd-border); border-radius: var(--fd-radius); box-shadow: var(--fd-shadow); padding: 24px 20px; } :where(.fd-profile) .profile-name { font-size: 2rem; font-weight: 900; text-transform: uppercase; letter-spacing: -0.5px; margin: 6px 0 0; } :where(.fd-profile) .profile-division { display: inline-block; padding: 3px 10px; border-radius: 3px; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; background: var(--fd-red); color: #fff; margin-bottom: 4px; } :where(.fd-profile) .profile-last-fought { font-size: 0.8rem; color: var(--fd-muted); margin-top: 4px; } :where(.fd-profile) .profile-record-box { border: 1px solid var(--fd-border); border-radius: var(--fd-radius); padding: 12px 24px; } :where(.fd-profile) .profile-record-label { font-size: 0.55rem; font-weight: 700; color: var(--fd-red); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 8px; text-align: center; } :where(.fd-profile) .profile-record-values { display: flex; gap: 0; align-items: center; } :where(.fd-profile) .profile-record-item { text-align: center; padding: 0 20px; } :where(.fd-profile) .profile-record-item .label { font-size: 0.55rem; color: var(--fd-faint); text-transform: uppercase; letter-spacing: 0.5px; } :where(.fd-profile) .profile-record-item .value { font-family: var(--fd-mono); font-size: 1.3rem; font-weight: 700; } :where(.fd-profile) .profile-record-sep { width: 1px; height: 32px; background: var(--fd-border); } :where(.fd-profile) .profile-records { display: none; } :where(.fd-profile) .record-block { display: none; } :where(.fd-profile) .profile-content { display: grid; grid-template-columns: 280px 1fr; gap: 20px; align-items: start; } :where(.fd-profile) .profile-bio-section { margin: 0; } :where(.fd-profile) .profile-bio-section .bio-card { max-width: 100%; width: 100%; background: var(--fd-card); border: 1px solid var(--fd-border); border-radius: var(--fd-radius); padding: 16px; box-shadow: var(--fd-shadow); } :where(.fd-profile) .bio-field { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--fd-hairline); } :where(.fd-profile) .bio-label { font-size: 0.8rem; color: var(--fd-muted); } :where(.fd-profile) .bio-value { font-size: 0.85rem; color: var(--fd-ink); font-weight: 600; font-family: var(--fd-mono); } :where(.fd-profile) .profile-stats-table { width: 100%; border-collapse: collapse; background: var(--fd-card); margin: 0.5rem 0; border-radius: var(--fd-radius); overflow: hidden; border: 1px solid var(--fd-border); box-shadow: var(--fd-shadow); } :where(.fd-profile) .profile-stats-table th, :where(.fd-profile) .profile-stats-table td { padding: 8px 16px; border-bottom: 1px solid var(--fd-hairline); } :where(.fd-profile) .profile-stats-table th { background: var(--fd-bg-subtle); color: var(--fd-ink); font-weight: 700; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.5px; } :where(.fd-profile) .profile-stats-table tr:hover { background: var(--fd-bg-subtle); } :where(.fd-profile) .pstat-name { font-weight: 600; width: 55%; color: var(--fd-ink); font-size: 0.85rem; text-align: left; } :where(.fd-profile) .pstat-val { width: 45%; text-align: center; font-family: var(--fd-mono); color: var(--fd-ink); font-size: 0.85rem; } :where(.fd-profile) .fight-history { margin-top: 0.5rem; } :where(.fd-profile) .back-link { display: inline-block; margin-bottom: 0.5rem; color: var(--fd-red); text-decoration: none; font-size: 0.8rem; font-weight: 500; } :where(.fd-profile) .back-link:hover { text-decoration: underline; } @media (max-width: 768px) { :where(.fd-profile) .profile-header { flex-direction: column; gap: 16px; } :where(.fd-profile) .profile-name { font-size: 1.5rem; } :where(.fd-profile) .profile-content { grid-template-columns: 1fr !important; } :where(.fd-profile) .pstat-name { width: 50%; font-size: 0.8rem; } :where(.fd-profile) .pstat-val { width: 50%; font-size: 0.8rem; } } /* ── Event pages (.fd-event) — previews + historical results ────────────── */ :where(.fd-event) .container { max-width: 1100px; margin: 0 auto; padding: 2rem 1rem; } :where(.fd-event) .event-header { margin-bottom: 2rem; border-bottom: 2px solid var(--fd-ink); padding-bottom: 1.5rem; } :where(.fd-event) .event-status { display: inline-block; color: #fff; padding: 0.4rem 0.75rem; border-radius: 4px; font-size: 0.8rem; font-weight: 700; margin-bottom: 0.75rem; letter-spacing: 0.05em; } :where(.fd-event-upcoming) .event-status { background: #dc2626; } :where(.fd-event-past) .event-status { background: var(--fd-ink); } :where(.fd-event) .event-title { font-size: 1.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: -0.5px; margin-bottom: 0.5rem; } :where(.fd-event) .event-meta { color: var(--fd-text); font-size: 1rem; } :where(.fd-event) .event-meta strong { color: var(--fd-ink); } :where(.fd-event) .back-link { display: inline-block; margin-bottom: 1rem; color: var(--fd-red); text-decoration: none; font-size: 0.875rem; } :where(.fd-event) .back-link:hover { color: var(--fd-red-dark); } /* Event previews: matchup cards */ :where(.fd-event) .matchups { display: grid; gap: 1rem; } :where(.fd-event) .matchup-card { display: block; background: var(--fd-card); border: 1px solid var(--fd-border); border-radius: 8px; padding: 1.25rem 1.5rem; transition: all 0.2s; text-decoration: none; color: var(--fd-ink); } :where(.fd-event) .matchup-card:hover { border-color: var(--fd-red); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); } :where(.fd-event) .weight-class { color: var(--fd-muted); font-size: 0.8rem; margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.05em; } :where(.fd-event) .fighters { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; } :where(.fd-event) .fighter-name { font-size: 1.35rem; font-weight: 600; } :where(.fd-event) .fighter-record { font-size: 0.9rem; font-weight: 400; color: var(--fd-muted); } :where(.fd-event) .vs { color: var(--fd-red); font-weight: 700; font-size: 1.1rem; } :where(.fd-event) .compare-cta { color: var(--fd-red); font-weight: 600; font-size: 0.875rem; } :where(.fd-event) .no-matchups { background: var(--fd-card); border: 1px solid var(--fd-border); border-radius: 8px; padding: 2rem; text-align: center; color: var(--fd-muted); } /* Historical results: summary + fight cards */ :where(.fd-event) .event-summary { display: flex; gap: 1.5rem; margin-bottom: 1.5rem; flex-wrap: wrap; } :where(.fd-event) .summary-stat { font-size: 0.85rem; color: var(--fd-muted); } :where(.fd-event) .summary-stat strong { color: var(--fd-ink); } :where(.fd-event) .fights-list { display: grid; gap: 0.75rem; } :where(.fd-event) .fight-card { background: var(--fd-card); border: 1px solid var(--fd-border); border-radius: 8px; overflow: hidden; } :where(.fd-event) .fight-card-header { padding: 1rem 1.25rem; user-select: none; } :where(.fd-event) .fight-card-header.clickable { cursor: pointer; } :where(.fd-event) .fight-card-header.clickable:hover { background: var(--fd-bg-subtle); } :where(.fd-event) .weight-class-tag { color: var(--fd-muted); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.3rem; } :where(.fd-event) .fight-result { font-size: 1.1rem; font-weight: 700; margin-bottom: 0.25rem; color: var(--fd-ink); } :where(.fd-event) .fight-detail-line { font-size: 0.82rem; color: var(--fd-muted); margin-bottom: 0.4rem; } :where(.fd-event) .fight-totals-block { margin-top: 0.5rem; display: flex; flex-direction: column; gap: 0.2rem; } :where(.fd-event) .totals-line { display: flex; align-items: center; gap: 0.6rem; font-size: 0.82rem; flex-wrap: wrap; } :where(.fd-event) .totals-name { min-width: 140px; font-weight: 600; font-size: 0.82rem; } :where(.fd-event) .winner-name { color: var(--fd-ink); } :where(.fd-event) .loser-name { color: var(--fd-muted); } :where(.fd-event) .fighter-a-name { color: var(--fd-ink); } :where(.fd-event) .totals-stat { color: var(--fd-ink); font-family: var(--fd-mono); font-size: 0.8rem; } :where(.fd-event) .totals-pct { color: var(--fd-muted); font-size: 0.78rem; } :where(.fd-event) .totals-kd { color: var(--fd-warn); font-size: 0.78rem; font-weight: 600; } :where(.fd-event) .expand-toggle { font-size: 0.72rem; color: var(--fd-red); font-weight: 600; margin-top: 0.35rem; } :where(.fd-event) .rounds-detail { border-top: 1px solid var(--fd-border); } :where(.fd-event) .rounds-table { width: 100%; border-collapse: collapse; background: var(--fd-bg-subtle); margin: 0; border-radius: 0; border: none; } :where(.fd-event) .rounds-table th { background: var(--fd-bg-subtle); color: var(--fd-faint); font-size: 0.75rem; padding: 6px 10px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; } :where(.fd-event) .rounds-table td { padding: 4px 10px; font-size: 0.78rem; color: var(--fd-ink); font-family: var(--fd-mono); border-bottom: none; } :where(.fd-event) .rounds-table tr:hover { background: var(--fd-hairline); } :where(.fd-event) .round-num { color: var(--fd-text); font-weight: 600; } :where(.fd-event) .fighter-label { color: var(--fd-muted); font-size: 0.78rem; font-family: inherit; } :where(.fd-event) .winner-row td { color: var(--fd-ink); } :where(.fd-event) .winner-row .fighter-label { color: var(--fd-red); font-weight: 600; } :where(.fd-event) .loser-row td { color: var(--fd-muted); } :where(.fd-event) .round-spacer td { padding: 2px 0; background: var(--fd-bg-subtle); border-bottom: 1px solid var(--fd-border); } @media (max-width: 768px) { :where(.fd-event) .event-title { font-size: 1.5rem; } :where(.fd-event) .fighter-name { font-size: 1.125rem; } :where(.fd-event) .fighters { flex-direction: column; text-align: center; gap: 0.25rem; } :where(.fd-event) .fight-result { font-size: 1rem; } :where(.fd-event) .totals-name { min-width: 100px; } } /* ── Chart language (placeholder — populated in Phase 3 with fd-charts.js) ─ */ .fd-chart { position: relative; }