/* * What both public pages are, before either one is a calendar or a roadmap. * * One stylesheet, no build step, no framework - and one copy, which is the * point. The palette, the top bar, the buttons, the card shell and the credit * at the foot were written for the calendar and are now shared with the * roadmap; kept as two files they would have drifted into two slightly * different shades of the same blue within a year, and nobody would have known * which one was meant. * * Two palettes named once. Which applies is decided by `data-theme` on , * stamped by the inline script in each page's own HTML before the first paint. * That script is the one piece of shared code that cannot live in a file: a * stylesheet or a script the browser has to fetch arrives after the first * paint, and a page that flashes white on the way into dark mode has already * been annoying once. It is therefore duplicated in both pages, with a comment * on both saying so. * * Anything that owns a colour owns a *hue* rather than a colour: the markup * sets `--hue` on an element and the palette here decides what lightness that * hue should be on paper and on a dark screen. Thirteen events and seven * roadmap categories therefore cost twenty numbers rather than forty hex codes * that have to be kept in step. */ :root, :root[data-theme="dark"] { --bg: #0d0f14; --bg-soft: #12141b; --panel: #171a22; --panel-2: #1d212b; --panel-3: #262b37; --line: #2b3140; --line-soft: #21262f; --text: #e9ecf3; --muted: #98a0b0; --faint: #6b7386; --accent: #6d7cff; --accent-soft: #8b97ff; --accent-dim: rgba(109, 124, 255, .16); --hover: rgba(255, 255, 255, .05); --shadow: 0 8px 26px rgba(0, 0, 0, .4); --shadow-lg: 0 26px 68px rgba(0, 0, 0, .55); /* How saturated and how light the colour a thing owns should be. Only the numbers live here; the hue is joined to them per element, below. */ --tone-sl: 70% 66%; --tone-tint-sla: 60% 60% / .16; --tone-edge-sla: 60% 60% / .45; --tone-text-sl: 80% 78%; --today-ring: #6d7cff; color-scheme: dark; } :root[data-theme="light"] { --bg: #f4f5f9; --bg-soft: #eaecf3; --panel: #ffffff; --panel-2: #f7f8fc; --panel-3: #eef0f6; --line: #d6dae5; --line-soft: #e6e9f1; --text: #171a22; --muted: #5a6273; --faint: #858c9d; --accent: #4b57dd; --accent-soft: #3a45bd; --accent-dim: rgba(75, 87, 221, .1); --hover: rgba(20, 26, 45, .045); --shadow: 0 6px 18px rgba(19, 26, 48, .07); --shadow-lg: 0 26px 68px rgba(19, 26, 48, .16); /* * The same hues, pulled down until they hold their own against white - and * tinted harder than the dark palette needs. A wash that reads clearly over * near-black disappears over paper, and twenty things that are all the same * pale lavender is a page that has stopped colour-coding anything. */ --tone-sl: 62% 45%; --tone-tint-sla: 78% 52% / .19; --tone-edge-sla: 55% 48% / .42; --tone-text-sl: 68% 31%; --today-ring: #4b57dd; color-scheme: light; } /* * The colour a thing owns - an event on the calendar, a category on the * roadmap - joined together here rather than in the palette above. * * ## This has to be on `*`, and that is not a style choice * * A custom property's computed value is its declared value **with its own * `var()`s already substituted**, resolved against the element the declaration * sits on. So writing `--tone-tint: hsl(var(--hue, 240) …)` on `:root` does not * make a template that each element fills in with its own hue: it resolves * `--hue` once, on `:root`, where nothing has set one - so it takes the * fallback 240 - and that single finished lavender is what inherits to * everything below. * * That is precisely what the calendar did for as long as it had colour-coded * events, and the symptom was not an error anywhere: thirteen events, thirteen * hues in the data, one shade of blue-violet on screen. The stylesheet and the * README both described a mechanism that was never running. * * Declared here, the substitution happens on each element instead, against the * `--hue` that element inherited or was given. The palette above keeps the two * sets of numbers that genuinely differ between light and dark; this keeps the * one expression that must not be resolved too early. * * The other half of the same bug is worth knowing about when setting a hue: * `style="--hue:135"` written into HTML is an inline style attribute, and * `style-src 'self'` in sites/server.js blocks those. Set it from script with * `element.style.setProperty('--hue', …)`, which goes through the CSSOM and is * not policed by the policy. */ *, ::before, ::after { --tone: hsl(var(--hue, 240) var(--tone-sl)); --tone-tint: hsl(var(--hue, 240) var(--tone-tint-sla)); --tone-edge: hsl(var(--hue, 240) var(--tone-edge-sla)); --tone-text: hsl(var(--hue, 240) var(--tone-text-sl)); } * { box-sizing: border-box; } body { margin: 0; background: radial-gradient(1100px 520px at 12% -8%, var(--accent-dim), transparent 60%), var(--bg); background-attachment: fixed; color: var(--text); font: 15px/1.6 "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; /* A column so the credit at the foot can be pushed to the bottom of a short window rather than sitting halfway up an empty page. */ display: flex; flex-direction: column; min-height: 100vh; } /* * The same credit as the control panel's, and it stays in step with it: the * wording and the mark are meant to match on all three, so a change to one is * a change to the others. `--faint` because it is a signature, not a notice. */ .site-footer { margin-top: auto; padding: 4px clamp(14px, 4vw, 32px) 26px; text-align: center; color: var(--faint); font-size: 11.5px; } .site-footer svg { width: 1.05em; height: 1.05em; vertical-align: -.16em; margin: 0 1px; } h1, h2, h3 { letter-spacing: -.2px; } .muted { color: var(--muted); } .grow { flex: 1; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ------------------------------------------------------------------- bar */ .topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px clamp(14px, 4vw, 32px); background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line-soft); } .brand { display: flex; align-items: center; gap: 12px; min-width: 0; } .brand-mark { width: 40px; height: 40px; flex: none; border-radius: 13px; display: grid; place-items: center; font-size: 21px; background: linear-gradient(140deg, var(--accent), #a855f7); box-shadow: 0 6px 18px hsl(245 80% 60% / .35); } .brand-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; } .brand-text strong { font-size: 16px; } .brand-text small { color: var(--muted); font-size: 12px; } .topbar-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; } /* * The link to the other page. * * Two public pages on one domain that do not know about each other is a missed * introduction: most people who want to know what is coming to the game also * want to know what is on today, and neither page is discoverable from the * other otherwise. Quieter than `.btn` because it is a way out of this page * rather than a control on it. */ .sibling-link { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 11px; border: 1px solid var(--line-soft); background: transparent; color: var(--muted); font: inherit; font-size: 13.5px; text-decoration: none; white-space: nowrap; transition: border-color .14s, background .14s, color .14s; } .sibling-link:hover { border-color: var(--accent); background: var(--panel-2); color: var(--text); } .sibling-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .sibling-link span[aria-hidden] { font-size: 15px; line-height: 1; } .btn { background: var(--panel-2); border: 1px solid var(--line); color: var(--text); border-radius: 11px; padding: 8px 14px; font: inherit; font-size: 14px; cursor: pointer; white-space: nowrap; transition: border-color .14s, background .14s, transform .08s; } .btn:hover { border-color: var(--accent); background: var(--panel-3); } .btn:active { transform: translateY(1px); } .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .btn.icon { padding: 8px 12px; min-width: 40px; font-size: 17px; line-height: 1; } .btn[disabled] { opacity: .45; cursor: default; } .btn[disabled]:hover { border-color: var(--line); background: var(--panel-2); } main { max-width: 1180px; margin: 0 auto; width: 100%; padding: clamp(16px, 3vw, 28px) clamp(14px, 4vw, 32px) 48px; display: flex; flex-direction: column; gap: 18px; } /* The one box shape both pages build everything out of. */ .card { background: linear-gradient(180deg, var(--panel), var(--bg-soft)); border: 1px solid var(--line); border-radius: 18px; padding: clamp(16px, 2.4vw, 22px); box-shadow: var(--shadow); } .card > h2 { margin: 0 0 10px; font-size: 15px; font-weight: 650; } .card > p.muted { margin: 0 0 14px; font-size: 13.5px; } /* -------------------------------------------------------- small screens */ @media (max-width: 760px) { body { background-attachment: scroll; } .brand-text small { display: none; } /* The label goes, the icon stays - it is still obvious what it leads to, and the bar has three other things to fit. */ .sibling-link span:not([aria-hidden]) { display: none; } .sibling-link { padding: 8px 12px; } } @media (pointer: coarse) { .btn, .sibling-link { min-height: 40px; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }