/* * theme.css — WRITTEN BY THE PLATFORM. Do not edit. * * Palette: Your colours (custom) * Source colours: #030609 #161d2b #5b6270 #f6f7f9 #ffffff #16283f #1f3a5f * * 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. */ :root { --canvas: #f6f7f9; --surface: #ffffff; --surface-2: #eaebed; --border: #d7dae1; --border-strong: #adafb1; --ink: #161d2b; --muted: #5b6270; --accent: #16283f; --accent-hover: #132236; --accent-ink: #ffffff; --accent-text: #1f3a5f; --accent-strong: #16283f; --accent-soft: #d7dadf; --accent-border: #919aa5; --success: #1bac50; --success-ink: #161d2b; --success-soft: #dceee5; --success-strong: #117035; --warning: #b45309; --warning-ink: #ffffff; --warning-soft: #eee3dc; --warning-strong: #a64c08; --danger: #b91c1c; --danger-ink: #ffffff; --danger-soft: #efddde; --danger-strong: #b91c1c;} /* The same palette on a dark page — written here, never by the app. It applies while carries data-theme="dark", which the platform's own toggle sets and remembers; an app that never renders that toggle is exactly as it was. 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="dark"] { --canvas: #030609; --surface: #1c1f22; --surface-2: #101215; --border: #26292b; --border-strong: #4f5153; --ink: #f6f7f9; --muted: #959799; --accent: #29394e; --accent-hover: #495769; --accent-ink: #ffffff; --accent-text: #717c8a; --accent-strong: #7c8693; --accent-soft: #0b1118; --accent-border: #141d28; --success: #1bac50; --success-ink: #ffffff; --success-soft: #082b19; --success-strong: #1bac50; --warning: #b45309; --warning-ink: #ffffff; --warning-soft: #2a1709; --warning-strong: #c06e2f; --danger: #b91c1c; --danger-ink: #ffffff; --danger-soft: #2b0b0d; --danger-strong: #cd5c5c; } /* ==================================================================== * 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. * ==================================================================== */ /* ---- DemoBeacon character: crisp corporate-blue SaaS ------------------- */ :root { --radius-sm: 6px; --radius: 10px; --radius-lg: 16px; --shadow: 0 1px 2px color-mix(in srgb, var(--ink) 6%, transparent), 0 1px 1px color-mix(in srgb, var(--ink) 4%, transparent); --shadow-raised: 0 12px 32px color-mix(in srgb, var(--ink) 12%, transparent); } /* ---- Auth screens (setup / sign in / claim password) -------------------- */ .auth-wrap { min-height: calc(100dvh - 2 * var(--s-8)); display: grid; place-items: center; padding: var(--s-6) var(--s-4); } .auth-card { width: 100%; max-width: 420px; padding: var(--s-8); text-align: center; } .auth-brand { display: flex; justify-content: center; margin-bottom: var(--s-5); } .auth-brand .brand-mark { width: 48px; height: 48px; font-size: var(--t-lg); } .auth-title { font-size: var(--t-2xl); font-weight: var(--fw-semi); letter-spacing: var(--track-tight); margin: 0; } .auth-sub { color: var(--muted); font-size: var(--t-sm); margin: var(--s-2) 0 var(--s-6); } .auth-card form { text-align: left; } /* ---- Brand mark: a small monogram seal, not a flat SaaS square --------- */ .brand-mark { background: linear-gradient(150deg, var(--accent), var(--accent-hover)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-ink) 22%, transparent), var(--shadow); letter-spacing: 0.04em; font-weight: var(--fw-semi); } .auth-brand .brand-mark { letter-spacing: 0.06em; } .brand-name { font-weight: var(--fw-semi); letter-spacing: var(--track-tight); } /* ---- A card that behaves like a quiet link (mini meeting rows) --------- */ .card-link { display: flex; text-decoration: none; color: inherit; border: 1px solid transparent; transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease); } .card-link:hover { background: var(--surface-2); border-color: var(--border); }