/* ── FrontDesk24 Themes ───────────────────────────────────────────────── Applied via [data-theme="name"] on . Uses :root[data-theme] to override :root defaults in the page stylesheets. Each theme uses a real background image with glassmorphic overlays. Theme images live in /static/backgrounds/. Themes: 1. coastal-dark — Underwater reef, teal glass panels 2. classic — Warm watercolor concierge, polished oak borders 3. vintage — Sepia pencil sketch, aged brass & parchment 4. grand — Marble lobby, wrought iron & marble accents 5. chandelier — Rich mahogany lobby, gold & crystal 6. inkwash — Moody ink wash desk, dark walnut & amber 7–11. fut1–fut5 — Retro-futuristic hotel lobbies, copper & chrome 12–16. ind1–ind5 — Indian palace lobbies, ornate gold & marble 17–18. sketch7/8 — Watercolor lobby sketches, warm walnut 19. modern — Ultra-clean monochrome, huge sans-serif (YOTEL-inspired) 20. deco — Art Deco / 1930s grand hotel, geometric brass & gold 21. warm — Four Seasons-style warm neutrals, cream/taupe/copper 22. holo — Holographic cyber-luxury, neon edge glows, volumetric glass 23. electro — Futuro-electro AI-powered, purple + cyan energy pulses 24–29. radiant-* — WebGL GPU shader backgrounds (Radiant library) 24. radiant-gold — Liquid Gold: molten metal flow 25. radiant-aurora — Aurora Veil: northern lights 26. radiant-silk — Silk Cascade: flowing fabric 27. radiant-diamond — Diamond Caustics: prismatic fire 28. radiant-moonlit — Moonlit Ripple: moon on water 29. radiant-stardust — Stardust Veil: cosmic particles ───────────────────────────────────────────────────────────────────────── */ /* ── Shared Background Layer ──────────────────────────────────────────── */ body::after { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-size: cover; background-position: center; } /* ═══════════════════════════════════════════════════════════════════════ 1. COASTAL DARK — underwater reef, teal/cyan glass (default) ═══════════════════════════════════════════════════════════════════════ */ :root[data-theme="coastal-dark"] { --bg: #06121a; --fg: #d8f0ff; --accent: #20d4e8; --accent-dim: rgba(32,212,232,0.18); --glow: rgba(32,212,232,0.5); --muted: #7aa8c0; --panel-bg: rgba(10,25,40,0.65); --border: rgba(32,212,232,0.15); --danger: #ff5a5a; } [data-theme="coastal-dark"] .logo { color: #20d4e8; } [data-theme="coastal-dark"] header { background: rgba(8,20,35,0.75); backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); } [data-theme="coastal-dark"] .bubble.concierge { background: rgba(8,20,35,0.85); border-left-color: #20d4e8; } [data-theme="coastal-dark"] .bubble.guest { background: linear-gradient(135deg, #20d4e8, #18b8cc); color: #06121a; } [data-theme="coastal-dark"] .bubble.system { background: rgba(32,212,232,0.04); } [data-theme="coastal-dark"] .session-card { background: rgba(32,212,232,0.08); border: 1px solid rgba(32,212,232,0.12); } [data-theme="coastal-dark"] .session-card.active { border-color: #20d4e8; box-shadow: 0 4px 20px rgba(32,212,232,0.2); } [data-theme="coastal-dark"] .btn-accent { background: linear-gradient(135deg, #20d4e8, #18b8cc); color: #06121a; box-shadow: 0 4px 20px rgba(32,212,232,0.4); } [data-theme="coastal-dark"] .btn-ghost:hover { border-color: #20d4e8; color: #20d4e8; background: rgba(32,212,232,0.08); } [data-theme="coastal-dark"] .input-row input { background: rgba(255,255,255,0.08); } [data-theme="coastal-dark"] .voice-bar { background: rgba(8,20,35,0.7); backdrop-filter: blur(16px); } [data-theme="coastal-dark"] .voice-bar.active { background: rgba(32,212,232,0.06); border-color: #20d4e8; } [data-theme="coastal-dark"] .badge-info { background: #20d4e8; color: #06121a; } [data-theme="coastal-dark"] .kb-file { background: rgba(32,212,232,0.05); } [data-theme="coastal-dark"] .kb-editor { background: #0a1a24; border-color: #20d4e8; } [data-theme="coastal-dark"] .kb-editor textarea { background: rgba(32,212,232,0.04); } [data-theme="coastal-dark"] .kb-editor-name { background: rgba(32,212,232,0.04); } [data-theme="coastal-dark"] #pin-modal > div, [data-theme="coastal-dark"] .modal-box { background: rgba(8,20,35,0.95); border: 1px solid rgba(32,212,232,0.2); } [data-theme="coastal-dark"] .folio-entry { border-color: rgba(32,212,232,0.08); } [data-theme="coastal-dark"] .screensaver { background: #061018; } [data-theme="coastal-dark"] .success-card { border-color: rgba(32,212,232,0.2); background: rgba(10,25,40,0.65); backdrop-filter: blur(24px); } [data-theme="coastal-dark"] .goodbye-overlay { background: #06121a; } [data-theme="coastal-dark"] .goodbye-check { border-color: #20d4e8; } [data-theme="coastal-dark"] .goodbye-check svg { stroke: #20d4e8; } [data-theme="coastal-dark"] .voice-cta-btn { border-color: rgba(32,212,232,0.3); background: rgba(32,212,232,0.08); color: #20d4e8; } [data-theme="coastal-dark"] .voice-cta-btn::before { border-color: rgba(32,212,232,0.4); } [data-theme="coastal-dark"] .voice-cta-btn::after { border-color: rgba(32,212,232,0.2); } [data-theme="coastal-dark"] .sidebar { background: rgba(8,20,35,0.8); backdrop-filter: blur(20px) saturate(160%); } [data-theme="coastal-dark"] body::after { background: none; } /* ═══════════════════════════════════════════════════════════════════════ 2. CLASSIC — warm watercolor concierge, polished oak wood borders ═══════════════════════════════════════════════════════════════════════ */ :root[data-theme="classic"] { --bg: #1a1410; --fg: #f0e6d4; --accent: #c49a5c; --accent-dim: rgba(196,154,92,0.18); --glow: rgba(196,154,92,0.35); --muted: #a08a6e; --panel-bg: rgba(26,20,16,0.75); --border: rgba(196,154,92,0.25); --danger: #c44; } [data-theme="classic"] body { background: var(--bg) url('/static/backgrounds/theme-classic.jpg') center/cover no-repeat fixed; background-blend-mode: overlay; } [data-theme="classic"] .logo { color: #c49a5c; } [data-theme="classic"] header { background: rgba(20,14,10,0.85); backdrop-filter: blur(16px); border-bottom: 2px solid rgba(139,90,43,0.4); box-shadow: 0 2px 0 rgba(90,60,25,0.3); } [data-theme="classic"] .bubble.concierge { background: rgba(26,20,16,0.9); border-left: 3px solid #c49a5c; border-radius: 4px; } [data-theme="classic"] .bubble.guest { background: linear-gradient(135deg, #c49a5c, #a07840); color: #1a1410; } [data-theme="classic"] .session-card { background: rgba(196,154,92,0.06); border: 1px solid rgba(196,154,92,0.15); border-radius: 4px; } [data-theme="classic"] .session-card.active { border-color: #c49a5c; box-shadow: inset 0 0 0 1px rgba(196,154,92,0.2); } [data-theme="classic"] .btn-accent { background: linear-gradient(135deg, #c49a5c, #a07840); color: #1a1410; box-shadow: 0 3px 12px rgba(196,154,92,0.3); border-radius: 4px; } [data-theme="classic"] .btn-ghost { border: 1px solid rgba(196,154,92,0.25); border-radius: 4px; } [data-theme="classic"] .btn-ghost:hover { border-color: #c49a5c; color: #c49a5c; background: rgba(196,154,92,0.08); } [data-theme="classic"] .input-row input { background: rgba(196,154,92,0.06); border-radius: 4px; } [data-theme="classic"] .sidebar { background: rgba(16,12,8,0.88); backdrop-filter: blur(16px); border-left: 2px solid rgba(139,90,43,0.3); } [data-theme="classic"] header, [data-theme="classic"] .sidebar { font-family: 'Georgia', 'Times New Roman', serif; } [data-theme="classic"] .success-card { border: 2px solid rgba(139,90,43,0.35); border-radius: 6px; background: rgba(26,20,16,0.85); box-shadow: 0 4px 20px rgba(0,0,0,0.4); } [data-theme="classic"] .goodbye-check { border-color: #c49a5c; } [data-theme="classic"] .goodbye-check svg { stroke: #c49a5c; } [data-theme="classic"] .voice-cta-btn { border: 2px solid rgba(196,154,92,0.3); } [data-theme="classic"] .voice-cta-btn::before { border-color: rgba(196,154,92,0.4); } [data-theme="classic"] .voice-cta-btn::after { border-color: rgba(196,154,92,0.2); } [data-theme="classic"] .kb-editor { background: #1a1410; border-color: rgba(196,154,92,0.3); } [data-theme="classic"] .kb-editor textarea { background: rgba(196,154,92,0.04); } [data-theme="classic"] #pin-modal > div, [data-theme="classic"] .modal-box { background: rgba(26,20,16,0.95); border: 2px solid rgba(139,90,43,0.35); } [data-theme="classic"] .screensaver { background: #0e0a06; } [data-theme="classic"] body::after { background: none; } /* ═══════════════════════════════════════════════════════════════════════ 3. VINTAGE — sepia pencil sketch, aged brass & parchment ═══════════════════════════════════════════════════════════════════════ */ :root[data-theme="vintage"] { --bg: #1c1812; --fg: #e8dcc4; --accent: #b8944e; --accent-dim: rgba(184,148,78,0.15); --glow: rgba(184,148,78,0.3); --muted: #9a8a6a; --panel-bg: rgba(28,24,18,0.8); --border: rgba(184,148,78,0.2); --danger: #c44; } [data-theme="vintage"] body { background: var(--bg) url('/static/backgrounds/theme-vintage.jpg') center/cover no-repeat fixed; background-blend-mode: overlay; } [data-theme="vintage"] .logo { color: #b8944e; font-family: 'Georgia', serif; font-style: italic; } [data-theme="vintage"] header { background: rgba(22,18,12,0.88); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(184,148,78,0.3); box-shadow: 0 1px 0 rgba(120,90,40,0.2); } [data-theme="vintage"] .bubble.concierge { background: rgba(28,24,18,0.9); border-left: 2px solid rgba(184,148,78,0.5); } [data-theme="vintage"] .bubble.guest { background: linear-gradient(135deg, #b8944e, #8a6e38); color: #1c1812; } [data-theme="vintage"] .session-card { background: rgba(184,148,78,0.05); border: 1px solid rgba(184,148,78,0.12); } [data-theme="vintage"] .session-card.active { border-color: #b8944e; } [data-theme="vintage"] .btn-accent { background: linear-gradient(135deg, #b8944e, #8a6e38); color: #1c1812; box-shadow: 0 3px 12px rgba(184,148,78,0.25); } [data-theme="vintage"] .btn-ghost { border-color: rgba(184,148,78,0.2); } [data-theme="vintage"] .btn-ghost:hover { border-color: #b8944e; color: #b8944e; } [data-theme="vintage"] .input-row input { background: rgba(184,148,78,0.06); } [data-theme="vintage"] .sidebar { background: rgba(22,18,12,0.88); backdrop-filter: blur(14px); border-left: 1px solid rgba(184,148,78,0.15); } [data-theme="vintage"] .success-card { border: 1px solid rgba(184,148,78,0.25); background: rgba(28,24,18,0.85); } [data-theme="vintage"] .goodbye-check { border-color: #b8944e; } [data-theme="vintage"] .goodbye-check svg { stroke: #b8944e; } [data-theme="vintage"] .voice-cta-btn { border: 1px solid rgba(184,148,78,0.3); } [data-theme="vintage"] .voice-cta-btn::before { border-color: rgba(184,148,78,0.4); } [data-theme="vintage"] .voice-cta-btn::after { border-color: rgba(184,148,78,0.15); } [data-theme="vintage"] .kb-editor { background: #1c1812; border-color: rgba(184,148,78,0.3); } [data-theme="vintage"] .kb-editor textarea { background: rgba(184,148,78,0.04); } [data-theme="vintage"] #pin-modal > div, [data-theme="vintage"] .modal-box { background: rgba(28,24,18,0.95); border: 1px solid rgba(184,148,78,0.3); } [data-theme="vintage"] .screensaver { background: #0e0a06; } [data-theme="vintage"] body::after { background: none; } /* ═══════════════════════════════════════════════════════════════════════ 4. GRAND — marble lobby with wrought iron, marble & iron accents ═══════════════════════════════════════════════════════════════════════ */ :root[data-theme="grand"] { --bg: #141a18; --fg: #e8ece8; --accent: #8aaa8e; --accent-dim: rgba(138,170,142,0.15); --glow: rgba(138,170,142,0.25); --muted: #8a9a8c; --panel-bg: rgba(18,24,22,0.75); --border: rgba(138,170,142,0.18); --danger: #c44; } [data-theme="grand"] body { background: var(--bg) url('/static/backgrounds/theme-grand.jpg') center/cover no-repeat fixed; background-blend-mode: overlay; } [data-theme="grand"] .logo { color: #8aaa8e; letter-spacing: 0.08em; text-transform: uppercase; font-size: 1rem; } [data-theme="grand"] header { background: rgba(14,18,16,0.85); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(60,60,60,0.4); box-shadow: 0 2px 0 rgba(40,40,40,0.2); } [data-theme="grand"] .bubble.concierge { background: rgba(18,24,22,0.9); border-left: 3px solid rgba(138,170,142,0.5); } [data-theme="grand"] .bubble.guest { background: linear-gradient(135deg, #8aaa8e, #6a8a6e); color: #141a18; } [data-theme="grand"] .session-card { background: rgba(138,170,142,0.05); border: 1px solid rgba(138,170,142,0.12); } [data-theme="grand"] .session-card.active { border-color: #8aaa8e; } [data-theme="grand"] .btn-accent { background: linear-gradient(135deg, #8aaa8e, #6a8a6e); color: #141a18; } [data-theme="grand"] .btn-ghost { border-color: rgba(138,170,142,0.18); } [data-theme="grand"] .btn-ghost:hover { border-color: #8aaa8e; color: #8aaa8e; } [data-theme="grand"] .input-row input { background: rgba(138,170,142,0.06); } [data-theme="grand"] .sidebar { background: rgba(14,18,16,0.88); backdrop-filter: blur(16px); border-left: 1px solid rgba(60,60,60,0.3); } [data-theme="grand"] .success-card { border: 1px solid rgba(60,60,60,0.35); background: rgba(18,24,22,0.85); } [data-theme="grand"] .goodbye-check { border-color: #8aaa8e; } [data-theme="grand"] .goodbye-check svg { stroke: #8aaa8e; } [data-theme="grand"] .voice-cta-btn { border: 2px solid rgba(60,60,60,0.4); } [data-theme="grand"] .voice-cta-btn::before { border-color: rgba(138,170,142,0.3); } [data-theme="grand"] .voice-cta-btn::after { border-color: rgba(138,170,142,0.15); } [data-theme="grand"] .kb-editor { background: #141a18; border-color: rgba(60,60,60,0.4); } [data-theme="grand"] .kb-editor textarea { background: rgba(138,170,142,0.04); } [data-theme="grand"] #pin-modal > div, [data-theme="grand"] .modal-box { background: rgba(18,24,22,0.95); border: 1px solid rgba(60,60,60,0.4); } [data-theme="grand"] .screensaver { background: #0a0e0c; } [data-theme="grand"] body::after { background: none; } /* ═══════════════════════════════════════════════════════════════════════ 5. CHANDELIER — rich mahogany lobby, gold & crystal accents ═══════════════════════════════════════════════════════════════════════ */ :root[data-theme="chandelier"] { --bg: #0e0c0a; --fg: #f2ede4; --accent: #c9a44e; --accent-dim: rgba(201,164,78,0.14); --glow: rgba(201,164,78,0.3); --muted: #8a7e6e; --panel-bg: rgba(14,12,10,0.75); --border: rgba(201,164,78,0.15); --danger: #c44; } [data-theme="chandelier"] body { background: var(--bg) url('/static/backgrounds/theme-chandelier.jpg') center/cover no-repeat fixed; background-blend-mode: overlay; } [data-theme="chandelier"] .logo { color: #c9a44e; } [data-theme="chandelier"] .logo span { color: #f2ede4; } [data-theme="chandelier"] header { background: rgba(10,8,6,0.88); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(201,164,78,0.2); box-shadow: 0 1px 0 rgba(160,120,40,0.15); } [data-theme="chandelier"] .bubble.concierge { background: rgba(14,12,10,0.9); border-left: 3px solid rgba(201,164,78,0.4); } [data-theme="chandelier"] .bubble.guest { background: linear-gradient(135deg, #c9a44e, #a8863a); color: #0e0c0a; } [data-theme="chandelier"] .session-card { background: rgba(201,164,78,0.04); border: 1px solid rgba(201,164,78,0.1); } [data-theme="chandelier"] .session-card.active { border-color: #c9a44e; box-shadow: 0 4px 16px rgba(201,164,78,0.15); } [data-theme="chandelier"] .btn-accent { background: linear-gradient(135deg, #c9a44e, #a8863a); color: #0e0c0a; box-shadow: 0 3px 14px rgba(201,164,78,0.3); } [data-theme="chandelier"] .btn-ghost { border-color: rgba(201,164,78,0.15); } [data-theme="chandelier"] .btn-ghost:hover { border-color: #c9a44e; color: #c9a44e; background: rgba(201,164,78,0.06); } [data-theme="chandelier"] .input-row input { background: rgba(201,164,78,0.04); } [data-theme="chandelier"] .sidebar { background: rgba(10,8,6,0.88); backdrop-filter: blur(16px); border-left: 1px solid rgba(201,164,78,0.12); } [data-theme="chandelier"] .success-card { border: 1px solid rgba(201,164,78,0.2); background: rgba(14,12,10,0.85); } [data-theme="chandelier"] .goodbye-check { border-color: rgba(201,164,78,0.3); } [data-theme="chandelier"] .goodbye-check svg { stroke: #c9a44e; } [data-theme="chandelier"] .voice-cta-btn { border: 1px solid rgba(201,164,78,0.25); } [data-theme="chandelier"] .voice-cta-btn::before { border-color: rgba(201,164,78,0.4); } [data-theme="chandelier"] .voice-cta-btn::after { border-color: rgba(201,164,78,0.2); } [data-theme="chandelier"] .kb-editor { background: #0e0c0a; border-color: rgba(201,164,78,0.25); } [data-theme="chandelier"] .kb-editor textarea { background: rgba(201,164,78,0.03); } [data-theme="chandelier"] #pin-modal > div, [data-theme="chandelier"] .modal-box { background: rgba(14,12,10,0.95); border: 1px solid rgba(201,164,78,0.2); } [data-theme="chandelier"] .screensaver { background: #060504; } [data-theme="chandelier"] body::after { background: none; } /* ═══════════════════════════════════════════════════════════════════════ 6. INKWASH — moody vintage desk, dark walnut & amber glow ═══════════════════════════════════════════════════════════════════════ */ :root[data-theme="inkwash"] { --bg: #161210; --fg: #ddd4c4; --accent: #c8a060; --accent-dim: rgba(200,160,96,0.14); --glow: rgba(200,160,96,0.25); --muted: #8a7a64; --panel-bg: rgba(22,18,16,0.8); --border: rgba(200,160,96,0.15); --danger: #c44; } [data-theme="inkwash"] body { background: var(--bg) url('/static/backgrounds/theme-inkwash.jpg') center/cover no-repeat fixed; background-blend-mode: overlay; } [data-theme="inkwash"] .logo { color: #c8a060; font-style: italic; } [data-theme="inkwash"] header { background: rgba(18,14,12,0.88); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(200,160,96,0.15); } [data-theme="inkwash"] .bubble.concierge { background: rgba(22,18,16,0.9); border-left: 2px solid rgba(200,160,96,0.4); } [data-theme="inkwash"] .bubble.guest { background: linear-gradient(135deg, #c8a060, #9a7840); color: #161210; } [data-theme="inkwash"] .session-card { background: rgba(200,160,96,0.04); border: 1px solid rgba(200,160,96,0.1); } [data-theme="inkwash"] .session-card.active { border-color: #c8a060; } [data-theme="inkwash"] .btn-accent { background: linear-gradient(135deg, #c8a060, #9a7840); color: #161210; box-shadow: 0 3px 12px rgba(200,160,96,0.2); } [data-theme="inkwash"] .btn-ghost { border-color: rgba(200,160,96,0.15); } [data-theme="inkwash"] .btn-ghost:hover { border-color: #c8a060; color: #c8a060; } [data-theme="inkwash"] .input-row input { background: rgba(200,160,96,0.05); } [data-theme="inkwash"] .sidebar { background: rgba(18,14,12,0.88); backdrop-filter: blur(14px); border-left: 1px solid rgba(200,160,96,0.1); } [data-theme="inkwash"] .success-card { border: 1px solid rgba(200,160,96,0.2); background: rgba(22,18,16,0.85); } [data-theme="inkwash"] .goodbye-check { border-color: rgba(200,160,96,0.3); } [data-theme="inkwash"] .goodbye-check svg { stroke: #c8a060; } [data-theme="inkwash"] .voice-cta-btn { border: 1px solid rgba(200,160,96,0.25); } [data-theme="inkwash"] .voice-cta-btn::before { border-color: rgba(200,160,96,0.35); } [data-theme="inkwash"] .voice-cta-btn::after { border-color: rgba(200,160,96,0.15); } [data-theme="inkwash"] .kb-editor { background: #161210; border-color: rgba(200,160,96,0.25); } [data-theme="inkwash"] .kb-editor textarea { background: rgba(200,160,96,0.03); } [data-theme="inkwash"] #pin-modal > div, [data-theme="inkwash"] .modal-box { background: rgba(22,18,16,0.95); border: 1px solid rgba(200,160,96,0.2); } [data-theme="inkwash"] .screensaver { background: #0a0806; } [data-theme="inkwash"] body::after { background: none; } /* ═══════════════════════════════════════════════════════════════════════ 7–11. FUTURISTIC — retro-futuristic hotel lobbies, copper & chrome Shared palette, per-variant background image only. ═══════════════════════════════════════════════════════════════════════ */ :root[data-theme="fut1"], :root[data-theme="fut2"], :root[data-theme="fut3"], :root[data-theme="fut4"], :root[data-theme="fut5"] { --bg: #0c0e18; --fg: #f0e4d6; --accent: #d4875c; --accent-dim: rgba(212,135,92,0.16); --glow: rgba(212,135,92,0.35); --muted: #a08a78; --panel-bg: rgba(12,14,24,0.75); --border: rgba(212,135,92,0.18); --danger: #e05a4a; } [data-theme="fut1"] body { background: var(--bg) url('/static/backgrounds/theme-fut1.png') center/cover no-repeat fixed; background-blend-mode: overlay; } [data-theme="fut2"] body { background: var(--bg) url('/static/backgrounds/theme-fut2.jpg') center/cover no-repeat fixed; background-blend-mode: overlay; } [data-theme="fut3"] body { background: var(--bg) url('/static/backgrounds/theme-fut3.jpg') center/cover no-repeat fixed; background-blend-mode: overlay; } [data-theme="fut4"] body { background: var(--bg) url('/static/backgrounds/theme-fut4.jpg') center/cover no-repeat fixed; background-blend-mode: overlay; } [data-theme="fut5"] body { background: var(--bg) url('/static/backgrounds/theme-fut5.jpg') center/cover no-repeat fixed; background-blend-mode: overlay; } [data-theme^="fut"] .logo { color: #d4875c; } [data-theme^="fut"] header { background: rgba(10,12,20,0.85); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(212,135,92,0.25); box-shadow: 0 2px 0 rgba(160,90,50,0.15); } [data-theme^="fut"] .bubble.concierge { background: rgba(12,14,24,0.9); border-left: 3px solid rgba(212,135,92,0.5); } [data-theme^="fut"] .bubble.guest { background: linear-gradient(135deg, #d4875c, #b06a42); color: #0c0e18; } [data-theme^="fut"] .bubble.system { background: rgba(212,135,92,0.04); } [data-theme^="fut"] .session-card { background: rgba(212,135,92,0.05); border: 1px solid rgba(212,135,92,0.12); } [data-theme^="fut"] .session-card.active { border-color: #d4875c; box-shadow: 0 4px 16px rgba(212,135,92,0.18); } [data-theme^="fut"] .btn-accent { background: linear-gradient(135deg, #d4875c, #b06a42); color: #0c0e18; box-shadow: 0 3px 14px rgba(212,135,92,0.3); } [data-theme^="fut"] .btn-ghost { border-color: rgba(212,135,92,0.18); } [data-theme^="fut"] .btn-ghost:hover { border-color: #d4875c; color: #d4875c; background: rgba(212,135,92,0.08); } [data-theme^="fut"] .input-row input { background: rgba(212,135,92,0.06); } [data-theme^="fut"] .sidebar { background: rgba(10,12,20,0.88); backdrop-filter: blur(16px); border-left: 1px solid rgba(212,135,92,0.15); } [data-theme^="fut"] .success-card { border: 1px solid rgba(212,135,92,0.2); background: rgba(12,14,24,0.85); } [data-theme^="fut"] .goodbye-overlay { background: #0c0e18; } [data-theme^="fut"] .goodbye-check { border-color: #d4875c; } [data-theme^="fut"] .goodbye-check svg { stroke: #d4875c; } [data-theme^="fut"] .voice-cta-btn { border: 2px solid rgba(212,135,92,0.3); background: rgba(212,135,92,0.08); color: #d4875c; } [data-theme^="fut"] .voice-cta-btn::before { border-color: rgba(212,135,92,0.4); } [data-theme^="fut"] .voice-cta-btn::after { border-color: rgba(212,135,92,0.2); } [data-theme^="fut"] .voice-bar { background: rgba(10,12,20,0.7); backdrop-filter: blur(16px); } [data-theme^="fut"] .voice-bar.active { background: rgba(212,135,92,0.06); border-color: #d4875c; } [data-theme^="fut"] .badge-info { background: #d4875c; color: #0c0e18; } [data-theme^="fut"] .kb-file { background: rgba(212,135,92,0.05); } [data-theme^="fut"] .kb-editor { background: #0c0e18; border-color: rgba(212,135,92,0.25); } [data-theme^="fut"] .kb-editor textarea { background: rgba(212,135,92,0.04); } [data-theme^="fut"] .kb-editor-name { background: rgba(212,135,92,0.04); } [data-theme^="fut"] #pin-modal > div, [data-theme^="fut"] .modal-box { background: rgba(12,14,24,0.95); border: 1px solid rgba(212,135,92,0.2); } [data-theme^="fut"] .folio-entry { border-color: rgba(212,135,92,0.08); } [data-theme^="fut"] .screensaver { background: #060810; } [data-theme^="fut"] body::after { background: none; } /* ═══════════════════════════════════════════════════════════════════════ 12–16. INDIAN PALACE — ornate marble, chandeliers, gold inlay Shared palette, per-variant background image only. ═══════════════════════════════════════════════════════════════════════ */ :root[data-theme="ind1"], :root[data-theme="ind2"], :root[data-theme="ind3"], :root[data-theme="ind4"], :root[data-theme="ind5"] { --bg: #141008; --fg: #f4ead4; --accent: #d4a94c; --accent-dim: rgba(212,169,76,0.15); --glow: rgba(212,169,76,0.3); --muted: #a09068; --panel-bg: rgba(20,16,8,0.75); --border: rgba(212,169,76,0.18); --danger: #c44; } [data-theme="ind1"] body { background: var(--bg) url('/static/backgrounds/theme-ind1.jpg') center/cover no-repeat fixed; background-blend-mode: overlay; } [data-theme="ind2"] body { background: var(--bg) url('/static/backgrounds/theme-ind2.jpg') center/cover no-repeat fixed; background-blend-mode: overlay; } [data-theme="ind3"] body { background: var(--bg) url('/static/backgrounds/theme-ind3.png') center/cover no-repeat fixed; background-blend-mode: overlay; } [data-theme="ind4"] body { background: var(--bg) url('/static/backgrounds/theme-ind4.jpg') center/cover no-repeat fixed; background-blend-mode: overlay; } [data-theme="ind5"] body { background: var(--bg) url('/static/backgrounds/theme-ind5.jpg') center/cover no-repeat fixed; background-blend-mode: overlay; } [data-theme^="ind"] .logo { color: #d4a94c; } [data-theme^="ind"] header { background: rgba(16,12,6,0.88); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(212,169,76,0.2); box-shadow: 0 1px 0 rgba(170,130,50,0.15); } [data-theme^="ind"] .bubble.concierge { background: rgba(20,16,8,0.9); border-left: 3px solid rgba(212,169,76,0.45); } [data-theme^="ind"] .bubble.guest { background: linear-gradient(135deg, #d4a94c, #b08a34); color: #141008; } [data-theme^="ind"] .bubble.system { background: rgba(212,169,76,0.04); } [data-theme^="ind"] .session-card { background: rgba(212,169,76,0.05); border: 1px solid rgba(212,169,76,0.12); } [data-theme^="ind"] .session-card.active { border-color: #d4a94c; box-shadow: 0 4px 16px rgba(212,169,76,0.18); } [data-theme^="ind"] .btn-accent { background: linear-gradient(135deg, #d4a94c, #b08a34); color: #141008; box-shadow: 0 3px 14px rgba(212,169,76,0.3); } [data-theme^="ind"] .btn-ghost { border-color: rgba(212,169,76,0.18); } [data-theme^="ind"] .btn-ghost:hover { border-color: #d4a94c; color: #d4a94c; background: rgba(212,169,76,0.08); } [data-theme^="ind"] .input-row input { background: rgba(212,169,76,0.06); } [data-theme^="ind"] .sidebar { background: rgba(16,12,6,0.88); backdrop-filter: blur(16px); border-left: 1px solid rgba(212,169,76,0.12); } [data-theme^="ind"] .success-card { border: 1px solid rgba(212,169,76,0.2); background: rgba(20,16,8,0.85); } [data-theme^="ind"] .goodbye-overlay { background: #141008; } [data-theme^="ind"] .goodbye-check { border-color: #d4a94c; } [data-theme^="ind"] .goodbye-check svg { stroke: #d4a94c; } [data-theme^="ind"] .voice-cta-btn { border: 2px solid rgba(212,169,76,0.3); background: rgba(212,169,76,0.08); color: #d4a94c; } [data-theme^="ind"] .voice-cta-btn::before { border-color: rgba(212,169,76,0.4); } [data-theme^="ind"] .voice-cta-btn::after { border-color: rgba(212,169,76,0.2); } [data-theme^="ind"] .voice-bar { background: rgba(16,12,6,0.7); backdrop-filter: blur(16px); } [data-theme^="ind"] .voice-bar.active { background: rgba(212,169,76,0.06); border-color: #d4a94c; } [data-theme^="ind"] .badge-info { background: #d4a94c; color: #141008; } [data-theme^="ind"] .kb-file { background: rgba(212,169,76,0.05); } [data-theme^="ind"] .kb-editor { background: #141008; border-color: rgba(212,169,76,0.25); } [data-theme^="ind"] .kb-editor textarea { background: rgba(212,169,76,0.04); } [data-theme^="ind"] .kb-editor-name { background: rgba(212,169,76,0.04); } [data-theme^="ind"] #pin-modal > div, [data-theme^="ind"] .modal-box { background: rgba(20,16,8,0.95); border: 1px solid rgba(212,169,76,0.2); } [data-theme^="ind"] .folio-entry { border-color: rgba(212,169,76,0.08); } [data-theme^="ind"] .screensaver { background: #0a0804; } [data-theme^="ind"] body::after { background: none; } /* ═══════════════════════════════════════════════════════════════════════ 17–18. SKETCH — watercolor lobby sketches, warm walnut tones Shared palette, per-variant background image only. ═══════════════════════════════════════════════════════════════════════ */ :root[data-theme="sketch7"], :root[data-theme="sketch8"] { --bg: #14100e; --fg: #e4dac8; --accent: #bfa070; --accent-dim: rgba(191,160,112,0.14); --glow: rgba(191,160,112,0.25); --muted: #8a7a64; --panel-bg: rgba(20,16,14,0.78); --border: rgba(191,160,112,0.16); --danger: #c44; } [data-theme="sketch7"] body { background: var(--bg) url('/static/backgrounds/theme7.jpg') center/cover no-repeat fixed; background-blend-mode: overlay; } [data-theme="sketch8"] body { background: var(--bg) url('/static/backgrounds/theme8.jpg') center/cover no-repeat fixed; background-blend-mode: overlay; } [data-theme^="sketch"] .logo { color: #bfa070; font-style: italic; } [data-theme^="sketch"] header { background: rgba(16,12,10,0.88); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(191,160,112,0.18); } [data-theme^="sketch"] .bubble.concierge { background: rgba(20,16,14,0.9); border-left: 2px solid rgba(191,160,112,0.45); } [data-theme^="sketch"] .bubble.guest { background: linear-gradient(135deg, #bfa070, #9a7e52); color: #14100e; } [data-theme^="sketch"] .bubble.system { background: rgba(191,160,112,0.04); } [data-theme^="sketch"] .session-card { background: rgba(191,160,112,0.05); border: 1px solid rgba(191,160,112,0.1); } [data-theme^="sketch"] .session-card.active { border-color: #bfa070; } [data-theme^="sketch"] .btn-accent { background: linear-gradient(135deg, #bfa070, #9a7e52); color: #14100e; box-shadow: 0 3px 12px rgba(191,160,112,0.2); } [data-theme^="sketch"] .btn-ghost { border-color: rgba(191,160,112,0.16); } [data-theme^="sketch"] .btn-ghost:hover { border-color: #bfa070; color: #bfa070; } [data-theme^="sketch"] .input-row input { background: rgba(191,160,112,0.05); } [data-theme^="sketch"] .sidebar { background: rgba(16,12,10,0.88); backdrop-filter: blur(14px); border-left: 1px solid rgba(191,160,112,0.1); } [data-theme^="sketch"] .success-card { border: 1px solid rgba(191,160,112,0.2); background: rgba(20,16,14,0.85); } [data-theme^="sketch"] .goodbye-overlay { background: #14100e; } [data-theme^="sketch"] .goodbye-check { border-color: #bfa070; } [data-theme^="sketch"] .goodbye-check svg { stroke: #bfa070; } [data-theme^="sketch"] .voice-cta-btn { border: 1px solid rgba(191,160,112,0.28); background: rgba(191,160,112,0.06); color: #bfa070; } [data-theme^="sketch"] .voice-cta-btn::before { border-color: rgba(191,160,112,0.35); } [data-theme^="sketch"] .voice-cta-btn::after { border-color: rgba(191,160,112,0.15); } [data-theme^="sketch"] .voice-bar { background: rgba(16,12,10,0.7); backdrop-filter: blur(14px); } [data-theme^="sketch"] .voice-bar.active { background: rgba(191,160,112,0.06); border-color: #bfa070; } [data-theme^="sketch"] .badge-info { background: #bfa070; color: #14100e; } [data-theme^="sketch"] .kb-file { background: rgba(191,160,112,0.05); } [data-theme^="sketch"] .kb-editor { background: #14100e; border-color: rgba(191,160,112,0.25); } [data-theme^="sketch"] .kb-editor textarea { background: rgba(191,160,112,0.03); } [data-theme^="sketch"] .kb-editor-name { background: rgba(191,160,112,0.03); } [data-theme^="sketch"] #pin-modal > div, [data-theme^="sketch"] .modal-box { background: rgba(20,16,14,0.95); border: 1px solid rgba(191,160,112,0.2); } [data-theme^="sketch"] .folio-entry { border-color: rgba(191,160,112,0.08); } [data-theme^="sketch"] .screensaver { background: #0a0806; } [data-theme^="sketch"] body::after { background: none; } /* ═══════════════════════════════════════════════════════════════════════ 19. MODERN — ultra-clean monochrome, huge sans-serif, YOTEL-inspired ═══════════════════════════════════════════════════════════════════════ */ :root[data-theme="modern"] { --bg: #0a0a0a; --fg: #f5f5f5; --accent: #00d4aa; --accent-dim: rgba(0,212,170,0.12); --glow: rgba(0,212,170,0.3); --muted: #888; --panel-bg: rgba(20,20,20,0.8); --border: rgba(255,255,255,0.08); --danger: #ff4a4a; } [data-theme="modern"] body { background: #0a0a0a; } [data-theme="modern"] .logo { color: #f5f5f5; font-weight: 300; letter-spacing: 0.12em; text-transform: uppercase; font-size: 1rem; } [data-theme="modern"] .logo span { color: #00d4aa; } [data-theme="modern"] header { background: rgba(10,10,10,0.9); backdrop-filter: blur(20px); border-bottom: 1px solid rgba(255,255,255,0.06); } [data-theme="modern"] .bubble.concierge { background: rgba(255,255,255,0.04); border-left: 2px solid rgba(255,255,255,0.15); border-radius: 4px; } [data-theme="modern"] .bubble.guest { background: #f5f5f5; color: #0a0a0a; border-radius: 24px; } [data-theme="modern"] .session-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 16px; } [data-theme="modern"] .session-card.active { border-color: rgba(255,255,255,0.2); } [data-theme="modern"] .btn-accent { background: #00d4aa; color: #0a0a0a; box-shadow: none; border-radius: 999px; font-weight: 500; } [data-theme="modern"] .btn-ghost { border: 1px solid rgba(255,255,255,0.1); border-radius: 999px; } [data-theme="modern"] .btn-ghost:hover { border-color: rgba(255,255,255,0.25); color: #f5f5f5; background: rgba(255,255,255,0.04); } [data-theme="modern"] .input-row input { background: rgba(255,255,255,0.04); border-radius: 999px; } [data-theme="modern"] .sidebar { background: rgba(10,10,10,0.95); backdrop-filter: blur(20px); border-left: 1px solid rgba(255,255,255,0.06); } [data-theme="modern"] .success-card { border: 1px solid rgba(255,255,255,0.08); background: rgba(20,20,20,0.9); border-radius: 20px; } [data-theme="modern"] .goodbye-check { border-color: rgba(255,255,255,0.15); } [data-theme="modern"] .goodbye-check svg { stroke: #00d4aa; } [data-theme="modern"] .voice-cta-btn { border: 2px solid rgba(255,255,255,0.1); background: transparent; color: #f5f5f5; } [data-theme="modern"] .voice-cta-btn::before { border-color: rgba(255,255,255,0.08); } [data-theme="modern"] .voice-cta-btn::after { border-color: rgba(255,255,255,0.04); } [data-theme="modern"] .voice-bar { background: rgba(10,10,10,0.9); backdrop-filter: blur(20px); } [data-theme="modern"] .voice-bar.active { background: rgba(0,212,170,0.04); border-color: rgba(0,212,170,0.2); } [data-theme="modern"] .badge-info { background: #f5f5f5; color: #0a0a0a; } [data-theme="modern"] .kb-file { background: rgba(255,255,255,0.03); } [data-theme="modern"] .kb-editor { background: #0a0a0a; border-color: rgba(255,255,255,0.1); } [data-theme="modern"] .kb-editor textarea { background: rgba(255,255,255,0.03); } [data-theme="modern"] #pin-modal > div, [data-theme="modern"] .modal-box { background: rgba(15,15,15,0.95); border: 1px solid rgba(255,255,255,0.08); } [data-theme="modern"] .screensaver { background: #050505; } [data-theme="modern"] body::after { background: none; } /* Modern theme: extra-large typography */ [data-theme="modern"] .welcome h1 { font-size: 4rem; font-weight: 200; letter-spacing: -0.04em; text-shadow: none; color: #f5f5f5; } [data-theme="modern"] .welcome p { font-size: 1.15rem; color: #666; } [data-theme="modern"] .voice-cta-label { letter-spacing: 0.2em; font-size: 0.78rem; color: #666; } /* ═══════════════════════════════════════════════════════════════════════ 19b. BRIGHT LOBBY — high-contrast light theme for sunlit rooms & ADA Palette vetted for WCAG AA (4.5:1+ body, 7:1+ headings) on #ffffff. No backdrop-blur / glass: reduces contrast and GPU cost on kiosks. ═══════════════════════════════════════════════════════════════════════ */ :root[data-theme="bright-lobby"] { --bg: #ffffff; --fg: #0a0e1a; --accent: #0057b8; --accent-dim: rgba(0,87,184,0.08); --glow: rgba(0,87,184,0.2); --muted: #4a5568; --panel-bg: #f7fafc; --border: rgba(10,14,26,0.15); --danger: #c53030; } [data-theme="bright-lobby"] body { background: #ffffff; color: #0a0e1a; } [data-theme="bright-lobby"] .logo { color: #0a0e1a; font-weight: 600; letter-spacing: 0.08em; } [data-theme="bright-lobby"] .logo span { color: #0057b8; } [data-theme="bright-lobby"] header { background: #ffffff; border-bottom: 2px solid #0a0e1a; } [data-theme="bright-lobby"] .bubble.concierge { background: #f7fafc; border-left: 4px solid #0057b8; color: #0a0e1a; border-radius: 6px; } [data-theme="bright-lobby"] .bubble.guest { background: #0057b8; color: #ffffff; border-radius: 6px; } [data-theme="bright-lobby"] .bubble.system { background: #edf2f7; color: #2d3748; border: 1px solid #cbd5e0; } [data-theme="bright-lobby"] .session-card { background: #ffffff; border: 2px solid #cbd5e0; border-radius: 8px; } [data-theme="bright-lobby"] .session-card.active { border-color: #0057b8; box-shadow: 0 0 0 2px rgba(0,87,184,0.2); } [data-theme="bright-lobby"] .btn-accent { background: #0057b8; color: #ffffff; border: 2px solid #0057b8; border-radius: 6px; font-weight: 600; box-shadow: none; } [data-theme="bright-lobby"] .btn-accent:hover { background: #003d7a; border-color: #003d7a; } [data-theme="bright-lobby"] .btn-ghost { border: 2px solid #0a0e1a; color: #0a0e1a; background: #ffffff; border-radius: 6px; } [data-theme="bright-lobby"] .btn-ghost:hover { background: #0a0e1a; color: #ffffff; } [data-theme="bright-lobby"] .input-row input { background: #ffffff; border: 2px solid #4a5568; color: #0a0e1a; } [data-theme="bright-lobby"] .input-row input:focus { border-color: #0057b8; outline: 2px solid rgba(0,87,184,0.3); } [data-theme="bright-lobby"] .sidebar { background: #f7fafc; border-left: 2px solid #cbd5e0; } [data-theme="bright-lobby"] .success-card { background: #ffffff; border: 2px solid #0057b8; border-radius: 8px; color: #0a0e1a; } [data-theme="bright-lobby"] .goodbye-overlay { background: #ffffff; } [data-theme="bright-lobby"] .goodbye-check { border-color: #0057b8; } [data-theme="bright-lobby"] .goodbye-check svg { stroke: #0057b8; } [data-theme="bright-lobby"] .voice-cta-btn { border: 3px solid #0057b8; background: #ffffff; color: #0057b8; font-weight: 700; } [data-theme="bright-lobby"] .voice-cta-btn::before { border-color: rgba(0,87,184,0.3); } [data-theme="bright-lobby"] .voice-cta-btn::after { border-color: rgba(0,87,184,0.15); } [data-theme="bright-lobby"] .voice-bar { background: #f7fafc; border: 2px solid #cbd5e0; } [data-theme="bright-lobby"] .voice-bar.active { background: #e6f0fa; border-color: #0057b8; } [data-theme="bright-lobby"] .badge-info { background: #0057b8; color: #ffffff; font-weight: 600; } [data-theme="bright-lobby"] .kb-file { background: #f7fafc; border: 1px solid #cbd5e0; } [data-theme="bright-lobby"] .kb-editor { background: #ffffff; border: 2px solid #cbd5e0; } [data-theme="bright-lobby"] .kb-editor textarea { background: #ffffff; color: #0a0e1a; border: 1px solid #cbd5e0; } [data-theme="bright-lobby"] #pin-modal > div, [data-theme="bright-lobby"] .modal-box { background: #ffffff; border: 2px solid #0a0e1a; color: #0a0e1a; } [data-theme="bright-lobby"] .folio-entry { border-color: #cbd5e0; color: #0a0e1a; } [data-theme="bright-lobby"] .screensaver { background: #ffffff; } [data-theme="bright-lobby"] body::after { background: none; } [data-theme="bright-lobby"] .welcome h1 { color: #0a0e1a; text-shadow: none; font-weight: 700; } [data-theme="bright-lobby"] .welcome p { color: #2d3748; } /* ═══════════════════════════════════════════════════════════════════════ 20. DECO — Art Deco / 1930s grand hotel, brass & geometric borders ═══════════════════════════════════════════════════════════════════════ */ :root[data-theme="deco"] { --bg: #0d0b08; --fg: #f4e8d0; --accent: #d4a040; --accent-dim: rgba(212,160,64,0.14); --glow: rgba(212,160,64,0.3); --muted: #9a8a68; --panel-bg: rgba(13,11,8,0.8); --border: rgba(212,160,64,0.2); --danger: #c44; } [data-theme="deco"] body { background: #0d0b08; } [data-theme="deco"] .logo { color: #d4a040; font-family: 'Georgia', serif; letter-spacing: 0.15em; text-transform: uppercase; font-size: 1rem; } [data-theme="deco"] .logo span { color: #f4e8d0; font-family: 'Georgia', serif; } [data-theme="deco"] header { background: rgba(10,8,6,0.9); backdrop-filter: blur(14px); border-bottom: 2px solid rgba(212,160,64,0.35); box-shadow: 0 2px 0 rgba(212,160,64,0.1); } /* Deco geometric double-line accent on header */ [data-theme="deco"] header::after { content: ''; position: absolute; bottom: -5px; left: 0; right: 0; height: 1px; background: rgba(212,160,64,0.15); } [data-theme="deco"] .bubble.concierge { background: rgba(13,11,8,0.9); border-left: 3px solid #d4a040; border-radius: 2px; font-family: 'Georgia', serif; } [data-theme="deco"] .bubble.guest { background: linear-gradient(135deg, #d4a040, #b08020); color: #0d0b08; border-radius: 2px; font-family: 'Georgia', serif; } [data-theme="deco"] .session-card { background: rgba(212,160,64,0.04); border: 1px solid rgba(212,160,64,0.12); border-radius: 2px; } [data-theme="deco"] .session-card.active { border-color: #d4a040; box-shadow: inset 0 0 0 1px rgba(212,160,64,0.15); } [data-theme="deco"] .btn-accent { background: linear-gradient(135deg, #d4a040, #b08020); color: #0d0b08; box-shadow: 0 3px 14px rgba(212,160,64,0.25); border-radius: 2px; font-family: 'Georgia', serif; letter-spacing: 0.08em; text-transform: uppercase; } [data-theme="deco"] .btn-ghost { border: 1px solid rgba(212,160,64,0.2); border-radius: 2px; font-family: 'Georgia', serif; } [data-theme="deco"] .btn-ghost:hover { border-color: #d4a040; color: #d4a040; background: rgba(212,160,64,0.06); } [data-theme="deco"] .input-row input { background: rgba(212,160,64,0.04); border-radius: 2px; font-family: 'Georgia', serif; } [data-theme="deco"] .sidebar { background: rgba(10,8,6,0.92); backdrop-filter: blur(14px); border-left: 2px solid rgba(212,160,64,0.25); } [data-theme="deco"] .success-card { border: 2px solid rgba(212,160,64,0.3); border-radius: 4px; background: rgba(13,11,8,0.9); } [data-theme="deco"] .goodbye-check { border: 2px solid rgba(212,160,64,0.3); } [data-theme="deco"] .goodbye-check svg { stroke: #d4a040; } [data-theme="deco"] .voice-cta-btn { border: 2px solid rgba(212,160,64,0.3); background: rgba(212,160,64,0.04); color: #d4a040; } [data-theme="deco"] .voice-cta-btn::before { border: 2px solid rgba(212,160,64,0.2); } [data-theme="deco"] .voice-cta-btn::after { border: 2px solid rgba(212,160,64,0.1); } [data-theme="deco"] .voice-bar { background: rgba(10,8,6,0.85); backdrop-filter: blur(14px); } [data-theme="deco"] .voice-bar.active { background: rgba(212,160,64,0.04); border-color: #d4a040; } [data-theme="deco"] .badge-info { background: #d4a040; color: #0d0b08; } [data-theme="deco"] .kb-file { background: rgba(212,160,64,0.04); } [data-theme="deco"] .kb-editor { background: #0d0b08; border-color: rgba(212,160,64,0.25); } [data-theme="deco"] .kb-editor textarea { background: rgba(212,160,64,0.03); } [data-theme="deco"] #pin-modal > div, [data-theme="deco"] .modal-box { background: rgba(13,11,8,0.95); border: 2px solid rgba(212,160,64,0.25); border-radius: 4px; } [data-theme="deco"] .folio-entry { border-color: rgba(212,160,64,0.1); } [data-theme="deco"] .screensaver { background: #060504; } [data-theme="deco"] body::after { background: none; } /* Deco: Art Deco geometric welcome styling */ [data-theme="deco"] .welcome h1 { font-family: 'Georgia', serif; font-weight: 400; letter-spacing: 0.06em; text-shadow: 0 2px 20px rgba(212,160,64,0.3); } [data-theme="deco"] .welcome p { font-family: 'Georgia', serif; } [data-theme="deco"] .voice-cta-label { font-family: 'Georgia', serif; letter-spacing: 0.15em; } /* Deco corner ornaments on modals and success cards */ [data-theme="deco"] .modal-box::before, [data-theme="deco"] .success-card::before { content: ''; position: absolute; top: 8px; left: 8px; right: 8px; bottom: 8px; border: 1px solid rgba(212,160,64,0.12); border-radius: 2px; pointer-events: none; } [data-theme="deco"] .modal-box, [data-theme="deco"] .success-card { position: relative; } /* ═══════════════════════════════════════════════════════════════════════ 21. WARM — Four Seasons-style warm neutrals, cream/taupe/copper ═══════════════════════════════════════════════════════════════════════ */ :root[data-theme="warm"] { --bg: #171310; --fg: #f2ebe0; --accent: #c4956a; --accent-dim: rgba(196,149,106,0.14); --glow: rgba(196,149,106,0.25); --muted: #9a8a78; --panel-bg: rgba(23,19,16,0.78); --border: rgba(196,149,106,0.18); --danger: #c44; } [data-theme="warm"] body { background: #171310; } [data-theme="warm"] .logo { color: #c4956a; letter-spacing: 0.06em; } [data-theme="warm"] .logo span { color: #f2ebe0; } [data-theme="warm"] header { background: rgba(20,16,14,0.88); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(196,149,106,0.15); } [data-theme="warm"] .bubble.concierge { background: rgba(23,19,16,0.9); border-left: 2px solid rgba(196,149,106,0.4); } [data-theme="warm"] .bubble.guest { background: linear-gradient(135deg, #c4956a, #a07850); color: #171310; } [data-theme="warm"] .session-card { background: rgba(196,149,106,0.04); border: 1px solid rgba(196,149,106,0.1); } [data-theme="warm"] .session-card.active { border-color: #c4956a; box-shadow: 0 4px 16px rgba(196,149,106,0.12); } [data-theme="warm"] .btn-accent { background: linear-gradient(135deg, #c4956a, #a07850); color: #171310; box-shadow: 0 3px 12px rgba(196,149,106,0.2); } [data-theme="warm"] .btn-ghost { border-color: rgba(196,149,106,0.15); } [data-theme="warm"] .btn-ghost:hover { border-color: #c4956a; color: #c4956a; background: rgba(196,149,106,0.06); } [data-theme="warm"] .input-row input { background: rgba(196,149,106,0.05); } [data-theme="warm"] .sidebar { background: rgba(20,16,14,0.9); backdrop-filter: blur(16px); border-left: 1px solid rgba(196,149,106,0.1); } [data-theme="warm"] .success-card { border: 1px solid rgba(196,149,106,0.18); background: rgba(23,19,16,0.88); } [data-theme="warm"] .goodbye-overlay { background: #171310; } [data-theme="warm"] .goodbye-check { border-color: rgba(196,149,106,0.25); } [data-theme="warm"] .goodbye-check svg { stroke: #c4956a; } [data-theme="warm"] .voice-cta-btn { border: 1px solid rgba(196,149,106,0.2); background: rgba(196,149,106,0.04); color: #c4956a; } [data-theme="warm"] .voice-cta-btn::before { border-color: rgba(196,149,106,0.3); } [data-theme="warm"] .voice-cta-btn::after { border-color: rgba(196,149,106,0.12); } [data-theme="warm"] .voice-bar { background: rgba(20,16,14,0.75); backdrop-filter: blur(16px); } [data-theme="warm"] .voice-bar.active { background: rgba(196,149,106,0.05); border-color: #c4956a; } [data-theme="warm"] .badge-info { background: #c4956a; color: #171310; } [data-theme="warm"] .kb-file { background: rgba(196,149,106,0.04); } [data-theme="warm"] .kb-editor { background: #171310; border-color: rgba(196,149,106,0.2); } [data-theme="warm"] .kb-editor textarea { background: rgba(196,149,106,0.03); } [data-theme="warm"] #pin-modal > div, [data-theme="warm"] .modal-box { background: rgba(23,19,16,0.95); border: 1px solid rgba(196,149,106,0.18); } [data-theme="warm"] .folio-entry { border-color: rgba(196,149,106,0.08); } [data-theme="warm"] .screensaver { background: #0c0a08; } [data-theme="warm"] body::after { background: none; } /* Warm: elegant serif touches for welcome */ [data-theme="warm"] .welcome h1 { text-shadow: 0 2px 20px rgba(196,149,106,0.25), 0 4px 20px rgba(0,0,0,0.4); } /* ═══════════════════════════════════════════════════════════════════════ 22. HOLO — Holographic cyber-luxury, neon edge glows, volumetric glass ═══════════════════════════════════════════════════════════════════════ */ :root[data-theme="holo"] { --bg: #020810; --fg: #e8f0ff; --accent: #00e5ff; --accent-dim: rgba(0,229,255,0.1); --glow: rgba(0,229,255,0.4); --muted: #6a8aaa; --panel-bg: rgba(4,12,24,0.7); --border: rgba(0,229,255,0.12); --danger: #ff3860; --holo-pink: #ff2daa; --holo-purple: #8844ff; } [data-theme="holo"] body { background: #020810; } [data-theme="holo"] .logo { color: #00e5ff; font-weight: 300; letter-spacing: 0.12em; text-transform: uppercase; font-size: 1rem; text-shadow: 0 0 12px rgba(0,229,255,0.4); } [data-theme="holo"] .logo span { color: #e8f0ff; text-shadow: none; } [data-theme="holo"] header { background: rgba(4,10,20,0.8); backdrop-filter: blur(20px) saturate(200%); border-bottom: 1px solid rgba(0,229,255,0.15); box-shadow: 0 1px 30px rgba(0,229,255,0.06); } [data-theme="holo"] .bubble.concierge { background: rgba(4,12,24,0.85); border-left: 2px solid rgba(0,229,255,0.4); box-shadow: 0 0 20px rgba(0,229,255,0.05); backdrop-filter: blur(16px); } [data-theme="holo"] .bubble.guest { background: linear-gradient(135deg, #00e5ff, #0088cc); color: #020810; box-shadow: 0 4px 20px rgba(0,229,255,0.3); } [data-theme="holo"] .bubble.system { background: rgba(0,229,255,0.03); } [data-theme="holo"] .session-card { background: rgba(0,229,255,0.03); border: 1px solid rgba(0,229,255,0.08); } [data-theme="holo"] .session-card.active { border-color: rgba(0,229,255,0.3); box-shadow: 0 0 20px rgba(0,229,255,0.1), inset 0 0 20px rgba(0,229,255,0.03); } [data-theme="holo"] .btn-accent { background: linear-gradient(135deg, #00e5ff, #0088cc); color: #020810; box-shadow: 0 4px 20px rgba(0,229,255,0.35); font-weight: 500; } [data-theme="holo"] .btn-accent:hover { box-shadow: 0 6px 30px rgba(0,229,255,0.5); } [data-theme="holo"] .btn-ghost { border: 1px solid rgba(0,229,255,0.12); } [data-theme="holo"] .btn-ghost:hover { border-color: rgba(0,229,255,0.3); color: #00e5ff; background: rgba(0,229,255,0.05); box-shadow: 0 0 15px rgba(0,229,255,0.08); } [data-theme="holo"] .input-row input { background: rgba(0,229,255,0.04); } [data-theme="holo"] .sidebar { background: rgba(4,10,20,0.9); backdrop-filter: blur(20px) saturate(200%); border-left: 1px solid rgba(0,229,255,0.1); } [data-theme="holo"] .success-card { border: 1px solid rgba(0,229,255,0.15); background: rgba(4,12,24,0.85); box-shadow: 0 0 40px rgba(0,229,255,0.08); backdrop-filter: blur(24px); } [data-theme="holo"] .goodbye-overlay { background: #020810; } [data-theme="holo"] .goodbye-check { border-color: rgba(0,229,255,0.3); box-shadow: 0 0 30px rgba(0,229,255,0.15); } [data-theme="holo"] .goodbye-check svg { stroke: #00e5ff; filter: drop-shadow(0 0 6px rgba(0,229,255,0.5)); } [data-theme="holo"] .voice-cta-btn { border: 2px solid rgba(0,229,255,0.2); background: rgba(0,229,255,0.04); color: #00e5ff; box-shadow: 0 0 30px rgba(0,229,255,0.08); } [data-theme="holo"] .voice-cta-btn:hover { box-shadow: 0 0 50px rgba(0,229,255,0.15); border-color: rgba(0,229,255,0.4); } [data-theme="holo"] .voice-cta-btn::before { border-color: rgba(0,229,255,0.2); } [data-theme="holo"] .voice-cta-btn::after { border-color: rgba(0,229,255,0.08); } [data-theme="holo"] .voice-bar { background: rgba(4,10,20,0.8); backdrop-filter: blur(20px); } [data-theme="holo"] .voice-bar.active { background: rgba(0,229,255,0.04); border-color: rgba(0,229,255,0.2); box-shadow: 0 0 20px rgba(0,229,255,0.06); } [data-theme="holo"] .badge-info { background: #00e5ff; color: #020810; } [data-theme="holo"] .kb-file { background: rgba(0,229,255,0.03); } [data-theme="holo"] .kb-editor { background: #020810; border-color: rgba(0,229,255,0.15); } [data-theme="holo"] .kb-editor textarea { background: rgba(0,229,255,0.03); } [data-theme="holo"] .kb-editor-name { background: rgba(0,229,255,0.03); } [data-theme="holo"] #pin-modal > div, [data-theme="holo"] .modal-box { background: rgba(4,12,24,0.95); border: 1px solid rgba(0,229,255,0.15); box-shadow: 0 0 40px rgba(0,229,255,0.06); } [data-theme="holo"] .folio-entry { border-color: rgba(0,229,255,0.06); } [data-theme="holo"] .screensaver { background: #010408; } [data-theme="holo"] body::after { background: none; } /* Holo: neon welcome with bloom text */ [data-theme="holo"] .welcome h1 { font-weight: 200; text-shadow: 0 0 30px rgba(0,229,255,0.5), 0 0 60px rgba(0,229,255,0.2), 0 4px 20px rgba(0,0,0,0.5); color: #e8f0ff; } [data-theme="holo"] .welcome p { color: #6a8aaa; } [data-theme="holo"] .voice-cta-label { color: #6a8aaa; letter-spacing: 0.15em; } /* ── Holo: animated edge glow on panels ─────────────────────────────── */ @keyframes holo-border-shift { 0%, 100% { border-color: rgba(0,229,255,0.2); } 33% { border-color: rgba(136,68,255,0.2); } 66% { border-color: rgba(255,45,170,0.2); } } [data-theme="holo"] .success-card, [data-theme="holo"] .session-card.active { animation: holo-border-shift 6s ease-in-out infinite; } /* ═══════════════════════════════════════════════════════════════════════ 23. ELECTRO — futuro-electro AI-powered, electric purple + cyan pulses ═══════════════════════════════════════════════════════════════════════ */ :root[data-theme="electro"] { --bg: #06060e; --fg: #e8e4f8; --accent: #a855f7; --accent-dim: rgba(168,85,247,0.12); --glow: rgba(168,85,247,0.35); --muted: #8878aa; --panel-bg: rgba(10,8,20,0.75); --border: rgba(168,85,247,0.12); --danger: #ff3860; --electro-cyan: #22d3ee; --electro-pink: #ec4899; } [data-theme="electro"] body { background: #06060e; } [data-theme="electro"] .logo { color: #a855f7; font-weight: 300; letter-spacing: 0.1em; text-transform: uppercase; font-size: 1rem; text-shadow: 0 0 10px rgba(168,85,247,0.4); } [data-theme="electro"] .logo span { color: #22d3ee; text-shadow: 0 0 8px rgba(34,211,238,0.3); } [data-theme="electro"] header { background: rgba(8,6,16,0.85); backdrop-filter: blur(20px) saturate(180%); border-bottom: 1px solid rgba(168,85,247,0.15); box-shadow: 0 1px 20px rgba(168,85,247,0.06); } [data-theme="electro"] .bubble.concierge { background: rgba(10,8,20,0.88); border-left: 2px solid rgba(168,85,247,0.5); box-shadow: 0 0 15px rgba(168,85,247,0.04); backdrop-filter: blur(16px); } [data-theme="electro"] .bubble.guest { background: linear-gradient(135deg, #a855f7, #7c3aed); color: #fff; box-shadow: 0 4px 20px rgba(168,85,247,0.3); } [data-theme="electro"] .bubble.system { background: rgba(168,85,247,0.03); } [data-theme="electro"] .session-card { background: rgba(168,85,247,0.03); border: 1px solid rgba(168,85,247,0.08); } [data-theme="electro"] .session-card.active { border-color: rgba(168,85,247,0.3); box-shadow: 0 0 20px rgba(168,85,247,0.1); } [data-theme="electro"] .btn-accent { background: linear-gradient(135deg, #a855f7, #7c3aed); color: #fff; box-shadow: 0 4px 20px rgba(168,85,247,0.35); } [data-theme="electro"] .btn-accent:hover { box-shadow: 0 6px 30px rgba(168,85,247,0.5); } [data-theme="electro"] .btn-ghost { border: 1px solid rgba(168,85,247,0.12); } [data-theme="electro"] .btn-ghost:hover { border-color: rgba(168,85,247,0.3); color: #a855f7; background: rgba(168,85,247,0.05); } [data-theme="electro"] .input-row input { background: rgba(168,85,247,0.04); } [data-theme="electro"] .sidebar { background: rgba(8,6,16,0.92); backdrop-filter: blur(20px); border-left: 1px solid rgba(168,85,247,0.1); } [data-theme="electro"] .success-card { border: 1px solid rgba(168,85,247,0.15); background: rgba(10,8,20,0.88); box-shadow: 0 0 30px rgba(168,85,247,0.06); } [data-theme="electro"] .goodbye-overlay { background: #06060e; } [data-theme="electro"] .goodbye-check { border-color: rgba(168,85,247,0.3); box-shadow: 0 0 25px rgba(168,85,247,0.12); } [data-theme="electro"] .goodbye-check svg { stroke: #a855f7; filter: drop-shadow(0 0 5px rgba(168,85,247,0.5)); } [data-theme="electro"] .voice-cta-btn { border: 2px solid rgba(168,85,247,0.2); background: rgba(168,85,247,0.04); color: #a855f7; box-shadow: 0 0 25px rgba(168,85,247,0.06); } [data-theme="electro"] .voice-cta-btn:hover { box-shadow: 0 0 40px rgba(168,85,247,0.12); border-color: rgba(168,85,247,0.4); } [data-theme="electro"] .voice-cta-btn::before { border-color: rgba(168,85,247,0.2); } [data-theme="electro"] .voice-cta-btn::after { border-color: rgba(34,211,238,0.1); } [data-theme="electro"] .voice-bar { background: rgba(8,6,16,0.8); backdrop-filter: blur(20px); } [data-theme="electro"] .voice-bar.active { background: rgba(168,85,247,0.04); border-color: rgba(168,85,247,0.2); } [data-theme="electro"] .badge-info { background: #a855f7; color: #fff; } [data-theme="electro"] .kb-file { background: rgba(168,85,247,0.03); } [data-theme="electro"] .kb-editor { background: #06060e; border-color: rgba(168,85,247,0.15); } [data-theme="electro"] .kb-editor textarea { background: rgba(168,85,247,0.03); } [data-theme="electro"] .kb-editor-name { background: rgba(168,85,247,0.03); } [data-theme="electro"] #pin-modal > div, [data-theme="electro"] .modal-box { background: rgba(10,8,20,0.95); border: 1px solid rgba(168,85,247,0.15); box-shadow: 0 0 30px rgba(168,85,247,0.05); } [data-theme="electro"] .folio-entry { border-color: rgba(168,85,247,0.06); } [data-theme="electro"] .screensaver { background: #030308; } [data-theme="electro"] body::after { background: none; } /* Electro: neon gradient welcome with dual-glow */ [data-theme="electro"] .welcome h1 { font-weight: 200; text-shadow: 0 0 25px rgba(168,85,247,0.5), 0 0 50px rgba(34,211,238,0.2), 0 4px 20px rgba(0,0,0,0.5); color: #e8e4f8; } [data-theme="electro"] .welcome p { color: #8878aa; } [data-theme="electro"] .voice-cta-label { color: #8878aa; letter-spacing: 0.12em; } /* Electro: animated dual-color border shift */ @keyframes electro-border-pulse { 0%, 100% { border-color: rgba(168,85,247,0.2); box-shadow: 0 0 20px rgba(168,85,247,0.06); } 50% { border-color: rgba(34,211,238,0.2); box-shadow: 0 0 20px rgba(34,211,238,0.06); } } [data-theme="electro"] .voice-cta-btn { animation: electro-border-pulse 4s ease-in-out infinite; } [data-theme="electro"] .success-card { animation: electro-border-pulse 6s ease-in-out infinite; } /* Electro: pulsing grid scanline overlay on body */ [data-theme="electro"] body::before { content: ''; position: fixed; inset: 0; background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(168,85,247,0.015) 2px, rgba(168,85,247,0.015) 4px), radial-gradient(ellipse at center, transparent 40%, rgba(6,6,14,0.6) 100%); pointer-events: none; z-index: 1; } /* ═══════════════════════════════════════════════════════════════════════ 24–29. RADIANT — WebGL shader backgrounds (via iframe) Each radiant theme loads a GPU-accelerated animated shader behind the glassmorphic UI panels. Shader HTML lives in /static/shaders/. ═══════════════════════════════════════════════════════════════════════ */ /* ── Shared: shader iframe container ─────────────────────────────────── */ .shader-bg { position: fixed; inset: 0; z-index: -2; border: none; width: 100%; height: 100%; pointer-events: none; } /* Hide shader iframe on non-radiant themes */ :root:not([data-theme^="radiant-"]) .shader-bg { display: none; } /* ── 24. RADIANT LIQUID GOLD — molten metal flow ────────────────────── */ :root[data-theme="radiant-gold"] { --bg: #0a0804; --fg: #f4ead0; --accent: #d4a040; --accent-dim: rgba(212,160,64,0.14); --glow: rgba(212,160,64,0.35); --muted: #a08a60; --panel-bg: rgba(10,8,4,0.7); --border: rgba(212,160,64,0.18); --danger: #c44; } [data-theme="radiant-gold"] body { background: #0a0804; } [data-theme="radiant-gold"] .logo { color: #d4a040; text-shadow: 0 0 12px rgba(212,160,64,0.3); } [data-theme="radiant-gold"] header { background: rgba(10,8,4,0.75); backdrop-filter: blur(20px) saturate(180%); border-bottom: 1px solid rgba(212,160,64,0.2); } [data-theme="radiant-gold"] .bubble.concierge { background: rgba(10,8,4,0.8); border-left: 2px solid rgba(212,160,64,0.4); backdrop-filter: blur(12px); } [data-theme="radiant-gold"] .bubble.guest { background: linear-gradient(135deg, #d4a040, #b08020); color: #0a0804; } [data-theme="radiant-gold"] .session-card { background: rgba(212,160,64,0.05); border: 1px solid rgba(212,160,64,0.12); } [data-theme="radiant-gold"] .session-card.active { border-color: #d4a040; box-shadow: 0 0 20px rgba(212,160,64,0.15); } [data-theme="radiant-gold"] .btn-accent { background: linear-gradient(135deg, #d4a040, #b08020); color: #0a0804; box-shadow: 0 4px 20px rgba(212,160,64,0.35); } [data-theme="radiant-gold"] .btn-ghost { border-color: rgba(212,160,64,0.18); } [data-theme="radiant-gold"] .btn-ghost:hover { border-color: #d4a040; color: #d4a040; background: rgba(212,160,64,0.08); } [data-theme="radiant-gold"] .input-row input { background: rgba(212,160,64,0.06); } [data-theme="radiant-gold"] .sidebar { background: rgba(10,8,4,0.8); backdrop-filter: blur(20px); border-left: 1px solid rgba(212,160,64,0.15); } [data-theme="radiant-gold"] .success-card { border: 1px solid rgba(212,160,64,0.2); background: rgba(10,8,4,0.8); backdrop-filter: blur(24px); } [data-theme="radiant-gold"] .goodbye-overlay { background: #0a0804; } [data-theme="radiant-gold"] .goodbye-check { border-color: #d4a040; } [data-theme="radiant-gold"] .goodbye-check svg { stroke: #d4a040; } [data-theme="radiant-gold"] .voice-cta-btn { border: 2px solid rgba(212,160,64,0.25); background: rgba(212,160,64,0.06); color: #d4a040; } [data-theme="radiant-gold"] .voice-cta-btn::before { border-color: rgba(212,160,64,0.3); } [data-theme="radiant-gold"] .voice-cta-btn::after { border-color: rgba(212,160,64,0.15); } [data-theme="radiant-gold"] .voice-bar { background: rgba(10,8,4,0.7); backdrop-filter: blur(20px); } [data-theme="radiant-gold"] .voice-bar.active { background: rgba(212,160,64,0.06); border-color: #d4a040; } [data-theme="radiant-gold"] .badge-info { background: #d4a040; color: #0a0804; } [data-theme="radiant-gold"] .kb-editor { background: #0a0804; border-color: rgba(212,160,64,0.25); } [data-theme="radiant-gold"] .kb-editor textarea { background: rgba(212,160,64,0.04); } [data-theme="radiant-gold"] #pin-modal > div, [data-theme="radiant-gold"] .modal-box { background: rgba(10,8,4,0.92); border: 1px solid rgba(212,160,64,0.2); backdrop-filter: blur(24px); } [data-theme="radiant-gold"] .screensaver { background: #050402; } [data-theme="radiant-gold"] body::after { background: none; } [data-theme="radiant-gold"] .welcome h1 { text-shadow: 0 0 30px rgba(212,160,64,0.4), 0 4px 20px rgba(0,0,0,0.5); } /* ── 25. RADIANT AURORA — northern lights ───────────────────────────── */ :root[data-theme="radiant-aurora"] { --bg: #020814; --fg: #e0f0e8; --accent: #40d480; --accent-dim: rgba(64,212,128,0.12); --glow: rgba(64,212,128,0.3); --muted: #6a9a80; --panel-bg: rgba(4,12,24,0.7); --border: rgba(64,212,128,0.14); --danger: #ff4a5a; } [data-theme="radiant-aurora"] body { background: #020814; } [data-theme="radiant-aurora"] .logo { color: #40d480; text-shadow: 0 0 10px rgba(64,212,128,0.3); } [data-theme="radiant-aurora"] header { background: rgba(4,10,20,0.75); backdrop-filter: blur(20px) saturate(180%); border-bottom: 1px solid rgba(64,212,128,0.15); } [data-theme="radiant-aurora"] .bubble.concierge { background: rgba(4,12,24,0.8); border-left: 2px solid rgba(64,212,128,0.4); backdrop-filter: blur(12px); } [data-theme="radiant-aurora"] .bubble.guest { background: linear-gradient(135deg, #40d480, #28b060); color: #020814; } [data-theme="radiant-aurora"] .session-card { background: rgba(64,212,128,0.05); border: 1px solid rgba(64,212,128,0.1); } [data-theme="radiant-aurora"] .session-card.active { border-color: #40d480; box-shadow: 0 0 20px rgba(64,212,128,0.12); } [data-theme="radiant-aurora"] .btn-accent { background: linear-gradient(135deg, #40d480, #28b060); color: #020814; box-shadow: 0 4px 20px rgba(64,212,128,0.3); } [data-theme="radiant-aurora"] .btn-ghost { border-color: rgba(64,212,128,0.14); } [data-theme="radiant-aurora"] .btn-ghost:hover { border-color: #40d480; color: #40d480; background: rgba(64,212,128,0.06); } [data-theme="radiant-aurora"] .input-row input { background: rgba(64,212,128,0.05); } [data-theme="radiant-aurora"] .sidebar { background: rgba(4,10,20,0.8); backdrop-filter: blur(20px); border-left: 1px solid rgba(64,212,128,0.1); } [data-theme="radiant-aurora"] .success-card { border: 1px solid rgba(64,212,128,0.15); background: rgba(4,12,24,0.8); backdrop-filter: blur(24px); } [data-theme="radiant-aurora"] .goodbye-overlay { background: #020814; } [data-theme="radiant-aurora"] .goodbye-check { border-color: #40d480; } [data-theme="radiant-aurora"] .goodbye-check svg { stroke: #40d480; } [data-theme="radiant-aurora"] .voice-cta-btn { border: 2px solid rgba(64,212,128,0.2); background: rgba(64,212,128,0.05); color: #40d480; } [data-theme="radiant-aurora"] .voice-cta-btn::before { border-color: rgba(64,212,128,0.25); } [data-theme="radiant-aurora"] .voice-cta-btn::after { border-color: rgba(64,212,128,0.1); } [data-theme="radiant-aurora"] .voice-bar { background: rgba(4,10,20,0.7); backdrop-filter: blur(20px); } [data-theme="radiant-aurora"] .voice-bar.active { background: rgba(64,212,128,0.05); border-color: #40d480; } [data-theme="radiant-aurora"] .badge-info { background: #40d480; color: #020814; } [data-theme="radiant-aurora"] .kb-editor { background: #020814; border-color: rgba(64,212,128,0.2); } [data-theme="radiant-aurora"] .kb-editor textarea { background: rgba(64,212,128,0.04); } [data-theme="radiant-aurora"] #pin-modal > div, [data-theme="radiant-aurora"] .modal-box { background: rgba(4,12,24,0.92); border: 1px solid rgba(64,212,128,0.15); backdrop-filter: blur(24px); } [data-theme="radiant-aurora"] .screensaver { background: #010408; } [data-theme="radiant-aurora"] body::after { background: none; } [data-theme="radiant-aurora"] .welcome h1 { text-shadow: 0 0 30px rgba(64,212,128,0.4), 0 0 60px rgba(100,60,200,0.2), 0 4px 20px rgba(0,0,0,0.5); } /* ── 26. RADIANT SILK — flowing silk cascade ────────────────────────── */ :root[data-theme="radiant-silk"] { --bg: #0a060e; --fg: #f0e8f4; --accent: #c078b0; --accent-dim: rgba(192,120,176,0.12); --glow: rgba(192,120,176,0.3); --muted: #9a7a90; --panel-bg: rgba(12,8,18,0.7); --border: rgba(192,120,176,0.14); --danger: #c44; } [data-theme="radiant-silk"] body { background: #0a060e; } [data-theme="radiant-silk"] .logo { color: #c078b0; text-shadow: 0 0 10px rgba(192,120,176,0.3); } [data-theme="radiant-silk"] header { background: rgba(10,6,14,0.75); backdrop-filter: blur(20px) saturate(180%); border-bottom: 1px solid rgba(192,120,176,0.15); } [data-theme="radiant-silk"] .bubble.concierge { background: rgba(12,8,18,0.8); border-left: 2px solid rgba(192,120,176,0.4); backdrop-filter: blur(12px); } [data-theme="radiant-silk"] .bubble.guest { background: linear-gradient(135deg, #c078b0, #a06090); color: #0a060e; } [data-theme="radiant-silk"] .session-card { background: rgba(192,120,176,0.05); border: 1px solid rgba(192,120,176,0.1); } [data-theme="radiant-silk"] .session-card.active { border-color: #c078b0; box-shadow: 0 0 20px rgba(192,120,176,0.12); } [data-theme="radiant-silk"] .btn-accent { background: linear-gradient(135deg, #c078b0, #a06090); color: #fff; box-shadow: 0 4px 20px rgba(192,120,176,0.3); } [data-theme="radiant-silk"] .btn-ghost { border-color: rgba(192,120,176,0.14); } [data-theme="radiant-silk"] .btn-ghost:hover { border-color: #c078b0; color: #c078b0; background: rgba(192,120,176,0.06); } [data-theme="radiant-silk"] .input-row input { background: rgba(192,120,176,0.05); } [data-theme="radiant-silk"] .sidebar { background: rgba(10,6,14,0.8); backdrop-filter: blur(20px); border-left: 1px solid rgba(192,120,176,0.1); } [data-theme="radiant-silk"] .success-card { border: 1px solid rgba(192,120,176,0.15); background: rgba(12,8,18,0.8); backdrop-filter: blur(24px); } [data-theme="radiant-silk"] .goodbye-overlay { background: #0a060e; } [data-theme="radiant-silk"] .goodbye-check { border-color: #c078b0; } [data-theme="radiant-silk"] .goodbye-check svg { stroke: #c078b0; } [data-theme="radiant-silk"] .voice-cta-btn { border: 2px solid rgba(192,120,176,0.2); background: rgba(192,120,176,0.05); color: #c078b0; } [data-theme="radiant-silk"] .voice-cta-btn::before { border-color: rgba(192,120,176,0.25); } [data-theme="radiant-silk"] .voice-cta-btn::after { border-color: rgba(192,120,176,0.1); } [data-theme="radiant-silk"] .voice-bar { background: rgba(10,6,14,0.7); backdrop-filter: blur(20px); } [data-theme="radiant-silk"] .voice-bar.active { background: rgba(192,120,176,0.05); border-color: #c078b0; } [data-theme="radiant-silk"] .badge-info { background: #c078b0; color: #0a060e; } [data-theme="radiant-silk"] .kb-editor { background: #0a060e; border-color: rgba(192,120,176,0.2); } [data-theme="radiant-silk"] .kb-editor textarea { background: rgba(192,120,176,0.04); } [data-theme="radiant-silk"] #pin-modal > div, [data-theme="radiant-silk"] .modal-box { background: rgba(12,8,18,0.92); border: 1px solid rgba(192,120,176,0.15); backdrop-filter: blur(24px); } [data-theme="radiant-silk"] .screensaver { background: #050308; } [data-theme="radiant-silk"] body::after { background: none; } [data-theme="radiant-silk"] .welcome h1 { text-shadow: 0 0 25px rgba(192,120,176,0.4), 0 4px 20px rgba(0,0,0,0.5); } /* ── 27. RADIANT DIAMOND — prismatic caustics ───────────────────────── */ :root[data-theme="radiant-diamond"] { --bg: #060608; --fg: #f0f0f8; --accent: #88aadd; --accent-dim: rgba(136,170,221,0.12); --glow: rgba(136,170,221,0.3); --muted: #8090aa; --panel-bg: rgba(8,8,14,0.7); --border: rgba(136,170,221,0.14); --danger: #ff4a5a; } [data-theme="radiant-diamond"] body { background: #060608; } [data-theme="radiant-diamond"] .logo { color: #88aadd; text-shadow: 0 0 10px rgba(136,170,221,0.3); } [data-theme="radiant-diamond"] header { background: rgba(6,6,12,0.75); backdrop-filter: blur(20px) saturate(200%); border-bottom: 1px solid rgba(136,170,221,0.12); } [data-theme="radiant-diamond"] .bubble.concierge { background: rgba(8,8,14,0.8); border-left: 2px solid rgba(136,170,221,0.4); backdrop-filter: blur(12px); } [data-theme="radiant-diamond"] .bubble.guest { background: linear-gradient(135deg, #88aadd, #6688bb); color: #060608; } [data-theme="radiant-diamond"] .session-card { background: rgba(136,170,221,0.04); border: 1px solid rgba(136,170,221,0.1); } [data-theme="radiant-diamond"] .session-card.active { border-color: #88aadd; box-shadow: 0 0 20px rgba(136,170,221,0.1); } [data-theme="radiant-diamond"] .btn-accent { background: linear-gradient(135deg, #88aadd, #6688bb); color: #060608; box-shadow: 0 4px 20px rgba(136,170,221,0.3); } [data-theme="radiant-diamond"] .btn-ghost { border-color: rgba(136,170,221,0.14); } [data-theme="radiant-diamond"] .btn-ghost:hover { border-color: #88aadd; color: #88aadd; background: rgba(136,170,221,0.06); } [data-theme="radiant-diamond"] .input-row input { background: rgba(136,170,221,0.04); } [data-theme="radiant-diamond"] .sidebar { background: rgba(6,6,12,0.8); backdrop-filter: blur(20px); border-left: 1px solid rgba(136,170,221,0.1); } [data-theme="radiant-diamond"] .success-card { border: 1px solid rgba(136,170,221,0.12); background: rgba(8,8,14,0.8); backdrop-filter: blur(24px); } [data-theme="radiant-diamond"] .goodbye-overlay { background: #060608; } [data-theme="radiant-diamond"] .goodbye-check { border-color: #88aadd; } [data-theme="radiant-diamond"] .goodbye-check svg { stroke: #88aadd; } [data-theme="radiant-diamond"] .voice-cta-btn { border: 2px solid rgba(136,170,221,0.18); background: rgba(136,170,221,0.04); color: #88aadd; } [data-theme="radiant-diamond"] .voice-cta-btn::before { border-color: rgba(136,170,221,0.2); } [data-theme="radiant-diamond"] .voice-cta-btn::after { border-color: rgba(136,170,221,0.08); } [data-theme="radiant-diamond"] .voice-bar { background: rgba(6,6,12,0.7); backdrop-filter: blur(20px); } [data-theme="radiant-diamond"] .voice-bar.active { background: rgba(136,170,221,0.04); border-color: #88aadd; } [data-theme="radiant-diamond"] .badge-info { background: #88aadd; color: #060608; } [data-theme="radiant-diamond"] .kb-editor { background: #060608; border-color: rgba(136,170,221,0.18); } [data-theme="radiant-diamond"] .kb-editor textarea { background: rgba(136,170,221,0.03); } [data-theme="radiant-diamond"] #pin-modal > div, [data-theme="radiant-diamond"] .modal-box { background: rgba(8,8,14,0.92); border: 1px solid rgba(136,170,221,0.12); backdrop-filter: blur(24px); } [data-theme="radiant-diamond"] .screensaver { background: #030304; } [data-theme="radiant-diamond"] body::after { background: none; } [data-theme="radiant-diamond"] .welcome h1 { text-shadow: 0 0 25px rgba(136,170,221,0.4), 0 0 50px rgba(200,150,255,0.15), 0 4px 20px rgba(0,0,0,0.5); } /* ── 28. RADIANT MOONLIT — moon on dark water ───────────────────────── */ :root[data-theme="radiant-moonlit"] { --bg: #040810; --fg: #e4e8f0; --accent: #88a8c0; --accent-dim: rgba(136,168,192,0.12); --glow: rgba(136,168,192,0.25); --muted: #6a8090; --panel-bg: rgba(6,10,18,0.7); --border: rgba(136,168,192,0.14); --danger: #c44; } [data-theme="radiant-moonlit"] body { background: #040810; } [data-theme="radiant-moonlit"] .logo { color: #88a8c0; text-shadow: 0 0 10px rgba(136,168,192,0.2); } [data-theme="radiant-moonlit"] header { background: rgba(4,8,16,0.75); backdrop-filter: blur(20px) saturate(160%); border-bottom: 1px solid rgba(136,168,192,0.12); } [data-theme="radiant-moonlit"] .bubble.concierge { background: rgba(6,10,18,0.8); border-left: 2px solid rgba(136,168,192,0.4); backdrop-filter: blur(12px); } [data-theme="radiant-moonlit"] .bubble.guest { background: linear-gradient(135deg, #88a8c0, #6888a0); color: #040810; } [data-theme="radiant-moonlit"] .session-card { background: rgba(136,168,192,0.04); border: 1px solid rgba(136,168,192,0.1); } [data-theme="radiant-moonlit"] .session-card.active { border-color: #88a8c0; box-shadow: 0 0 20px rgba(136,168,192,0.1); } [data-theme="radiant-moonlit"] .btn-accent { background: linear-gradient(135deg, #88a8c0, #6888a0); color: #040810; box-shadow: 0 4px 20px rgba(136,168,192,0.25); } [data-theme="radiant-moonlit"] .btn-ghost { border-color: rgba(136,168,192,0.14); } [data-theme="radiant-moonlit"] .btn-ghost:hover { border-color: #88a8c0; color: #88a8c0; background: rgba(136,168,192,0.06); } [data-theme="radiant-moonlit"] .input-row input { background: rgba(136,168,192,0.04); } [data-theme="radiant-moonlit"] .sidebar { background: rgba(4,8,16,0.8); backdrop-filter: blur(20px); border-left: 1px solid rgba(136,168,192,0.1); } [data-theme="radiant-moonlit"] .success-card { border: 1px solid rgba(136,168,192,0.12); background: rgba(6,10,18,0.8); backdrop-filter: blur(24px); } [data-theme="radiant-moonlit"] .goodbye-overlay { background: #040810; } [data-theme="radiant-moonlit"] .goodbye-check { border-color: #88a8c0; } [data-theme="radiant-moonlit"] .goodbye-check svg { stroke: #88a8c0; } [data-theme="radiant-moonlit"] .voice-cta-btn { border: 2px solid rgba(136,168,192,0.18); background: rgba(136,168,192,0.04); color: #88a8c0; } [data-theme="radiant-moonlit"] .voice-cta-btn::before { border-color: rgba(136,168,192,0.2); } [data-theme="radiant-moonlit"] .voice-cta-btn::after { border-color: rgba(136,168,192,0.08); } [data-theme="radiant-moonlit"] .voice-bar { background: rgba(4,8,16,0.7); backdrop-filter: blur(20px); } [data-theme="radiant-moonlit"] .voice-bar.active { background: rgba(136,168,192,0.04); border-color: #88a8c0; } [data-theme="radiant-moonlit"] .badge-info { background: #88a8c0; color: #040810; } [data-theme="radiant-moonlit"] .kb-editor { background: #040810; border-color: rgba(136,168,192,0.15); } [data-theme="radiant-moonlit"] .kb-editor textarea { background: rgba(136,168,192,0.03); } [data-theme="radiant-moonlit"] #pin-modal > div, [data-theme="radiant-moonlit"] .modal-box { background: rgba(6,10,18,0.92); border: 1px solid rgba(136,168,192,0.12); backdrop-filter: blur(24px); } [data-theme="radiant-moonlit"] .screensaver { background: #020408; } [data-theme="radiant-moonlit"] body::after { background: none; } [data-theme="radiant-moonlit"] .welcome h1 { font-weight: 200; text-shadow: 0 0 25px rgba(200,180,140,0.3), 0 4px 20px rgba(0,0,0,0.5); } /* ── 29. RADIANT STARDUST — cosmic particle curtain ─────────────────── */ :root[data-theme="radiant-stardust"] { --bg: #060218; --fg: #e8e0f8; --accent: #a878d0; --accent-dim: rgba(168,120,208,0.12); --glow: rgba(168,120,208,0.3); --muted: #8a70a0; --panel-bg: rgba(8,4,24,0.7); --border: rgba(168,120,208,0.14); --danger: #ff3860; } [data-theme="radiant-stardust"] body { background: #060218; } [data-theme="radiant-stardust"] .logo { color: #a878d0; text-shadow: 0 0 10px rgba(168,120,208,0.3); } [data-theme="radiant-stardust"] header { background: rgba(6,4,20,0.75); backdrop-filter: blur(20px) saturate(180%); border-bottom: 1px solid rgba(168,120,208,0.12); } [data-theme="radiant-stardust"] .bubble.concierge { background: rgba(8,4,24,0.8); border-left: 2px solid rgba(168,120,208,0.4); backdrop-filter: blur(12px); } [data-theme="radiant-stardust"] .bubble.guest { background: linear-gradient(135deg, #a878d0, #8858b0); color: #fff; } [data-theme="radiant-stardust"] .session-card { background: rgba(168,120,208,0.04); border: 1px solid rgba(168,120,208,0.1); } [data-theme="radiant-stardust"] .session-card.active { border-color: #a878d0; box-shadow: 0 0 20px rgba(168,120,208,0.1); } [data-theme="radiant-stardust"] .btn-accent { background: linear-gradient(135deg, #a878d0, #8858b0); color: #fff; box-shadow: 0 4px 20px rgba(168,120,208,0.3); } [data-theme="radiant-stardust"] .btn-ghost { border-color: rgba(168,120,208,0.14); } [data-theme="radiant-stardust"] .btn-ghost:hover { border-color: #a878d0; color: #a878d0; background: rgba(168,120,208,0.06); } [data-theme="radiant-stardust"] .input-row input { background: rgba(168,120,208,0.04); } [data-theme="radiant-stardust"] .sidebar { background: rgba(6,4,20,0.8); backdrop-filter: blur(20px); border-left: 1px solid rgba(168,120,208,0.1); } [data-theme="radiant-stardust"] .success-card { border: 1px solid rgba(168,120,208,0.12); background: rgba(8,4,24,0.8); backdrop-filter: blur(24px); } [data-theme="radiant-stardust"] .goodbye-overlay { background: #060218; } [data-theme="radiant-stardust"] .goodbye-check { border-color: #a878d0; box-shadow: 0 0 20px rgba(168,120,208,0.1); } [data-theme="radiant-stardust"] .goodbye-check svg { stroke: #a878d0; filter: drop-shadow(0 0 4px rgba(168,120,208,0.4)); } [data-theme="radiant-stardust"] .voice-cta-btn { border: 2px solid rgba(168,120,208,0.18); background: rgba(168,120,208,0.04); color: #a878d0; } [data-theme="radiant-stardust"] .voice-cta-btn::before { border-color: rgba(168,120,208,0.2); } [data-theme="radiant-stardust"] .voice-cta-btn::after { border-color: rgba(168,120,208,0.08); } [data-theme="radiant-stardust"] .voice-bar { background: rgba(6,4,20,0.7); backdrop-filter: blur(20px); } [data-theme="radiant-stardust"] .voice-bar.active { background: rgba(168,120,208,0.04); border-color: #a878d0; } [data-theme="radiant-stardust"] .badge-info { background: #a878d0; color: #060218; } [data-theme="radiant-stardust"] .kb-editor { background: #060218; border-color: rgba(168,120,208,0.15); } [data-theme="radiant-stardust"] .kb-editor textarea { background: rgba(168,120,208,0.03); } [data-theme="radiant-stardust"] #pin-modal > div, [data-theme="radiant-stardust"] .modal-box { background: rgba(8,4,24,0.92); border: 1px solid rgba(168,120,208,0.12); backdrop-filter: blur(24px); } [data-theme="radiant-stardust"] .screensaver { background: #03010c; } [data-theme="radiant-stardust"] body::after { background: none; } [data-theme="radiant-stardust"] .welcome h1 { text-shadow: 0 0 25px rgba(168,120,208,0.4), 0 0 50px rgba(200,160,100,0.15), 0 4px 20px rgba(0,0,0,0.5); } /* ── 30. RADIANT VOICE — audio-reactive waveform ──────────────────── */ :root[data-theme="radiant-voice"] { --bg: #040810; --fg: #e0e8f8; --accent: #4070e0; --accent-dim: rgba(64,112,224,0.12); --glow: rgba(64,112,224,0.3); --muted: #6878a0; --panel-bg: rgba(6,10,20,0.7); --border: rgba(64,112,224,0.14); --danger: #ff4a5a; } [data-theme="radiant-voice"] body { background: #040810; } [data-theme="radiant-voice"] .logo { color: #4070e0; text-shadow: 0 0 10px rgba(64,112,224,0.3); } [data-theme="radiant-voice"] header { background: rgba(4,8,16,0.75); backdrop-filter: blur(20px) saturate(180%); border-bottom: 1px solid rgba(64,112,224,0.15); } [data-theme="radiant-voice"] .bubble.concierge { background: rgba(6,10,20,0.8); border-left: 2px solid rgba(64,112,224,0.4); backdrop-filter: blur(12px); } [data-theme="radiant-voice"] .bubble.guest { background: linear-gradient(135deg, #4070e0, #2850b8); color: #fff; } [data-theme="radiant-voice"] .session-card { background: rgba(64,112,224,0.05); border: 1px solid rgba(64,112,224,0.1); } [data-theme="radiant-voice"] .session-card.active { border-color: #4070e0; box-shadow: 0 0 20px rgba(64,112,224,0.12); } [data-theme="radiant-voice"] .btn-accent { background: linear-gradient(135deg, #4070e0, #2850b8); color: #fff; box-shadow: 0 4px 20px rgba(64,112,224,0.3); } [data-theme="radiant-voice"] .btn-ghost { border-color: rgba(64,112,224,0.14); } [data-theme="radiant-voice"] .btn-ghost:hover { border-color: #4070e0; color: #4070e0; background: rgba(64,112,224,0.06); } [data-theme="radiant-voice"] .input-row input { background: rgba(64,112,224,0.05); } [data-theme="radiant-voice"] .sidebar { background: rgba(4,8,16,0.8); backdrop-filter: blur(20px); border-left: 1px solid rgba(64,112,224,0.1); } [data-theme="radiant-voice"] .success-card { border: 1px solid rgba(64,112,224,0.15); background: rgba(6,10,20,0.8); backdrop-filter: blur(24px); } [data-theme="radiant-voice"] .goodbye-overlay { background: #040810; } [data-theme="radiant-voice"] .goodbye-check { border-color: #4070e0; } [data-theme="radiant-voice"] .goodbye-check svg { stroke: #4070e0; } [data-theme="radiant-voice"] .voice-cta-btn { border: 2px solid rgba(64,112,224,0.2); background: rgba(64,112,224,0.05); color: #4070e0; } [data-theme="radiant-voice"] .voice-cta-btn::before { border-color: rgba(64,112,224,0.25); } [data-theme="radiant-voice"] .voice-cta-btn::after { border-color: rgba(64,112,224,0.1); } [data-theme="radiant-voice"] .voice-bar { background: rgba(4,8,16,0.7); backdrop-filter: blur(20px); } [data-theme="radiant-voice"] .voice-bar.active { background: rgba(64,112,224,0.06); border-color: #4070e0; } [data-theme="radiant-voice"] .badge-info { background: #4070e0; color: #fff; } [data-theme="radiant-voice"] .kb-editor { background: #040810; border-color: rgba(64,112,224,0.18); } [data-theme="radiant-voice"] .kb-editor textarea { background: rgba(64,112,224,0.04); } [data-theme="radiant-voice"] #pin-modal > div, [data-theme="radiant-voice"] .modal-box { background: rgba(6,10,20,0.92); border: 1px solid rgba(64,112,224,0.15); backdrop-filter: blur(24px); } [data-theme="radiant-voice"] .screensaver { background: #020408; } [data-theme="radiant-voice"] body::after { background: none; } [data-theme="radiant-voice"] .welcome h1 { text-shadow: 0 0 30px rgba(64,112,224,0.4), 0 4px 20px rgba(0,0,0,0.5); } /* ── 31. RADIANT RIVERBED — rushing water over stones ─────────────── */ :root[data-theme="radiant-riverbed"] { --bg: #0a1210; --fg: #dde8e4; --accent: #5a9e8a; --accent-dim: rgba(90,158,138,0.14); --glow: rgba(90,158,138,0.35); --muted: #7a9a8e; --panel-bg: rgba(10,18,16,0.7); --border: rgba(90,158,138,0.18); --danger: #c44; } [data-theme="radiant-riverbed"] body { background: #0a1210; } [data-theme="radiant-riverbed"] .logo { color: #5a9e8a; text-shadow: 0 0 12px rgba(90,158,138,0.3); } [data-theme="radiant-riverbed"] header { background: rgba(10,18,16,0.75); backdrop-filter: blur(20px) saturate(180%); border-bottom: 1px solid rgba(90,158,138,0.2); } [data-theme="radiant-riverbed"] .bubble.concierge { background: rgba(10,18,16,0.8); border-left: 2px solid rgba(90,158,138,0.4); backdrop-filter: blur(12px); } [data-theme="radiant-riverbed"] .bubble.guest { background: linear-gradient(135deg, #5a9e8a, #3a7e6a); color: #0a1210; } [data-theme="radiant-riverbed"] .session-card { background: rgba(90,158,138,0.05); border: 1px solid rgba(90,158,138,0.12); } [data-theme="radiant-riverbed"] .session-card.active { border-color: #5a9e8a; box-shadow: 0 0 20px rgba(90,158,138,0.15); } [data-theme="radiant-riverbed"] .btn-accent { background: linear-gradient(135deg, #5a9e8a, #3a7e6a); color: #0a1210; box-shadow: 0 4px 20px rgba(90,158,138,0.35); } [data-theme="radiant-riverbed"] .btn-ghost { border-color: rgba(90,158,138,0.18); } [data-theme="radiant-riverbed"] .btn-ghost:hover { border-color: #5a9e8a; color: #5a9e8a; background: rgba(90,158,138,0.08); } [data-theme="radiant-riverbed"] .input-row input { background: rgba(90,158,138,0.06); } [data-theme="radiant-riverbed"] .sidebar { background: rgba(10,18,16,0.8); backdrop-filter: blur(20px); border-left: 1px solid rgba(90,158,138,0.15); } [data-theme="radiant-riverbed"] .success-card { border: 1px solid rgba(90,158,138,0.2); background: rgba(10,18,16,0.8); backdrop-filter: blur(24px); } [data-theme="radiant-riverbed"] .goodbye-overlay { background: #0a1210; } [data-theme="radiant-riverbed"] .goodbye-check { border-color: #5a9e8a; } [data-theme="radiant-riverbed"] .goodbye-check svg { stroke: #5a9e8a; } [data-theme="radiant-riverbed"] .voice-cta-btn { border: 2px solid rgba(90,158,138,0.25); background: rgba(90,158,138,0.06); color: #5a9e8a; } [data-theme="radiant-riverbed"] .voice-cta-btn::before { border-color: rgba(90,158,138,0.3); } [data-theme="radiant-riverbed"] .voice-cta-btn::after { border-color: rgba(90,158,138,0.15); } [data-theme="radiant-riverbed"] .voice-bar { background: rgba(10,18,16,0.7); backdrop-filter: blur(20px); } [data-theme="radiant-riverbed"] .voice-bar.active { background: rgba(90,158,138,0.06); border-color: #5a9e8a; } [data-theme="radiant-riverbed"] .badge-info { background: #5a9e8a; color: #0a1210; } [data-theme="radiant-riverbed"] .kb-editor { background: #0a1210; border-color: rgba(90,158,138,0.25); } [data-theme="radiant-riverbed"] .kb-editor textarea { background: rgba(90,158,138,0.04); } [data-theme="radiant-riverbed"] #pin-modal > div, [data-theme="radiant-riverbed"] .modal-box { background: rgba(10,18,16,0.92); border: 1px solid rgba(90,158,138,0.2); backdrop-filter: blur(24px); } [data-theme="radiant-riverbed"] .screensaver { background: #060e0c; } [data-theme="radiant-riverbed"] body::after { background: none; } [data-theme="radiant-riverbed"] .welcome h1 { text-shadow: 0 0 30px rgba(90,158,138,0.4), 0 4px 20px rgba(0,0,0,0.5); } /* ── 32. radiant-ember — Smoldering coals with heat shimmer ────────── */ :root[data-theme="radiant-ember"] { --bg: #0a0402; --fg: #f0dcc8; --accent: #d45a20; --accent-dim: rgba(212,90,32,0.15); --glow: rgba(212,90,32,0.4); --muted: #a07050; --panel-bg: rgba(10,4,2,0.7); --border: rgba(212,90,32,0.18); --danger: #ff4444; } [data-theme="radiant-ember"] body { background: #0a0402; } [data-theme="radiant-ember"] .logo { color: #d45a20; text-shadow: 0 0 12px rgba(212,90,32,0.3); } [data-theme="radiant-ember"] header { background: rgba(10,4,2,0.75); backdrop-filter: blur(20px) saturate(180%); border-bottom: 1px solid rgba(212,90,32,0.2); } [data-theme="radiant-ember"] .bubble.concierge { background: rgba(10,4,2,0.8); border-left: 2px solid rgba(212,90,32,0.4); backdrop-filter: blur(12px); } [data-theme="radiant-ember"] .bubble.guest { background: linear-gradient(135deg, #d45a20, #b04010); color: #0a0402; } [data-theme="radiant-ember"] .session-card { background: rgba(212,90,32,0.05); border: 1px solid rgba(212,90,32,0.12); } [data-theme="radiant-ember"] .session-card.active { border-color: #d45a20; box-shadow: 0 0 20px rgba(212,90,32,0.15); } [data-theme="radiant-ember"] .btn-accent { background: linear-gradient(135deg, #d45a20, #b04010); color: #0a0402; box-shadow: 0 4px 20px rgba(212,90,32,0.35); } [data-theme="radiant-ember"] .btn-ghost { border-color: rgba(212,90,32,0.18); } [data-theme="radiant-ember"] .btn-ghost:hover { border-color: #d45a20; color: #d45a20; background: rgba(212,90,32,0.08); } [data-theme="radiant-ember"] .input-row input { background: rgba(212,90,32,0.06); } [data-theme="radiant-ember"] .sidebar { background: rgba(10,4,2,0.8); backdrop-filter: blur(20px); border-left: 1px solid rgba(212,90,32,0.15); } [data-theme="radiant-ember"] .success-card { border: 1px solid rgba(212,90,32,0.2); background: rgba(10,4,2,0.8); backdrop-filter: blur(24px); } [data-theme="radiant-ember"] .goodbye-overlay { background: #0a0402; } [data-theme="radiant-ember"] .goodbye-check { border-color: #d45a20; } [data-theme="radiant-ember"] .goodbye-check svg { stroke: #d45a20; } [data-theme="radiant-ember"] .voice-cta-btn { border: 2px solid rgba(212,90,32,0.25); background: rgba(212,90,32,0.06); color: #d45a20; } [data-theme="radiant-ember"] .voice-cta-btn::before { border-color: rgba(212,90,32,0.3); } [data-theme="radiant-ember"] .voice-cta-btn::after { border-color: rgba(212,90,32,0.15); } [data-theme="radiant-ember"] .voice-bar { background: rgba(10,4,2,0.7); backdrop-filter: blur(20px); } [data-theme="radiant-ember"] .voice-bar.active { background: rgba(212,90,32,0.06); border-color: #d45a20; } [data-theme="radiant-ember"] .badge-info { background: #d45a20; color: #0a0402; } [data-theme="radiant-ember"] .kb-editor { background: #0a0402; border-color: rgba(212,90,32,0.25); } [data-theme="radiant-ember"] .kb-editor textarea { background: rgba(212,90,32,0.04); } [data-theme="radiant-ember"] #pin-modal > div, [data-theme="radiant-ember"] .modal-box { background: rgba(10,4,2,0.92); border: 1px solid rgba(212,90,32,0.2); backdrop-filter: blur(24px); } [data-theme="radiant-ember"] .screensaver { background: #050201; } [data-theme="radiant-ember"] body::after { background: none; } [data-theme="radiant-ember"] .welcome h1 { text-shadow: 0 0 30px rgba(212,90,32,0.4), 0 4px 20px rgba(0,0,0,0.5); } /* ── 33. radiant-ocean — Deep underwater with god rays ─────────────── */ :root[data-theme="radiant-ocean"] { --bg: #020a14; --fg: #d0e8f8; --accent: #2090cc; --accent-dim: rgba(32,144,204,0.15); --glow: rgba(32,144,204,0.4); --muted: #6090b0; --panel-bg: rgba(2,10,20,0.7); --border: rgba(32,144,204,0.18); --danger: #ff5a5a; } [data-theme="radiant-ocean"] body { background: #020a14; } [data-theme="radiant-ocean"] .logo { color: #2090cc; text-shadow: 0 0 12px rgba(32,144,204,0.3); } [data-theme="radiant-ocean"] header { background: rgba(2,10,20,0.75); backdrop-filter: blur(20px) saturate(180%); border-bottom: 1px solid rgba(32,144,204,0.2); } [data-theme="radiant-ocean"] .bubble.concierge { background: rgba(2,10,20,0.8); border-left: 2px solid rgba(32,144,204,0.4); backdrop-filter: blur(12px); } [data-theme="radiant-ocean"] .bubble.guest { background: linear-gradient(135deg, #2090cc, #1070aa); color: #020a14; } [data-theme="radiant-ocean"] .session-card { background: rgba(32,144,204,0.05); border: 1px solid rgba(32,144,204,0.12); } [data-theme="radiant-ocean"] .session-card.active { border-color: #2090cc; box-shadow: 0 0 20px rgba(32,144,204,0.15); } [data-theme="radiant-ocean"] .btn-accent { background: linear-gradient(135deg, #2090cc, #1070aa); color: #020a14; box-shadow: 0 4px 20px rgba(32,144,204,0.35); } [data-theme="radiant-ocean"] .btn-ghost { border-color: rgba(32,144,204,0.18); } [data-theme="radiant-ocean"] .btn-ghost:hover { border-color: #2090cc; color: #2090cc; background: rgba(32,144,204,0.08); } [data-theme="radiant-ocean"] .input-row input { background: rgba(32,144,204,0.06); } [data-theme="radiant-ocean"] .sidebar { background: rgba(2,10,20,0.8); backdrop-filter: blur(20px); border-left: 1px solid rgba(32,144,204,0.15); } [data-theme="radiant-ocean"] .success-card { border: 1px solid rgba(32,144,204,0.2); background: rgba(2,10,20,0.8); backdrop-filter: blur(24px); } [data-theme="radiant-ocean"] .goodbye-overlay { background: #020a14; } [data-theme="radiant-ocean"] .goodbye-check { border-color: #2090cc; } [data-theme="radiant-ocean"] .goodbye-check svg { stroke: #2090cc; } [data-theme="radiant-ocean"] .voice-cta-btn { border: 2px solid rgba(32,144,204,0.25); background: rgba(32,144,204,0.06); color: #2090cc; } [data-theme="radiant-ocean"] .voice-cta-btn::before { border-color: rgba(32,144,204,0.3); } [data-theme="radiant-ocean"] .voice-cta-btn::after { border-color: rgba(32,144,204,0.15); } [data-theme="radiant-ocean"] .voice-bar { background: rgba(2,10,20,0.7); backdrop-filter: blur(20px); } [data-theme="radiant-ocean"] .voice-bar.active { background: rgba(32,144,204,0.06); border-color: #2090cc; } [data-theme="radiant-ocean"] .badge-info { background: #2090cc; color: #020a14; } [data-theme="radiant-ocean"] .kb-editor { background: #020a14; border-color: rgba(32,144,204,0.25); } [data-theme="radiant-ocean"] .kb-editor textarea { background: rgba(32,144,204,0.04); } [data-theme="radiant-ocean"] #pin-modal > div, [data-theme="radiant-ocean"] .modal-box { background: rgba(2,10,20,0.92); border: 1px solid rgba(32,144,204,0.2); backdrop-filter: blur(24px); } [data-theme="radiant-ocean"] .screensaver { background: #010510; } [data-theme="radiant-ocean"] body::after { background: none; } [data-theme="radiant-ocean"] .welcome h1 { text-shadow: 0 0 30px rgba(32,144,204,0.4), 0 4px 20px rgba(0,0,0,0.5); } /* ── 34. radiant-zen — Raked sand garden with meditation stones ─────── */ :root[data-theme="radiant-zen"] { --bg: #0c0b08; --fg: #d8d0c0; --accent: #a09070; --accent-dim: rgba(160,144,112,0.15); --glow: rgba(160,144,112,0.3); --muted: #807060; --panel-bg: rgba(12,11,8,0.75); --border: rgba(160,144,112,0.18); --danger: #c45a4a; } [data-theme="radiant-zen"] body { background: #0c0b08; } [data-theme="radiant-zen"] .logo { color: #a09070; text-shadow: 0 0 12px rgba(160,144,112,0.25); } [data-theme="radiant-zen"] header { background: rgba(12,11,8,0.75); backdrop-filter: blur(20px) saturate(150%); border-bottom: 1px solid rgba(160,144,112,0.2); } [data-theme="radiant-zen"] .bubble.concierge { background: rgba(12,11,8,0.8); border-left: 2px solid rgba(160,144,112,0.35); backdrop-filter: blur(12px); } [data-theme="radiant-zen"] .bubble.guest { background: linear-gradient(135deg, #a09070, #887858); color: #0c0b08; } [data-theme="radiant-zen"] .session-card { background: rgba(160,144,112,0.05); border: 1px solid rgba(160,144,112,0.12); } [data-theme="radiant-zen"] .session-card.active { border-color: #a09070; box-shadow: 0 0 20px rgba(160,144,112,0.12); } [data-theme="radiant-zen"] .btn-accent { background: linear-gradient(135deg, #a09070, #887858); color: #0c0b08; box-shadow: 0 4px 20px rgba(160,144,112,0.3); } [data-theme="radiant-zen"] .btn-ghost { border-color: rgba(160,144,112,0.18); } [data-theme="radiant-zen"] .btn-ghost:hover { border-color: #a09070; color: #a09070; background: rgba(160,144,112,0.08); } [data-theme="radiant-zen"] .input-row input { background: rgba(160,144,112,0.06); } [data-theme="radiant-zen"] .sidebar { background: rgba(12,11,8,0.8); backdrop-filter: blur(20px); border-left: 1px solid rgba(160,144,112,0.15); } [data-theme="radiant-zen"] .success-card { border: 1px solid rgba(160,144,112,0.2); background: rgba(12,11,8,0.8); backdrop-filter: blur(24px); } [data-theme="radiant-zen"] .goodbye-overlay { background: #0c0b08; } [data-theme="radiant-zen"] .goodbye-check { border-color: #a09070; } [data-theme="radiant-zen"] .goodbye-check svg { stroke: #a09070; } [data-theme="radiant-zen"] .voice-cta-btn { border: 2px solid rgba(160,144,112,0.25); background: rgba(160,144,112,0.06); color: #a09070; } [data-theme="radiant-zen"] .voice-cta-btn::before { border-color: rgba(160,144,112,0.25); } [data-theme="radiant-zen"] .voice-cta-btn::after { border-color: rgba(160,144,112,0.12); } [data-theme="radiant-zen"] .voice-bar { background: rgba(12,11,8,0.7); backdrop-filter: blur(20px); } [data-theme="radiant-zen"] .voice-bar.active { background: rgba(160,144,112,0.06); border-color: #a09070; } [data-theme="radiant-zen"] .badge-info { background: #a09070; color: #0c0b08; } [data-theme="radiant-zen"] .kb-editor { background: #0c0b08; border-color: rgba(160,144,112,0.25); } [data-theme="radiant-zen"] .kb-editor textarea { background: rgba(160,144,112,0.04); } [data-theme="radiant-zen"] #pin-modal > div, [data-theme="radiant-zen"] .modal-box { background: rgba(12,11,8,0.92); border: 1px solid rgba(160,144,112,0.2); backdrop-filter: blur(24px); } [data-theme="radiant-zen"] .screensaver { background: #060504; } [data-theme="radiant-zen"] body::after { background: none; } [data-theme="radiant-zen"] .welcome h1 { text-shadow: 0 0 30px rgba(160,144,112,0.3), 0 4px 20px rgba(0,0,0,0.5); } /* ── 35. radiant-marble — Swirling marble veins, polished surface ──── */ :root[data-theme="radiant-marble"] { --bg: #0a0a0c; --fg: #e0ddd8; --accent: #8888a0; --accent-dim: rgba(136,136,160,0.15); --glow: rgba(136,136,160,0.3); --muted: #707080; --panel-bg: rgba(10,10,12,0.75); --border: rgba(136,136,160,0.18); --danger: #c44; } [data-theme="radiant-marble"] body { background: #0a0a0c; } [data-theme="radiant-marble"] .logo { color: #8888a0; text-shadow: 0 0 12px rgba(136,136,160,0.25); } [data-theme="radiant-marble"] header { background: rgba(10,10,12,0.75); backdrop-filter: blur(20px) saturate(150%); border-bottom: 1px solid rgba(136,136,160,0.2); } [data-theme="radiant-marble"] .bubble.concierge { background: rgba(10,10,12,0.8); border-left: 2px solid rgba(136,136,160,0.35); backdrop-filter: blur(12px); } [data-theme="radiant-marble"] .bubble.guest { background: linear-gradient(135deg, #8888a0, #686880); color: #0a0a0c; } [data-theme="radiant-marble"] .session-card { background: rgba(136,136,160,0.05); border: 1px solid rgba(136,136,160,0.12); } [data-theme="radiant-marble"] .session-card.active { border-color: #8888a0; box-shadow: 0 0 20px rgba(136,136,160,0.12); } [data-theme="radiant-marble"] .btn-accent { background: linear-gradient(135deg, #8888a0, #686880); color: #f0f0f0; box-shadow: 0 4px 20px rgba(136,136,160,0.3); } [data-theme="radiant-marble"] .btn-ghost { border-color: rgba(136,136,160,0.18); } [data-theme="radiant-marble"] .btn-ghost:hover { border-color: #8888a0; color: #8888a0; background: rgba(136,136,160,0.08); } [data-theme="radiant-marble"] .input-row input { background: rgba(136,136,160,0.06); } [data-theme="radiant-marble"] .sidebar { background: rgba(10,10,12,0.8); backdrop-filter: blur(20px); border-left: 1px solid rgba(136,136,160,0.15); } [data-theme="radiant-marble"] .success-card { border: 1px solid rgba(136,136,160,0.2); background: rgba(10,10,12,0.8); backdrop-filter: blur(24px); } [data-theme="radiant-marble"] .goodbye-overlay { background: #0a0a0c; } [data-theme="radiant-marble"] .goodbye-check { border-color: #8888a0; } [data-theme="radiant-marble"] .goodbye-check svg { stroke: #8888a0; } [data-theme="radiant-marble"] .voice-cta-btn { border: 2px solid rgba(136,136,160,0.25); background: rgba(136,136,160,0.06); color: #8888a0; } [data-theme="radiant-marble"] .voice-cta-btn::before { border-color: rgba(136,136,160,0.25); } [data-theme="radiant-marble"] .voice-cta-btn::after { border-color: rgba(136,136,160,0.12); } [data-theme="radiant-marble"] .voice-bar { background: rgba(10,10,12,0.7); backdrop-filter: blur(20px); } [data-theme="radiant-marble"] .voice-bar.active { background: rgba(136,136,160,0.06); border-color: #8888a0; } [data-theme="radiant-marble"] .badge-info { background: #8888a0; color: #0a0a0c; } [data-theme="radiant-marble"] .kb-editor { background: #0a0a0c; border-color: rgba(136,136,160,0.25); } [data-theme="radiant-marble"] .kb-editor textarea { background: rgba(136,136,160,0.04); } [data-theme="radiant-marble"] #pin-modal > div, [data-theme="radiant-marble"] .modal-box { background: rgba(10,10,12,0.92); border: 1px solid rgba(136,136,160,0.2); backdrop-filter: blur(24px); } [data-theme="radiant-marble"] .screensaver { background: #050506; } [data-theme="radiant-marble"] body::after { background: none; } [data-theme="radiant-marble"] .welcome h1 { text-shadow: 0 0 30px rgba(136,136,160,0.3), 0 4px 20px rgba(0,0,0,0.5); } /* ═══════════════════════════════════════════════════════════════════════ CYBER KIOSK THEMES — added for amazing futuristic kiosk experience ═══════════════════════════════════════════════════════════════════════ */ :root[data-theme="cyber-neon"] { --bg: #0a050f; --fg: #e0f8ff; --accent: #00f3ff; --accent-dim: rgba(0,243,255,0.18); --glow: rgba(0,243,255,0.65); --muted: #88aaff; --panel-bg: rgba(10,5,20,0.75); --border: rgba(0,243,255,0.25); --danger: #ff2a6d; } [data-theme="cyber-neon"] .logo { color: #00f3ff; text-shadow: 0 0 20px #00f3ff; } [data-theme="cyber-neon"] header { background: rgba(5,2,12,0.92); backdrop-filter: blur(16px); } [data-theme="cyber-neon"] .bubble.concierge { background: rgba(15,8,35,0.85); border-left-color: #00f3ff; box-shadow: 0 0 15px rgba(0,243,255,0.2); } [data-theme="cyber-neon"] .bubble.guest { background: linear-gradient(135deg, #00f3ff, #ff00aa); color: #0a050f; box-shadow: 0 0 25px rgba(0,243,255,0.6); } [data-theme="cyber-neon"] .btn-accent { background: linear-gradient(90deg, #00f3ff, #ff00aa); box-shadow: 0 0 30px rgba(0,243,255,0.5); } [data-theme="cyber-neon"] .voice-cta-btn { border-color: #00f3ff; box-shadow: 0 0 40px #00f3ff; } [data-theme="cyber-neon"] body::after { background: linear-gradient(transparent, rgba(255,0,170,0.03) 50%, transparent), repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,243,255,0.035) 2px, rgba(0,243,255,0.035) 4px), radial-gradient(circle at 30% 20%, rgba(0,243,255,0.15) 0%, transparent 40%), radial-gradient(circle at 80% 70%, rgba(255,0,170,0.12) 0%, transparent 50%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='600' height='600' filter='url(%23n)' opacity='0.15'/%3E%3C/svg%3E"), linear-gradient(145deg, #0a050f 0%, #120a22 50%, #0a050f 100%); background-size: 100% 100%, 100% 6px, 100% 100%, 100% 100%, 300px 300px, 100% 100%; animation: cyber-scan 8s linear infinite; } @keyframes cyber-scan { 0% { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; } 100% { background-position: 0 600px, 0 0, 0 0, 0 0, 0 80px, 0 0; } } :root[data-theme="holo-grid"] { --bg: #05080f; --fg: #c8f4ff; --accent: #00d4ff; --accent-dim: rgba(0,212,255,0.22); --glow: rgba(0,212,255,0.7); --muted: #77bbff; --panel-bg: rgba(8,18,35,0.7); --border: rgba(0,212,255,0.3); --danger: #ff3366; } [data-theme="holo-grid"] .logo { color: #00d4ff; text-shadow: 0 0 15px #00d4ff, 0 0 30px #00d4ff; } [data-theme="holo-grid"] header, [data-theme="holo-grid"] .sidebar { background: rgba(5,10,25,0.85); backdrop-filter: blur(20px); } [data-theme="holo-grid"] .bubble.concierge { background: rgba(10,25,45,0.85); border-left: 3px solid #00d4ff; } [data-theme="holo-grid"] .btn-accent { background: #00d4ff; color: #05080f; box-shadow: 0 0 25px #00d4ff; } [data-theme="holo-grid"] body::after { background: linear-gradient(rgba(0,212,255,0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(0,212,255,0.08) 1px, transparent 1px), radial-gradient(circle at 40% 30%, rgba(100,220,255,0.25) 0%, transparent 45%), radial-gradient(circle at 70% 75%, rgba(120,180,255,0.18) 0%, transparent 55%), linear-gradient(180deg, #05080f 0%, #0a1428 45%, #05080f 100%); background-size: 40px 40px, 40px 40px, 100% 100%, 100% 100%, 100% 100%; animation: holo-grid-move 25s linear infinite; } @keyframes holo-grid-move { 0% { background-position: 0 0, 0 0, 0 0, 0 0; } 100% { background-position: 40px 40px, 40px 40px, 0 0, 0 0; } } :root[data-theme="quantum-flux"] { --bg: #050407; --fg: #e6f0ff; --accent: #7755ff; --accent-dim: rgba(119,85,255,0.2); --glow: rgba(119,85,255,0.75); --muted: #9988cc; --panel-bg: rgba(12,10,25,0.78); --border: rgba(119,85,255,0.22); --danger: #ff4477; } [data-theme="quantum-flux"] .logo { color: #aa88ff; text-shadow: 0 0 25px #7755ff; } [data-theme="quantum-flux"] .bubble.guest { background: linear-gradient(135deg, #7755ff, #cc77ff); color: #050407; } [data-theme="quantum-flux"] .voice-cta-btn { animation: quantum-pulse 3s ease-in-out infinite; } @keyframes quantum-pulse { 0%, 100% { box-shadow: 0 0 30px #7755ff; } 50% { box-shadow: 0 0 60px #aa88ff, 0 0 90px #7755ff; } } [data-theme="quantum-flux"] body::after { background: radial-gradient(ellipse at 25% 35%, rgba(119,85,255,0.18) 0%, transparent 50%), radial-gradient(ellipse at 75% 65%, rgba(170,136,255,0.14) 0%, transparent 55%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E%3Cfilter id='q'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.025' numOctaves='5'/%3E%3CfeColorMatrix values='0 0 0 0 0.4 0 0 0 0 0.3 0 0 0 0 0.9 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='700' height='700' filter='url(%23q)'/%3E%3C/svg%3E") center/cover, linear-gradient(160deg, #050407 20%, #0f0b1f 50%, #050407 80%); animation: flux-shift 18s ease infinite; } @keyframes flux-shift { 0% { filter: hue-rotate(0deg) saturate(1.1); } 50% { filter: hue-rotate(25deg) saturate(1.4); } 100% { filter: hue-rotate(0deg) saturate(1.1); } } /* ── Touch Ripple (all themes) ──────────────────────────────────────── */ .touch-ripple { position: fixed; border-radius: 50%; pointer-events: none; z-index: 9999; background: radial-gradient(circle, var(--accent) 0%, transparent 70%); opacity: 0.35; transform: scale(0); animation: ripple-expand 0.6s ease-out forwards; } @keyframes ripple-expand { 0% { transform: scale(0); opacity: 0.35; } 100% { transform: scale(1); opacity: 0; } } /* ── Typewriter animation (kiosk welcome) ───────────────────────────── */ .typewriter-char { display: inline-block; opacity: 0; animation: typewriter-in 0.04s forwards; } .typewriter-char.space { width: 0.3em; } @keyframes typewriter-in { to { opacity: 1; } } /* Optional blinking cursor at the end */ .typewriter-cursor { display: inline-block; width: 2px; height: 1em; background: var(--accent); margin-left: 2px; vertical-align: text-bottom; animation: cursor-blink 0.8s step-end infinite; } @keyframes cursor-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } /* ── Card Flip (holographic transitions for success cards) ──────────── */ .card-flip-container { perspective: 1200px; } .card-flip-inner { transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); transform-style: preserve-3d; position: relative; } .card-flip-inner.flipped { transform: rotateY(180deg); } .card-flip-front, .card-flip-back { backface-visibility: hidden; -webkit-backface-visibility: hidden; } .card-flip-back { transform: rotateY(180deg); position: absolute; inset: 0; } /* ═══════════════════════════════════════════════════════════════════════ PREMIUM — Cinematic dark luxury with Three.js 3D background, video screensaver support, dramatic typography, and glowing cards. Inspired by Lightweight.info's premium cycling brand aesthetic. ═══════════════════════════════════════════════════════════════════════ */ :root[data-theme="premium"] { --bg: #05080e; --fg: #e8ecf4; --accent: #c8a97e; --accent-dim: rgba(200,169,126,0.12); --glow: rgba(200,169,126,0.35); --muted: #8a9ab5; --panel: rgba(8,12,22,0.72); --border: rgba(200,169,126,0.12); --danger: #ff5a5a; } [data-theme="premium"] body { background: #05080e; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; } [data-theme="premium"] body::after { background: none !important; } [data-theme="premium"] body::before { background: radial-gradient(ellipse at center, transparent 30%, rgba(5,8,14,0.7) 100%); z-index: 1; } /* Header: ultra-thin border, deep glass */ [data-theme="premium"] header { background: rgba(5,8,14,0.82); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); border-bottom: 1px solid rgba(200,169,126,0.08); } [data-theme="premium"] .logo { color: #c8a97e; letter-spacing: 0.02em; } [data-theme="premium"] .hotel-name { color: #8a9ab5; letter-spacing: 0.08em; } /* Welcome: cinematic oversized typography */ [data-theme="premium"] .welcome h1 { font-size: 4.2rem; font-weight: 200; letter-spacing: -0.04em; line-height: 1.1; color: #f0ece4; text-shadow: 0 0 60px rgba(200,169,126,0.3), 0 0 120px rgba(200,169,126,0.1), 0 6px 30px rgba(0,0,0,0.6); } [data-theme="premium"] .welcome p { color: #7a8da8; font-size: 1.15rem; font-weight: 300; letter-spacing: 0.02em; } [data-theme="premium"] .voice-cta-label { color: #7a8da8; letter-spacing: 0.14em; font-size: 0.82rem; } /* Voice CTA: gold-accented breathing ring */ [data-theme="premium"] .voice-cta-btn { border: 1.5px solid rgba(200,169,126,0.2); background: rgba(200,169,126,0.03); color: #c8a97e; box-shadow: 0 0 40px rgba(200,169,126,0.06); } [data-theme="premium"] .voice-cta-btn:hover { border-color: rgba(200,169,126,0.4); box-shadow: 0 0 60px rgba(200,169,126,0.12); background: rgba(200,169,126,0.06); } [data-theme="premium"] .voice-cta-btn:active { background: linear-gradient(135deg, #c8a97e, #a8875e); border-color: #c8a97e; color: #05080e; box-shadow: 0 0 50px rgba(200,169,126,0.4); } [data-theme="premium"] .voice-cta-btn::before { border-color: rgba(200,169,126,0.15); } [data-theme="premium"] .voice-cta-btn::after { border-color: rgba(200,169,126,0.06); } /* Buttons: premium gold accents */ [data-theme="premium"] .btn-accent { background: linear-gradient(135deg, #c8a97e, #a8875e); color: #05080e; box-shadow: 0 4px 24px rgba(200,169,126,0.25); font-weight: 500; } [data-theme="premium"] .btn-accent:hover { box-shadow: 0 8px 36px rgba(200,169,126,0.35); transform: translateY(-2px); } [data-theme="premium"] .btn-ghost { background: rgba(200,169,126,0.04); border: 1px solid rgba(200,169,126,0.1); color: #e8ecf4; backdrop-filter: blur(16px); } [data-theme="premium"] .btn-ghost:hover { border-color: rgba(200,169,126,0.3); background: rgba(200,169,126,0.08); color: #c8a97e; box-shadow: 0 0 20px rgba(200,169,126,0.06); } [data-theme="premium"] .btn-help:hover { border-color: #c8a97e; color: #c8a97e; } /* Chat bubbles: deep glass */ [data-theme="premium"] .bubble.concierge { background: rgba(8,12,22,0.85); border-left: 2px solid rgba(200,169,126,0.3); backdrop-filter: blur(20px); } [data-theme="premium"] .bubble.guest { background: linear-gradient(135deg, #c8a97e, #a8875e); color: #05080e; } [data-theme="premium"] .messages { background: linear-gradient(to bottom, rgba(5,8,14,0.3) 0%, rgba(5,8,14,0.7) 30%, rgba(5,8,14,0.85) 100%); } /* Success card: premium glow */ [data-theme="premium"] .success-card { border: 1px solid rgba(200,169,126,0.12); background: rgba(8,12,22,0.88); box-shadow: 0 8px 40px rgba(0,0,0,0.4), 0 0 30px rgba(200,169,126,0.05); } [data-theme="premium"] .success-card .success-title { color: #c8a97e; } /* Welcome action cards: frosted glass with gold hover glow */ [data-theme="premium"] .welcome-actions .btn { border: 1px solid rgba(200,169,126,0.08); background: rgba(200,169,126,0.03); backdrop-filter: blur(16px); transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); } [data-theme="premium"] .welcome-actions .btn:hover { border-color: rgba(200,169,126,0.25); background: rgba(200,169,126,0.08); box-shadow: 0 4px 30px rgba(200,169,126,0.1), 0 0 0 1px rgba(200,169,126,0.05); transform: translateY(-3px); color: #c8a97e; } /* Modals */ [data-theme="premium"] .modal-box { background: rgba(8,12,22,0.95); border: 1px solid rgba(200,169,126,0.1); box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 40px rgba(200,169,126,0.04); } /* Voice bar */ [data-theme="premium"] .voice-bar { background: rgba(5,8,14,0.82); backdrop-filter: blur(20px); border-top: 1px solid rgba(200,169,126,0.08); } [data-theme="premium"] .voice-bar.active { background: rgba(200,169,126,0.04); border-color: rgba(200,169,126,0.15); } /* Goodbye */ [data-theme="premium"] .goodbye-overlay { background: #05080e; } [data-theme="premium"] .goodbye-check { border-color: rgba(200,169,126,0.25); } [data-theme="premium"] .goodbye-check svg { stroke: #c8a97e; filter: drop-shadow(0 0 8px rgba(200,169,126,0.4)); } [data-theme="premium"] .goodbye-overlay h2 { font-weight: 200; letter-spacing: -0.02em; } /* Screensaver: deeper gradient, larger clock */ [data-theme="premium"] .screensaver { background: #030508; } [data-theme="premium"] .screensaver-clock { font-size: 5.5rem; font-weight: 100; letter-spacing: 0.06em; color: rgba(255,255,255,0.85); } [data-theme="premium"] .screensaver-hotel { font-size: 1.4rem; letter-spacing: 0.12em; color: rgba(200,169,126,0.7); } [data-theme="premium"] .screensaver-tap { color: rgba(200,169,126,0.3); letter-spacing: 0.16em; } [data-theme="premium"] .screensaver-overlay { background: linear-gradient(transparent 0%, rgba(5,8,14,0.5) 20%, rgba(5,8,14,0.8) 100%); padding-bottom: 80px; } /* Input */ [data-theme="premium"] .input-row input { background: rgba(200,169,126,0.04); border: 1px solid rgba(200,169,126,0.1); } [data-theme="premium"] .input-row input:focus { border-color: #c8a97e; box-shadow: 0 0 0 3px rgba(200,169,126,0.12); } /* Sidebar & admin */ [data-theme="premium"] .sidebar { background: rgba(5,8,14,0.92); border-left: 1px solid rgba(200,169,126,0.06); } [data-theme="premium"] .session-card { background: rgba(200,169,126,0.04); border: 1px solid rgba(200,169,126,0.08); } [data-theme="premium"] .session-card.active { border-color: #c8a97e; box-shadow: 0 0 15px rgba(200,169,126,0.08); } [data-theme="premium"] .badge-info { background: #c8a97e; color: #05080e; } [data-theme="premium"] .kb-file { background: rgba(200,169,126,0.03); } [data-theme="premium"] .kb-editor { background: #05080e; border-color: rgba(200,169,126,0.1); } [data-theme="premium"] .kb-editor textarea { background: rgba(200,169,126,0.03); } [data-theme="premium"] .kb-editor-name { background: rgba(200,169,126,0.03); } [data-theme="premium"] .folio-entry { border-color: rgba(200,169,126,0.06); } [data-theme="premium"] #pin-modal > div { background: rgba(8,12,22,0.95); border: 1px solid rgba(200,169,126,0.1); } /* Premium: subtle animated gold shimmer on welcome headline */ @keyframes premium-shimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } } [data-theme="premium"] .welcome h1 .word-reveal { color: transparent; background: linear-gradient(90deg, #e8dcc8 0%, #c8a97e 25%, #f0e8d8 50%, #c8a97e 75%, #e8dcc8 100%); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; animation: word-in 0.6s var(--ease-out-expo) forwards, premium-shimmer 6s ease-in-out 1s infinite; } /* Premium: particle-style floating dots (CSS fallback when Three.js unavailable) */ [data-theme="premium"] .bubbles { display: block !important; } [data-theme="premium"] .bubbles span { background: #c8a97e; box-shadow: 0 0 8px rgba(200,169,126,0.3); opacity: 0; animation: bubble-rise var(--dur, 18s) var(--dly, 0s) infinite ease-in; } /* Hide CSS particles when Three.js canvas is active */ [data-theme="premium"] #three-bg.active ~ .bubbles { display: none !important; } /* ═══════════════════════════════════════════════════════════════════════ CUSTOM — user-uploaded image + configurable palette. CSS variables are set dynamically via JS; defaults below are fallbacks. ═══════════════════════════════════════════════════════════════════════ */ :root[data-theme="custom"] { --bg: var(--custom-bg, #0c0e18); --fg: var(--custom-fg, #f0e4d6); --accent: var(--custom-accent, #d4875c); --accent-dim: var(--custom-accent-dim, rgba(212,135,92,0.16)); --glow: var(--custom-glow, rgba(212,135,92,0.35)); --muted: var(--custom-muted, #a08a78); --panel-bg: var(--custom-panel-bg, rgba(12,14,24,0.75)); --border: var(--custom-border, rgba(212,135,92,0.18)); --danger: #e05a4a; } [data-theme="custom"] body { background: var(--bg) var(--custom-bg-image, none) center/cover no-repeat fixed; background-blend-mode: overlay; } [data-theme="custom"] .logo { color: var(--accent); } [data-theme="custom"] header { background: var(--custom-header-bg, rgba(10,12,20,0.85)); backdrop-filter: var(--custom-blur, blur(16px)); border-bottom: 1px solid var(--accent-dim); } [data-theme="custom"] .bubble.concierge { background: var(--panel-bg); border-left: 3px solid var(--accent-dim); } [data-theme="custom"] .bubble.guest { background: linear-gradient(135deg, var(--accent), var(--custom-accent-dark, #b06a42)); color: var(--bg); } [data-theme="custom"] .bubble.system { background: var(--accent-dim); } [data-theme="custom"] .session-card { background: var(--accent-dim); border: 1px solid var(--border); } [data-theme="custom"] .session-card.active { border-color: var(--accent); } [data-theme="custom"] .btn-accent { background: linear-gradient(135deg, var(--accent), var(--custom-accent-dark, #b06a42)); color: var(--bg); box-shadow: 0 3px 14px var(--glow); } [data-theme="custom"] .btn-ghost { border-color: var(--border); } [data-theme="custom"] .btn-ghost:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); } [data-theme="custom"] .input-row input { background: var(--accent-dim); } [data-theme="custom"] .sidebar { background: var(--custom-header-bg, rgba(10,12,20,0.88)); backdrop-filter: var(--custom-blur, blur(16px)); border-left: 1px solid var(--border); } [data-theme="custom"] .success-card { border: 1px solid var(--border); background: var(--panel-bg); } [data-theme="custom"] .goodbye-overlay { background: var(--bg); } [data-theme="custom"] .goodbye-check { border-color: var(--accent); } [data-theme="custom"] .goodbye-check svg { stroke: var(--accent); } [data-theme="custom"] .voice-cta-btn { border: 2px solid var(--border); background: var(--accent-dim); color: var(--accent); } [data-theme="custom"] .voice-cta-btn::before { border-color: var(--glow); } [data-theme="custom"] .voice-cta-btn::after { border-color: var(--accent-dim); } [data-theme="custom"] .voice-bar { background: var(--custom-header-bg, rgba(10,12,20,0.7)); backdrop-filter: var(--custom-blur, blur(16px)); } [data-theme="custom"] .voice-bar.active { background: var(--accent-dim); border-color: var(--accent); } [data-theme="custom"] .badge-info { background: var(--accent); color: var(--bg); } [data-theme="custom"] .kb-file { background: var(--accent-dim); } [data-theme="custom"] .kb-editor { background: var(--bg); border-color: var(--border); } [data-theme="custom"] .kb-editor textarea { background: var(--accent-dim); } [data-theme="custom"] .kb-editor-name { background: var(--accent-dim); } [data-theme="custom"] #pin-modal > div, [data-theme="custom"] .modal-box { background: var(--panel-bg); border: 1px solid var(--border); } [data-theme="custom"] .folio-entry { border-color: var(--border); } [data-theme="custom"] .screensaver { background: var(--bg); } [data-theme="custom"] body::after { background: none; } /* Custom theme style options applied via JS-set classes on */ :root.theme-serif, :root.theme-serif header, :root.theme-serif .sidebar { font-family: 'Georgia', 'Times New Roman', serif; } :root.theme-no-blur header, :root.theme-no-blur .sidebar, :root.theme-no-blur .voice-bar { backdrop-filter: none; -webkit-backdrop-filter: none; } :root.theme-no-glow .btn-accent { box-shadow: none; } :root.theme-no-glow .session-card.active { box-shadow: none; } :root.theme-no-round, :root.theme-no-round .btn, :root.theme-no-round .bubble, :root.theme-no-round .session-card, :root.theme-no-round input, :root.theme-no-round .kb-editor, :root.theme-no-round .modal-box, :root.theme-no-round select { border-radius: 2px !important; } /* ── Animated Bubbles (coastal theme only) ────────────────────────────── */ .bubbles { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; } .bubbles span { position: absolute; bottom: -60px; width: var(--sz, 20px); height: var(--sz, 20px); background: var(--accent); opacity: 0; border-radius: 50%; animation: bubble-rise var(--dur, 14s) var(--dly, 0s) infinite ease-in; } @keyframes bubble-rise { 0% { transform: translateX(0) scale(1); opacity: 0; } 10% { opacity: 0.06; } 50% { opacity: 0.04; } 100% { transform: translateX(calc(var(--drift, 30px))) translateY(-110vh) scale(0.3); opacity: 0; } } /* Hide bubbles on non-coastal themes */ :root:not([data-theme="coastal-dark"]) .bubbles { display: none; } [data-theme="coastal-dark"] .bubbles span { background: #20d4e8; } /* ── Theme selector styling ──────────────────────────────────────────── */ .theme-select { background: var(--panel-bg); color: var(--fg); border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px; font-size: 0.78rem; cursor: pointer; outline: none; } .theme-select:focus { border-color: var(--accent); }