/* * theme.css — WRITTEN BY THE PLATFORM. Do not edit. * * Palette: Your colours (custom) * Source colours: #020408 #1c2b3a #f6f7fa #0b1f3a #796218 #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: #f6f7fa; --surface: #fbfbfd; --surface-2: #eaebee; --border: #d4d5d8; --border-strong: #adaeb1; --ink: #1c2b3a; --muted: #626a72; --accent: #0b1f3a; --accent-hover: #091a31; --accent-ink: #ffffff; --accent-text: #796218; --accent-strong: #0b1f3a; --accent-soft: #d5d9df; --accent-border: #8c96a4; --success: #15803d; --success-ink: #ffffff; --success-soft: #dbe9e3; --success-strong: #137638; --warning: #b45309; --warning-ink: #ffffff; --warning-soft: #eee3dd; --warning-strong: #a64c08; --danger: #b91c1c; --danger-ink: #ffffff; --danger-soft: #efdddf; --danger-strong: #b91c1c; --chart-1: #0b1f3a; --chart-2: #68317b; --chart-3: #852533; --chart-4: #5c4c01; --chart-5: #00703e; --chart-6: #025474; --font-display: "Inter Variable", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-body: "Inter Variable", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --font-sans: "Inter Variable", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --display-weight: 700; --display-tracking: -0.02em; --eyebrow-tracking: 0.08em; --look: corporate; --radius-sm: 4px; --radius: 6px; --radius-lg: 8px; --radius-xl: 12px; --radius-btn: 6px; --radius-card: 8px; --radius-input: 6px; --border-w: 1px; --border-strong-w: 2px; --shadow-card: 0 1px 2px color-mix(in srgb, var(--ink) 6%, transparent); --shadow-raised: 0 4px 12px color-mix(in srgb, var(--ink) 10%, transparent); --shadow-btn: none; --section-y: 5rem; --card-pad: 1.5rem; --caps: none; --caps-tracking: 0.04em; --btn-weight: 600; --measure: 65ch; } /* 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: #020408; --surface: #1b1d21; --surface-2: #0f1114; --border: #25272b; --border-strong: #4e4f52; --ink: #f6f7fa; --muted: #949699; --accent: #314158; --accent-hover: #505e71; --accent-ink: #ffffff; --accent-text: #828c99; --accent-strong: #778290; --accent-soft: #0c111a; --accent-border: #171f2c; --success: #15803d; --success-ink: #ffffff; --success-soft: #061f14; --success-strong: #39935b; --warning: #b45309; --warning-ink: #ffffff; --warning-soft: #291508; --warning-strong: #c06e2f; --danger: #b91c1c; --danger-ink: #ffffff; --danger-soft: #2a090c; --danger-strong: #cd5c5c; --chart-1: #5c6d87; --chart-2: #a76bb8; --chart-3: #c15c61; --chart-4: #a77613; --chart-5: #559242; --chart-6: #19aaaf; } /* ==================================================================== * 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 floating WhatsApp button. Fixed to the viewport so it survives every scroll position; the tooltip is a sibling span shown on hover/focus. */ .wa-float { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 40; display: flex; height: 3.5rem; width: 3.5rem; align-items: center; justify-content: center; border-radius: var(--radius-pill); background: var(--success); color: var(--success-ink); box-shadow: var(--shadow-raised); transition: transform 0.2s var(--ease, ease); } .wa-float:hover, .wa-float:focus-visible { transform: translateY(-2px) scale(1.04); } .wa-tip { position: absolute; right: calc(100% + 0.75rem); top: 50%; transform: translateY(-50%) translateX(4px); white-space: nowrap; border-radius: var(--radius-sm); background: var(--ink); color: var(--canvas); font-size: 0.75rem; padding: 0.4rem 0.75rem; opacity: 0; pointer-events: none; transition: opacity 0.15s ease, transform 0.15s ease; } .wa-float:hover .wa-tip, .wa-float:focus-visible .wa-tip { opacity: 1; transform: translateY(-50%) translateX(0); } @media (max-width: 640px) { .wa-tip { display: none; } } /* The off-canvas nav drawer is position:fixed with transform:translate(100%) when closed. Fixed elements are positioned against the viewport and ignore an ancestor's overflow clipping for painting purposes — but Chrome/Firefox still count their post-transform box in the document's scrollable width, opening a phantom horizontal scrollbar on narrow screens even though the panel itself is invisible. `overflow-x: hidden` does not stop this (fixed descendants escape ordinary overflow clipping); `clip` does. */ html { overflow-x: clip; overflow-y: auto; } /* The frozen .cta-band-dark component fills its own .btn-primary with --accent and re-pairs --accent-ink to --page-ink — in this app the accent was darkened for legibility as link text, so that pairing fails contrast (and fails differently again in dark mode, where --page-* itself flips). --page-canvas/--page-ink are always a safe, mutually-contrasting pair in BOTH modes (the same guarantee that keeps body text readable on the page), so give the button that pairing directly instead of the accent fill. */ .cta-band-dark .btn-primary { background-color: var(--page-canvas); border-color: var(--page-canvas); color: var(--page-ink); } .cta-band-dark .btn-primary:hover { background-color: color-mix(in srgb, var(--page-canvas) 88%, var(--page-ink) 12%); border-color: color-mix(in srgb, var(--page-canvas) 88%, var(--page-ink) 12%); } /* A photograph behind a dark section: the section's own dark fill sits underneath as a fallback (in case the image is slow to load), a separate layer paints the photo, and a navy scrim above it keeps the headline text reliably readable — all three stacked with explicit, always-solid opacity (never something an entrance animation could catch mid-transition). */ .cta-photo { position: relative; overflow: hidden; isolation: isolate; } .cta-photo-bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; opacity: 0.55; } .cta-photo-bg::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--ink) 70%, transparent); } .cta-photo > *:not(.cta-photo-bg) { position: relative; z-index: 1; } /* A document preview inside a card — a stand-in header bar and skeleton lines standing for anonymised text, used across the hero composition and the realisations / templates galleries. */ .doc-lines > span { display: block; height: 0.5rem; border-radius: var(--radius-sm); background: var(--border); }