/* ========================================================================== ATRUX — Dark Mode Activates when has the `dark` class. ========================================================================== */ html.dark { color-scheme: dark; --atrux-bg: #0a0e1a; --atrux-bg-elev: #131826; --atrux-bg-card: #181d2b; --atrux-bg-soft: #1f2433; --atrux-bg-input: #131826; --atrux-border: #2a3142; --atrux-border-soft: rgba(255, 255, 255, 0.08); --atrux-text: #f1f5f9; --atrux-text-soft: #cbd5e1; --atrux-text-muted: #94a3b8; --atrux-brand: #0066FF; --atrux-brand-soft: rgba(0, 102, 255, 0.18); } /* Smooth color transitions when toggling */ html, body, nav, footer, section, main, header, aside, article, div, button, input, textarea, a, p, span, h1, h2, h3, h4, h5, li, ul, form, label, img { transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease; } /* -------------------------------------------------------------------------- Base body / large surfaces -------------------------------------------------------------------------- */ html.dark body { background-color: var(--atrux-bg) !important; color: var(--atrux-text); } /* body bg */ html.dark .bg-\[\#f7f8fc\] { background-color: var(--atrux-bg) !important; } /* chip / pill / soft panels (#F7F8FC uppercase variant used as accents) Slightly more elevated so chips remain visible when nested inside cards. */ html.dark .bg-\[\#F7F8FC\] { background-color: var(--atrux-bg-soft) !important; } /* navbar with transparency */ html.dark .bg-\[\#f7f8fc\]\/80 { background-color: rgba(10, 14, 26, 0.78) !important; } /* mobile fullscreen menu */ html.dark .bg-white\/95 { background-color: rgba(10, 14, 26, 0.96) !important; } /* -------------------------------------------------------------------------- Cards / panels (white) -------------------------------------------------------------------------- */ html.dark .bg-white, html.dark .bg-\[\#FFFFFF\] { background-color: var(--atrux-bg-card) !important; } html.dark .hover\:bg-white:hover { background-color: var(--atrux-bg-soft) !important; } /* Surfaces tinted with brand blue */ html.dark .bg-\[\#0066FF\]\/10 { background-color: rgba(0, 102, 255, 0.18) !important; } /* -------------------------------------------------------------------------- Misc slate / gray surfaces -------------------------------------------------------------------------- */ html.dark .bg-slate-100 { background-color: #232a3a !important; } html.dark .bg-slate-50 { background-color: var(--atrux-bg-elev) !important; } html.dark .bg-gray-50 { background-color: var(--atrux-bg-elev) !important; } /* hover backgrounds on slate */ html.dark .hover\:bg-slate-100:hover { background-color: #232a3a !important; } html.dark .hover\:bg-red-50:hover { background-color: rgba(239, 68, 68, 0.18) !important; } /* -------------------------------------------------------------------------- Text colors -------------------------------------------------------------------------- */ html.dark .text-\[\#1F2937\], html.dark .text-slate-800, html.dark .text-slate-900, html.dark .text-slate-700 { color: var(--atrux-text) !important; } html.dark .text-\[\#4B5563\] { color: var(--atrux-text-soft) !important; } html.dark .text-\[\#9CA3AF\] { color: var(--atrux-text-muted) !important; } html.dark .text-slate-500 { color: var(--atrux-text-muted) !important; } /* hover transitions to dark text -> map to light */ html.dark .hover\:text-\[\#1F2937\]:hover, html.dark .hover\:text-slate-800:hover { color: var(--atrux-text) !important; } /* placeholders */ html.dark .placeholder-\[\#9CA3AF\]::placeholder { color: #64748b !important; } html.dark input::placeholder, html.dark textarea::placeholder { color: #64748b !important; } /* -------------------------------------------------------------------------- Borders -------------------------------------------------------------------------- */ html.dark .border-slate-100, html.dark .border-slate-200, html.dark .border-gray-100, html.dark .border-gray-200 { border-color: var(--atrux-border) !important; } /* dividers / hr */ html.dark hr { border-color: var(--atrux-border) !important; } /* -------------------------------------------------------------------------- Form inputs (contact section) -------------------------------------------------------------------------- */ html.dark input[type="text"], html.dark input[type="email"], html.dark input[type="tel"], html.dark input[type="password"], html.dark textarea { color: var(--atrux-text) !important; background-color: transparent !important; } /* The input rounded wrappers use bg-white -> already covered above */ /* -------------------------------------------------------------------------- FAQ collapsed state text (handled also in JS) -------------------------------------------------------------------------- */ html.dark .faq-item:not(.bg-\[\#0066FF\]) .text-\[\#9CA3AF\] { color: var(--atrux-text-muted) !important; } /* -------------------------------------------------------------------------- "Module" deck — white cards in stack The blue ones stay blue; the white ones become dark cards. -------------------------------------------------------------------------- */ html.dark .panel-item.bg-white { background-color: var(--atrux-bg-card) !important; } /* -------------------------------------------------------------------------- Benefit tab inactive (white pills) -------------------------------------------------------------------------- */ html.dark .inactive-tab { background-color: var(--atrux-bg-card) !important; } html.dark .inactive-tab:hover { background-color: var(--atrux-bg-soft) !important; color: var(--atrux-brand) !important; } /* -------------------------------------------------------------------------- Carousel benefit cards — colors are forced by JS so we expose them via vars -------------------------------------------------------------------------- */ html.dark .benefit-card { box-shadow: 0 30px 60px -12px rgba(0,0,0,0.5) !important; } /* fade-to-bottom on inactive card body */ html.dark .benefit-card .fw { background-image: linear-gradient(to top, #181d2b, transparent) !important; } /* -------------------------------------------------------------------------- Cookie popup -------------------------------------------------------------------------- */ html.dark #cookie-popup { box-shadow: 0 -10px 40px rgba(0,0,0,0.5); } /* -------------------------------------------------------------------------- Logo: the black logo.png is inverted to white in dark mode -------------------------------------------------------------------------- */ html.dark img[src*="logo.png"]:not([src*="logoalbastru"]) { filter: brightness(0) invert(1); transition: filter 0.4s ease; } /* Footer logo on legal pages has its own grayscale + opacity styling */ html.dark img[src*="logo.png"]:not([src*="logoalbastru"]).grayscale { filter: brightness(0) invert(1) opacity(0.65); } /* -------------------------------------------------------------------------- Footer background-logo (logoalbastru.png): keep blue but dim in dark mode -------------------------------------------------------------------------- */ html.dark footer img[alt="atrux background logo"] { opacity: 0.35 !important; filter: brightness(1.2); } /* -------------------------------------------------------------------------- Legal pages footer specific -------------------------------------------------------------------------- */ html.dark footer.bg-white { background-color: var(--atrux-bg) !important; } /* -------------------------------------------------------------------------- Modal (Users carousel modal) -------------------------------------------------------------------------- */ html.dark #modal-content { border-color: var(--atrux-brand) !important; } /* -------------------------------------------------------------------------- Scrollbar polish in dark mode (WebKit) -------------------------------------------------------------------------- */ html.dark ::-webkit-scrollbar { width: 12px; height: 12px; } html.dark ::-webkit-scrollbar-track { background: var(--atrux-bg); } html.dark ::-webkit-scrollbar-thumb { background: #2a3142; border-radius: 100px; border: 3px solid var(--atrux-bg); } html.dark ::-webkit-scrollbar-thumb:hover { background: #3b465e; } /* ========================================================================== Theme toggle switch (footer) ========================================================================== */ .atrux-theme-toggle { position: relative; display: inline-flex; align-items: center; gap: 12px; background: transparent; border: none; padding: 0; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; font-family: 'Poppins', sans-serif; } .atrux-theme-toggle__label { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #9CA3AF; transition: color 0.3s ease; } html.dark .atrux-theme-toggle__label { color: var(--atrux-text-muted); } .atrux-theme-toggle__track { position: relative; width: 60px; height: 30px; border-radius: 100px; background: linear-gradient(135deg, #FFE9A7 0%, #FCC062 100%); box-shadow: inset 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.04); transition: background 0.5s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.5s ease; flex-shrink: 0; } html.dark .atrux-theme-toggle__track { background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%); box-shadow: inset 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.2); } .atrux-theme-toggle__thumb { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 2px 6px rgba(0,0,0,0.18), 0 1px 2px rgba(0,0,0,0.08); display: flex; align-items: center; justify-content: center; overflow: hidden; transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.45s ease, box-shadow 0.45s ease; } html.dark .atrux-theme-toggle__thumb { transform: translateX(30px); background: #F1F5F9; box-shadow: 0 2px 8px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.04); } .atrux-theme-toggle__icon { position: absolute; width: 14px; height: 14px; transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); } .atrux-theme-toggle__icon--sun { color: #F59E0B; opacity: 1; transform: rotate(0deg) scale(1); } .atrux-theme-toggle__icon--moon { color: #475569; opacity: 0; transform: rotate(-90deg) scale(0.6); } html.dark .atrux-theme-toggle__icon--sun { opacity: 0; transform: rotate(90deg) scale(0.6); } html.dark .atrux-theme-toggle__icon--moon { opacity: 1; transform: rotate(0deg) scale(1); } .atrux-theme-toggle:focus-visible .atrux-theme-toggle__track { outline: 2px solid var(--atrux-brand, #0066FF); outline-offset: 3px; } .atrux-theme-toggle:hover .atrux-theme-toggle__thumb { box-shadow: 0 4px 12px rgba(0,0,0,0.22), 0 1px 3px rgba(0,0,0,0.10); } .atrux-theme-toggle:active .atrux-theme-toggle__thumb { width: 28px; } /* Footer wrapper that hosts the toggle */ .atrux-theme-toggle-wrap { display: flex; align-items: center; gap: 16px; }