/* =========================================================================== dropx — design system, old-web edition Angular and dense, skinned like a 1997 stats page rather than a modern brutalist one: pitch-green rules and headers, rust accents, Georgia headings, Courier figures, hairline table gridlines, underlined links. Flat — no offset shadows, no rounding, no gradients. The density is the point. Small type, tight rows, everything on screen. Rules that survived every restyle: colour carries meaning or it does not appear, and status is never colour alone — badges spell the word out, bars sit against a baseline, blocks carry their own number. =========================================================================== */ /* --- tokens ------------------------------------------------------------- */ :root { --paper: #e9e9e2; --surface: #ffffff; --surface-sunk:#f0f0ea; --ink: #000000; --ink-soft: #1c1c1c; --ink-muted: #5a5a5a; --ink-faint: #8c8c8c; --rule: #000000; /* the hard border */ --rule-soft: #b8b8ae; /* internal gridline */ /* Pitch green is the chrome; rust is the one accent that cuts against it. */ --navy: #14532d; /* kept as a name so page styles need no rewrite */ --navy-2: #1a6638; --red: #c04000; --teal: #0f6b52; --purple: #5a3a86; --olive: #5c5c1f; --link: #14532d; --link-visited:#5a3a86; --gain: #006600; --gain-soft: #cceccc; --loss: #cc0000; --loss-soft: #f5d0cc; --pending: #5a5a5a; --danger: #cc0000; --danger-soft: #f5d0cc; --attn: #6b4e00; --attn-soft: #efe6c8; /* Aliases page-level styles still reference. */ --line: #000000; --line-soft: #b8b8ae; --line-strong: #000000; --accent: #14532d; --accent-bright:#8fe0a8; --accent-soft: #d9ecdf; --accent-line: #000000; --gain-line: #000000; --loss-line: #000000; --attn-line: #000000; --gain-bright: #8fe0a8; --loss-bright: #ff9b7a; --ink-surface: #14532d; --on-ink: #ffffff; --on-ink-muted:#9dc9ac; --amber: #ffffff; /* neutralised: the old accent is gone */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 28px; --s7: 40px; --s8: 56px; --radius: 0; --radius-sm: 0; --lift: none; --lift-lg: none; --bd: 2px solid var(--rule); --bd1: 1px solid var(--rule); --font: Verdana, Geneva, Arial, Helvetica, sans-serif; --font-head: Georgia, 'Times New Roman', Times, serif; --font-mono: 'Courier New', Courier, monospace; --page-max: 1200px; } /* --- reset -------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--ink-soft); font-family: var(--font); font-size: 12px; line-height: 1.5; } /* --- backdrop textures -------------------------------------------------- Every page had a tiled background. Pick one from the footer; the choice is kept in localStorage and applied to before first paint, so there is no flash of the wrong texture. Deliberately client-side only — this is a look, not data, so it needs no table and no migration. ----------------------------------------------------------------------- */ html[data-texture="weave"] body { background-image: linear-gradient(45deg, rgb(0 0 0 / 0.028) 25%, transparent 25%, transparent 75%, rgb(0 0 0 / 0.028) 75%), linear-gradient(45deg, rgb(0 0 0 / 0.028) 25%, transparent 25%, transparent 75%, rgb(0 0 0 / 0.028) 75%); background-size: 12px 12px; background-position: 0 0, 6px 6px; } html[data-texture="graph"] body { background-image: linear-gradient(to right, rgb(0 0 0 / 0.05) 1px, transparent 1px), linear-gradient(to bottom, rgb(0 0 0 / 0.05) 1px, transparent 1px); background-size: 16px 16px; } html[data-texture="dots"] body { background-image: radial-gradient(rgb(0 0 0 / 0.10) 1px, transparent 1px); background-size: 9px 9px; } html[data-texture="pinstripe"] body { background-image: repeating-linear-gradient( 90deg, rgb(0 0 0 / 0.05) 0 1px, transparent 1px 7px); } html[data-texture="scanlines"] body { background-image: repeating-linear-gradient( 180deg, rgb(0 0 0 / 0.05) 0 1px, transparent 1px 4px); } html[data-texture="hatch"] body { background-image: repeating-linear-gradient( 45deg, rgb(0 0 0 / 0.05) 0 1px, transparent 1px 6px); } /* Crossed bands in the chrome colour — the loudest of the set. */ html[data-texture="tartan"] body { background-image: repeating-linear-gradient(90deg, rgb(20 83 45 / 0.10) 0 8px, transparent 8px 34px), repeating-linear-gradient(0deg, rgb(20 83 45 / 0.10) 0 8px, transparent 8px 34px), repeating-linear-gradient(90deg, rgb(192 64 0 / 0.10) 22px 24px, transparent 24px 34px); } /* Static, via an SVG turbulence tile. */ html[data-texture="noise"] body { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E"); background-size: 120px 120px; } /* Faux felt: fine noise over a green wash, like a card table. */ html[data-texture="felt"] body { background-color: #dfe4d8; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23f)' opacity='0.10'/%3E%3C/svg%3E"); background-size: 140px 140px; } /* --- texture picker ------------------------------------------------------ */ .texture-pick { appearance: none; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink); background-color: var(--surface); border: var(--bd1); border-radius: 0; padding: 2px 18px 2px 6px; cursor: pointer; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6' viewBox='0 0 9 6'%3E%3Cpath d='M0 0h9L4.5 6z' fill='%23000'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 5px center; } h1, h2, h3, h4, p, figure { margin: 0; } ul, ol { margin: 0; padding: 0; } a { color: var(--link); text-decoration: underline; } a:visited { color: var(--link-visited); } a:hover { color: var(--red); } .num, .metric-value, td.num, .money, .display, .v, .rot-count, .week-date, .week-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } /* --- type --------------------------------------------------------------- */ .display { font-family: var(--font-mono); font-size: 42px; line-height: 1; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); } .title { font-family: var(--font-head); font-size: 22px; line-height: 1.1; font-weight: 700; color: var(--ink); } .heading { font-family: var(--font-head); font-size: 13px; line-height: 1.2; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); } .label { font-family: var(--font); font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); } .meta { font-size: 11px; color: var(--ink-muted); } .small { font-size: 11px; } .muted { color: var(--ink-muted); } .faint { color: var(--ink-faint); } .gain { color: var(--gain); font-weight: 700; } .loss { color: var(--loss); font-weight: 700; } /* --- layout ------------------------------------------------------------- */ .page { max-width: var(--page-max); margin: 0 auto; padding: var(--s4) var(--s4) var(--s7); } .stack { display: flex; flex-direction: column; gap: var(--s4); } .stack-tight { display: flex; flex-direction: column; gap: var(--s2); } .row { display: flex; align-items: center; gap: var(--s2); } .row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); } .wrap { flex-wrap: wrap; } .grow { flex: 1; } .dash { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s3); align-items: start; } .c3 { grid-column: span 3; } .c4 { grid-column: span 4; } .c5 { grid-column: span 5; } .c6 { grid-column: span 6; } .c7 { grid-column: span 7; } .c8 { grid-column: span 8; } .c9 { grid-column: span 9; } .c12 { grid-column: span 12; } .r2 { grid-row: span 2; } @media (max-width: 1000px) { .c3, .c4, .c5, .c7, .c8, .c9 { grid-column: span 6; } .r2 { grid-row: span 1; } } @media (max-width: 640px) { .dash > * { grid-column: span 12 !important; } } /* --- masthead ----------------------------------------------------------- */ .masthead { background: var(--navy); border-bottom: var(--bd); position: sticky; top: 0; z-index: 50; } .masthead-inner { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--s4); min-height: 46px; display: flex; align-items: stretch; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; } .wordmark { display: flex; align-items: center; font-family: var(--font-head); font-size: 19px; font-weight: 700; font-style: italic; letter-spacing: 0.02em; color: #ffffff; text-decoration: none; } .wordmark:visited, .wordmark:hover { color: #ffffff; } .wordmark::after { content: ' ·'; color: var(--accent-bright); } .nav { display: flex; align-items: stretch; gap: 0; flex-wrap: wrap; } /* Butted cells with hairline dividers, like a nav table. */ .nav-link { display: flex; align-items: center; padding: 0 var(--s3); border-left: 1px solid #3c7a55; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #ffffff; text-decoration: none; white-space: nowrap; } .nav-link:visited { color: #ffffff; } .nav-link:hover { background: var(--red); color: #ffffff; text-decoration: none; } .nav-link.active { background: #ffffff; color: var(--navy); } .nav-link.active::after { content: none; } .nav-sep { display: none; } /* --- season selector ---------------------------------------------------- */ .season-form { display: inline-flex; align-items: center; margin-left: var(--s2); align-self: center; } .season-select { appearance: none; font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--ink); background-color: #ffffff; border: var(--bd1); border-radius: 0; padding: 2px 18px 2px 6px; cursor: pointer; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6' viewBox='0 0 9 6'%3E%3Cpath d='M0 0h9L4.5 6z' fill='%23000'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 5px center; } .season-select:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 1px; } /* --- panels ------------------------------------------------------------- */ .panel, .tile, .metrics { background: var(--surface); border: var(--bd); } .panel, .tile { padding: var(--s4); } .panel-flush { padding: 0; } .tile { height: 100%; display: flex; flex-direction: column; gap: 3px; min-width: 0; } /* The hero: a navy field with the figure reversed out of it. */ .tile-ink { background: var(--navy); color: #ffffff; border-color: var(--rule); justify-content: space-between; } .tile-ink .label, .tile-ink .metric-note { color: var(--on-ink-muted); } .tile-ink .metric-value, .tile-ink .display { color: #ffffff; } .tile-ink .gain { color: var(--gain-bright); } .tile-ink .loss { color: var(--loss-bright); } .tile-ink a { color: var(--accent-bright); } .tile-ink hr { border: 0; border-top: 1px solid #3c7a55; margin: var(--s2) 0; } .tile-foot { display: flex; gap: var(--s4); flex-wrap: wrap; } .tile-foot > div { display: flex; flex-direction: column; gap: 1px; } .tile-foot .label { font-size: 9px; } .tile-foot .v { font-size: 15px; font-weight: 700; color: #ffffff; } /* --- metrics ------------------------------------------------------------ */ .metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .metric { padding: var(--s3); border-right: var(--bd1); display: flex; flex-direction: column; gap: 2px; min-width: 0; } .metric:last-child { border-right: 0; } .metric-value { font-size: 26px; line-height: 1.05; font-weight: 700; color: var(--ink); } .metric-value.sm { font-size: 19px; } .metric-note { font-size: 10px; color: var(--ink-muted); } @media (max-width: 900px) { .metric:nth-child(2n) { border-right: 0; } .metric { border-bottom: var(--bd1); } } /* --- section headers ---------------------------------------------------- */ .section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); background: var(--navy); color: #ffffff; padding: 5px var(--s3); /* Negative margins match .panel padding so the bar spans the full width; the bottom value is the breathing room under it. */ margin: calc(var(--s4) * -1) calc(var(--s4) * -1) var(--s4); border-bottom: var(--bd); } .section-head .heading { color: #ffffff; } .section-head .meta { color: var(--on-ink-muted); font-size: 10px; } .section-head a { color: var(--accent-bright); font-size: 10px; } .section-head a:visited { color: var(--accent-bright); } .section-head a:hover { color: #ffffff; } /* A header that is NOT inside a padded panel carries its own box and needs no negative margin. Scoped with :not(.panel) — panels are
elements too, so an unscoped `section >` here silently cancelled the spacing under every panel header. */ section:not(.panel) > .section-head, div.c7:not(.panel) > .section-head { margin: 0 0 var(--s3); border: var(--bd); } /* --- week cards --------------------------------------------------------- */ .week-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(275px, 1fr)); gap: var(--s3); } .week { display: block; background: var(--surface); border: var(--bd); padding: var(--s2) var(--s3) var(--s3); color: inherit; text-decoration: none; } a.week:hover { text-decoration: none; border-color: var(--red); } .week.is-current { border-color: var(--red); border-width: 3px; } .week.is-current .empty, .week.is-current .faint { color: var(--ink-muted); } .week-num { font-size: 14px; font-weight: 700; color: var(--ink); } .week-date { font-size: 11px; color: var(--ink-muted); } /* --- chips -------------------------------------------------------------- */ .chips { display: flex; flex-wrap: wrap; gap: 3px; } .chip { font-family: var(--font-mono); font-size: 10px; font-weight: 700; line-height: 1; text-transform: uppercase; padding: 3px 5px; background: var(--surface-sunk); border: var(--bd1); color: var(--ink); white-space: nowrap; } /* --- badges ------------------------------------------------------------- */ .badge, .bet-status, .status-badge { display: inline-flex; align-items: center; font-family: var(--font); font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 5px; border: var(--bd1); background: var(--surface-sunk); color: var(--ink); } .badge-won, .bet-status.won, .status-badge.won { background: var(--gain); color: #fff; } .badge-lost, .bet-status.lost, .status-badge.lost { background: var(--red); color: #fff; } .badge-pending, .bet-status.pending, .status-badge.pending { background: var(--surface-sunk); color: var(--ink); } /* --- tables ------------------------------------------------------------- */ .table-wrap { overflow-x: auto; } table.data { width: 100%; border-collapse: collapse; font-size: 11px; background: var(--surface); } table.data th { text-align: left; font-family: var(--font); font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #ffffff; background: var(--navy); padding: 4px var(--s2); white-space: nowrap; border-right: 1px solid #3c7a55; } table.data th:last-child { border-right: 0; } table.data td { padding: 3px var(--s2); border-bottom: 1px solid var(--rule-soft); border-right: 1px solid var(--rule-soft); color: var(--ink-soft); } table.data td:last-child { border-right: 0; } table.data tbody tr:nth-child(even) { background: var(--surface-sunk); } table.data tbody tr:hover { background: #e4f2e8; } table.data .num, table.data th.num { text-align: right; } /* --- controls ----------------------------------------------------------- */ .field { display: flex; flex-direction: column; gap: 2px; } input[type="text"], input[type="number"], input[type="password"], input[type="date"], select:not(.season-select), textarea { font-family: var(--font-mono); font-size: 12px; color: var(--ink); background: var(--surface); border: var(--bd1); border-radius: 0; padding: 4px 6px; width: 100%; } input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--navy); outline-offset: -1px; } input::placeholder, textarea::placeholder { color: var(--ink-faint); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; font-family: var(--font); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1; padding: 6px 11px; border: var(--bd1); border-radius: 0; background: var(--surface); color: var(--ink); cursor: pointer; white-space: nowrap; text-decoration: none; } .btn:hover { background: var(--navy); color: #ffffff; text-decoration: none; } .btn:active { background: var(--ink); } .btn:focus-visible { outline: 2px solid var(--navy); outline-offset: 1px; } .btn-primary { background: var(--navy); color: #ffffff; } .btn-primary:hover { background: var(--red); color: #ffffff; } .btn-quiet { background: var(--surface); } .btn-danger { background: var(--surface); color: var(--red); } .btn-danger:hover { background: var(--red); color: #ffffff; } .btn-sm { font-size: 9px; padding: 4px 7px; } /* --- tabs --------------------------------------------------------------- */ .tabs, .tabs-bar { display: flex; gap: 3px; border-bottom: var(--bd); margin-bottom: var(--s3); overflow-x: auto; } .tab, .tab-button { appearance: none; background: var(--surface-sunk); border: var(--bd1); border-bottom: 0; border-radius: 0; font-family: var(--font); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); padding: 5px var(--s3); cursor: pointer; white-space: nowrap; } .tab:hover, .tab-button:hover { background: #e4f2e8; color: var(--ink); } .tab.active, .tab-button.active { background: var(--navy); color: #ffffff; } /* --- empty states ------------------------------------------------------- */ .empty { color: var(--ink-faint); font-size: 11px; padding: var(--s2) 0; } .empty-lg { text-align: center; padding: var(--s7) var(--s4); color: var(--ink-muted); background-image: repeating-linear-gradient( 45deg, transparent, transparent 6px, rgb(0 0 0 / 0.04) 6px, rgb(0 0 0 / 0.04) 12px); } /* --- flash -------------------------------------------------------------- */ .flash { padding: var(--s2) var(--s3); border: var(--bd); font-size: 11px; font-weight: 700; } .flash-success { background: var(--gain-soft); color: var(--ink); } .flash-error { background: var(--danger-soft); color: var(--ink); } /* --- footer ------------------------------------------------------------- */ .footer { max-width: var(--page-max); margin: 0 auto; padding: var(--s3) var(--s4); border-top: var(--bd); font-family: var(--font-mono); font-size: 10px; color: var(--ink-muted); } /* --- sidebar split ------------------------------------------------------ */ .split { display: grid; grid-template-columns: 276px minmax(0, 1fr); gap: var(--s3); align-items: start; } @media (max-width: 940px) { .split { grid-template-columns: 1fr; } } .sticky-side { position: sticky; top: 62px; } @media (max-width: 940px) { .sticky-side { position: static; } } /* --- season block grid ------------------------------------------------ */ .wk-grid { display: grid; /* Six across, always — 38 weeks lands in seven rows. Capped so the keys grow to a usable size without the block sprawling across a wide panel. */ grid-template-columns: repeat(6, minmax(0, 1fr)); max-width: 264px; gap: 3px; } .wk { aspect-ratio: 1; font-size: 12px; display: flex; align-items: center; justify-content: center; border: var(--bd1); border-radius: 0; background: var(--surface); color: var(--ink); font-family: var(--font-mono); font-weight: 700; cursor: pointer; padding: 0; } .wk, .wk:visited { text-decoration: none; color: var(--ink); } .wk:hover { outline: 2px solid var(--red); outline-offset: -2px; text-decoration: none; } .wk:focus-visible { outline: 2px solid var(--navy); outline-offset: 1px; } /* The week number sits in every block, so colour is never the only thing identifying a cell — it shades the state, the label carries the identity. */ /* Flat and loud. The week number sits on every block, so the fill is reinforcement rather than the only signal. */ /* The week number sits on every key, so the fill reinforces rather than being the only signal. */ .wk-empty { background: var(--surface); color: var(--ink-faint); } .wk-pending { background: #e2ddc4; } .wk-level { background: #d8d8d0; } .wk-lost { background: #eb9a90; } .wk-won { background: #86cf8c; } .wk.is-now { outline: 2px solid var(--red); outline-offset: -2px; } .wk.is-open { background: var(--navy); color: #ffffff; } .wk-legend { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); margin-top: var(--s4); font-size: 12px; color: var(--ink-muted); align-items: center; } .wk-legend span { display: inline-flex; align-items: center; gap: 6px; } .sw { width: 10px; height: 10px; border-radius: 0; border: 1px solid #9a9a92; display: inline-block; } /* --- rotation matrix -------------------------------------------------- */ .rot-scroll { overflow-x: auto; } .rot { border-collapse: collapse; width: 100%; } .rot th[scope="row"] { text-align: left; font-size: 12px; font-weight: 500; color: var(--ink-soft); padding: 3px var(--s4) 3px 0; white-space: nowrap; } .rot { table-layout: auto; } .rot td { padding: 3px 0; } /* The cells column absorbs whatever is left over, so the name and the count sit at their natural widths and the marks stretch across the rest. Fixed 6px cells left a wide dead band between the marks and the count. */ .rot td.rot-cells-cell { width: 100%; } .rot-count { padding-left: var(--s4) !important; font-size: 12px; color: var(--ink-muted); text-align: right; white-space: nowrap; } .rot-cells { display: flex; gap: 2px; } .rc { /* Grow to share the row, capped so a wide panel does not turn 38 marks into 38 slabs. The old `flex: none` further down this rule was silently cancelling the grow. */ flex: 1 1 0; min-width: 4px; max-width: 20px; height: 14px; border-radius: 0; border: 1px solid #9a9a92; background: var(--surface); } .rc-out { background: var(--surface); border-color: #dcdcd4; } .rc-drawn { background: #d0d0c8; } .rc-pending { background: #e2ddc4; } .rc-lost { background: #eb9a90; } .rc-won { background: #86cf8c; } /* --- sparkline ---------------------------------------------------------- */ .spark { width: 100%; height: 40px; margin: var(--s2) 0; overflow: visible; } .spark polyline { fill: none; stroke: var(--accent-bright); stroke-width: 2; stroke-linejoin: miter; stroke-linecap: butt; vector-effect: non-scaling-stroke; } /* --- scrolling banner --------------------------------------------------- A marquee, done with CSS rather than the tag it is imitating. The track holds the message twice and slides exactly half its width, so the loop is seamless with no gap or jump at the wrap. ----------------------------------------------------------------------- */ .banner { border: var(--bd); background: var(--banner-bg, var(--navy)); color: var(--banner-fg, #ffffff); overflow: hidden; padding: 6px 0; } .banner-track { display: inline-flex; white-space: nowrap; will-change: transform; /* Duration is set from the measured width so the speed is a velocity. The fallback keeps it moving if that script never runs. */ animation: banner-scroll var(--banner-duration, 20s) linear infinite; } .banner-track span { font-family: var(--font-mono); font-size: 13px; font-weight: 700; letter-spacing: 0.04em; } /* Marks the seam so the message reads as a repeating strip rather than an accident. In the markup rather than CSS content so it can be configured, and hidden from assistive tech because it carries no meaning. */ .banner-track i { font-style: normal; padding: 0 var(--s5); opacity: 0.6; } @keyframes banner-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Left-to-right is the same slide played backwards, which keeps the loop seamless in both directions. */ .banner[data-direction="right"] .banner-track { animation-direction: reverse; } /* A scrolling strip is exactly what this setting exists for, so hold it still — but only the movement goes. The repeated copies and their separators stay, so the bar still reads as a full banner rather than one short phrase adrift in a wide empty strip. */ @media (prefers-reduced-motion: reduce) { .banner-track { animation: none; } } /* --- countdown ---------------------------------------------------------- A scoreboard clock: the same ink field as the pot hero, figures in Courier and tabular so the digits do not shuffle sideways as they tick. ----------------------------------------------------------------------- */ .countdown { border: var(--bd); background: var(--countdown-bg, var(--navy)); color: var(--countdown-fg, #ffffff); padding: var(--s3) var(--s4); display: flex; align-items: center; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; } /* The banner's voice: the two strips sit one above the other at the top of the page, and a different face for each read as two unrelated things. Set at the figures' size rather than the banner's, so the message carries the strip instead of sitting small beside a much louder clock. */ .countdown-label { font-family: var(--font-mono); font-size: 32px; line-height: 1; font-weight: 700; letter-spacing: 0.04em; min-width: 0; } .countdown-clock { display: flex; align-items: flex-end; } .countdown-units { display: flex; align-items: flex-end; gap: var(--s2); } .cd-unit { display: flex; flex-direction: column; align-items: center; gap: 2px; } .cd-unit b { font-family: var(--font-mono); font-size: 32px; line-height: 1; font-weight: 700; font-variant-numeric: tabular-nums; /* Two digits' worth, so a rollover from 10 to 9 does not shift the row. */ min-width: 2ch; text-align: center; } /* Dimmed by opacity rather than by a fixed tint: the muted greens elsewhere assume a green field and white ink, and both are configurable here. Fading the chosen colour towards the chosen background works for any pair. */ .cd-unit i { font-style: normal; font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.72; } /* The row is bottom-aligned, so without this the colon lines up with the unit labels rather than with the figures it separates. The padding stands in for the label line the separator does not have. */ .cd-sep { font-family: var(--font-mono); font-size: 30px; line-height: 1; padding-bottom: 16px; opacity: 0.72; } /* One of the two is shown; the other is out of the flow so the strip does not change height when the clock runs out. */ .countdown-done { display: none; font-family: var(--font-head); font-size: 22px; font-weight: 700; padding: var(--s2) 0; } .countdown.is-done .countdown-units { display: none; } .countdown.is-done .countdown-done { display: block; } /* A figure repainting every second is exactly the kind of movement this asks to be spared. The rest of the clock stays live and accurate — only the seconds column goes, and the minutes still turn over on the right second. */ @media (prefers-reduced-motion: reduce) { .countdown-units .cd-seconds { display: none; } } @media (max-width: 640px) { .countdown { justify-content: flex-start; } .countdown-label { font-size: 22px; } .cd-unit b { font-size: 26px; } .cd-sep { font-size: 24px; } } /* --- charts ------------------------------------------------------------- */ .chart { width: 100%; } .chart-head { margin-bottom: var(--s2); }