/* ================================================================ SLEEPMAXX — TIME-OF-DAY THEMING SYSTEM 6 Palettes: Night / Dawn / Morning / Midday / Golden / Dusk data-theme attribute on element ================================================================ */ /* ---------------------------------------------------------------- 1. SHARED BODY-BACKGROUND VARIABLE (page bg outside phone frame) ---------------------------------------------------------------- */ :root { --bg-body: #050507; } /* Override body background using the variable */ @media (min-height: 813px) { body { background: var(--bg-body) !important; transition: background 0.6s ease; } } /* ---------------------------------------------------------------- 2. CONTINUE BUTTON — Premium Frosted Glass Pill-shape + deep backdrop blur + accent glow + inner highlights ---------------------------------------------------------------- */ /* Base glass layer — applies to ALL active continue buttons */ .btn-continue:not(.disabled) { /* Frosted glass surface: white frost + accent tint */ background: linear-gradient( 145deg, rgba(255, 255, 255, 0.13) 0%, var(--accent-teal-dim) 45%, var(--accent-purple-dim) 100% ) !important; /* Heavy frosted blur */ backdrop-filter: blur(48px) saturate(180%) brightness(1.08) !important; -webkit-backdrop-filter: blur(48px) saturate(180%) brightness(1.08) !important; /* Glass edge border — top is bright (light source), rest subtle */ border: 1px solid rgba(255, 255, 255, 0.22) !important; /* Multi-layer shadow system */ box-shadow: /* Accent halo — radiates from button color */ 0 0 28px var(--accent-teal-glow), 0 0 56px var(--accent-teal-dim), /* Depth — button floats above background */ 0 8px 32px rgba(0, 0, 0, 0.45), 0 3px 10px rgba(0, 0, 0, 0.30), /* Inner top highlight — frosted glass catches light */ inset 0 1.5px 0 rgba(255, 255, 255, 0.42), /* Inner bottom shadow — glass has depth */ inset 0 -1px 0 rgba(0, 0, 0, 0.14), /* Side micro-glints */ inset 1px 0 0 rgba(255, 255, 255, 0.07), inset -1px 0 0 rgba(255, 255, 255, 0.07) !important; /* Text stays crisp on frosted surface */ color: rgba(255, 255, 255, 0.97) !important; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.40); } /* Hover — deepen the blur, brighten the edge, lift slightly */ .btn-continue:not(.disabled):hover { backdrop-filter: blur(60px) saturate(220%) brightness(1.12) !important; -webkit-backdrop-filter: blur(60px) saturate(220%) brightness(1.12) !important; border-color: rgba(255, 255, 255, 0.35) !important; transform: translateY(-1.5px) !important; box-shadow: 0 0 38px var(--accent-teal-glow), 0 0 72px var(--accent-teal-dim), 0 12px 40px rgba(0, 0, 0, 0.50), 0 4px 12px rgba(0, 0, 0, 0.30), inset 0 2px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(0, 0, 0, 0.10), inset 1px 0 0 rgba(255, 255, 255, 0.10), inset -1px 0 0 rgba(255, 255, 255, 0.10) !important; } /* Active/press — compress slightly, dim the glow */ .btn-continue:not(.disabled):active { transform: scale(0.985) !important; backdrop-filter: blur(40px) saturate(160%) !important; -webkit-backdrop-filter: blur(40px) saturate(160%) !important; box-shadow: 0 0 18px var(--accent-teal-glow), 0 4px 16px rgba(0, 0, 0, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.30), inset 0 -1px 0 rgba(0, 0, 0, 0.18) !important; } /* ---------------------------------------------------------------- 3. NIGHT THEME (12:00am – 5:00am) Deep navy-black, muted slate-indigo/dusty violet — stargazing calm Premium: desaturated, like high-end sleep tracker UI at 3am ---------------------------------------------------------------- */ html[data-theme="night"] { --bg-body: #010109; --bg-deep: #04050D; --bg-card: #0A0C1A; --bg-card-elevated: #0E1020; --bg-card-hover: #121428; --accent-teal: #8B93CE; --accent-teal-dim: rgba(139, 147, 206, 0.14); --accent-teal-glow: rgba(139, 147, 206, 0.28); --accent-purple: #A882BE; --accent-purple-dim: rgba(168, 130, 190, 0.13); --accent-purple-glow: rgba(168, 130, 190, 0.28); --accent-gradient: linear-gradient(135deg, #8B93CE 0%, #A882BE 100%); --accent-gradient-soft: linear-gradient(135deg, rgba(139,147,206,.18) 0%, rgba(168,130,190,.18) 100%); --text-primary: #DDE0F0; --text-secondary: #7A82A8; --text-muted: rgba(122, 130, 168, 0.55); --border-card: #171A2E; --border-subtle: rgba(139, 147, 206, 0.07); --border-focus: #8B93CE; --shadow-glow-teal: 0 0 24px rgba(139, 147, 206, 0.3); --shadow-glow-purple: 0 0 24px rgba(168, 130, 190, 0.3); --glass-bg: rgba(10, 12, 26, 0.88); --glass-border: rgba(139, 147, 206, 0.10); } /* Night — quote slide backgrounds */ html[data-theme="night"] .slide[data-slide="1"], html[data-theme="night"] .slide[data-slide="2"] { background: radial-gradient(ellipse 180% 100% at 50% 110%, rgba(30, 28, 90, 0.30) 0%, rgba(18, 16, 60, 0.22) 22%, rgba(10, 8, 36, 0.12) 50%, transparent 72% ), linear-gradient( 180deg, #02020E 0%, #05061A 15%, #080924 30%, #0B0C26 45%, #07081E 60%, #040518 80%, #02020E 100% ); } html[data-theme="night"] .slide[data-slide="1"] .quote-text, html[data-theme="night"] .slide[data-slide="2"] .quote-text { color: rgba(215, 220, 248, 0.95); } html[data-theme="night"] .slide[data-slide="1"] .quote-mark, html[data-theme="night"] .slide[data-slide="2"] .quote-mark { color: rgba(139, 147, 206, 0.12); } /* ---------------------------------------------------------------- 4. DAWN THEME (5:00am – 7:00am) Dusty rose/mauve + warm sand — that first light, muted & warm Premium: like Calm's morning palette, not garish sunrise ---------------------------------------------------------------- */ html[data-theme="dawn"] { --bg-body: #140A0C; --bg-deep: #190D10; --bg-card: #281520; --bg-card-elevated: #301A27; --bg-card-hover: #361E2D; --accent-teal: #C27A8A; --accent-teal-dim: rgba(194, 122, 138, 0.14); --accent-teal-glow: rgba(194, 122, 138, 0.28); --accent-purple: #C09A72; --accent-purple-dim: rgba(192, 154, 114, 0.13); --accent-purple-glow: rgba(192, 154, 114, 0.28); --accent-gradient: linear-gradient(135deg, #C27A8A 0%, #C09A72 100%); --accent-gradient-soft: linear-gradient(135deg, rgba(194,122,138,.18) 0%, rgba(192,154,114,.18) 100%); --text-primary: #F5EBE0; --text-secondary: #A88278; --text-muted: rgba(168, 130, 120, 0.55); --border-card: #381C26; --border-subtle: rgba(194, 122, 138, 0.07); --border-focus: #C27A8A; --shadow-glow-teal: 0 0 24px rgba(194, 122, 138, 0.28); --shadow-glow-purple: 0 0 24px rgba(192, 154, 114, 0.28); --glass-bg: rgba(25, 13, 16, 0.88); --glass-border: rgba(194, 122, 138, 0.10); } html[data-theme="dawn"] .slide[data-slide="1"], html[data-theme="dawn"] .slide[data-slide="2"] { background: radial-gradient(ellipse 220% 120% at 50% 120%, rgba(160, 80, 60, 0.30) 0%, rgba(130, 50, 65, 0.22) 22%, rgba(90, 38, 55, 0.14) 48%, transparent 70% ), linear-gradient( 180deg, #0E0508 0%, #1A0A14 18%, #261018 32%, #2E161C 50%, #2A1410 65%, #1C1008 80%, #120806 100% ); } html[data-theme="dawn"] .slide[data-slide="1"] .quote-text, html[data-theme="dawn"] .slide[data-slide="2"] .quote-text { color: rgba(245, 225, 210, 0.95); } html[data-theme="dawn"] .slide[data-slide="1"] .quote-mark, html[data-theme="dawn"] .slide[data-slide="2"] .quote-mark { color: rgba(194, 122, 138, 0.12); } /* ---------------------------------------------------------------- 5. MORNING THEME (7:00am – 11:00am) Muted cerulean/slate-blue — clear morning sky, not neon Premium: think Oura morning dashboard, sophisticated focus ---------------------------------------------------------------- */ html[data-theme="morning"] { --bg-body: #030C16; --bg-deep: #040F1A; --bg-card: #0A1C2C; --bg-card-elevated: #0E2235; --bg-card-hover: #12273C; --accent-teal: #5498B8; --accent-teal-dim: rgba(84, 152, 184, 0.14); --accent-teal-glow: rgba(84, 152, 184, 0.28); --accent-purple: #6BADC0; --accent-purple-dim: rgba(107, 173, 192, 0.13); --accent-purple-glow: rgba(107, 173, 192, 0.28); --accent-gradient: linear-gradient(135deg, #5498B8 0%, #6BADC0 100%); --accent-gradient-soft: linear-gradient(135deg, rgba(84,152,184,.18) 0%, rgba(107,173,192,.18) 100%); --text-primary: #DFF0F8; --text-secondary: #6898B0; --text-muted: rgba(104, 152, 176, 0.55); --border-card: #0E2638; --border-subtle: rgba(84, 152, 184, 0.07); --border-focus: #5498B8; --shadow-glow-teal: 0 0 24px rgba(84, 152, 184, 0.28); --shadow-glow-purple: 0 0 24px rgba(107, 173, 192, 0.28); --glass-bg: rgba(4, 15, 26, 0.88); --glass-border: rgba(84, 152, 184, 0.10); } html[data-theme="morning"] .slide[data-slide="1"], html[data-theme="morning"] .slide[data-slide="2"] { background: radial-gradient(ellipse 200% 100% at 50% 110%, rgba(14, 80, 130, 0.28) 0%, rgba(8, 50, 100, 0.18) 26%, rgba(4, 28, 65, 0.10) 52%, transparent 72% ), linear-gradient( 180deg, #030C16 0%, #050F1C 18%, #081B28 32%, #0B2132 50%, #081A26 65%, #04101A 80%, #030C16 100% ); } html[data-theme="morning"] .slide[data-slide="1"] .quote-text, html[data-theme="morning"] .slide[data-slide="2"] .quote-text { color: rgba(210, 235, 248, 0.95); } html[data-theme="morning"] .slide[data-slide="1"] .quote-mark, html[data-theme="morning"] .slide[data-slide="2"] .quote-mark { color: rgba(84, 152, 184, 0.12); } /* ---------------------------------------------------------------- 6. MIDDAY THEME (11:00am – 3:00pm) Muted warm gold + amber — sophisticated peak-daylight energy Premium: deep ochre, not garish yellow — like luxury editorial ---------------------------------------------------------------- */ html[data-theme="midday"] { --bg-body: #080800; --bg-deep: #0C0B00; --bg-card: #181500; --bg-card-elevated: #1E1A00; --bg-card-hover: #241F00; --accent-teal: #B89038; --accent-teal-dim: rgba(184, 144, 56, 0.14); --accent-teal-glow: rgba(184, 144, 56, 0.28); --accent-purple: #B87038; --accent-purple-dim: rgba(184, 112, 56, 0.13); --accent-purple-glow: rgba(184, 112, 56, 0.28); --accent-gradient: linear-gradient(135deg, #B89038 0%, #B87038 100%); --accent-gradient-soft: linear-gradient(135deg, rgba(184,144,56,.18) 0%, rgba(184,112,56,.18) 100%); --text-primary: #F5F0DC; --text-secondary: #988858; --text-muted: rgba(152, 136, 88, 0.55); --border-card: #221E00; --border-subtle: rgba(184, 144, 56, 0.07); --border-focus: #B89038; --shadow-glow-teal: 0 0 24px rgba(184, 144, 56, 0.28); --shadow-glow-purple: 0 0 24px rgba(184, 112, 56, 0.28); --glass-bg: rgba(12, 11, 0, 0.88); --glass-border: rgba(184, 144, 56, 0.10); } html[data-theme="midday"] .slide[data-slide="1"], html[data-theme="midday"] .slide[data-slide="2"] { background: radial-gradient(ellipse 220% 120% at 50% 110%, rgba(140, 100, 10, 0.28) 0%, rgba(110, 70, 8, 0.20) 26%, rgba(70, 48, 4, 0.12) 52%, transparent 72% ), linear-gradient( 180deg, #060600 0%, #0E0C00 18%, #161200 32%, #1A1700 50%, #141100 65%, #0C0A00 80%, #060500 100% ); } html[data-theme="midday"] .slide[data-slide="1"] .quote-text, html[data-theme="midday"] .slide[data-slide="2"] .quote-text { color: rgba(248, 238, 210, 0.95); } html[data-theme="midday"] .slide[data-slide="1"] .quote-mark, html[data-theme="midday"] .slide[data-slide="2"] .quote-mark { color: rgba(184, 144, 56, 0.12); } /* Morning theme — ALL slides default background (dark muted cerulean) */ html[data-theme="morning"] .slide { background: linear-gradient(180deg, #060F1A 0%, #0B1828 50%, #060F1A 100%) !important; } /* Midday theme — ALL slides default background (dark muted ochre-warm) */ html[data-theme="midday"] .slide { background: linear-gradient(180deg, #0C0A00 0%, #161200 50%, #0C0A00 100%) !important; } /* ---------------------------------------------------------------- 7. GOLDEN HOUR THEME (3:00pm – 7:00pm) Deep warm gold + muted terracotta — cinematic, not saturated Premium: like a Sicilian sunset, rich and deep, never garish ---------------------------------------------------------------- */ html[data-theme="golden"] { --bg-body: #0A0500; --bg-deep: #0E0700; --bg-card: #1C1000; --bg-card-elevated: #241400; --bg-card-hover: #2A1800; --accent-teal: #C08430; --accent-teal-dim: rgba(192, 132, 48, 0.14); --accent-teal-glow: rgba(192, 132, 48, 0.28); --accent-purple: #A85848; --accent-purple-dim: rgba(168, 88, 72, 0.13); --accent-purple-glow: rgba(168, 88, 72, 0.28); --accent-gradient: linear-gradient(135deg, #C08430 0%, #A85848 100%); --accent-gradient-soft: linear-gradient(135deg, rgba(192,132,48,.18) 0%, rgba(168,88,72,.18) 100%); --text-primary: #F5ECD8; --text-secondary: #A87838; --text-muted: rgba(168, 120, 56, 0.55); --border-card: #281600; --border-subtle: rgba(192, 132, 48, 0.07); --border-focus: #C08430; --shadow-glow-teal: 0 0 24px rgba(192, 132, 48, 0.28); --shadow-glow-purple: 0 0 24px rgba(168, 88, 72, 0.28); --glass-bg: rgba(14, 7, 0, 0.88); --glass-border: rgba(192, 132, 48, 0.10); } html[data-theme="golden"] .slide[data-slide="1"], html[data-theme="golden"] .slide[data-slide="2"] { background: radial-gradient(ellipse 220% 130% at 50% 115%, rgba(130, 65, 12, 0.32) 0%, rgba(100, 44, 10, 0.22) 22%, rgba(65, 28, 5, 0.14) 48%, transparent 70% ), linear-gradient( 180deg, #090500 0%, #130800 18%, #1C0E00 32%, #221200 50%, #1C0E00 65%, #140900 80%, #0A0500 100% ); } html[data-theme="golden"] .slide[data-slide="1"] .quote-text, html[data-theme="golden"] .slide[data-slide="2"] .quote-text { color: rgba(245, 232, 208, 0.95); } html[data-theme="golden"] .slide[data-slide="1"] .quote-mark, html[data-theme="golden"] .slide[data-slide="2"] .quote-mark { color: rgba(192, 132, 48, 0.12); } /* Golden theme — ALL slides default background (dark warm, muted) */ html[data-theme="golden"] .slide { background: linear-gradient(180deg, #0A0600 0%, #160C00 50%, #0E0800 100%) !important; } /* Override for quote slides 1 & 2 which have special gradient */ html[data-theme="golden"] .slide[data-slide="1"], html[data-theme="golden"] .slide[data-slide="2"] { background: radial-gradient(ellipse 220% 130% at 50% 115%, rgba(130, 65, 12, 0.32) 0%, rgba(100, 44, 10, 0.22) 22%, rgba(65, 28, 5, 0.14) 48%, transparent 70% ), linear-gradient( 180deg, #090500 0%, #130800 18%, #1C0E00 32%, #241400 48%, #201000 60%, #180C00 78%, #100700 100% ) !important; } /* ---------------------------------------------------------------- 8. DUSK THEME (7:00pm – 12:00am) — DEFAULT Refined teal + dusty violet twilight — cooled & sophisticated Premium: deeper hues, less electric, closer to Oura ring palette ---------------------------------------------------------------- */ html[data-theme="dusk"] { --bg-body: #050508; --bg-deep: #0C0C0F; --bg-card: #18181C; --bg-card-elevated: #1E1E22; --bg-card-hover: #222228; --accent-teal: #46A8A8; --accent-teal-dim: rgba(70, 168, 168, 0.14); --accent-teal-glow: rgba(70, 168, 168, 0.28); --accent-purple: #7B72BC; --accent-purple-dim: rgba(123, 114, 188, 0.13); --accent-purple-glow: rgba(123, 114, 188, 0.28); --accent-gradient: linear-gradient(135deg, #46A8A8 0%, #7B72BC 100%); --accent-gradient-soft: linear-gradient(135deg, rgba(70,168,168,.18) 0%, rgba(123,114,188,.18) 100%); --text-primary: #F0F0F4; --text-secondary: #8890A0; --text-muted: rgba(136, 144, 160, 0.55); --border-card: #282830; --border-subtle: rgba(255, 255, 255, 0.06); --border-focus: #46A8A8; --shadow-glow-teal: 0 0 24px rgba(70, 168, 168, 0.28); --shadow-glow-purple: 0 0 24px rgba(123, 114, 188, 0.28); --glass-bg: rgba(20, 20, 24, 0.88); --glass-border: rgba(255, 255, 255, 0.07); } /* Dusk quote slides keep the existing purple gradient */ html[data-theme="dusk"] .slide[data-slide="1"] .quote-text, html[data-theme="dusk"] .slide[data-slide="2"] .quote-text { color: rgba(255, 240, 220, 0.95); } /* ================================================================ THEME TOOLBAR — Outside Phone Frame Floating panel with theme + QA controls ================================================================ */ .theme-toolbar { position: fixed; top: 50%; right: 24px; transform: translateY(-50%); z-index: 9999; display: flex; flex-direction: column; gap: 0; pointer-events: auto; } /* Hide toolbar completely on mobile (inside phone viewport) */ @media (max-height: 812px) { .theme-toolbar { display: none; } } /* Toolbar inner panel */ .theme-toolbar-inner { background: rgba(10, 10, 14, 0.92); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; padding: 12px 10px; display: flex; flex-direction: column; gap: 6px; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.06); min-width: 90px; } /* Toolbar label */ .theme-toolbar-label { font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.3); text-align: center; padding: 2px 0 4px; } /* Individual theme buttons */ .theme-btn { font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 11px; font-weight: 500; letter-spacing: 0.01em; color: rgba(255, 255, 255, 0.5); background: transparent; border: 1px solid transparent; border-radius: 8px; padding: 5px 10px; cursor: pointer; text-align: center; transition: all 0.2s ease; white-space: nowrap; display: flex; align-items: center; justify-content: center; gap: 5px; } .theme-btn:hover { background: rgba(255, 255, 255, 0.07); color: rgba(255, 255, 255, 0.85); border-color: rgba(255, 255, 255, 0.12); } .theme-btn.active { background: rgba(255, 255, 255, 0.12); color: #fff; border-color: rgba(255, 255, 255, 0.25); font-weight: 600; } /* Per-theme button accent dots */ .theme-btn[data-theme-btn="night"]::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #818CF8; display: inline-block; flex-shrink: 0; } .theme-btn[data-theme-btn="dawn"]::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #FB7185; display: inline-block; flex-shrink: 0; } .theme-btn[data-theme-btn="morning"]::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #38BDF8; display: inline-block; flex-shrink: 0; } .theme-btn[data-theme-btn="midday"]::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #FACC15; display: inline-block; flex-shrink: 0; } .theme-btn[data-theme-btn="golden"]::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #F59E0B; display: inline-block; flex-shrink: 0; } .theme-btn[data-theme-btn="dusk"]::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #5AC8C8; display: inline-block; flex-shrink: 0; } .theme-btn[data-theme-btn="auto"]::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: linear-gradient(135deg, #38BDF8, #FB7185); display: inline-block; flex-shrink: 0; } /* Divider between buttons and QA section */ .theme-divider { height: 1px; background: rgba(255, 255, 255, 0.08); margin: 4px 0; } /* QA center-line button */ .qa-centerline-btn { font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 10px; font-weight: 500; color: rgba(255, 100, 100, 0.65); background: transparent; border: 1px solid rgba(255, 100, 100, 0.2); border-radius: 8px; padding: 5px 8px; cursor: pointer; text-align: center; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; gap: 4px; } .qa-centerline-btn:hover { background: rgba(255, 100, 100, 0.1); color: rgba(255, 100, 100, 0.9); border-color: rgba(255, 100, 100, 0.35); } .qa-centerline-btn.active { background: rgba(255, 50, 50, 0.15); color: #ff4444; border-color: rgba(255, 50, 50, 0.5); font-weight: 600; } /* ================================================================ QA CENTER-LINE OVERLAY Shown inside .app-container at exactly 50% width ================================================================ */ .qa-centerline { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: rgba(255, 40, 40, 0.85); z-index: 9998; display: none; pointer-events: none; box-shadow: 0 0 6px rgba(255, 40, 40, 0.6); } .qa-centerline::before { content: '50%'; position: absolute; top: 8px; left: 4px; font-size: 9px; font-family: monospace; color: rgba(255, 100, 100, 0.9); background: rgba(0, 0, 0, 0.6); padding: 2px 4px; border-radius: 3px; white-space: nowrap; } /* ================================================================ APP-CONTAINER SMOOTH THEME TRANSITIONS ================================================================ */ .app-container, .app-header, .option-btn-full, .option-btn, .challenge-card, .card, .btn-continue { transition: background-color 0.5s ease, border-color 0.4s ease, color 0.4s ease, box-shadow 0.5s ease; } /* ================================================================ ACCENT COLOR TEXT OVERRIDE PER THEME .highlight class automatically inherits --accent-teal ================================================================ */ .highlight { color: var(--accent-teal) !important; } /* Big number gradient uses accent gradient */ .big-number { background: var(--accent-gradient) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; } /* Mirror problem gradient */ .mirror-problem { background: var(--accent-gradient) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; } /* Melatonin time gradient */ .melatonin-time { background: var(--accent-gradient) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; } /* Alarm digits */ .alarm-hour, .alarm-minute { background: var(--accent-gradient) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; } /* Hours number */ .hours-number { background: var(--accent-gradient) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; } /* Accent teal text on selected items */ .option-btn-full.selected .option-emoji, .option-btn-full.selected .option-icon-svg, .option-btn.selected .option-emoji, .option-btn.selected .option-icon-svg, .challenge-card.selected .challenge-avatar { color: var(--accent-teal) !important; } /* Update teaser border */ .update-teaser { background: var(--accent-teal-dim) !important; border-color: rgba(var(--accent-teal), 0.3) !important; } /* Progress dots */ .progress-dots-top .progress-dot.active { background: var(--accent-teal) !important; box-shadow: var(--shadow-glow-teal) !important; } .progress-dots-top .progress-dot.completed { background: var(--accent-teal-dim) !important; } /* Logo text color */ .logo-text { color: var(--text-primary) !important; } /* Logo icon */ .logo-icon { color: var(--accent-teal) !important; } /* Window icon */ .window-icon { color: var(--accent-teal) !important; } /* (hover is handled above in the glass button block) */ /* Quote slide glass buttons — deeper dark frost (sunset/gradient bg beneath) */ .slide[data-slide="1"] .btn-continue, .slide[data-slide="2"] .btn-continue { background: linear-gradient( 145deg, rgba(255, 255, 255, 0.09) 0%, rgba(18, 14, 28, 0.55) 50%, rgba(10, 8, 20, 0.65) 100% ) !important; backdrop-filter: blur(48px) saturate(160%) brightness(1.05) !important; -webkit-backdrop-filter: blur(48px) saturate(160%) brightness(1.05) !important; border: 1px solid rgba(255, 255, 255, 0.18) !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.50), 0 3px 10px rgba(0, 0, 0, 0.35), inset 0 1.5px 0 rgba(255, 255, 255, 0.30), inset 0 -1px 0 rgba(0, 0, 0, 0.18), inset 1px 0 0 rgba(255, 255, 255, 0.06), inset -1px 0 0 rgba(255, 255, 255, 0.06) !important; color: rgba(255, 255, 255, 0.95) !important; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.50); } .slide[data-slide="1"] .btn-continue:hover:not(.disabled), .slide[data-slide="2"] .btn-continue:hover:not(.disabled) { backdrop-filter: blur(60px) saturate(190%) brightness(1.1) !important; -webkit-backdrop-filter: blur(60px) saturate(190%) brightness(1.1) !important; border-color: rgba(255, 255, 255, 0.30) !important; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.35), inset 0 2px 0 rgba(255, 255, 255, 0.40), inset 0 -1px 0 rgba(0, 0, 0, 0.14) !important; } /* ================================================================ EXTENDED THEME SYSTEM — VISUAL ATMOSPHERE & CONSISTENCY Applies to ALL 33 slides. Time-of-day visual coherence. ================================================================ */ /* ---------------------------------------------------------------- STARFIELD VISIBILITY PER THEME Canvas stars show for night/dusk, hidden for day themes ---------------------------------------------------------------- */ #starfield { transition: opacity 0.9s ease; } html[data-theme="night"] #starfield { opacity: 1; } html[data-theme="dawn"] #starfield { opacity: 0.22; } html[data-theme="morning"] #starfield { opacity: 0; pointer-events: none; } html[data-theme="midday"] #starfield { opacity: 0; pointer-events: none; } html[data-theme="golden"] #starfield { opacity: 0; pointer-events: none; } html[data-theme="dusk"] #starfield { opacity: 0.78; } /* ---------------------------------------------------------------- SHOOTING STARS — Hide for day themes ---------------------------------------------------------------- */ html[data-theme="morning"] .shooting-star, html[data-theme="midday"] .shooting-star, html[data-theme="golden"] .shooting-star { opacity: 0 !important; animation: none !important; } html[data-theme="night"] .shooting-star { background: linear-gradient(90deg, rgba(129, 140, 248, 0.7), transparent); } html[data-theme="dawn"] .shooting-star { background: linear-gradient(90deg, rgba(251, 113, 133, 0.4), transparent); opacity: 0.3; } html[data-theme="dusk"] .shooting-star { background: linear-gradient(90deg, rgba(90, 200, 200, 0.6), transparent); } /* ---------------------------------------------------------------- FALLING STARS OVERLAY — Quote slides 1 & 2 Visible only for night/dusk; hidden or faint for day ---------------------------------------------------------------- */ .falling-stars-overlay { transition: opacity 0.9s ease; } html[data-theme="night"] .falling-stars-overlay { opacity: 1; } html[data-theme="dawn"] .falling-stars-overlay { opacity: 0.18; } html[data-theme="morning"] .falling-stars-overlay { opacity: 0; pointer-events: none; } html[data-theme="midday"] .falling-stars-overlay { opacity: 0; pointer-events: none; } html[data-theme="golden"] .falling-stars-overlay { opacity: 0; pointer-events: none; } html[data-theme="dusk"] .falling-stars-overlay { opacity: 0.52; } /* Falling star particle colors per theme */ html[data-theme="night"] .falling-star-particle { box-shadow: 0 0 4px 1px rgba(210, 215, 255, 0.85), 0 0 10px 3px rgba(129, 140, 248, 0.55), 0 0 20px 6px rgba(192, 132, 252, 0.30); } html[data-theme="night"] .falling-star-particle::after { background: linear-gradient(to bottom, rgba(220,225,255,0.9), rgba(129,140,248,0.6) 30%, rgba(192,132,252,0.3) 60%, transparent); } html[data-theme="dawn"] .falling-star-particle { box-shadow: 0 0 4px 1px rgba(255, 210, 195, 0.80), 0 0 10px 3px rgba(251, 113, 133, 0.45), 0 0 20px 6px rgba(253, 186, 116, 0.28); } html[data-theme="dawn"] .falling-star-particle::after { background: linear-gradient(to bottom, rgba(255,225,210,0.9), rgba(251,113,133,0.55) 30%, rgba(253,186,116,0.28) 60%, transparent); } /* ---------------------------------------------------------------- APP-CONTAINER ATMOSPHERIC BACKGROUNDS PER THEME These show through slides that don't have explicit backgrounds (the majority of slides 3–22, 24–25, 28–32) ---------------------------------------------------------------- */ html[data-theme="night"] .app-container { background: radial-gradient(ellipse at 28% 18%, rgba(70, 60, 155, 0.08) 0%, transparent 48%), radial-gradient(ellipse at 75% 78%, rgba(42, 32, 110, 0.06) 0%, transparent 48%), var(--bg-deep); } /* Dawn: Muted dusty rose glow rising from the bottom horizon */ html[data-theme="dawn"] .app-container { background: radial-gradient(ellipse 240% 80% at 50% 132%, rgba(180, 75, 55, 0.18) 0%, rgba(145, 46, 62, 0.12) 28%, transparent 54%), radial-gradient(ellipse at 35% 92%, rgba(175, 105, 55, 0.08) 0%, transparent 42%), radial-gradient(ellipse at 65% 88%, rgba(160, 60, 75, 0.06) 0%, transparent 40%), var(--bg-deep); } /* Morning: Soft cerulean glow at top — clear sky, not electric */ html[data-theme="morning"] .app-container { background: radial-gradient(ellipse at 50% -12%, rgba(60, 130, 180, 0.14) 0%, transparent 52%), radial-gradient(ellipse 150% 22% at 22% 14%, rgba(255, 255, 255, 0.022) 0%, transparent 65%), radial-gradient(ellipse 100% 16% at 70% 26%, rgba(255, 255, 255, 0.016) 0%, transparent 55%), radial-gradient(ellipse at 58% 8%, rgba(84, 160, 200, 0.08) 0%, transparent 40%), var(--bg-deep); } /* Midday: Muted warm gold zenith glow — ochre, not garish yellow */ html[data-theme="midday"] .app-container { background: radial-gradient(circle 80px at 50% -20px, rgba(180, 145, 35, 0.14) 0%, rgba(160, 110, 20, 0.07) 55%, transparent 100%), radial-gradient(ellipse 120% 50% at 50% -5%, rgba(184, 144, 48, 0.08) 0%, transparent 58%), radial-gradient(ellipse at 68% 4%, rgba(175, 100, 32, 0.04) 0%, transparent 42%), var(--bg-deep); } /* Golden Hour: Deep amber horizon glow — cinematic, not orange */ html[data-theme="golden"] .app-container { background: radial-gradient(ellipse 260% 92% at 50% 128%, rgba(140, 65, 12, 0.22) 0%, rgba(110, 44, 5, 0.14) 28%, transparent 54%), radial-gradient(ellipse 95% 58% at 88% 74%, rgba(175, 110, 18, 0.09) 0%, transparent 50%), radial-gradient(ellipse at 50% 100%, rgba(148, 58, 40, 0.07) 0%, transparent 40%), var(--bg-deep); } /* Dusk: Refined teal-violet twilight — deeper & more sophisticated */ html[data-theme="dusk"] .app-container { background: radial-gradient(ellipse 210% 92% at 50% 120%, rgba(58, 32, 78, 0.16) 0%, rgba(44, 24, 60, 0.10) 28%, transparent 54%), radial-gradient(ellipse at 28% 26%, rgba(70, 168, 168, 0.04) 0%, transparent 42%), radial-gradient(ellipse at 74% 18%, rgba(110, 100, 180, 0.05) 0%, transparent 40%), var(--bg-deep); } /* ---------------------------------------------------------------- SPECIAL SLIDE BACKGROUNDS — Use CSS variables for theme parity ---------------------------------------------------------------- */ /* Hope slide (27) — teal radial glow */ .hope-slide { background: radial-gradient(ellipse at 50% 60%, var(--accent-teal-dim) 0%, transparent 60%), var(--bg-deep) !important; } /* Energy age slide (26) — purple radial glow */ .energy-age-slide { background: radial-gradient(ellipse at 50% 30%, var(--accent-purple-dim) 0%, transparent 60%), var(--bg-deep) !important; } /* Paywall slide (33) — dual accent glow top/bottom */ .paywall-slide { background: radial-gradient(ellipse at 50% 0%, var(--accent-purple-dim) 0%, transparent 40%), radial-gradient(ellipse at 50% 100%, var(--accent-teal-dim) 0%, transparent 30%), var(--bg-deep) !important; } /* ---------------------------------------------------------------- APP HEADER — Theme-aware gradient (ALL THEMES) Must match the slide background for seamless blend High specificity to override everything including sunset-active ---------------------------------------------------------------- */ html[data-theme="night"] body .app-header, html[data-theme="night"] body.sunset-active .app-header, html[data-theme="night"] .app-container .app-header { background: linear-gradient(to bottom, #04050D 0%, #04050D 75%, transparent 100%) !important; } html[data-theme="dawn"] body .app-header, html[data-theme="dawn"] body.sunset-active .app-header, html[data-theme="dawn"] .app-container .app-header { background: linear-gradient(to bottom, #190D10 0%, #190D10 75%, transparent 100%) !important; } html[data-theme="morning"] body .app-header, html[data-theme="morning"] body.sunset-active .app-header, html[data-theme="morning"] .app-container .app-header { background: linear-gradient(to bottom, #040F1A 0%, #040F1A 75%, transparent 100%) !important; } html[data-theme="midday"] body .app-header, html[data-theme="midday"] body.sunset-active .app-header, html[data-theme="midday"] .app-container .app-header { background: linear-gradient(to bottom, #0C0B00 0%, #0C0B00 75%, transparent 100%) !important; } html[data-theme="golden"] body .app-header, html[data-theme="golden"] body.sunset-active .app-header, html[data-theme="golden"] .app-container .app-header { background: linear-gradient(to bottom, #0E0700 0%, #0E0700 75%, transparent 100%) !important; } html[data-theme="dusk"] body .app-header, html[data-theme="dusk"] body.sunset-active .app-header, html[data-theme="dusk"] .app-container .app-header { background: linear-gradient(to bottom, #14141C 0%, #14141C 75%, transparent 100%) !important; } /* ---------------------------------------------------------------- CHART / CURVE ELEMENTS — Theme-aware colors ---------------------------------------------------------------- */ .legend-dot.current { background: var(--accent-purple) !important; box-shadow: 0 0 8px var(--accent-purple-glow) !important; } .legend-dot.optimal { background: var(--accent-teal) !important; box-shadow: 0 0 8px var(--accent-teal-glow) !important; } /* Protocol summary time */ .summary-time { color: var(--accent-teal) !important; } /* Protocol ring progress */ .protocol-ring-progress { stroke: var(--accent-teal) !important; filter: drop-shadow(0 0 6px var(--accent-teal-glow)) !important; } /* ---------------------------------------------------------------- WINDOW FACT & BLOCK PREVIEW — Use accent teal-dim ---------------------------------------------------------------- */ .window-fact { background: var(--accent-teal-dim) !important; border-color: rgba(255,255,255,0.12) !important; } .block-preview { background: var(--accent-teal-dim) !important; border-color: rgba(255,255,255,0.12) !important; } /* Update badge (slide 27) */ .update-badge { background: linear-gradient(135deg, var(--accent-teal-dim) 0%, var(--accent-purple-dim) 100%) !important; border-color: rgba(255,255,255,0.15) !important; } /* ---------------------------------------------------------------- PROMISE ITEMS (paywall, slide 33) ---------------------------------------------------------------- */ .promise-item { background: var(--bg-card) !important; border-color: var(--border-card) !important; } .promise-number { background: var(--accent-gradient) !important; } /* ---------------------------------------------------------------- APP CONTAINER TRANSITION (smooth when switching themes) ---------------------------------------------------------------- */ .app-container { transition: background 0.7s ease, background-color 0.7s ease !important; } /* ---------------------------------------------------------------- MAGICAL SLIDES (24, 25) — Missing CSS definitions ---------------------------------------------------------------- */ .magical-slide { /* No explicit background — inherits from app-container atmospheric */ } .magical-reveal { text-align: center; padding: var(--spacing-md) 0; display: flex; flex-direction: column; align-items: center; gap: var(--spacing-md); } .magical-intro { font-size: clamp(15px, 4vw, 17px); font-weight: 300; color: var(--text-secondary); line-height: 1.55; max-width: 280px; text-align: center; } .big-metric-container { margin: var(--spacing-sm) 0; } .big-metric { font-size: clamp(52px, 14vw, 72px); font-weight: 200; letter-spacing: -0.02em; background: var(--accent-gradient) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; display: block; line-height: 1.05; } .big-metric-container.debt .big-metric { background: linear-gradient(135deg, var(--accent-purple) 0%, var(--color-danger)) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; } .magical-label { font-size: clamp(14px, 3.8vw, 16px); font-weight: 400; color: var(--text-secondary); letter-spacing: 0.01em; } .magical-note { font-size: 13px; font-weight: 300; color: var(--text-muted); line-height: 1.65; max-width: 290px; text-align: center; margin-top: var(--spacing-sm); } /* ---------------------------------------------------------------- SCREENS WITH STAT NUMBERS — Apply theme gradient ---------------------------------------------------------------- */ .stat-number { background: var(--accent-gradient) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; } /* ---------------------------------------------------------------- MIDDAY THEME — Special "sun glow" visual overlay Implemented as a separate positioned element in JS, or via body::after on app-container. Using CSS gradient approach. ---------------------------------------------------------------- */ /* The CSS radial gradient in app-container handles the sun. Additional subtle rays for midday: */ html[data-theme="midday"] .stars-layer, html[data-theme="midday"] .stars-layer-2, html[data-theme="midday"] .stars-layer-3 { opacity: 0 !important; } html[data-theme="morning"] .stars-layer, html[data-theme="morning"] .stars-layer-2, html[data-theme="morning"] .stars-layer-3 { opacity: 0 !important; } html[data-theme="golden"] .stars-layer, html[data-theme="golden"] .stars-layer-2, html[data-theme="golden"] .stars-layer-3 { opacity: 0 !important; } /* Dawn: very faint star layers */ html[data-theme="dawn"] .stars-layer { opacity: 0.12 !important; } html[data-theme="dawn"] .stars-layer-2 { opacity: 0.08 !important; } html[data-theme="dawn"] .stars-layer-3 { opacity: 0.05 !important; } /* Night: full stars */ html[data-theme="night"] .stars-layer { opacity: 0.7; } html[data-theme="night"] .stars-layer-2 { opacity: 0.5; } html[data-theme="night"] .stars-layer-3 { opacity: 0.4; } /* Dusk: partial stars */ html[data-theme="dusk"] .stars-layer { opacity: 0.5; } html[data-theme="dusk"] .stars-layer-2 { opacity: 0.38; } html[data-theme="dusk"] .stars-layer-3 { opacity: 0.28; } /* ---------------------------------------------------------------- OPTION BUTTONS — Ensure theme accent on selected state ---------------------------------------------------------------- */ .option-btn-full.selected, .option-btn.selected, .challenge-card.selected { background: var(--accent-teal-dim) !important; border-color: var(--accent-teal) !important; } .option-btn-full.selected .option-emoji, .option-btn-full.selected .option-icon-svg, .option-btn.selected .option-icon, .challenge-card.selected .challenge-avatar { color: var(--accent-teal) !important; } /* ---------------------------------------------------------------- PROGRESS DOTS — Theme accent ---------------------------------------------------------------- */ .progress-dots-top .progress-dot.active { background: var(--accent-teal) !important; box-shadow: var(--shadow-glow-teal) !important; } .progress-dots-top .progress-dot.completed { background: var(--accent-teal-dim) !important; box-shadow: none !important; } /* ---------------------------------------------------------------- PERMISSION SLIDE (23) — Glass card theming ---------------------------------------------------------------- */ .permission-card { background: var(--bg-card) !important; border-color: var(--border-card) !important; } .permission-card:hover { border-color: var(--accent-teal) !important; } .permission-card.granted { border-color: var(--color-success) !important; background: rgba(52, 211, 153, 0.08) !important; } .permission-card-icon { background: var(--bg-card-elevated) !important; color: var(--accent-teal) !important; } .permission-btn { background: var(--accent-gradient) !important; } /* ---------------------------------------------------------------- ENERGY AGE ELEMENTS — Theme-aware colors ---------------------------------------------------------------- */ .hope-stat-number-inline { background: var(--accent-gradient) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; } /* ---------------------------------------------------------------- ALARM DISPLAY — Theme-aware gradient digits ---------------------------------------------------------------- */ .alarm-colon { color: var(--accent-teal) !important; text-shadow: 0 0 12px var(--accent-teal-glow) !important; } /* ---------------------------------------------------------------- SLEEP PROFILE CARD (paywall) — Theme-aware ---------------------------------------------------------------- */ .sleep-profile-card { background: var(--bg-card) !important; border-color: var(--border-card) !important; } .profile-value.goal, .profile-value.challenge { color: var(--accent-teal) !important; } .profile-note { color: var(--accent-teal) !important; } /* ---------------------------------------------------------------- UPDATE TEASER (slide 27) ---------------------------------------------------------------- */ .update-teaser { background: var(--accent-teal-dim) !important; border-color: rgba(255,255,255,0.14) !important; } .update-text strong { color: var(--accent-teal) !important; } /* ---------------------------------------------------------------- QUOTE SLIDE BUTTONS — Stay glass-style per theme ---------------------------------------------------------------- */ .slide[data-slide="1"] .btn-continue, .slide[data-slide="2"] .btn-continue { background: var(--glass-bg) !important; backdrop-filter: blur(24px) !important; -webkit-backdrop-filter: blur(24px) !important; border: 1px solid var(--glass-border) !important; box-shadow: 0 4px 24px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.10) !important; color: var(--text-primary) !important; } /* ---------------------------------------------------------------- SMART ALARM INFO CARD (slide 31) ---------------------------------------------------------------- */ .smart-alarm-info { background: var(--bg-card) !important; border-color: var(--border-card) !important; } .info-icon { color: var(--accent-teal) !important; } /* ---------------------------------------------------------------- PROTOCOL RINGS — background ring color ---------------------------------------------------------------- */ .protocol-ring-bg { stroke: rgba(255,255,255,0.12) !important; } .protocol-ring-icon svg { stroke: rgba(255,255,255,0.35) !important; } .protocol-ring-label { color: rgba(255,255,255,0.38) !important; } .protocol-ring-time { color: var(--accent-teal) !important; }