/* ── NobleLex AI Theme System ── 3 themes × 2 modes (dark/light) = 6 variants Applied via data-theme attribute on */ :root { --radius-xl: 28px; --radius-lg: 20px; --radius-md: 14px; --container: 1200px; --ease: cubic-bezier(.2, .8, .2, 1); --transition: 0.35s cubic-bezier(.2, .8, .2, 1); --font-serif: 'Cormorant Garamond', Georgia, serif; --font-sans: 'DM Sans', system-ui, sans-serif; --danger: #f07178; --danger-dim: rgba(240,113,120,0.12); --success: #6ee7a0; } /* =================================================================== THEME 1: LUXURY (existing) Dark: deep purple-black with gold accents Light: warm cream with golden tones =================================================================== */ [data-theme="luxury-dark"] { --bg: #05040A; --bg2: #0C0B14; --bg3: #100F1C; --surface: rgba(255,255,255,0.035); --surface-2: rgba(255,255,255,0.065); --surface-3: rgba(255,255,255,0.10); --text: #EDE9DE; --text-dim: #B8B0A0; --muted: #7A7268; --border: rgba(210,185,130,0.10); --border-2: rgba(210,185,130,0.20); --border-3: rgba(210,185,130,0.32); --gold: #C9A84C; --gold-2: #E6C97A; --gold-3: #F0DFA0; --gold-dim: rgba(201,168,76,0.12); --shadow: 0 24px 64px rgba(0,0,0,0.65); --shadow-gold: 0 8px 32px rgba(201,168,76,0.15); --accent: #C9A84C; --accent-dim: rgba(201,168,76,0.12); --glow: 0 0 30px rgba(201,168,76,0.08); } [data-theme="luxury-light"] { --bg: #F8F5EE; --bg2: #F0EBE0; --bg3: #E8E0D0; --surface: rgba(255,255,255,0.75); --surface-2: rgba(255,255,255,0.92); --surface-3: rgba(255,255,255,0.98); --text: #1A1610; --text-dim: #3A3228; --muted: #7A7268; --border: rgba(100,80,40,0.10); --border-2: rgba(100,80,40,0.18); --border-3: rgba(100,80,40,0.30); --gold: #A07828; --gold-2: #C49A3A; --gold-3: #8B6520; --gold-dim: rgba(160,120,40,0.10); --shadow: 0 18px 50px rgba(60,40,10,0.12); --shadow-gold: 0 8px 32px rgba(160,120,40,0.12); --accent: #A07828; --accent-dim: rgba(160,120,40,0.10); --glow: 0 0 30px rgba(160,120,40,0.06); } /* =================================================================== THEME 2: GLASS (black glassmorphism) Dark: pure black with frosted glass panels, cyan-purple accents Light: bright white with frosted glass, subtle lavender =================================================================== */ [data-theme="glass-dark"] { --bg: #030303; --bg2: #080808; --bg3: #0D0D0D; --surface: rgba(255,255,255,0.03); --surface-2: rgba(255,255,255,0.06); --surface-3: rgba(255,255,255,0.10); --text: #EDEDED; --text-dim: #999999; --muted: #666666; --border: rgba(255,255,255,0.05); --border-2: rgba(255,255,255,0.10); --border-3: rgba(255,255,255,0.20); --gold: #FFFFFF; --gold-2: #DDDDDD; --gold-3: #BBBBBB; --gold-dim: rgba(255,255,255,0.06); --danger: #f87171; --danger-dim: rgba(248,113,113,0.12); --success: #6ee7b7; --shadow: 0 24px 60px rgba(0,0,0,0.80); --shadow-gold: 0 8px 32px rgba(255,255,255,0.04); --accent: #FFFFFF; --accent-dim: rgba(255,255,255,0.06); --glow: 0 0 30px rgba(255,255,255,0.03); } [data-theme="glass-light"] { --bg: #F5F5F7; --bg2: #EDEDF0; --bg3: #E5E5E8; --surface: rgba(255,255,255,0.50); --surface-2: rgba(255,255,255,0.70); --surface-3: rgba(255,255,255,0.90); --text: #1A1A1A; --text-dim: #555555; --muted: #777777; --border: rgba(0,0,0,0.05); --border-2: rgba(0,0,0,0.12); --border-3: rgba(0,0,0,0.24); --gold: #1A1A1A; --gold-2: #444444; --gold-3: #666666; --gold-dim: rgba(0,0,0,0.05); --shadow: 0 18px 50px rgba(0,0,0,0.06); --shadow-gold: 0 8px 32px rgba(0,0,0,0.04); --accent: #1A1A1A; --accent-dim: rgba(0,0,0,0.05); --glow: 0 0 30px rgba(0,0,0,0.02); } /* =================================================================== THEME 3: OCEAN (navy + teal) Dark: deep navy blue with teal/gold accents Light: pale sky blue with warm sand/teal tones =================================================================== */ [data-theme="ocean-dark"] { --bg: #080B1A; --bg2: #0E1228; --bg3: #141A33; --surface: rgba(45,212,191,0.03); --surface-2: rgba(45,212,191,0.06); --surface-3: rgba(45,212,191,0.10); --text: #E2E8F0; --text-dim: #94A3B8; --muted: #64748B; --border: rgba(45,212,191,0.08); --border-2: rgba(45,212,191,0.16); --border-3: rgba(45,212,191,0.28); --gold: #2DD4BF; --gold-2: #5EEAD4; --gold-3: #99F6E4; --gold-dim: rgba(45,212,191,0.10); --shadow: 0 24px 64px rgba(0,0,0,0.65); --shadow-gold: 0 8px 32px rgba(45,212,191,0.10); --accent: #2DD4BF; --accent-dim: rgba(45,212,191,0.10); --glow: 0 0 30px rgba(45,212,191,0.06); } [data-theme="ocean-light"] { --bg: #F0F5FA; --bg2: #E8EEF5; --bg3: #DCE4EE; --surface: rgba(255,255,255,0.80); --surface-2: rgba(255,255,255,0.93); --surface-3: rgba(255,255,255,1.0); --text: #0F172A; --text-dim: #334155; --muted: #64748B; --border: rgba(13,148,136,0.08); --border-2: rgba(13,148,136,0.16); --border-3: rgba(13,148,136,0.28); --gold: #0D9488; --gold-2: #14B8A6; --gold-3: #0F766E; --gold-dim: rgba(13,148,136,0.08); --shadow: 0 18px 50px rgba(0,60,80,0.10); --shadow-gold: 0 8px 32px rgba(13,148,136,0.10); --accent: #0D9488; --accent-dim: rgba(13,148,136,0.08); --glow: 0 0 30px rgba(13,148,136,0.05); } /* =================================================================== GLASS THEME — Frosted glass effect via backdrop-filter Applied to all common surface elements when glass theme is active =================================================================== */ [data-theme^="glass-"] .nav, [data-theme^="glass-"] .topbar, [data-theme^="glass-"] .site-header, [data-theme^="glass-"] .card, [data-theme^="glass-"] .sidebar, [data-theme^="glass-"] .profile-dropdown, [data-theme^="glass-"] .mini-panel, [data-theme^="glass-"] .tool-card, [data-theme^="glass-"] .result-card, [data-theme^="glass-"] .search-box, [data-theme^="glass-"] .tag, [data-theme^="glass-"] .print-btn, [data-theme^="glass-"] .btn, [data-theme^="glass-"] .theme-btn, [data-theme^="glass-"] .settings-card, [data-theme^="glass-"] .plan-stat, [data-theme^="glass-"] .panel, [data-theme^="glass-"] .input-section, [data-theme^="glass-"] .loader, [data-theme^="glass-"] .custom-select-trigger, [data-theme^="glass-"] .custom-select-dropdown, [data-theme^="glass-"] .chat-header, [data-theme^="glass-"] .ai-bubble, [data-theme^="glass-"] .input-container, [data-theme^="glass-"] .followup-panel, [data-theme^="glass-"] .exam-sidebar, [data-theme^="glass-"] .site-footer { backdrop-filter: blur(32px) saturate(1.3); -webkit-backdrop-filter: blur(32px) saturate(1.3); } [data-theme^="glass-"] .nav-links { backdrop-filter: blur(40px) saturate(1.4); -webkit-backdrop-filter: blur(40px) saturate(1.4); } [data-theme^="glass-"] body::before { opacity: 0.3 !important; } /* Stronger glass for elevated elements */ [data-theme^="glass-"] .profile-dropdown, [data-theme^="glass-"] .custom-select-dropdown { backdrop-filter: blur(48px) saturate(1.5); -webkit-backdrop-filter: blur(48px) saturate(1.5); border: 1px solid rgba(255,255,255,0.12); } /* =================================================================== LIGHT MODE BUTTON FIXES — brighter, more legible buttons =================================================================== */ /* Luxury-light: warm, vibrant gold gradient that pops on cream */ [data-theme="luxury-light"] .btn, [data-theme="luxury-light"] .btn-primary, [data-theme="luxury-light"] .btn-gold, [data-theme="luxury-light"] .btn-submit, [data-theme="luxury-light"] .btn-compare, [data-theme="luxury-light"] .btn-translate, [data-theme="luxury-light"] .btn-retrieve, [data-theme="luxury-light"] .btn-notify, [data-theme="luxury-light"] .new-chat-btn, [data-theme="luxury-light"] .send-btn, [data-theme="luxury-light"] .cta, [data-theme="luxury-light"] .unlock-btn-gold, [data-theme="luxury-light"] .btn-nav-cta, [data-theme="luxury-light"] .btn-plan-outline { background: linear-gradient(135deg, #C8963E, #E0B054); color: #1A1610; } [data-theme="luxury-light"] .btn-plan-outline { background: transparent; border-color: #C8963E; color: #C8963E; } [data-theme="luxury-light"] .btn-plan-outline:hover { background: rgba(200,150,62,0.1); } /* Glass-light: crisp dark buttons for light gray background */ [data-theme="glass-light"] .btn, [data-theme="glass-light"] .btn-primary, [data-theme="glass-light"] .btn-gold, [data-theme="glass-light"] .btn-submit, [data-theme="glass-light"] .btn-compare, [data-theme="glass-light"] .btn-translate, [data-theme="glass-light"] .btn-retrieve, [data-theme="glass-light"] .btn-notify, [data-theme="glass-light"] .new-chat-btn, [data-theme="glass-light"] .send-btn, [data-theme="glass-light"] .cta, [data-theme="glass-light"] .unlock-btn-gold, [data-theme="glass-light"] .btn-nav-cta, [data-theme="glass-light"] .btn-plan-outline { background: #1A1A1A; color: #FFFFFF; box-shadow: 0 2px 12px rgba(0,0,0,0.08); } [data-theme="glass-light"] .btn-plan-outline { background: transparent; border-color: #1A1A1A; color: #1A1A1A; } [data-theme="glass-light"] .btn-plan-outline:hover { background: rgba(0,0,0,0.06); } [data-theme="glass-light"] .btn:hover, [data-theme="glass-light"] .btn-primary:hover, [data-theme="glass-light"] .btn-gold:hover, [data-theme="glass-light"] .btn-submit:hover, [data-theme="glass-light"] .btn-compare:hover, [data-theme="glass-light"] .btn-translate:hover, [data-theme="glass-light"] .btn-retrieve:hover, [data-theme="glass-light"] .btn-notify:hover, [data-theme="glass-light"] .new-chat-btn:hover, [data-theme="glass-light"] .send-btn:hover, [data-theme="glass-light"] .cta:hover, [data-theme="glass-light"] .unlock-btn-gold:hover, [data-theme="glass-light"] .btn-nav-cta:hover { background: #2A2A2A; box-shadow: 0 4px 20px rgba(0,0,0,0.12); } /* Ocean-light: vibrant teal gradient */ [data-theme="ocean-light"] .btn, [data-theme="ocean-light"] .btn-primary, [data-theme="ocean-light"] .btn-gold, [data-theme="ocean-light"] .btn-submit, [data-theme="ocean-light"] .btn-compare, [data-theme="ocean-light"] .btn-translate, [data-theme="ocean-light"] .btn-retrieve, [data-theme="ocean-light"] .btn-notify, [data-theme="ocean-light"] .new-chat-btn, [data-theme="ocean-light"] .send-btn, [data-theme="ocean-light"] .cta, [data-theme="ocean-light"] .unlock-btn-gold, [data-theme="ocean-light"] .btn-nav-cta, [data-theme="ocean-light"] .btn-plan-outline { background: linear-gradient(135deg, #0D9488, #14B8A6); color: #FFFFFF; } [data-theme="ocean-light"] .btn-plan-outline { background: transparent; border-color: #0D9488; color: #0D9488; } [data-theme="ocean-light"] .btn-plan-outline:hover { background: rgba(13,148,136,0.08); } /* Light mode: secondary & ghost button fixes for better contrast */ [data-theme$="-light"] .btn-secondary:hover { background: rgba(0,0,0,0.04); border-color: var(--border-3); } [data-theme$="-light"] .btn-ghost:hover { background: rgba(0,0,0,0.04); } [data-theme$="-light"] .btn-outline:hover { background: rgba(0,0,0,0.04); } [data-theme$="-light"] .btn-action:hover { background: rgba(0,0,0,0.04); } [data-theme$="-light"] .sidebar-close-btn:hover { background: rgba(0,0,0,0.04); border-color: var(--border-3); } [data-theme$="-light"] .pdf-toggle-btn:hover { background: rgba(0,0,0,0.04); border-color: var(--border-3); } [data-theme$="-light"] .pdf-toggle-btn.active { background: rgba(0,0,0,0.06); } [data-theme$="-light"] #login-btn:hover, [data-theme$="-light"] .nav-login-btn:hover { background: rgba(0,0,0,0.04); border-color: var(--border-3); } [data-theme$="-light"] .mobile-menu-toggle:hover { background: rgba(0,0,0,0.04); border-color: var(--border-3); } [data-theme$="-light"] .slider-btn:hover { background: rgba(0,0,0,0.04); border-color: var(--border-3); } [data-theme$="-light"] .floating-toggle:hover { background: rgba(0,0,0,0.04); border-color: var(--border-3); } [data-theme$="-light"] .theme-option.active { border-color: var(--gold); color: var(--gold); } [data-theme$="-light"] .tab-btn.active { background: rgba(255,255,255,0.9); box-shadow: 0 2px 12px rgba(0,0,0,0.08); }