/* UserBus studio — design system and layout. Dark is the default; the customer can choose and persist a light ground. Both palettes are measured in test/studio/design_ground_test.exs. Media retains a black field in either theme. The register is an edit suite rather than a marketing page: a monospaced face for anything technical, tabular figures for numbers, and a denser scale (4 · 8 · 12 · 16 · 24 · 32). No web fonts, no third-party requests, no gradients. */ :root { color-scheme: dark; /* Typography: one system stack, five sizes, tabular numerals for data. */ /* THE LANDING'S OWN STACK, VERBATIM (`--sans` in landing/public/styles.css): transit signage is the product's voice, and it ships no font files. */ --font-sans: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --fs-xs: 0.75rem; /* 12px — metadata, chips */ --fs-sm: 0.8125rem; /* 13px — dense data, table cells */ --fs-md: 0.9375rem; /* 15px — body, controls */ --fs-lg: 1.125rem; /* 18px — section titles */ --fs-xl: 1.625rem; /* 26px — page titles */ --lh-tight: 1.25; --lh-body: 1.55; /* Spacing scale */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; /* ---- THE PALETTE IS THE LANDING'S DARK REGISTER, TAKEN VERBATIM (2026-09-20) ---- The studio is one product with landing/public/styles.css, and the landing HAS a dark register - it uses it exactly where a figure is being judged: `.calc-board` (the calculators' result panel) is `background: var(--black); color: var(--white)` with the key figures in `var(--yellow)`, `.board-section` is black with an amber "on" dot, and `--night-rule: #3a3a3a` is a rule colour the landing declares FOR DARK SURFACES ONLY. So the studio is that register, scaled from a panel to an application, and every colour below is the landing's own token rather than a second palette invented beside it. WHY NOT `#000` FOR THE PAGE: on the landing black is a BAND inside a white page; here it is the whole page, and at pure black every panel edge and rule must be LIGHTER than the surface to be seen at all - a bright grid around a dark picture. `#0a0a0a` is 1.05:1 from `#000` (below the threshold at which a human reads it as a second colour) and it keeps the picture the darkest thing on the screen. See docs/landing-language-adoption.md §2. */ --c-bg: #0a0a0a; --c-bg-raised: #0f0f0f; --c-surface: #111111; --c-surface-2: #171717; --c-surface-3: #1f1f1f; --c-line: #2a2a2a; --c-line-strong: #3a3a3a; /* the landing's --night-rule, verbatim */ /* Text: the landing's --white, and the greys it uses ON BLACK (.board "off" is #c9c9c9, .board-section's lead is #e2e2e2). */ --c-text: #ffffff; --c-text-soft: #e2e2e2; --c-text-dim: #c9c9c9; --c-text-invert: #000000; /* THE ACCENT IS THE PRODUCT'S COLOUR: the landing's signage yellow, verbatim. */ --c-accent: #ffd400; --c-accent-ink: #ffd400; --c-accent-strong: #ffe14d; --c-accent-quiet: rgba(255, 212, 0, 0.14); --c-accent-line: rgba(255, 212, 0, 0.45); /* THE SELECTED STATE (userbus-design tokens.css, 2026-09-27, userbus/docs#35): the active nav item, the balance pill on a billing page, a checked option. On dark it is a lighter NEUTRAL step - the translucent yellow over black read as a muddy yellow-brown - and the yellow stays in the icon or the edge. */ --c-selected: #262626; --c-selected-line: #5c5c5c; /* Semantic state colours, in the landing's own vocabulary: AMBER is what the landing uses for "on/live" and nothing else (`.board [data-state="on"]`), `--alarm` is its negative, and the strong figure is the accent - so DELIVERED reads in yellow and the studio's green is gone, because a hue the product does not own would be the one thing on the screen that does not belong to it. The dashed border is the landing's "planned/unknown" mark. */ --c-queued: #c9c9c9; --c-running: #ffb000; --c-succeeded: #ffd400; --c-failed: #ff8a75; --c-canceled: #c9c9c9; --c-warn: #ffb000; /* THE WORK IS THE HERO: media keeps a neutral black field of its own, and the frame it sits in is the widest thing on the page. */ --c-media: #000000; --w-media: 100%; /* EDGES, FROM THE LANDING: its radii are 4/6/8/12/14/18 and its biggest panel (the calculator's card) is 14px; and it has NO DROP SHADOWS ANYWHERE - structure is carried by rules and surfaces, not by things that float. The studio's two shadow tokens are gone with their usages, which is the single biggest visual difference between the two surfaces today. */ --r-sm: 4px; --r-md: 8px; --r-lg: 14px; --r-pill: 999px; /* userbus-design tokens.css: a pill is a pill, whatever its height */ /* CONTROL HEIGHTS, ONE PAIR: every button, input and select is 36px on a pointer and 44px where the pointer is a finger (≤720px or a coarse pointer); the large size is 44/48. The height is EXACT - `padding-block: 0` and a 20px line - so a 36px control measures 36, not 38.15. */ --ctl-md: 36px; --ctl-lg: 44px; --ctl-touch: 44px; --ctl-touch-lg: 48px; /* THE BUTTON FILLS: the secondary button is a raised surface with the strong rule; the primary is the yellow with no edge of its own on the dark ground (the fill is the edge) and a black one on light. */ --c-btn: var(--c-surface-2); --c-btn-hover: var(--c-surface-3); --c-primary-edge: transparent; --c-accent-hover: var(--c-accent-strong); /* THE FOCUS RING IS THE LANDING'S: 3px, offset 3px. On a dark surface the landing sets its focus colour to the yellow (`.calc-board`, `.strip`, `.board-section` all do `--focus: var(--yellow)`), which is what the studio is, so the ring is the accent. */ --focus: 3px solid var(--c-accent-ink); --focus-offset: 3px; } :root[data-theme="light"] { color-scheme: light; --c-bg: #f7f7f7; --c-bg-raised: #ffffff; --c-surface: #ffffff; --c-surface-2: #f2f2f2; --c-surface-3: #e9e9e9; --c-line: #d9d9d9; --c-line-strong: #858585; --c-text: #000000; --c-text-soft: #000000; --c-text-dim: #5c5c5c; --c-accent-ink: #000000; --c-accent-line: #000000; --c-selected: #fff7d1; --c-selected-line: #000000; --c-queued: #5c5c5c; --c-running: #000000; --c-succeeded: #000000; --c-failed: #b00020; --c-canceled: #5c5c5c; --c-warn: #000000; /* ON WHITE a #f2f2f2 secondary reads as a muddy slab: the secondary is white with the strong rule, and the primary keeps the landing's black edge so the yellow holds on white. */ --c-btn: #ffffff; --c-btn-hover: #f2f2f2; --c-primary-edge: #000000; --c-accent-hover: #f0c400; } /* Everlabs' rotating sun/moon idea, with UserBus colours and no decorative glow. */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; padding: 0; border: 1px solid var(--c-line-strong); border-radius: 50%; background: var(--c-surface); color: var(--c-accent-ink); cursor: pointer; } .theme-toggle:hover { background: var(--c-accent); color: var(--c-text-invert); } :root[data-theme="light"] .theme-toggle { color: #000000; border-color: #000000; background: transparent; } :root[data-theme="light"] .theme-toggle:hover { background: var(--c-accent); } .theme-toggle svg { width: 24px; height: 24px; fill: currentColor; transition: transform .5s ease; pointer-events: none; } .theme-sun, .theme-moon { transition: opacity .3s ease; } .theme-sun { opacity: 0; } .theme-moon { opacity: 1; } :root[data-theme="light"] .theme-toggle svg { transform: rotate(360deg); } :root[data-theme="light"] .theme-sun { opacity: 1; } :root[data-theme="light"] .theme-moon { opacity: 0; } @media (prefers-reduced-motion: reduce) { .theme-toggle svg, .theme-sun, .theme-moon { transition: none; } } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } html, body { margin: 0; padding: 0; } body { background: var(--c-bg); color: var(--c-text); font-family: var(--font-sans); font-size: var(--fs-md); line-height: var(--lh-body); /* THE LANDING SETS TABULAR FIGURES ON THE BODY, not per element: a figure that changes width moves the page under the reader, and this surface is full of figures. */ font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; } /* THE LANDING'S OWN RULE, ADOPTED: an element carrying `hidden` is not displayed, whatever a more specific rule says. The app marks machine-only spans and pre-rendered error blocks with it. */ [hidden] { display: none !important; } /* THE TRACKING IS THE LANGUAGE; THE SIZE IS THE PAGE. The landing's headings are -0.045em / -0.035em / -0.02em at 86px / 62px / 21px; the studio takes the TRACKING and the 700 weight and keeps its own sizes, because a tool's page title is not a hero. */ h1, h2, h3 { line-height: var(--lh-tight); margin: 0 0 var(--sp-3); font-weight: 700; } h1 { letter-spacing: -0.045em; } h2 { letter-spacing: -0.035em; } h3 { letter-spacing: -0.02em; } h1 { font-size: var(--fs-xl); } h2 { font-size: var(--fs-lg); } h3 { font-size: var(--fs-md); } p { margin: 0 0 var(--sp-3); } /* THE LANDING'S LINK TREATMENT, INCLUDING ITS EXEMPTION: underline thickness 0.09em and offset 0.18em, thicker on hover - and links that are STRUCTURE (its own nav, doors and tiles) are not underlined at rest, only on hover. The studio keeps the accent colour on links in prose, where the colour is how a reader finds the action in a paragraph, and follows the landing everywhere else. AN UNDERLINE BELONGS TO A TEXT LINK AND TO NOTHING ELSE (2026-09-25). The two rules below used to be `p a, li a, dd a, …` and a bare `a:hover`, and they reached every anchor on the page: a button that is a link (``) underlined on hover while a `