/* DangleData — "Almanac" visual system Warm paper, ink, one rink-red accent. Serif display, mono numerals. Light is the default; `.dark-mode` on / swaps the palette. */ * { margin: 0; padding: 0; box-sizing: border-box; } :root { /* Surfaces */ --paper: #f4f1ea; --paper-2: #ece8de; /* subtle panel */ --paper-3: #e3ded1; /* pressed / hover */ --rule: #17181c; /* strong rule */ --hairline: #d9d4c8; /* light rule */ --hairline-2: #b9b5ab; /* Ink */ --ink: #17181c; --ink-2: #4a4b52; --ink-3: #7d7e86; /* Accent + semantics */ --accent: #b3261e; /* rink red */ --accent-ink: #ffffff; --hit: #1f7a4d; /* a game that cleared the line */ --hot: var(--hit); --cold: #7d7e86; --good: #1f7a4d; /* difficulty badges */ --warn: #b9770e; --bad: #b3261e; --over: var(--ink); --under: var(--ink-2); /* Feedback */ --ok-bg: #e4ebdf; --ok-text: #2d4a2a; --warn-bg: #f0e7cf; --warn-text: #5b4a12; --err-bg: #f1dcd9; --err-text: #7f1a14; --hit-row: #e7e2d3; --miss-row: transparent; /* Legacy aliases still used by a few components */ --bg-gradient-start: var(--paper); --bg-gradient-end: var(--paper); --container-bg: var(--paper); --card-bg: var(--paper-2); --card-hover-border: var(--ink); --text-primary: var(--ink); --text-secondary: var(--ink-2); --button-bg: transparent; --button-text: var(--ink); --button-active-bg: var(--ink); --button-active-text: var(--paper); --input-border: var(--hairline-2); --table-border: var(--hairline); --table-header-bg: var(--ink); --modal-overlay: rgba(23, 24, 28, 0.55); --warning-bg: var(--warn-bg); --warning-text: var(--warn-text); --success-bg: var(--ok-bg); --success-text: var(--ok-text); --error-bg: var(--err-bg); --error-text: var(--err-text); --hit-bg: var(--hit-row); --miss-bg: var(--miss-row); --on-accent: var(--accent-ink); --gold: #c9a227; /* Type */ --font-display: 'DM Serif Display', Georgia, 'Times New Roman', serif; --font-body: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; --font-mono: 'IBM Plex Mono', Menlo, Consolas, monospace; } .dark-mode { --paper: #14161a; --paper-2: #1c1f24; --paper-3: #24282e; --rule: #ece7db; --hairline: #2e3238; --hairline-2: #3a3d44; --ink: #ece7db; --ink-2: #9a978e; --ink-3: #6f6d66; --accent: #f0655a; --accent-ink: #14161a; --hit: #4cbf7c; --cold: #6f6d66; --good: #4cbf7c; --warn: #e0a526; --bad: #f0655a; --ok-bg: #1d2a20; --ok-text: #9fd3a8; --warn-bg: #2a2416; --warn-text: #e0c27a; --err-bg: #2e1a19; --err-text: #f2a69f; --hit-row: #23282b; --modal-overlay: rgba(0, 0, 0, 0.7); --button-active-text: var(--paper); } html { background: var(--paper); } body { font-size: 16px; font-family: var(--font-body); background: var(--paper); color: var(--ink); min-height: 100vh; padding: 0 20px 20px; font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; } a { color: var(--accent); } a:hover { color: var(--ink); } /* ========================================================================== Layout ========================================================================== */ .container { max-width: 960px; margin: 0 auto; padding: 28px 0 40px; } .container-wide { max-width: 1400px; } /* Site header */ .site-header { margin: 0 -20px; padding: 0 20px; background: var(--paper); border-bottom: 1px solid var(--rule); } .site-header-inner { max-width: 1400px; margin: 0 auto; display: flex; align-items: center; gap: 28px; flex-wrap: wrap; padding: 18px 0 14px; } .site-brand { font-family: var(--font-display); font-size: 33px; letter-spacing: -0.01em; color: var(--ink); text-decoration: none; white-space: nowrap; } .site-brand:hover { color: var(--ink); } .site-nav { display: flex; gap: 18px; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; } .site-nav-link { color: var(--ink-2); text-decoration: none; font-size: 15px; font-weight: 500; padding: 6px 0 4px; border-bottom: 2px solid transparent; } .site-nav-link:hover { color: var(--ink); } .site-nav-link.active { color: var(--ink); border-bottom-color: var(--accent); } .site-nav-toggle { display: none; background: transparent; color: var(--ink); border: 1px solid var(--rule); padding: 8px 12px; font: inherit; font-size: 15px; font-weight: 500; cursor: pointer; margin-left: auto; } .site-header-controls { display: flex; gap: 12px; align-items: center; margin-left: auto; flex-shrink: 0; } @media (max-width: 1180px) { /* Only the dashboard's control cluster (sport + view switches) needs its own row */ .site-header-controls:has(.sport-switch) { flex-basis: 100%; margin-left: 0; } } /* Segmented controls (sport, view) */ .sport-switch, .view-switch { display: inline-flex; border: 1px solid var(--rule); } .sport-btn, .view-btn { background: transparent; color: var(--ink); border: none; padding: 8px 16px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; } .sport-btn + .sport-btn, .view-btn + .view-btn { border-left: 1px solid var(--rule); } .sport-btn.active, .view-btn.active { background: var(--ink); color: var(--paper); } .view-btn { display: inline-flex; align-items: center; gap: 6px; } .view-btn svg { width: 14px; height: 14px; } .dark-mode-toggle { background: transparent; color: var(--ink-2); border: none; padding: 8px 4px; font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; } .dark-mode-toggle:hover { color: var(--ink); } /* Site-wide search (header) */ .site-search { position: relative; flex: 0 1 260px; min-width: 160px; } .site-search-input { width: 100%; font: inherit; font-size: 14px; padding: 8px 12px; border: 1px solid var(--hairline-2); background: var(--paper); color: var(--ink); border-radius: 0; -webkit-appearance: none; appearance: none; } .site-search-input:focus { outline: 2px solid var(--accent); outline-offset: -1px; } .site-search-input::-webkit-search-cancel-button { -webkit-appearance: none; } .site-search-results { position: absolute; top: calc(100% + 4px); left: 0; min-width: 100%; width: max-content; max-width: min(420px, 90vw); list-style: none; margin: 0; padding: 0; background: var(--paper); border: 1px solid var(--rule); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18); z-index: 1001; } .site-search-results li a { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 9px 12px; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--hairline); } .site-search-results li:last-child a { border-bottom: none; } .site-search-results li.active a, .site-search-results li a:hover { background: var(--paper-2); color: var(--ink); } .site-search-name { font-family: var(--font-display); font-size: 18px; white-space: nowrap; } .site-search-meta { font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); white-space: nowrap; } .site-search-sport { margin-left: 8px; padding: 1px 5px; border: 1px solid var(--hairline-2); font-size: 10px; letter-spacing: 0.08em; } /* Dashboard heading */ .dashboard-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin: 6px 0 22px; } h1, .dashboard-title, .page-title { font-family: var(--font-display); font-weight: 400; color: var(--ink); font-size: 48px; line-height: 1.05; letter-spacing: -0.01em; } .subtitle { color: var(--ink-2); font-size: 16px; margin-top: 8px; } .page-title { font-size: 44px; margin-bottom: 6px; } .page-title-sub { font-family: var(--font-body); font-size: 0.42em; font-weight: 500; color: var(--ink-2); margin-left: 8px; } /* Status line */ .api-status { font-family: var(--font-mono); font-size: 13px; color: var(--ink-2); padding: 10px 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); margin-bottom: 20px; } .api-status-ok { color: var(--ink-2); } .api-status-error { color: var(--err-text); } /* Season banner */ .season-banner { border-top: 3px solid var(--rule); border-bottom: 1px solid var(--hairline); padding: 16px 0; margin-bottom: 22px; } .season-banner-title { font-family: var(--font-display); font-size: 24px; line-height: 1.2; } .season-banner-text { margin-top: 6px; font-size: 15px; color: var(--ink-2); line-height: 1.5; max-width: 72ch; } /* Ad slots — fixed heights so they never shift the page */ .ad-slot { display: flex; justify-content: center; align-items: center; margin: 0 auto 24px; overflow: hidden; } .ad-slot:empty { display: none; } .ad-slot-top { min-height: 90px; max-width: 970px; } .ad-slot-mid { min-height: 250px; } .ad-slot-player { min-height: 250px; } .ad-slot .adsbygoogle { display: block; width: 100%; } /* ========================================================================== Controls ========================================================================== */ .controls { display: flex; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; align-items: center; } .control-group { display: flex; align-items: center; gap: 8px; color: var(--ink); } .select-input, .text-input, #searchPlayer { font: inherit; font-size: 15px; padding: 9px 12px; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); border-radius: 0; } .text-input, #searchPlayer { flex: 1; min-width: 240px; } .select-input { min-width: 220px; } .select-input:focus, .text-input:focus, #searchPlayer:focus { outline: 2px solid var(--accent); outline-offset: -1px; } .filter-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; background: transparent; color: var(--ink-2); border: 1px solid var(--hairline-2); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; } .filter-toggle-mark { width: 12px; height: 12px; border: 1.5px solid var(--hairline-2); font-size: 11px; line-height: 10px; text-align: center; color: var(--paper); flex-shrink: 0; } .filter-toggle:hover { color: var(--ink); border-color: var(--ink); } .filter-toggle.active { background: var(--ink); color: var(--paper); border-color: var(--ink); } .filter-toggle.active .filter-toggle-mark { border-color: var(--paper); color: var(--paper); } .filter-panel { margin: 14px 0 18px; } /* One-row filter bar: stat · line · toggles */ .filter-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 28px; margin: 14px 0 20px; } .filter-group { display: flex; flex-direction: column; gap: 6px; } .filter-group .filter-label { margin-bottom: 0; } .filter-toggles { display: flex; gap: 8px; flex-wrap: wrap; } .filter-group-toggles { margin-left: auto; } /* Team context in the modal */ .team-ctx { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px 32px; margin-top: 10px; } .team-ctx-head { font-family: var(--font-display); font-size: 20px; margin-bottom: 6px; } .team-ctx-row { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--hairline); font-size: 15px; color: var(--ink-2); } .team-ctx-row strong { font-family: var(--font-mono); color: var(--ink); } .badge.badge-neutral { background: var(--ink); color: var(--paper); } .team-ctx-row .badge { font-size: 13px; padding: 4px 9px; margin-left: 0; min-width: 34px; text-align: center; } .lines-table tr.current-line td { background: var(--hit-row); } .filter-label { display: block; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 8px; } .stat-buttons, .line-filter-buttons { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--rule); } .stat-button, .line-filter-button { padding: 8px 14px; background: transparent; color: var(--ink); border: none; border-right: 1px solid var(--rule); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; } .stat-button:last-child, .line-filter-button:last-child { border-right: none; } .stat-button:hover, .line-filter-button:hover { background: var(--paper-3); } .stat-button.active, .line-filter-button.active { background: var(--ink); color: var(--paper); font-weight: 600; } .line-filter-button { font-family: var(--font-mono); min-width: 52px; text-align: center; } .line-filter-button.all-lines { font-family: var(--font-body); } /* Buttons */ .btn-secondary, .refresh-button { background: transparent; color: var(--ink); border: 1px solid var(--rule); padding: 8px 14px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; } .btn-secondary:hover, .refresh-button:hover { background: var(--ink); color: var(--paper); } .btn-danger { background: transparent; color: var(--accent); border: 1px solid var(--accent); padding: 6px 10px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; } .btn-danger:hover { background: var(--accent); color: var(--accent-ink); } .btn-link { background: none; border: none; color: var(--ink-2); font: inherit; font-size: 14px; text-decoration: underline; cursor: pointer; } /* ========================================================================== Player cards — "ticket": team-colour spine, lifted fill, hit rate as headline ========================================================================== */ :root { --card-fill: #fbfaf6; } .dark-mode { --card-fill: #1c1f24; } .players-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px 22px; margin-top: 10px; } .players-grid.view-table { display: block; } /* Reserve space while a sport's dataset loads so the sections below don't jump */ .players-grid { min-height: 440px; align-content: start; } .players-grid > .loading { align-self: center; } #filters-container { min-height: 150px; } .player-card { background: var(--card-fill); border: 1px solid var(--hairline); border-left: 6px solid var(--team-light, var(--rule)); padding: 14px 16px; cursor: pointer; display: flex; flex-direction: column; gap: 10px; } .dark-mode .player-card { border-left-color: var(--team-dark, var(--rule)); } .player-card:hover { border-color: var(--hairline-2); border-left-color: var(--team-light, var(--rule)); } .dark-mode .player-card:hover { border-left-color: var(--team-dark, var(--rule)); } .player-card:hover .player-name { color: var(--accent); } .card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; } .card-who { min-width: 0; } .player-name { font-family: var(--font-display); font-size: 24px; line-height: 1.1; color: var(--ink); } .player-link { color: inherit; text-decoration: none; } .player-link:hover { text-decoration: underline; } .player-team { color: var(--ink-2); font-size: 13px; margin-top: 4px; } .player-team .mono { font-family: var(--font-mono); } .card-rate { text-align: right; flex: none; } .card-rate .hit-rate-value { font-family: var(--font-mono); font-size: 32px; font-weight: 600; line-height: 1; color: var(--ink); } .hit-rate-sub { font-size: 12px; color: var(--ink-2); margin-top: 4px; white-space: nowrap; } .card-strip .hit-strip span { height: 8px; } .card-strip:empty { height: 8px; } .card-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; border-top: 1px solid var(--hairline); padding-top: 10px; font-family: var(--font-mono); font-size: 13px; color: var(--ink-2); } .card-line strong { color: var(--ink); font-size: 17px; margin-left: 4px; } .card-odds { display: flex; gap: 6px; } /* Ice-time trend marker (cards, modal, player + team pages) */ .toi-trend { white-space: nowrap; } .toi-trend .mono, .toi-trend .toi-delta { font-family: var(--font-mono); } .toi-trend .toi-delta { font-weight: 600; } .toi-trend.up .toi-delta { color: var(--hit); } .toi-trend.down .toi-delta { color: var(--accent); } .toi-trend.flat .toi-delta { color: var(--ink-3); } .toi-line { color: var(--ink-2); font-size: 15px; margin: -10px 0 18px; } .toi-line strong { color: var(--ink); } /* Availability markers (NBA): games missed, injury listing, DNP rows */ .dnp-note { font-family: var(--font-mono); color: var(--warn); font-weight: 600; white-space: nowrap; } .injury-note { font-family: var(--font-mono); font-size: 12px; color: var(--accent); font-weight: 600; white-space: nowrap; } tr.dnp td { color: var(--ink-3); font-style: italic; } tr.dnp td:first-child { box-shadow: inset 4px 0 0 var(--hairline-2); padding-left: 10px; } td.current-stat { font-weight: 700; } /* Team colour chip (before a team abbreviation) */ .team-chip { display: inline-block; width: 10px; height: 10px; background: var(--team-light, var(--ink-3)); vertical-align: -1px; margin-right: 6px; } .dark-mode .team-chip { background: var(--team-dark, var(--ink-3)); } .stat-label { font-size: 11px; color: var(--ink-2); letter-spacing: 0.08em; text-transform: uppercase; } .odds-over, .odds-under { font-family: var(--font-mono); font-size: 13px; font-weight: 600; background: transparent; border: 1px solid var(--rule); padding: 5px 10px; cursor: pointer; color: var(--ink); } .odds-under { color: var(--ink-2); border-color: var(--hairline-2); } .odds-over:hover, .odds-under:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); } .odds-box-anytime { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--ink); border: 1px solid var(--rule); padding: 6px 10px; cursor: pointer; white-space: nowrap; } .odds-box-anytime:hover { background: var(--ink); color: var(--paper); } /* Shared hit-rate colours */ .hit-rate-value { font-family: var(--font-mono); font-size: 22px; font-weight: 600; color: var(--ink); } .hit-rate-count { font-size: 12px; font-weight: 500; color: var(--ink-2); margin-left: 4px; } .hit-rate-excellent { color: var(--hit); } .hit-rate-good { color: var(--ink); } .hit-rate-medium { color: var(--ink-2); } .hit-rate-poor { color: var(--ink-3); } .hit-strip { display: flex; gap: 4px; } .hit-strip span { flex: 1; height: 6px; background: var(--hairline); } .hit-strip span.hit { background: var(--hit); } /* Table view */ .rank-table { border-top: 3px solid var(--rule); } .rank-head, .rank-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) 150px 70px 90px 90px 240px 60px; align-items: center; gap: 12px; } .rank-head { padding: 10px 0; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); border-bottom: 1px solid var(--rule); } .rank-head span:nth-child(n+4), .rank-row > span:nth-child(n+4) { text-align: right; justify-content: flex-end; } .rank-row { padding: 12px 0; border-bottom: 1px solid var(--hairline); cursor: pointer; } .rank-row:hover { background: var(--paper-2); } .rank-num, .rank-line, .rank-season, .rank-odds { font-family: var(--font-mono); } .rank-num { color: var(--ink-2); font-size: 14px; } .rank-player { display: flex; align-items: baseline; gap: 10px; min-width: 0; } .rank-player .player-link { font-family: var(--font-display); font-size: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rank-meta { font-size: 13px; color: var(--ink-2); white-space: nowrap; } .rank-game { font-size: 14px; color: var(--ink-2); } .rank-line { font-size: 22px; font-weight: 600; } .rank-odds .odds-over, .rank-odds .odds-under { font-size: 14px; } .rank-hit { display: flex; align-items: center; gap: 12px; } .rank-hit .hit-strip { width: 110px; flex: none; } .rank-hit .hit-strip span { height: 14px; width: 8px; flex: none; } .rank-hit .hit-rate-value { font-size: 22px; min-width: 52px; text-align: right; } .rank-season { font-size: 15px; } /* Loading / error / empty */ .loading { text-align: center; padding: 48px 20px; color: var(--ink-2); font-size: 18px; line-height: 1.6; } .loading small { display: block; margin-top: 6px; font-size: 14px; } .error { border: 1px solid var(--accent); color: var(--err-text); background: var(--err-bg); padding: 14px 16px; margin-top: 20px; } .grid-span-all { grid-column: 1 / -1; } .loading-spinner { display: inline-block; width: 18px; height: 18px; border: 2px solid var(--hairline-2); border-top-color: var(--ink); border-radius: 50%; animation: spin 0.8s linear infinite; vertical-align: middle; margin-right: 10px; } @keyframes spin { to { transform: rotate(360deg); } } /* ========================================================================== Modal ========================================================================== */ .game-log-modal { display: none; position: fixed; inset: 0; background: var(--modal-overlay); z-index: 1000; overflow-y: auto; padding: 20px; } .modal-content { background: var(--paper); color: var(--ink); max-width: 1000px; margin: 30px auto; padding: 32px 36px; position: relative; border: 1px solid var(--rule); border-top: 6px solid var(--team-light, var(--rule)); overflow-x: auto; } .dark-mode .modal-content { border-top-color: var(--team-dark, var(--rule)); } .close-modal { position: absolute; top: 14px; right: 18px; font-size: 33px; line-height: 1; cursor: pointer; color: var(--ink-2); } .close-modal:hover { color: var(--ink); } .modal-title { font-family: var(--font-display); font-size: 37px; line-height: 1.05; padding-right: 40px; } .modal-subtitle { color: var(--ink-2); margin: 6px 0 14px; font-size: 15px; } .modal-section-title { font-family: var(--font-display); font-size: 24px; margin: 26px 0 10px; } .summary-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); border-top: 3px solid var(--rule); border-bottom: 1px solid var(--rule); margin: 16px 0; } .summary-card { padding: 14px 16px 14px 0; border-right: 1px solid var(--hairline); } .summary-card + .summary-card { padding-left: 16px; } .summary-card:last-child { border-right: none; } .summary-label { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 4px; } .summary-value { font-family: var(--font-mono); font-size: 29px; font-weight: 600; color: var(--ink); } .summary-value.muted { color: var(--ink-3); } .summary-sub { display: block; font-size: 12px; font-weight: 500; color: var(--ink-2); margin-top: 2px; } .summary-card-tonight { box-shadow: inset 0 3px 0 var(--team-light, var(--accent)); } .dark-mode .summary-card-tonight { box-shadow: inset 0 3px 0 var(--team-dark, var(--accent)); } .team-ctx-link { color: inherit; text-decoration: none; border-bottom: 2px solid var(--team-light, var(--hairline-2)); } .dark-mode .team-ctx-link { border-bottom-color: var(--team-dark, var(--hairline-2)); } .team-ctx-link:hover { color: var(--accent); } /* Tables (modal game logs, player pages) */ table, .data-table, .lines-table { width: 100%; border-collapse: collapse; margin-top: 10px; } th, .data-table th, .lines-table th { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); font-weight: 500; text-align: left; padding: 8px 10px 8px 0; background: transparent; border-bottom: 1px solid var(--rule); } td, .data-table td, .lines-table td { padding: 10px 10px 10px 0; border-bottom: 1px solid var(--hairline); color: var(--ink); font-family: var(--font-mono); font-size: 14px; } td:first-child, th:first-child { padding-left: 0; } tr:hover { background: var(--paper-2); } tr.hit td:first-child, .data-table tr.hit td:first-child { box-shadow: inset 4px 0 0 var(--hit); padding-left: 10px; } tr.miss td:first-child, .data-table tr.miss td:first-child { box-shadow: inset 4px 0 0 var(--accent); padding-left: 10px; } tr.hit { background-color: var(--hit-row); } tr.miss { background-color: transparent; } .data-table td:first-child, .lines-table td:first-child { font-family: var(--font-body); } .data-table a { color: var(--ink); font-weight: 600; text-decoration: none; } .data-table a:hover { color: var(--accent); } .data-table .odds-over, .data-table .odds-under { cursor: default; padding: 0; border: none; } .lines-table .line-cell { font-weight: 600; font-size: 18px; } /* Pills (modal available lines) */ .pill { display: inline-block; padding: 4px 10px; border: 1px solid var(--rule); font-family: var(--font-mono); font-size: 13px; font-weight: 600; cursor: pointer; margin-right: 6px; white-space: nowrap; color: var(--ink); } .pill-under { color: var(--ink-2); border-color: var(--hairline-2); } .pill-anytime { background: var(--ink); color: var(--paper); } .pill:hover { background: var(--ink); color: var(--paper); } /* Difficulty badges */ .badge { display: inline-block; color: #fff; padding: 2px 6px; font-family: var(--font-mono); font-size: 12px; font-weight: 600; margin-left: 6px; white-space: nowrap; } .badge-lg { padding: 4px 10px; font-size: 13px; margin-left: 0; } .badge-easy { background: var(--good); } .badge-medium { background: var(--warn); } .badge-hard { background: var(--bad); } .muted { color: var(--ink-2); } .accent { color: var(--accent); } .text-primary { color: var(--ink); } /* Info cards (This Game / H2H) */ .info-card { border-top: 3px solid var(--rule); border-bottom: 1px solid var(--hairline); padding: 14px 0; margin: 18px 0; } .info-card.centered { text-align: center; } .info-card.accent-border { border-top-color: var(--accent); } .info-card-title { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; } .info-card-main { font-family: var(--font-display); font-size: 24px; margin: 6px 0; color: var(--ink); } .info-card-muted { color: var(--ink-2); font-size: 14px; } .info-card-row { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; } .badge-row { margin-top: 10px; text-align: center; } .h2h-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 12px; } .h2h-stat { padding: 8px 0; } .h2h-stat-label { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); } .h2h-stat-value { font-family: var(--font-mono); font-size: 22px; font-weight: 600; margin-top: 2px; } /* Legend */ .legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 14px 0; font-size: 14px; color: var(--ink-2); } .legend-title { font-weight: 600; color: var(--ink); } .legend .badge { margin-left: 0; } /* Collapsible (Available Lines) */ .collapsible-box { border-top: 1px solid var(--rule); margin: 18px 0; } .collapsible-box-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; cursor: pointer; user-select: none; font-weight: 600; } .collapsible-box-content { display: none; } .collapsible-box-content.open { display: block; } .collapse-arrow { display: inline-block; transition: transform 0.2s; } .collapse-arrow.open { transform: rotate(180deg); } /* ========================================================================== Watchlist ========================================================================== */ .watchlist-container { position: fixed; bottom: 20px; right: 20px; width: 380px; max-height: 520px; background: var(--paper); border: 1px solid var(--rule); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18); z-index: 999; } .watchlist-container.minimized { max-height: 52px; overflow: hidden; } .watchlist-container.empty { width: auto; max-height: none; border: none; background: transparent; box-shadow: none; } .watchlist-container.empty .watchlist-header { width: 48px; height: 48px; padding: 0; display: flex; align-items: center; justify-content: center; background: var(--ink); color: var(--paper); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25); } .watchlist-container.empty .watchlist-title, .watchlist-container.empty .watchlist-content { display: none; } .watchlist-container.empty .watchlist-toggle { margin: 0; font-size: 1.3em; } .watchlist-header { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; background: var(--ink); color: var(--paper); cursor: pointer; user-select: none; } .watchlist-title { font-family: var(--font-display); font-size: 20px; display: flex; align-items: center; gap: 8px; } .watchlist-toggle { transition: transform 0.3s; } .watchlist-container.minimized .watchlist-toggle { transform: rotate(180deg); } .watchlist-content { padding: 14px 18px; max-height: 420px; overflow-y: auto; } .watchlist-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; gap: 8px; } .watchlist-hint { font-size: 13px; color: var(--ink-2); } .watchlist-actions { display: flex; gap: 8px; } .watchlist-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--hairline); cursor: pointer; } .watchlist-item:hover .watchlist-item-name { color: var(--accent); } .watchlist-item.selected { box-shadow: inset 4px 0 0 var(--accent); padding-left: 10px; } .watchlist-item-info { flex: 1; min-width: 0; } .watchlist-item-name { font-family: var(--font-display); font-size: 19px; } .watchlist-item-line, .watchlist-item-game { font-size: 13px; color: var(--ink-2); font-family: var(--font-mono); } .watchlist-item-odds { font-family: var(--font-mono); font-weight: 600; } .watchlist-item-remove { background: transparent; border: 1px solid var(--hairline-2); color: var(--ink-2); padding: 4px 8px; cursor: pointer; font-size: 13px; } .watchlist-item-remove:hover { border-color: var(--accent); color: var(--accent); } .parlay-calculator { border-top: 3px solid var(--rule); padding-top: 12px; margin-top: 14px; } .parlay-header { display: flex; justify-content: space-between; align-items: center; } .parlay-title { font-family: var(--font-display); font-size: 20px; } .parlay-odds { font-family: var(--font-mono); font-size: 37px; font-weight: 600; text-align: center; margin: 8px 0; color: var(--accent); } .parlay-payout { text-align: center; font-size: 15px; } .parlay-legs, .parlay-hint { text-align: center; color: var(--ink-2); font-size: 13px; margin-top: 4px; } .parlay-badge { background: var(--accent); color: var(--accent-ink); padding: 1px 6px; font-size: 12px; font-family: var(--font-mono); margin-left: 6px; } .watchlist-notification { position: fixed; bottom: 20px; right: 20px; background: var(--ink); color: var(--paper); padding: 12px 20px; z-index: 10000; font-weight: 600; animation: slideIn 0.25s ease; transition: opacity 0.3s ease; } @keyframes slideIn { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } } /* ========================================================================== Content pages ========================================================================== */ .section { margin: 34px 0; overflow-x: auto; } .section h2 { font-family: var(--font-display); font-size: 29px; margin-bottom: 8px; } .section h3 { font-family: var(--font-display); font-size: 20px; margin-bottom: 8px; } .prose { line-height: 1.65; max-width: 72ch; } .prose p, .prose ul { margin: 10px 0; } .prose ul { padding-left: 22px; } .prose li { margin: 4px 0; } .prose h2 { font-family: var(--font-display); font-size: 26px; margin: 26px 0 8px; } /* League sub-nav (Players | Teams) on directory and team pages */ .league-nav { display: inline-flex; border: 1px solid var(--rule); margin-bottom: 18px; } .league-nav a { padding: 8px 14px; color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 500; } .league-nav a + a { border-left: 1px solid var(--rule); } .league-nav a.active { background: var(--ink); color: var(--paper); font-weight: 600; } .league-nav a:hover:not(.active) { background: var(--paper-3); } .breadcrumbs { font-family: var(--font-mono); font-size: 13px; color: var(--ink-2); margin-bottom: 12px; } .breadcrumbs a { color: var(--ink-2); text-decoration: none; } .breadcrumbs a:hover { color: var(--accent); } .stat-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 6px solid var(--team-light, var(--rule)); border-bottom: 1px solid var(--rule); margin: 22px 0; } .dark-mode .stat-tiles { border-top-color: var(--team-dark, var(--rule)); } .tile { padding: 14px 16px 14px 0; border-right: 1px solid var(--hairline); } .tile + .tile { padding-left: 16px; } .tile:last-child { border-right: none; } .tile-label { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); } .tile-value { font-family: var(--font-mono); font-size: 29px; font-weight: 600; margin-top: 4px; } .stat-tiles-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .tile-badge { margin-top: 6px; } .tile-badge .badge { margin-left: 0; } .muted.small { font-size: 13px; } .teams-table td:first-child { font-family: var(--font-display); font-size: 18px; } .teams-table td:first-child a { font-weight: 400; } .teams-table .badge { margin-left: 8px; } .tables-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 28px; } .table-card { border-top: 3px solid var(--rule); padding-top: 12px; } .table-card .data-table { margin-top: 6px; } .table-card .data-table td { padding: 8px 8px 8px 0; } .games-list { list-style: none; padding: 0; } .games-list li { padding: 8px 0; border-bottom: 1px solid var(--hairline); } .team-jump { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 26px; } .team-jump a { padding: 4px 8px; border: 1px solid var(--hairline-2); color: var(--ink); font-family: var(--font-mono); font-size: 13px; text-decoration: none; } .team-jump a:hover { border-color: var(--ink); } .team-group { margin: 26px 0; border-top: 1px solid var(--rule); padding-top: 10px; } .team-group h2 { font-family: var(--font-display); font-size: 24px; margin-bottom: 8px; } .player-list { columns: 3; column-gap: 24px; list-style: none; padding: 0; } .player-list li { padding: 3px 0; break-inside: avoid; font-size: 15px; } .player-list a { color: var(--ink); text-decoration: none; font-weight: 500; } .player-list a:hover { color: var(--accent); } /* Footer */ .site-footer { max-width: 960px; margin: 20px auto 20px; padding-top: 16px; border-top: 1px solid var(--rule); color: var(--ink-2); font-size: 13px; } .site-footer-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 12px; } .site-footer-links a { color: var(--ink); font-weight: 500; text-decoration: none; } .site-footer-links a:hover { color: var(--accent); } .site-footer-note { margin: 6px 0; line-height: 1.5; max-width: 90ch; } /* ========================================================================== Responsive ========================================================================== */ @media (max-width: 1100px) { .rank-head, .rank-row { grid-template-columns: 32px minmax(0, 1fr) 70px 80px 80px 240px; } .rank-hit .hit-strip { width: 84px; } .rank-hit .hit-strip span { width: 6px; } .rank-game, .rank-head span:nth-child(3) { display: none; } .rank-season, .rank-head span:nth-child(8) { display: none; } } @media (max-width: 768px) { body { padding: 0 16px 16px; } .site-header { margin: 0 -16px; padding: 0 16px; } .site-header-inner { gap: 12px; } .site-brand { font-size: 26px; } .site-nav-toggle { display: inline-block; } .site-nav { display: none; flex-basis: 100%; flex-direction: column; gap: 4px; } .site-nav.open { display: flex; } .site-header-controls { flex-basis: 100%; margin-left: 0; justify-content: space-between; } .site-search { flex-basis: 100%; order: 3; } .site-search-results { max-width: calc(100vw - 32px); } .stat-tiles-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .teams-table .badge { display: none; } .dashboard-heading { flex-direction: column; align-items: flex-start; gap: 6px; } h1, .dashboard-title { font-size: 33px; } .page-title { font-size: 33px; } .controls { flex-direction: column; align-items: stretch; } .filter-group-toggles { margin-left: 0; } .text-input, #searchPlayer, .select-input { min-width: 0; width: 100%; } .stat-buttons, .line-filter-buttons { display: flex; flex-wrap: nowrap; overflow-x: auto; max-width: 100%; } .players-grid { grid-template-columns: 1fr; gap: 14px; } .card-rate .hit-rate-value { font-size: 28px; } .rank-head { display: none; } .rank-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "player line" "hit hit" "odds odds"; row-gap: 8px; } .rank-num, .rank-game, .rank-season { display: none; } .rank-player { grid-area: player; flex-direction: column; gap: 2px; } .rank-line { grid-area: line; } .rank-hit { grid-area: hit; justify-content: flex-start; } .rank-odds { grid-area: odds; display: flex; gap: 8px; justify-content: flex-start; } .rank-odds:nth-of-type(6) { display: none; } .stat-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tile:nth-child(3) { border-right: none; } .tile:nth-child(4) { padding-left: 0; } .player-list { columns: 1; } .watchlist-container { width: calc(100% - 32px); right: 16px; left: 16px; } .watchlist-container.empty { left: auto; width: auto; } .modal-content { padding: 20px 16px; margin: 10px auto; } .summary-card { border-right: none; padding-left: 0; } .ad-slot-top { min-height: 100px; } }