/* RUN Events — theme skins. Linked after run-events.css so [data-theme] rules override the base tokens. Pick one per jam via . See events/_template/README.md. */ /* ═══════════════════════════════════════════════════════════════════════════ * THEME SYSTEM (opt in per page with ) * * Default (no attribute) keeps RUN's dark + cyan look. Each theme below only * declares its palette tokens; the generic [data-theme] rules re-tint every * spot that hardcodes cyan/yellow, derived from those tokens via color-mix, so * adding a new theme is just a token block. Pick one per jam page. * * cozy light cream, dusty rose + clay + honey + sage (soft, welcoming) * hearth warm dark, ember + honey + sage (candle-lit) * afterglow green dark, meadow green + harvest gold (outdoorsy) * prism indigo-black, deep electric violet (ultraviolet) (generative, stagey) * ═══════════════════════════════════════════════════════════════════════════ */ /* ── Generic: re-tint cyan/yellow-literal sections from the active tokens. * --accent drives links/rails, --launch-yellow the money + kit chrome, * --flux-green success, --clay the step numbers. Works for any theme. ── */ :root[data-theme] body { background: radial-gradient(900px 520px at 85% -8%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 60%), var(--bg); } :root[data-theme] .btn--secondary { border-color: color-mix(in srgb, var(--accent) 45%, transparent); } :root[data-theme] .btn--secondary:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); border-color: var(--accent); } :root[data-theme] .chip--kit { box-shadow: 0 0 16px color-mix(in srgb, var(--launch-yellow) 35%, transparent); } :root[data-theme] .money-pill { background: color-mix(in srgb, var(--launch-yellow) 12%, transparent); border-color: color-mix(in srgb, var(--launch-yellow) 40%, transparent); } :root[data-theme] .kit-warning { background: color-mix(in srgb, var(--launch-yellow) 7%, transparent); border-color: color-mix(in srgb, var(--launch-yellow) 28%, transparent); } :root[data-theme] .kit-warning--lead { background: color-mix(in srgb, var(--launch-yellow) 11%, transparent); border-color: color-mix(in srgb, var(--launch-yellow) 42%, transparent); } :root[data-theme] .kit-warning-icon { background: color-mix(in srgb, var(--launch-yellow) 18%, transparent); } :root[data-theme] .hero2-art { background: radial-gradient(700px 460px at 25% 25%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 60%), linear-gradient(160deg, var(--bg-elevated) 0%, var(--bg-overlay) 60%, var(--bg) 100%); } :root[data-theme] .build-band { background: radial-gradient(700px 400px at 12% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%), linear-gradient(180deg, color-mix(in srgb, var(--accent) 5%, transparent), transparent 70%), var(--bg-elevated); border-color: color-mix(in srgb, var(--accent) 28%, transparent); } :root[data-theme] .build-point-ico { background: color-mix(in srgb, var(--accent) 12%, transparent); } :root[data-theme] .build-band-points { border-top-color: color-mix(in srgb, var(--accent) 18%, transparent); } :root[data-theme] .build-band-assets { background: color-mix(in srgb, var(--launch-yellow) 8%, transparent); border-color: color-mix(in srgb, var(--launch-yellow) 35%, transparent); } :root[data-theme] .build-band-assets-ico { background: color-mix(in srgb, var(--launch-yellow) 16%, transparent); } :root[data-theme] .prize-card--big { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 13%, transparent), color-mix(in srgb, var(--accent) 3%, transparent)); border-color: color-mix(in srgb, var(--accent) 38%, transparent); box-shadow: none; } :root[data-theme] .enter-step-n { color: var(--clay, var(--accent)); } :root[data-theme] .enter-step-n::before { background: var(--clay, var(--accent)); } :root[data-theme] .code-copy:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); } :root[data-theme] .faq-item[open] { border-color: color-mix(in srgb, var(--accent) 40%, transparent); } /* Detailed-guide modal: the trigger card, the numbered step circles, and the note callout all hardcode cyan/yellow; re-tint them from the active accent. */ :root[data-theme] .guide-cta { background: radial-gradient(600px 300px at 8% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%), var(--bg-elevated); border-color: color-mix(in srgb, var(--accent) 28%, transparent); } :root[data-theme] .faq-step::before { background: color-mix(in srgb, var(--accent) 12%, transparent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); } :root[data-theme] .faq-note { background: color-mix(in srgb, var(--launch-yellow) 8%, transparent); border-color: color-mix(in srgb, var(--launch-yellow) 30%, transparent); } :root[data-theme] .schedule-row.is-current { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent 60%); border-top-color: color-mix(in srgb, var(--accent) 30%, transparent); } :root[data-theme] .schedule-row.is-current + .schedule-row { border-top-color: color-mix(in srgb, var(--accent) 30%, transparent); } :root[data-theme] .schedule-row.is-current::before { box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 45%, transparent); } :root[data-theme] .schedule-pill--now { background: color-mix(in srgb, var(--accent) 12%, transparent); box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 30%, transparent); } :root[data-theme] .isub-input:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); } :root[data-theme] .isub-done { background: color-mix(in srgb, var(--flux-green) 10%, transparent); border-color: color-mix(in srgb, var(--flux-green) 32%, transparent); } /* The app nav drawer mirrors RUN's dark WebSidebar on every page, so it keeps RUN's default dark palette + cyan regardless of the page skin. Without this, a light skin paints its dark surface with dark text (unreadable) and a skin accent on the CTA (off-brand). Re-point the tokens its subtree reads. */ :root[data-theme] .app-drawer { --text: var(--gray-0); --text-secondary: var(--gray-2); --text-dim: var(--gray-4); --text-muted: var(--gray-6); --border: var(--gray-9); --accent: #17CDFF; } /* ── cozy: light cream, sage-led with clay + honey warmth. Stay Awhile's skin. ── */ :root[data-theme="cozy"] { --bg:#F7EDE6; --bg-elevated:#FFFBF7; --bg-overlay:#FFFBF7; --border:#EBD7CC; /* Tight 3-tier ramp: heading / body (= intros) / label. All dark on cream. */ --text:#2E251F; --text-secondary:#3E342B; --text-dim:#3E342B; --text-muted:#5C5444; --accent:#5C8C66; --orbit-blue:#5C8C66; /* sage (primary: links, CTAs, rails) */ --launch-yellow:#C8923C; /* honey (money) */ --flux-green:#6FA07A; /* sage (success) */ --clay:#C19A33; /* gold (step numbers on the how-to cards) */ --crash-red:#B5654A; /* warm error */ --shadow-floating: 0 18px 44px rgba(95,120,95,.16); } /* Light-mode structural fixes the dark themes don't need. */ :root[data-theme="cozy"] body { background: radial-gradient(900px 520px at 85% -8%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%), radial-gradient(760px 520px at -5% 25%, color-mix(in srgb, var(--launch-yellow) 9%, transparent), transparent 60%), var(--bg); } :root[data-theme="cozy"] .btn--primary { color: #FFFFFF; } /* Active guide tab is a sage pill; its label reads white like the buttons, not the near-black the default (light cyan) pill uses. */ :root[data-theme="cozy"] .faq-tab.is-active { color: #FFFFFF; } :root[data-theme="cozy"] .btn--ghost:hover { border-color: var(--text-muted); } :root[data-theme="cozy"] .topbar.is-stuck { background: rgba(247,237,230,.84); border-bottom-color: var(--border); } :root[data-theme="cozy"] .type-badge, :root[data-theme="cozy"] .chip--upcoming, :root[data-theme="cozy"] .chip--ended { color: #46503E; background: rgba(255,255,255,.74); border-color: rgba(150,168,140,.5); } :root[data-theme="cozy"] .prize-card { background: #FFFBF7; } /* Light-mode terminal: the faux build window is a dark card by default, which leaves cozy's dark text unreadable. Flip it light; the prompt/ai/ok accents (sage / honey) and the title dots read fine on the warm white. */ :root[data-theme="cozy"] .term { background: #FFFDF9; } :root[data-theme="cozy"] .term-bar { border-bottom-color: var(--border); } :root[data-theme="cozy"] .isub-input { border-color: var(--border); } :root[data-theme="cozy"] .cta-strip { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, transparent), rgba(255,255,255,.4)), #FFFBF7; border-color: color-mix(in srgb, var(--accent) 22%, transparent); } /* ── hearth: warm dark, ember + honey + sage ───────────────────────────────── */ :root[data-theme="hearth"] { --bg:#0E0A09; --bg-elevated:#16110F; --bg-overlay:#120D0B; --border:#2C2622; --accent:#FF9F6B; --orbit-blue:#FF9F6B; /* ember */ --launch-yellow:#FFC77A; /* honey (money) */ --flux-green:#9FC8A4; /* sage (success) */ --clay:#E08B6B; /* deep ember (step numbers) */ --shadow-floating: 0 24px 48px rgba(0,0,0,.55); } /* ── afterglow: green dark, meadow green + harvest gold ─────────────────────── */ :root[data-theme="afterglow"] { --bg:#0C0E0A; --bg-elevated:#14160F; --bg-overlay:#0F120C; --border:#26291F; --accent:#93C07A; --orbit-blue:#93C07A; /* meadow green */ --launch-yellow:#E8B84A; /* harvest gold (money) */ --flux-green:#7FB36A; /* deeper green (success) */ --clay:#CDBE7E; /* wheat (step numbers) */ --shadow-floating: 0 24px 48px rgba(0,0,0,.55); } /* ── prism: the Ultraviolet palette from the Claude Design handoff. Deep * electric violet on indigo-black (blue-leaning, not pastel lavender), * gold money, amber step numbers as the warm counterweight. ── */ :root[data-theme="prism"] { --bg:#0B0913; --bg-elevated:#13111F; --bg-overlay:#0E0C18; --border:#262238; --accent:#8A63E8; --orbit-blue:#8A63E8; /* electric amethyst (links, buttons) */ --launch-yellow:#FFD23F; /* gold (money, kit chrome) */ --flux-green:#34D399; /* success */ --clay:#E0A23C; /* amber step numbers (warm counterweight) */ --shadow-floating: 0 24px 48px rgba(0,0,0,.6); } :root[data-theme="prism"] .kicker { color: #9B7BF0; } /* The violet accent is dark enough that dark-on-accent labels lose contrast; flip the solid-accent buttons to white text. */ :root[data-theme="prism"] .btn--primary { color: #FFFFFF; } /* Generation-API icons: one distinct color per modality (semantic identities, not a palette cycle). Order matches the markup. */ :root[data-theme="prism"] .meantime-bullet:nth-child(6n+1) .meantime-bullet-ico { color: #F5B73D; } /* Text · amber */ :root[data-theme="prism"] .meantime-bullet:nth-child(6n+2) .meantime-bullet-ico { color: #2FD9C9; } /* Image · teal */ :root[data-theme="prism"] .meantime-bullet:nth-child(6n+3) .meantime-bullet-ico { color: #8A6BF0; } /* Music · violet */ :root[data-theme="prism"] .meantime-bullet:nth-child(6n+4) .meantime-bullet-ico { color: #FB8B3A; } /* Video · orange */ :root[data-theme="prism"] .meantime-bullet:nth-child(6n+5) .meantime-bullet-ico { color: #4ADE80; } /* Sprite· green */ :root[data-theme="prism"] .meantime-bullet:nth-child(6n+6) .meantime-bullet-ico { color: #5B8DEF; } /* 3D · blue */ /* Fairy lights strung along the Build-on-RUN card: one warm-yellow string, static (no twinkle). Pure CSS on the card's own box, so mobile web gets no horizontal overflow. */ :root[data-theme="prism"] .build-band { position: relative; } :root[data-theme="prism"] .build-band::before, :root[data-theme="prism"] .build-band::after { content: ""; position: absolute; left: 22px; right: 22px; height: 14px; pointer-events: none; background-image: radial-gradient(circle, #FFD23F 0 2px, rgba(255,210,63,.4) 3px, transparent 6px); background-size: 28px 14px; background-position: 0 50%; background-repeat: repeat-x; } :root[data-theme="prism"] .build-band::before { top: -7px; } :root[data-theme="prism"] .build-band::after { bottom: -7px; }