/* rankedstats/stats.css — styles for the standalone local ranked-stats viewer (rankedstats/stats.html). This file is loaded via a relative `href="stats.css"` link in stats.html's , so opening stats.html directly from disk as a `file://` URL still resolves it correctly with no server required. This file is NOT part of the Jekyll build under docs/ — it is not compiled, not included by docs/style.css, and has no Jekyll front matter. Theme: dark "Ranked gold" palette (navy background, gold accent), matching rankedstats/newdesign/Ranked Stats.dc.html variant 3a. Token values are documented in notes/claude-specs/research/rankedstats-redesign-context.md ("Design Spec" section) and notes/claude-specs/notepads/rankedstats-redesign/learnings.md. */ :root { /* --- Page / panel tokens --- */ --bg: #070b14; --bg-sidebar: #0c1220; --panel: #121a2e; --panel-border: #24304f; --input-border: #2c3854; --divider: #1d2740; --placeholder-swatch: #233054; /* --- Text tokens --- */ --text-primary: #eef1f8; --text-secondary: #a7b1cb; --text-muted-1: #8f9ab6; --text-muted-2: #7d88a6; --text-muted-3: #66708c; --text-muted-4: #4d5876; /* --- Accent --- */ --accent-gold: #ffd23d; /* --- Semantic win / loss / draw tokens --- */ --win: #5fd39a; --loss: #ff7d84; --draw: #9aa5c0; --chip-bg-win: #14301f; --chip-bg-loss: #331416; --chip-bg-neutral: #1d2740; --badge-thin-bg: #3c2f10; --badge-thin-fg: var(--accent-gold); --badge-roster-bg: var(--accent-gold); --badge-roster-fg: var(--bg); /* --- Tier colours --- */ --tier-bronze: #c07d47; --tier-silver: #adb6c2; --tier-gold: #e8b427; --tier-diamond: #5ed0ef; --tier-mythic: #c05ae0; --tier-legendary: #ff6b74; --tier-masters: var(--accent-gold); --tier-pro: #f4f6fb; --tier-default: var(--text-muted-1); /* --- Table header-strip tints --- */ --tint-map: #1d2b52; --tint-brawler: #3c2f10; --tint-mates: #16342c; --tint-recent: #2a2140; /* --- Radius scale --- */ --radius-xs: 4px; --radius-sm: 6px; --radius-ms: 7px; --radius-md: 8px; --radius-lg: 9px; --radius-xl: 11px; --radius-2xl: 12px; --radius-3xl: 16px; /* --- Spacing scale --- */ --space-xs: 4px; --space-sm: 8px; --space-md: 12px; --space-lg: 16px; --space-xl: 20px; --space-2xl: 24px; --space-3xl: 32px; } * { box-sizing: border-box; } body { font-family: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; color: var(--text-primary); background: var(--bg); position: relative; /* Task 14's `.modal-overlay` ended up `position: fixed` (viewport-relative, simpler than anchoring against this), so this rule is no longer load-bearing for the modal — left in place since removing it is outside this task's scope and it is otherwise harmless. */ } h1 { margin: 0 0 4px 0; font-family: "Barlow Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 1.6em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: var(--text-primary); } h2 { margin: 0 0 8px 0; font-family: "Barlow Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 1.2em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: var(--text-primary); } .subtitle { color: var(--text-secondary); margin: 0 0 20px 0; font-size: 0.9em; } .controls { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-bottom: 24px; padding: 12px 16px; border: 1px solid var(--panel-border); border-radius: var(--radius-sm); background: var(--panel); } .control-group { display: flex; flex-direction: column; gap: 4px; flex: 1 1 100%; min-width: 0; } .control-group label { font-size: 0.8em; color: var(--text-secondary); } select, input[type="number"] { padding: 6px 8px; font-size: 0.95em; border: 1px solid var(--input-border); border-radius: var(--radius-xs); background: var(--bg-sidebar); color: var(--text-primary); } select { width: 100%; } input[type="number"] { width: 80px; } /* ========================================================================================== Sidebar filters — mode chips, period chips, min-sets slider. Built/rebuilt by `renderModeChips`/`renderPeriodChips`/the min-sets slider handler in stats.html. `.chip`'s active/inactive state is a plain class toggle (no inline styles), matching the mockup's confirmed gold-accent-on-select treatment. ========================================================================================== */ .control-group-title { font-size: 10px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: var(--text-muted-2); } .chip-row { display: flex; flex-wrap: wrap; gap: 5px; } .chip { cursor: pointer; user-select: none; font-size: 11px; font-weight: 700; padding: 6px 10px; border-radius: var(--radius-md); background: var(--bg-sidebar); color: var(--text-secondary); border: 1px solid var(--input-border); } .chip.active { background: rgba(255, 210, 61, 0.08); border-color: var(--accent-gold); color: var(--accent-gold); } .min-sets-row { display: flex; align-items: center; gap: 9px; } .min-sets-row input[type="range"] { flex: 1; accent-color: var(--accent-gold); } #min-sample-value { width: 24px; font-family: "Barlow Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 700; color: var(--accent-gold); text-align: right; } .min-sets-hint { font-size: 11px; font-weight: 500; color: var(--text-muted-3); } /* ========================================================================================== Brawler class filter tree — built/rebuilt by `renderBrawlerTree` in stats.html. `.tree-class` rows are collapsible groups (chevron toggles `STATE.expandedClasses`, the rest of the row toggles `STATE.filter`); `.tree-brawler-row` are the indented per-brawler children shown when a class is expanded. Active-state colour/background reuses the exact same gold-accent tokens `.chip.active` already established, so selection reads consistently across the sidebar. ========================================================================================== */ .tree-header { display: flex; justify-content: space-between; align-items: baseline; } .tree-clear { cursor: pointer; user-select: none; font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-gold); } .tree-list { display: flex; flex-direction: column; gap: 4px; } .tree-class { border: 1px solid var(--panel-border); border-radius: var(--radius-lg); background: var(--panel); overflow: hidden; } .tree-class.active { border-color: var(--accent-gold); background: rgba(255, 210, 61, 0.08); } .tree-class-header { cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 8px 9px; } .tree-chevron { cursor: pointer; flex: none; width: 16px; text-align: center; font-size: 11px; font-weight: 700; color: var(--text-muted-1); } .tree-class-main { flex: 1; min-width: 0; } .tree-class-name { font-size: 12px; font-weight: 700; color: var(--text-secondary); } .tree-class.active .tree-class-name { color: var(--accent-gold); } .tree-class-meta { display: flex; align-items: center; gap: 7px; margin-top: 4px; } .tree-bar-track { flex: 1; height: 5px; border-radius: 3px; background: var(--divider); overflow: hidden; } .tree-bar-fill { height: 100%; } .tree-wr { font-family: "Barlow Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 700; color: var(--text-muted-1); } .tree-sets { font-size: 10px; font-weight: 500; color: var(--text-muted-3); } .tree-children { border-top: 1px solid var(--divider); } .tree-brawler-row { cursor: pointer; display: grid; grid-template-columns: 1fr 34px 34px; gap: 6px; align-items: center; padding: 6px 9px 6px 33px; } .tree-brawler-row.active { background: rgba(255, 210, 61, 0.08); } .tree-brawler-name { font-size: 11.5px; font-weight: 500; color: var(--text-secondary); } .tree-brawler-row.active .tree-brawler-name { color: var(--accent-gold); } .tree-brawler-sets { font-size: 10px; font-weight: 500; color: var(--text-muted-3); text-align: right; } .tree-brawler-wr { font-family: "Barlow Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 700; color: var(--text-muted-1); text-align: right; } section.stats-section { margin-bottom: 32px; padding: 16px; border: 1px solid var(--panel-border); border-radius: var(--radius-sm); background: var(--panel); } /* Task 10: `#map-section`/`#brawler-section`/`#teammate-section` now each wrap their content in a Task 9 `.panel` (own border/radius/background/margin) — without this override the outer `.stats-section` box's own border/padding/background would double up around it. Scoped via `:has()` so `#recent-section` (still a bare `.stats-section` until Task 14 wraps it too) keeps its original look. */ section.stats-section:has(> .panel) { margin-bottom: 0; padding: 0; border: none; background: none; } table { border-collapse: collapse; width: 100%; font-size: 0.92em; color: var(--text-primary); } table th, table td { border: 1px solid var(--divider); padding: 6px 10px; text-align: left; } table th { background: var(--panel); color: var(--text-secondary); font-weight: 600; cursor: pointer; user-select: none; white-space: nowrap; } table th:hover { background: var(--input-border); } table th[data-order]::after { content: " \25B4"; } table th[data-order="desc"]::after { content: " \25BE"; } tr.filtered-out { display: none; } /* ========================================================================================== "Load more" pagination button — appended below a table by renderTeammateTable in stats.html's SECTION 4 block. Reuses the sidebar `.chip` gold-accent-on-hover treatment so it reads as part of the same control language, but sits full-width under the table. ========================================================================================== */ .load-more-button { display: block; width: 100%; margin-top: var(--space-md); cursor: pointer; font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 9px; border-radius: var(--radius-md); background: var(--bg-sidebar); color: var(--text-secondary); border: 1px solid var(--input-border); } .load-more-button:hover { background: rgba(255, 210, 61, 0.08); border-color: var(--accent-gold); color: var(--accent-gold); } /* ========================================================================================== Table row anatomy — shared by the map/brawler/teammate tables' first column, built by `buildRowIconCell` in stats.html's TABLE ROW HELPERS section. `.table-row-cell` is the flex row (placeholder + text stack); `.table-row-label-line` holds the name plus any `.badge-thin`/`.badge-tracked` badges; `.table-row-sublabel` (map rows only, shows the mode) sits underneath, inside the same text stack. ========================================================================================== */ .table-row-cell { display: flex; align-items: center; gap: var(--space-sm); } .table-icon-placeholder { width: 32px; height: 32px; flex: none; border-radius: var(--radius-sm); background: var(--placeholder-swatch); } .table-row-icon { width: 32px; height: 32px; flex: none; object-fit: cover; display: block; } .table-row-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .table-row-label-line { display: flex; align-items: center; gap: 6px; } .table-row-label { font-family: "Barlow Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 17px; font-weight: 700; text-transform: uppercase; color: var(--text-primary); } .table-row-sublabel { font-size: 11px; font-weight: 500; color: var(--text-muted-2); } /* ========================================================================================== Winrate bar cell — shared by the map/brawler/teammate tables' final column, built by `buildWinrateCell` in stats.html's TABLE ROW HELPERS section. `.winrate-bar-fill`'s width and `.winrate-bar-text`'s colour are both set inline per-instance via `winrateTone()`, so neither rule below sets a colour of its own. `.winrate-bar-text` is a real sibling text node next to the bar (never inside it) so `sortTableByColumn`'s `cell.textContent` read still sees only the "NN.N%" string. ========================================================================================== */ .winrate-bar-track { height: 12px; border-radius: 6px; background: var(--divider); overflow: hidden; margin-bottom: 3px; } .winrate-bar-fill { height: 100%; } .winrate-bar-text { font-family: "Barlow Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 21px; font-weight: 700; line-height: 1; } /* ========================================================================================== Trend sparkline (Task 15) — the map/brawler/teammate tables' Trend column, built by `renderSparkline` in stats.html. A row with fewer than 3 of its own chronological sets renders no (`#match-detail-overlay` > `.modal-box` > `.modal-header` + `#match-detail-content`), toggled open/closed by `openMatchDetailModal`/`closeMatchDetailModal` in stats.html's MATCH DETAIL MODAL section via the `.open` class below — no inline `style.display` writes. `position: fixed; inset: 0;` is used (rather than the mockup's `absolute` against a `position: relative` root) since it is simpler and still guarantees full-viewport coverage regardless of page scroll position. The backdrop's `rgba(4, 7, 13, .78)` alpha value has no existing token (a one-off overlay effect, not part of the reusable palette) so it is hardcoded here, matching the mockup exactly. ========================================================================================== */ .modal-overlay { position: fixed; inset: 0; display: none; align-items: flex-start; justify-content: center; padding: 80px 30px; background: rgba(4, 7, 13, 0.78); z-index: 50; } .modal-overlay.open { display: flex; } .modal-box { width: 860px; max-width: 100%; max-height: 90vh; overflow-y: auto; background: var(--panel); border: 1px solid var(--panel-border); border-top: 3px solid var(--accent-gold); border-radius: var(--radius-3xl); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6); } .modal-header { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); padding: 15px var(--space-xl); background: linear-gradient(110deg, #1a2340, #131a2e); border-bottom: 1px solid var(--panel-border); } .modal-header-info { display: flex; align-items: center; gap: 14px; min-width: 0; } .modal-thumb-placeholder { width: 60px; height: 44px; flex: none; border-radius: var(--radius-md); background-color: var(--placeholder-swatch); background-size: contain; background-position: center; background-repeat: no-repeat; } #match-detail-title { margin: 0; font-family: "Barlow Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 25px; font-weight: 700; line-height: 1.05; letter-spacing: 0.03em; text-transform: uppercase; color: var(--text-primary); } #match-detail-close { cursor: pointer; flex: none; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-lg); background: var(--bg-sidebar); border: 1px solid var(--input-border); color: var(--text-muted-1); font-size: 14px; font-weight: 700; } #match-detail-close:focus-visible { outline: 2px solid var(--accent-gold); outline-offset: -2px; } #match-detail-content { padding: var(--space-lg) var(--space-xl) var(--space-xl); } /* `renderMatchDetail` (stats.html) still creates its own `

` heading as the first child of #match-detail-content, unchanged from before this task aside from this className — hidden here because the modal header's own `#match-detail-title` (set by `loadMatchDetail`) already shows the same "{mode} — {map}" text, so keeping both visible would duplicate it. / .modal-detail-heading { display: none; } .modal-summary-list { list-style: none; margin: 0 0 var(--space-lg); padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-xl); font-size: 12px; font-weight: 500; color: var(--text-muted-1); } .modal-team-heading, .modal-rounds-heading { margin: var(--space-lg) 0 var(--space-sm); font-size: 12px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-secondary); } .modal-team-heading:first-of-type { margin-top: 0; } .modal-team-table, .modal-rounds-table { margin-bottom: var(--space-lg); border: 1px solid var(--panel-border); border-radius: var(--radius-xl); overflow: hidden; } .modal-team-table th, .modal-rounds-table th { background: var(--bg-sidebar); } / ========================================================================================== Mobile / narrow layout — lagt sist i filen slik at reglene vinner over de generelle reglene lenger opp. Collapses the sidebar+main split onto one stacked column. `.layout` / `.sidebar` / `.main` now exist in the DOM (added by Task 6, markup + base rules above) — these overrides are active as soon as the viewport narrows below 900px. ========================================================================================== */ @media (max-width: 900px) { .layout { flex-direction: column; } .sidebar { width: 100%; border-right: none; border-bottom: 1px solid var(--panel-border); } .main { padding: var(--space-lg); } }