/* ───────────────────────────────────────────────────────────────────────── * THE LOOK. * * One deployment is one station; one station is one look. This is that look, * written down once. Every surface links this file and builds from it — * the cockpit, the website, the Volunteer Hub, the directory, the social * studio, the listener app, the hub launcher and the forms. * * It is the implementation of docs/DESIGN_SYSTEM.md. If the two ever * disagree, the document is right and this file is behind. * * BEFORE YOU ADD A COLOUR HERE, CHECK IT ISN'T ALREADY BELOW. The whole * point of this file is that the eight surfaces stopped each keeping their * own slightly-different copy of the same palette. Six different corner * radii and three different greys is what we are getting rid of. * * Light and dark are declared ONCE, here. A surface never redefines a token. * Dark applies both from the operating system and from an explicit * data-theme="dark" on , so a manual toggle wins in either direction. * * The station's own accent comes from /shared/station.js, which sets * --station-accent on before this file's tokens are read. A new * station changes its colour there, not here. * * Pages keep their own to Sora + Inter; fonts are not imported here * because an @import would block rendering behind a second round trip. * ───────────────────────────────────────────────────────────────────────── */ /* ═══ 1. TOKENS — LIGHT ═══════════════════════════════════════════════════ */ :root { /* The station. These six are the brand and do not vary by theme. --teal is the accent; --teal-deep is the same accent darkened until it can actually be read on a light ground — 5.8:1 on white, where #0e9aa1 managed 3.4:1. */ --navy: #081a36; --navy-2: #0e2c57; --teal: var(--station-accent, #16c7cf); --teal-deep: #0a7176; --coral: #ff6a4d; --gold: #ffc24b; /* Ground and surfaces */ --bg: #f4f5f7; --surface: #ffffff; --surface-2: #f7f8fa; --surface-solid: #ffffff; /* opaque even on dark — for menus and popovers */ /* Ink. On light, --hint sits only just above --muted: three greys cannot be well separated AND all stay above 4.5:1 on a near-white ground, and being readable matters more than being decoratively faint. */ --ink: #0b1a30; --muted: #5b6b80; --hint: #636f7f; --line: #e6e8ec; /* Accent, and the tint of it used behind text */ --accent: #0a7176; --accent-bg: #e6f7f8; /* Three inks, because there are three kinds of coloured fill to sit on. --on-teal goes on the brand teal, which is bright in both themes. --on-coral goes on coral, which is bright in both themes. White on coral reads at 2.8:1 and fails even the large-text floor; this is 5.5:1. --on-accent goes on --accent, which DARKENS on light and so wants white. */ --on-teal: #04282a; --on-coral: #04282a; --on-accent: #ffffff; /* Semantics. Every one is a pair: the ink, and the wash behind it. */ --ok: #137a4b; --ok-bg: #e4f5ec; --warn: #a04916; --warn-bg: #fdf0e6; --danger: #b3261e; --danger-bg: #fdecea; --live: #b3341f; --live-bg: #ffe7e1; /* Space — 4px base, ten steps, nothing in between */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 56px; --s-10: 72px; /* Radius — four steps and a pill. Not six-and-a-half. */ --r-s: 8px; --r: 12px; --r-l: 16px; --r-xl: 22px; --r-pill: 999px; /* Elevation — three steps */ --shadow-s: 0 4px 14px rgba(8,26,54,.08); --shadow: 0 8px 24px rgba(8,26,54,.10); --shadow-l: 0 18px 50px rgba(8,26,54,.16); /* Type */ --font-display: 'Sora', system-ui, sans-serif; --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace; --t-hero: 44px; --lh-hero: 1.1; --t-h1: 30px; --lh-h1: 1.2; --t-h2: 22px; --lh-h2: 1.25; --t-h3: 17px; --lh-h3: 1.3; --t-body: 15px; --lh-body: 1.55; --t-sm: 13.5px;--lh-sm: 1.5; --t-xs: 12px; --lh-xs: 1.4; --t-micro: 11px; --lh-micro: 1.3; /* Motion */ --ease: cubic-bezier(.2,.6,.3,1); --dur-1: 120ms; /* hover, active, small state changes */ --dur-2: 200ms; /* things entering and leaving */ /* Layout */ --max-public: 1160px; --max-ops: 1440px; --gutter: 24px; --topbar-h: 56px; /* The console rail. Both of these live HERE, in the light tokens, and not only under the console theme — a Hub switched to light still has a rail, and it still has to be a certain number of pixels wide. * * That is not a tidiness point. --rail-w feeds grid-template-columns on * .shell, and an undefined custom property makes the WHOLE declaration * invalid at computed-value time: the two-column shell silently became one * column, the rail stretched across the full width, and every page of content * fell below the fold. The console overrides --rail with something darker; * the width is the same in every theme. */ --rail: #eceef2; /* a shade below --bg, as a rail should be */ --rail-w: 264px; /* The mini rail's width is a token because it is read in two places that cannot see each other: the rail itself, and the Social Hub, which pins its rail and holds the page off it with a margin. Expanding the rail moves both by moving one number. */ --rail-mini-w: 60px; /* Control metrics. Operational surfaces override these — see §3. */ --control-h: 38px; --row-h: 40px; --card-r: var(--r); --card-pad: var(--s-4); color-scheme: light; } /* ═══ 2. TOKENS — DARK ════════════════════════════════════════════════════ */ /* Declared twice on purpose: once for the operating system's preference (unless the page has explicitly asked for light), and once for an explicit choice, so a manual toggle wins in BOTH directions. Only the tokens that actually change are repeated. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: var(--navy); --surface: rgba(255,255,255,.06); --surface-2: rgba(255,255,255,.09); --surface-solid: #102a4f; --ink: #eaf1fb; --muted: #9bb3d0; --hint: #7f96b4; --line: rgba(255,255,255,.12); --accent: var(--teal); --accent-bg: rgba(22,199,207,.18); --on-accent: #04282a; --ok: #bfe9af; --ok-bg: rgba(92,194,74,.18); --warn: #ffc98a; --warn-bg: rgba(255,163,77,.18); --danger: #ffb3a1; --danger-bg: rgba(255,106,77,.16); --live: #ff9c85; --live-bg: rgba(255,106,77,.18); --shadow-s: 0 4px 14px rgba(0,0,0,.35); --shadow: 0 10px 30px rgba(0,0,0,.45); --shadow-l: 0 18px 50px rgba(0,0,0,.55); color-scheme: dark; } } /* The same block again for an explicit choice — and for a DARK BAND on a light page. A public page is light, but its hero and its footer sit on navy, and text inside them needs the dark theme's inks. Before .on-dark existed each band invented its own — #9bf0ef here, #8aa4c2 there — and those inks were the last place the palette could drift. Put class="on-dark" on the band and it gets the same tokens the dark theme gets; nothing inside it needs to know what colour it is sitting on. */ :root[data-theme="dark"], :root[data-theme="console"], .on-dark, .topbar-dark { --bg: var(--navy); --surface: rgba(255,255,255,.06); --surface-2: rgba(255,255,255,.09); --surface-solid: #102a4f; --ink: #eaf1fb; --muted: #9bb3d0; --hint: #7f96b4; --line: rgba(255,255,255,.12); --accent: var(--teal); --accent-bg: rgba(22,199,207,.18); --on-accent: #04282a; --ok: #bfe9af; --ok-bg: rgba(92,194,74,.18); --warn: #ffc98a; --warn-bg: rgba(255,163,77,.18); --danger: #ffb3a1; --danger-bg: rgba(255,106,77,.16); --live: #ff9c85; --live-bg: rgba(255,106,77,.18); --shadow-s: 0 4px 14px rgba(0,0,0,.35); --shadow: 0 10px 30px rgba(0,0,0,.45); --shadow-l: 0 18px 50px rgba(0,0,0,.55); color-scheme: dark; } /* ═══ 2b. TOKENS — CONSOLE ════════════════════════════════════════════════ */ /* The console is the dark theme on a deeper ground. It is what the Hubs wear — the hub, the cockpit, the Volunteer Hub, the Social Hub and the directory — and it exists because a control room is not a web page: it is looked at for hours, mostly at night, and the panels need to separate from the ground by an edge rather than by glow. * * Only the grounds change. Every ink, every semantic pair, every radius and * every size is the dark theme's, unchanged, so nothing has to be decided * twice. Surfaces opt in with data-theme="console" on ; the listener * app and the public website deliberately do not. * * The panels are opaque here, not rgba white. On navy a translucent panel * reads fine; on near-black it turns to grey soup and every nested surface * compounds the last one. */ :root[data-theme="console"] { --bg: #070b14; /* deeper than --navy, so navy itself can be a panel */ --surface: #0e1626; --surface-2: #131d30; --surface-solid: #0e1626; --line: rgba(255,255,255,.09); /* The sidebar sits a shade below the ground, the way a rail should. Only the colour belongs to the console — the WIDTH is declared with the light tokens in §1, for the reason written there. */ --rail: #0a1120; } /* An OPERATIONAL console ground is flat. Several surfaces paint the "studio gradient" — two teal-lit radials over navy — on , and it is lovely on a launcher and wrong behind a night's work: it puts a moving tint under panels that are meant to be read against something neutral. * * That reasoning is about working, not about being dark, so it is scoped to * ops. A public surface on the console ground — the website, the listener app — * keeps its gradient: nobody reads a table on it for six hours, and the coast * palette doing something is the entire point of a public page. */ :root[data-theme="console"][data-surface="ops"] body { background: var(--bg); background-attachment: initial; } /* ═══ 3. DENSITY ══════════════════════════════════════════════════════════ */ /* The only thing separating an operational surface from a public one. Put data-surface="ops" on in the cockpit, the Volunteer Hub and the Social Hub; data-surface="public" on the website, the directory and the listener app. Everything else follows from these numbers. */ :root[data-surface="ops"] { --control-h: 32px; --row-h: 34px; --card-r: var(--r-s); --card-pad: var(--s-3); --gutter: var(--s-6); } :root[data-surface="public"] { --card-r: var(--r-l); --card-pad: var(--s-5); } /* ═══ 4. BASE ═════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: var(--t-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { font-family: var(--font-display); margin: 0; } h1 { font-size: var(--t-h1); line-height: var(--lh-h1); font-weight: 700; } h2 { font-size: var(--t-h2); line-height: var(--lh-h2); font-weight: 700; } h3 { font-size: var(--t-h3); line-height: var(--lh-h3); font-weight: 600; } a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; } /* Focus is never removed. A keyboard user has to be able to see where they are, on every surface, including the dense ones. */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-s); } .hero { font-family: var(--font-display); font-size: var(--t-hero); line-height: var(--lh-hero); font-weight: 800; } .muted { color: var(--muted); } .hint { color: var(--hint); } .small { font-size: var(--t-sm); line-height: var(--lh-sm); } .xs { font-size: var(--t-xs); line-height: var(--lh-xs); } .eyebrow { font-size: var(--t-micro); line-height: var(--lh-micro); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); } .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } @media (max-width: 640px) { .hero { font-size: 32px; } } /* ═══ 5. LAYOUT ═══════════════════════════════════════════════════════════ */ .wrap { max-width: var(--max-public); margin-inline: auto; padding-inline: var(--gutter); } .wrap-ops { max-width: var(--max-ops); margin-inline: auto; padding-inline: var(--gutter); } .row { display: flex; align-items: center; gap: var(--s-3); } .row-b { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); } .stack { display: flex; flex-direction: column; gap: var(--s-3); } .grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } .spacer{ flex: 1 1 auto; } @media (max-width: 640px) { :root { --gutter: 16px; } .grid { grid-template-columns: 1fr; } } /* ═══ 6. BUTTON ═══════════════════════════════════════════════════════════ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); height: var(--control-h); padding: 0 var(--s-4); border: 1px solid transparent; border-radius: var(--r); background: var(--surface); color: var(--ink); font-family: var(--font-body); font-size: var(--t-body); font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer; transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); } .btn:hover { background: var(--surface-2); } .btn:active { transform: translateY(1px); } .btn[disabled], .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; } .btn-primary { background: var(--teal); color: var(--on-teal); border-color: transparent; } .btn-primary:hover { background: var(--teal-deep); color: #fff; } .btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--line); } .btn-ghost { background: transparent; color: var(--muted); border-color: transparent; } .btn-ghost:hover { background: var(--surface-2); color: var(--ink); } .btn-danger { background: var(--danger-bg); color: var(--danger); border-color: transparent; } .btn-sm { height: 30px; padding: 0 var(--s-3); font-size: var(--t-sm); border-radius: var(--r-s); } /* ═══ 7. CARD ═════════════════════════════════════════════════════════════ */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--card-r); box-shadow: var(--shadow-s); padding: var(--card-pad); } .card > h3, .card > .card-title { margin-bottom: var(--s-2); } .card-title { font-family: var(--font-display); font-size: var(--t-h3); line-height: var(--lh-h3); font-weight: 600; } /* ═══ 8. TABLE ════════════════════════════════════════════════════════════ */ .table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); } .table th { text-align: left; font-size: var(--t-micro); line-height: var(--lh-micro); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); background: var(--surface-2); padding: 0 var(--s-3); height: var(--row-h); border-bottom: 1px solid var(--line); white-space: nowrap; } .table td { padding: 0 var(--s-3); height: var(--row-h); border-bottom: 1px solid var(--line); vertical-align: middle; } .table tbody tr { transition: background var(--dur-1) var(--ease); } .table tbody tr:hover { background: var(--surface-2); } .table .num { text-align: right; font-variant-numeric: tabular-nums; } /* ═══ 9. BADGE, PILL, LIVE ════════════════════════════════════════════════ */ /* A badge always carries a word. Colour on its own is not a status — it does not survive being printed, dimmed, or read by someone colour-blind. */ .badge { display: inline-flex; align-items: center; gap: var(--s-1); padding: 3px 10px; border-radius: var(--r-pill); font-size: var(--t-xs); line-height: var(--lh-xs); font-weight: 600; background: var(--surface-2); color: var(--muted); white-space: nowrap; } .badge-ok { background: var(--ok-bg); color: var(--ok); } .badge-warn { background: var(--warn-bg); color: var(--warn); } .badge-danger { background: var(--danger-bg); color: var(--danger); } .badge-accent { background: var(--accent-bg); color: var(--accent); } .live { display: inline-flex; align-items: center; gap: var(--s-2); padding: 3px 10px 3px 8px; border-radius: var(--r-pill); background: var(--live-bg); color: var(--live); font-size: var(--t-xs); font-weight: 700; letter-spacing: .04em; } .live::before { content: ""; width: 7px; height: 7px; border-radius: var(--r-pill); background: currentColor; animation: live-pulse 2s var(--ease) infinite; } @keyframes live-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } } /* ═══ 10. FORM ════════════════════════════════════════════════════════════ */ .field { display: flex; flex-direction: column; gap: var(--s-1); } .label { font-size: var(--t-xs); line-height: var(--lh-xs); font-weight: 500; color: var(--muted); } .input, .select, .textarea { height: var(--control-h); padding: 0 var(--s-3); border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface); color: var(--ink); font-family: var(--font-body); font-size: var(--t-body); transition: border-color var(--dur-1) var(--ease); } .textarea { height: auto; min-height: 90px; padding: var(--s-2) var(--s-3); line-height: var(--lh-body); } .input:hover, .select:hover, .textarea:hover { border-color: var(--muted); } .input::placeholder, .textarea::placeholder { color: var(--hint); } .input[aria-invalid="true"], .textarea[aria-invalid="true"], .select[aria-invalid="true"] { border-color: var(--danger); } .field-error { font-size: var(--t-xs); color: var(--danger); } /* ═══ 11. TABS ════════════════════════════════════════════════════════════ */ .tabs { display: flex; gap: var(--s-1); border-bottom: 1px solid var(--line); } .tab { appearance: none; background: none; border: 0; cursor: pointer; padding: 10px 14px; margin-bottom: -1px; border-bottom: 2px solid transparent; font-family: var(--font-body); font-size: var(--t-sm); font-weight: 600; color: var(--muted); transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease); } .tab:hover { color: var(--ink); } .tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--teal); } /* ═══ 12. TOP BAR ═════════════════════════════════════════════════════════ */ .topbar { display: flex; align-items: center; gap: var(--s-3); height: var(--topbar-h); padding-inline: var(--gutter); background: var(--surface-solid); border-bottom: 1px solid var(--line); } /* A dark band carries the dark inks with it, so anything dropped inside one — a card, a badge, a muted line — reads correctly without being told. * * .topbar-dark belongs here too, and forgetting it was a real bug: it redefines * the tokens but, without this line, never applies one, so it inherited the * PAGE's ink. On a dark page that happens to be right and nothing shows; on a * light page it is #0b1a30 on navy — 1.01:1, a title you cannot see. A bug that * only exists in one theme is a bug that ships. */ .on-dark, .topbar-dark { color: var(--ink); } /* The dark top bar is simply a band that happens to be the top bar. It used to spell its own ink and its own muted grey; now it inherits both. */ .topbar-dark { background: var(--navy); border-bottom-color: var(--line); } /* ═══ 13. MODAL ═══════════════════════════════════════════════════════════ */ .scrim { position: fixed; inset: 0; z-index: 90; background: rgba(8,26,54,.55); animation: fade-in var(--dur-2) var(--ease); } .modal { position: fixed; z-index: 91; left: 50%; top: 50%; transform: translate(-50%,-50%); width: min(560px, calc(100vw - 2 * var(--gutter))); max-height: calc(100vh - 2 * var(--gutter)); overflow: auto; background: var(--surface-solid); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--shadow-l); padding: var(--s-6); animation: modal-in var(--dur-2) var(--ease); } @keyframes fade-in { from { opacity: 0; } } @keyframes modal-in { from { opacity: 0; transform: translate(-50%,-46%); } } /* ═══ 14. TOAST ═══════════════════════════════════════════════════════════ */ .toasts { position: fixed; z-index: 95; right: var(--gutter); bottom: var(--gutter); display: flex; flex-direction: column; gap: var(--s-2); } .toast { padding: var(--s-3) var(--s-4); border-radius: var(--r); background: var(--surface-solid); border: 1px solid var(--line); box-shadow: var(--shadow); font-size: var(--t-sm); animation: toast-in var(--dur-2) var(--ease); } .toast-ok { background: var(--ok-bg); color: var(--ok); border-color: transparent; } .toast-danger { background: var(--danger-bg); color: var(--danger); border-color: transparent; } @keyframes toast-in { from { opacity: 0; transform: translateY(8px); } } @media (max-width: 640px) { .toasts { left: var(--gutter); right: var(--gutter); align-items: stretch; } } /* ═══ 15. EMPTY STATE ═════════════════════════════════════════════════════ */ /* Never a bare "No data" — say what would be here, and offer the thing that puts it there. */ .empty { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); padding: var(--s-8) var(--s-4); text-align: center; } .empty i { font-size: 32px; color: var(--hint); } .empty-title { font-family: var(--font-display); font-size: var(--t-h3); font-weight: 600; } .empty p { margin: 0; font-size: var(--t-sm); color: var(--muted); } /* ═══ 16. MOTION ══════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .btn:active { transform: none; } .live::before { animation: none; } } /* ═══ 17. TOUCH ═══════════════════════════════════════════════════════════ */ /* A finger needs 44px. Pointer-coarse rather than a width query, because a tablet in landscape is wide and still being touched. */ @media (pointer: coarse) { :root[data-surface="public"] { --control-h: 44px; --row-h: 48px; } /* Operational surfaces too. A finger is the same size in the cockpit as it is on the website, and density is about how much fits on a screen — not about how small a thing may be to hit. So the tight radii, the type scale and the spacing all stay; only the two numbers a thumb has to land on move. Still denser than public, which goes to 48px rows. */ :root[data-surface="ops"] { --control-h: 44px; --row-h: 44px; } .tab { padding: 13px 16px; } } /* ═══ 18. THE CONSOLE SHELL ═══════════════════════════════════════════════ */ /* Every Hub is the same room seen from a different desk, so they share a frame: a rail down the left that says where you are in the suite, and a bar across the top that says what the station is doing right now. Both are fixed. Only the middle scrolls. * * The rail is the thing the old suite was missing. Each Hub used to open * as an island with a drop-down switcher hidden in a corner, and moving * between them meant remembering they existed. */ .shell { display: grid; grid-template-columns: var(--rail-w) 1fr; min-height: 100vh; } /* ── the rail ─────────────────────────────────────────────────────────── */ .rail { position: sticky; top: 0; align-self: start; height: 100vh; display: flex; flex-direction: column; background: var(--rail); border-right: 1px solid var(--line); } .rail-brand { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-5) var(--s-5) var(--s-6); } .rail-mark { width: 38px; height: 38px; flex: none; border-radius: var(--r); background: var(--teal); color: var(--on-teal); display: flex; align-items: center; justify-content: center; font-size: 20px; } .rail-mark img { width: 100%; height: 100%; object-fit: contain; border-radius: var(--r); } .rail-name { font-family: var(--font-display); font-weight: 700; font-size: var(--t-h3); line-height: 1.15; } .rail-sub { font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .rail-nav { display: flex; flex-direction: column; gap: 2px; padding: 0 var(--s-3); } .rail-nav a { display: flex; align-items: center; gap: var(--s-3); padding: 11px var(--s-3); border-radius: var(--r); color: var(--muted); text-decoration: none; font-size: var(--t-body); font-weight: 500; transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease); } .rail-nav a i { font-size: 19px; } .rail-nav a:hover { background: var(--surface); color: var(--ink); } /* Where you are is stated twice — a tinted bed and a bar on the leading edge — because on a dim screen a colour change alone is easy to miss. */ .rail-nav a.is-here { background: var(--accent-bg); color: var(--accent); font-weight: 600; box-shadow: inset 3px 0 0 var(--teal); } .rail-foot { margin-top: auto; padding: var(--s-5); border-top: 1px solid var(--line); text-align: center; font-size: var(--t-xs); color: var(--muted); line-height: 1.5; } /* ── the mini rail ────────────────────────────────────────────────────── */ /* The launcher has room for one rail. A working Hub does not: the cockpit carries about thirty modules in eight groups down its own nav, and those modules and the seven Hubs are not the same kind of thing — one is where you are working, the other is which room you are in. * * So the Hubs get a narrow strip against the edge, icons only, and the * module nav keeps its place beside it. It costs 60px and it means you can * always see the way out, which a drop-down in a corner never gave you. */ .rail-mini { width: var(--rail-mini-w); flex: none; display: flex; flex-direction: column; gap: 2px; padding: var(--s-2) var(--s-2) var(--s-4); background: var(--rail); border-right: 1px solid var(--line); overflow-y: auto; overscroll-behavior: contain; transition: width var(--dur-2) var(--ease); } .rail-mini a { display: flex; align-items: center; justify-content: center; height: 44px; border-radius: var(--r); color: var(--muted); text-decoration: none; font-size: 19px; transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease); } .rail-mini a span { display: none; } /* the label lives in the tooltip */ .rail-mini a:hover { background: var(--surface); color: var(--ink); } .rail-mini a.is-here { background: var(--accent-bg); color: var(--accent); box-shadow: inset 3px 0 0 var(--teal); } /* Open the rail and the tooltips become labels. * * Icons alone are fast once you know them and a guessing game until you do, so * the strip can be widened — but it is the same rail either way, not a second * component: one extra class on , and the icons stay exactly where the * hand already expects them. The state is written from shared/hubs.js and * remembered per person, so every Hub opens the way you left the last one. */ .rail-toggle { margin-top: auto; /* under the Hubs, not among them */ display: flex; align-items: center; justify-content: center; height: 36px; flex: none; border: 0; border-radius: var(--r); background: transparent; color: var(--muted); font-family: inherit; font-size: 19px; cursor: pointer; transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease); } .rail-toggle:hover { background: var(--surface); color: var(--ink); } .rail-toggle i { flex: none; transition: transform var(--dur-2) var(--ease); } .rail-toggle span { display: none; } :root.rail-open { --rail-mini-w: 186px; } :root.rail-open .rail-mini a, :root.rail-open .rail-toggle { justify-content: flex-start; gap: var(--s-3); padding: 0 var(--s-3); } :root.rail-open .rail-mini a span, :root.rail-open .rail-toggle span { display: block; font-size: var(--t-sm); font-family: var(--font-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } :root.rail-open .rail-toggle i { transform: rotate(180deg); } /* On a phone the module nav is already a drawer, so a second fixed strip is just lost width — the strip goes, and the top bar's switcher comes back to cover for it. */ @media (max-width: 900px) { .rail-mini { display: none; } } /* The drop-down switcher that every Hub used to carry in its top bar. The rail says which room you are in and gets you to the others, so on a wide screen the button is saying it twice. It is not deleted, because the rail is the thing that disappears on a phone: mark the switcher .rail-fallback and it shows up exactly where the rail does not. * * Anything hidden this way must be a duplicate of what the rail offers. The * moment it holds something the rail does not, this stops being a fallback and * starts being a thing only phone users can reach. */ /* !important, deliberately, and the only one in this file. Each surface loads its own