/** * HipNumber Brand v1.1 tokens - the one place colour is decided. * * Every console page used to carry its own identical `:root` block. Twelve * copies of the same values is twelve chances for them to drift, and it made a * light mode impossible without editing all of them. This is that block, * extracted, with the light scheme filled in. * * THREE STATES, and the order matters: * * :root the LIGHT palette, always defined * :root:not([data-theme="light"]) @media the system preference * :root[data-theme="dark"] an explicit choice, which wins * * Defining light on bare `:root` is what makes the system-preference block * safe: a colour whose ONLY definition lives inside a media query is undefined * for anybody whose browser reports the other preference. * * The legacy alias names (--night, --panel, --cream, --sticker …) are kept and * mapped onto the semantic set, so existing page CSS keeps working unchanged. * They are aliases now, not definitions - do not add colours outside --hn-*. */ :root { /* ---- brand constants: identical in both schemes ---------------------- */ --hn-orange: #F97316; --hn-orange-deep: #EA580C; --hn-navy: #0F2347; --hn-off-white: #F7F5F2; --hn-cool-gray: #D9DEE7; --hn-charcoal: #1F2937; /* ---- light: the corporate default (brand skill §8) ------------------- */ --hn-bg: #F7F5F2; --hn-bg-subtle: #FFFFFF; --hn-bg-raised: #FFFFFF; --hn-bg-hi: #EDF0F5; --hn-heading: #0F2347; --hn-text: #1F2937; --hn-muted: #5B6675; /* 4.5:1 on the light page: small uppercase labels, and they are read. */ --hn-faint: #626D80; --hn-border: #D9DEE7; --hn-border-hi: #C2CBD9; /* Orange is a FILL colour, not an ink colour. #F97316 as TEXT on the light page measures 2.58:1 - the hip number and the asking price were the two most important figures on the screen and the two least readable. This is the same hue carried down until it can be read; the fill stays canonical. */ --hn-orange-ink: #C2410C; /* A success fill carries its own label colour, because what reads on #15803D is not what reads on #4ADE80. "Going once" was navy on dark green at 3.10:1. */ --hn-ok-fill: #15803D; --hn-ok-on: #FFFFFF; /* Semantic status. Darkened from the canonical values where they sit on a light surface as TEXT: #16A34A is 3.30:1 on white, short of AA, and a status word is read. Accessibility outranks brand exactness (§20). */ --hn-ok: #15803D; --hn-warn: #B45309; --hn-bad: #B42318; --hn-danger: #DC2626; /* A surface that deliberately contrasts with the page in BOTH schemes: toasts, printed cards, anything that must read as "on top". */ --hn-invert-bg: #0F2347; --hn-invert-fg: #FFFFFF; --hn-shadow: 0 14px 40px rgba(15, 35, 71, .16); /* ---- radii ----------------------------------------------------------- */ --r: 12px; --r-sm: 8px; /* ---- type ------------------------------------------------------------ */ --display: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --serif: var(--display); --mono: ui-monospace, 'SF Mono', Menlo, Consolas, 'Courier New', monospace; /* ---- legacy aliases -------------------------------------------------- */ --night: var(--hn-bg); --night-deep: var(--hn-bg-hi); --panel: var(--hn-bg-subtle); --panel-up: var(--hn-bg-raised); --panel2: var(--hn-bg-hi); --paper: var(--hn-bg-subtle); --sticker: var(--hn-orange); --sticker-deep: var(--hn-orange-deep); --ink: var(--hn-navy); --cream: var(--hn-text); --cream-dim: var(--hn-muted); --cream-faint: var(--hn-faint); --line: var(--hn-border); --hammer: var(--hn-danger); --ok: var(--hn-ok); --warn: var(--hn-warn); --bad: var(--hn-bad); --annie: var(--hn-orange); } /* ---- dark, as the system asks for it. Never the only definition. -------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --hn-bg: #0B1220; --hn-bg-subtle: #101B2D; --hn-bg-raised: #16243A; --hn-bg-hi: #1C2A40; --hn-heading: #FFFFFF; --hn-text: #E8EDF5; --hn-muted: rgba(232, 237, 245, .62); --hn-faint: rgba(232, 237, 245, .42); --hn-border: rgba(232, 237, 245, .11); --hn-border-hi: rgba(232, 237, 245, .20); /* Lifted off the light-mode values: the darker greens and ambers do not clear AA against a navy surface. */ --hn-orange-ink: var(--hn-orange); --hn-ok-fill: #4ADE80; --hn-ok-on: #0F2347; --hn-ok: #4ADE80; --hn-warn: #FBBF24; --hn-bad: #F87171; --hn-invert-bg: #F7F5F2; --hn-invert-fg: #0F2347; --hn-shadow: 0 16px 44px rgba(0, 0, 0, .5); --night-deep: #070D18; --paper: var(--hn-off-white); } } /* ---- dark, chosen. Wins over the system preference in both directions. --- */ :root[data-theme="dark"] { --hn-bg: #0B1220; --hn-bg-subtle: #101B2D; --hn-bg-raised: #16243A; --hn-bg-hi: #1C2A40; --hn-heading: #FFFFFF; --hn-text: #E8EDF5; --hn-muted: rgba(232, 237, 245, .62); --hn-faint: rgba(232, 237, 245, .42); --hn-border: rgba(232, 237, 245, .11); --hn-border-hi: rgba(232, 237, 245, .20); --hn-orange-ink: var(--hn-orange); --hn-ok-fill: #4ADE80; --hn-ok-on: #0F2347; --hn-ok: #4ADE80; --hn-warn: #FBBF24; --hn-bad: #F87171; --hn-invert-bg: #F7F5F2; --hn-invert-fg: #0F2347; --hn-shadow: 0 16px 44px rgba(0, 0, 0, .5); --night-deep: #070D18; --paper: var(--hn-off-white); } /* ---- the toggle -------------------------------------------------------- */ /* One control, three states, on every page that has somebody looking at it. Icon plus a label, because a sun/moon glyph alone is a state communicated by picture only, and the reading of it flips depending on whether you think it shows the current mode or the one you would get. */ .hn-theme { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--hn-border-hi); background: var(--hn-bg-raised); color: var(--hn-text); border-radius: 8px; padding: 8px 12px; font: 600 13px/1 var(--display); cursor: pointer; white-space: nowrap; } .hn-theme:hover { border-color: var(--hn-orange); } .hn-theme:focus-visible { outline: 2px solid var(--hn-orange); outline-offset: 2px; } .hn-theme .ico { font-size: 14px; line-height: 1; } @media (max-width: 620px) { .hn-theme .txt { display: none; } .hn-theme { padding: 8px 10px; } } /* ---- scrollbars -------------------------------------------------------- */ /* The default OS scrollbar is a wide grey slab that belongs to no theme and reads as a seam down the side of a panel. These are the same surfaces and borders as everything else, and they thin out until you are pointing at them. `scrollbar-width`/`scrollbar-color` is the standard property (Firefox, and Chrome 121+); the ::-webkit- rules cover the WebKit engines that do not honour it yet. Both are stated because neither covers everything. Deliberately NOT `scrollbar-width: none`: a scrollbar is how somebody knows there is more catalog below the fold, and hiding it to look tidy costs them that. */ * { scrollbar-width: thin; scrollbar-color: var(--hn-border-hi) transparent; } ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--hn-border-hi); border-radius: 999px; /* Inset with a transparent border so the thumb reads as a slim pill rather than a full-width bar. */ border: 3px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: var(--hn-muted); background-clip: content-box; } ::-webkit-scrollbar-corner { background: transparent; } /* ---- station switcher ("Matt · Ring Clerk ▾") ---------------------------- Lives HERE, once, because it is chrome every station shares. It used to be pasted inline into each page's