@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap"); /* AltSports Archive ─ Three themes: dark (default), light, cool (cyan easter egg) Toggle via data-theme attribute on */ :root { --font: "Inter", "Helvetica Neue", Arial, sans-serif; --font-size: 14px; --line-height: 1.5; --max-width: 960px; } /* Dark theme */ [data-theme="dark"] { --bg: #0d0d0d; --bg2: #1a1a1a; --border: #333; --text: #d4d4d4; --text-dim: #777; --link: #88aaff; --link-hover: #bbccff; --accent: #88aaff; --tag-bg: #2a1a00; --tag-text: #ff9944; --th-bg: #1a1a1a; --tr-even: #141414; } /* Light theme */ [data-theme="light"] { --bg: #f8f8f8; --bg2: #eeeeee; --border: #ccc; --text: #111; --text-dim: #666; --link: #0044cc; --link-hover: #002288; --accent: #0044cc; --tag-bg: #fff3cd; --tag-text: #856404; --th-bg: #e0e0e0; --tr-even: #f2f2f2; } /* Cool theme */ [data-theme="cool"] { --bg: #10283a; --bg2: #143750; --border: rgba(67, 180, 132, 0.28); --text: #d7f2ff; --text-dim: #7ab8d4; --link: #43b484; --link-hover: #d0ffea; --accent: #43b484; --tag-bg: rgba(26, 122, 82, 0.24); --tag-text: #d0ffea; --th-bg: rgba(20, 55, 80, 0.7); --tr-even: rgba(20, 55, 80, 0.4); } /* Base */ *, *::before, *::after { box-sizing: border-box; } html { background: var(--bg); color: var(--text); font-family: var(--font); font-size: var(--font-size); line-height: var(--line-height); } body { margin: 0; padding: 0; background: var(--bg); } a { color: var(--link); } a:hover { color: var(--link-hover); } main { max-width: var(--max-width); margin: 0 auto; padding: 1.5rem 1rem; } h1, h2, h3 { border-bottom: 1px solid var(--border); padding-bottom: 0.25rem; margin-top: 2rem; } h1 { font-size: 1.6rem; } h2 { font-size: 1.2rem; } h3 { font-size: 1rem; } /* Header */ header { background: var(--bg2); border-bottom: 1px solid var(--border); padding: 0.5rem 1rem; } .site-header { max-width: var(--max-width); margin: 0 auto; display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; } .site-title { font-size: 1.1rem; font-weight: bold; text-decoration: none; color: var(--accent); } nav { display: flex; gap: 1rem; } nav a { text-decoration: none; font-size: 0.9rem; } .header-controls { margin-left: auto; } #theme-toggle { background: none; border: 1px solid var(--border); color: var(--text); cursor: pointer; padding: 0.2rem 0.5rem; font-family: var(--font); font-size: 1rem; } #theme-toggle:hover { border-color: var(--accent); color: var(--accent); } /* Footer */ footer { border-top: 1px solid var(--border); padding: 1rem; font-size: 0.85rem; color: var(--text-dim); text-align: center; margin-top: 3rem; } footer a { color: var(--link); } .disclaimer { font-size: 0.8rem; } /* Tables */ table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: 0.9rem; overflow-x: auto; display: block; } th { background: var(--th-bg); text-align: left; padding: 0.4rem 0.6rem; border-bottom: 2px solid var(--border); white-space: nowrap; } td { padding: 0.3rem 0.6rem; border-bottom: 1px solid var(--border); } tr:nth-child(even) { background: var(--tr-even); } /* Info table */ .info-table th { width: 8rem; background: none; font-weight: bold; border-bottom: 1px solid var(--border); } /* Score banner on game pages */ .score-banner { display: flex; align-items: center; gap: 0.75rem; background: var(--tr-even); border: 1px solid var(--border); border-radius: 6px; padding: 0.75rem 1.25rem; margin: 0.75rem 0 1.25rem; font-size: 1.1rem; width: fit-content; } .score-team { font-weight: 600; } .score-num { font-size: 1.5rem; font-weight: 700; min-width: 2rem; text-align: center; } .score-sep { color: var(--text-dim); } /* Box score grouped sections */ .box-score { margin-top: 1rem; } .box-score-section { margin-bottom: 2rem; } .box-score-category { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); border-bottom: 2px solid var(--accent); padding-bottom: 0.25rem; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem; } .box-score-category::before, .box-score-category::after { content: ""; flex: 1; height: 1px; background: var(--border); } .box-score-category::before { display: none; } .box-score-table th[data-stat] { min-width: 3rem; text-align: right; } .box-score-table td:not(:first-child):not(:nth-child(2)) { text-align: right; font-variant-numeric: tabular-nums; } .box-score-table td:first-child { white-space: nowrap; } /* Player photo */ .player-header { display: flex; align-items: flex-start; gap: 1.25rem; margin-bottom: 1.5rem; } .player-header-text { flex: 1; min-width: 0; } .player-header-text h1 { margin: 0 0 0.2rem; } .player-meta { color: var(--text-dim); font-size: 0.9rem; margin: 0 0 1rem; } .player-meta .sep { margin: 0 0.4rem; opacity: 0.4; } .player-photo { flex-shrink: 0; text-align: center; width: 140px; } .player-photo img { width: 100%; border-radius: 6px; border: 1px solid var(--border); display: block; } .photo-zoom-btn { background: none; border: none; padding: 0; cursor: zoom-in; position: relative; display: block; width: 100%; } .photo-zoom-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; } .photo-zoom-icon { position: absolute; bottom: 5px; right: 5px; font-size: 0.85rem; color: #fff; background: rgba(0,0,0,0.45); border-radius: 3px; padding: 1px 4px; opacity: 0; transition: opacity 0.15s; pointer-events: none; } .photo-zoom-btn:hover .photo-zoom-icon { opacity: 1; } /* Lightbox */ .photo-lightbox { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,0.88); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; } .photo-lightbox[hidden] { display: none; } .photo-lightbox-img { max-width: min(520px, 90vw); max-height: 75vh; border-radius: 6px; object-fit: contain; box-shadow: 0 8px 40px rgba(0,0,0,0.6); } .photo-lightbox-caption { color: rgba(255,255,255,0.65); font-size: 0.75rem; margin-top: 0.75rem; text-align: center; max-width: 480px; } .photo-lightbox-close { position: absolute; top: 1rem; right: 1.25rem; background: none; border: none; color: rgba(255,255,255,0.7); font-size: 2rem; line-height: 1; cursor: pointer; padding: 0; } .photo-lightbox-close:hover { color: #fff; } .player-photo figcaption { font-size: 0.68rem; color: var(--text-dim); margin-top: 0.35rem; line-height: 1.3; } @media (max-width: 500px) { .player-header { flex-direction: column-reverse; } .player-photo { width: 100px; } } /* Career timeline */ .career-timeline { padding-bottom: 2px; } .ct-years, .ct-row { display: flex; align-items: center; gap: 3px; margin-bottom: 3px; flex-wrap: wrap; } .ct-label { width: 64px; min-width: 64px; font-size: 0.7rem; color: var(--text-dim); text-align: right; padding-right: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ct-yr { width: 24px; min-width: 24px; text-align: center; font-size: 0.65rem; color: var(--text-dim); } .ct-cell { width: 24px; min-width: 24px; height: 13px; border-radius: 2px; background: var(--bg2); } .ct-on { background: var(--accent); opacity: 0.9; } [data-type="college"] .ct-on { background: #6b7280; opacity: 0.85; } [data-type="nfl"] .ct-on { background: #4f8fd6; opacity: 1; } [data-type="nfl"] .ct-nfl-badge { font-size: 0.68rem; color: var(--text-dim); font-style: italic; padding-left: 2px; } .nfl-season-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0.8rem; margin-bottom: 1rem; } .nfl-season-card { border: 1px solid var(--border); border-radius: 8px; background: var(--bg2); padding: 0.5rem; } .nfl-season-head { display: flex; align-items: center; gap: 0.45rem; margin-bottom: 0.4rem; flex-wrap: wrap; } .nfl-season-year { font-weight: 700; } .nfl-season-team { color: var(--text); font-size: 0.9rem; } .nfl-season-pos { color: var(--text-dim); font-size: 0.8rem; border: 1px solid var(--border); border-radius: 999px; padding: 0 0.35rem; } .nfl-season-table { font-size: 0.82rem; } .nfl-section h3 { margin: 0.7rem 0 0.45rem; font-size: 1rem; } /* Career totals — single-column wide table */ .career-totals-table { max-width: 28rem; } /* Tags */ .ambiguous-tag { background: var(--tag-bg, var(--border)); color: var(--tag-text, var(--text-dim)); font-size: 0.75rem; padding: 0.1rem 0.3rem; border-radius: 3px; vertical-align: middle; cursor: help; } .meta { color: var(--text-dim); font-size: 0.85rem; margin-left: 0.3rem; } /* Game ID */ .game-id { font-size: 0.75rem; color: var(--text-dim); font-family: var(--font); } /* League list */ .league-list { list-style: none; padding: 0; columns: 2; column-gap: 2rem; } .league-list li { padding: 0.2rem 0; } /* Search */ #search-input { width: 100%; max-width: 480px; padding: 0.5rem 0.75rem; background: var(--bg2); border: 1px solid var(--border); color: var(--text); font-family: var(--font); font-size: 1rem; margin-bottom: 0.5rem; } #search-input:focus { outline: none; border-color: var(--accent); } #search-meta { font-size: 0.85rem; color: var(--text-dim); margin-bottom: 0.5rem; min-height: 1.2rem; } #search-results { list-style: none; padding: 0; margin: 0; } #search-results li { padding: 0.4rem 0; border-bottom: 1px solid var(--border); } #search-results .result-meta { font-size: 0.8rem; color: var(--text-dim); margin-left: 0.5rem; } /* Saved searches */ #saved-searches { margin-top: 1.5rem; } .saved-search-item { display: inline-block; background: var(--bg2); border: 1px solid var(--border); padding: 0.2rem 0.5rem; margin: 0.2rem; cursor: pointer; font-family: var(--font); font-size: 0.85rem; } .saved-search-item:hover { border-color: var(--accent); } .saved-search-delete { margin-left: 0.4rem; color: var(--text-dim); } @media (max-width: 600px) { .league-list { columns: 1; } table { font-size: 0.8rem; } } /* ── Table controls (filter + column chooser) ──────────────────────────────── */ .table-controls { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.4rem; flex-wrap: wrap; } .table-filter { background: var(--bg2); border: 1px solid var(--border); color: var(--text); font-family: var(--font); font-size: 0.85rem; padding: 0.25rem 0.5rem; border-radius: 3px; width: 180px; } .table-filter:focus { outline: 1px solid var(--accent); } /* Sortable column headers */ table.data-table thead th { cursor: pointer; user-select: none; white-space: nowrap; } table.data-table thead th:hover { color: var(--accent); } table.data-table thead th.sort-asc::after { content: " ▲"; font-size: 0.7em; } table.data-table thead th.sort-desc::after { content: " ▼"; font-size: 0.7em; } /* Column chooser */ .col-chooser-btn { background: var(--bg2); border: 1px solid var(--border); color: var(--text); font-family: var(--font); font-size: 0.8rem; padding: 0.25rem 0.5rem; border-radius: 3px; cursor: pointer; position: relative; } .col-chooser-btn:hover { border-color: var(--accent); } .col-chooser-panel { position: absolute; z-index: 100; background: var(--bg2); border: 1px solid var(--border); padding: 0.5rem 0.75rem; min-width: 160px; max-height: 300px; overflow-y: auto; box-shadow: 0 4px 12px rgba(0,0,0,0.4); } .col-chooser-panel.hidden { display: none; } .col-chooser-panel label { display: block; font-size: 0.82rem; padding: 0.15rem 0; cursor: pointer; white-space: nowrap; } .col-chooser-panel label:hover { color: var(--accent); } .col-chooser-panel input[type="checkbox"] { margin-right: 0.35rem; } /* Week group rows */ tr.week-group-row td { background: var(--bg2); color: var(--accent); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.3rem 0.6rem; border-top: 1px solid var(--border); } /* League page coaches section (de-emphasized) */ .coaches-section details { border: 1px solid var(--border); border-radius: 6px; margin: 0.8rem 0 1.25rem; background: var(--bg2); } .coaches-section summary { cursor: pointer; list-style: none; padding: 0.45rem 0.7rem; color: var(--text-dim); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; } .coaches-section summary::-webkit-details-marker { display: none; } .coaches-grid { padding: 0 0.7rem 0.7rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.45rem; } .coach-card { border: 1px solid var(--border); border-radius: 4px; padding: 0.4rem 0.5rem; background: var(--bg); } .coach-card h3 { margin: 0; border: 0; padding: 0; font-size: 0.86rem; font-weight: 500; } .coach-card .roles { margin: 0.2rem 0 0; font-size: 0.78rem; color: var(--text-dim); } .coach-card .coach-teams { margin: 0.2rem 0 0; font-size: 0.76rem; color: var(--accent); } /* Synthetic season-summary game pages */ .season-leaders-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.6rem; margin: 0.8rem 0 1.2rem; } .leader-card { border: 1px solid var(--border); background: var(--bg2); border-radius: 6px; padding: 0.55rem 0.65rem; } .leader-card h3 { margin: 0 0 0.4rem; padding: 0; border: 0; font-size: 0.85rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.04em; } .leader-card ol { margin: 0; padding-left: 1.1rem; } .leader-card li { display: flex; justify-content: space-between; gap: 0.45rem; margin: 0.18rem 0; } .leader-val { color: var(--accent); font-variant-numeric: tabular-nums; white-space: nowrap; } /* League index table on homepage */ .league-index-table td:first-child { font-weight: 500; } .league-index-table { margin-bottom: 1.5rem; } /* ── This Week in History ─────────────────────────────────────────────────── */ .this-week-details { border: 1px solid var(--border); border-radius: 6px; margin-bottom: 2rem; overflow: hidden; } .this-week-details[open] .this-week-summary { border-bottom: 1px solid var(--border); } .this-week-summary { display: flex; align-items: center; padding: 0.6rem 1rem; cursor: pointer; user-select: none; list-style: none; background: var(--bg2); } .this-week-summary::-webkit-details-marker { display: none; } .this-week-summary::after { content: '▾'; margin-left: auto; font-size: 0.85rem; color: var(--text-dim); transition: transform 0.2s; } .this-week-details:not([open]) .this-week-summary::after { transform: rotate(-90deg); } .this-week-summary:hover { background: var(--border); } .this-week-heading { font-size: 0.95rem; font-weight: 600; margin: 0; display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; } .this-week-section { padding: 0 1rem 0.75rem; margin-bottom: 0; } .this-week-label { font-size: 0.8rem; font-weight: 400; color: var(--text-dim); } .tw-tabs { display: flex; gap: 2px; margin: 0.75rem 0 0; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; } .tw-tabs::-webkit-scrollbar { display: none; } .tw-tab { flex: 1; min-width: 52px; background: var(--bg2); border: 1px solid var(--border); color: var(--text-dim); font: inherit; font-size: 0.78rem; cursor: pointer; padding: 0.35rem 0.5rem; text-align: center; line-height: 1.3; display: flex; flex-direction: column; align-items: center; gap: 1px; transition: background 0.1s, color 0.1s; } .tw-tab:hover { background: var(--border); color: var(--text); } .tw-tab-active { background: var(--accent); border-color: var(--accent); color: #fff; } .tw-tab-empty { opacity: 0.45; } .tw-tab-weekday { font-weight: 600; font-size: 0.85rem; } .tw-tab-date { font-size: 0.72rem; white-space: nowrap; } .tw-tab-count { font-size: 0.65rem; background: rgba(255,255,255,0.18); border-radius: 8px; padding: 0 5px; margin-top: 1px; } .tw-tab-active .tw-tab-count { background: rgba(255,255,255,0.3); } .tw-panel { padding: 0.75rem 0 0; } .tw-section-heading { font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-dim); margin: 0 0 0.5rem; } .tw-highlights { margin-bottom: 1.25rem; } .tw-highlight-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.3rem; } .tw-highlight-item { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.25rem 0.4rem; font-size: 0.9rem; } .tw-player-name { font-weight: 600; color: var(--text); } .tw-player-name:hover { color: var(--accent); } .tw-stat-val { font-size: 1.05rem; font-weight: 700; color: var(--accent); min-width: 2.5rem; text-align: right; } .tw-stat-lbl { color: var(--text-dim); font-size: 0.82rem; } .tw-game-ctx { font-size: 0.78rem; color: var(--text-dim); } .tw-game-ctx a { color: var(--text-dim); } .tw-game-ctx a:hover { color: var(--accent); } .tw-game-groups { display: flex; flex-direction: column; gap: 0.35rem; } .tw-game-group { border: 1px solid var(--border); border-radius: 5px; background: var(--bg2); overflow: hidden; } .tw-game-group-summary { cursor: pointer; user-select: none; padding: 0.35rem 0.55rem; font-size: 0.8rem; font-weight: 600; color: var(--text-dim); list-style: none; } .tw-game-group-summary::-webkit-details-marker { display: none; } .tw-game-group-summary::after { content: '▾'; float: right; color: var(--text-dim); transition: transform 0.15s; } .tw-game-group:not([open]) .tw-game-group-summary::after { transform: rotate(-90deg); } .tw-game-group[open] .tw-game-group-summary { border-bottom: 1px solid var(--border); } .tw-game-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.25rem; } .tw-game-item { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; font-size: 0.84rem; flex-wrap: wrap; padding: 0.25rem 0.55rem; } .tw-game-league { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-dim); min-width: 7rem; } .tw-game-matchup { color: var(--text); font-weight: 500; } .tw-game-matchup:hover { color: var(--accent); } .tw-score { color: var(--accent); font-variant-numeric: tabular-nums; margin: 0 0.2rem; } .tw-game-meta { color: var(--text-dim); font-size: 0.72rem; } .tw-no-games { color: var(--text-dim); font-size: 0.88rem; padding: 0.5rem 0; } /* ── Search/Report Tabs ── */ .search-tabs { display: flex; gap: 0; margin-bottom: 1.5rem; border-bottom: 2px solid var(--border); } .tab-btn { background: none; border: none; padding: 0.6rem 1.4rem; color: var(--text-dim); font: inherit; font-size: 0.9rem; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: color 0.15s, border-color 0.15s; } .tab-btn:hover { color: var(--text); } .tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; } /* ── Report Builder ── */ .report-intro { color: var(--text-dim); margin-bottom: 1.25rem; } .report-filters { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-bottom: 1.25rem; } .filter-group { display: flex; flex-direction: column; gap: 0.4rem; } .filter-group--wide { flex: 1; min-width: 20rem; } .filter-label { font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); } .filter-hint { font-size: 0.75rem; font-weight: 400; text-transform: none; letter-spacing: 0; } .multi-select { background: var(--bg2); color: var(--text); border: 1px solid var(--border); border-radius: 4px; padding: 0.3rem; font: inherit; font-size: 0.875rem; min-width: 10rem; } .multi-select option:checked { background: var(--accent); color: #000; } .condition-row { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.5rem; flex-wrap: wrap; } .cond-stat { flex: 1; min-width: 12rem; background: var(--bg2); color: var(--text); border: 1px solid var(--border); border-radius: 4px; padding: 0.35rem 0.5rem; font: inherit; font-size: 0.875rem; } .cond-op { width: 3.5rem; background: var(--bg2); color: var(--text); border: 1px solid var(--border); border-radius: 4px; padding: 0.35rem 0.3rem; font: inherit; font-size: 0.875rem; text-align: center; } .cond-val { width: 6rem; background: var(--bg2); color: var(--text); border: 1px solid var(--border); border-radius: 4px; padding: 0.35rem 0.5rem; font: inherit; font-size: 0.875rem; } .cond-remove { background: none; border: 1px solid var(--border); color: var(--text-dim); border-radius: 4px; padding: 0.35rem 0.6rem; cursor: pointer; font-size: 0.8rem; transition: color 0.15s, border-color 0.15s; } .cond-remove:hover { color: #e55; border-color: #e55; } .report-actions { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.5rem; flex-wrap: wrap; } #report-status { font-size: 0.85rem; color: var(--text-dim); } .btn-primary { background: var(--accent); color: #000; border: none; border-radius: 4px; padding: 0.5rem 1.25rem; font: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: opacity 0.15s; } .btn-primary:hover { opacity: 0.85; } .btn-secondary { background: var(--bg2); color: var(--text); border: 1px solid var(--border); border-radius: 4px; padding: 0.5rem 1rem; font: inherit; font-size: 0.875rem; cursor: pointer; transition: border-color 0.15s, color 0.15s; } .btn-secondary:hover { border-color: var(--accent); color: var(--accent); } .btn-sm { padding: 0.3rem 0.7rem; font-size: 0.8rem; } .report-result-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; } #result-count { font-size: 0.85rem; color: var(--text-dim); } .table-scroll { overflow-x: auto; } /* ── Hall of Fame ──────────────────────────────────────────────────────────── */ .hof-intro { color: var(--text-dim); margin-bottom: 1.25rem; } .hof-leaders-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 2.5rem; margin: 1.25rem 0 2.5rem; } .hof-section h2 { display: flex; align-items: center; gap: 0.45rem; font-size: 1rem; margin-top: 0; padding-bottom: 0.3rem; border-bottom: 1px solid var(--border); } .cat-icon { width: 14px; height: 14px; stroke: var(--accent); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; } .hof-table { margin: 0.5rem 0; font-size: 0.88rem; } .hof-rank-th, .hof-rank { width: 1.8rem; text-align: right; color: var(--text-dim); font-size: 0.82rem; } .hof-stat-th { white-space: nowrap; } .hof-sec-th { color: var(--text-dim); font-weight: 500; } .hof-sec { color: var(--text-dim); font-size: 0.85rem; } .hof-name { max-width: 12rem; } .hof-more { font-size: 0.82rem; margin: 0.4rem 0 0; } /* Stat bars */ .stat-cell { padding: 0; } .stat-bar-wrap { position: relative; padding: 0.3rem 0.6rem; overflow: hidden; } .stat-bar-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent); opacity: 0.14; pointer-events: none; } .stat-bar-text { position: relative; z-index: 1; font-variant-numeric: tabular-nums; } /* Records grid */ .record-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; margin: 1.25rem 0 2rem; } .record-card { border: 1px solid var(--border); background: var(--bg2); padding: 1rem; } .record-card-head { display: flex; align-items: center; gap: 0.45rem; margin-bottom: 0.7rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border); } .record-icon { width: 13px; height: 13px; stroke: var(--accent); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; } .record-label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-dim); } .record-stat { font-size: 1.5rem; font-weight: 700; color: var(--accent); line-height: 1.1; margin-bottom: 0.2rem; } .record-player { font-weight: 500; font-size: 0.9rem; margin-bottom: 0.2rem; } .record-detail { font-size: 0.78rem; color: var(--text-dim); line-height: 1.4; } @media (max-width: 700px) { .hof-leaders-grid { grid-template-columns: 1fr; } .hof-sec-th, .hof-sec { display: none; } } /* ── Charts ─────────────────────────────────────────────────────────── */ .chart-section { margin: 1.8rem 0; } .chart-section h2 { font-size: 1rem; font-weight: 600; margin-bottom: 0.6rem; color: var(--text); } .chart-wrap { position: relative; width: 100%; height: 220px; background: var(--bg2); border: 1px solid var(--border); border-radius: 6px; padding: 0.6rem; box-sizing: border-box; } .chart-wrap--horiz { height: auto; min-height: 240px; } /* ── Thursday lineup ────────────────────────────────────────────────── */ .lineup-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; margin: 1.4rem 0 2rem; } .lineup-slot { background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; padding: 0.9rem 1rem; } .lineup-pos { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.35rem; } .lineup-starter a { font-weight: 600; font-size: 0.95rem; } .lineup-stat { font-size: 0.85rem; color: var(--text); margin-top: 0.2rem; } .lineup-games { font-size: 0.75rem; color: var(--text-dim); margin-top: 0.15rem; } .lineup-empty { font-size: 0.82rem; color: var(--text-dim); font-style: italic; } .lineup-alts { margin-top: 0.5rem; font-size: 0.78rem; color: var(--text-dim); } .lineup-alts summary { cursor: pointer; color: var(--text-dim); font-size: 0.75rem; list-style: none; } .lineup-alts summary::-webkit-details-marker { display: none; } .lineup-alts summary::before { content: '+ '; } details[open].lineup-alts summary::before { content: '– '; } .lineup-alts ol { margin: 0.3rem 0 0; padding-left: 1.2em; } .lineup-alts ol li { margin-bottom: 0.2rem; } /* ── Fun Stats CTA on HoF index ─────────────────────────────────────── */ .funstats-cta { display: flex; align-items: center; gap: 1rem; background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; padding: 1rem 1.2rem; margin-top: 2rem; } .funstats-cta svg { width: 36px; height: 36px; flex-shrink: 0; color: var(--accent); } .funstats-cta > div { flex: 1; font-size: 0.88rem; color: var(--text); line-height: 1.5; } .funstats-link { white-space: nowrap; font-size: 0.82rem; font-weight: 600; } @media (max-width: 600px) { .lineup-grid { grid-template-columns: 1fr 1fr; } .funstats-cta { flex-wrap: wrap; } .funstats-cta svg { display: none; } } /* ── Player Share Buttons ─────────────────────────────────────────────── */ .share-buttons { display: flex; gap: 0.5rem; margin-top: 1rem; align-items: center; } .share-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg2); color: var(--text); font-size: 18px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; } .share-btn:hover { background: var(--accent); color: white; border-color: var(--accent); } .share-twitter { --accent: #1DA1F2; } .share-twitter:hover { background: #1DA1F2; } .share-facebook { --accent: #1877F2; } .share-facebook:hover { background: #1877F2; } .share-linkedin { --accent: #0A66C2; } .share-linkedin:hover { background: #0A66C2; } .share-copy { --accent: #10B981; } .share-copy:hover { background: #10B981; } /* Player header layout — scores positioned top right */ .player-header { display: grid; grid-template-columns: auto 1fr auto; gap: 2rem; align-items: start; } .player-photo { grid-column: 1; } .player-header-text { grid-column: 2; min-width: 0; } .player-scores-box { grid-column: 3; } .player-scores-box { display: flex; flex-direction: column; gap: 1rem; align-self: start; position: relative; } .scores-info-icon { position: absolute; top: 0.75rem; right: 0.75rem; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; font-size: 16px; line-height: 1; color: var(--text-dim); text-decoration: none; cursor: pointer; border-radius: 4px; transition: all 0.2s ease; background: var(--bg); border: 1px solid var(--border); } .scores-info-icon:hover { color: var(--accent); border-color: var(--accent); background: var(--bg2); } .score-badges-container { display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem; background: var(--bg2); border-radius: 8px; border-left: 4px solid var(--accent); } .score-badge { display: flex; flex-direction: column; gap: 0.3rem; padding: 1rem 1.2rem; border-radius: 6px; border: 1px solid var(--border); background: var(--bg); min-width: 120px; align-items: center; text-align: center; transition: all 0.2s ease; } .score-badge:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .badge-number { font-size: 1.8rem; font-weight: 700; line-height: 1; } .all-around-badge .badge-number { color: var(--accent); } .position-badge .badge-number { color: #ff9944; } .badge-label { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); } .badge-rank { font-size: 0.65rem; color: var(--text-dim); opacity: 0.8; } .all-around-badge { border-left: 3px solid var(--accent); border-top: none; } .position-badge { border-left: 3px solid #ff9944; border-top: none; } .score-footnote { margin-top: 3rem; padding: 1.5rem; background: var(--bg2); border-radius: 6px; border-left: 4px solid var(--accent); border-top: 1px solid var(--border); font-size: 0.9rem; color: var(--text-dim); line-height: 1.7; scroll-margin-top: 2rem; } .score-footnote h3 { margin-top: 0; margin-bottom: 0.75rem; font-size: 0.95rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text); } .score-footnote p { margin: 0.75rem 0; } .score-footnote p:first-of-type { margin-top: 0; } .score-footnote p:last-of-type { margin-bottom: 0; } .score-footnote strong { color: var(--text); font-weight: 600; } /* Responsive: tablet and below */ @media (max-width: 900px) { .player-header { grid-template-columns: auto 1fr; gap: 1.5rem; } .player-photo { grid-column: 1; } .player-header-text { grid-column: 2; } .player-scores-box { grid-column: 1 / -1; align-self: auto; } .score-badges-container { flex-direction: row; gap: 1rem; } .score-badge { flex: 1; } } @media (max-width: 640px) { .player-header { grid-template-columns: 1fr; } .player-photo { grid-column: 1; } .player-header-text { grid-column: 1; } .player-scores-box { grid-column: 1; } .score-badges-container { flex-direction: column; gap: 0.75rem; } .score-badge { min-width: unset; padding: 0.85rem; } .badge-number { font-size: 1.4rem; } .badge-label { font-size: 0.65rem; } } /* ─── Articles Section ─────────────────────────────────────────────────────── */ .articles-section { margin-top: 3rem; padding: 2rem; background-color: var(--bg2); border-radius: 8px; border-left: 4px solid var(--accent); } .articles-section h2 { margin-top: 0; margin-bottom: 0.5rem; font-size: 1.5rem; color: var(--text); } .articles-section h2 small { font-weight: 400; color: var(--text-dim); font-size: 0.85em; margin-left: 0.5rem; } .articles-intro { color: var(--text-dim); font-style: italic; margin: 0.5rem 0 1.5rem 0; } .articles-list { display: flex; flex-direction: column; gap: 1.25rem; } .article-item { padding: 1rem; background-color: var(--bg); border-radius: 6px; border: 1px solid var(--border); transition: border-color 0.2s, background-color 0.2s; } .article-item:hover { border-color: var(--accent); background-color: var(--bg2); } .article-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 0.75rem; } .article-header h3 { margin: 0; font-size: 1.05rem; flex: 1; } .article-header a { color: var(--link); text-decoration: none; word-break: break-word; } .article-header a:hover { color: var(--link-hover); text-decoration: underline; } .article-source-badge { display: inline-block; padding: 0.35rem 0.65rem; border-radius: 4px; font-size: 0.75rem; font-weight: 600; white-space: nowrap; flex-shrink: 0; } /* Trust level colors */ .article-source-badge[data-trust="2.0"], .article-source-badge[data-trust="2.5"] { background-color: var(--tag-bg); color: var(--tag-text); } .article-meta { display: flex; gap: 1rem; font-size: 0.85rem; color: var(--text-dim); margin-bottom: 0.75rem; } .article-meta time { font-style: italic; } .article-summary { margin: 0; font-size: 0.95rem; line-height: 1.5; color: var(--text); } @media (max-width: 768px) { .articles-section { padding: 1.5rem; } .article-header { flex-direction: column; gap: 0.5rem; } .article-source-badge { align-self: flex-start; } } /* ── Studies ────────────────────────────────────────────────────────── */ .study { max-width: 880px; margin: 0 auto; } .study-header { margin-bottom: 2rem; } .study-eyebrow { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.75rem; color: var(--text-dim); margin: 0 0 0.5rem; } .study-eyebrow a { color: inherit; } .study-subtitle { font-size: 1.15rem; color: var(--text-dim); margin: 0.25rem 0 0.5rem; } .study-meta { font-size: 0.85rem; color: var(--text-dim); margin: 0.25rem 0 0; } .study-headline-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin: 1.5rem 0 2rem; } .study-stat-card { background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; padding: 1rem 1.25rem; } .study-stat-value { font-size: 1.85rem; font-weight: 700; color: var(--accent); line-height: 1.1; } .study-stat-label { margin-top: 0.4rem; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-dim); } .study-stat-sub { margin-top: 0.35rem; font-size: 0.85rem; color: var(--text); } .study-section { margin: 2rem 0; } .study-section h2 { border-bottom: 1px solid var(--border); padding-bottom: 0.35rem; } .study-chart { margin: 1.5rem 0 2rem; padding: 0; } .study-chart-title { font-weight: 600; margin-bottom: 0.5rem; } .study-chart-note { font-size: 0.85rem; color: var(--text-dim); margin: 0.5rem 0 0; } .study-table td.num, .study-table th.num { text-align: right; white-space: nowrap; } .study-history-details { margin-top: 0.75rem; } .study-history-json { max-height: 320px; overflow: auto; background: var(--bg2); padding: 0.75rem; border-radius: 6px; border: 1px solid var(--border); font-size: 0.75rem; } .studies-index-table .study-subtitle { font-size: 0.85rem; color: var(--text-dim); margin-top: 0.2rem; } /* ── Studies — network graph ───────────────────────────────────────── */ .study-network-host { position: relative; width: 100%; min-height: 460px; background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; } .study-network-host svg { display: block; width: 100%; height: 100%; } .study-network-tip { position: absolute; pointer-events: none; background: var(--bg); border: 1px solid var(--border); color: var(--text); padding: 0.4rem 0.6rem; border-radius: 4px; font-size: 0.8rem; line-height: 1.3; box-shadow: 0 2px 8px rgba(0,0,0,0.4); transition: opacity 0.12s; z-index: 5; } /* ── Play-by-play section ──────────────────────────────────────────────────── */ .pbp-section { margin: 2rem 0; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; } .pbp-section h2 { margin-top: 0; border-bottom: 1px solid var(--border); padding: 0.75rem 1rem; background: var(--bg2); font-size: 1.1rem; } .pbp-drives { padding: 1rem; } .drive { margin-bottom: 1.5rem; padding: 0.75rem; background: var(--bg2); border-radius: 4px; border-left: 4px solid var(--accent); } .drive:last-child { margin-bottom: 0; } .drive-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; font-weight: 500; font-size: 0.95rem; } .drive-team { color: var(--accent); text-transform: uppercase; letter-spacing: 0.05em; } .drive-result { color: var(--text-dim); font-size: 0.85rem; } .drive-plays { font-size: 0.85rem; line-height: 1.6; color: var(--text-dim); } .play { padding: 0.25rem 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .play::before { content: '• '; color: var(--text-dim); margin-right: 0.4rem; } .play-more { padding: 0.25rem 0; color: var(--accent); font-style: italic; font-size: 0.8rem; } .scoring-plays { padding: 1rem; } .scoring-play { display: flex; gap: 1rem; padding: 0.6rem; margin-bottom: 0.5rem; background: var(--bg2); border-radius: 4px; border-left: 3px solid var(--accent); font-size: 0.9rem; } .scoring-play:last-child { margin-bottom: 0; } .play-type { font-weight: 600; color: var(--accent); flex: 0 0 120px; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.05em; } .play-result { flex: 0 0 80px; color: var(--text-dim); text-transform: capitalize; } .play-players { flex: 1; color: var(--text); } /* ── Drive visualization ──────────────────────────────────────────────────── */ .drive-viz { margin: 0; padding: 1rem; background: linear-gradient(180deg, var(--bg2), var(--bg)); border-bottom: 1px solid var(--border); } .drive-viz-wrap { position: relative; width: 100%; } .drive-viz-svg { display: block; width: 100%; height: auto; max-height: 220px; border-radius: 6px; background: var(--bg2); box-shadow: 0 1px 0 rgba(0,0,0,0.2) inset; } .drive-viz-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin-top: 0.6rem; font-size: 0.85rem; } .drive-viz-btn { appearance: none; background: var(--accent); color: var(--bg); border: 1px solid var(--accent); border-radius: 4px; padding: 0.35rem 0.75rem; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: filter 0.12s, transform 0.12s; } .drive-viz-btn:hover:not(:disabled) { filter: brightness(1.1); transform: translateY(-1px); } .drive-viz-btn:disabled { opacity: 0.5; cursor: default; } .drive-viz-btn-secondary { background: transparent; color: var(--text); border-color: var(--border); } .drive-viz-status { color: var(--text-dim); flex: 1 1 auto; min-width: 120px; } .drive-viz-legend { display: inline-flex; gap: 0.75rem; margin-left: auto; } .drive-viz-legend-item { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--text-dim); font-size: 0.8rem; } .drive-viz-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; } @media (max-width: 600px) { .drive-viz { padding: 0.6rem; } .drive-viz-svg { max-height: 170px; } .drive-viz-legend { margin-left: 0; } } /* In-season strip (homepage) */ .in-season-strip { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 0.75rem; margin: 0.5rem 0 1.25rem; padding: 0.5rem 0.75rem; border: 1px solid var(--border, #2a2a2a); border-left: 3px solid #2ecc71; border-radius: 4px; background: var(--bg-soft, rgba(46, 204, 113, 0.06)); font-size: 0.9rem; } .in-season-label { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; color: var(--text-dim, #aaa); text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.75rem; white-space: nowrap; } .in-season-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #2ecc71; box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.6); animation: in-season-pulse 2s infinite; } @keyframes in-season-pulse { 0% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.55); } 70% { box-shadow: 0 0 0 6px rgba(46, 204, 113, 0); } 100% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0); } } .in-season-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem 0.6rem; } .in-season-list li { display: inline; } .in-season-list a { display: inline-block; padding: 0.1rem 0.5rem; border: 1px solid var(--border, #2a2a2a); border-radius: 999px; text-decoration: none; font-weight: 500; } .in-season-list a:hover { border-color: #2ecc71; } .in-season-groups { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; align-items: center; } .in-season-group { display: inline-flex; align-items: center; gap: 0.4rem; } .in-season-sport { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-dim, #888); padding-right: 0.25rem; border-right: 1px solid var(--border, #2a2a2a); }