/* * theme.css — WRITTEN BY THE PLATFORM. Do not edit. * * Palette: Your colours (custom) * Source colours: #1b080b #fbeee2 #cba392 #241016 #331a22 #c2384f #ff7a59 #ffb27a #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: #241016; --surface: #331a22; --surface-2: #2f1c22; --border: #4a2830; --border-strong: #66585c; --ink: #fbeee2; --muted: #cba392; --accent: #c2384f; --accent-hover: #cb5669; --accent-ink: #ffffff; --accent-text: #ff7a59; --accent-strong: #ffb27a; --accent-soft: #471923; --accent-border: #6b2230; --success: #15803d; --success-ink: #ffffff; --success-soft: #21291f; --success-strong: #58a474; --warning: #b45309; --warning-ink: #ffffff; --warning-soft: #441f13; --warning-strong: #ca854f; --danger: #b91c1c; --danger-ink: #ffffff; --danger-soft: #451317; --danger-strong: #d57575; --chart-1: #c2384f; --chart-2: #bb7f00; --chart-3: #4b960a; --chart-4: #049a9b; --chart-5: #2a7fe5; --chart-6: #b163d0; --font-display: "Unbounded Variable", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-body: "DM Sans Variable", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --font-sans: "DM Sans Variable", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --display-weight: 800; --display-tracking: -0.01em; --eyebrow-tracking: 0.10em; --look: playful; --radius-sm: 12px; --radius: 24px; --radius-lg: 28px; --radius-xl: 32px; --radius-btn: 999px; --radius-card: 28px; --radius-input: 16px; --border-w: 0px; --border-strong-w: 2px; --shadow-card: 0 6px 20px color-mix(in srgb, var(--accent) 14%, transparent); --shadow-raised: 0 12px 36px color-mix(in srgb, var(--accent) 20%, transparent); --shadow-btn: 0 4px 12px color-mix(in srgb, var(--accent) 25%, transparent); --section-y: 7rem; --card-pad: 2rem; --caps: none; --caps-tracking: 0.04em; --btn-weight: 700; --measure: 65ch; } /* 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: #f4f3f3; --border: #dfdcdd; --border-strong: #bbb5b6; --ink: #241016; --muted: #72676a; --accent: #c2384f; --accent-hover: #a53043; --accent-ink: #ffffff; --accent-text: #c2384f; --accent-strong: #b23449; --accent-soft: #f6e3e6; --accent-border: #e4a5b0; --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: #c2384f; --chart-2: #bb7f00; --chart-3: #356b07; --chart-4: #049a9b; --chart-5: #0c56a8; --chart-6: #b163d0; } /* ==================================================================== * 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. * ==================================================================== */ /* ---- Birthday Burst — the celebration hero's own decoration ------------ * Balloons, confetti, sparkles, a flickering candle-lit cake and wiggling * gift boxes. Positions and timings below are layout/timing values, never * colour — every colour comes from a chart-N utility class in the markup or * a token var() here. Everything is scoped under .is-animating so the * "Replay celebration" button can restart the whole scene in sync by * toggling that class with a reflow in between. */ .birthday-hero { display: flex; align-items: center; } /* The brand name must never be cut with an ellipsis: at a narrow bar width * (mark + name + theme toggle + menu button) it shrinks to fit instead. */ .navbar-brand { min-width: 0; } .navbar-brand .truncate { font-size: clamp(0.82rem, 4.3vw, 1rem); } .balloon-field, .confetti-field, .sparkle-field { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } .balloon { position: absolute; width: 3rem; height: 3.8rem; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; opacity: 0; box-shadow: var(--shadow); } .balloon::after { content: ""; position: absolute; left: 50%; bottom: -1.3rem; width: 1px; height: 1.3rem; background: var(--border-strong); transform: translateX(-50%); } .is-animating .balloon { animation: balloon-float 5s ease-in-out infinite; } .balloon-1 { left: 4%; top: 10%; animation-delay: 0s; } .balloon-2 { left: 11%; top: 66%; animation-delay: .6s; } .balloon-3 { left: 91%; top: 8%; animation-delay: .3s; } .balloon-4 { left: 83%; top: 62%; animation-delay: .9s; } .balloon-5 { left: 7%; top: 40%; animation-delay: 1.2s; } .balloon-6 { left: 90%; top: 40%; animation-delay: 1.5s; } @keyframes balloon-float { 0% { opacity: 0; transform: translateY(30px) rotate(-2deg); } 12% { opacity: .9; } 50% { transform: translateY(-18px) rotate(3deg); } 100% { opacity: .9; transform: translateY(0) rotate(-2deg); } } .confetti-piece { position: absolute; top: -8%; width: .5rem; height: .9rem; opacity: 0; animation-timing-function: linear; animation-iteration-count: infinite; } .is-animating .confetti-piece { animation-name: confetti-fall; } @keyframes confetti-fall { 0% { top: -8%; opacity: 0; transform: rotate(0deg); } 10% { opacity: .95; } 100% { top: 112%; opacity: .8; transform: rotate(360deg); } } .sparkle { position: absolute; color: var(--accent-text); opacity: 0; } .is-animating .sparkle { animation: sparkle-twinkle 2.6s ease-in-out infinite; } @keyframes sparkle-twinkle { 0%, 100% { opacity: .15; transform: scale(.5); } 50% { opacity: 1; transform: scale(1.2); } } .glow-text { text-shadow: 0 0 16px color-mix(in srgb, var(--accent) 45%, transparent), 0 0 36px color-mix(in srgb, var(--accent) 22%, transparent); } .is-animating .glow-text { animation: glow-pulse 2.6s ease-in-out infinite; } @keyframes glow-pulse { 0%, 100% { text-shadow: 0 0 16px color-mix(in srgb, var(--accent) 45%, transparent), 0 0 36px color-mix(in srgb, var(--accent) 22%, transparent); } 50% { text-shadow: 0 0 28px color-mix(in srgb, var(--accent) 65%, transparent), 0 0 64px color-mix(in srgb, var(--accent) 38%, transparent); } } .birthday-stage { text-align: center; position: relative; z-index: 1; } .cake-wrap { position: relative; display: inline-block; margin-inline: auto; } .birthday-cake-icon { width: 6rem; height: 6rem; color: var(--accent-text); filter: drop-shadow(0 0 22px color-mix(in srgb, var(--accent) 45%, transparent)); } .candle-flame { position: absolute; top: -.65rem; color: var(--accent-text); transform-origin: bottom center; } .is-animating .candle-flame { animation: flame-flicker 1.3s ease-in-out infinite; } @keyframes flame-flicker { 0%, 100% { transform: scale(1) rotate(-4deg); opacity: .85; } 50% { transform: scale(1.2) rotate(5deg); opacity: 1; } } .gift-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 1.5rem; margin-top: 2rem; } .gift-box { position: relative; width: 4rem; height: 4rem; border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow); } .is-animating .gift-box { animation: gift-wiggle 2.4s ease-in-out infinite; } .gift-box-ribbon-v { position: absolute; top: 0; bottom: 0; left: 50%; width: .5rem; background: var(--surface); transform: translateX(-50%); } .gift-box-ribbon-h { position: absolute; left: 0; right: 0; top: 50%; height: .5rem; background: var(--surface); transform: translateY(-50%); } @keyframes gift-wiggle { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } } /* The "Replay celebration" burst: a brief flash across the confetti field * and a pop on the cake, layered on top of the restart-by-reflow above. */ .is-bursting .confetti-field { animation: confetti-burst .6s ease-out; } .is-bursting .cake-wrap { animation: cake-pop .6s ease-out; } @keyframes confetti-burst { 0% { filter: brightness(1); } 35% { filter: brightness(1.7); } 100% { filter: brightness(1); } } @keyframes cake-pop { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.14); } } @media (prefers-reduced-motion: reduce) { .is-animating .balloon, .is-animating .confetti-piece, .is-animating .sparkle, .is-animating .glow-text, .is-animating .candle-flame, .is-animating .gift-box, .is-bursting .confetti-field, .is-bursting .cake-wrap { animation: none !important; } .balloon, .sparkle { opacity: .85; } .confetti-piece { opacity: 0; } }