/** * BSL Modern Theme — dark navy / red design system * Ported from freeagency.php so every wrapped FBB export matches the * production BSL look. Team colors are demoted to accents via * --team-primary / --team-secondary (set by wrapper.php + modern.js). * Theme: data-theme="dark"|"light" on ; default dark; persisted in localStorage. */ :root, html[data-theme="dark"] { --navy: #060d1c; --navy-2: #0b1730; --navy-3: #14264a; --red: #d31235; --red-hot: #f0284a; --blue: #1e4d8c; --blue-bright: #4d8bff; --white: #ffffff; --off: #f4f6f9; --surface-1: rgba(255,255,255,.035); --surface-2: rgba(255,255,255,.055); --surface-3: rgba(255,255,255,.08); --line: rgba(255,255,255,.09); --line-strong: rgba(255,255,255,.16); --muted: #93a4bf; --muted-2: #64748b; --text: #e8eefb; --text-strong: #ffffff; --on-accent: #ffffff; --good: #22c55e; --bad: #ef4444; --warn: #f5b942; /* Soft status / grade colors — readable on dark surfaces */ --pos-good: #35d49a; --grade-a: #4ade80; --grade-a-bg: rgba(34,197,94,.14); --grade-a-border: rgba(34,197,94,.35); --grade-b: #7eb0ff; --grade-b-bg: rgba(77,139,255,.14); --grade-b-border: rgba(77,139,255,.35); --grade-bad: #f87171; --grade-bad-bg: rgba(239,68,68,.1); --grade-bad-border: rgba(239,68,68,.28); --status-warn: #fbbf24; --status-warn-bg: rgba(245,185,66,.1); --status-warn-border: rgba(245,185,66,.35); --status-ok-bg: rgba(34,197,94,.08); --status-ok-border: rgba(34,197,94,.3); --ir-soft: #fca5a5; --header-h: 60px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --radius: 12px; --sh-1: 0 1px 2px rgba(0,0,0,.35); --sh-2: 0 6px 20px -6px rgba(0,0,0,.5); --sh-3: 0 18px 44px -12px rgba(0,0,0,.65); --sp-1: 6px; --sp-2: 10px; --sp-3: 14px; --sp-4: 20px; --sp-5: 28px; --card: var(--navy-2); --accent: var(--red); --accent-2: var(--red-hot); --focus: var(--blue-bright); --hilite: rgba(211,18,53,.12); --ease: cubic-bezier(.4,0,.2,1); /* Team accent defaults (overridden per page) */ --team-primary: var(--red); --team-secondary: var(--blue-bright); /* Legacy aliases still referenced in a few places */ --bg: var(--navy); --ink: var(--text); --glow-red: rgba(211,18,53,.16); --glow-blue: rgba(77,139,255,.14); --topbar-bg: linear-gradient(180deg, rgba(12,26,52,.92), rgba(6,13,28,.88)); --ticker-bg: rgba(0,0,0,.32); --inset-bg: rgba(0,0,0,.2); --inset-bg-strong: rgba(0,0,0,.4); --scroll-thumb: rgba(255,255,255,.16); --scroll-thumb-hover: rgba(255,255,255,.3); --nav-dd-bg: linear-gradient(180deg, #101d3a, var(--navy-2)); } html[data-theme="light"] { --navy: #eef2f8; --navy-2: #ffffff; --navy-3: #e2e8f2; --red: #c41030; --red-hot: #e01e3c; --blue: #1e4d8c; --blue-bright: #2f6fdb; /* --white is used as emphatic TEXT across the skin — map to ink in light mode */ --white: #0b1220; --off: #f7f9fc; --on-accent: #ffffff; --surface-1: rgba(15,28,55,.055); --surface-2: rgba(15,28,55,.08); --surface-3: rgba(15,28,55,.12); --line: rgba(15,28,55,.14); --line-strong: rgba(15,28,55,.22); --muted: #3f516c; --muted-2: #5c6e88; --text: #142033; --text-strong: #0a1220; --good: #168a43; --bad: #d12b2b; --warn: #c58a0a; /* Deeper status / grade colors — readable on light surfaces */ --pos-good: #0f7a45; --grade-a: #0f7a3d; --grade-a-bg: rgba(15,122,61,.12); --grade-a-border: rgba(15,122,61,.38); --grade-b: #1a4fad; --grade-b-bg: rgba(26,79,173,.1); --grade-b-border: rgba(26,79,173,.35); --grade-bad: #b91c1c; --grade-bad-bg: rgba(185,28,28,.1); --grade-bad-border: rgba(185,28,28,.32); --status-warn: #a16207; --status-warn-bg: rgba(161,98,7,.1); --status-warn-border: rgba(161,98,7,.35); --status-ok-bg: rgba(15,122,61,.1); --status-ok-border: rgba(15,122,61,.32); --ir-soft: #b91c1c; --sh-1: 0 1px 2px rgba(15,28,55,.06); --sh-2: 0 6px 20px -8px rgba(15,28,55,.14); --sh-3: 0 18px 44px -14px rgba(15,28,55,.18); --card: #ffffff; --accent: var(--red); --accent-2: var(--red-hot); --focus: var(--blue-bright); --hilite: rgba(211,18,53,.08); --bg: var(--navy); --ink: var(--text); --glow-red: rgba(211,18,53,.08); --glow-blue: rgba(47,111,219,.08); --topbar-bg: linear-gradient(180deg, rgba(255,255,255,.94), rgba(238,242,248,.92)); --ticker-bg: rgba(15,28,55,.05); --inset-bg: rgba(15,28,55,.05); --inset-bg-strong: rgba(15,28,55,.1); --scroll-thumb: rgba(15,28,55,.2); --scroll-thumb-hover: rgba(15,28,55,.35); --nav-dd-bg: linear-gradient(180deg, #ffffff, var(--navy-3)); } * { margin: 0; padding: 0; box-sizing: border-box; } html { overflow-x: hidden; background: var(--bg); color-scheme: dark; } html[data-theme="light"] { color-scheme: light; } body { min-height: 100vh; font-family: 'Barlow', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: radial-gradient(1000px 460px at 8% -12%, var(--glow-red), transparent 60%), radial-gradient(900px 520px at 92% -6%, var(--glow-blue), transparent 55%), var(--bg); background-attachment: fixed; color: var(--text); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden !important; position: relative; } ::selection { background: rgba(211,18,53,.35); } :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* Slim scrollbars */ * { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; } *::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); background-clip: content-box; } button, input, select, textarea { font: inherit; color: inherit; } /* Legacy FBB form controls (e.g. tmstats Offense/Defense switchers) → dark chips */ .content-card input[type="submit"], .content-card input[type="button"], .content-card button, .content-card select { -webkit-appearance: none; appearance: none; background: var(--surface-1); border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-family: 'Barlow Condensed', 'Barlow', sans-serif; font-weight: 700; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; padding: 6px 14px; cursor: pointer; transition: background .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease); } .content-card input[type="submit"]:hover, .content-card input[type="button"]:hover, .content-card button:hover { background: var(--surface-3); border-color: var(--line-strong); color: var(--text-strong); } .content-card select { border-radius: var(--r-sm); } .content-card option { background: var(--navy-2); color: var(--text); } /* Retired watermark overlay — never show it even if stale JS creates one */ .team-logo-background { display: none !important; } /* ============================================ TOPBAR (freeagency .topbar / .brand / .chip) ============================================ */ .topbar { position: sticky; top: 0; z-index: 1000; min-height: var(--header-h); background: var(--topbar-bg); border-bottom: 1px solid var(--line); box-shadow: 0 1px 0 rgba(211,18,53,.55), var(--sh-2); backdrop-filter: saturate(160%) blur(12px); -webkit-backdrop-filter: saturate(160%) blur(12px); } .topbar-inner { max-width: 1400px; min-height: var(--header-h); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 var(--sp-4); color: var(--text); } .brand { display: flex; align-items: center; gap: 12px; min-width: 0; color: inherit; text-decoration: none; } a.brand:hover { text-decoration: none; } .brand-mark, .badge { width: 32px; height: 32px; background: linear-gradient(145deg, var(--red-hot), #8f0c24); color: var(--on-accent); display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; font-family: 'Archivo Black', 'Barlow', sans-serif; font-size: 12px; letter-spacing: .02em; flex-shrink: 0; box-shadow: 0 4px 14px -2px rgba(211,18,53,.6); } .brand-text { font-family: 'Archivo Black', 'Barlow', sans-serif; letter-spacing: .02em; text-transform: uppercase; font-size: 17px; line-height: 1.1; white-space: nowrap; } .brand-text span { color: var(--red-hot); } .brand-sub { font-size: 11px; color: var(--muted-2); margin-top: 1px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; } /* Navigation */ .topbar-nav { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; } .topbar-nav > a, .nav-dd-btn { color: var(--text); background: none; border: none; text-decoration: none; font-family: 'Barlow Condensed', 'Barlow', sans-serif; font-weight: 600; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; padding: 8px 14px; border-radius: 999px; cursor: pointer; transition: background .18s var(--ease), color .18s var(--ease); white-space: nowrap; } .topbar-nav > a:hover, .nav-dd-btn:hover { background: var(--surface-3); color: var(--text-strong); text-decoration: none; } .topbar-nav > a.nav-tool { color: var(--muted); border: 1px solid var(--line); padding: 5px 12px; font-size: 12px; letter-spacing: .04em; } .topbar-nav > a.nav-tool:hover { color: var(--text-strong); border-color: var(--line-strong); background: var(--surface-2); } /* Dropdowns */ .nav-dd { position: relative; display: inline-block; } .nav-dd-menu { position: absolute; top: 100%; right: 0; background: var(--nav-dd-bg); border: 1px solid var(--line-strong); border-radius: var(--r-md); box-shadow: var(--sh-3); min-width: 210px; padding: 6px; margin-top: 6px; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: all .18s var(--ease); z-index: 1000; } .nav-dd.active .nav-dd-menu, .nav-dd:hover .nav-dd-menu { opacity: 1; visibility: visible; transform: translateY(0); } .nav-dd-menu a { display: block; padding: 9px 12px; color: var(--text); text-decoration: none; font-size: 13.5px; border-radius: var(--r-sm); transition: background .16s var(--ease), color .16s var(--ease); } .nav-dd-menu a:hover { background: var(--hilite); color: var(--text-strong); text-decoration: none; } /* ============================================ TOPBAR PLAYER SEARCH ============================================ */ .bsl-search { position: relative; margin-left: auto; flex-shrink: 0; } .bsl-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-left: 8px; flex-shrink: 0; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-1); color: var(--muted); cursor: pointer; transition: background .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease); } .bsl-theme-toggle:hover { background: var(--surface-3); color: var(--text-strong); border-color: var(--line-strong); } .bsl-theme-toggle svg { width: 16px; height: 16px; display: block; } .bsl-theme-toggle .icon-sun { display: none; } .bsl-theme-toggle .icon-moon { display: block; } html[data-theme="light"] .bsl-theme-toggle .icon-sun { display: block; } html[data-theme="light"] .bsl-theme-toggle .icon-moon { display: none; } .bsl-search input { width: 180px; background: var(--surface-1); border: 1px solid var(--line); border-radius: 999px; color: var(--text); font-size: 12.5px; padding: 7px 14px; outline: none; transition: width .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease); } .bsl-search input::placeholder { color: var(--muted-2); } .bsl-search input:focus { width: 230px; border-color: var(--line-strong); background: var(--surface-2); } .bsl-search-results { display: none; position: absolute; top: calc(100% + 8px); right: 0; min-width: 260px; background: var(--navy-2); border: 1px solid var(--line-strong); border-radius: var(--r-md); box-shadow: var(--sh-3); overflow: hidden; z-index: 1200; } .bsl-search-results.open { display: block; } .bsl-search-results a { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 14px; color: var(--text); font-size: 13px; text-decoration: none; border-bottom: 1px solid var(--line); } .bsl-search-results a:last-child { border-bottom: none; } .bsl-search-results a:hover { background: var(--hilite); color: var(--text-strong); } .bsl-search-results a b { font-weight: 600; } .bsl-search-results a span { color: var(--muted-2); font-size: 11.5px; white-space: nowrap; } @media (max-width: 900px) { /* Search stays available; layout handled in mobile nav block below */ } /* ============================================ SHARED BSL COMPONENTS (virtual pages, hero, tables) ============================================ */ .bsl-page-title { font-family: 'Barlow Condensed', 'Barlow', sans-serif; font-size: 34px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; color: var(--white); margin: 4px 0 6px; } .bsl-page-sub { color: var(--muted); font-size: 13.5px; margin: 0 0 var(--sp-4); max-width: 720px; } .bsl-card { background: linear-gradient(180deg, var(--surface-2), var(--surface-1)); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: var(--sp-4); margin-bottom: var(--sp-4); } .bsl-section-title { display: flex; align-items: baseline; gap: 10px; font-family: 'Barlow Condensed', 'Barlow', sans-serif; font-size: 19px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--white); margin: 0 0 var(--sp-3); padding-bottom: var(--sp-2); border-bottom: 1px solid var(--line); position: relative; } .bsl-section-title::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 42px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--red-hot), transparent); } .bsl-section-title span { font-family: 'Barlow', sans-serif; font-size: 12px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--muted-2); } .bsl-table-wrap { overflow-x: auto; border-radius: var(--r-md); } .bsl-table { width: 100%; border-collapse: collapse; font-size: 12.5px; background: rgba(0,0,0,.2); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; } .bsl-table th { background: var(--inset-bg-strong); color: var(--on-accent); font-family: 'Barlow Condensed', 'Barlow', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 11px; padding: 9px 10px; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--line-strong); } .bsl-table td { padding: 7px 10px; color: var(--text); border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; white-space: nowrap; } .bsl-table tbody tr:nth-child(even) { background: var(--surface-1); } .bsl-table tbody tr:hover { background: var(--surface-2); } .bsl-table tbody tr:last-child td { border-bottom: none; } .bsl-table a { color: var(--text); border-bottom: 1px dotted var(--line-strong); } .bsl-table a:hover { color: var(--red-hot); } .bsl-strong { font-weight: 700; color: var(--text-strong); } .bsl-pos { color: var(--pos-good); font-weight: 600; } .bsl-neg { color: var(--red-hot); font-weight: 600; } .bsl-sortable th { cursor: pointer; user-select: none; } .bsl-sortable th:hover { color: var(--red-hot); } .bsl-sortable th.sorted-desc::after { content: " ▾"; } .bsl-sortable th.sorted-asc::after { content: " ▴"; } .bsl-wl { display: inline-block; width: 16px; text-align: center; font-weight: 800; border-radius: 3px; font-size: 11px; } .bsl-wl.bsl-w { color: var(--pos-good); } .bsl-wl.bsl-l { color: var(--red-hot); } .bsl-chip-row, .bsl-filter-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--sp-4); align-items: center; } .bsl-chip { display: inline-flex; align-items: center; background: var(--surface-1); border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-family: 'Barlow Condensed', 'Barlow', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; padding: 5px 12px; cursor: pointer; text-decoration: none; transition: background .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease); } .bsl-chip:hover { background: var(--surface-3); color: var(--text-strong); border-color: var(--line-strong); } .bsl-chip.active { background: var(--red); border-color: var(--red-hot); color: var(--on-accent); } .bsl-table-search { margin-left: auto; background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--text); font-size: 12.5px; padding: 6px 12px; min-width: 220px; outline: none; } .bsl-table-search:focus { border-color: var(--line-strong); background: var(--surface-2); } .bsl-btn { background: var(--red); border: 1px solid var(--red-hot); border-radius: var(--r-sm); color: var(--on-accent); font-family: 'Barlow Condensed', 'Barlow', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 13px; padding: 8px 20px; cursor: pointer; transition: background .16s var(--ease); } .bsl-btn:hover { background: var(--red-hot); } .bsl-mini-photo { border-radius: 50%; object-fit: cover; background: var(--navy-3); border: 1px solid var(--line-strong); flex-shrink: 0; } /* ============================================ PLAYER PAGE HERO + GAME LOG ============================================ */ .bsl-hero { margin: 0 0 var(--sp-4); padding: var(--sp-3) var(--sp-4); background: rgba(0,0,0,.25); border: 1px solid var(--line); border-radius: var(--r-lg); } .bsl-hero-caption { font-family: 'Barlow Condensed', 'Barlow', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--red-hot); margin-bottom: 10px; } .bsl-hero-stats { display: flex; flex-wrap: wrap; gap: 6px 22px; } .bsl-stat { display: flex; flex-direction: column; min-width: 44px; } .bsl-stat-value { font-family: 'Barlow Condensed', 'Barlow', sans-serif; font-size: 22px; font-weight: 800; color: var(--white); line-height: 1.1; font-variant-numeric: tabular-nums; } .bsl-stat-label { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); } .bsl-gamelog { margin-top: var(--sp-4); } /* Keep injected blocks visually stable inside .player-page card */ .content-card.player-page .bsl-table, .content-card.player-page .bsl-table td, .content-card.player-page .bsl-table th { font-size: 12.5px !important; padding: 7px 10px !important; border-radius: 0; box-shadow: none; } .content-card.player-page .bsl-table { display: table !important; margin: 0 !important; width: 100% !important; } .content-card.player-page .bsl-hero { position: relative; z-index: 1; } .content-card.player-page .bsl-gamelog { position: relative; z-index: 1; } /* ============================================ DEPTH CHARTS ============================================ */ .bsl-depth-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-2); } @media (max-width: 1000px) { .bsl-depth-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 640px) { .bsl-depth-grid { grid-template-columns: repeat(2, 1fr); } } .bsl-depth-slot { background: rgba(0,0,0,.22); border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px; min-width: 0; } .bsl-depth-pos { font-family: 'Barlow Condensed', 'Barlow', sans-serif; font-size: 13px; font-weight: 800; letter-spacing: .12em; color: var(--red-hot); text-transform: uppercase; padding-bottom: 6px; margin-bottom: 6px; border-bottom: 1px solid var(--line); } .bsl-depth-player { display: flex; align-items: center; gap: 7px; padding: 5px 6px; border-radius: var(--r-sm); color: var(--text); font-size: 12.5px; text-decoration: none; border-bottom: none; min-width: 0; } .bsl-depth-player:hover { background: var(--hilite); color: var(--text-strong); } .bsl-depth-player.starter .bsl-depth-name { font-weight: 700; color: var(--text-strong); } .bsl-depth-player.off-pos { opacity: .62; } .bsl-depth-name a { color: inherit; text-decoration: none; border-bottom: none; } .bsl-depth-name a:hover { color: var(--red-hot); } .bsl-chip-label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); margin-right: 4px; } a.bsl-chip { text-decoration: none; border-bottom: none; } button.bsl-chip { cursor: pointer; font: inherit; } /* ============================================ SPLITS (player + league) ============================================ */ .bsl-splits { margin: 22px 0; } .bsl-splits-table { margin-bottom: 16px; } .bsl-splits-table td.bsl-split-lab { font-family: 'Barlow Condensed', 'Barlow', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); white-space: nowrap; } .bsl-splits-table tbody tr[data-split="season"] td.bsl-split-lab, .bsl-splits-table tbody tr[data-split="season"] td.bsl-strong { color: var(--text-strong); } .bsl-splits-table tbody tr[data-split="season"] { background: var(--surface-2); } .bsl-pos-splits { margin-top: 4px; } .bsl-pos-splits td.bsl-split-lab { color: var(--text); font-size: 14px; } .bsl-pos-min { margin-top: 8px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-md); background: rgba(0,0,0,.18); } .bsl-pos-min-title { font-family: 'Barlow Condensed', 'Barlow', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 10px; } .bsl-pos-min-row { display: grid; grid-template-columns: 28px 1fr 72px; align-items: center; gap: 10px; margin-bottom: 6px; } .bsl-pos-min-lab { font-size: 12px; font-weight: 700; color: var(--text); } .bsl-pos-min-track { height: 6px; background: var(--surface-3); border-radius: 99px; overflow: hidden; } .bsl-pos-min-fill { height: 100%; background: linear-gradient(90deg, var(--red), var(--red-hot)); border-radius: 99px; } .bsl-pos-min-val { font-size: 11px; color: var(--muted-2); text-align: right; font-variant-numeric: tabular-nums; } .bsl-log-summary { margin: 0 0 10px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: rgba(0,0,0,.2); font-size: 13px; color: var(--muted); } .bsl-log-summary strong { color: var(--white); } @media (max-width: 700px) { .bsl-log-filters { flex-wrap: wrap; } } .bsl-depth-rank { flex-shrink: 0; width: 16px; font-size: 10.5px; color: var(--muted-2); font-variant-numeric: tabular-nums; } .bsl-depth-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; } .bsl-depth-meta { flex-shrink: 0; font-size: 10px; color: var(--muted-2); text-transform: uppercase; letter-spacing: .04em; } .bsl-depth-empty { color: var(--muted-2); padding: 4px 6px; } /* ============================================ ANALYTICS HUB ============================================ */ .bsl-board-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-4); } .bsl-board { margin-bottom: 0; padding: var(--sp-3) var(--sp-4); } .bsl-board h3 { font-family: 'Barlow Condensed', 'Barlow', sans-serif; font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--red-hot); margin: 0 0 8px; } .bsl-board ol { margin: 0; padding: 0 0 0 20px; } .bsl-board li { display: flex; align-items: baseline; gap: 8px; padding: 3.5px 0; font-size: 13px; color: var(--text); list-style-position: outside; } .bsl-board li a { color: var(--text); border-bottom: 1px dotted var(--line-strong); } .bsl-board li a:hover { color: var(--red-hot); } .bsl-board-team { color: var(--muted-2); font-size: 11px; } .bsl-board-val { margin-left: auto; font-weight: 700; color: var(--text-strong); font-variant-numeric: tabular-nums; } /* ============================================ PLAYER COMPARE ============================================ */ .bsl-compare-form { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; } .bsl-compare-form input { flex: 1; min-width: 180px; background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--text); font-size: 13.5px; padding: 9px 14px; outline: none; } .bsl-compare-form input:focus { border-color: var(--line-strong); background: var(--surface-2); } .bsl-compare-heads { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-4); } .bsl-compare-head { display: flex; align-items: center; gap: 12px; margin-bottom: 0; padding: var(--sp-3) var(--sp-4); } .bsl-compare-name { font-weight: 700; font-size: 15px; color: var(--text-strong); } .bsl-compare-name a { color: var(--text-strong); border-bottom: 1px dotted var(--line-strong); } .bsl-compare-sub { color: var(--muted-2); font-size: 12px; margin-top: 2px; } .bsl-compare-bars { display: flex; flex-direction: column; gap: 14px; } .bsl-cmp-metric { } .bsl-cmp-label { font-family: 'Barlow Condensed', 'Barlow', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; } .bsl-cmp-row { display: flex; align-items: center; gap: 10px; padding: 2px 0; } .bsl-cmp-val { width: 58px; text-align: right; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; flex-shrink: 0; } .bsl-cmp-val.best { color: var(--text-strong); font-weight: 700; } .bsl-cmp-track { flex: 1; height: 10px; background: rgba(0,0,0,.3); border-radius: 999px; overflow: hidden; } .bsl-cmp-fill { height: 100%; border-radius: 999px; } /* ============================================ SCORES TICKER (below topbar) ============================================ */ .score-ticker { background: var(--ticker-bg); border-bottom: 1px solid var(--line); overflow: hidden; } .score-ticker-inner { max-width: 1400px; margin: 0 auto; display: flex; align-items: stretch; gap: 0; padding: 0 var(--sp-4); } .score-ticker-label { display: inline-flex; align-items: center; flex-shrink: 0; padding: 4px 12px 4px 0; margin-right: 12px; border-right: 1px solid var(--line-strong); } .score-ticker-day { appearance: none; -webkit-appearance: none; background: var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23e8edf5' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E") no-repeat right 8px center; border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--red-hot); font-family: 'Barlow Condensed', 'Barlow', sans-serif; font-weight: 800; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; padding: 5px 26px 5px 10px; cursor: pointer; min-width: 88px; } .score-ticker-day:hover, .score-ticker-day:focus { border-color: var(--line-strong); outline: none; background-color: var(--surface-3); } .score-ticker-day option { background: var(--navy-2); color: var(--text); font-weight: 600; text-transform: none; letter-spacing: 0; } .score-ticker-viewport { flex: 1; min-width: 0; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 12px), transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 12px), transparent); } .score-ticker-track { display: flex; align-items: center; gap: 4px; width: max-content; will-change: transform; } .score-ticker-track.is-scrolling { animation: bsl-ticker-scroll var(--ticker-duration, 40s) linear infinite; } .score-ticker:hover .score-ticker-track.is-scrolling, .score-ticker:focus-within .score-ticker-track.is-scrolling { animation-play-state: paused; } @keyframes bsl-ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } .ticker-game { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; padding: 6px 12px; border-right: 1px solid var(--line); font-size: 12px; color: var(--muted); text-decoration: none; border-bottom: none; transition: background .16s var(--ease), color .16s var(--ease); white-space: nowrap; } a.ticker-game:hover { background: var(--surface-2); color: var(--text-strong); border-bottom: none; } .ticker-game .tg-team { color: var(--muted); } .ticker-game .tg-team b { color: var(--text); font-variant-numeric: tabular-nums; font-weight: 600; } .ticker-game .tg-team.win { color: var(--text); } .ticker-game .tg-team.win b { color: var(--text-strong); font-weight: 800; } .ticker-game .tg-at { color: var(--muted-2); font-size: 10px; } .ticker-game .tg-final { font-family: 'Barlow Condensed', 'Barlow', sans-serif; font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); padding: 1px 6px; border: 1px solid var(--line); border-radius: 999px; } @media (max-width: 768px) { .score-ticker-inner { padding: 0 var(--sp-2); } .score-ticker-label { padding-right: 8px; margin-right: 8px; } .score-ticker-day { min-width: 78px; padding: 4px 22px 4px 8px; font-size: 11px; } } @media (prefers-reduced-motion: reduce) { .score-ticker-track.is-scrolling { animation: none; } .score-ticker-viewport { overflow-x: auto; } } /* ============================================ LAYOUT ============================================ */ .container { max-width: 1400px; margin: 0 auto; padding: var(--sp-4) var(--sp-4) 72px; width: 100%; box-sizing: border-box; } @media (max-width: 768px) { .container { padding: var(--sp-3) var(--sp-2) 56px; } } body[data-page-type="player"] .container { padding: var(--sp-2) var(--sp-2) 40px !important; max-width: 1400px !important; } .content-card { background: linear-gradient(180deg, var(--surface-2), var(--surface-1)); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-2); padding: var(--sp-5); margin-bottom: var(--sp-4); } @media (max-width: 768px) { .content-card { padding: var(--sp-3); } } /* ============================================ TYPOGRAPHY ============================================ */ h1, h2, h3 { font-family: 'Barlow Condensed', 'Barlow', sans-serif; text-transform: uppercase; letter-spacing: .02em; font-weight: 800; color: var(--white); margin: 20px 0 15px; } font[size="6"] { font-family: 'Barlow Condensed', 'Barlow', sans-serif; font-size: 28px !important; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; display: block; margin: 4px 0 16px; color: var(--white); } font[size="5"] { font-family: 'Barlow Condensed', 'Barlow', sans-serif; font-size: 22px !important; font-weight: 700; color: var(--white); } a { color: var(--text); text-decoration: none; border-bottom: 1px dotted rgba(255,255,255,.24); transition: color .16s var(--ease), border-color .16s var(--ease); } a:hover { color: var(--red-hot); border-bottom-color: var(--red-hot); text-decoration: none; } .topbar a, .roster-nav-tabs a, .nav-dd-menu a, .brand, .home-card a, .roster-tab { border-bottom: none; } hr { border: none; border-top: 1px solid var(--line); margin: var(--sp-3) 0; } /* Neutralize FrontPage-era styling artifacts from the exports */ u { text-decoration: none; } font { color: inherit; } font[color="#FFFFFF"], font[color="#ffffff"] { color: var(--on-accent); } /* ============================================ TABLES — dark, freeagency style ============================================ */ table { max-width: 100% !important; width: 100% !important; table-layout: auto !important; border-collapse: collapse !important; border-spacing: 0 !important; word-wrap: break-word !important; overflow-wrap: break-word !important; background: transparent; } .modern-table { width: 100%; border-collapse: collapse; margin: 14px 0; background: rgba(0,0,0,.18); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; font-size: 13px; } .modern-table thead { background: rgba(0,0,0,.4); color: var(--muted-2); } .modern-table th, th { padding: 11px 14px; text-align: left; background: rgba(0,0,0,.4); font-family: 'Barlow Condensed', 'Barlow', sans-serif; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; font-size: 11px; color: var(--muted); white-space: nowrap; border-bottom: 1px solid var(--line-strong); } .modern-table td, td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; color: var(--text); font-variant-numeric: tabular-nums; } tbody tr { transition: background .16s var(--ease); } .modern-table tbody tr:hover, tr:hover { background: var(--surface-1); } tbody tr:last-child td { border-bottom: none; } /* Old export color attributes → dark equivalents */ tr[bgcolor="#FFFFCC"], td[bgcolor="#FFFFCC"], th[bgcolor="#FFFFCC"] { background: var(--surface-1) !important; } tr[bgcolor="#990033"], td[bgcolor="#990033"], th[bgcolor="#990033"], td[bgcolor="#990033;"] { background: rgba(0,0,0,.4) !important; color: var(--text-strong); } tr[bgcolor="#990033"] td, tr[bgcolor="#990033"] th { background: transparent !important; font-family: 'Barlow Condensed', 'Barlow', sans-serif; text-transform: uppercase; letter-spacing: .06em; font-size: 11.5px; font-weight: 700; color: var(--text-strong); border-bottom: 1px solid var(--line-strong); } td[bgcolor="#FFFFFF"], tr[bgcolor="#FFFFFF"], table[bgcolor="#FFFFFF"], td[bgcolor="#ffffff"], tr[bgcolor="#ffffff"], table[bgcolor="#ffffff"] { background: transparent !important; } /* Daily schedule / box score beige rows */ tr[bgcolor="#ECECE4" i], td[bgcolor="#ECECE4" i], tr[bgcolor="#CCCCC4" i], td[bgcolor="#CCCCC4" i], tr[bgcolor="#DDDDD4" i], td[bgcolor="#DDDDD4" i] { background: var(--surface-1) !important; color: var(--text); } tr[bgcolor="#ECECE4" i] font, td[bgcolor="#ECECE4" i] font, tr[bgcolor="#CCCCC4" i] font, td[bgcolor="#CCCCC4" i] font, tr[bgcolor="#DDDDD4" i] font, td[bgcolor="#DDDDD4" i] font { color: var(--text) !important; } /* Text containment (legacy exports have rigid width attributes) */ table td, table th { word-wrap: break-word !important; overflow-wrap: break-word !important; white-space: normal; max-width: 100%; box-sizing: border-box !important; min-width: 0; } table:not(.roster-modern-table) td, table:not(.roster-modern-table) th { width: auto !important; } /* Keep player/team names on one line inside data tables */ td a { white-space: nowrap !important; word-break: keep-all !important; overflow-wrap: normal !important; display: inline-block; max-width: 100%; } /* Roster rebuilt tables — columns aligned (Pos/grades are 1–3 chars) */ .roster-modern-table td, .roster-modern-table th { word-break: keep-all !important; white-space: nowrap !important; overflow: visible !important; text-overflow: clip !important; max-width: none !important; } /* ============================================ PLAYER PHOTOS + TEAM LOGOS ============================================ */ .player-photo-inline { width: 45px; height: 60px; object-fit: cover; border-radius: var(--r-sm); box-shadow: var(--sh-1); border: 1px solid var(--line-strong); display: block; background: var(--navy-3); } .player-photo-wrapper { float: left; margin-right: 20px; margin-bottom: 12px; } .player-photo { width: 140px; height: 186px; object-fit: cover; border-radius: var(--r-md); box-shadow: var(--sh-2); border: 2px solid var(--line-strong); background: var(--navy-3); } .team-logo-inline { display: inline-block !important; vertical-align: middle !important; margin: 0 4px !important; width: 22px !important; height: 22px !important; object-fit: contain !important; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); } /* Percentile heat map (Analytics Hub) */ .bsl-table td.bsl-pct-elite { background: rgba(34,197,94,.22); color: var(--text-strong); font-weight: 700; } .bsl-table td.bsl-pct-high { background: rgba(34,197,94,.12); } .bsl-table td.bsl-pct-mid { background: transparent; } .bsl-table td.bsl-pct-low { background: rgba(239,68,68,.1); } .bsl-table td.bsl-pct-poor { background: rgba(239,68,68,.2); color: var(--text-strong); } html[data-theme="light"] .bsl-table td.bsl-pct-elite { background: rgba(15,122,61,.18); } html[data-theme="light"] .bsl-table td.bsl-pct-high { background: rgba(15,122,61,.1); } html[data-theme="light"] .bsl-table td.bsl-pct-low { background: rgba(185,28,28,.08); } html[data-theme="light"] .bsl-table td.bsl-pct-poor { background: rgba(185,28,28,.16); } /* ============================================ FOOTER ============================================ */ .page-created-footer { text-align: center; font-size: 11px !important; color: var(--muted-2); margin-top: 20px; padding-top: 10px; border-top: 1px solid var(--line); position: relative; z-index: 1; } /* ============================================ HOME PAGE (frameset replacement) ============================================ */ .home-hero { text-align: center; padding: 46px 20px 30px; } .home-hero .home-title { font-family: 'Archivo Black', 'Barlow', sans-serif; text-transform: uppercase; font-size: clamp(30px, 6vw, 52px); letter-spacing: .02em; color: var(--white); margin: 0 0 6px; } .home-hero .home-title span { color: var(--red-hot); } .home-hero .home-sub { color: var(--muted); font-size: 15px; letter-spacing: .12em; text-transform: uppercase; font-family: 'Barlow Condensed', 'Barlow', sans-serif; } .home-section-title { text-align: center; font-size: 20px; letter-spacing: .08em; color: var(--muted); margin: 0 0 var(--sp-4); position: relative; } .home-section-title::after { content: ""; display: block; width: 42px; height: 2px; margin: 8px auto 0; border-radius: 2px; background: linear-gradient(90deg, var(--red-hot), transparent); } /* Feature-card grid (layout inspired by nbnanalytics.com home) */ .home-nav-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--sp-3); margin-top: var(--sp-3); } a.home-card { display: flex; flex-direction: column; gap: 8px; background: linear-gradient(180deg, var(--surface-2), var(--surface-1)); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: var(--sp-4); color: var(--text); text-decoration: none; border-bottom: 1px solid var(--line); transition: transform .16s var(--ease), border-color .16s var(--ease), background .16s var(--ease), box-shadow .16s var(--ease); } a.home-card:hover { transform: translateY(-3px); border-color: var(--line-strong); background: linear-gradient(180deg, var(--surface-3), var(--surface-1)); box-shadow: var(--sh-2); color: var(--text); text-decoration: none; } .home-card-icon { font-size: 22px; line-height: 1; } .home-card-title { font-family: 'Barlow Condensed', 'Barlow', sans-serif; text-transform: uppercase; letter-spacing: .04em; font-weight: 800; font-size: 17px; color: var(--white); } .home-card-desc { font-size: 13px; line-height: 1.5; color: var(--muted); flex: 1; } .home-card-cta { font-family: 'Barlow Condensed', 'Barlow', sans-serif; text-transform: uppercase; letter-spacing: .07em; font-size: 12.5px; font-weight: 700; color: var(--red-hot); } a.home-card:hover .home-card-cta { color: var(--text-strong); } /* ============================================ FREE AGENTS / DRAFT LIST PAGES ============================================ */ body[data-page-type="fa"] .content-card > table:first-of-type td, body[data-page-type="draftlist"] .content-card > table:first-of-type td { border-bottom: none; } /* Sort header cells rendered as chips */ body[data-page-type="fa"] td[bgcolor="#990033"] a, body[data-page-type="draftlist"] td[bgcolor="#990033"] a { color: var(--text-strong); border-bottom: none; font-family: 'Barlow Condensed', 'Barlow', sans-serif; text-transform: uppercase; letter-spacing: .07em; font-size: 12px; font-weight: 700; } body[data-page-type="fa"] td[bgcolor="#990033"] a:hover, body[data-page-type="draftlist"] td[bgcolor="#990033"] a:hover { color: var(--red-hot); } .fa-player-cell { display: flex; align-items: center; gap: 10px; min-width: 190px; } .fa-headshot { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; object-position: top; background: var(--navy-3); border: 1px solid var(--line-strong); flex-shrink: 0; display: block; } .fa-player-cell a { font-family: 'Barlow Condensed', 'Barlow', sans-serif; font-size: 15.5px; font-weight: 700; letter-spacing: .01em; color: var(--text-strong); } /* ============================================ BOX SCORES ============================================ */ .content-card.boxscore-page h3, .content-card.boxscore-page H3 { text-align: center; font-size: 22px; margin: 6px 0 12px; } .content-card.boxscore-page table { background: rgba(0,0,0,.18); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; margin: 0 auto 22px; font-size: 13px; } .content-card.boxscore-page td, .content-card.boxscore-page th { padding: 8px 10px; } /* ============================================ PLAYER PAGE BASICS (details in player_page.css) ============================================ */ .player-page .player-title { font-family: 'Barlow Condensed', 'Barlow', sans-serif; font-size: 30px; font-weight: 800; text-transform: uppercase; margin: 0 0 16px 0; line-height: 1.15; color: var(--white); text-align: center; display: block; width: 100%; } .content-card.player-page table textarea { width: 100% !important; min-height: 90px !important; max-height: 140px !important; font-size: 12px !important; padding: 10px !important; resize: none !important; overflow-y: auto !important; border: 1px solid var(--line); border-radius: var(--r-sm); background: rgba(0,0,0,.25); color: var(--text); line-height: 1.5; } /* Stats-only iframe page */ body[data-page-type="playerstats"] { background: var(--navy); } .stats-only { padding: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; } .stats-only table { margin: 0; } .content-card.player-page iframe { width: 100% !important; height: 320px !important; margin: 18px 0 !important; border: 1px solid var(--line-strong) !important; border-radius: var(--r-md); background: var(--navy); box-shadow: var(--sh-1); } /* ============================================ PLAYOFF BRACKET ============================================ */ .content-card.playoffs-page { padding: 0 !important; overflow: hidden; } .po-header { padding: 28px 28px 18px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,.03), transparent 80%), rgba(0,0,0,.18); } .po-title { font-family: 'Barlow Condensed', 'Barlow', sans-serif; font-size: clamp(28px, 4vw, 40px); font-weight: 800; text-transform: uppercase; letter-spacing: .02em; color: var(--white); margin: 0 0 4px; line-height: 1; } .po-sub { margin: 0; color: var(--muted); font-size: 13px; } .po-bracket-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 20px 16px 28px; } .po-bracket { display: grid; grid-template-columns: repeat(7, 158px); gap: 12px 10px; width: max-content; min-width: 100%; align-items: stretch; position: relative; } .po-conf-label { grid-column: 1 / 4; font-family: 'Barlow Condensed', 'Barlow', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 0 4px 4px; } .po-conf-label.po-east { grid-column: 5 / 8; text-align: right; } .po-col { display: flex; flex-direction: column; gap: 10px; width: 158px; } .po-col-head { font-family: 'Barlow Condensed', 'Barlow', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); text-align: center; padding: 4px 0 8px; border-bottom: 1px solid var(--line); } .po-col-body { display: flex; flex-direction: column; justify-content: space-around; gap: 14px; flex: 1; min-height: 420px; } .po-finals-col .po-col-body { justify-content: center; gap: 16px; min-height: 420px; } .po-series { background: linear-gradient(180deg, var(--surface-3), var(--surface-1)); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--sh-1); } .po-series.po-empty { opacity: .35; } .po-team { display: grid; grid-template-columns: 28px 22px 1fr 28px; align-items: center; gap: 6px; padding: 8px 10px; color: var(--text); text-decoration: none; border-bottom: 1px solid var(--line); border-bottom-style: solid; min-height: 40px; } .po-team:last-child { border-bottom: none; } .po-team:hover { background: var(--hilite); color: var(--text-strong); text-decoration: none; border-bottom-color: var(--line); } .po-team.win { background: rgba(209, 31, 46, .12); } .po-team.win .po-name { color: var(--white); font-weight: 700; } .po-team.win .po-wins { background: var(--red); color: var(--on-accent); border-color: transparent; } .po-seed { font-size: 11px; font-weight: 700; color: var(--muted-2); font-variant-numeric: tabular-nums; } .po-logo { width: 20px; height: 20px; object-fit: contain; } .po-logo-lg { width: 36px; height: 36px; } .po-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .po-wins { justify-self: end; font-family: 'Barlow Condensed', 'Barlow', sans-serif; font-size: 15px; font-weight: 800; min-width: 22px; text-align: center; padding: 1px 0; border-radius: 4px; border: 1px solid var(--line); color: var(--muted); } .po-champion, .po-mvp { text-align: center; padding: 14px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: linear-gradient(180deg, rgba(209,31,46,.14), var(--surface-1)); } .po-mvp { background: linear-gradient(180deg, rgba(255,255,255,.04), var(--surface-1)); } .po-champ-lab { font-family: 'Barlow Condensed', 'Barlow', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 8px; } .po-champ-team { display: inline-flex; align-items: center; gap: 10px; color: var(--white); font-family: 'Barlow Condensed', 'Barlow', sans-serif; font-size: 22px; font-weight: 800; text-transform: uppercase; text-decoration: none; border-bottom: none; } .po-champ-team:hover { color: var(--red-hot); } .po-mvp-name { font-family: 'Barlow Condensed', 'Barlow', sans-serif; font-size: 18px; font-weight: 800; color: var(--white); } .po-mvp-meta { font-size: 12px; color: var(--muted); margin-top: 2px; } .po-boxes { padding: 8px 28px 28px; border-top: 1px solid var(--line); } .po-section-title { font-family: 'Barlow Condensed', 'Barlow', sans-serif; font-size: 18px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--white); margin: 16px 0 12px; } .po-boxes-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .po-box-col { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; } .po-box-head { font-family: 'Barlow Condensed', 'Barlow', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--line); } .po-box-col ul { list-style: none; margin: 0; padding: 0; } .po-box-col li { margin: 0; } .po-box-col a { display: block; padding: 5px 0; font-size: 13px; color: var(--text); border-bottom: 1px solid transparent; } .po-box-col a:hover { color: var(--red-hot); } /* Mobile nav toggle */ .nav-toggle { display: none; align-items: center; justify-content: center; width: 40px; height: 36px; margin-left: auto; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--text); cursor: pointer; padding: 0; } .nav-toggle-bars { display: block; width: 18px; height: 2px; background: var(--text); border-radius: 1px; position: relative; } .nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: var(--text); border-radius: 1px; } .nav-toggle-bars::before { top: -6px; } .nav-toggle-bars::after { top: 6px; } .topbar.nav-open .nav-toggle-bars { background: transparent; } .topbar.nav-open .nav-toggle-bars::before { top: 0; transform: rotate(45deg); } .topbar.nav-open .nav-toggle-bars::after { top: 0; transform: rotate(-45deg); } /* Generic table scroll wrappers */ .bsl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; margin: 8px 0; border-radius: var(--r-md); } /* ============================================ RESPONSIVE ============================================ */ @media (max-width: 900px) { .nav-toggle { display: inline-flex; } .topbar-inner { flex-wrap: wrap; padding: 8px 12px; gap: 8px; align-items: center; } .topbar-nav { display: none; width: 100%; flex-direction: column; align-items: stretch; gap: 2px; padding: 8px 0 4px; border-top: 1px solid var(--line); } .topbar.nav-open .topbar-nav { display: flex; } .topbar-nav > a, .nav-dd-btn { width: 100%; text-align: left; padding: 10px 12px; font-size: 14px; border-radius: var(--r-sm); } .nav-dd { display: block; width: 100%; } .nav-dd-menu { position: static; display: none; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 1px solid var(--line); margin: 0 0 6px; width: 100%; } .nav-dd.active .nav-dd-menu { display: block; } .bsl-search { display: block; width: 100%; order: 5; } .bsl-search input { width: 100%; } } @media (max-width: 768px) { .brand-text { font-size: 15px; } .brand-sub { display: none !important; } .player-photo { width: 110px; height: 146px; } .player-photo-inline { width: 45px; height: 60px; } .fa-player-cell { min-width: 150px; } .home-nav-grid { grid-template-columns: 1fr; gap: var(--sp-2); } .home-hero .home-title { font-size: 42px; } .home-card-desc { font-size: 12.5px; } .po-header { padding: 20px 16px 14px; } .po-bracket-scroll { padding: 14px 12px 20px; margin: 0 -4px; } .po-bracket-scroll::after { content: "Swipe for full bracket →"; display: block; margin-top: 10px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2); font-family: 'Barlow Condensed', 'Barlow', sans-serif; } .po-boxes { padding: 8px 16px 20px; } .po-boxes-grid { grid-template-columns: 1fr 1fr; gap: 8px; } .po-col-body { min-height: 360px; gap: 10px; } .po-finals-col .po-col-body { min-height: 360px; } .po-name { font-size: 12.5px; } .content-card.boxscore-page table, .content-card[data-page-type="standings"] table, .content-card[data-page-type="leagueleaders"] table, .content-card[data-page-type="generic"] table, .content-card[data-page-type="salaryneeds"] table { font-size: 12px; } .score-ticker-day { font-size: 11px; } .ticker-game { padding: 4px 8px; } } @media (max-width: 480px) { .po-boxes-grid { grid-template-columns: 1fr; } .po-team { grid-template-columns: 24px 18px 1fr 24px; padding: 7px 8px; gap: 4px; } .po-name { font-size: 12px; } .container { padding: var(--sp-2) var(--sp-2) 48px; } } /* ============================================ LIGHT MODE — contrast fixes ============================================ */ html[data-theme="light"] .content-card input[type="submit"]:hover, html[data-theme="light"] .content-card input[type="button"]:hover, html[data-theme="light"] .content-card button:hover, html[data-theme="light"] .nav-dd-menu a:hover, html[data-theme="light"] .bsl-search-results a:hover, html[data-theme="light"] .bsl-strong, html[data-theme="light"] .bsl-chip:hover, html[data-theme="light"] .bsl-depth-player:hover, html[data-theme="light"] .bsl-depth-player.starter .bsl-depth-name, html[data-theme="light"] .bsl-compare-name, html[data-theme="light"] .bsl-compare-name a, html[data-theme="light"] .bsl-cmp-val.best, html[data-theme="light"] a.ticker-game:hover, html[data-theme="light"] .ticker-game .tg-team.win b, html[data-theme="light"] a.home-card:hover .home-card-cta, html[data-theme="light"] .po-team:hover, html[data-theme="light"] .po-team.win .po-name, html[data-theme="light"] .bsl-log-summary strong, html[data-theme="light"] .bsl-board-val, html[data-theme="light"] .bsl-stat-value, html[data-theme="light"] .bsl-section-title, html[data-theme="light"] .bsl-page-title, html[data-theme="light"] .player-title, html[data-theme="light"] .home-hero-title, html[data-theme="light"] .home-card-title, html[data-theme="light"] .brand-text, html[data-theme="light"] .topbar-nav > a, html[data-theme="light"] .nav-dd-btn { color: var(--text-strong); } /* Red / filled controls keep true white labels */ html[data-theme="light"] .brand-mark, html[data-theme="light"] .badge, html[data-theme="light"] .bsl-chip.active, html[data-theme="light"] .dc-btn.primary, html[data-theme="light"] .pp-tab.active, html[data-theme="light"] .roster-nav-tabs a.active { color: var(--on-accent) !important; } html[data-theme="light"] .bsl-hero, html[data-theme="light"] .bsl-card, html[data-theme="light"] .content-card, html[data-theme="light"] .home-card { box-shadow: var(--sh-1); } html[data-theme="light"] .score-ticker-day option { background: var(--navy-2); color: var(--text); } /* Soften table header cells for light surfaces; keep readable ink */ html[data-theme="light"] .bsl-table thead th, html[data-theme="light"] .bsl-table th { background: var(--navy-3); color: var(--muted); } html[data-theme="light"] .bsl-board-team { color: var(--muted); } html[data-theme="light"] .bsl-search input::placeholder, html[data-theme="light"] .bsl-table-search::placeholder { color: var(--muted); opacity: 1; } html[data-theme="light"] .content-card table a { color: var(--blue-bright); } html[data-theme="light"] .content-card table a:hover { color: var(--red); }