/* * theme.css — WRITTEN BY THE PLATFORM. Do not edit. * * Palette: Your colours (custom) * Source colours: #200906 #f5eee9 #15121a #e5432b #ff5c35 #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. */ :root { --canvas: #15121a; --surface: #2c2a31; --surface-2: #211e25; --border: #36333a; --border-strong: #5b595f; --ink: #f5eee9; --muted: #9b9696; --accent: #e5432b; --accent-hover: #e95f4b; --accent-ink: #200906; --accent-text: #ff5c35; --accent-strong: #eb6d5a; --accent-soft: #431d1e; --accent-border: #732822; --success: #15803d; --success-ink: #ffffff; --success-soft: #152a22; --success-strong: #499c68; --warning: #b45309; --warning-ink: #ffffff; --warning-soft: #382016; --warning-strong: #ca854f; --danger: #b91c1c; --danger-ink: #ffffff; --danger-soft: #39141a; --danger-strong: #d16969;} /* 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: #15121a; --surface: #2c2a31; --surface-2: #211e25; --border: #36333a; --border-strong: #5b595f; --ink: #f5eee9; --muted: #9b9696; --accent: #e5432b; --accent-hover: #e95f4b; --accent-ink: #200906; --accent-text: #ff5c35; --accent-strong: #eb6d5a; --accent-soft: #431d1e; --accent-border: #732822; --success: #15803d; --success-ink: #ffffff; --success-soft: #152a22; --success-strong: #499c68; --warning: #b45309; --warning-ink: #ffffff; --warning-soft: #382016; --warning-strong: #ca854f; --danger: #b91c1c; --danger-ink: #ffffff; --danger-soft: #39141a; --danger-strong: #d16969; } /* ==================================================================== * 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. * ==================================================================== */ :root { --radius-sm: 8px; --radius: 14px; --radius-lg: 22px; --shadow-raised: 0 24px 48px -20px color-mix(in srgb, var(--ink) 45%, transparent); } /* ---- Gallery ------------------------------------------------------- */ .thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--s-6); margin-top: var(--s-5); } .thumb-card { overflow: hidden; transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); } .thumb-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-raised); } .thumb-card-media { display: block; border-bottom: 1px solid var(--border); } .thumb-card-media .media img { transition: transform var(--dur-2) var(--ease); } .thumb-card:hover .thumb-card-media .media img { transform: scale(1.04); } .thumb-card-blank { width: 100%; height: 100%; display: grid; place-items: center; color: var(--muted); background: linear-gradient(135deg, var(--surface-2), var(--surface)); } .thumb-card-body { padding: var(--s-4) var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); } .thumb-card-head { display: flex; flex-direction: column; gap: 2px; } /* ---- Editor ---------------------------------------------------------- */ .editor-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr); gap: var(--s-7); align-items: start; margin-top: var(--s-6); } @media (max-width: 900px) { .editor-grid { grid-template-columns: 1fr; } .editor-canvas-pane { position: static; } } .editor-canvas-pane { position: sticky; top: var(--s-6); } .canvas-frame { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border-strong); box-shadow: var(--shadow-raised); background: var(--surface-2); } .canvas-frame canvas { width: 100%; height: 100%; display: block; } .editor-controls-pane { min-width: 0; } /* ---- Segmented align control ----------------------------------------- */ .segmented { display: inline-flex; gap: 2px; padding: 3px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); } .seg-btn { border: none; background: transparent; color: var(--muted); } .seg-btn[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); } /* ---- Anchor grid ------------------------------------------------------ */ .anchor-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); max-width: 180px; } .anchor-btn { aspect-ratio: 1; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-2); display: grid; place-items: center; cursor: pointer; transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease); } .anchor-btn:hover { border-color: var(--accent-border); } .anchor-btn.is-active { background: var(--accent-soft); border-color: var(--accent); } .anchor-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); } .anchor-btn.is-active .anchor-dot { background: var(--accent); } /* ---- Range sliders ------------------------------------------------------ */ input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 32px; background: transparent; cursor: pointer; } input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: var(--radius-pill); background: var(--surface-2); border: 1px solid var(--border); } input[type="range"]::-moz-range-track { height: 6px; border-radius: var(--radius-pill); background: var(--surface-2); border: 1px solid var(--border); } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -8px; border-radius: 50%; background: var(--accent); border: 3px solid var(--accent-ink); box-shadow: 0 0 0 1px var(--accent-border); cursor: pointer; } input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--accent); border: 3px solid var(--accent-ink); cursor: pointer; } /* ---- Colour pickers ---------------------------------------------------- */ /* Beats design.css's `.field-row > .field { flex: 1 1 220px; }` (2 classes) with a more specific selector, so the swatch stays compact instead of stretching to fill the row. */ .field-row > .field.color-field { flex: 0 0 auto; width: 72px; } .input-color { width: 100%; height: 40px; padding: 3px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); cursor: pointer; } /* ---- Sample backgrounds ------------------------------------------------- */ .sample-row { display: flex; gap: var(--s-3); } .sample-thumb { width: 84px; height: 47px; border-radius: var(--radius-sm); overflow: hidden; border: 2px solid var(--border); padding: 0; cursor: pointer; background: none; transition: border-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); } .sample-thumb:hover { transform: translateY(-2px); } .sample-thumb.is-active { border-color: var(--accent); } .sample-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }