/* Prestige Worldwide — Nocturne design system (ported from the Claude Design "Dynasty League" mockup). Tokens first, then the shared components the mockup uses, then the site-specific screens. */ :root { /* ── Theme seeds ───────────────────────────────────────────────────── A theme is these five colors. Everything else in this block derives from them with color-mix, so adding a theme means adding five lines to the [data-theme] blocks at the foot of this file — nothing else in the stylesheet has to change. js/theme.js sets data-theme on . */ --color-bg: #0b0b09; --color-surface: #16160f; --color-text: #f2f1e8; --color-accent: #e8ff3a; --color-section: #3a3d0f; --color-accent-2: color-mix(in srgb, var(--color-accent) 88%, var(--color-neutral-400)); --color-divider: color-mix(in srgb, var(--color-text) 14%, transparent); /* text → ground */ --color-neutral-100: color-mix(in srgb, var(--color-text) 60%, #fff); --color-neutral-200: color-mix(in srgb, var(--color-text) 95%, var(--color-bg)); --color-neutral-300: color-mix(in srgb, var(--color-text) 85%, var(--color-bg)); --color-neutral-400: color-mix(in srgb, var(--color-text) 71%, var(--color-bg)); --color-neutral-500: color-mix(in srgb, var(--color-text) 57%, var(--color-bg)); --color-neutral-600: color-mix(in srgb, var(--color-text) 44%, var(--color-bg)); --color-neutral-700: color-mix(in srgb, var(--color-text) 32%, var(--color-bg)); --color-neutral-800: color-mix(in srgb, var(--color-text) 20%, var(--color-bg)); --color-neutral-900: color-mix(in srgb, var(--color-text) 10%, var(--color-bg)); /* accent → light, then accent → ground */ --color-accent-100: color-mix(in srgb, var(--color-accent) 12%, #fff); --color-accent-200: color-mix(in srgb, var(--color-accent) 30%, #fff); --color-accent-300: color-mix(in srgb, var(--color-accent) 56%, #fff); --color-accent-400: color-mix(in srgb, var(--color-accent) 80%, #fff); --color-accent-500: var(--color-accent); --color-accent-600: color-mix(in srgb, var(--color-accent) 80%, var(--color-bg)); --color-accent-700: color-mix(in srgb, var(--color-accent) 58%, var(--color-bg)); --color-accent-800: color-mix(in srgb, var(--color-accent) 36%, var(--color-bg)); --color-accent-900: color-mix(in srgb, var(--color-accent) 20%, var(--color-bg)); --color-section-glow: color-mix(in srgb, var(--color-section) 84%, var(--color-accent)); --color-section-ghost: color-mix(in srgb, var(--color-section) 62%, var(--color-accent)); /* Trophy metal and win/loss stay put across every theme — metal that shifts hue with the furniture stops reading as metal. */ --gold: #e8c66a; --silver: #c3cad6; --bronze: #d98f6f; --good: #79c191; --bad: #d9857f; --font-heading: "Inter", system-ui, sans-serif; --font-heading-weight: 500; --font-body: "Inter", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --space-1: 2.8px; --space-2: 5.6px; --space-3: 8.4px; --space-4: 11.2px; --space-6: 16.8px; --space-8: 22.4px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; --shadow-sm: 0 0 0 1px color-mix(in srgb, var(--color-text) 13%, var(--color-bg)); --shadow-md: 0 0 0 1px var(--color-neutral-800), 0 6px 18px rgba(0,0,0,0.6); --shadow-lg: 0 0 0 1px var(--color-neutral-700), 0 16px 40px rgba(0,0,0,0.7); /* Surfaces that used to carry literal hex. Each is a mix of the seeds, so they follow the theme instead of pinning it to the olive palette. */ --panel: linear-gradient(180deg, var(--color-surface), color-mix(in srgb, var(--color-surface) 45%, var(--color-bg))); --side-grad: linear-gradient(180deg, color-mix(in srgb, var(--color-surface) 64%, var(--color-bg)), var(--color-bg)); --top-grad: linear-gradient(180deg, color-mix(in srgb, var(--color-surface) 82%, var(--color-bg)), color-mix(in srgb, var(--color-surface) 27%, var(--color-bg))); --hero-grad: linear-gradient(140deg, var(--color-section), color-mix(in srgb, var(--color-section) 32%, var(--color-bg)) 62%, var(--color-bg)); --rival-grad: linear-gradient(140deg, var(--color-surface), color-mix(in srgb, var(--color-surface) 64%, var(--color-bg))); --franchise-grad: linear-gradient(140deg, var(--color-surface), color-mix(in srgb, var(--color-surface) 45%, var(--color-bg))); --plank: linear-gradient(180deg, var(--color-neutral-800), var(--color-surface) 40%, color-mix(in srgb, var(--color-bg) 70%, #000)); --glow: color-mix(in srgb, var(--color-accent) 7%, transparent); --gutter: clamp(16.8px, 3.4vw, 44px); } *, *::before, *::after { box-sizing: border-box; } html { background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: 15px; line-height: 1.55; /* Hold the scrollbar's gutter open whether or not the page currently overflows, so a short screen — or a loading one, or the mobile menu locking the body — doesn't shunt the whole layout sideways by the width of the scrollbar. */ scrollbar-gutter: stable; } body { margin: 0; background: radial-gradient(900px 500px at 70% -10%, var(--glow), transparent 70%), var(--color-bg); color: var(--color-text); } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2); } h1 { font-size: clamp(30px, 4vw, 42px); } h2 { font-size: 32px; } h3 { font-size: 25px; } h4 { font-size: 20px; } h5 { font-size: 16px; } h6 { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; } p { margin: 0 0 var(--space-3); } a { color: var(--color-accent); text-decoration: none; text-underline-offset: 3px; } a:hover { color: var(--color-accent-300); } img { display: block; max-width: 100%; } [hidden] { display: none !important; } :focus { outline: none; } :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } ::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); } .text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); } .kicker { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-neutral-500); } .num { font-variant-numeric: tabular-nums; } .tbl-num { text-align: right; font-variant-numeric: tabular-nums; } /* ── buttons ─────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; text-decoration: none; font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 14px; line-height: 1.2; color: var(--color-text); background: transparent; border: 1px solid transparent; padding: var(--space-2) calc(var(--space-3) * 1.2); border-radius: var(--radius-md); } .btn:disabled { opacity: 0.45; cursor: not-allowed; } .btn-primary { color: var(--color-accent); border-color: var(--color-accent); } .btn-primary:hover { background: color-mix(in srgb, var(--color-accent) 12%, transparent); } .btn-primary:active { background: color-mix(in srgb, var(--color-accent) 22%, transparent); } .btn-secondary { border-color: var(--color-divider); } .btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); } .btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); } .btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); } /* ── forms ───────────────────────────────────────────────────────────── */ .input, select.input { width: 100%; min-height: 36px; padding: 6px 10px; font: inherit; font-size: 14px; color: var(--color-text); caret-color: var(--color-accent); background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-md); } select.input { appearance: none; -webkit-appearance: none; padding-right: 28px; background-image: linear-gradient(45deg, transparent 50%, var(--color-neutral-500) 50%), linear-gradient(135deg, var(--color-neutral-500) 50%, transparent 50%); background-position: calc(100% - 15px) 55%, calc(100% - 10px) 55%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } select.input option { background: var(--color-surface); color: var(--color-text); } .input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); } .input:focus-visible { border-color: var(--color-accent); outline-offset: 0; } input[type=range] { accent-color: var(--color-accent); width: 100%; margin: 6px 0 0; } .seg { display: inline-flex; overflow: hidden; border: 1px solid var(--color-divider); border-radius: var(--radius-md); } .seg-opt { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; font-size: 13px; cursor: pointer; background: none; border: 0; color: inherit; font-family: inherit; } .seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); } .seg-opt.active { color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); } .seg-opt:not(.active):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); } /* ── cards / tags / tables ───────────────────────────────────────────── */ .card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface); } .card-kicker { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); } .card-body { margin: 0; font-size: 13px; opacity: 0.8; flex: 1; } .elev-sm { box-shadow: var(--shadow-sm); } .elev-md { box-shadow: var(--shadow-md); } .plate { border-radius: var(--radius-lg); padding: clamp(16.8px, 2.4vw, 28px); background: var(--panel); box-shadow: var(--shadow-md); } .tag { display: inline-flex; align-items: center; font-size: 11px; letter-spacing: 0.02em; padding: 3px 10px; border-radius: calc(var(--radius-md) * 0.75); } .tag-neutral { background: var(--color-neutral-800); color: var(--color-neutral-100); } .tag-gold { background: color-mix(in srgb, var(--gold) 16%, transparent); color: var(--gold); } .tag-silver { background: color-mix(in srgb, var(--silver) 14%, transparent); color: var(--silver); } .tag-accent { background: var(--color-accent-800); color: var(--color-accent-100); } .table { width: 100%; border-collapse: collapse; font-size: 14px; } .table th { text-align: left; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 60%, transparent); padding: var(--space-2); border-bottom: 1px solid transparent; white-space: nowrap; } .table th.tbl-num { text-align: right; } /* a number's heading belongs over the number */ .table td { padding: var(--space-2); border-bottom: 1px solid transparent; vertical-align: middle; } .table thead tr { background: linear-gradient(to right, transparent, var(--color-divider) 48px, var(--color-divider) calc(100% - 48px), transparent) no-repeat bottom / 100% 1px; } .table tbody tr { background: linear-gradient(to right, transparent, color-mix(in srgb, var(--color-text) 8%, transparent) 48px, color-mix(in srgb, var(--color-text) 8%, transparent) calc(100% - 48px), transparent) no-repeat bottom / 100% 1px; } .table tbody tr:hover { background: linear-gradient(color-mix(in srgb, var(--color-text) 4%, transparent), color-mix(in srgb, var(--color-text) 4%, transparent)) no-repeat 0 0 / 100% 100%, linear-gradient(to right, transparent, color-mix(in srgb, var(--color-text) 8%, transparent) 48px, color-mix(in srgb, var(--color-text) 8%, transparent) calc(100% - 48px), transparent) no-repeat bottom / 100% 1px; } .table tbody tr.me { box-shadow: inset 2px 0 0 var(--color-accent); } .table tbody tr.clickable { cursor: pointer; } .table-wrap { border-radius: var(--radius-md); background: var(--color-surface); padding: var(--space-3) 0; box-shadow: var(--shadow-sm); overflow-x: auto; } /* ── shell ───────────────────────────────────────────────────────────── */ @keyframes noct-glow { 0%, 100% { opacity: .5 } 50% { opacity: .95 } } .shell { display: grid; grid-template-columns: 216px minmax(0, 1fr); min-height: 100vh; } .side { z-index: 10; position: sticky; top: 0; height: 100vh; border-right: 1px solid var(--color-divider); background: var(--side-grad); display: flex; flex-direction: column; gap: var(--space-8); padding: var(--space-6) var(--space-4); overflow-y: auto; scrollbar-width: thin; } .brand-block { padding: 0 var(--space-3); } .brand-plate { display: flex; justify-content: center; padding: 4px 0 2px; } .brand-plate img { width: 150px; height: auto; filter: drop-shadow(0 6px 12px rgba(0,0,0,.6)); } .league-meta { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; color: var(--color-neutral-500); margin-top: 6px; text-align: center; } .league-meta .est { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-neutral-600); } .nav { display: flex; flex-direction: column; gap: 1px; } .nav-group { font-family: var(--font-mono); font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--color-neutral-600); padding: var(--space-4) var(--space-3) var(--space-1); } .nav-group:first-child { padding-top: 0; } .nav a { display: flex; align-items: center; gap: var(--space-3); padding: 7px var(--space-3); border-radius: 8px; font-size: 13.5px; color: var(--color-neutral-400); } .nav a i { width: 2px; height: 14px; border-radius: 2px; background: transparent; flex: none; } .nav a:hover { color: var(--color-neutral-200); background: color-mix(in srgb, var(--color-text) 4%, transparent); } .nav a.active { color: var(--color-accent-300); background: color-mix(in srgb, var(--color-accent) 9%, transparent); } .nav a.active i { background: var(--color-accent); } .side-foot { margin-top: auto; display: flex; flex-direction: column; gap: var(--space-2); padding: 0 var(--space-1); } .source { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--color-neutral-400); } .source i { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 8px var(--color-accent); animation: noct-glow 3s ease-in-out infinite; } .source.err i { background: var(--bad); box-shadow: none; animation: none; } .source-note { font-size: 11px; color: var(--color-neutral-400); line-height: 1.35; } .col { min-width: 0; display: flex; flex-direction: column; } .topbar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: flex-end; gap: var(--space-4); height: 56px; padding: 0 var(--gutter); background: var(--top-grad); border-bottom: 1px solid var(--color-divider); } .status { font-family: var(--font-mono); font-size: 11px; color: var(--color-neutral-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .status.err { color: var(--bad); } .badge-wrap { position: relative; flex: none; } .badge { display: flex; align-items: center; padding: 0; border-radius: 999px; cursor: pointer; background: transparent; border: 0; font: inherit; color: inherit; } .badge.me { box-shadow: 0 0 0 2px var(--tc-ring, color-mix(in srgb, var(--color-text) 14%, transparent)); } .badge:hover .av { box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); } .badge .lines, .badge .caret { display: none; } .badge .av { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-heading); font-size: 12px; letter-spacing: .02em; color: var(--color-neutral-500); background: color-mix(in srgb, var(--color-text) 6%, transparent); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); } .badge.me .av { color: var(--tc); background: var(--tc-soft); } .badge-menu { position: absolute; right: 0; top: 44px; z-index: 30; min-width: 216px; max-height: 320px; overflow-y: auto; padding: var(--space-2); border-radius: 8px; background: var(--color-surface); box-shadow: var(--shadow-lg); } .badge-menu .kicker { padding: var(--space-2) var(--space-3); color: var(--color-neutral-600); } .badge-menu button { display: flex; width: 100%; align-items: center; gap: var(--space-3); padding: 6px var(--space-3); border-radius: 6px; cursor: pointer; font: inherit; font-size: 13px; color: var(--color-text); background: transparent; border: 0; text-align: left; } .badge-menu button:hover { background: color-mix(in srgb, var(--color-text) 5%, transparent); } .badge-menu button.sel { color: var(--tc); background: var(--tc-soft); } .badge-menu button i { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--tc); } .badge-menu button span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .badge-menu button small { margin-left: auto; font-size: 11px; color: var(--color-neutral-600); } .main { padding: 52px var(--gutter) 56px; min-width: 0; } .screen-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-6); justify-content: space-between; margin-bottom: var(--space-8); } .screen-head h6 { color: var(--color-accent); margin: 0; } .screen-head .eyebrow { display: flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-2); } .screen-head h1 { margin: 0 0 var(--space-2); } .screen-head p { max-width: 52ch; font-size: 14px; margin: 0; } .pills { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-6); } .pill { cursor: pointer; font-size: 13px; padding: 4px 10px; border-radius: 6px; color: var(--color-neutral-500); background: color-mix(in srgb, var(--color-text) 4%, transparent); border: 0; font-family: inherit; white-space: nowrap; } .pill:hover { color: var(--color-neutral-300); } .pill.active { color: var(--color-accent-300); background: color-mix(in srgb, var(--color-accent) 14%, transparent); } .pill.solid.active { color: var(--color-bg); background: var(--tc); } .pill.solid { color: var(--tc); } .grid { display: grid; gap: var(--space-6); } .grid-auto { grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); } .grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } .stat-row { display: flex; flex-wrap: wrap; gap: var(--space-4); } .stat { flex: 1 1 150px; padding: var(--space-4); border-radius: 8px; background: color-mix(in srgb, var(--color-text) 3%, transparent); box-shadow: var(--shadow-sm); } .stat .kicker { color: var(--color-neutral-500); } .stat .val { font-family: var(--font-heading); font-size: 20px; margin-top: var(--space-1); } .stat .note { font-size: 11.5px; color: var(--color-neutral-500); } .stat.big { flex-basis: 200px; padding: var(--space-6); background: var(--color-surface); } .stat.big .kicker { color: var(--color-accent); } .stat.big .val { font-size: 28px; margin: var(--space-2) 0 var(--space-1); } .stat.big .note { font-size: 12.5px; color: var(--tc, var(--color-neutral-500)); } .tc { color: var(--tc); } .empty { color: var(--color-neutral-500); font-size: 13px; } .rule { display: flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-3); } .rule i { width: 2px; height: 13px; background: var(--color-accent); } .rule span { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--color-neutral-400); } .list-row { display: flex; justify-content: space-between; gap: var(--space-4); padding: 7px 0; border-bottom: 1px solid color-mix(in srgb, var(--color-text) 7%, transparent); font-size: 13px; } .list-row .dim { color: var(--color-neutral-500); } .list-row .dim2 { color: var(--color-neutral-400); white-space: nowrap; } /* ── team identity bits ──────────────────────────────────────────────── */ .team-cell { display: flex; align-items: center; gap: 10px; min-width: 0; } .avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--color-neutral-800); object-fit: cover; flex: none; box-shadow: 0 0 0 1.5px var(--tc, var(--color-neutral-700)); display: grid; place-items: center; font-size: 10px; color: var(--tc); } .team-cell .tn { color: var(--tc); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .team-cell .on { display: block; font-size: 11px; color: var(--color-neutral-500); } .pos { display: inline-block; min-width: 30px; text-align: center; font-size: 10.5px; letter-spacing: .04em; border-radius: 4px; padding: 2px 5px; color: var(--pc, var(--color-neutral-400)); background: color-mix(in srgb, var(--pc, var(--color-neutral-500)) 16%, transparent); } .pos-QB { --pc: #d98f6f; } .pos-RB { --pc: #79c191; } .pos-WR { --pc: #5fb3c9; } .pos-TE { --pc: #c9b46f; } .pos-K { --pc: #b98fd9; } .pos-DEF { --pc: #9fc95f; } .pos-PICK { --pc: var(--gold); } .rank { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: 11.5px; background: color-mix(in srgb, var(--color-text) 5%, transparent); color: var(--color-neutral-400); } .rank.r1 { background: color-mix(in srgb, var(--gold) 20%, transparent); color: var(--gold); } .rank.r2 { background: color-mix(in srgb, var(--silver) 18%, transparent); color: var(--silver); } .rank.r3 { background: color-mix(in srgb, var(--bronze) 18%, transparent); color: var(--bronze); } .bar { height: 6px; background: color-mix(in srgb, var(--color-text) 6%, transparent); border-radius: 3px; overflow: hidden; } .bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--color-accent-700), var(--color-accent)); } .small { color: var(--color-neutral-500); font-size: 11.5px; } /* ── dashboard ───────────────────────────────────────────────────────── */ .hero { border-radius: var(--radius-lg); padding: clamp(16.8px, 2.6vw, 28px); background: var(--hero-grad); box-shadow: var(--shadow-md); margin-bottom: var(--space-8); } .hero h6 { color: var(--color-accent-300); margin: 0 0 var(--space-3); } .hero h1 { margin: 0 0 var(--space-2); } .hero .sub { font-size: 13.5px; color: var(--color-neutral-400); } /* 236px was tuned for stacked rows; two columns of team need more room. */ .matchups { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-4); margin-top: var(--space-6); } .mu { border-radius: 8px; padding: var(--space-4); background: color-mix(in srgb, var(--color-text) 3%, transparent); box-shadow: var(--shadow-sm); } /* Two columns, one per team, so a team's score, odds share, proj and live all stack in the same column. The right-hand team mirrors, as on the detail page. */ .mu-head { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2) var(--space-3); } .mu-side { display: flex; flex-direction: column; gap: 7px; min-width: 0; } .mu-side.right { text-align: right; } .mu-team { display: flex; align-items: center; gap: 7px; min-width: 0; } .mu-side.right .mu-team { flex-direction: row-reverse; } .mu-side .avatar { width: 22px; height: 22px; font-size: 8.5px; } .mu-side .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--tc); } .mu-side .pts { font-family: var(--font-heading); font-size: 20px; font-variant-numeric: tabular-nums; color: var(--color-neutral-500); line-height: 1; } .mu-side.lead .pts { color: var(--color-text); } a.mu { display: block; color: inherit; text-decoration: none; transition: background .15s ease, box-shadow .15s ease, transform .15s ease; } a.mu:hover { background: color-mix(in srgb, var(--color-text) 6%, transparent); box-shadow: 0 0 0 1px var(--color-neutral-700); } a.mu:active { transform: translateY(1px); } /* odds-to-win bar — the colored split above the projections */ .odds { margin-top: var(--space-3); } .odds-lbl { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); margin-bottom: 4px; } .odds-lbl b { font-family: var(--font-heading); font-weight: 500; font-size: 13px; font-variant-numeric: tabular-nums; } .odds-lbl span { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--color-neutral-600); } .odds .track { display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: color-mix(in srgb, var(--color-text) 6%, transparent); } .odds .track i { display: block; height: 100%; transition: width .5s ease; } .mu-proj { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1px var(--space-3); margin-top: var(--space-3); font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--color-neutral-400); } .mu-proj span:nth-child(3n+1) { text-align: left; } .mu-proj span:nth-child(3n) { text-align: right; } .mu-proj em { font-family: var(--font-mono); font-style: normal; font-size: 9.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--color-neutral-700); } .mu-proj .lv { color: var(--color-accent-300); } .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); } @media (max-width: 960px) { .two-col { grid-template-columns: 1fr; } } .tbl-cut td { padding: 0; border: 0; height: 18px; position: relative; } .tbl-cut td::before { content: "Playoff line"; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px dashed var(--color-accent-700); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-accent); line-height: 0; text-indent: 10px; } .player { display: grid; grid-template-columns: 34px 1fr auto auto; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid color-mix(in srgb, var(--color-text) 7%, transparent); font-size: 13px; } .player .meta { color: var(--color-neutral-500); font-size: 11.5px; } .player .proj { font-family: var(--font-heading); font-variant-numeric: tabular-nums; min-width: 54px; text-align: right; } .mv-bench .player .proj { color: var(--color-neutral-400); } .mv-bench .player.playing { background: linear-gradient(90deg, color-mix(in srgb, var(--color-accent) 7%, transparent), transparent); } .mv-bench .player .proj.live { color: var(--color-accent-300); } .mv-bench .player .proj.done { color: var(--color-neutral-600); } /* While a bench player's game is running: points banked in white, projection in accent. */ .mv-bench .player .act.live { color: var(--color-neutral-100); } .player.starter .name::after { content: "•"; color: var(--color-accent); margin-left: 6px; } /* ── controls (start/sit, dynasty) ───────────────────────────────────── */ .controls { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-8); border-radius: 8px; background: var(--color-surface); box-shadow: var(--shadow-sm); padding: var(--space-6); margin: 0 0 var(--space-8); } .controls label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--color-neutral-400); min-width: 170px; flex: 1 1 170px; } .controls output { color: var(--color-accent-300); font-family: var(--font-heading); font-size: 16px; } /* Waiting on a week's data: the outgoing content stays put and dims rather than being torn out, which would drop the reader's scroll position. */ .is-busy { opacity: 0.4; pointer-events: none; transition: opacity 0.12s ease; } @media (prefers-reduced-motion: reduce) { .is-busy { transition: none; } } /* Week stepper — shared by start/sit and the matchup view. */ .weeks { display: flex; align-items: center; gap: var(--space-3); margin: 0; } .wk-step { min-width: 34px; padding: 2px var(--space-2); font-size: 19px; line-height: 1; color: var(--color-neutral-400); } .wk-step:not(:disabled):hover { color: var(--color-text); } .wk { display: inline-flex; align-items: baseline; justify-content: center; gap: 8px; min-width: 120px; padding: 6px var(--space-4); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-sm); } .wk span { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-neutral-500); } .wk b { font-family: var(--font-heading); font-size: 18px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--color-text); } .weeks .note { font-size: 12px; color: var(--color-neutral-500); } .ss-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); } @media (max-width: 960px) { .ss-grid { grid-template-columns: 1fr; } } .ss-total { font-family: var(--font-heading); font-size: 16px; margin: 4px 0 8px; color: var(--color-neutral-400); } .ss-total b { color: var(--color-text); font-weight: 500; } .callout { border-radius: 8px; padding: var(--space-4) var(--space-6); margin: 0 0 var(--space-6); background: var(--color-surface); box-shadow: var(--shadow-sm); font-size: 14px; border-left: 2px solid var(--color-accent); } .callout.swap { border-left-color: var(--gold); } .callout b { color: var(--gold); font-weight: 500; } .callout.ok b { color: var(--good); } .slot { display: grid; grid-template-columns: 56px 1fr auto; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid color-mix(in srgb, var(--color-text) 7%, transparent); font-size: 13px; } .slot .slot-name { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-neutral-500); } .slot.diff { background: linear-gradient(90deg, color-mix(in srgb, var(--gold) 12%, transparent), transparent); } .slot .num { font-family: var(--font-heading); font-variant-numeric: tabular-nums; } .chart { border-radius: 8px; background: var(--color-surface); box-shadow: var(--shadow-sm); padding: var(--space-4); overflow-x: auto; margin-bottom: var(--space-8); } .chart svg { display: block; min-width: 640px; width: 100%; height: auto; } .trade { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); } .asset-list { max-height: 360px; overflow-y: auto; margin-top: var(--space-2); border-radius: 8px; background: var(--color-surface); box-shadow: var(--shadow-sm); } .asset { display: grid; grid-template-columns: 18px 34px 1fr auto; gap: 8px; align-items: center; padding: 6px 10px; border-bottom: 1px solid color-mix(in srgb, var(--color-text) 6%, transparent); font-size: 12.5px; cursor: pointer; } .asset:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); } .asset input { accent-color: var(--color-accent); margin: 0; } .asset .v { font-family: var(--font-heading); font-variant-numeric: tabular-nums; color: var(--color-accent-300); } .trade-verdict { margin-top: var(--space-4); border-radius: 8px; background: var(--color-surface); box-shadow: var(--shadow-sm); padding: var(--space-6); } .trade-verdict .eff { color: var(--color-accent-300); } .trade-verdict .prem-note { margin-top: var(--space-3); color: var(--color-neutral-600); line-height: 1.5; } .trade-verdict .big { font-family: var(--font-heading); font-size: 20px; } .trade-verdict .meter { height: 6px; background: linear-gradient(90deg, var(--color-accent-700), color-mix(in srgb, var(--color-text) 8%, transparent) 50%, var(--color-accent-700)); border-radius: 3px; position: relative; margin: var(--space-4) 0; } .trade-verdict .meter i { position: absolute; top: -5px; width: 16px; height: 16px; border-radius: 50%; background: var(--color-accent); transform: translateX(-50%); box-shadow: 0 0 0 2px var(--color-surface); } /* ── trophy case ─────────────────────────────────────────────────────── */ .cases { display: grid; align-items: start; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: var(--space-6); margin-bottom: var(--space-8); } .case { cursor: pointer; border-radius: 14px; padding: var(--space-6); background: var(--panel); box-shadow: var(--shadow-md); display: flex; flex-direction: column; gap: var(--space-4); } .case.dim { opacity: .72; } .case-head { display: flex; align-items: flex-start; gap: var(--space-3); } .case-head i { width: 2px; height: 30px; flex: none; border-radius: 2px; background: var(--tc); } .case-head .tn { font-family: var(--font-heading); font-size: 16px; color: var(--tc); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .case-head .on { font-size: 11.5px; color: var(--color-neutral-500); } .case-head .hw { text-align: right; flex: none; } .case-head .hw b { display: block; font-family: var(--font-heading); font-weight: 500; font-size: 18px; letter-spacing: .06em; } .case-head .hw span { font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--color-neutral-600); } .shelf { position: relative; display: flex; flex-wrap: wrap; column-gap: 0; row-gap: var(--space-8); align-items: flex-end; min-height: 176px; } .shelf-plank { background: var(--plank) no-repeat bottom / 100% 9px; } .trophy { flex: 1 0 auto; display: flex; justify-content: center; padding: var(--space-1) var(--space-4) 9px; } /* The plank stretches to fill the row; only the hardware itself is clickable. */ .trophy .hw { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding-bottom: 0.5rem; cursor: pointer; } /* Metal finishes for the trophy drawings (see util.js: trophySVG). */ .trophy.gold { --m0: #fffaf0; --m1: #f3dc9c; --m2: #e8c66a; --m3: #9c7a24; --m4: #6a5217; } .trophy.silver { --m0: #ffffff; --m1: #e6ebf4; --m2: #c3cad6; --m3: #7d8492; --m4: #4e545f; } .trophy.bronze { --m0: #fff1e4; --m1: #eec3a4; --m2: #d98f6f; --m3: #94573a; --m4: #5d3623; } .trophy-art { display: block; filter: drop-shadow(0 8px 16px rgba(0,0,0,.62)); } .trophy .yr { font-family: var(--font-heading); font-size: 14px; color: var(--gold); text-align: center; padding-top: var(--space-1); } .trophy.silver .yr { color: var(--silver); } .trophy.bronze .yr { color: var(--bronze); } .trophy .kind { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-neutral-600); text-align: center; } .shelf-empty { width: 100%; padding: 66px 0 var(--space-6); text-align: center; font-size: 12px; color: var(--color-neutral-600); } .case-note { font-size: 11.5px; color: var(--color-neutral-500); } /* ── league history ──────────────────────────────────────────────────── */ .timeline { position: relative; padding-left: 28px; } .timeline::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 1px; background: linear-gradient(180deg, transparent, var(--color-divider) 40px, var(--color-divider) calc(100% - 40px), transparent); } .tl-item { position: relative; margin-bottom: var(--space-6); } .tl-item::before { content: ""; position: absolute; left: -27px; top: 20px; width: 11px; height: 11px; border-radius: 50%; background: var(--color-bg); border: 2px solid var(--tc); box-shadow: 0 0 10px rgba(0,0,0,.5); } .tl-card { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: var(--space-6); align-items: center; padding: var(--space-6); border-radius: 8px; background: var(--color-surface); box-shadow: var(--shadow-sm); cursor: pointer; } .tl-card .yr { font-family: var(--font-heading); font-size: 26px; color: var(--color-neutral-300); } .tl-card .champ { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3); } .tl-card .champ b { font-family: var(--font-heading); font-weight: 500; font-size: 18px; color: var(--tc); } .tl-card .sub { font-size: 12.5px; color: var(--color-neutral-400); margin-top: var(--space-1); } .tl-card .note { font-size: 12.5px; color: var(--color-neutral-500); margin-top: var(--space-2); } .tl-card .mvp { text-align: right; font-size: 11.5px; color: var(--color-neutral-500); white-space: nowrap; } .tl-card .mvp b { display: block; font-weight: 400; color: var(--color-neutral-300); font-size: 13px; } @media (max-width: 700px) { .tl-card { grid-template-columns: 56px minmax(0,1fr); } .tl-card .mvp { grid-column: 2; text-align: left; } } /* ── season recap ────────────────────────────────────────────────────── */ .recap { border-radius: 14px; padding: clamp(16.8px, 2.6vw, 28px); background: var(--hero-grad); box-shadow: var(--shadow-md); margin-bottom: var(--space-8); } .recap h6 { color: var(--color-accent-300); margin: 0 0 var(--space-3); } .recap h1 { margin: 0 0 var(--space-3); font-size: clamp(28px, 4vw, 42px); } .recap .meta { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-bottom: var(--space-4); font-size: 13.5px; color: var(--color-neutral-300); } .recap .meta .dim { color: var(--color-neutral-500); } .recap p { max-width: 64ch; font-size: 14.5px; color: var(--color-neutral-300); margin: 0; } .standing-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: var(--space-3); padding: var(--space-2) 0; font-size: 13px; border-bottom: 1px solid color-mix(in srgb, var(--color-text) 7%, transparent); } .standing-row .pos-n { color: var(--color-neutral-600); } .standing-row .tm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tc); } .standing-row .rec { color: var(--color-neutral-400); } /* ── rivalries ───────────────────────────────────────────────────────── */ .rival { flex: 1 1 240px; padding: var(--space-6); border-radius: 8px; background: var(--rival-grad); box-shadow: var(--shadow-sm); } .rival .kicker { color: var(--color-accent); } .rival .pair { font-family: var(--font-heading); font-size: 16px; margin: var(--space-2) 0; } .rival .rec { font-size: 26px; font-family: var(--font-heading); color: var(--color-neutral-200); } .rival .note { font-size: 12.5px; color: var(--color-neutral-500); margin-top: var(--space-1); } .matrix { overflow-x: auto; border-radius: 8px; background: var(--color-surface); padding: var(--space-4); box-shadow: var(--shadow-sm); } .mx-row { display: flex; gap: 2px; align-items: center; margin-bottom: 2px; } .mx-row .lbl { width: 128px; flex: none; font-size: 11.5px; color: var(--tc, var(--color-neutral-500)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: var(--space-2); } .mx-cell { width: 54px; height: 28px; flex: none; display: grid; place-items: center; font-size: 11.5px; border-radius: 4px; background: color-mix(in srgb, var(--color-text) 4%, transparent); color: var(--color-neutral-400); font-variant-numeric: tabular-nums; } .mx-cell.self { background: color-mix(in srgb, var(--color-text) 3%, transparent); color: var(--color-neutral-700); } .mx-cell.never { background: color-mix(in srgb, var(--color-text) 2%, transparent); color: var(--color-neutral-700); } .mx-cell.win { background: color-mix(in srgb, var(--tc) 20%, transparent); color: var(--tc); } .mx-cell.edge { background: color-mix(in srgb, var(--tc) 10%, transparent); } .mx-cell.head { background: transparent; color: var(--color-neutral-500); } /* ── franchise ───────────────────────────────────────────────────────── */ .franchise-hero { border-radius: 14px; padding: clamp(16.8px, 2.6vw, 28px); background: var(--franchise-grad); box-shadow: var(--shadow-md); margin-bottom: var(--space-8); display: flex; flex-wrap: wrap; gap: var(--space-8); align-items: center; justify-content: space-between; } .franchise-hero .eyebrow { display: flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-2); } .franchise-hero .eyebrow i { width: 2px; height: 13px; background: var(--tc); } .franchise-hero h6 { color: var(--tc); margin: 0; } .franchise-hero h1 { margin: 0 0 var(--space-2); font-size: clamp(26px, 3.6vw, 38px); color: var(--tc); } .franchise-hero .sub { font-size: 13.5px; color: var(--color-neutral-400); } .kpis { display: flex; gap: var(--space-8); flex-wrap: wrap; } .kpi .kicker { color: var(--color-neutral-500); } .kpi .val { font-family: var(--font-heading); font-size: 24px; } .hardware { display: flex; flex-wrap: wrap; gap: var(--space-2); } /* ── draft ───────────────────────────────────────────────────────────── */ .round { margin-bottom: var(--space-8); } .picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); gap: var(--space-3); } .pick { padding: var(--space-3) var(--space-4); border-radius: 8px; background: var(--color-surface); box-shadow: var(--shadow-sm); } .pick .top { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--color-neutral-600); } .pick .top .pp { color: var(--pc, var(--color-neutral-400)); } .pick .pl { font-size: 14px; font-family: var(--font-heading); margin-top: var(--space-1); } .pick .tm { font-size: 11.5px; color: var(--tc); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ── chat ────────────────────────────────────────────────────────────── */ .chat { max-width: 780px; } .chat-log { border-radius: 8px; background: var(--color-surface); box-shadow: var(--shadow-sm); height: 60vh; min-height: 320px; overflow-y: auto; padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); } .msg { max-width: 80%; background: color-mix(in srgb, var(--color-text) 4%, transparent); padding: 8px 12px 6px; border-radius: 8px; border-left: 2px solid var(--tc, var(--color-neutral-700)); } .msg.mine { align-self: flex-end; background: color-mix(in srgb, var(--color-accent) 10%, transparent); border-left: 0; border-right: 2px solid var(--color-accent); } .msg .who { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--tc, var(--color-neutral-400)); } .msg.mine .who { color: var(--color-accent-300); } .msg .body { white-space: pre-wrap; word-break: break-word; font-size: 14px; } .msg .t { font-size: 10.5px; color: var(--color-neutral-600); margin-top: 3px; } .chat-form { display: grid; grid-template-columns: 1fr auto; gap: var(--space-3); margin-top: var(--space-4); } .chat-log .empty { margin: auto; text-align: center; } .chat-hint { font-size: 12.5px; color: var(--color-neutral-500); margin-top: var(--space-3); } .chat-hint button { font: inherit; color: var(--color-accent); background: none; border: 0; padding: 0; cursor: pointer; } .foot { color: var(--color-neutral-600); font-size: 11.5px; padding: 48px var(--gutter) 24px; } /* ── responsive ──────────────────────────────────────────────────────── */ /* ── mobile: sidebar becomes a slide-in drawer behind a hamburger ─────── */ .menu-btn { display: none; width: 38px; height: 38px; flex: none; align-items: center; justify-content: center; border-radius: 8px; border: 1px solid var(--color-divider); background: transparent; color: var(--color-text); cursor: pointer; margin-right: auto; } .menu-btn span { display: block; width: 16px; height: 2px; background: currentColor; border-radius: 1px; box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor; } .topbar-logo { display: none; height: 30px; width: auto; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; } .menu-backdrop { display: none; position: fixed; inset: 0; z-index: 39; background: rgba(0,0,0,.6); } .side-close { display: none; } @media (max-width: 820px) { .shell { grid-template-columns: minmax(0, 1fr); } .side { position: fixed; inset: 0 auto 0 0; width: min(300px, 86vw); z-index: 40; height: 100dvh; transform: translateX(-104%); transition: transform .22s ease; box-shadow: 0 0 0 1px var(--color-divider), 0 24px 60px rgba(0,0,0,.7); } .shell.nav-open .side { transform: translateX(0); } .shell.nav-open .menu-backdrop { display: block; } .side-close { display: inline-flex; position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; align-items: center; justify-content: center; border-radius: 8px; border: 0; background: color-mix(in srgb, var(--color-text) 6%, transparent); color: var(--color-neutral-400); font-size: 16px; cursor: pointer; } .menu-btn { display: inline-flex; } .topbar-logo { display: block; } .topbar { position: sticky; justify-content: space-between; gap: var(--space-3); padding: 0 var(--space-4); } .menu-btn { margin-right: 0; } .status { display: none; } .badge-wrap { margin-left: auto; } .main { padding: 24px var(--space-4) 40px; } .screen-head { margin-bottom: var(--space-6); } h1 { font-size: 28px; } .trade { grid-template-columns: 1fr; } .two-col { gap: var(--space-6); } .cases { grid-template-columns: 1fr; } .plate, .hero, .recap, .franchise-hero { padding: var(--space-6); } .chat-log { height: 55vh; } .foot { padding: 32px var(--space-4) 16px; } } @media (prefers-reduced-motion: reduce) { .side { transition: none; } } @media (prefers-reduced-motion: no-preference) { .screen { animation: fade 0.18s ease-out; } @keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } } /* ── matchup detail ──────────────────────────────────────────────────── */ .mv-hero { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--space-6); align-items: center; border-radius: var(--radius-lg); padding: clamp(16.8px, 2.6vw, 28px); background: var(--hero-grad); box-shadow: var(--shadow-md); } .mv-team { display: flex; align-items: center; gap: var(--space-3); min-width: 0; } .mv-team .avatar { width: 40px; height: 40px; font-size: 13px; } .mv-team .nm { font-family: var(--font-heading); font-size: 17px; color: var(--tc); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mv-team .ow { font-size: 11.5px; color: var(--color-neutral-500); } .mv-hero > .mv-team:last-child { flex-direction: row-reverse; text-align: right; } .mv-score { text-align: center; } .mv-score .s { display: flex; gap: 10px; align-items: baseline; justify-content: center; font-family: var(--font-heading); font-size: clamp(26px, 4.6vw, 40px); font-variant-numeric: tabular-nums; line-height: 1.05; } .mv-score .s em { font-style: normal; font-size: .55em; color: var(--color-neutral-700); } .mv-score .k { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-neutral-500); } .mv-score .k { margin-bottom: 5px; color: var(--color-accent-300); } #mv-body > .odds { margin: var(--space-6) 0 var(--space-8); } #mv-body > .odds .track { height: 10px; border-radius: 5px; } #mv-body > .odds .odds-lbl b { font-size: 22px; } #mv-body > .odds .odds-lbl span { font-size: 10px; color: var(--color-neutral-500); } .mv-tot { border-radius: 8px; background: var(--color-surface); box-shadow: var(--shadow-sm); padding: var(--space-3) var(--space-6); margin-bottom: var(--space-8); } .mv-tot-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; gap: var(--space-3); padding: 6px 0; font-family: var(--font-heading); font-variant-numeric: tabular-nums; } .mv-tot-row + .mv-tot-row { border-top: 1px solid color-mix(in srgb, var(--color-text) 7%, transparent); } .mv-tot-row span:first-child { text-align: left; } .mv-tot-row span:last-child { text-align: right; } .mv-tot-row em { font-family: var(--font-mono); font-style: normal; font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--color-neutral-500); } .mv-tot-row.big { font-size: 20px; color: var(--color-accent-300); } .mv-lineup { border-radius: 8px; background: var(--color-surface); box-shadow: var(--shadow-sm); overflow: hidden; margin-bottom: var(--space-8); } .mv-row { display: grid; grid-template-columns: 1fr 64px 1fr; align-items: center; gap: var(--space-2); padding: 6px var(--space-3); border-bottom: 1px solid color-mix(in srgb, var(--color-text) 6%, transparent); } .mv-row:last-child { border-bottom: 0; } .mv-slot { text-align: center; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-neutral-600); } .mv-p { display: flex; align-items: center; gap: var(--space-3); min-width: 0; padding: 5px 8px; border-radius: 6px; } .mv-p.l { flex-direction: row-reverse; } .mv-p.l .who { text-align: right; } .mv-p.l.playing { background: linear-gradient(270deg, color-mix(in srgb, var(--ca) 22%, transparent), color-mix(in srgb, var(--ca) 4%, transparent)); box-shadow: inset -2px 0 0 var(--ca); } .mv-p.r.playing { background: linear-gradient(90deg, color-mix(in srgb, var(--cb) 22%, transparent), color-mix(in srgb, var(--cb) 4%, transparent)); box-shadow: inset 2px 0 0 var(--cb); } .mv-p .who { min-width: 0; font-size: 13px; } .mv-p .nm { overflow: hidden; text-overflow: ellipsis; } .mv-p .meta { display: block; font-size: 11px; color: var(--color-neutral-500); } .mv-p .stats { display: block; margin-top: 1px; font-size: 10.5px; line-height: 1.35; color: var(--color-neutral-600); font-variant-numeric: tabular-nums; } .mv-p .nums { flex: none; min-width: 88px; text-align: right; font-variant-numeric: tabular-nums; } .mv-p.r .nums { text-align: left; } /* mirror the left side: numbers hug the slot label */ .mv-p .nums b { display: block; font-family: var(--font-heading); font-weight: 500; font-size: 16px; line-height: 1.15; } .mv-p .nums b.none { color: var(--color-neutral-600); } .mv-p .nums i { font-style: normal; font-size: 10.5px; color: var(--color-neutral-400); } .mv-p .nums i.live { color: var(--color-accent-300); } .mv-p .nums i.done { color: var(--color-neutral-600); } .mv-p.empty-slot { opacity: .4; } .mv-row.mv-foot { background: color-mix(in srgb, var(--color-text) 4.5%, transparent); } .mv-row.mv-foot .nums b { font-size: 18px; } .mv-row.mv-foot .nm { font-family: var(--font-heading); } .gs { color: var(--color-neutral-400); } .gs.inplay { color: var(--color-accent); } .gs.final { color: var(--color-neutral-600); } .inj { color: var(--bad); } .mv-bench { margin-bottom: var(--space-8); } .mv-note { max-width: 78ch; } .mv-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-6); margin-bottom: var(--space-4); } .mv-cycle { display: flex; align-items: center; gap: var(--space-2); min-width: 0; } .mv-cycle .pills { margin-bottom: 0; } .mv-bar .weeks { flex: 0 0 auto; } .mv-pill { display: inline-flex; align-items: center; gap: 5px; font-variant-numeric: tabular-nums; } .mv-pill i { width: 6px; height: 6px; border-radius: 50%; flex: none; } .mv-pill em { font-style: normal; font-size: 10px; color: var(--color-neutral-700); } .mv-pill.mine { box-shadow: inset 0 0 0 1px var(--color-accent-800); } .mv-pill.mine.active { box-shadow: inset 0 0 0 1px var(--color-accent-700); } .player.bench-head { border-bottom-color: transparent; padding: 0 0 2px; } .player.bench-head span { font-family: var(--font-mono); font-size: 9px; letter-spacing: .09em; text-transform: uppercase; color: var(--color-neutral-600); text-align: right; } .player.bench-head span:nth-child(3) { min-width: 0; } .player.bench-head span:last-child { min-width: 54px; } @media (max-width: 820px) { .mv-hero { grid-template-columns: 1fr; gap: var(--space-4); text-align: center; } .mv-hero > .mv-team, .mv-hero > .mv-team:last-child { flex-direction: row; text-align: left; } .mv-row { grid-template-columns: 1fr 42px 1fr; gap: 0; padding: 6px var(--space-2); } .mv-p { gap: var(--space-2); padding: 4px 4px; } .mv-p .nums { min-width: 60px; } .mv-p .nums b { font-size: 14px; } .mv-p .who { font-size: 12px; } .mv-p .stats { font-size: 9.5px; line-height: 1.3; } .mv-p .pos { display: none; } } /* ── table / graph tabs + value trend ────────────────────────────────── */ .rule { flex-wrap: wrap; row-gap: var(--space-2); } .rule-tabs { display: inline-flex; align-items: center; gap: var(--space-2); margin-left: auto; } .rule-tabs + .rule-tabs { margin-left: var(--space-6); } /* a second group rides beside the first, not across the row */ .rule-tabs button { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; line-height: 13px; color: var(--color-neutral-600); background: none; border: 0; padding: 0; cursor: pointer; } .rule-tabs button + button { padding-left: var(--space-2); border-left: 1px solid var(--color-divider); } .rule-tabs button:hover { color: var(--color-neutral-300); } .rule-tabs button.active { color: var(--color-accent); } .trend { position: relative; border-radius: var(--radius-md); background: var(--color-surface); padding: var(--space-4) var(--space-3) var(--space-3); box-shadow: var(--shadow-sm); } .trend-bar { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding: 0 var(--space-2) var(--space-3); } .trend-note { color: var(--color-neutral-500); margin-left: auto; } .trend-plot svg { display: block; width: 100%; height: auto; touch-action: pan-y; } .trend-plot .tr-line, .trend-plot .tr-label { transition: opacity 0.12s ease; } .trend-legend { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); padding: var(--space-3) var(--space-2) 0; border-top: 1px solid var(--color-divider); margin-top: var(--space-3); } .trend-legend .tl { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; font: inherit; font-size: 12px; color: var(--color-neutral-300); background: none; border: 0; border-radius: var(--radius-sm); cursor: pointer; } .trend-legend .tl i { width: 9px; height: 9px; border-radius: 50%; flex: none; } .trend-legend .tl:hover { background: color-mix(in srgb, var(--color-text) 8%, transparent); } .trend-legend .tl.off { opacity: 0.4; } .trend-legend .tl.mine { box-shadow: inset 0 0 0 1px var(--color-accent); } .trend-tip { position: absolute; top: 46px; pointer-events: none; z-index: 5; min-width: 190px; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: color-mix(in srgb, var(--color-bg) 92%, transparent); box-shadow: 0 0 0 1px var(--color-divider), 0 8px 24px rgba(0, 0, 0, 0.5); backdrop-filter: blur(6px); } .trend-tip .tt-day { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-neutral-500); padding-bottom: var(--space-1); } .trend-tip .tt-row { display: grid; grid-template-columns: 10px 1fr auto auto; align-items: center; gap: 7px; font-size: 12px; line-height: 1.55; color: var(--color-neutral-300); } .trend-tip .tt-row i { width: 8px; height: 8px; border-radius: 50%; } .trend-tip .tt-row b { font-variant-numeric: tabular-nums; font-weight: 500; color: var(--color-text); } .trend-tip .tt-row em { font-style: normal; font-size: 11px; font-variant-numeric: tabular-nums; color: var(--color-neutral-600); min-width: 44px; text-align: right; } .trend-tip .tt-row em.up { color: var(--good); } .trend-tip .tt-row em.down { color: var(--bad); } .trend-tip .tt-row.mine b { color: var(--color-accent); } /* The dashboard's two panels read as a pair, so the shorter one grows to meet the taller instead of leaving a hole under it. */ .dash-cols > div { display: flex; flex-direction: column; min-width: 0; } .dash-cols .table-wrap, .dash-cols .trend { flex: 1 1 auto; display: flex; flex-direction: column; } .dash-cols .trend .trend-plot { flex: 1 1 auto; } /* trend.js redraws the chart into whatever height this leaves */ .table-wrap .wrap-note { margin: var(--space-3) 0 0; padding: 0 var(--space-3); } .dash-cols .table-wrap .wrap-note { margin-top: auto; padding-top: var(--space-3); } /* ── tables on a phone ─────────────────────────────────────────────────── A row of nine numbers can't be made narrow enough for a phone, and a table that scrolls sideways hides half of itself. So the row folds in two: rank and team name on top, the numbers underneath as labelled chips, three to a line so they still read as columns down the table. */ @media (max-width: 620px) { .table.stack thead { display: none; } .table.stack tbody tr { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--space-4); row-gap: var(--space-2); padding: var(--space-3) var(--space-2); } .table.stack tbody tr td { padding: 0; border: 0; } .table.stack td.cell-rank { flex: 0 0 24px; } /* .rank is a 24px disc */ .table.stack td.cell-team { flex: 1 0 calc(100% - 24px - var(--space-4) - 1px); min-width: 0; white-space: normal; } .table.stack td.cell-bar { display: none; } .table.stack td.cell-stat { flex: 0 0 calc((100% - 2 * var(--space-4)) / 3); text-align: left; font-size: 13px; } .table.stack td.cell-stat::before { content: attr(data-l); margin-right: 5px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-neutral-500); } .table.stack tbody tr.tbl-cut { display: block; padding: 0; } .table.stack tbody tr.tbl-cut td { display: block; height: 18px; } } /* ── theme picker (sidebar foot) ─────────────────────────────────────── */ .theme-pick { display: flex; flex-direction: column; gap: var(--space-2); padding-bottom: var(--space-3); margin-bottom: var(--space-1); border-bottom: 1px solid var(--color-divider); } .theme-select { min-height: 32px; padding: 5px 10px; font-size: 13px; color: var(--color-neutral-300); } .theme-select:hover { color: var(--color-text); } /* ── themes ────────────────────────────────────────────────────────────── Five seeds each; the :root block at the top derives the rest. Keep this list in step with THEMES in js/theme.js, which draws the picker. */ :root[data-theme="nocturne"] { --color-bg: #0b0b09; --color-surface: #16160f; --color-text: #f2f1e8; --color-accent: #e8ff3a; --color-section: #3a3d0f; } :root[data-theme="turf"] { --color-bg: #07100b; --color-surface: #101a13; --color-text: #e9f2e9; --color-accent: #7fe070; --color-section: #12351e; } :root[data-theme="indigo"] { --color-bg: #0a0b14; --color-surface: #151729; --color-text: #e8eaf7; --color-accent: #8b9cff; --color-section: #20255f; } :root[data-theme="ember"] { --color-bg: #100a07; --color-surface: #1c120c; --color-text: #f6ece3; --color-accent: #ff8348; --color-section: #4a1e0a; } :root[data-theme="ultraviolet"] { --color-bg: #0a0712; --color-surface: #161024; --color-text: #efeaf8; --color-accent: #c084fc; --color-section: #361166; } :root[data-theme="glacier"] { --color-bg: #060c11; --color-surface: #0f1a22; --color-text: #e5f1f6; --color-accent: #58d3ec; --color-section: #0c3a4c; } :root[data-theme="copper"] { --color-bg: #0d0d0f; --color-surface: #191a1d; --color-text: #efece6; --color-accent: #e0985a; --color-section: #3c2413; } :root[data-theme="crimson"] { --color-bg: #0f0708; --color-surface: #1c0e11; --color-text: #f7e9ea; --color-accent: #ff5f70; --color-section: #4e1220; } :root[data-theme="sage"] { --color-bg: #0a0d0a; --color-surface: #151b16; --color-text: #e8efe5; --color-accent: #a7c894; --color-section: #23321e; } :root[data-theme="bullion"] { --color-bg: #0c0b08; --color-surface: #181510; --color-text: #f4efe2; --color-accent: #eab64f; --color-section: #453413; } :root[data-theme="steel"] { --color-bg: #090c11; --color-surface: #131922; --color-text: #e7edf4; --color-accent: #74a6e0; --color-section: #143252; } :root[data-theme="chalkboard"] { --color-bg: #0a0a0b; --color-surface: #151517; --color-text: #ececeb; --color-accent: #dcdcd9; --color-section: #2a2a2d; } /* ── the one dialog ──────────────────────────────────────────────────── */ .modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: var(--space-6); } .modal[hidden] { display: none; } .modal-scrim { position: absolute; inset: 0; background: color-mix(in srgb, var(--color-bg) 78%, transparent); backdrop-filter: blur(3px); } .modal-card { position: relative; width: min(680px, 100%); max-height: min(86vh, 900px); overflow-y: auto; overscroll-behavior: contain; background: var(--panel, var(--color-surface)); border-radius: var(--radius-lg); box-shadow: 0 0 0 1px var(--color-divider), var(--shadow-lg, 0 24px 64px rgba(0,0,0,.5)); padding: var(--space-8); } .modal-x { position: absolute; top: var(--space-4); right: var(--space-4); width: 28px; height: 28px; display: grid; place-items: center; font-size: 18px; line-height: 1; color: var(--color-neutral-500); background: none; border: 0; border-radius: var(--radius-sm); cursor: pointer; } .modal-x:hover { color: var(--color-text); background: color-mix(in srgb, var(--color-text) 8%, transparent); } body.modal-open { overflow: hidden; } /* ── player / roster card ────────────────────────────────────────────── */ .pc-back { display: inline-flex; align-items: center; margin-bottom: var(--space-3); padding: 0; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-neutral-500); background: none; border: 0; cursor: pointer; } .pc-back:hover { color: var(--color-accent); } .pc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; padding-right: 40px; } /* the close button's corner */ .pc-kicker { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-neutral-500); } .pc-name { margin: var(--space-1) 0 0; font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 24px; line-height: 1.15; } .pc-name.tc { color: var(--tc); } .pc-figs { display: flex; gap: var(--space-6); } .pc-figs div { text-align: right; } .pc-figs b { display: block; font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 20px; font-variant-numeric: tabular-nums; } .pc-figs span { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-neutral-500); } .pc-note { margin: var(--space-4) 0 var(--space-3); font-size: 12.5px; color: var(--color-neutral-500); } .pc-list { display: flex; flex-direction: column; margin-bottom: var(--space-4); } .pc-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-3); width: 100%; padding: 7px var(--space-2); font: inherit; font-size: 13.5px; text-align: left; color: inherit; background: none; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent); cursor: pointer; } .pc-row.static { cursor: default; } .pc-row:not(.static):hover { background: color-mix(in srgb, var(--color-text) 6%, transparent); } .pc-who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pc-v { font-variant-numeric: tabular-nums; color: var(--color-neutral-300); } .pc-chart { margin-top: var(--space-6); } .pc-bar { display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap; margin-bottom: var(--space-3); } .pc-bar .rule-tabs { margin-left: 0; } .pc-bar .rule-tabs + .rule-tabs { margin-left: 0; } .pc-move { margin-left: auto; color: var(--color-neutral-500); font-variant-numeric: tabular-nums; } .pc-move.up { color: var(--good, #79c191); } .pc-move.down { color: var(--bad, #d9857f); } .pc-area { fill: color-mix(in srgb, var(--color-accent) 7%, transparent); } .pc-line { fill: none; stroke: var(--color-accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } .pc-dot { fill: var(--color-accent); } /* ── chart furniture, in whatever theme is on ────────────────────────── */ .svg-chart { display: block; width: 100%; height: auto; } .svg-chart .grid-line { stroke: color-mix(in srgb, var(--color-text) 12%, transparent); } .svg-chart .tick { fill: var(--color-neutral-500); font-size: 11.5px; font-family: var(--font-body); } .svg-chart .ring { stroke: var(--color-surface); stroke-width: 2; } .svg-chart .cross { stroke: var(--color-text); stroke-opacity: .35; } .dot-hit { cursor: pointer; } .dot-hit:hover { fill-opacity: 1; stroke: var(--color-text); stroke-opacity: .5; }