/* NaveNexus custom theme - dark navy + neon glassmorphism */ /* Tailwind's dark:bg-* utilities read --tw-bg-opacity for their alpha channel. Forcing it below 1 makes every panel (sidebar, list, chat area) semi-transparent at once, so the body background image shows through everywhere, without having to target each component's class name individually. */ .dark * { --tw-bg-opacity: 0.55 !important; } .dark img, .dark svg, .dark canvas, .dark video { --tw-bg-opacity: 1 !important; } .dark { /* Neutral scale (backgrounds / text) -> deep space navy */ --slate-1: 7 9 20; --slate-2: 11 14 28; --slate-3: 16 20 38; --slate-4: 21 26 48; --slate-5: 27 33 58; --slate-6: 34 42 70; --slate-7: 44 54 86; --slate-8: 62 76 112; --slate-9: 96 112 150; --slate-10: 118 136 172; --slate-11: 168 184 214; --slate-12: 228 236 250; /* Primary accent (blue) -> neon cyan/sky */ --blue-1: 6 12 24; --blue-2: 8 18 36; --blue-3: 10 28 56; --blue-4: 8 38 78; --blue-5: 10 52 98; --blue-6: 14 70 118; --blue-7: 18 92 140; --blue-8: 24 122 168; --blue-9: 56 189 248; --blue-10: 34 211 238; --blue-11: 125 211 252; --blue-12: 224 242 254; /* Secondary accent (iris) -> neon violet */ --iris-1: 12 10 26; --iris-2: 17 14 38; --iris-3: 26 20 62; --iris-4: 36 26 92; --iris-5: 47 34 116; --iris-6: 60 44 140; --iris-7: 76 56 166; --iris-8: 96 72 196; --iris-9: 139 92 246; --iris-10: 167 139 250; --iris-11: 196 181 253; --iris-12: 237 233 254; /* violet mirrors iris for components that read violet-* */ --violet-9: 139 92 246; --violet-10: 167 139 250; --violet-11: 196 181 253; --violet-12: 237 233 254; --background-color: 6 8 18; --surface-1: 13 16 32; --surface-2: 17 21 40; --surface-active: 22 27 50; --card-color: 16 20 38; --solid-1: 22 27 50; --solid-2: 27 33 58; --solid-3: 34 42 70; --solid-active: 44 54 86; --solid-blue: 24 122 168; --solid-blue-2: 14 70 118; --solid-iris: 76 56 166; --solid-purple: 76 56 166; --border-container: 34 42 70; --border-strong: 62 76 112; --border-weak: 24 30 52; --border-blue-strong: 56 189 248; --button-color: 16 20 38; --label-background: 21 26 48; --background-input-box: 255, 255, 255, .04; --overlay: 4, 6, 14, .6; } /* Glowing gradient page backdrop, with the circuit/lock artwork underneath. Unscoped from .dark on purpose: body/#app must show it regardless of whether the dark class ends up on or itself. */ body, #app { background: linear-gradient(180deg, rgba(6,8,18,0.80), rgba(6,8,18,0.88)), radial-gradient(ellipse 80% 60% at 15% 0%, rgba(56,189,248,0.10), transparent 60%), radial-gradient(ellipse 70% 50% at 100% 20%, rgba(139,92,246,0.12), transparent 55%), url("/custom-bg.png") center center / cover no-repeat fixed, rgb(6 8 18) !important; } /* Glass-card look for panels, sidebars, conversation list, modals */ .dark aside, .dark .conversations-list-wrap, .dark .conversation-sidebar-wrap, .dark .sidebar, .dark [class*="sidebar"], .dark .modal-container, .dark .card, .dark [class*="woot-modal"] { background: linear-gradient(180deg, rgba(19,24,46,0.75), rgba(13,16,32,0.75)) !important; backdrop-filter: blur(14px); border-color: rgba(99,102,241,0.18) !important; } /* Neon glow on primary buttons / active nav */ .dark button.primary, .dark .button.primary, .dark [class*="bg-woot"], .dark a.router-link-active, .dark a[aria-current="page"] { background: linear-gradient(135deg, #38bdf8, #8b5cf6) !important; border: none !important; box-shadow: 0 0 16px rgba(56,189,248,0.45), 0 0 28px rgba(139,92,246,0.25); color: #f5f8ff !important; } /* Subtle glow border on cards / stat tiles */ .dark .card, .dark [class*="stats-card"], .dark [class*="metric"], .dark [class*="overview"] .card { box-shadow: 0 0 0 1px rgba(56,189,248,0.12), 0 8px 24px rgba(0,0,0,0.35); border-radius: 14px; } /* Scrollbars */ .dark ::-webkit-scrollbar { width: 10px; height: 10px; } .dark ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #38bdf8, #8b5cf6); border-radius: 8px; } .dark ::-webkit-scrollbar-track { background: transparent; } /* Links / interactive accents */ .dark a, .dark .text-woot-500 { color: #38bdf8 !important; } /* ===== Login page split layout ===== */ body.nvx-login-active { background: linear-gradient(90deg, rgba(6,8,18,0.88) 0%, rgba(6,8,18,0.75) 46%, rgba(6,8,18,0.55) 100%), url("/custom-bg.png") center center / cover no-repeat fixed, rgb(6 8 18) !important; } #nvx-login-panel { background: linear-gradient(90deg, rgba(6,8,18,0.55) 0%, rgba(6,8,18,0.25) 100%); } body.nvx-login-active #app { margin-left: 46vw; min-height: 100vh; display: flex; align-items: center; justify-content: center; position: relative; z-index: 5; } body.nvx-login-active #app form, body.nvx-login-active .login-box, body.nvx-login-active [class*="login"] > div { background: linear-gradient(180deg, rgba(19,24,46,0.85), rgba(13,16,32,0.85)) !important; backdrop-filter: blur(16px); border: 1px solid rgba(99,102,241,0.25) !important; border-radius: 20px !important; box-shadow: 0 0 40px rgba(56,189,248,0.12), 0 20px 60px rgba(0,0,0,0.5); padding: 2.5rem !important; } #nvx-login-panel { position: fixed; left: 0; top: 0; width: 46vw; height: 100vh; padding: 5vh 4vw; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; z-index: 1; border-right: 1px solid rgba(99,102,241,0.15); font-family: inherit; } .nvx-brand-word { font-size: 2rem; font-weight: 800; color: #fff; letter-spacing: -0.5px; } .nvx-brand-accent { background: linear-gradient(90deg, #38bdf8, #8b5cf6); -webkit-background-clip: text; background-clip: text; color: transparent; } .nvx-login-headline { font-size: 2.6rem; line-height: 1.15; font-weight: 800; color: #eef2ff; margin: 2rem 0 0.75rem; } .nvx-login-sub { color: #a8b8d4; font-size: 1.05rem; margin-bottom: 2.5rem; } .nvx-feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 480px; } .nvx-feature-card { display: flex; gap: 10px; align-items: flex-start; background: rgba(255,255,255,0.03); border: 1px solid rgba(99,102,241,0.15); border-radius: 14px; padding: 14px; } .nvx-feature-icon { font-size: 1.4rem; line-height: 1; } .nvx-feature-title { color: #eef2ff; font-weight: 700; font-size: 0.92rem; } .nvx-feature-desc { color: #8b9ac2; font-size: 0.8rem; margin-top: 2px; } @media (max-width: 900px) { #nvx-login-panel { display: none; } body.nvx-login-active #app { margin-left: 0; } }