/* * theme.css — WRITTEN BY THE PLATFORM. Do not edit. * * Palette: Your colours (custom) * Source colours: #1a1206 #f3ecdd #0c0e26 #b8802a #d9a441 #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: #0c0e26; --surface: #24263c; --surface-2: #181a31; --border: #2e3044; --border-strong: #555667; --ink: #f3ecdd; --muted: #979394; --accent: #b8802a; --accent-hover: #c3934a; --accent-ink: #0c0e26; --accent-text: #d9a441; --accent-strong: #be8a3b; --accent-soft: #322727; --accent-border: #594128; --success: #15803d; --success-ink: #ffffff; --success-soft: #0e272b; --success-strong: #499c68; --warning: #b45309; --warning-ink: #ffffff; --warning-soft: #311d20; --warning-strong: #c57a40; --danger: #b91c1c; --danger-ink: #ffffff; --danger-soft: #321124; --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: #0c0e26; --surface: #24263c; --surface-2: #181a31; --border: #2e3044; --border-strong: #555667; --ink: #f3ecdd; --muted: #979394; --accent: #b8802a; --accent-hover: #c3934a; --accent-ink: #0c0e26; --accent-text: #d9a441; --accent-strong: #be8a3b; --accent-soft: #322727; --accent-border: #594128; --success: #15803d; --success-ink: #ffffff; --success-soft: #0e272b; --success-strong: #499c68; --warning: #b45309; --warning-ink: #ffffff; --warning-soft: #311d20; --warning-strong: #c57a40; --danger: #b91c1c; --danger-ink: #ffffff; --danger-soft: #321124; --danger-strong: #d16969; } /* ==================================================================== * app.css — Constellation, a birthday tribute film in website form. * * The whole app is one screen: a fixed Three.js canvas behind everything, * and a column of real, readable text chapters scrolling over it. This * file re-tunes the shared system toward that cinematic, cosmic feel and * then writes the handful of pieces the system has no name for — the * chapter reveals, the stat counters, the scroll cue. * * Every colour below is a token from theme.css. Nothing here is a hex. * ==================================================================== */ /* ---- Retune the system toward something cinematic ------------------- */ :root { --radius: 14px; --radius-lg: 22px; --dur-3: 700ms; --content-max: none; } html, body { background: var(--canvas); overflow-x: hidden; } /* This app has exactly one screen, so the shared content column can give its padding up entirely — the tribute needs the full viewport. */ .content { padding: 0; max-width: none; margin: 0; } /* The topbar becomes a thin glass strip floating over the cosmos rather than a page header — same component, tuned with a hairline of accent. */ .topbar { border-bottom-color: color-mix(in srgb, var(--accent) 25%, transparent); background: color-mix(in srgb, var(--canvas) 55%, transparent); } .topbar .brand-name { font-family: var(--font-sans); letter-spacing: var(--track-tight); } .topbar .brand-mark { background: linear-gradient(135deg, var(--accent), var(--accent-strong)); color: var(--accent-ink); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent), 0 0 18px color-mix(in srgb, var(--accent) 55%, transparent); } .sound-toggle[aria-pressed="true"] { color: var(--accent-text); background: var(--accent-soft); } /* ---- The cosmos shell ------------------------------------------------ */ .cosmos { position: relative; isolation: isolate; } #scene-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; background: var(--canvas); } /* A soft vignette keeps the text readable over whatever the scene is doing behind it, without ever touching the scene's own colours. */ .cosmos-vignette { position: fixed; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse at 50% 40%, transparent 0%, transparent 35%, color-mix(in srgb, var(--canvas) 55%, transparent) 100%), linear-gradient(to bottom, color-mix(in srgb, var(--canvas) 35%, transparent) 0%, transparent 12%, transparent 88%, color-mix(in srgb, var(--canvas) 55%, transparent) 100%); } .no-webgl #scene-canvas, .no-webgl .cosmos-vignette { display: none; } .no-webgl .cosmos { background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--accent) 10%, var(--canvas)) 0%, var(--canvas) 60%); } .chapters { position: relative; z-index: 2; } /* ---- Chapters ---------------------------------------------------------- */ .chapter { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--s-8) var(--s-6); } .chapter-tall, .chapter-finale { min-height: 170vh; align-items: flex-start; padding-top: 28vh; } .chapter-finale { align-items: center; padding-top: var(--s-8); padding-bottom: 20vh; } .chapter-inner { max-width: 640px; width: 100%; padding: var(--s-7); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--surface) 62%, transparent); border: 1px solid color-mix(in srgb, var(--border) 70%, transparent); backdrop-filter: blur(14px) saturate(1.3); box-shadow: var(--shadow-raised); opacity: 0; transform: translateY(36px); transition: opacity 900ms var(--ease-out, ease), transform 900ms var(--ease-out, ease); } .chapter.in-view .chapter-inner { opacity: 1; transform: translateY(0); } .chapter-tag { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-3); color: var(--accent-text); } .chapter-num { font-family: var(--font-mono); font-size: var(--t-sm); font-weight: var(--fw-semi); letter-spacing: var(--track-tight); } .chapter-tag .icon { opacity: 0.9; } .chapter-eyebrow { font-size: var(--t-xs); font-weight: var(--fw-semi); text-transform: uppercase; letter-spacing: var(--track-caps, 0.08em); color: var(--muted); } .chapter-title { font-family: var(--font-sans); font-size: var(--t-4xl); font-weight: var(--fw-semi); letter-spacing: var(--track-tight); line-height: var(--lh-tight, 1.1); color: var(--ink); margin: 0 0 var(--s-3); } .chapter-meta { font-family: var(--font-mono); font-size: var(--t-sm); color: var(--accent-strong); margin: 0 0 var(--s-4); } .chapter-text { font-size: var(--t-lg); line-height: var(--lh-relaxed, 1.6); color: var(--muted); max-width: 56ch; margin: 0 0 var(--s-3); } .chapter-text:last-of-type { margin-bottom: 0; } .chip-pill { display: inline-flex; align-items: center; padding: var(--s-1) var(--s-3); border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent-strong); border: 1px solid var(--accent-border); font-size: var(--t-xs); font-weight: var(--fw-medium); } /* ---- Stat counters ----------------------------------------------------- */ .stat-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); margin-top: var(--s-6); } .stat-cell { text-align: left; padding: var(--s-3) 0 0; border-top: 1px solid color-mix(in srgb, var(--border) 80%, transparent); } .stat-num { font-family: var(--font-mono); font-size: var(--t-3xl); font-weight: var(--fw-semi); color: var(--accent-text); letter-spacing: var(--track-tight); } .stat-cap { font-size: var(--t-xs); color: var(--muted); text-transform: uppercase; letter-spacing: var(--track-caps, 0.06em); margin-top: var(--s-1); } /* ---- Hero -------------------------------------------------------------- */ .chapter-hero { min-height: 100svh; text-align: center; } .chapter-inner-hero { max-width: 720px; background: color-mix(in srgb, var(--surface) 40%, transparent); border-color: color-mix(in srgb, var(--accent-border) 60%, transparent); } .hero-eyebrow { font-size: var(--t-sm); font-weight: var(--fw-semi); letter-spacing: var(--track-caps, 0.14em); text-transform: uppercase; color: var(--accent-text); margin: 0 0 var(--s-4); } .hero-title { font-family: var(--font-sans); font-size: clamp(2.4rem, 6vw, 4.4rem); font-weight: var(--fw-semi); letter-spacing: var(--track-tight); line-height: 1.08; color: var(--ink); margin: 0 0 var(--s-5); } .hero-name { background: linear-gradient(120deg, var(--accent-strong), var(--accent), var(--accent-strong)); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: hero-shine 6s linear infinite; } .hero-cake { display: inline-block; font-size: 0.8em; margin-left: var(--s-2); animation: hero-cake-float 3.4s ease-in-out infinite; } .hero-sub { font-size: var(--t-xl); color: var(--muted); max-width: 46ch; margin: 0 auto var(--s-8); } .scroll-cue { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); color: var(--muted); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: var(--track-caps, 0.08em); transition: opacity 400ms ease; } .scroll-cue .icon { animation: scroll-cue-bounce 1.8s ease-in-out infinite; color: var(--accent-text); } .cosmos.scrolled .scroll-cue { opacity: 0; pointer-events: none; } /* ---- Finale -------------------------------------------------------------- */ .finale-line { font-size: var(--t-xl); font-weight: var(--fw-medium); color: var(--ink); line-height: 1.5; margin: var(--s-5) 0 var(--s-2); } .finale-sign { font-family: var(--font-mono); color: var(--accent-text); margin: 0 0 var(--s-6); } .celebrate-btn { font-size: var(--t-lg); padding-block: var(--s-3); padding-inline: var(--s-6); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent), 0 12px 30px -8px color-mix(in srgb, var(--accent) 60%, transparent); transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); } .celebrate-btn:hover { transform: translateY(-2px) scale(1.02); } .celebrate-btn.is-celebrating { animation: celebrate-pulse 700ms ease; } /* ---- Motion ------------------------------------------------------------- */ @keyframes hero-shine { to { background-position: 200% center; } } @keyframes hero-cake-float { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-8px) rotate(4deg); } } @keyframes scroll-cue-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } } @keyframes celebrate-pulse { 0% { transform: scale(1); } 40% { transform: scale(1.08); } 100% { transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .hero-name, .hero-cake, .scroll-cue .icon, .celebrate-btn.is-celebrating { animation: none !important; } } /* ---- Small screens -------------------------------------------------------- */ @media (max-width: 720px) { .chapter { padding: var(--s-6) var(--s-4); } .chapter-inner { padding: var(--s-5); } .chapter-title { font-size: var(--t-3xl); } .chapter-text { font-size: var(--t-base); } .hero-sub { font-size: var(--t-lg); } .stat-row { grid-template-columns: 1fr; gap: var(--s-3); } .stat-cell { border-top: none; border-left: 2px solid color-mix(in srgb, var(--accent) 40%, transparent); padding: 0 0 0 var(--s-3); } .chapter-tall, .chapter-finale { padding-top: 12vh; } }