/* * theme.css — WRITTEN BY THE PLATFORM. Do not edit. * * Palette: Your colours (custom) * Source colours: #1a0d05 #f3efe9 #0d0c0b #b85a24 #e8823f #ffffff * * Every value below is either one of those five or derived from them, and each * one is contrast-corrected against this palette's own background. Consume * them with var(--token); never write a colour value in app code. */ /* DARK BY DEFAULT — the owner chose it on the blueprint. The dark set is the page; the light set below applies while carries data-theme="light", which the platform's own toggle sets and remembers. color-scheme rides each block so controls and scrollbars follow the ground. */ :root { color-scheme: dark; --canvas: #0d0c0b; --surface: #252423; --surface-2: #191817; --border: #2f2e2d; --border-strong: #565554; --ink: #f3efe9; --muted: #979490; --accent: #b85a24; --accent-hover: #c37345; --accent-ink: #ffffff; --accent-text: #e8823f; --accent-strong: #c87e55; --accent-soft: #331d11; --accent-border: #5a2f16; --success: #15803d; --success-ink: #ffffff; --success-soft: #0f2616; --success-strong: #499c68; --warning: #b45309; --warning-ink: #ffffff; --warning-soft: #321c0b; --warning-strong: #c57a40; --danger: #b91c1c; --danger-ink: #ffffff; --danger-soft: #33100f; --danger-strong: #d16969; --chart-1: #b85a24; --chart-2: #9e9813; --chart-3: #1a9671; --chart-4: #209bc4; --chart-5: #7c71ce; --chart-6: #cb6aa0; --font-display: "Instrument Serif", Georgia, "Times New Roman", serif; --font-body: "Inter Variable", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --font-sans: "Inter Variable", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --display-weight: 400; --display-tracking: -0.01em; --eyebrow-tracking: 0.14em; --look: editorial; --radius-sm: 2px; --radius: 2px; --radius-lg: 2px; --radius-xl: 2px; --radius-btn: 2px; --radius-card: 2px; --radius-input: 2px; --border-w: 1px; --border-strong-w: 1px; --shadow-card: none; --shadow-raised: none; --shadow-btn: none; --section-y: 6rem; --card-pad: 1.75rem; --caps: none; --caps-tracking: 0.06em; --btn-weight: 500; --measure: 75ch; } /* The same palette on a light page — written here, never by the app. Do not repoint any of these from app code: a token that references another token here is a cycle, and CSS makes every property in a cycle invalid. */ html[data-theme="light"] { color-scheme: light; --canvas: #ffffff; --surface: #ffffff; --surface-2: #f3f3f3; --border: #dddddd; --border-strong: #b6b6b6; --ink: #0d0c0b; --muted: #6e6d6d; --accent: #b85a24; --accent-hover: #9c4d1f; --accent-ink: #ffffff; --accent-text: #a95321; --accent-strong: #9b4c1e; --accent-soft: #f5e8e0; --accent-border: #dfb59c; --success: #15803d; --success-ink: #ffffff; --success-soft: #e3f0e8; --success-strong: #137638; --warning: #b45309; --warning-ink: #ffffff; --warning-soft: #f6eae1; --warning-strong: #a64c08; --danger: #b91c1c; --danger-ink: #ffffff; --danger-soft: #f7e4e4; --danger-strong: #b91c1c; --chart-1: #b85a24; --chart-2: #9e9813; --chart-3: #097355; --chart-4: #209bc4; --chart-5: #5c4ea7; --chart-6: #cb6aa0; } /* ==================================================================== * app.css — THIS APP'S OWN CSS. Yours to write. Ships empty. * * design.css is a FLOOR, not a ceiling. * * For a long time it was both, and the cost was measurable: an app could * not write a single CSS rule, so every app built here had the same 10px * radius, the same Public Sans at the same 15px, the same 1px borders and * the same soft shadow. Only fourteen COLOUR tokens ever differed. Three * apps in a row came out looking like the same product in three coats of * paint, which is what this file exists to end. * * It loads AFTER design.css and theme.css, so anything here wins. * * ---- THE FIRST LEVER: RETUNE THE SYSTEM --------------------------- * * A :root block here re-tunes every component at once — nothing is * restyled one class at a time. These are the tokens that decide an app's * CHARACTER, and they are the fastest way to make two apps look nothing * alike: * * --radius-sm --radius --radius-lg 0 is brutal, 4 is crisp, 18 is soft * --font-sans --font-mono a display face changes more than colour * --t-xs … --t-5xl the type scale, and how far it ramps * --lh --lh-tight --track-tight density and tone * --s-1 … --s-12 the spacing scale: tight or generous * --shadow --shadow-raised flat, or lifted * --border --border-strong widths hairline, or heavy and drawn * --dur-1 --dur-2 --ease brisk, or languid * --content-max --measure a wide dashboard or a narrow reading page * * COLOUR IS THE ONE EXCEPTION, and it is not a technicality: the owner * picked the palette on the approval card before you built anything, and * it is the only part of the look they chose themselves. theme.css holds * it. Write var(--accent), var(--ink), var(--canvas) — never a hex, an * rgb() or an hsl(), here or anywhere. The validator refuses those. * * ---- THE SECOND LEVER: WRITE WHAT IS NOT THERE --------------------- * * design.css covers the ordinary furniture. It does NOT cover the one * screen that makes this app itself — a timer's dial, a board's columns, * a chart, a seating plan, a game grid. Write those here, in full, and * name them for what they are (.dial, .board-col), never .card-2. * * Compose the primitives where they fit and write your own where they do * not. An app that used only the frozen classes and added nothing shipped * 160 component classes and zero rules of its own — and read as generated, * because the system's ceiling had become the app's ceiling. * * Keep using the tokens in what you write. A rule built on var(--s-4) and * var(--radius) stays consistent with everything around it and follows the * app when its character changes; one built on 16px and 10px does not. * ==================================================================== */ /* ---- the persistent WebGL scene ------------------------------------- * Fixed full-bleed, behind every other element via a NEGATIVE z-index — * per the CSS stacking spec a positioned box with a negative z-index * paints behind ordinary in-flow content, so the navbar, the page copy * and the footer all sit above it without needing a z-index of their * own. */ .scene-wrap { position: fixed; inset: 0; z-index: -1; } .scene-wrap canvas { display: block; width: 100%; height: 100%; } /* ---- the loading screen --------------------------------------------- * Covers the page until app.js has the scene ready, then fades once and * is removed — never rebuilt, never reused. */ .loading-screen { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-5, 1.25rem); background: var(--canvas); transition: opacity var(--dur-2, 0.5s) var(--ease, ease); } .loading-track { width: 14rem; height: 2px; border-radius: var(--radius-pill); background: var(--border); overflow: hidden; } .loading-fill { height: 100%; width: 0%; background: var(--accent); transition: width 0.3s ease; } /* The navbar's one button was rendering at its text line-height only (no tap-sized box) inside the minimal bar's row. Give it back a real height and vertical centring regardless of what its flex row does around it. */ .navbar-cta .btn, .drawer .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 2.5rem; flex: 0 0 auto; }