/* ═══════════════════════════════════════════════ GLASSMORPHISM STYLE — "Frost" Adds frosted glass surfaces on top of existing theme. Colors stay the same (warm amber dark / warm linen light). Activated via [data-style="glass"] on . ═══════════════════════════════════════════════ */ /* ── Glass tokens (dark) ── */ [data-style="glass"] { --bg-secondary: rgba(255, 255, 255, 0.03); --bg-card: rgba(255, 255, 255, 0.05); --bg-elevated: rgba(255, 255, 255, 0.08); --bg-input: rgba(255, 255, 255, 0.06); --bg-sidebar: rgba(17, 17, 17, 0.65); --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.10); --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.4); --shadow-elevated: 0 12px 48px rgba(0, 0, 0, 0.6); --glass-bg: rgba(255, 255, 255, 0.04); --glass-border: rgba(255, 255, 255, 0.08); --glass-blur: 20px; } /* ── Glass tokens (light + sakura) ── */ [data-style="glass"][data-theme="light"], [data-style="glass"][data-theme="sakura"] { --bg-secondary: rgba(255, 255, 255, 0.5); --bg-card: rgba(255, 255, 255, 0.55); --bg-elevated: rgba(255, 255, 255, 0.65); --bg-input: rgba(255, 255, 255, 0.6); --bg-sidebar: rgba(245, 240, 233, 0.7); --border-subtle: rgba(0, 0, 0, 0.06); --border-default: rgba(0, 0, 0, 0.10); --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.06); --shadow-elevated: 0 12px 48px rgba(0, 0, 0, 0.10); --glass-bg: rgba(255, 255, 255, 0.45); --glass-border: rgba(255, 255, 255, 0.6); --glass-blur: 24px; } [data-style="glass"][data-theme="sakura"] { --bg-sidebar: rgba(250, 235, 241, 0.7); } /* ═══════════════════════════════════════════════ FROSTED SURFACE OVERRIDES ═══════════════════════════════════════════════ */ /* Sidebar */ [data-style="glass"] .sidebar { background: var(--glass-bg); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); border-right: 1px solid var(--glass-border); } /* Cards & surfaces */ [data-style="glass"] .card, [data-style="glass"] .stat-card, [data-style="glass"] .group-card, [data-style="glass"] .member-card, [data-style="glass"] .ranking-item, [data-style="glass"] .task-section, [data-style="glass"] .group-banner { background: var(--glass-bg); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); border: 1px solid var(--glass-border); box-shadow: var(--shadow-card); } /* Top bar */ [data-style="glass"] .top-bar { background: var(--glass-bg); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); border-bottom: 1px solid var(--glass-border); } /* Settings groups */ [data-style="glass"] .settings-group { background: var(--glass-bg); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); padding: 20px 24px; } [data-style="glass"] .settings-item { border-bottom-color: var(--glass-border); } [data-style="glass"] .settings-item:last-child { border-bottom: none; } /* Inputs */ [data-style="glass"] input, [data-style="glass"] select, [data-style="glass"] textarea { background: var(--glass-bg); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid var(--glass-border); } [data-style="glass"] input:focus, [data-style="glass"] select:focus, [data-style="glass"] textarea:focus { border-color: var(--amber-primary); box-shadow: 0 0 0 2px rgba(212, 149, 106, 0.15); } /* Buttons */ [data-style="glass"] .btn--secondary { background: var(--glass-bg); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid var(--glass-border); } /* Toggle slider */ [data-style="glass"] .toggle__slider { background: var(--glass-bg); border: 1px solid var(--glass-border); } /* Section header */ [data-style="glass"] .section-header { border-bottom-color: var(--glass-border); } /* Modals & popups */ [data-style="glass"] .modal, [data-style="glass"] .popup { background: var(--glass-bg); -webkit-backdrop-filter: blur(32px); backdrop-filter: blur(32px); border: 1px solid var(--glass-border); } /* Notification panel */ [data-style="glass"] .notif-panel { background: var(--glass-bg); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); border: 1px solid var(--glass-border); } /* Mobile menu */ [data-style="glass"] .mobile-menu { background: var(--glass-bg); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); } /* Ambient select */ [data-style="glass"] .ambient-select { background: var(--glass-bg); border: 1px solid var(--glass-border); } /* ═══════════════════════════════════════════════ STYLE SELECTOR — settings page ═══════════════════════════════════════════════ */ .style-selector { display: flex; gap: 8px; } .style-selector__option { position: relative; flex: 1; max-width: 200px; padding: 14px 16px; border-radius: var(--radius-md); border: 2px solid var(--border-subtle); background: var(--bg-card); cursor: pointer; transition: all var(--transition-fast); text-align: center; } .style-selector__option:hover { border-color: var(--border-default); } .style-selector__option.active { border-color: var(--amber-primary); box-shadow: 0 0 0 1px var(--amber-primary); } .style-selector__name { font-family: var(--font-display); font-size: 0.9rem; font-weight: 600; color: var(--text-primary); margin-bottom: 2px; } .style-selector__desc { font-size: 0.75rem; color: var(--text-muted); } .style-selector__preview { width: 100%; height: 40px; border-radius: 6px; margin-bottom: 10px; position: relative; overflow: hidden; } .style-selector__preview--classic { background: linear-gradient(135deg, #1A1A1A 0%, #222222 50%, #D4956A 100%); border: 1px solid #2A2520; } .style-selector__preview--glass { background: linear-gradient(135deg, #0D0D0D 0%, rgba(212,149,106,0.15) 50%, #D4956A 100%); border: 1px solid rgba(255,255,255,0.10); } .style-selector__preview--noir { background: linear-gradient(135deg, #0D0D0D 0%, #1A1A1A 50%, #D4956A 100%); border: 1px solid #2A2520; } .style-selector__preview--linen { background: linear-gradient(135deg, #FAF6F1 0%, #F2ECE4 50%, #C07D4F 100%); border: 1px solid #E8E0D6; } .style-selector__preview--sakura { background: linear-gradient(135deg, #FDF2F6 0%, #FAE8EF 45%, #D96A9E 100%); border: 1px solid #F2DCE6; } .style-selector__preview--mono { background: linear-gradient(135deg, #0F0F0F 0%, #1A1A1A 45%, #C9C9C9 100%); border: 1px solid #383838; } .style-selector__preview--lagoon { background: linear-gradient(135deg, #06131A 0%, #0B1F28 45%, #4FD8C4 100%); border: 1px solid #133039; } .style-selector__preview--lagoon::after { content: ''; position: absolute; inset: 0; background: radial-gradient(60px 30px at 30% 60%, rgba(126, 200, 227, 0.25), transparent 70%); border-radius: 6px; } .style-selector__preview--glass::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, transparent 60%); border-radius: 6px; } .style-selector__check { display: none; position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; border-radius: 50%; background: var(--amber-primary); color: var(--text-inverse); font-size: 12px; line-height: 20px; text-align: center; } .style-selector__option.active .style-selector__check { display: block; }