/* ============================================================ DOPAMAX THEME: GLASSMORPHISM — warm evening room Dark amber scene · blurred bokeh light · orange accents · heavy frosted panels with soft white borders. Active when (dark mode). Loaded after style.css. ============================================================ */ :root[data-theme="glassmorphism"] { --bg-base: #141312; --bg-surface: rgba(28, 26, 23, 0.5); --bg-card: rgba(255, 255, 255, 0.06); --bg-elevated: rgba(255, 255, 255, 0.09); --bg-hover: rgba(255, 255, 255, 0.12); --bg-primary: #141312; --accent: #ff8a4d; --accent-dim: rgba(255, 138, 77, 0.15); --accent-glow: rgba(255, 138, 77, 0.45); --accent2: #ffc46b; --accent2-dim: rgba(255, 196, 107, 0.13); --accent3: #ffb181; --accent3-dim: rgba(255, 177, 129, 0.13); --success: #7fd39a; --success-dim: rgba(127, 211, 154, 0.13); --danger: #ff7a6b; --danger-dim: rgba(255, 122, 107, 0.13); --warning: #ffd166; --text-primary: #f2efe9; --text-secondary: #c6c1b8; --text-muted: #8b867c; --text-accent: #ffb181; --border: rgba(255, 255, 255, 0.14); --border-subtle: rgba(255, 255, 255, 0.11); --border-accent: rgba(255, 150, 80, 0.40); --glass-blur: 26px; --glass-reflect: linear-gradient(90deg, transparent 4%, rgba(255,255,255,0.45) 50%, transparent 96%); --grad-aurora: linear-gradient(135deg, #ffd29b 0%, #ff9440 45%, #ff6a2b 78%, #e0501a 110%); --grad-violet: linear-gradient(135deg, #ffb347, #ff8a4d 50%, #f4622a); --grad-gold: linear-gradient(135deg, #ffe29b, #ffc46b 55%, #e8950f); --radius: 18px; --radius-sm: 12px; --radius-lg: 24px; --shadow-card: 0 12px 38px rgba(0, 0, 0, 0.45); --shadow-float: 0 22px 56px rgba(0, 0, 0, 0.6); --shadow-glow: 0 0 24px rgba(255, 130, 60, 0.22); --shadow-glow2: 0 0 24px rgba(255, 190, 110, 0.14); } /* ---- smoky neutral room scene, faint warm light ---- */ :root[data-theme="glassmorphism"] body { background: radial-gradient(ellipse 55% 40% at 8% 95%, rgba(255, 125, 45, 0.12), transparent 60%), radial-gradient(ellipse 50% 40% at 90% 12%, rgba(140, 150, 130, 0.08), transparent 60%), radial-gradient(ellipse 65% 50% at 75% 95%, rgba(80, 70, 55, 0.18), transparent 65%), radial-gradient(ellipse 55% 40% at 20% 5%, rgba(58, 60, 54, 0.20), transparent 60%), linear-gradient(160deg, #161513, #1c1a17 55%, #121110); background-attachment: fixed; } /* aurora blobs: dim, neutral smoke with one warm ember */ :root[data-theme="glassmorphism"] .aurora-bg .ab { opacity: 0.28; } :root[data-theme="glassmorphism"] .aurora-bg .ab1 { background: radial-gradient(circle, #3a3630, transparent 65%); } :root[data-theme="glassmorphism"] .aurora-bg .ab2 { background: radial-gradient(circle, #44403a, transparent 65%); } :root[data-theme="glassmorphism"] .aurora-bg .ab3 { background: radial-gradient(circle, #34382e, transparent 65%); } :root[data-theme="glassmorphism"] .aurora-bg .ab4 { background: radial-gradient(circle, #7a4418, transparent 65%); opacity: 0.22; } /* mute the (hardcoded) violet particle motes & beams into quiet warm dust */ :root[data-theme="glassmorphism"] #spark-canvas, :root[data-theme="glassmorphism"] .bg-beam, :root[data-theme="glassmorphism"] .light-pillar-container { filter: hue-rotate(135deg) saturate(0.5) brightness(0.9); opacity: 0.5; } /* ---- heavier frosted panels ---- */ :root[data-theme="glassmorphism"] .card, :root[data-theme="glassmorphism"] .stat-card, :root[data-theme="glassmorphism"] .item-card, :root[data-theme="glassmorphism"] .chart-card, :root[data-theme="glassmorphism"] .settings-section, :root[data-theme="glassmorphism"] .auth-card { background: linear-gradient(160deg, rgba(255,255,255,0.075), rgba(255,255,255,0.035)); border: 1px solid rgba(255, 255, 255, 0.15); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.20), var(--shadow-card); -webkit-backdrop-filter: blur(30px) saturate(135%); backdrop-filter: blur(30px) saturate(135%); } :root[data-theme="glassmorphism"] .card:hover, :root[data-theme="glassmorphism"] .stat-card:hover, :root[data-theme="glassmorphism"] .item-card:hover, :root[data-theme="glassmorphism"] .chart-card:hover, :root[data-theme="glassmorphism"] .settings-section:hover { border-color: rgba(255, 255, 255, 0.26); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), var(--shadow-float); } :root[data-theme="glassmorphism"] .sidebar { background: rgba(26, 24, 21, 0.45); border-right: 1px solid rgba(255, 255, 255, 0.11); -webkit-backdrop-filter: blur(32px) saturate(135%); backdrop-filter: blur(32px) saturate(135%); } :root[data-theme="glassmorphism"] .modal { background: rgba(32, 30, 26, 0.82); border: 1px solid rgba(255, 255, 255, 0.17); -webkit-backdrop-filter: blur(32px) saturate(135%); backdrop-filter: blur(32px) saturate(135%); } :root[data-theme="glassmorphism"] .modal-overlay { background: rgba(8, 7, 6, 0.6); } /* ---- orange identity ---- */ :root[data-theme="glassmorphism"] .btn-primary { background: linear-gradient(115deg, #f4622a, #ff9440 70%, #ffb35c); border: none; color: #fff; box-shadow: 0 10px 30px rgba(255, 110, 45, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.3); } :root[data-theme="glassmorphism"] .btn-primary:hover { box-shadow: 0 14px 40px rgba(255, 120, 50, 0.5), inset 0 1px 0 rgba(255,255,255,0.35); } :root[data-theme="glassmorphism"] .btn-ghost { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.22); } :root[data-theme="glassmorphism"] .btn-ghost:hover { border-color: #ff9d5c; color: #ffb181; } :root[data-theme="glassmorphism"] .brand-icon { background: linear-gradient(135deg, #f4622a, #ff9440); box-shadow: 0 0 20px rgba(255, 130, 60, 0.45); } :root[data-theme="glassmorphism"] .sidebar-brand h1 { background: var(--grad-aurora); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } :root[data-theme="glassmorphism"] .dopamine-pill { background: rgba(255, 138, 77, 0.13); border: 1px solid rgba(255, 150, 80, 0.35); color: #ffb181; } :root[data-theme="glassmorphism"] .streak-number { color: #ffb181; text-shadow: 0 0 18px rgba(255, 140, 70, 0.45); } :root[data-theme="glassmorphism"] .progress-bar, :root[data-theme="glassmorphism"] .progress-bar-large { background: rgba(255, 255, 255, 0.08); } /* ---- inputs ---- */ :root[data-theme="glassmorphism"] input[type="text"], :root[data-theme="glassmorphism"] input[type="number"], :root[data-theme="glassmorphism"] input[type="email"], :root[data-theme="glassmorphism"] input[type="password"], :root[data-theme="glassmorphism"] select, :root[data-theme="glassmorphism"] textarea { background: rgba(12, 11, 10, 0.5); border: 1px solid rgba(255, 255, 255, 0.15); color: var(--text-primary); } :root[data-theme="glassmorphism"] input:focus, :root[data-theme="glassmorphism"] select:focus, :root[data-theme="glassmorphism"] textarea:focus { border-color: #ff9d5c; } :root[data-theme="glassmorphism"] select option { background: #201e1b; color: var(--text-primary); } /* ---- calendar & bits ---- */ :root[data-theme="glassmorphism"] .cal-cell.sel { background: linear-gradient(115deg, #f4622a, #ff9440); color: #fff; } :root[data-theme="glassmorphism"] .cal-cell.today { border-color: #ff9d5c; } :root[data-theme="glassmorphism"] .cal-dot { background: #ff9d5c; } :root[data-theme="glassmorphism"] .theme-swatch.active { border-color: #ff9d5c; box-shadow: 0 0 18px rgba(255, 140, 70, 0.3); }