/* ========================================================================== WOODWARD: the Detroit Sports design system (Edition 2, Claude Opus 5.5) Detroit as signage. Concrete ground, industrial condensed display type, team colours as full-bleed slabs, thick ink rules, no shadows, no glass, no rounded cards. Numbers are the heroes. Every page sets ; the team tokens below restyle the shared components without new classes. ========================================================================== */ :root { --ground: #ECE9E3; --ground-2: #E2DED6; /* recessed band: table heads, idle tiles */ --paper: #F6F4F0; /* raised band: sheets, detail panels */ --ink: #15171A; --ink-2: #4A4E55; /* secondary text */ --ink-3: #7C8088; /* tertiary: labels, axes */ --hair: rgba(21, 23, 26, 0.16); --rule: var(--ink); --win: #1F7A3E; --loss: #B3261E; --tie: #7C8088; --live: #E4002B; --warn: #B26A00; /* team tokens (hub default = ink) */ --team: #15171A; --team-2: #FA4616; --team-ink: #F6F4F0; /* text on the team slab */ --team-soft: rgba(21, 23, 26, 0.08); --f-display: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif; --f-text: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif; --f-mono: "Martian Mono", ui-monospace, Menlo, monospace; --gut: 16px; --max: 1240px; --bar: 2px; /* the rule weight */ color-scheme: light; } @media (min-width: 720px) { :root { --gut: 32px; } } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ground: #121416; --ground-2: #1B1E21; --paper: #181B1E; --ink: #ECE9E3; --ink-2: #B5B2AC; --ink-3: #85837E; --hair: rgba(236, 233, 227, 0.16); --win: #4CC27A; --loss: #FF6B5E; --live: #FF3355; --warn: #F0A83A; --team-soft: rgba(236, 233, 227, 0.08); color-scheme: dark; } } :root[data-theme="dark"] { --ground: #121416; --ground-2: #1B1E21; --paper: #181B1E; --ink: #ECE9E3; --ink-2: #B5B2AC; --ink-3: #85837E; --hair: rgba(236, 233, 227, 0.16); --win: #4CC27A; --loss: #FF6B5E; --live: #FF3355; --warn: #F0A83A; --team-soft: rgba(236, 233, 227, 0.08); color-scheme: dark; } body[data-team="lions"] { --team: #0076B6; --team-2: #B0B7BC; --team-ink: #FFFFFF; --team-soft: rgba(0, 118, 182, 0.10); } body[data-team="tigers"] { --team: #0C2340; --team-2: #FA4616; --team-ink: #FFFFFF; --team-soft: rgba(250, 70, 22, 0.10); } body[data-team="pistons"] { --team: #C8102E; --team-2: #1D42BA; --team-ink: #FFFFFF; --team-soft: rgba(200, 16, 46, 0.09); } body[data-team="wings"] { --team: #CE1126; --team-2: #FFFFFF; --team-ink: #FFFFFF; --team-soft: rgba(206, 17, 38, 0.09); } /* ---------- base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--ground); color: var(--ink); font: 400 15px/1.5 var(--f-text); font-feature-settings: "ss01"; -webkit-font-smoothing: antialiased; overflow-x: hidden; } a { color: inherit; } img { max-width: 100%; display: block; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } :focus-visible { outline: 3px solid var(--team-2); outline-offset: 2px; } .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); } /* ---------- type primitives ---------- */ .k { /* kicker / label */ font: 500 10.5px/1.3 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); } .mono { font-family: var(--f-mono); font-feature-settings: "tnum"; } .num { /* hero figure */ font: 800 64px/0.85 var(--f-display); letter-spacing: -0.01em; font-feature-settings: "tnum", "lnum"; } .disp { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.01em; line-height: 0.9; } .muted { color: var(--ink-2); } .faint { color: var(--ink-3); } .w { color: var(--win); } .l { color: var(--loss); } .t { color: var(--tie); } /* ---------- marquee: the team slab at the top of every page ---------- */ .marquee { background: var(--team); color: var(--team-ink); border-bottom: 6px solid var(--team-2); } .marquee .wrap { padding-top: 14px; padding-bottom: 22px; } .marquee-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; font: 500 10.5px/1 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.85; } .marquee-top a { text-decoration: none; } .marquee-top a:hover { text-decoration: underline; text-underline-offset: 3px; } .marquee-main { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 8px 24px; margin-top: 18px; } .marquee-name { font: 900 clamp(64px, 16vw, 188px)/0.78 var(--f-display); text-transform: uppercase; letter-spacing: -0.01em; margin: 0; } .marquee-name small { display: block; font: 600 12px/1 var(--f-mono); letter-spacing: 0.16em; margin: 0 0 10px 3px; opacity: 0.8; } .marquee-rec { text-align: right; } .marquee-rec .num { font-size: clamp(56px, 11vw, 124px); display: block; } .marquee-rec .k { color: inherit; opacity: 0.8; display: block; margin-top: 8px; } .marquee-line { margin-top: 18px; padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--team-ink) 30%, transparent); display: flex; flex-wrap: wrap; gap: 6px 22px; font: 500 12px/1.4 var(--f-mono); letter-spacing: 0.04em; } .marquee-line b { font-weight: 600; } .theme-btn { font: 500 10.5px/1 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; border: 1px solid currentColor; padding: 5px 8px; } @media (max-width: 560px) { .marquee-main { grid-template-columns: 1fr; } .marquee-rec { text-align: left; display: flex; align-items: baseline; gap: 14px; } .marquee-rec .k { margin-top: 0; } } /* ---------- tab rail: words between rules, not pills ---------- */ .rail { position: sticky; top: 0; z-index: 20; background: var(--ground); border-bottom: var(--bar) solid var(--rule); } .rail .wrap { display: flex; overflow-x: auto; scrollbar-width: none; } .rail .wrap::-webkit-scrollbar { display: none; } .rail a, .rail button { flex: 0 0 auto; font: 700 17px/1 var(--f-display); letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; color: var(--ink-2); padding: 15px 16px 13px; border-right: 1px solid var(--hair); border-bottom: 5px solid transparent; margin-bottom: calc(-1 * var(--bar)); } .rail a:first-child, .rail button:first-child { padding-left: 0; } .rail a:hover, .rail button:hover { color: var(--ink); } .rail [aria-current="page"], .rail [aria-selected="true"] { color: var(--ink); border-bottom-color: var(--team); } body[data-team="hub"] .rail [aria-current="page"] { border-bottom-color: var(--ink); } /* ---------- sections ---------- */ .sec { padding: 40px 0 8px; } .sec-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; border-top: 8px solid var(--rule); padding-top: 10px; margin-bottom: 18px; } .sec-head h2 { font: 800 clamp(30px, 5vw, 44px)/0.9 var(--f-display); text-transform: uppercase; margin: 0; letter-spacing: 0.005em; } .sec-head .k { margin-bottom: 3px; } .sub-head { font: 700 20px/1 var(--f-display); text-transform: uppercase; letter-spacing: 0.04em; border-top: var(--bar) solid var(--rule); padding-top: 8px; margin: 28px 0 12px; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .sub-head .k { font-size: 10px; } .cols { display: grid; gap: 28px; } @media (min-width: 900px) { .cols.c2 { grid-template-columns: 1fr 1fr; } .cols.c3 { grid-template-columns: repeat(3, 1fr); } .cols.c21 { grid-template-columns: 2fr 1fr; } .cols.c12 { grid-template-columns: 1fr 2fr; } } /* ---------- ruled table ---------- */ .tbl-wrap { overflow-x: auto; margin: 0 calc(-1 * var(--gut)); padding: 0 var(--gut); } .tbl { width: 100%; border-collapse: collapse; font-size: 14px; } .tbl th { font: 500 10px/1.2 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); text-align: left; padding: 8px 8px 7px; border-bottom: var(--bar) solid var(--rule); white-space: nowrap; } .tbl td { padding: 9px 8px; border-bottom: 1px solid var(--hair); vertical-align: middle; } .tbl th:first-child, .tbl td:first-child { padding-left: 0; } .tbl th:last-child, .tbl td:last-child { padding-right: 0; } .tbl .r { text-align: right; } .tbl .c { text-align: center; } .tbl td.r, .tbl td.mono { font-family: var(--f-mono); font-size: 12.5px; font-feature-settings: "tnum"; } .tbl tr.me td { background: var(--team-soft); } .tbl tr.me td:first-child { box-shadow: inset 5px 0 0 var(--team); padding-left: 12px; } .tbl tr.cut td { border-bottom: var(--bar) dashed var(--ink-3); } .tbl tr[data-go] { cursor: pointer; } .tbl tr[data-go]:hover td { background: var(--ground-2); } /* ---------- tags ---------- */ .tag { display: inline-block; font: 600 10px/1 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 5px 3px; border: 1px solid currentColor; white-space: nowrap; vertical-align: 1px; } .tag.solid { background: var(--ink); color: var(--ground); border-color: var(--ink); } .tag.team { background: var(--team); color: var(--team-ink); border-color: var(--team); } .tag.w { color: var(--win); } .tag.l { color: var(--loss); } .tag.live { background: var(--live); color: #fff; border-color: var(--live); } .tag.warn { color: var(--warn); } .dot-live { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--live); margin-right: 6px; vertical-align: 1px; animation: blink 1.4s steps(2, start) infinite; } @keyframes blink { to { visibility: hidden; } } @media (prefers-reduced-motion: reduce) { .dot-live { animation: none; } } /* ---------- stat blocks: big figure over a label, split by rules ---------- */ .figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); border-top: var(--bar) solid var(--rule); } .fig { padding: 12px 14px 14px 0; border-bottom: 1px solid var(--hair); } .fig + .fig { padding-left: 14px; border-left: 1px solid var(--hair); } .fig .num { font-size: 44px; display: block; } .fig .k { display: block; margin-top: 6px; } .fig .sub { font: 400 12px/1.35 var(--f-text); color: var(--ink-2); margin-top: 3px; } /* ---------- bars ---------- */ .bar { height: 10px; background: var(--ground-2); position: relative; } .bar > i { position: absolute; inset: 0 auto 0 0; background: var(--team); } .bar.ink > i { background: var(--ink); } .vs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--hair); } .vs .lab { font: 500 10px/1.2 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); text-align: center; min-width: 110px; } .vs .side { display: flex; align-items: center; gap: 8px; font: 500 13px/1 var(--f-mono); font-feature-settings: "tnum"; } .vs .side.a { justify-content: flex-end; } .vs .side .bar { flex: 1; max-width: 160px; } .vs .side.a .bar > i { inset: 0 0 0 auto; } .vs .side.b .bar > i { background: var(--ink-3); } /* ---------- list rows (news, plays) ---------- */ .rows { border-top: var(--bar) solid var(--rule); } .row { display: grid; grid-template-columns: 72px 1fr; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--hair); } .row .when { font: 500 11px/1.4 var(--f-mono); color: var(--ink-3); } .row h3 { font: 600 16px/1.3 var(--f-text); margin: 0 0 3px; } .row p { margin: 0; color: var(--ink-2); font-size: 14px; } .row a { text-decoration: none; } .row a:hover h3 { text-decoration: underline; text-underline-offset: 3px; } /* ---------- empty / loading / error ---------- */ .note { border: 1px dashed var(--ink-3); padding: 18px; color: var(--ink-2); font: 500 12px/1.5 var(--f-mono); } .skel { background: repeating-linear-gradient(90deg, var(--ground-2) 0 8px, transparent 8px 12px); height: 14px; margin: 8px 0; } /* ---------- footer ---------- */ .foot { margin-top: 64px; border-top: 8px solid var(--rule); padding: 18px 0 40px; } .foot .wrap { display: grid; gap: 18px; } @media (min-width: 720px) { .foot .wrap { grid-template-columns: 1fr 1fr 1fr; } } .foot p { margin: 4px 0 0; font-size: 13px; color: var(--ink-2); } .foot a { text-underline-offset: 3px; } /* ---------- utility ---------- */ .hide { display: none !important; } .nowrap { white-space: nowrap; } .logo { width: 28px; height: 28px; object-fit: contain; flex: 0 0 auto; } .logo.lg { width: 56px; height: 56px; } .btn { display: inline-block; font: 600 11px/1 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; border: var(--bar) solid var(--ink); padding: 9px 12px; text-decoration: none; } .btn:hover { background: var(--ink); color: var(--ground); } .btn.on { background: var(--ink); color: var(--ground); }