/* Basic modern, dark-first styling */ :root { --bg: #0b0d10; --surface: #12161b; --text: #e6ebf0; --muted: #98a3ad; --accent: #5fb3ff; --border: #26303a; --pos-col-w: 4.6rem; --table-stripe: rgba(255,255,255,0.04); --bg-gold: hsl(45 95% 60% / 0.25); --bg-silver: hsl(0 0% 75% / 0.25); --bg-bronze: hsl(20 70% 65% / 0.28); --bg-green: hsl(130 60% 60% / 0.20); --bg-blue: hsl(210 70% 60% / 0.18); --bg-purple: hsl(0 70% 60% / 0.20); color-scheme: dark light; } /* Light theme override via [data-theme="light"] on */ :root[data-theme="light"] { --bg: #f8fafc; --surface: #ffffff; --text: #0d141c; --muted: #4f6273; --accent: #0b6bcb; --border: #d6dee6; --bg-gold: hsl(45 90% 50% / 0.25); --bg-silver: hsl(0 0% 60% / 0.25); --bg-bronze: hsl(30 65% 52% / 0.25); --bg-green: hsl(130 50% 45% / 0.22); --bg-blue: hsl(210 60% 50% / 0.20); --bg-purple: hsl(0 70% 50% / 0.22); --table-stripe: rgba(0,0,0,0.03); } /* Respect system preference if user hasn't toggled explicitly */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --bg: #f8fafc; --surface: #ffffff; --text: #0d141c; --muted: #4f6273; --accent: #0b6bcb; --border: #d6dee6; --table-stripe: rgba(0,0,0,0.03); } } html, body { height: 100%; background: var(--bg); color: var(--text); margin: 0; font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji; transform: scale(0.975); transform-origin: top center; font-size: 97.5%; } .container { width: min(1300px, 92vw); margin: 0 auto; } .site-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 0; } .site-header h1 { margin: 0; font-size: clamp(1.2rem, 2vw + 1rem, 1.8rem); letter-spacing: 0.2px; } .theme-toggle { border: 2px solid var(--border); background: var(--surface); color: var(--text); padding: .5rem .75rem; border-radius: .5rem; cursor: pointer; } section { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 1rem; margin: 1rem 0 1.5rem; box-shadow: 0 1px 0 rgba(0,0,0,.1); } section h2 { margin: 0 0 .5rem 0; font-size: 1.25rem; } .table-wrap { overflow-x: auto; } table { width: 100%; border-collapse: collapse; font-size: .95rem; } caption { text-align: left; color: var(--muted); font-size: .9rem; margin-bottom: .25rem; } thead th { position: sticky; top: 0; background: var(--surface); z-index: 1; border-bottom: 1px solid var(--border); } th, td { border: 1px solid var(--border); padding: .5rem .6rem; text-align: left; vertical-align: top; } tbody tr:nth-child(odd) { background: var(--table-stripe); } .small { color: var(--muted); font-size: .9rem; } .site-footer { color: var(--muted); font-size: .9rem; padding: 1.5rem 0 3rem; } kbd { background: var(--border); padding: 0 .35rem; border-radius: 4px; } #wdc-table .subject-col, #wdc-table tbody td:nth-child(2) { min-width: 18ch; } #wcc-table .subject-col { min-width: 26ch; } #wdc-table th, #wcc-table th { text-align:center; } #entrants-table th { text-align:center; } td.cls { transition: background-color .15s ease; } td.cls.p1 { background: var(--bg-gold); } td.cls.p2 { background: var(--bg-silver); } td.cls.p3 { background: var(--bg-bronze); } td.cls.points { background: var(--bg-green); } td.cls.nonpoints { background: var(--bg-blue); } td.cls.ret { background: var(--bg-purple); } #wdc-table, #wcc-table { border-collapse: separate; border-spacing: 0; white-space: nowrap; } /* LEFT: Pos (fixed width so the next sticky aligns; adjust if needed) */ #wdc-table th.sticky-left-1, #wdc-table td.sticky-left-1, #wcc-table th.sticky-left-1, #wcc-table td.sticky-left-1 { position: sticky; left: 0; z-index: 3; width: 4.6rem; min-width: 4.6rem; } /* LEFT: Driver/Constructor */ #wdc-table th.sticky-left-2, #wdc-table td.sticky-left-2, #wcc-table th.sticky-left-2, #wcc-table td.sticky-left-2 { position: sticky; left: 4.6rem; /* same as Pos col width */ z-index: 3; } /* RIGHT: Points */ #wdc-table th.sticky-right, #wdc-table td.sticky-right, #wcc-table th.sticky-right, #wcc-table td.sticky-right { position: sticky; right: 0; z-index: 3; } /* Solid background for non-result cells so stickies aren’t transparent. DOES NOT touch coloured result cells (which have .cls). */ th, td:not(.cls) { background: var(--surface); } /* Keep your zebra striping on non-coloured cells */ tbody tr:nth-child(odd) td:not(.cls) { background: var(--table-stripe); } /* Optional visual separators (doesn’t affect colours) */ #wdc-table th.sticky-left-2, #wdc-table td.sticky-left-2, #wcc-table th.sticky-left-2, #wcc-table td.sticky-left-2 { box-shadow: 1px 0 0 var(--border); } #wdc-table th.sticky-right, #wdc-table td.sticky-right, #wcc-table th.sticky-right, #wcc-table td.sticky-right { box-shadow: -1px 0 0 var(--border); } /* Make the sticky bookend cells opaque and on top */ #wdc-table th.sticky-left-1, #wdc-table td.sticky-left-1, #wdc-table th.sticky-left-2, #wdc-table td.sticky-left-2, #wdc-table th.sticky-right, #wdc-table td.sticky-right, #wcc-table th.sticky-left-1, #wcc-table td.sticky-left-1, #wcc-table th.sticky-left-2, #wcc-table td.sticky-left-2, #wcc-table th.sticky-right, #wcc-table td.sticky-right { background: var(--surface) !important; z-index: 3; } /* Race cells sizing */ .race-col { min-width: 4.2rem; text-align: center; }