/* ═══════════════════════════════════════════════════════════════════════════ desktop.css — desktop surface base layer (docs/plans/desktop/app-shell.md) Tokens, fonts, base, type utilities and the atoms. NO chrome: the rail, aurora, brand, dock, menu, label pill, side panel, loading screen and the narrow-window re-lay live in shell.css, which consumes the tokens here. Builds on Bootstrap only. The mobile stack (v1-app.css / style.css / app.css) is NOT loaded on this surface. Soehne has no weight axis: emphasis swaps family (buch → halbfett → fett), never font-weight. Bootstrap is linked before this file, so every base override that would fight a Bootstrap element rule is scoped under body.desktop-surface (or :where(.desktop-surface) when it must stay at element specificity so Bootstrap's own classes and Font Awesome's svg rules keep winning). ═══════════════════════════════════════════════════════════════════════════ */ /* ─── Fonts — the four Soehne faces ───────────────────────────────────────── */ /* Family IS weight. The weight descriptors only tell the browser which face to pick when a UA stylesheet asks for bold (Bootstrap's h1, strong); the base rules below still pin font-weight: normal so nothing is synthesised. */ @font-face { font-family: 'soehne-buch'; src: url('../../../assets/fonts/soehne-buch.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'soehne-halbfett'; src: url('../../../assets/fonts/soehne-halbfett.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'soehne-fett'; src: url('../../../assets/fonts/soehne-fett.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'soehne-mono'; src: url('../../../assets/fonts/soehne-mono-buch.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } /* ─── Tokens ──────────────────────────────────────────────────────────────── */ /* On :root so shell.css can flip the push on (html.panel-open) and so pages inherit them without a wrapper. Brand values from the pitch deck / app tokens; the type scale, surfaces, lines and radii from the data room shell (its pasted block of v1 --primary-color* / --box-shadow-cont tokens is deliberately NOT here). */ :root { /* Brand palette */ --rt-pink: #EB5D8F; --rt-crimson: #A73A54; --rt-purple: #916DF6; --rt-blue: #2C75DE; --rt-teal: #69E2E1; --rt-green: #3B7D2A; --rt-amber: #EC9006; /* today's desktop value (the aurora's fifth blob); the data room's #B45309 is a text amber */ --rt-ink: #1E2835; --rt-white: #FFFFFF; --rt-paper: #F6F7F9; --rt-night: #16181D; --rt-night-2: #20242C; --rt-warning: #FDAB29; /* Semantic colour */ --accent: var(--rt-pink); --accent-2: var(--rt-purple); --on-accent: #FFFFFF; --bg: var(--rt-white); --surface: var(--rt-paper); --surface-2: var(--rt-white); --text: var(--rt-ink); --text-soft: #4E5A68; --text-faint: #6E7885; --line: rgba(30, 40, 53, 0.13); --line-strong: rgba(30, 40, 53, 0.28); /* Faces: the family is the weight */ --font-display: 'soehne-fett', -apple-system, system-ui, sans-serif; --font-head: 'soehne-halbfett', -apple-system, system-ui, sans-serif; --font-text: 'soehne-buch', -apple-system, system-ui, 'Segoe UI', sans-serif; --font-mono: 'soehne-mono', ui-monospace, Menlo, monospace; /* Type scale (fluid) */ --step--1: clamp(0.74rem, 0.70rem + 0.18vw, 0.84rem); --step-0: clamp(0.95rem, 0.90rem + 0.25vw, 1.08rem); --step-1: clamp(1.12rem, 1.02rem + 0.5vw, 1.42rem); --step-2: clamp(1.4rem, 1.2rem + 1vw, 2.05rem); --step-3: clamp(1.85rem, 1.45rem + 1.9vw, 2.9rem); /* Shape */ --radius: 18px; --radius-sm: 12px; /* Shadows (the rail's navy, never black): brand squircle / glass shelf / open panel */ --shadow-sm: 0 6px 24px rgba(21, 56, 105, 0.25); --shadow-md: 0 8px 32px rgba(21, 56, 105, 0.12); --shadow-lg: 28px 0 48px rgba(21, 56, 105, 0.34); /* Shell geometry (consumed by shell.css and by pages) */ --shell-gutter: 110px; /* THE left gutter: what the rail + dock own. .desktop-main margin-left; full-bleed pages offset their stage by it. Tune here only. */ --shell-top: 0px; /* the top bar's height under 900px (shell.css sets it in its media block); pages pad their top with it */ --panel-reveal: 120px; /* how far the canvas is parked off the left edge = the push distance when the side panel opens */ --panel-push: 0px; /* 0 or var(--panel-reveal). SNAPS under html.panel-open, never tweened on : an inherited property animating there restyles every element every frame (Joel 2026-09-02, choppy). Each mover transitions its own transform. */ /* Motion: the push (rail, aurora, movers) on Joel's house curve, long in / quicker out */ --panel-ease: cubic-bezier(0.4, 0, 0, 1); --panel-ease-open: 1500ms var(--panel-ease); --panel-ease-close: 600ms var(--panel-ease); /* the panel's own slide keeps a shorter pair (the data room's 800 / 600) so it lands before the rail settles */ --panel-slide-open: 800ms var(--panel-ease); --panel-slide-close: 600ms var(--panel-ease); } /* ─── Base ────────────────────────────────────────────────────────────────── */ body.desktop-surface { font-family: var(--font-text); font-size: var(--step-0); line-height: 1.55; background: var(--bg); color: var(--text); margin: 0; min-height: 100vh; font-synthesis: none; /* single-weight faces: never fake bold or italic */ -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Bootstrap asks for bold on headings, strong and table heads; Soehne answers with the halbfett family and font-weight pinned to normal. */ .desktop-surface h1, .desktop-surface h2, .desktop-surface h3, .desktop-surface h4, .desktop-surface h5, .desktop-surface h6, .desktop-surface strong, .desktop-surface b, .desktop-surface th, .desktop-surface dt { font-family: var(--font-head); font-weight: normal; } /* Element resets at element specificity (:where), so Bootstrap's .btn, .img-* and Font Awesome's .svg-inline--fa keep winning where they apply. */ :where(.desktop-surface) img, :where(.desktop-surface) svg { display: block; max-width: 100%; } :where(.desktop-surface) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } :where(.desktop-surface) a { color: inherit; text-decoration: none; } :where(.desktop-surface) a:hover { color: inherit; text-decoration: none; } /* ─── Type utilities ──────────────────────────────────────────────────────── */ /* The desktop type system. Soehne has no weight axis, so family IS weight: each utility swaps the family and never touches font-weight. -.04em tracking is the sitewide display-headline standard (v1 convention). Selectors are `.desktop-surface .t-*` on purpose — (0,2,0) outranks BOTH page-local element rules AND our own base heading rule `.desktop-surface h1…` at (0,1,1), without !important. Keep that base-rule relationship in mind when adding utilities here. */ .desktop-surface .t-fett { font-family: var(--font-display); font-weight: normal; letter-spacing: -.04em; } .desktop-surface .t-halbfett { font-family: var(--font-head); font-weight: normal; } .desktop-surface .t-buch { font-family: var(--font-text); font-weight: normal; letter-spacing: 0; } .desktop-surface .t-mono { font-family: var(--font-mono); font-weight: normal; letter-spacing: 0; } /* ─── Atoms (from the data room shell) ────────────────────────────────────── */ /* Scoped under .desktop-surface: Bootstrap also defines .card (flex column, .25rem radius, black hairline), and (0,2,0) beats it cleanly. */ .desktop-surface h1 { font-family: var(--font-display); font-size: var(--step-3); line-height: 1.04; letter-spacing: -.015em; margin: 0 0 .6rem; } .desktop-surface h3 { font-family: var(--font-head); font-size: var(--step-1); line-height: 1.2; } .desktop-surface .eyebrow { font-family: var(--font-head); font-size: var(--step--1); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin: 0 0 .9rem; } .desktop-surface .lede { font-size: var(--step-1); line-height: 1.5; color: var(--text-soft); max-width: 46ch; margin: 0 0 1.6rem; } .desktop-surface .card { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.1rem, 2.2vw, 1.7rem); } /* Pills: the one button shape. Outline by default, --solid for the primary action; hover swaps to the accent, solid hover deepens to crimson. */ .desktop-surface .pill { display: inline-flex; align-items: center; gap: .5em; padding: .62em 1.15em; border-radius: 999px; border: 1px solid var(--line-strong); background: none; color: inherit; font-family: var(--font-head); font-size: var(--step-0); line-height: 1.2; cursor: pointer; transition: border-color .2s, background .2s, color .2s; } .desktop-surface .pill:hover { border-color: var(--accent); color: var(--accent); } .desktop-surface .pill--solid { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .desktop-surface .pill--solid:hover { background: var(--rt-crimson); border-color: var(--rt-crimson); color: var(--on-accent); } .desktop-surface .pill:disabled { opacity: .6; cursor: default; } .desktop-surface .link { color: var(--accent); text-decoration: underline; text-underline-offset: .18em; } /* Forms: a labelled column, the input in the paper surface, accent ring on focus */ .desktop-surface .field { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1rem; } .desktop-surface .field label { font-family: var(--font-head); font-size: var(--step--1); color: var(--text-soft); margin: 0; } .desktop-surface .field input { font: inherit; font-family: var(--font-text); padding: .75em .95em; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text); outline: none; transition: border-color .2s, box-shadow .2s; } .desktop-surface .field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); } /* Inline error line under a form: hidden until .show */ .desktop-surface .error { display: none; margin: .9rem 0 0; padding: .7rem .95rem; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--rt-crimson) 10%, transparent); color: var(--rt-crimson); font-size: var(--step--1); } .desktop-surface .error.show { display: block; } .desktop-surface .foot { margin-top: 1.6rem; color: var(--text-faint); font-size: var(--step--1); display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }