/* ============================================================================ Ambition — Prism theme (the "Happiness" theme). ADDITIVE over cine.css. Activate with . LIGHT, joyful, CSS-only (no video dependency). The engine sets [data-band] + --score (0..1) from the live score. Brand orb stays ember. Functional text pinned to AA. ============================================================================ */ [data-theme^="prism"]{ --joy: var(--score, 1); /* 0..1 from engine; scales saturation */ --paper:#fff7ef; --glass:rgba(255,255,255,.6); --edge:rgba(255,255,255,.7); --card:var(--glass); --line:rgba(160,110,70,.16); --ink:#3a2417; --ink-2:#6a4a33; --muted:#9a6b4a; --surface-0:var(--paper); --surface-1:#fffaf3; --surface-2:var(--glass); --text-1:var(--ink); --text-2:var(--ink-2); --text-3:var(--muted); --r-lg:20px; --r-md:14px; /* rounder, friendlier */ --chrome:linear-gradient(135deg,#ff9e5c,#ff6f91); /* Prism brand chrome (buttons/active) */ color:var(--ink); } /* band accent stays semantic (light-legible) */ [data-theme^="prism"][data-band="flourish"] { --accent:#1f9d6f; } [data-theme^="prism"][data-band="productive"]{ --accent:#3f9a3a; } [data-theme^="prism"][data-band="warning"] { --accent:#c98a1a; } [data-theme^="prism"][data-band="critical"] { --accent:#c25a2a; } [data-theme^="prism"][data-band="lockdown"] { --accent:#9a4636; } /* ---- the living world (replaces sky/sun/hill; add to the world container) ---- */ [data-theme^="prism"] .world,[data-theme^="prism"] body{ background:radial-gradient(42% 52% at 62% 4%,rgba(255,250,224,.95),transparent 60%),radial-gradient(56% 62% at 10% 0%,rgba(255,209,221,.7),transparent 62%),radial-gradient(60% 66% at 96% 14%,rgba(255,238,176,.62),transparent 60%),radial-gradient(72% 72% at 28% 104%,rgba(205,239,217,.58),transparent 64%),radial-gradient(84% 74% at 104% 102%,rgba(214,232,255,.62),transparent 66%),#fdf8f1; background-size:240% 240%; animation:prism-hue 22s ease infinite; /* JOY: saturation + brightness scale with the score */ filter:saturate(calc(.42 + .58*var(--joy))) brightness(calc(.9 + .13*var(--joy))); transition:filter .6s; } @keyframes prism-hue{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}} [data-theme^="prism"] .prism-sun{position:absolute;left:60%;top:-120px;width:380px;height:380px;border-radius:50%;transform:translateX(-50%);z-index:1;pointer-events:none; background:radial-gradient(circle,rgba(255,250,224,.96),rgba(255,224,150,.45) 42%,transparent 70%)} [data-theme^="prism"] .prism-bokeh{position:absolute;inset:0;z-index:1;pointer-events:none} [data-theme^="prism"] .prism-bokeh span{position:absolute;border-radius:50%;animation:prism-float 10s ease-in-out infinite} @keyframes prism-float{0%,100%{transform:translateY(0) translateX(0)}50%{transform:translateY(-30px) translateX(12px)}} [data-theme^="prism"] .prism-confetti{position:absolute;inset:0;z-index:60;pointer-events:none;overflow:hidden} [data-theme^="prism"] .prism-confetti span{position:absolute;bottom:-12px;border-radius:50%;filter:blur(.3px);animation:prism-rise ease-out forwards} @keyframes prism-rise{0%{opacity:0;transform:translateY(0)}15%{opacity:.9}to{transform:translateY(-80vh) translateX(var(--dx,0));opacity:0}} /* ---- components → friendly glass ---- */ [data-theme^="prism"] .amb-card,[data-theme^="prism"] .w,[data-theme^="prism"] .card{ background:var(--glass);backdrop-filter:blur(17px) saturate(1.25);border:1px solid var(--edge); border-radius:var(--r-lg);box-shadow:0 12px 28px rgba(190,130,90,.16); transition:transform .28s cubic-bezier(.34,1.56,.64,1); /* spring */ } [data-theme^="prism"] .amb-card:hover,[data-theme^="prism"] .w:hover{transform:translateY(-5px) scale(1.02)} [data-theme^="prism"] .btn--primary,[data-theme^="prism"] .nav.on,[data-theme^="prism"] .amb-btn--primary{ background:var(--chrome) !important;color:#fff !important;border:0;box-shadow:0 8px 18px rgba(255,120,130,.4)} [data-theme^="prism"] .score,[data-theme^="prism"] .display{ text-shadow:0 6px 30px rgba(255,255,255,.5); } /* ---- accessibility guard: pin functional text to AA on the bright world ---- */ [data-theme^="prism"] .task-text,[data-theme^="prism"] .nav,[data-theme^="prism"] .btn, [data-theme^="prism"] input,[data-theme^="prism"] label,[data-theme^="prism"] .row{ color:#3a2417 !important; } /* ---- a11y + perf: kill motion/transparency ---- */ @media (prefers-reduced-motion: reduce){ [data-theme^="prism"] .world,[data-theme^="prism"] body,[data-theme^="prism"] .prism-bokeh span,[data-theme^="prism"] .amb-card{animation:none;transition:none} [data-theme^="prism"] .prism-confetti{display:none} } @media (prefers-reduced-transparency: reduce){ [data-theme^="prism"] .amb-card,[data-theme^="prism"] .w{backdrop-filter:none;background:#fffaf3}}[data-theme="prism-dark"]{--paper:#1a1410;--glass:rgba(40,30,24,.55);--edge:rgba(255,210,160,.14);--card:var(--glass);--ink:#f3e7d8;--ink-2:#d8c3ad;--muted:#a98c72;--surface-0:var(--paper);--surface-1:#221a14;--surface-2:var(--glass);--text-1:var(--ink);--text-2:var(--ink-2);--text-3:var(--muted);color:var(--ink)}[data-theme="prism-dark"] .world,[data-theme="prism-dark"] body{background:radial-gradient(42% 52% at 62% 4%,rgba(255,226,150,.2),transparent 60%),radial-gradient(58% 60% at 8% 0%,rgba(150,70,120,.36),transparent 62%),radial-gradient(60% 66% at 98% 16%,rgba(170,110,40,.3),transparent 60%),radial-gradient(74% 72% at 26% 104%,rgba(28,110,90,.38),transparent 64%),radial-gradient(86% 74% at 104% 102%,rgba(60,60,130,.36),transparent 66%),#15110d}[data-theme="prism-dark"] .task-text,[data-theme="prism-dark"] .nav,[data-theme="prism-dark"] .btn,[data-theme="prism-dark"] input,[data-theme="prism-dark"] label,[data-theme="prism-dark"] .row{color:#f3e7d8 !important}[data-theme="prism-dark"] .amb-card,[data-theme="prism-dark"] .w,[data-theme="prism-dark"] .card{background:var(--glass);border-color:var(--edge);box-shadow:0 12px 28px rgba(0,0,0,.4)}[data-theme^="prism"] #app,[data-theme^="prism"] #world{background:transparent !important}[data-theme^="prism"] #world>:not(.prism-sun):not(.prism-bokeh):not(.prism-confetti){display:none !important}@media all{ } /* --------------------------------------------------------------------------- Engine hook (app.js): set --score (0..1) on the prism root so joy scales. root.style.setProperty('--score', (score/100).toFixed(2)); Markup once inside the world container:
Per-band North copy (kind at low end): flourish "go celebrate it" · productive "keep the momentum" · warning "be kind to yourself" · critical "one small win still counts" · lockdown "rest and reset — tomorrow's brighter". Confetti fires on WINS only (band-up→flourish, streak milestone, goal done) — see prism.js. PHASE 2 (optional): swap the CSS bokeh for a transparent-WebM loop + Lottie confetti (same pipeline as the orb), with the static gradient as fallback. --------------------------------------------------------------------------- */