/* teamtracker.ca — Rink Report stylesheet * * Drop-in stylesheet for the redesigned dashboard, player profile, and * box-score pages. Self-contained: no build step, no external libs. * * Tokens are declared once on :root (light, default) and overridden under * prefers-color-scheme: dark or a .dark class on . The component * selectors all read `var(--tt-…)` so swapping the token block flips the * theme without touching markup. * * Accent palette is intentionally narrow: --tt-accent for primary, plus * --tt-good / --tt-bad / --tt-warn for outcome signaling. * * Font stack uses Manrope (display) + IBM Plex Mono is not used by these * components — tabular numerals come from font-variant-numeric on the * tokens that need them. Numbers stay legible in the system font fallback. */ @import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=Manrope:wght@400;500;600;700;800&display=swap'); /* ── Tokens ────────────────────────────────────────────────────────────── */ :root { /* Light theme — default */ --tt-bg: #fbfaf7; --tt-card: #ffffff; --tt-soft: #f4f1ec; --tt-line: #ebe7df; --tt-fg: #1d1c1a; --tt-fg-2: #4a4843; --tt-fg-3: #736e61; --tt-accent: #4a9eff; --tt-good: #1f9d6f; --tt-bad: #d24d4d; --tt-warn: #c79028; --tt-win: var(--tt-accent); /* win - blue */ --tt-loss: var(--tt-bad); /* loss - red */ --tt-tie: var(--tt-fg-3); /* tie - grey */ --num-w: 700; /* ── 2026-06 redesign skin vars (light values; dark overrides below) ── */ --tt-goalie: #c89b3c; --tt-row-line: var(--tt-line); /* list-row rules (subtler than panel borders in dark) */ --tt-up: var(--tt-good); /* positive stat text */ --tt-dn: var(--tt-bad); /* negative stat text */ --tt-on-accent: #ffffff; /* text on solid accent fills */ --tt-dot-tie: #a09a8c; /* tie square in the last-10 dot strip */ --tt-rec-sep: var(--tt-line); /* record-hero separator dots */ --tt-a-bar: #b3d4f7; /* assists segment in stacked G+A bars */ --tt-eyebrow: var(--tt-fg-3); /* hero eyebrow line */ --tt-kpi-bg: var(--tt-bg); /* hero KPI tile fill */ --tt-bc: 'Barlow Condensed', 'Manrope', ui-sans-serif, system-ui, sans-serif; --tt-disp: 'Manrope', ui-sans-serif, system-ui, -apple-system, sans-serif; /* flips to BC in dark */ --tt-glow-accent: none; /* dark: glow behind big accent numerals */ --tt-bar-glow: none; /* dark: glow on accent bar fills */ --tt-hero-stripes: none; /* dark: pinstripe overlay on the record hero */ /* panel heading treatment (Manrope 13 light / Barlow 17 uppercase dark) */ --ph-size: 13px; --ph-weight: 700; --ph-track: -0.005em; --ph-case: none; /* display numeral sizes (light / dark) */ --kpi-size: 28px; --kpi-track: -0.025em; /* hero KPI values */ --gsc-size: 14px; /* recent-game row score */ --lpct-size: 14px; /* line-row GF–GA value */ --stv-size: 26px; /* special-teams big value */ --gfig-size: 16px; /* dashboard goalie figures */ --gj-size: 15px; /* dashboard goalie jersey square */ --jersey-size: 11px; /* line-row jersey chip numeral */ --jersey-c: var(--tt-fg); /* line-row jersey chip color */ --jersey1-bg: color-mix(in oklch, var(--tt-accent) 18%, transparent); /* rank-1 chips */ --jersey1-c: var(--tt-accent); } @media (prefers-color-scheme: dark) { :root:not(.light) { /* Midnight dark */ --tt-bg: #0a0c11; --tt-card: #141822; --tt-soft: #1c2130; --tt-line: #252b3e; --tt-fg: #eef0f6; --tt-fg-2: #a6afc4; --tt-fg-3: #7e88a6; /* 2026-06 redesign skin vars — "The Bench" dark values */ --tt-row-line: #1b2133; --tt-up: #4ade9e; --tt-dn: #ff7a7a; --tt-on-accent: #06101f; --tt-dot-tie: var(--tt-fg-3); --tt-rec-sep: var(--tt-fg-3); --tt-a-bar: #2d567f; --tt-eyebrow: var(--tt-accent); --tt-kpi-bg: color-mix(in oklch, var(--tt-soft) 70%, transparent); --tt-disp: 'Barlow Condensed', 'Manrope', ui-sans-serif, system-ui, sans-serif; --tt-glow-accent: 0 0 28px color-mix(in oklch, var(--tt-accent) 45%, transparent); --tt-bar-glow: 0 0 8px color-mix(in oklch, var(--tt-accent) 35%, transparent); --tt-hero-stripes: repeating-linear-gradient(-58deg, transparent 0 26px, color-mix(in oklch, var(--tt-accent) 4%, transparent) 26px 28px); --ph-size: 17px; --ph-weight: 800; --ph-track: .1em; --ph-case: uppercase; --kpi-size: 34px; --kpi-track: 0; --gsc-size: 16px; --lpct-size: 19px; --stv-size: 32px; --gfig-size: 19px; --gj-size: 17px; --jersey-size: 13px; --jersey-c: var(--tt-accent); --jersey1-bg: var(--tt-accent); --jersey1-c: var(--tt-on-accent); } } :root.dark { --tt-bg: #0a0c11; --tt-card: #141822; --tt-soft: #1c2130; --tt-line: #252b3e; --tt-fg: #eef0f6; --tt-fg-2: #a6afc4; --tt-fg-3: #7e88a6; /* 2026-06 redesign skin vars — "The Bench" dark values */ --tt-row-line: #1b2133; --tt-up: #4ade9e; --tt-dn: #ff7a7a; --tt-on-accent: #06101f; --tt-dot-tie: var(--tt-fg-3); --tt-rec-sep: var(--tt-fg-3); --tt-a-bar: #2d567f; --tt-eyebrow: var(--tt-accent); --tt-kpi-bg: color-mix(in oklch, var(--tt-soft) 70%, transparent); --tt-disp: 'Barlow Condensed', 'Manrope', ui-sans-serif, system-ui, sans-serif; --tt-glow-accent: 0 0 28px color-mix(in oklch, var(--tt-accent) 45%, transparent); --tt-bar-glow: 0 0 8px color-mix(in oklch, var(--tt-accent) 35%, transparent); --tt-hero-stripes: repeating-linear-gradient(-58deg, transparent 0 26px, color-mix(in oklch, var(--tt-accent) 4%, transparent) 26px 28px); --ph-size: 17px; --ph-weight: 800; --ph-track: .1em; --ph-case: uppercase; --kpi-size: 34px; --kpi-track: 0; --gsc-size: 16px; --lpct-size: 19px; --stv-size: 32px; --gfig-size: 19px; --gj-size: 17px; --jersey-size: 13px; --jersey-c: var(--tt-accent); --jersey1-bg: var(--tt-accent); --jersey1-c: var(--tt-on-accent); } /* ── Page chrome ──────────────────────────────────────────────────────── */ html, body { margin: 0; padding: 0; background: var(--tt-bg); color: var(--tt-fg); } body { font-family: 'Manrope', ui-sans-serif, system-ui, -apple-system, sans-serif; font-feature-settings: 'cv11','ss01'; letter-spacing: -0.005em; } /* Component styles (extracted from the React mock; class names unchanged) */ .saas { font-family: 'Manrope', ui-sans-serif, system-ui, -apple-system, sans-serif; background: var(--tt-bg); color: var(--tt-fg); width: 100%; height: 100%; display: flex; flex-direction: column; font-feature-settings: 'cv11','ss01'; letter-spacing: -0.005em; } /* Top bar — single chrome surface for the whole app */ .saas-topbar { display:flex; align-items:center; gap:14px; padding: 12px 28px; border-bottom: 1px solid var(--tt-line); background: var(--tt-bg); flex: 0 0 auto; } .saas-brand { display:flex; align-items:center; gap:11px; } .saas-brand a.brand-link { display:flex; align-items:center; } .saas-brand img { width:36px; height:36px; object-fit:contain; } .saas-brand h1 { font-family: var(--tt-bc); font-size:22px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; margin:0; } .saas-brand .div { font-size:11.5px; color:var(--tt-fg-3); margin-top:1px; } .saas-back { display:inline-flex; align-items:center; font-size:22px; line-height:1; color: var(--tt-accent); padding: 2px 8px; border-radius:6px; cursor:pointer; font-weight:700; text-decoration:none; } .saas-back:hover { background: var(--tt-soft); } .saas-crumb { font-size:13px; color: var(--tt-fg-3); display:flex; align-items:center; gap:8px; padding-left: 14px; border-left: 1px solid var(--tt-line); margin-left: 4px; } .saas-crumb b { color: var(--tt-fg); font-weight:600; } .saas-spacer { flex: 1; } .saas-season { display:flex; align-items:center; gap:8px; padding: 6px 10px 6px 12px; border-radius:7px; border:1px solid var(--tt-line); background: var(--tt-card); font-size:12.5px; font-weight:500; cursor:default; } .saas-season .lbl { color: var(--tt-fg-3); font-size:11px; text-transform:uppercase; letter-spacing:.06em; font-weight:600; } .saas-season .caret { color: var(--tt-fg-3); } .saas-userpill { display:flex; align-items:center; gap:8px; padding: 4px 10px 4px 4px; border-radius:99px; background: var(--tt-soft); cursor:default; position: relative; } .saas-userpill:hover { background: color-mix(in oklch, var(--tt-soft) 70%, var(--tt-line)); } .saas-userpill .a { width:24px; height:24px; border-radius:50%; background: var(--tt-accent); color: var(--tt-on-accent); display:grid; place-items:center; font-size:10.5px; font-weight:700; } .saas-userpill .nm { font-size:12px; font-weight:600; } .saas-userpill .role { font-size:10px; color: var(--tt-good); text-transform:uppercase; letter-spacing:.06em; font-weight:700; padding-left:6px; border-left: 1px solid var(--tt-line); } .saas-userpill .caret { color: var(--tt-fg-3); margin-left: 2px; } .saas-usermenu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 220px; background: var(--tt-card); border: 1px solid var(--tt-line); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.12); padding: 6px; z-index: 50; } .saas-usermenu .grp-lbl { font-size: 10px; color: var(--tt-fg-3); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; padding: 8px 10px 4px; } .saas-usermenu .item { display: flex; align-items: center; gap: 10px; padding: 7px 10px; font-size: 12.5px; border-radius: 6px; cursor: default; } .saas-usermenu .item:hover { background: var(--tt-soft); } .saas-usermenu .item .check { width: 14px; height: 14px; display: grid; place-items: center; color: var(--tt-accent); font-size: 14px; } .saas-usermenu .item.danger { color: var(--tt-bad); } .saas-usermenu .divider { height: 1px; background: var(--tt-line); margin: 4px 0; } .saas-actions { display:flex; align-items:center; gap:8px; } .saas-btn { font-family:inherit; font-size:11.5px; font-weight:700; padding:8px 15px; border-radius:7px; border:1px solid var(--tt-line); background: var(--tt-card); color: var(--tt-fg); cursor:pointer; display:flex; align-items:center; gap:8px; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; } .saas-btn.primary { background: var(--tt-accent); color: var(--tt-on-accent); border-color: var(--tt-accent); font-weight:800; } .saas-body { padding: 22px 32px 30px; overflow:auto; flex:1; display:flex; flex-direction:column; gap: 16px; } .saas-h { display:flex; align-items:flex-end; justify-content:space-between; } .saas-h h1 { font-size: 22px; font-weight: 700; letter-spacing: -0.018em; margin:0; } .saas-h .sub { font-size:13px; color:var(--tt-fg-3); margin-top:2px; } .saas-pills { display:flex; gap:4px; background: var(--tt-soft); border-radius:8px; padding:3px; } .saas-pill { font-size:11.5px; padding:5px 11px; border-radius:6px; color:var(--tt-fg-2); font-weight:500; cursor:default; } .saas-pill.on { background: var(--tt-card); box-shadow: 0 1px 2px rgba(0,0,0,.05); color: var(--tt-fg); font-weight:600; } /* 4 hero KPI cards */ .saas-hero { display:grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .saas-kpi { background: var(--tt-card); border:1px solid var(--tt-line); border-radius:10px; padding: 14px 14px 12px; } .saas-kpi .lbl { font-size:11px; color: var(--tt-fg-3); text-transform:uppercase; letter-spacing:0.06em; font-weight:600; } .saas-kpi .val { font-size: 28px; font-weight: var(--num-w, 700); letter-spacing:-0.02em; margin-top:6px; font-variant-numeric: tabular-nums; display:flex; align-items:baseline; gap:6px; } .saas-kpi .val small { font-size:13px; font-weight:600; color:var(--tt-fg-3); } .saas-kpi .micro { font-size:11px; color:var(--tt-fg-3); margin-top:4px; } .saas-kpi .spark { height:24px; margin-top: 8px; } /* 6 secondary cards in a strip */ .saas-strip { display:grid; grid-template-columns: repeat(6, 1fr); gap: 10px; } .saas-strip .saas-mini { background: var(--tt-card); border:1px solid var(--tt-line); border-radius:8px; padding: 10px 12px; } .saas-strip .saas-mini .lbl { font-size:10.5px; color:var(--tt-fg-3); text-transform:uppercase; letter-spacing:0.06em; font-weight:600; } .saas-strip .saas-mini .val { font-size:18px; font-weight:var(--num-w,700); margin-top:3px; font-variant-numeric: tabular-nums; letter-spacing:-0.01em; } .saas-grid { display:grid; gap:14px; } .saas-card { background: var(--tt-card); border:1px solid var(--tt-line); border-radius:12px; } .saas-card-hd { padding: 12px 20px; border-bottom:1px solid var(--tt-line); display:flex; align-items:baseline; justify-content:space-between; gap:12px; } .saas-card-hd h3 { margin:0; font-family: var(--tt-disp); font-size: var(--ph-size); font-weight: var(--ph-weight); letter-spacing: var(--ph-track); text-transform: var(--ph-case); white-space: nowrap; } .saas-card-hd .meta { font-size:11px; color: var(--tt-fg-3); } .saas-card-bd { padding: 12px 16px 14px; } .saas-table { width:100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size:12.5px; } .saas-table th { text-align:left; font-weight:600; font-size:10.5px; text-transform:uppercase; letter-spacing:0.06em; color: var(--tt-fg-3); padding:6px 8px; border-bottom:1px solid var(--tt-line); cursor: default; } .saas-table th.sorted { color: var(--tt-fg); } .saas-table th.sorted::after { content: ' ▼'; font-size: 9px; color: var(--tt-accent); } .saas-table td { padding: 8px; border-bottom: 1px solid var(--tt-line); } .saas-table tr:last-child td { border-bottom:none; } .saas-table tr.ap td { color: var(--tt-fg-3); font-style: italic; } .saas-table tr.goalie td { background: color-mix(in oklch, #c89b3c 8%, transparent); } .saas-table td.num, .saas-table th.num { text-align:right; } .saas-table td.name { font-weight:600; font-style: normal; } .saas-table td.center, .saas-table th.center { text-align: center; } .saas-table .jersey { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; background:var(--tt-soft); border-radius:5px; font-size:10.5px; font-weight:700; margin-right:8px; vertical-align:middle; } .saas-table .pos { display:inline-block; padding:1px 5px; border-radius:3px; background:var(--tt-soft); font-size:9.5px; font-weight:700; color:var(--tt-fg-3); } .saas-table td.pos-pm.pos-up { color: var(--tt-good); } .saas-table td.pos-pm.pos-down { color: var(--tt-bad); } .saas-game { display:grid; grid-template-columns: 76px 28px 1fr 80px 64px 30px; gap:10px; padding:10px 0; align-items:center; border-bottom: 1px solid var(--tt-line); } .saas-game.head { padding: 8px 0 6px; border-bottom: 1px solid var(--tt-line); } .saas-game.head > div { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color: var(--tt-fg-3); } .saas-game.head .score-h { text-align:center; } .saas-game:last-child { border-bottom:none; } .saas-game .date { font-size:11px; color:var(--tt-fg-3); font-variant-numeric: tabular-nums; } .saas-game .ha { font-size:10px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color: var(--tt-fg-3); } .saas-game .opp { font-size:13px; font-weight:600; } .saas-game .opp small { display:block; color: var(--tt-fg-3); font-weight:500; font-size:11px; margin-top:1px; } .saas-game .score { font-variant-numeric: tabular-nums; font-weight:700; font-size:14px; text-align:center; } .saas-game .type { font-size:9.5px; font-weight:700; letter-spacing:.06em; padding:2px 5px; background:var(--tt-soft); border-radius:3px; color:var(--tt-fg-3); text-align:center; } .saas-up { display:grid; grid-template-columns: 44px 1fr auto; gap: 12px; padding: 10px 0; border-bottom:1px solid var(--tt-line); align-items:center; } .saas-up:last-child { border-bottom:none; } .saas-up .d { text-align:center; } .saas-up .d .day { font-size:10px; font-weight:700; color: var(--tt-accent); text-transform:uppercase; letter-spacing:0.06em; } .saas-up .d .num { font-size:18px; font-weight:700; line-height:1; margin-top:1px; font-variant-numeric: tabular-nums; } .saas-up .info b { display:block; font-size:13px; font-weight:600; } .saas-up .info small { font-size:11px; color:var(--tt-fg-3); } .saas-up .time { font-size:11.5px; color:var(--tt-fg-2); font-variant-numeric: tabular-nums; } /* Game manager sub-toolbar (box score) */ .saas-gamenav { display:flex; align-items:center; gap: 8px; padding: 10px 14px; background: var(--tt-card); border: 1px solid var(--tt-line); border-radius: 10px; } .saas-gamenav .nav-btn { font-family: inherit; font-size: 12px; font-weight: 600; padding: 6px 10px; border-radius: 6px; border: 1px solid var(--tt-line); background: var(--tt-bg); color: var(--tt-fg); cursor: default; display:flex; align-items:center; gap: 4px; } .saas-gamenav .gamepick { flex: 1; max-width: 380px; display:flex; align-items:center; gap: 8px; padding: 6px 10px 6px 12px; border-radius: 6px; border: 1px solid var(--tt-line); background: var(--tt-bg); font-size: 12.5px; cursor: default; } .saas-gamenav .gamepick .meta { color: var(--tt-fg-3); font-size: 11px; margin-left: auto; padding-right: 6px; } .saas-gamenav .gamepick .caret { color: var(--tt-fg-3); } .saas-gamenav .spacer { flex: 1; } .saas-gamenav .edit { background: var(--tt-warn); color: #fff; border-color: var(--tt-warn); } .saas-viewall { display:flex; align-items:center; justify-content:space-between; padding: 12px 16px; border-top: 1px solid var(--tt-line); font-size:12.5px; color: var(--tt-accent); font-weight:600; cursor:default; } .saas-viewall:hover { background: color-mix(in oklch, var(--tt-accent) 4%, transparent); } .saas-viewall .meta { color: var(--tt-fg-3); font-weight:500; } /* Line / pairing row — jersey chips + names + on-ice stats */ .saas-line { display:grid; grid-template-columns: auto 1fr repeat(4, 52px); gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--tt-line); align-items: center; } .saas-line:last-child { border-bottom: none; } .saas-line .chips { display:flex; align-items:center; gap: 3px; } .saas-line .chip { display:inline-flex; align-items:center; justify-content:center; min-width:26px; height:24px; padding:0 6px; background: var(--tt-soft); border-radius:5px; font-size:11px; font-weight:700; font-variant-numeric: tabular-nums; color: var(--tt-fg); } .saas-line .names { font-size:13px; font-weight:600; } .saas-line .stat { text-align:right; font-variant-numeric: tabular-nums; } .saas-line .stat .v { font-size:16px; font-weight:var(--num-w, 700); letter-spacing:-0.01em; } .saas-line .stat .v.up { color: var(--tt-good); } .saas-line .stat .v.down { color: var(--tt-bad); } .saas-line .stat .lbl { font-size:9.5px; color: var(--tt-fg-3); text-transform:uppercase; letter-spacing:.06em; font-weight:700; margin-top:1px; } .saas-line.head .stat .lbl { color: var(--tt-fg-3); } .saas-line.rank-1 .chip { background: color-mix(in oklch, var(--tt-accent) 18%, transparent); color: var(--tt-accent); } /* Best-linemate hero callout on player profile */ .saas-mate { display:grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items:center; padding: 18px 18px; background: color-mix(in oklch, var(--tt-accent) 6%, transparent); border: 1px solid color-mix(in oklch, var(--tt-accent) 22%, var(--tt-line)); border-radius: 10px; } .saas-mate .chip { width:64px; height:64px; border-radius:10px; background: var(--tt-soft); display:grid; place-items:center; font-size:28px; font-weight:800; color: var(--tt-accent); font-variant-numeric: tabular-nums; letter-spacing:-0.02em; } .saas-mate h4 { margin:0; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color: var(--tt-accent); } .saas-mate .nm { font-size:20px; font-weight:700; letter-spacing:-0.012em; margin-top:4px; } .saas-mate .nm small { font-size:12px; color:var(--tt-fg-3); font-weight:500; margin-left:8px; letter-spacing:.06em; text-transform:uppercase; } .saas-mate .desc { font-size:12.5px; color:var(--tt-fg-2); margin-top:4px; line-height:1.5; max-width: 460px; } .saas-mate .figures { display:flex; gap: 22px; } .saas-mate .figures > div { text-align:right; } .saas-mate .figures .l { font-size:10px; color:var(--tt-fg-3); text-transform:uppercase; letter-spacing:.06em; font-weight:700; } .saas-mate .figures .v { font-size:22px; font-weight:var(--num-w,700); font-variant-numeric: tabular-nums; letter-spacing:-0.02em; margin-top:2px; } .saas-mate .figures .v.up { color: var(--tt-good); } /* Player profile hero */ .saas-prof-hero { display:flex; align-items:center; gap:18px; padding: 18px 20px; background: var(--tt-card); border:1px solid var(--tt-line); border-radius: 12px; } .saas-prof-portrait { width:84px; height:84px; border-radius:12px; background: var(--tt-soft); display:grid; place-items:center; font-size:30px; font-weight:800; letter-spacing:-0.02em; color: var(--tt-accent); position:relative; overflow:hidden; font-variant-numeric: tabular-nums; } .saas-prof-portrait::after { content:''; position:absolute; inset:auto -12px -12px auto; width:48px; height:48px; background: var(--tt-accent); opacity:.08; border-radius:50%; } .saas-prof-hero h2 { margin:0; font-size:22px; font-weight:700; letter-spacing:-0.02em; } .saas-prof-hero .meta { display:flex; gap:10px; font-size:12px; color: var(--tt-fg-3); margin-top:4px; } .saas-prof-hero .meta b { color: var(--tt-fg); font-weight:600; } .saas-prof-statstrip { display:flex; gap:22px; margin-left:auto; } .saas-prof-statstrip > div { text-align:right; } .saas-prof-statstrip .l { font-size:10.5px; text-transform:uppercase; letter-spacing:0.06em; color:var(--tt-fg-3); font-weight:600; } .saas-prof-statstrip .v { font-size:24px; font-weight:var(--num-w,700); font-variant-numeric: tabular-nums; letter-spacing:-0.02em; } /* Box score */ .saas-box-hero { background: var(--tt-card); border:1px solid var(--tt-line); border-radius:12px; padding: 18px 22px; display:grid; grid-template-columns: 1fr auto 1fr; gap:18px; align-items:center; } .saas-box-team { display:flex; align-items:center; gap:14px; } .saas-box-team.away { flex-direction: row-reverse; text-align:right; } .saas-box-team .crest { width:48px; height:48px; border-radius:10px; background: var(--tt-soft); display:grid; place-items:center; font-weight:800; } .saas-box-team .crest img { width:100%; height:100%; object-fit:cover; border-radius:10px; } .saas-box-team h2 { margin:0; font-size:16px; font-weight:700; } .saas-box-team .rec { font-size:11.5px; color:var(--tt-fg-3); } .saas-box-score { text-align:center; } .saas-box-score .final { font-size:10.5px; text-transform:uppercase; letter-spacing:0.1em; font-weight:700; color:var(--tt-fg-3); } .saas-box-score .nums { font-size:54px; font-weight:var(--num-w,800); letter-spacing:-0.04em; font-variant-numeric: tabular-nums; line-height:1; margin: 2px 0; display:flex; gap:14px; align-items:center; justify-content:center; } .saas-box-score .nums .sep { color: var(--tt-fg-3); font-weight:500; } .saas-box-score .nums b.win { color: var(--tt-accent); } .saas-box-score .date { font-size:11.5px; color:var(--tt-fg-3); margin-top:6px; } /* ============================================================================ Mobile .m-* card rows — copied verbatim from the TeamTracker Mobile UI Kit (ui_kits/teamtracker-mobile/mobile.css). Used for stripe-row parity on the read-only stats surfaces. Tokens already live in :root above. ============================================================================ */ /* Game list rows */ .m-game { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 12px 14px 12px 11px; border-bottom: 1px solid var(--tt-line); border-left: 3px solid transparent; cursor: pointer; min-height: 52px; } .m-game:last-child { border-bottom: none; } .m-game:active { background: color-mix(in oklch, var(--tt-accent) 5%, transparent); } .m-game.W { border-left-color: var(--tt-accent); } .m-game.L { border-left-color: var(--tt-bad); } .m-game.T { border-left-color: var(--tt-fg-3); } .m-game .opp { font-size: 13.5px; font-weight: 600; } .m-game .sub { font-size: 10.5px; color: var(--tt-fg-3); margin-top: 3px; display: grid; grid-template-columns: 42px 52px auto; gap: 10px; align-items: center; } .m-game .sub .gt { justify-self: start; } .m-game .sub .dot { color: var(--tt-line); } .m-game .score { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; text-align: right; } .m-chevron { color: var(--tt-fg-3); font-size: 15px; margin-left: 2px; } .m-gtype { display: inline-block; padding: 0 5px; border-radius: 3px; font-size: 9px; font-weight: 700; letter-spacing: .06em; background: var(--tt-soft); color: var(--tt-fg-3); text-transform: uppercase; } /* Top line / pairing mini list */ .m-line { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--tt-line); } .m-line:last-child { border-bottom: none; } .m-chips { display: flex; gap: 3px; } .m-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 22px; padding: 0 5px; background: var(--tt-soft); border-radius: 5px; font-size: 10.5px; font-weight: 700; color: var(--tt-fg); font-variant-numeric: tabular-nums; } .m-line.rank-1 .m-chip { background: color-mix(in oklch, var(--tt-accent) 18%, transparent); color: var(--tt-accent); } .m-line .names { font-size: 12.5px; font-weight: 600; flex: 1; } .m-line .diff { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } .m-line .diff.up { color: var(--tt-good); } .m-line .diff.down { color: var(--tt-bad); } .m-line .diff .dl { font-size: 9px; color: var(--tt-fg-3); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; display: block; text-align: right; } /* Scoring timeline rows + strength chips */ .m-goal { display: grid; grid-template-columns: 52px 1fr auto; gap: 11px; align-items: center; padding: 11px 14px 11px 11px; border-bottom: 1px solid var(--tt-line); border-left: 3px solid transparent; } .m-goal:last-child { border-bottom: none; } .m-goal.us { border-left-color: var(--tt-accent); } .m-goal.them { border-left-color: var(--tt-bad); } .m-goal .rs { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; display: flex; align-items: baseline; gap: 1px; color: var(--tt-fg-3); } .m-goal .rs b { font-weight: 800; } .m-goal .rs .score-us { color: var(--tt-accent); } .m-goal .rs .score-them { color: var(--tt-bad); } .m-goal .rs .sep { font-weight: 500; opacity: .55; } .m-goal .info .scorer { font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 6px; } .m-goal .info .assist { font-size: 10.5px; color: var(--tt-fg-3); margin-top: 1px; } .m-goal .when, .m-pen .when { text-align: left; } .m-goal .when .per, .m-pen .when .per { font-size: 9px; font-weight: 700; color: var(--tt-fg-3); text-transform: uppercase; letter-spacing: .06em; } .m-goal .when .time, .m-pen .when .time { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; } .m-str { font-size: 8.5px; font-weight: 700; letter-spacing: .05em; padding: 1px 5px; border-radius: 4px; text-transform: uppercase; background: var(--tt-soft); color: var(--tt-fg-3); } .m-str.pp { background: color-mix(in oklch, var(--tt-good) 16%, transparent); color: var(--tt-good); } .m-str.sh { background: color-mix(in oklch, var(--tt-warn) 16%, transparent); color: var(--tt-warn); } .m-str.ps { background: color-mix(in oklch, var(--tt-accent) 16%, transparent); color: var(--tt-accent); } .m-str.en { background: color-mix(in oklch, var(--tt-bad) 13%, transparent); color: var(--tt-bad); } /* Penalty rows */ .m-pen { display: grid; grid-template-columns: 52px 1fr auto; gap: 11px; align-items: center; padding: 11px 14px 11px 11px; border-bottom: 1px solid var(--tt-line); border-left: 3px solid transparent; } .m-pen:last-child { border-bottom: none; } .m-pen.us { border-left-color: var(--tt-accent); } .m-pen.them { border-left-color: var(--tt-bad); } .m-pen .when { text-align: left; } .m-pen .when .per { font-size: 9px; font-weight: 700; color: var(--tt-fg-3); text-transform: uppercase; letter-spacing: .06em; } .m-pen .when .time { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; } .m-pen .info .who { font-size: 13px; font-weight: 700; } .m-pen .info .inf { font-size: 10.5px; color: var(--tt-fg-3); margin-top: 1px; } .m-pen .mins { text-align: right; font-size: 11.5px; font-weight: 700; color: var(--tt-fg-2); font-variant-numeric: tabular-nums; } .m-pen .mins small { display: block; font-size: 8.5px; font-weight: 700; color: var(--tt-fg-3); text-transform: uppercase; letter-spacing: .06em; margin-top: 2px; } /* Game log compact rows */ .m-log { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 10px 14px 10px 11px; border-bottom: 1px solid var(--tt-line); border-left: 3px solid transparent; } .m-log:last-child { border-bottom: none; } .m-log.W { border-left-color: var(--tt-accent); } .m-log.L { border-left-color: var(--tt-bad); } .m-log.T { border-left-color: var(--tt-fg-3); } .m-log .opp { font-size: 12.5px; font-weight: 600; } .m-log .opp .d { font-size: 10px; color: var(--tt-fg-3); font-weight: 500; } .m-log .pts { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; } .m-log .pts .pk { display: block; font-size: 8.5px; font-weight: 700; color: var(--tt-fg-3); text-transform: uppercase; letter-spacing: .06em; margin-top: 2px; } .m-log .pm { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; min-width: 26px; text-align: right; } .m-log .pm.up { color: var(--tt-good); } .m-log .pm.down { color: var(--tt-bad); } .m-log .pm.flat { color: var(--tt-fg-3); } /* Table↔card responsive swap (kit breakpoint 760px). Wide screens keep the dense tables; narrow screens show the .m-* card lists. */ .m-narrow-only { display: none; } @media (max-width: 760px) { .m-wide-only { display: none !important; } .m-narrow-only { display: block !important; } .hide-mobile { display: none; } } /* ============================================================================ Responsive — phone breakpoints (Claude Design handoff, 2026-05-29) Replaces the prior single 720px chrome block. Three tiers: 760 / 520 / 440. ============================================================================ */ /* ── Tablet / large phone: collapse the 4-up KPI hero to 2-up ────────────── */ @media (max-width: 760px) { .saas-hero { grid-template-columns: 1fr 1fr; } /* game nav: let the game picker take its own full-width row */ .saas-gamenav { flex-wrap: wrap; } .saas-gamenav select.gamepick { order: -1; flex: 1 1 100%; max-width: none; } .saas-gamenav .spacer { display: none; } } /* ── Phone: tighten gutters and fold the remaining wide chrome ───────────── */ @media (max-width: 520px) { .saas-topbar { padding: 12px 16px; gap: 8px; flex-wrap: wrap; } /* Phone: show only the logo; the team title returns above 520px. */ .saas-brand h1 { display: none; } .saas-topbar .saas-spacer, .saas-topbar .topbar-grow { display: none; } /* Top row: logo on the left, user pill pushed to the top right. */ .saas-topbar #userPillSlot { order: 10; margin-left: auto; } /* Add Game stays visible on phone portrait (hiding it confused people); compact sizing so logo + button + pill share the top row. */ .saas-topbar #btnUploadGamesheet { padding: 6px 11px; font-size: 12px; } /* Season dropdown drops to its own second row below the logo, label kept. */ .saas-season { order: 60; flex-basis: 100%; margin-left: 0; padding: 5px 10px; } .saas-body { padding: 18px 16px; gap: 16px; } /* KPI cards: smaller numerals so multi-part values (e.g. W-L-T) never clip */ .saas-kpi { padding: 12px 12px 11px; } .saas-kpi .val { font-size: 23px; gap: 4px; } .saas-kpi .val small { font-size: 11px; } /* Forward-line / pairing rows: narrower stat columns + tighter gaps */ .line-row { grid-template-columns: auto 1fr repeat(3, 42px); gap: 8px; font-size: 12px; } .line-row .stat .v { font-size: 14px; } /* Scoreboard hero: shrink the big score + crests so it fits on one row */ .saas-box-hero { padding: 14px 12px; gap: 8px; } .saas-box-team { gap: 9px; } .saas-box-team .crest { width: 38px; height: 38px; } .saas-box-team h2 { font-size: 13.5px; line-height: 1.2; } .saas-box-team .rec { font-size: 10.5px; } .saas-box-score .nums { font-size: 32px; gap: 7px; margin: 1px 0; } /* Player profile hero: wrap the stat strip onto its own full-width row */ .saas-prof-hero { flex-wrap: wrap; padding: 16px; gap: 14px; } .saas-prof-portrait { width: 64px; height: 64px; font-size: 24px; } .saas-prof-hero h2 { font-size: 19px; } .saas-prof-hero .meta { flex-wrap: wrap; row-gap: 2px; } .saas-prof-statstrip { flex-basis: 100%; margin-left: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 8px; padding-top: 14px; border-top: 1px solid var(--tt-line); } .saas-prof-statstrip > div { text-align: left; } } /* ── Small phone: stack the best-linemate callout's figures ──────────────── */ @media (max-width: 440px) { .saas-mate { grid-template-columns: auto 1fr; gap: 12px 14px; padding: 16px; } .saas-mate .figures { grid-column: 1 / -1; justify-content: space-between; gap: 0; } .saas-mate .figures > div { flex: 1; } .saas-mate .desc { max-width: none; } } /* GF/GA sub-line under the narrow line-card names (matches the mock). */ .m-line .names .sub { font-size: 10px; color: var(--tt-fg-3); font-weight: 500; margin-top: 2px; } /* Player-stat cards (kit MStatList 'cards' treatment) for the narrow dashboard. */ .m-jersey { grid-row: 1 / 3; align-self: center; display: grid; place-items: center; width: 46px; height: 46px; background: var(--tt-soft); border-radius: 10px; font-family: var(--tt-disp); font-size: 18px; font-weight: 800; color: var(--tt-fg); font-variant-numeric: tabular-nums; } .m-jersey.goalie { background: color-mix(in oklch, var(--tt-goalie) 15%, var(--tt-soft)); color: var(--tt-goalie); } .m-pos { display: inline-block; padding: 1px 5px; border-radius: 3px; background: var(--tt-soft); font-size: 9px; font-weight: 700; color: var(--tt-fg-3); letter-spacing: .06em; } .m-pcard { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; row-gap: 9px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--tt-line); cursor: pointer; } .m-pcard:last-child { border-bottom: none; } .m-pcard:active { background: color-mix(in oklch, var(--tt-accent) 5%, transparent); } .m-pcard .top { grid-column: 2; grid-row: 1; display: flex; align-items: center; gap: 8px; min-width: 0; } .m-pcard .nm { font-size: 14px; font-weight: 700; flex: 1; min-width: 0; } .m-pcard .stats { grid-column: 2; grid-row: 2; display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px 6px; } .m-pcard .stat { text-align: center; } .m-pcard .stat .v { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } .m-pcard .stat .v.up { color: var(--tt-good); } .m-pcard .stat .v.down { color: var(--tt-bad); } .m-pcard .stat .k { font-size: 9px; color: var(--tt-fg-3); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; margin-top: 1px; } /* Recent-games highlight: keep the parenthetical (e.g. "(Stewart GWG)") on one line so it wraps to the next row as a whole unit rather than mid-phrase. */ .m-game .opp .hl { white-space: nowrap; color: var(--tt-fg-3); font-weight: 500; } .saas-table td .game-hl { white-space: nowrap; color: var(--tt-fg-3); } /* ── Realtime live pulse (Phase 3) ─────────────────────────────────────── */ /* Dot prefixing the opponent name on a game that is being live-entered right now (dashboard Recent games, table row + mobile stripe card). */ .live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--tt-accent); margin-right: 7px; vertical-align: middle; flex: none; animation: tt-live-pulse 1.6s ease-in-out infinite; } @keyframes tt-live-pulse { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(74, 158, 255, 0.45); } 50% { opacity: .55; box-shadow: 0 0 0 5px rgba(74, 158, 255, 0); } } /* game-view hero status word while the score is goal-derived (in progress) */ #boxFinal.rt-live { color: var(--tt-accent); font-weight: 700; } /* ── Shots-only mode (live.html?shots=1) ───────────────────────────────── */ /* The goalie's-dad view: score + period chips + goalie button + a big shot counter. Goal/penalty entry, undo, the feed and quick-create are hidden. html.shots-only is set by live_app.js before first paint. */ .shots-only #btnGF, .shots-only #btnGA, .shots-only #btnPen, .shots-only #btnUndo, .shots-only .live-feed, .shots-only #btnUnscheduled { display: none !important; } /* With entry buttons gone, make the counter the main tap target. */ .shots-only .live-shots { margin-top: 18px; } .shots-only #btnShotAgainst { padding: 34px 18px; font-size: 19px; } .shots-only #btnShotMinus { padding: 34px 22px; font-size: 22px; } .shots-only .sa-count { font-size: 22px; font-weight: 800; } /* In-net pill under the live score (live.html, both modes). */ .live-goalie { display: block; margin: 10px auto 0; width: max-content; padding: 5px 14px; border-radius: 999px; background: var(--tt-soft); border: 1px solid var(--tt-line); font: inherit; font-size: 13px; font-weight: 700; color: var(--tt-fg-2); cursor: pointer; } .live-goalie.warn { color: var(--tt-warn); border-color: var(--tt-warn); } .shots-only .live-goalie { font-size: 15px; padding: 7px 18px; } /* Two-line shot button: "+1 Shot" over "Against #13". */ #btnShotAgainst .sa-l1 { display: block; font-weight: 800; } #btnShotAgainst .sa-l2 { display: block; font-size: 12px; font-weight: 600; color: var(--tt-fg-3); margin-top: 2px; } .shots-only #btnShotAgainst .sa-l2 { font-size: 14px; } /* Shots-only: goalie change is the lone survivor of the 2-col button grid; give it the full row, centered, at a sane width. */ .shots-only .live-btns { grid-template-columns: 1fr; justify-items: center; } .shots-only #btnGoalie { width: min(420px, 100%); } /* ============================================================================ 2026-06 redesign — "The Bench" (dark) / "Daylight" (light) Shared components from the design handoff (design_handoff_teamtracker_redesign). One markup system, two skins: every skin difference lives in the token blocks at the top of this file, so these rules are written once. ============================================================================ */ /* ── Top-bar nav links (Dashboard / Games / Players / Goalies) ───────────── */ .saas-nav { display: flex; gap: 2px; margin-left: 6px; } .saas-nav a { font-size: 12px; font-weight: 700; color: var(--tt-fg-3); text-decoration: none; padding: 7px 12px; border-radius: 6px; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; } .saas-nav a:hover { color: var(--tt-fg); } .saas-nav a.on { color: var(--tt-fg); background: var(--tt-soft); } /* Mobile bottom tab bar (phone nav; replaces the inline links under 760px) */ .tt-tabs { display: none; } @media (max-width: 760px) { .saas-nav { display: none; } .saas-body { padding-bottom: 76px; } .tt-tabs { position: fixed; bottom: 0; left: 0; right: 0; z-index: 40; display: flex; border-top: 1px solid var(--tt-line); background: var(--tt-card); padding: 9px 8px 13px; } .tt-tabs a { flex: 1; text-align: center; font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--tt-fg-3); text-decoration: none; } .tt-tabs a.on { color: var(--tt-accent); } .tt-tabs a i { display: block; font-style: normal; font-size: 15px; margin-bottom: 2px; } } /* ── Record hero (dashboard) ─────────────────────────────────────────────── */ .tt-hero { position: relative; overflow: hidden; background: var(--tt-card); border: 1px solid var(--tt-line); border-radius: 14px; padding: 24px 28px 22px; display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center; } .tt-hero::before { content: ''; position: absolute; inset: 0; background: var(--tt-hero-stripes); pointer-events: none; } .tt-hero > * { position: relative; } .tt-eyebrow { font-size: 10px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--tt-eyebrow); } .tt-rec { font-family: var(--tt-bc); font-size: 110px; font-weight: 800; line-height: .92; font-variant-numeric: tabular-nums; margin-top: 4px; display: flex; align-items: baseline; gap: 10px; } .tt-rec .sep { color: var(--tt-rec-sep); font-weight: 500; font-size: 70px; } .tt-rec .w { color: var(--tt-accent); text-shadow: var(--tt-glow-accent); } .tt-rec .l { color: var(--tt-bad); } .tt-rec .t { color: var(--tt-fg-3); } .tt-rec-lbls { display: flex; margin-top: 4px; } .tt-rec-lbls span { font-size: 10px; font-weight: 800; letter-spacing: .2em; color: var(--tt-fg-3); text-transform: uppercase; width: 96px; } .tt-dots { display: flex; gap: 4px; margin-top: 16px; align-items: center; flex-wrap: wrap; } .tt-dot { width: 17px; height: 17px; border-radius: 4px; font-size: 9px; font-weight: 800; display: grid; place-items: center; color: #fff; } .tt-dot.W { background: var(--tt-win); } .tt-dot.L { background: var(--tt-loss); } .tt-dot.T { background: var(--tt-dot-tie); } .tt-dots .cap { font-size: 10px; color: var(--tt-fg-3); font-weight: 700; margin-left: 6px; text-transform: uppercase; letter-spacing: .08em; } .tt-kpis { display: grid; grid-template-columns: 200px 150px 150px; gap: 12px; align-items: stretch; } .tt-kpi { background: var(--tt-kpi-bg); border: 1px solid var(--tt-line); border-radius: 10px; padding: 13px 15px 12px; overflow: hidden; min-width: 0; } .tt-kpi .lbl { font-size: 10px; color: var(--tt-fg-3); text-transform: uppercase; letter-spacing: .08em; font-weight: 800; white-space: nowrap; } .tt-kpi .val { font-family: var(--tt-disp); font-size: var(--kpi-size); font-weight: 800; letter-spacing: var(--kpi-track); margin-top: 5px; font-variant-numeric: tabular-nums; line-height: 1; } .tt-kpi .val.up { color: var(--tt-up); } .tt-kpi .val.dn { color: var(--tt-dn); } .tt-kpi .val.acc { color: var(--tt-accent); } .tt-kpi .micro { font-size: 10.5px; color: var(--tt-fg-3); margin-top: 6px; } .tt-spark { display: flex; align-items: flex-end; gap: 3px; height: 24px; margin-top: 8px; } .tt-spark i { flex: 1 1 6px; max-width: 9px; min-width: 0; border-radius: 2px 2px 0 0; background: color-mix(in oklch, var(--tt-good) 75%, transparent); } .tt-spark i.dn { background: color-mix(in oklch, var(--tt-bad) 68%, transparent); } /* ── Dashboard layout grids ──────────────────────────────────────────────── */ .d-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .d-main { display: grid; grid-template-columns: 420px 1fr; gap: 16px; align-items: start; } /* Blowout guard: grid items default to min-width:auto, so a wide child (the 56-bar points chart, a min-width table) would stretch its card past the track and push the page sideways. Force them to shrink + scroll inside. */ .d-duo > *, .d-main > *, .pp-grid > *, .bx-main > *, .gm-main > *, .tt-hero > * { min-width: 0; } /* Games card stretches to the skater table's height, and the stripe rows share the slack, so the list's last row + footer sit flush with the bottom of the player table beside it. When the list is expanded past the table's height, align-self keeps the table card at its own height. */ .d-main > .saas-card:first-child { align-self: stretch; display: flex; flex-direction: column; } .d-main #gameRows { flex: 1; display: flex; flex-direction: column; } .d-main #gameRows .d-game { flex: 0 0 auto; } /* fixed height: rows stay aligned with the skater table, no drift */ /* Footer slightly shorter than a row so the games card never out-grows the skater table; the card stretches to the skater height and pins this footer to the bottom, keeping both card bottoms flush. */ .d-main .saas-viewall { padding-top: 8px; padding-bottom: 8px; } /* ── Line / pairing rows with GF% bar ────────────────────────────────────── */ .d-line { display: grid; grid-template-columns: auto 1fr 150px auto; gap: 14px; padding: 11px 20px; border-bottom: 1px solid var(--tt-row-line); align-items: center; } .d-line:last-child { border-bottom: none; } .d-line .chips { display: flex; gap: 4px; } .tt-jersey { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 22px; padding: 0 4px; background: var(--tt-soft); border-radius: 5px; font-family: var(--tt-disp); font-size: var(--jersey-size); font-weight: 800; color: var(--tt-jersey-c, var(--jersey-c)); font-variant-numeric: tabular-nums; } .d-line.r1 .tt-jersey { background: var(--jersey1-bg); color: var(--jersey1-c); } .d-line .nm { font-size: 12.5px; font-weight: 600; color: var(--tt-fg-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .d-gfbar { height: 6px; border-radius: 3px; background: color-mix(in oklch, var(--tt-bad) 26%, transparent); position: relative; overflow: hidden; } .d-gfbar i { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: var(--tt-accent); box-shadow: var(--tt-bar-glow); } .d-gfcap { font-size: 9px; color: var(--tt-fg-3); font-weight: 700; letter-spacing: .05em; margin-top: 4px; text-transform: uppercase; white-space: nowrap; } .d-line .pct { font-family: var(--tt-disp); font-size: var(--lpct-size); font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; } .d-line .pct small { font-size: 11px; color: var(--tt-fg-3); font-family: 'Manrope', ui-sans-serif, sans-serif; font-weight: 600; margin-left: 5px; } .d-line .pct small.up { color: var(--tt-up); } .d-line .pct small.dn { color: var(--tt-dn); } /* ── Recent-games stripe rows (dashboard) ────────────────────────────────── */ .d-game { display: grid; grid-template-columns: 76px 1fr auto; gap: 12px; align-items: center; padding: 0 20px 0 17px; min-height: 38px; border-bottom: 1px solid var(--tt-row-line); border-left: 3px solid transparent; cursor: pointer; text-decoration: none; color: inherit; } .d-game-hd { display: grid; grid-template-columns: 76px 1fr auto; gap: 12px; align-items: center; padding: 8px 20px; border-bottom: 1px solid var(--tt-line); } .d-game-hd span { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--tt-fg-3); white-space: nowrap; } .d-game-hd span:last-child { text-align: right; } .d-game:last-of-type { border-bottom: none; } .d-game:hover { background: color-mix(in oklch, var(--tt-accent) 5%, transparent); } .d-game.W { border-left-color: var(--tt-win); } .d-game.L { border-left-color: var(--tt-loss); } .d-game.T { border-left-color: var(--tt-dot-tie); } .d-game .dt { font-size: 11px; color: var(--tt-fg-3); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } .d-game .op { font-size: 12.5px; font-weight: 600; display: flex; align-items: center; gap: 7px; min-width: 0; } .d-game .op .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tt-chip { font-size: 8.5px; font-weight: 800; letter-spacing: .06em; padding: 1px 5px; border-radius: 3px; background: var(--tt-soft); color: var(--tt-fg-3); text-transform: uppercase; flex: none; } .d-game .sc { font-family: var(--tt-disp); font-size: var(--gsc-size); font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; } .d-game .sc .sep, .d-game .sc .them { color: var(--tt-fg-3); font-weight: 600; } /* ── Dashboard stat tables (skaters) ─────────────────────────────────────── */ .d-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 12.5px; } .d-table th { text-align: left; font-weight: 700; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--tt-fg-3); padding: 8px 10px; border-bottom: 1px solid var(--tt-line); white-space: nowrap; cursor: default; } .d-table th.sorted { color: var(--tt-fg); } .d-table th.sorted::after { content: ' ▼'; font-size: 9px; color: var(--tt-accent); } .d-table th.sorted.asc::after { content: ' ▲'; } .d-table th.num, .d-table td.num { text-align: right; } .d-table td { padding: 0 10px; height: 38px; border-bottom: 1px solid var(--tt-row-line); } .d-table tr:last-child td { border-bottom: none; } .d-table td.name { font-weight: 700; white-space: nowrap; } .d-table tr { cursor: pointer; } .d-table tr:hover td { background: color-mix(in oklch, var(--tt-accent) 5%, transparent); } .d-table tr.hot td { background: color-mix(in oklch, var(--tt-accent) 7%, transparent); } .d-table tr.goalie td { background: color-mix(in oklch, var(--tt-goalie) 9%, transparent); } .d-table tr.ap td { color: var(--tt-fg-3); font-style: italic; } .d-table td.name .tt-jersey { margin-right: 9px; } .d-table td.pts { font-weight: 800; color: var(--tt-accent); } .d-table .pos3 { color: var(--tt-fg-3); font-size: 11px; font-weight: 700; } .tt-up-c { color: var(--tt-up); } .tt-dn-c { color: var(--tt-dn); } /* ── Special-teams panel rows ────────────────────────────────────────────── */ .d-st { padding: 16px 20px 18px; display: flex; flex-direction: column; gap: 16px; } .d-st-row .top { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; } .d-st-row .k { font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--tt-fg-3); white-space: nowrap; } .d-st-row .v { font-family: var(--tt-disp); font-size: var(--stv-size); font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; letter-spacing: -0.01em; } .d-st-row .bar { height: 9px; border-radius: 5px; background: var(--tt-soft); margin-top: 9px; position: relative; overflow: hidden; } .d-st-row .bar i { position: absolute; inset: 0 auto 0 0; border-radius: 5px; } .d-st-row .bar i.pp { background: var(--tt-accent); box-shadow: var(--tt-bar-glow); } .d-st-row .bar i.pk { background: #2bb673; } .d-st-row .cap { font-size: 11px; color: var(--tt-fg-3); margin-top: 6px; } /* ── Dashboard goaltender rows ───────────────────────────────────────────── */ .d-goalie { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; row-gap: 9px; align-items: center; padding: 13px 20px; border-bottom: 1px solid var(--tt-row-line); cursor: pointer; } .d-goalie:last-child { border-bottom: none; } .d-goalie:hover { background: color-mix(in oklch, var(--tt-goalie) 5%, transparent); } .d-goalie .j { grid-row: 1 / 3; align-self: center; width: 46px; height: 46px; border-radius: 10px; flex: none; background: color-mix(in oklch, var(--tt-goalie) 15%, var(--tt-soft)); display: grid; place-items: center; font-family: var(--tt-disp); font-size: 18px; font-weight: 800; color: var(--tt-goalie); font-variant-numeric: tabular-nums; } .d-goalie > div:not(.figs) { grid-column: 2; grid-row: 1; min-width: 0; } .d-goalie .nm { font-size: 14px; font-weight: 700; } .d-goalie .sub { font-size: 11px; color: var(--tt-fg-3); margin-top: 1px; } .d-goalie .figs { grid-column: 2; grid-row: 2; margin-left: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px 6px; } .d-goalie .figs > div { text-align: center; } .d-goalie .figs .l { font-size: 9px; color: var(--tt-fg-3); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-top: 1px; } .d-goalie .figs .v { font-family: var(--tt-disp); font-size: var(--gfig-size); font-weight: 800; font-variant-numeric: tabular-nums; } /* ── Strength chips (PP / SH / EN / PS) on stripe rows ───────────────────── */ .tt-str { display: inline-block; font-size: 9px; font-weight: 800; letter-spacing: .06em; padding: 1px 5px; border-radius: 3px; margin-left: 7px; vertical-align: 1px; text-transform: uppercase; } .tt-str.PP { background: color-mix(in oklch, var(--tt-good) 16%, transparent); color: var(--tt-up); } .tt-str.SH { background: color-mix(in oklch, var(--tt-warn) 18%, transparent); color: var(--tt-warn); } .tt-str.EN { background: color-mix(in oklch, var(--tt-bad) 16%, transparent); color: var(--tt-dn); } .tt-str.PS { background: color-mix(in oklch, var(--tt-accent) 16%, transparent); color: var(--tt-accent); } /* ── Box score: nav row ──────────────────────────────────────────────────── */ .bx-nav { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--tt-card); border: 1px solid var(--tt-line); border-radius: 12px; } .bx-nav .back { font-size: 12px; font-weight: 700; color: var(--tt-accent); text-decoration: none; padding: 6px 10px; border-radius: 6px; white-space: nowrap; } .bx-nav .back:hover { background: var(--tt-soft); } .bx-nav .pick { flex: 1; max-width: 420px; border: 1px solid var(--tt-line); background: var(--tt-bg); border-radius: 7px; padding: 7px 12px; font-size: 12.5px; font-weight: 600; color: var(--tt-fg); font-family: inherit; } .bx-nav .spacer { flex: 1; } /* ── Box score: hero + period grid ───────────────────────────────────────── */ .bx-hero { padding: 20px 26px 16px; display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: center; } .bx-team { display: flex; align-items: center; gap: 14px; min-width: 0; } .bx-team.away { flex-direction: row-reverse; text-align: right; } .bx-team .crest { width: 54px; height: 54px; border-radius: 11px; background: var(--tt-soft); display: grid; place-items: center; font-weight: 800; font-size: 16px; color: var(--tt-fg-3); overflow: hidden; flex: none; } .bx-team .crest img { width: 100%; height: 100%; object-fit: contain; } .bx-team h2 { margin: 0; font-size: 16px; font-weight: 800; letter-spacing: -0.01em; } .bx-team .rec { font-size: 11.5px; color: var(--tt-fg-3); margin-top: 2px; } .bx-score { text-align: center; } .bx-score .fin { font-size: 10px; text-transform: uppercase; letter-spacing: .22em; font-weight: 800; color: var(--tt-fg-3); } .bx-score .fin.rt-live { color: var(--tt-accent); } .bx-score .nums { font-family: var(--tt-bc); font-size: 74px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; margin: 4px 0 2px; display: flex; gap: 14px; align-items: baseline; justify-content: center; } .bx-score .nums .sep { color: var(--tt-fg-3); font-weight: 500; font-size: 44px; } .bx-score .nums b.win { color: var(--tt-accent); text-shadow: var(--tt-glow-accent); } .bx-score .nums .them { color: var(--tt-fg-3); font-weight: 600; } .bx-score .date { font-size: 11.5px; color: var(--tt-fg-3); } .bx-periods { display: grid; grid-template-columns: 1fr repeat(4, 64px); align-items: center; padding: 0 26px 16px; font-variant-numeric: tabular-nums; max-width: 480px; margin: 0 auto; width: 100%; } .bx-periods .h { font-size: 9.5px; font-weight: 800; color: var(--tt-fg-3); text-transform: uppercase; letter-spacing: .12em; text-align: center; padding-bottom: 6px; } .bx-periods .h.t { text-align: left; } .bx-periods .nm { font-size: 12px; font-weight: 700; padding: 6px 0; border-top: 1px solid var(--tt-row-line); } .bx-periods .nm.us { color: var(--tt-accent); } .bx-periods .nm.them { color: var(--tt-fg-3); } .bx-periods .v { font-size: 13.5px; font-weight: 700; text-align: center; padding: 6px 0; border-top: 1px solid var(--tt-row-line); } .bx-periods .v.tot { font-weight: 800; } /* ── Box score / game manager: stripe rows ───────────────────────────────── */ .bx-main { display: grid; grid-template-columns: 1.5fr 1fr; gap: 14px; align-items: start; } .bx-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; } .bx-row { display: grid; grid-template-columns: 84px 1fr auto; gap: 12px; align-items: center; padding: 9px 20px 9px 17px; border-bottom: 1px solid var(--tt-row-line); border-left: 3px solid transparent; } .bx-row:last-child { border-bottom: none; } .bx-row.us { border-left-color: var(--tt-accent); } .bx-row.them { border-left-color: var(--tt-bad); } .bx-row .t { display: flex; gap: 5px; align-items: baseline; font-size: 11px; color: var(--tt-fg-3); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } .bx-row .who { font-size: 13px; font-weight: 700; min-width: 0; } .bx-row .who .h { color: var(--tt-fg-3); font-weight: 500; font-size: 11.5px; } .bx-row .who .assist-line, .bx-row .who .infraction-line { display: block; margin-top: 1px; } .bx-row .val { font-family: var(--tt-bc); font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; } .bx-row .val .mut { color: var(--tt-fg-3); font-weight: 600; } .bx-row .val b.us-d { color: var(--tt-accent); font-weight: 800; } .bx-row .val b.them-d { color: var(--tt-bad); font-weight: 800; } .bx-row .val b.mut-d { color: var(--tt-fg-3); font-weight: 600; } .bx-row .val small { font-size: 10px; color: var(--tt-fg-3); font-family: 'Manrope', ui-sans-serif, sans-serif; font-weight: 700; letter-spacing: .06em; margin-left: 4px; } /* ── Box score: this-game special teams ──────────────────────────────────── */ .bx-st { padding: 14px 20px 16px; display: flex; flex-direction: column; gap: 14px; } .bx-st-row .top { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; } .bx-st-row .k { font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--tt-fg-3); white-space: nowrap; } .bx-st-row .v { font-family: var(--tt-bc); font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; } .bx-st-row .cap { font-size: 11px; color: var(--tt-fg-3); margin-top: 3px; } /* ── Box score: lineup chips ─────────────────────────────────────────────── */ .bx-lineup { padding: 6px 20px 18px; } .bx-lineup .lbl { font-size: 10px; color: var(--tt-fg-3); text-transform: uppercase; letter-spacing: .14em; font-weight: 800; margin: 12px 0 7px; } .bx-lineup .chips { display: flex; flex-wrap: wrap; gap: 7px; } .bx-jc { display: inline-flex; align-items: center; gap: 7px; background: var(--tt-soft); border: 1px solid var(--tt-line); border-radius: 7px; padding: 5px 10px 5px 6px; font-size: 11.5px; font-weight: 700; white-space: nowrap; text-decoration: none; color: inherit; } .bx-jc b { font-family: var(--tt-bc); font-size: 14px; font-weight: 800; color: var(--tt-accent); font-variant-numeric: tabular-nums; min-width: 18px; text-align: center; } .bx-jc.goalie b { color: var(--tt-goalie); } .bx-jc.ap { border-style: dashed; } .bx-jc .tag { font-size: 9px; font-weight: 800; letter-spacing: .06em; color: var(--tt-fg-3); text-transform: uppercase; } /* ── Player profile ──────────────────────────────────────────────────────── */ .pp-back { font-size: 12px; font-weight: 700; color: var(--tt-accent); text-decoration: none; } .pp-hero { background: var(--tt-card); border: 1px solid var(--tt-line); border-radius: 14px; padding: 20px 26px; display: flex; align-items: center; gap: 20px; } .pp-portrait { width: 92px; height: 92px; border-radius: 14px; background: var(--tt-soft); display: grid; place-items: center; font-family: var(--tt-bc); font-size: 42px; font-weight: 800; color: var(--tt-accent); position: relative; overflow: hidden; font-variant-numeric: tabular-nums; flex: none; } .pp-portrait::after { content: ''; position: absolute; inset: auto -14px -14px auto; width: 52px; height: 52px; background: var(--tt-accent); opacity: .1; border-radius: 50%; } .pp-portrait.goalie { color: var(--tt-goalie); } .pp-portrait.goalie::after { background: var(--tt-goalie); } .pp-hero h2 { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -0.018em; } .pp-hero .meta { display: flex; gap: 12px; font-size: 12px; color: var(--tt-fg-3); margin-top: 5px; flex-wrap: wrap; } .pp-hero .meta b { color: var(--tt-fg-2); font-weight: 700; } .pp-rank { display: inline-block; margin-top: 9px; font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--tt-accent); background: color-mix(in oklch, var(--tt-accent) 14%, transparent); border-radius: 4px; padding: 3px 8px; } .pp-strip { margin-left: auto; display: flex; gap: 26px; } .pp-strip > div { text-align: right; } .pp-strip .l { font-size: 9.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--tt-fg-3); font-weight: 800; white-space: nowrap; } .pp-strip .v { font-family: var(--tt-disp); font-size: var(--kpi-size); font-weight: 800; font-variant-numeric: tabular-nums; margin-top: 3px; line-height: 1; letter-spacing: var(--kpi-track); } .pp-strip .v.acc { color: var(--tt-accent); } .pp-strip .v.up { color: var(--tt-up); } .pp-strip .v.dn { color: var(--tt-dn); } .pp-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 14px; align-items: stretch; } /* Points-by-game stacked bars */ .pp-chart { display: flex; flex-direction: column; height: 176px; padding: 18px 16px 10px; } .pp-plot { flex: 1; display: flex; gap: 3px; align-items: flex-end; min-height: 0; } .pp-cb { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; } .pp-cb .stack { display: flex; flex-direction: column-reverse; gap: 2px; align-items: stretch; } .pp-cb .g, .pp-cb .a { border-radius: 2.5px; display: block; } .pp-cb .g { background: var(--tt-accent); box-shadow: var(--tt-bar-glow); } .pp-cb .a { background: var(--tt-a-bar); } .pp-axis { display: flex; gap: 3px; border-top: 1px solid var(--tt-line); padding-top: 7px; } .pp-axis .lab { flex: 1 1 0; min-width: 0; text-align: center; font-size: 8.5px; font-weight: 700; letter-spacing: .04em; color: var(--tt-fg-3); text-transform: uppercase; white-space: nowrap; } .pp-legend { display: flex; gap: 14px; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tt-fg-3); } .pp-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; } .pp-legend i.g { background: var(--tt-accent); } .pp-legend i.a { background: var(--tt-a-bar); } /* Plus / minus two-way readout */ .pp-pm { padding: 16px 20px 18px; display: flex; gap: 22px; } .pp-pm > div { flex: 1; } .pp-pm .l { font-size: 10px; color: var(--tt-fg-3); text-transform: uppercase; letter-spacing: .12em; font-weight: 800; white-space: nowrap; } .pp-pm .v { font-family: var(--tt-disp); font-size: var(--pm-size, 38px); font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; margin-top: 6px; letter-spacing: var(--kpi-track); } .pp-pm .v.up { color: var(--tt-up); } .pp-pm .v.dn { color: var(--tt-dn); } .pp-pm .v.flat { color: var(--tt-fg-3); } .pp-pm .cap { font-size: 11px; color: var(--tt-fg-3); margin-top: 7px; line-height: 1.45; } /* Best-linemate callout */ .pp-mate { display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center; padding: 16px 22px; background: color-mix(in oklch, var(--tt-accent) 7%, var(--tt-card)); border: 1px solid color-mix(in oklch, var(--tt-accent) 26%, var(--tt-line)); border-radius: 12px; } .pp-mate .chip { width: 60px; height: 60px; border-radius: 11px; background: var(--tt-soft); display: grid; place-items: center; font-family: var(--tt-bc); font-size: 27px; font-weight: 800; color: var(--tt-accent); font-variant-numeric: tabular-nums; } .pp-mate h4 { margin: 0; font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--tt-accent); } .pp-mate .nm { font-size: 18px; font-weight: 800; letter-spacing: -0.012em; margin-top: 3px; } .pp-mate .nm small { font-size: 11px; color: var(--tt-fg-3); font-weight: 600; margin-left: 6px; } .pp-mate .desc { font-size: 12px; color: var(--tt-fg-2); margin-top: 3px; } .pp-mate .figs { display: flex; gap: 22px; } .pp-mate .figs > div { text-align: right; } .pp-mate .figs .l { font-size: 9.5px; color: var(--tt-fg-3); text-transform: uppercase; letter-spacing: .08em; font-weight: 800; } .pp-mate .figs .v { font-family: var(--tt-bc); font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; margin-top: 2px; } .pp-mate .figs .v.acc { color: var(--tt-accent); } .pp-mate .figs .v.mut { color: var(--tt-fg-3); } .pp-mate .figs .v.up { color: var(--tt-up); } /* Hot lines including the player */ .pp-line { display: grid; grid-template-columns: auto 1fr 150px auto; gap: 14px; padding: 10px 20px; border-bottom: 1px solid var(--tt-row-line); align-items: center; } .pp-line:last-child { border-bottom: none; } .pp-line .chips { display: flex; gap: 4px; } .pp-jersey { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 22px; padding: 0 4px; background: var(--tt-soft); border-radius: 5px; font-family: var(--tt-bc); font-size: 13px; font-weight: 800; color: var(--tt-accent); font-variant-numeric: tabular-nums; } .pp-jersey.me { background: var(--tt-accent); color: var(--tt-on-accent); } .pp-line .nm2 { font-size: 12.5px; font-weight: 600; color: var(--tt-fg-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pp-gfbar { height: 6px; border-radius: 3px; background: color-mix(in oklch, var(--tt-bad) 26%, transparent); position: relative; overflow: hidden; } .pp-gfbar i { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: var(--tt-accent); box-shadow: var(--tt-bar-glow); } .pp-gfcap { font-size: 9px; color: var(--tt-fg-3); font-weight: 700; letter-spacing: .05em; margin-top: 4px; text-transform: uppercase; white-space: nowrap; } .pp-line .pct { font-family: var(--tt-bc); font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; } .pp-line .pct small { font-size: 11px; color: var(--tt-fg-3); font-family: 'Manrope', ui-sans-serif, sans-serif; font-weight: 600; margin-left: 5px; } /* Scoring-breakdown fact grid */ .pp-facts { display: grid; grid-template-columns: 1fr 1fr; } .pp-fact { padding: 13px 20px 12px; border-bottom: 1px solid var(--tt-row-line); } .pp-fact:nth-child(odd) { border-right: 1px solid var(--tt-row-line); } .pp-fact:nth-last-child(-n+2) { border-bottom: none; } .pp-fact .l { font-size: 9.5px; color: var(--tt-fg-3); text-transform: uppercase; letter-spacing: .1em; font-weight: 800; white-space: nowrap; } .pp-fact .v { font-family: var(--tt-disp); font-size: var(--fact-size, 19px); font-weight: 800; font-variant-numeric: tabular-nums; margin-top: 4px; line-height: 1; letter-spacing: var(--kpi-track); } .pp-fact .v.acc { color: var(--tt-accent); } .pp-fact .v small { font-size: 11px; color: var(--tt-fg-3); font-family: 'Manrope', ui-sans-serif, sans-serif; font-weight: 600; margin-left: 4px; } /* Game-log stripe rows */ .pp-log-hd { display: grid; grid-template-columns: 64px 1fr 70px repeat(6, 44px); gap: 12px; padding: 8px 20px; border-bottom: 1px solid var(--tt-line); } .pp-log-hd span { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--tt-fg-3); white-space: nowrap; } .pp-log-hd span.num { text-align: right; } .pp-log-row { display: grid; grid-template-columns: 64px 1fr 70px repeat(6, 44px); gap: 12px; align-items: center; padding: 0 20px 0 17px; min-height: 36px; border-bottom: 1px solid var(--tt-row-line); border-left: 3px solid transparent; font-variant-numeric: tabular-nums; cursor: pointer; text-decoration: none; color: inherit; } .pp-log-row:last-child { border-bottom: none; } .pp-log-row:hover { background: color-mix(in oklch, var(--tt-accent) 5%, transparent); } .pp-log-row.W { border-left-color: var(--tt-win); } .pp-log-row.L { border-left-color: var(--tt-loss); } .pp-log-row.T { border-left-color: var(--tt-dot-tie); } .pp-log-row .dt { font-size: 11px; color: var(--tt-fg-3); font-weight: 700; } .pp-log-row .op { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pp-log-row .sc { font-size: 12px; font-weight: 700; } .pp-log-row .sc .them { color: var(--tt-fg-3); } .pp-log-row .num { text-align: right; font-size: 12.5px; font-weight: 600; } .pp-log-row .num.p { font-weight: 800; } /* ── Game manager: editing badge, form, segments, tiles, rows ────────────── */ .gm-editing { display: inline-flex; align-items: center; gap: 7px; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--tt-warn); background: color-mix(in oklch, var(--tt-warn) 16%, transparent); border-radius: 4px; padding: 5px 10px; white-space: nowrap; } .gm-editing::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--tt-warn); } .gm-main { display: grid; grid-template-columns: 1.5fr 1fr; gap: 14px; align-items: start; } .gm-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; } .gm-form { padding: 16px 20px 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; } .gm-f { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .gm-f.w2 { grid-column: span 2; } .gm-f label { font-size: 9.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--tt-fg-3); } .gm-in { border: 1px solid var(--tt-line); background: var(--tt-bg); border-radius: 7px; padding: 8px 11px; font-size: 12.5px; font-weight: 600; color: var(--tt-fg); font-family: inherit; width: 100%; font-variant-numeric: tabular-nums; min-height: 35px; box-sizing: border-box; } select.gm-in { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--tt-fg-3) 50%), linear-gradient(135deg, var(--tt-fg-3) 50%, transparent 50%); background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 26px; } .gm-in:focus { outline: none; border-color: var(--tt-accent); } .gm-in.ro, .gm-in[readonly], .gm-in:disabled { background: var(--tt-soft); border-style: dashed; color: var(--tt-fg-2); } .gm-seg { display: flex; border: 1px solid var(--tt-line); border-radius: 7px; overflow: hidden; background: var(--tt-bg); } .gm-seg span, .gm-seg button { flex: 1; text-align: center; font-size: 11px; font-weight: 700; padding: 8px 4px; color: var(--tt-fg-3); border: none; border-right: 1px solid var(--tt-line); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; background: transparent; font-family: inherit; cursor: pointer; min-height: 33px; } .gm-seg span:last-child, .gm-seg button:last-child { border-right: none; } .gm-seg .on { background: var(--tt-accent); color: var(--tt-on-accent); font-weight: 800; } .gm-pillrow { display: flex; gap: 7px; flex-wrap: wrap; } .gm-pill { font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; border-radius: 99px; padding: 6px 13px; border: 1px solid var(--tt-line); color: var(--tt-fg-3); background: var(--tt-bg); cursor: pointer; white-space: nowrap; font-family: inherit; } .gm-pill.on { background: var(--tt-accent); border-color: var(--tt-accent); color: var(--tt-on-accent); box-shadow: 0 1px 2px rgba(0,0,0,.1); } .gm-pill.on.them { background: var(--tt-bad); border-color: var(--tt-bad); color: #fff; } /* Editable stripe rows (goals / penalties lists) */ .gm-row { display: grid; grid-template-columns: 68px 1fr auto auto; gap: 12px; align-items: center; padding: 8px 14px 8px 17px; border-bottom: 1px solid var(--tt-row-line); border-left: 3px solid transparent; } .gm-row:last-of-type { border-bottom: none; } .gm-row.us { border-left-color: var(--tt-accent); } .gm-row.them { border-left-color: var(--tt-bad); } .gm-row:hover { background: color-mix(in oklch, var(--tt-accent) 5%, transparent); } .gm-row .t { display: flex; gap: 5px; align-items: baseline; font-size: 11px; color: var(--tt-fg-3); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } .gm-pl { display: flex; gap: 6px; } .gm-pl .gm-in { width: 64px; text-align: center; padding-left: 6px; padding-right: 6px; } .gm-row .who { font-size: 13px; font-weight: 700; min-width: 0; } .gm-row .who .h { color: var(--tt-fg-3); font-weight: 500; font-size: 11.5px; } .gm-row .who .assist-line, .gm-row .who .infraction-line { display: block; margin-top: 1px; } .gm-row .who .ovr { color: var(--tt-warn); font-weight: 800; margin-left: 3px; } .gm-row .val { font-family: var(--tt-bc); font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; } .gm-row .val .mut { color: var(--tt-fg-3); font-weight: 600; } .gm-row .val small { font-size: 10px; color: var(--tt-fg-3); font-family: 'Manrope', ui-sans-serif, sans-serif; font-weight: 700; letter-spacing: .06em; margin-left: 4px; } .gm-acts { display: flex; align-items: center; gap: 2px; } .gm-acts a, .gm-acts button { font-size: 11px; font-weight: 700; color: var(--tt-accent); text-decoration: none; padding: 4px 8px; border-radius: 5px; background: none; border: none; font-family: inherit; cursor: pointer; } .gm-acts a:hover, .gm-acts button:hover { background: var(--tt-soft); } .gm-add { padding: 11px 20px; display: flex; align-items: center; gap: 12px; } .gm-foot-hint { font-size: 11px; color: var(--tt-fg-3); font-style: italic; } /* Gamesheet panel */ .gm-sheet { padding: 16px 20px 18px; display: flex; flex-direction: column; gap: 12px; } .gm-file { display: flex; align-items: center; gap: 12px; border: 1px solid var(--tt-line); background: var(--tt-bg); border-radius: 8px; padding: 11px 14px; } .gm-file .doc { width: 34px; height: 40px; border-radius: 5px; background: var(--tt-soft); border: 1px solid var(--tt-line); display: grid; place-items: center; font-size: 8.5px; font-weight: 800; letter-spacing: .06em; color: var(--tt-fg-3); flex: none; } .gm-file .nm { font-size: 12.5px; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gm-file .st { font-size: 11px; color: var(--tt-fg-3); margin-top: 2px; } .gm-file .st b { color: var(--tt-up); font-weight: 800; } .gm-file .st b.warn { color: var(--tt-warn); } .gm-sheet .row { display: flex; gap: 8px; flex-wrap: wrap; } .gm-hint { font-size: 11px; color: var(--tt-fg-3); line-height: 1.5; } .gm-hint .star { color: var(--tt-warn); font-weight: 800; } /* Jersey-tile lineup picker */ .gm-tiles-wrap { padding: 14px 20px 18px; } .gm-tiles-lbl { font-size: 10px; color: var(--tt-fg-3); text-transform: uppercase; letter-spacing: .14em; font-weight: 800; margin: 10px 0 7px; } .gm-tiles-lbl:first-child { margin-top: 0; } .gm-tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; } .gm-tile { border: 1px solid var(--tt-line); background: var(--tt-soft); border-radius: 8px; padding: 7px 4px 6px; text-align: center; cursor: pointer; user-select: none; transition: background 0.08s, transform 0.04s; font-family: inherit; } .gm-tile:active { transform: translateY(1px); } .gm-tile b { display: block; font-family: var(--tt-bc); font-size: 19px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; color: var(--tt-fg-3); } .gm-tile span { display: block; font-size: 9px; font-weight: 700; color: var(--tt-fg-3); margin-top: 3px; letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gm-tile.on { background: var(--tt-accent); border-color: var(--tt-accent); } .gm-tile.on b, .gm-tile.on span { color: var(--tt-on-accent); } /* goalie tiles use the same blue as regular players (.gm-tile.on) for clarity in editors */ .gm-tiles-cap { font-size: 11px; color: var(--tt-fg-3); margin-top: 12px; } .gm-aps { margin-top: 12px; font-size: 12px; font-weight: 700; color: var(--tt-fg-2); cursor: pointer; } .gm-aps .pm { color: var(--tt-accent); font-weight: 800; margin-right: 6px; } /* ── Modals (add/edit goal, edit penalty) ────────────────────────────────── */ .gmod-card { width: 100%; max-width: 520px; background: var(--tt-card); border: 1px solid var(--tt-line); border-radius: 12px; overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,0.16); } .gmod-hd { padding: 14px 20px; border-bottom: 1px solid var(--tt-line); display: flex; align-items: center; justify-content: space-between; gap: 12px; } .gmod-hd h3 { margin: 0; font-family: var(--tt-disp); font-size: var(--ph-size); font-weight: var(--ph-weight); letter-spacing: var(--ph-track); text-transform: var(--ph-case); } .gmod-hd .x { color: var(--tt-fg-3); font-size: 16px; text-decoration: none; font-weight: 600; padding: 2px 6px; background: none; border: none; cursor: pointer; font-family: inherit; } .gmod-bd { padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 14px; } .gmod-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; } /* Pairs that stay side-by-side even on phones (beat the 520px 1-col collapse). */ .gmod-grid2.gmod-pair { grid-template-columns: 1fr 1fr; } .gmod-grid2.gmod-pair-num { grid-template-columns: 1.6fr 1fr; } .gmod-grid2.gmod-pair-jersey { grid-template-columns: 1fr 76px; } .gmod-grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px 16px; } .gmod-ft { padding: 13px 20px; border-top: 1px solid var(--tt-line); display: flex; justify-content: flex-end; gap: 8px; } .gmod .gm-tiles, .gmod-bd .gm-tiles { grid-template-columns: repeat(6, 1fr); } .gmod-onice-cap { font-size: 11px; color: var(--tt-fg-3); display: flex; justify-content: space-between; gap: 10px; } .gmod-onice-cap b { color: var(--tt-accent); font-weight: 800; font-variant-numeric: tabular-nums; } .gmod-note { font-size: 11px; color: var(--tt-fg-3); line-height: 1.5; padding: 9px 12px; background: color-mix(in oklch, var(--tt-warn) 9%, transparent); border-radius: 7px; } .gmod-note b { color: var(--tt-warn); font-weight: 800; } .gmod-del { margin-right: auto; font-size: 11.5px; font-weight: 700; color: var(--tt-bad); text-decoration: none; padding: 8px 4px; letter-spacing: .04em; text-transform: uppercase; align-self: center; background: none; border: none; cursor: pointer; font-family: inherit; } /* ── Redesign responsive ─────────────────────────────────────────────────── */ @media (max-width: 1020px) { .d-main { grid-template-columns: 1fr; } .bx-main, .gm-main { grid-template-columns: 1fr; } /* Stack the record hero here (not just at 760): in the 760-1020 band the fixed-width KPI tiles squeeze the W-L-T number into a sliver and it gets clipped (e.g. phones in landscape). Stacking puts the KPIs below it. */ .tt-hero { grid-template-columns: 1fr; gap: 16px; padding: 18px; } .tt-kpis { grid-template-columns: 1.3fr 1fr 1fr; gap: 10px; } .tt-kpi { background: var(--tt-card); } /* Let the topbar wrap instead of pushing the user pill off the right edge (sideways scroll) when the full nav is still showing in this band. */ .saas-topbar { flex-wrap: wrap; } .saas-topbar #userPillSlot { margin-left: auto; } } @media (max-width: 760px) { .d-duo, .pp-grid { grid-template-columns: 1fr; } .bx-hero { grid-template-columns: 1fr; gap: 10px; padding: 16px 16px 12px; } .bx-team.away { flex-direction: row; text-align: left; } .bx-score { order: -1; } .bx-score .nums { font-size: 54px; } .pp-strip { flex-basis: 100%; margin-left: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px 8px; padding-top: 14px; border-top: 1px solid var(--tt-line); } .pp-strip > div { text-align: left; } .pp-hero { flex-wrap: wrap; padding: 16px; gap: 14px; } .pp-hero > div:not(.pp-portrait):not(.pp-strip) { flex: 1 1 0; min-width: 0; } .pp-hero h2 { overflow-wrap: anywhere; } .gm-form, .gmod-grid3 { grid-template-columns: 1fr 1fr; } .gm-f.w2 { grid-column: span 2; } .gm-tiles { grid-template-columns: repeat(4, 1fr); } .gmod .gm-tiles, .gmod-bd .gm-tiles { grid-template-columns: repeat(4, 1fr); } .pp-log-hd, .pp-log-row { grid-template-columns: 52px 1fr 56px repeat(3, 30px); gap: 8px; } /* Phones keep G · A · P; PIM and the two +/- columns return above 760px. */ .pp-log-hd > :nth-child(n+7), .pp-log-row > .num:nth-child(n+7) { display: none; } } @media (max-width: 520px) { .tt-hero { text-align: center; } .tt-rec { font-size: 68px; justify-content: center; gap: 7px; } .tt-rec .sep { font-size: 42px; } .tt-rec-lbls { justify-content: center; } .tt-rec-lbls span { width: 72px; } .tt-dots { justify-content: center; margin-top: 12px; } .tt-dot { width: 15px; height: 15px; } .tt-kpis { text-align: left; } .tt-kpi .val { font-size: calc(var(--kpi-size) - 6px); } .tt-spark { height: 18px; } .tt-spark i { max-width: 6px; } .d-line { grid-template-columns: auto 1fr auto; padding: 10px 16px; } .d-line .nm { display: none; } .bx-score .nums { font-size: 44px; } .bx-periods { grid-template-columns: 1fr repeat(4, 44px); padding: 0 16px 14px; } /* Keep game-info form 2-col even at 520px — avoids 700px stack of fields. Modal grids (gmod-grid3/2) stay 1-col since they're inside a narrower card. */ .gmod-grid3, .gmod-grid2 { grid-template-columns: 1fr; } .gm-form { grid-template-columns: 1fr 1fr; } .gm-f.w2, .gm-f.w3 { grid-column: 1 / -1; } /* Keep gm-row 4-col so the Edit button stays inline (no 2-row wrap). */ .bx-row { grid-template-columns: 64px 1fr auto; } .gm-row { grid-template-columns: 52px 1fr auto auto; } } /* ── Game manager: R4 full-relayout extras (2026-06-12) ──────────────────── */ /* Small/ghost button variants for panel-embedded actions. */ .saas-btn.sm { font-size: 10.5px; padding: 6px 11px; } .saas-btn.ghost { background: transparent; } .saas-btn:disabled { opacity: .45; cursor: not-allowed; } /* Editable stripe rows: whole row opens the edit modal in edit mode. */ .gm-row.editable { cursor: pointer; } .gm-row .val b { font-weight: 600; color: var(--tt-fg-3); } .gm-row .val b.lead-us { color: var(--tt-accent); font-weight: 800; } .gm-row .val b.lead-them { color: var(--tt-bad); font-weight: 800; } /* Strength / EN chips on goal rows. */ .gm-chip { display: inline-block; font-size: 9px; font-weight: 800; letter-spacing: .06em; padding: 1px 5px; border-radius: 3px; margin-left: 7px; vertical-align: 1px; text-transform: uppercase; } .gm-chip.PP { background: color-mix(in oklch, var(--tt-good) 16%, transparent); color: var(--tt-up); } .gm-chip.SH { background: color-mix(in oklch, var(--tt-warn) 18%, transparent); color: var(--tt-warn); } .gm-chip.EN { background: color-mix(in oklch, var(--tt-bad) 16%, transparent); color: var(--tt-dn); } .gm-chip.PS { background: color-mix(in oklch, var(--tt-accent) 16%, transparent); color: var(--tt-accent); } /* Empty-state line inside stripe-list panels. */ .gm-empty { padding: 16px 12px; text-align: center; color: var(--tt-fg-3); font-style: italic; font-size: 13px; } /* Score: two compact inputs + computed-from-goals hint (Chris: editable, not ro). */ .gm-score { display: flex; align-items: center; gap: 8px; min-width: 0; } .gm-score input { width: 64px; text-align: center; } .gm-score .dash { color: var(--tt-fg-3); font-weight: 700; } .gm-scorehint { font-size: 11px; color: var(--tt-fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gm-scorehint.warn { color: var(--tt-warn); font-weight: 700; } /* Full-width form field (Notes). */ .gm-f.w3 { grid-column: 1 / -1; } /* Read-only segmented controls (view mode). */ .gm-seg.ro span, .gm-seg.ro button { cursor: default; opacity: .65; } .gm-seg.ro .on { opacity: 1; } /* Lineup tiles: three states — on (played), dnp (warn), plain (not dressed). */ .gm-tile { position: relative; } .gm-tile.dnp { background: color-mix(in oklch, var(--tt-warn) 14%, transparent); border-color: color-mix(in oklch, var(--tt-warn) 35%, var(--tt-line)); } .gm-tile.dnp b, .gm-tile.dnp span { color: var(--tt-warn); } .gm-tile .tag { position: absolute; top: 3px; right: 4px; font-size: 8px; font-weight: 800; letter-spacing: .06em; color: var(--tt-warn); text-transform: uppercase; } .gm-tile.on .tag { color: var(--tt-on-accent); } .gm-tile .gm-pos { position: absolute; top: 2px; left: 3px; font-size: 8px; font-weight: 800; line-height: 1; padding: 2px 3px; border-radius: 5px; border: 1px solid var(--tt-line); background: var(--tt-bg); color: var(--tt-fg); cursor: pointer; font-family: inherit; letter-spacing: .04em; } .gm-tile .gm-pos:hover { border-color: var(--tt-fg-3); } .gm-tile.on .gm-pos { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.55); color: var(--tt-on-accent); } /* Running +/- chips on the goal-modal on-ice tiles. */ .gm-tile .pm { position: absolute; top: 3px; font-style: normal; font-size: 10px; font-weight: 800; } .gm-tile .pm.up { left: 5px; color: var(--tt-up); } .gm-tile .pm.dn { right: 5px; color: var(--tt-dn); } .gm-tile.on .pm { color: var(--tt-on-accent); } /* gmod cards live inside the page's .modal-bg scrim. */ .modal-bg .gmod-card { width: 95%; max-height: 88vh; overflow: auto; } /* Game-row mobile chips (visible inside dt at <=520px, hidden at wider) */ .d-dt-chips { display: none; } /* ── Mobile polish (2026-06-12) ─────────────────────────────────────────── */ @media (max-width: 520px) { /* Dashboard hero: hide KPI subtext + goal diff spark on portrait phones */ .tt-kpi .micro { display: none; } .tt-spark { display: none !important; } /* Hot lines / D pairings: hide the "GF% together · min 3 goals" subtext */ .d-duo .saas-card-hd .meta { display: none; } /* Recent games: date + score on row 1, opponent name on row 2 */ .d-game-hd { display: none; } .d-game { grid-template-columns: 1fr auto; grid-template-rows: auto auto; grid-template-areas: "dt sc" "op sc"; min-height: auto; padding: 8px 16px 8px 17px; gap: 1px 8px; align-items: start; } .d-game .dt { grid-area: dt; display: flex; align-items: center; gap: 5px; flex-wrap: nowrap; } .d-game .op { grid-area: op; padding-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .d-game .op .tt-chip { display: none; } /* chips move to dt on mobile */ .d-dt-chips { display: inline-flex; gap: 4px; align-items: center; } .d-game .sc { grid-area: sc; grid-row: 1 / 3; align-self: center; font-size: 22px; } /* Box score hero: score on top, team NAMES under the score, meta below. display:contents lets the score block's children (fin/nums/date) drop into the hero grid so team names can sit between the score and the date line. */ .bx-hero { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "fin fin" "nums nums" "left right" "date date"; gap: 6px; padding: 14px 16px 10px; align-items: center; } .bx-score { display: contents; } .bx-score .fin { grid-area: fin; text-align: center; } .bx-score .nums { grid-area: nums; margin: 2px 0 0; } .bx-score .date { grid-area: date; text-align: center; margin-top: 1px; } .bx-team:not(.away) { grid-area: left; flex-direction: column; align-items: center; text-align: center; } .bx-team.away { grid-area: right; flex-direction: column; align-items: center; text-align: center; } .bx-team .crest { display: none; } .bx-team h2 { font-size: 14px; margin: 0; } .bx-team .rec { display: none; } /* Scoring summary + penalties: period on top, time below; tighter first col */ .bx-row { grid-template-columns: 50px 1fr auto; gap: 8px; } .bx-row .t { display: flex; flex-direction: column; gap: 1px; white-space: nowrap; } .bx-row .t .bx-t-time { color: var(--tt-fg-3); font-size: 10px; font-weight: 600; } .gm-row .t { flex-direction: column; gap: 1px; } .gm-row .t .gm-t-time { color: var(--tt-fg-3); font-size: 10px; font-weight: 600; } /* Best linemate: stack GF% With / Without / Lift vertically */ .pp-mate { grid-template-columns: auto 1fr; } .pp-mate .figs { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; gap: 14px 20px; justify-content: flex-start; } .pp-mate .figs > div { text-align: left; } .pp-mate .figs .v { font-size: 20px; } /* Player game log: date + score + G/A/P on row 1; opponent on row 2 */ .pp-log-hd { display: none; } .pp-log-row { display: grid; grid-template-columns: auto 1fr 28px 28px 28px; grid-template-rows: auto auto; gap: 2px 8px; padding: 8px 14px 8px 17px; min-height: auto; } .pp-log-row > :nth-child(1) { grid-column: 1; grid-row: 1; } /* .dt */ .pp-log-row > :nth-child(2) { grid-column: 1 / 3; grid-row: 2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* .op */ .pp-log-row > :nth-child(3) { grid-column: 2; grid-row: 1; text-align: right; } /* .sc */ .pp-log-row > :nth-child(4) { grid-column: 3; grid-row: 1; } /* G */ .pp-log-row > :nth-child(5) { grid-column: 4; grid-row: 1; } /* A */ .pp-log-row > :nth-child(6) { grid-column: 5; grid-row: 1; } /* P */ .pp-log-row > :nth-child(n+7) { display: none; } /* DNP label spans all stat columns */ .pp-log-row .pp-log-dnp { grid-column: 3 / 6; grid-row: 1; text-align: right; } /* Skater stats: position chip beside name (remove flex:1 that pushes it right) */ .m-pcard .nm { flex: none; } /* Skater stats mobile cards: highlight P in accent, add card feel */ .m-pcard .stat .v.pts { color: var(--tt-accent); font-weight: 800; } /* All players back link: give it a bit more breathing room */ .pp-back { display: inline-block; padding: 4px 0; } } /* DNP cell default (wide grid: column 4 to end) */ .pp-log-dnp { grid-column: 4 / -1; text-align: right; } /* ── Goaltender game log: skater game-log (pp-log) styling, goalie columns ── */ .gk-log-hd { display: grid; grid-template-columns: 64px 1fr repeat(5, 52px); gap: 12px; padding: 8px 20px; border-bottom: 1px solid var(--tt-line); } .gk-log-hd span { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--tt-fg-3); } .gk-log-hd span.num { text-align: right; } .gk-log-row { display: grid; grid-template-columns: 64px 1fr repeat(5, 52px); gap: 12px; align-items: center; padding: 9px 20px; border-bottom: 1px solid var(--tt-row-line); border-left: 3px solid transparent; text-decoration: none; color: inherit; cursor: pointer; } .gk-log-row:last-child { border-bottom: none; } .gk-log-row:hover { background: color-mix(in oklch, var(--tt-goalie) 6%, transparent); } .gk-log-row.W { border-left-color: var(--tt-win); } .gk-log-row.L { border-left-color: var(--tt-loss); } .gk-log-row.T { border-left-color: var(--tt-dot-tie); } .gk-log-row .dt { font-size: 11px; color: var(--tt-fg-3); font-weight: 700; font-variant-numeric: tabular-nums; } .gk-log-row .op { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gk-log-row .num { text-align: right; font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; } @media (max-width: 760px) { .gk-log-hd, .gk-log-row { grid-template-columns: 52px 1fr repeat(3, 34px); gap: 8px; padding-left: 16px; padding-right: 16px; } .gk-log-hd > :nth-child(3), .gk-log-hd > :nth-child(4), .gk-log-row > .num:nth-child(3), .gk-log-row > .num:nth-child(4) { display: none; } } @media (max-width: 440px) { .gk-log-hd { display: none; } .gk-log-row { grid-template-columns: auto 1fr 34px 34px 34px; grid-template-rows: auto auto; gap: 2px 8px; padding: 8px 14px 8px 17px; min-height: auto; align-items: start; } .gk-log-row > :nth-child(1) { grid-column: 1; grid-row: 1; } .gk-log-row > :nth-child(2) { grid-column: 1 / -1; grid-row: 2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gk-log-row > :nth-child(5) { grid-column: 3; grid-row: 1; text-align: right; } .gk-log-row > :nth-child(6) { grid-column: 4; grid-row: 1; text-align: right; } .gk-log-row > :nth-child(7) { grid-column: 5; grid-row: 1; text-align: right; } .gk-log-row > :nth-child(3), .gk-log-row > :nth-child(4) { display: none; } }