/* —————————————————————————————————————————— Veyon Dark Mode — .dark-mode on Bloomberg Terminal aesthetic: institutional, premium, not gaming. Same brand, dark palette. —————————————————————————————————————————— */ /* Dark palette overrides */ html.dark-mode { --bg: #12121f; --bg-secondary: #1a1a2e; --bg-card: #1e1e30; --bg-card-hover: #252538; --border: rgba(129, 140, 248, 0.10); --border-hover: rgba(129, 140, 248, 0.25); --text-primary: #f0f0fc; --text-secondary: #9ba3c0; --text-muted: #5a6080; --accent: #818cf8; --accent-dim: rgba(129, 140, 248, 0.12); --accent-glow: rgba(129, 140, 248, 0.06); --violet: #a78bfa; --green: #34d399; --green-dim: rgba(52, 211, 153, 0.10); /* extended palette (about/regulations) */ --amber: #fbbf24; --amber-dim: rgba(251, 191, 36, 0.08); --blue: #93c5fd; --blue-dim: rgba(147, 197, 253, 0.08); } /* Nav — frosted glass dark variant */ html.dark-mode nav { background: rgba(18, 18, 31, 0.92); border-bottom-color: rgba(129, 140, 248, 0.10); box-shadow: 0 1px 20px rgba(0, 0, 0, 0.4); } /* Body background */ html.dark-mode body { background: var(--bg); color: var(--text-primary); } /* Cards — dark bg + subtle border, lighter shadow */ html.dark-mode .card, html.dark-mode .feature-card, html.dark-mode .pricing-card, html.dark-mode .tier-card, html.dark-mode .stat-card, html.dark-mode .regulation-card, html.dark-mode .section-card, html.dark-mode .overview-card, html.dark-mode .team-card, html.dark-mode .blog-card, html.dark-mode .faq-list, html.dark-mode .step-card, html.dark-mode .evidence-block, html.dark-mode .platform-grid-item, html.dark-mode [class*="-card"], html.dark-mode [class*="-block"] { background: var(--bg-card); border-color: var(--border); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(129, 140, 248, 0.06); } /* Sections with bg-secondary */ html.dark-mode section, html.dark-mode .section-alt, html.dark-mode .stats-bar, html.dark-mode .testimonials-section, html.dark-mode .cta-section { background: transparent; } /* Stat/info bars */ html.dark-mode .stats-bar { background: var(--bg-secondary); border-color: var(--border); } /* SVG icon color adjustments — ensure indigo icons legible on dark */ html.dark-mode svg[stroke="#6366f1"], html.dark-mode svg[fill="#6366f1"] { filter: brightness(1.4); } /* Inline SVG path color for dark */ html.dark-mode .icon-indigo { color: var(--accent); filter: brightness(1.3); } /* Input / form elements */ html.dark-mode input, html.dark-mode textarea, html.dark-mode select { background: var(--bg-card); border-color: var(--border); color: var(--text-primary); } html.dark-mode input::placeholder, html.dark-mode textarea::placeholder { color: var(--text-muted); } html.dark-mode input:focus, html.dark-mode textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.15); } /* Buttons — primary (indigo) stays, secondary needs contrast check */ html.dark-mode .btn-secondary, html.dark-mode .nav-cta { background: rgba(129, 140, 248, 0.12); border-color: rgba(129, 140, 248, 0.25); color: var(--accent); } html.dark-mode .btn-secondary:hover, html.dark-mode .nav-cta:hover { background: rgba(129, 140, 248, 0.2); border-color: rgba(129, 140, 248, 0.4); } /* Nav login links — dark mode */ html.dark-mode .nav-login { color: #9ba3c0; } html.dark-mode .nav-login:hover { color: #f0f0fc; } html.dark-mode .nav-mobile-login { color: var(--accent); border-color: rgba(129, 140, 248, 0.25); } html.dark-mode .nav-mobile-login:hover { background: rgba(129, 140, 248, 0.12); border-color: rgba(129, 140, 248, 0.4); } /* Primary buttons stay indigo — fine on dark */ html.dark-mode .btn-primary, html.dark-mode .cta-btn, html.dark-mode .btn-cta { background: var(--accent); color: #ffffff; } /* FAQ */ html.dark-mode .faq-question:hover { background: var(--bg-card-hover); } /* Mobile nav overlay */ html.dark-mode .nav-mobile { background: rgba(18, 18, 31, 0.98); } /* Gradient text — keep indigo gradient visible on dark */ html.dark-mode .gradient-text, html.dark-mode [class*="gradient"] { background: linear-gradient(135deg, #818cf8 0%, #a78bfa 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Hero background glow */ html.dark-mode .hero { background: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(99, 102, 241, 0.12) 0%, transparent 70%); } /* Dividers / borders */ html.dark-mode hr, html.dark-mode .divider { border-color: var(--border); } /* Trust badge / pill chips */ html.dark-mode .trust-pill, html.dark-mode .badge, html.dark-mode .chip { background: var(--bg-card); border-color: var(--border); color: var(--text-secondary); } /* Tables */ html.dark-mode table { border-color: var(--border); } html.dark-mode th { background: var(--bg-secondary); color: var(--text-secondary); } html.dark-mode td { border-color: var(--border); color: var(--text-primary); } html.dark-mode tr:nth-child(even) td { background: rgba(255,255,255,0.02); } /* Pricing comparison table checkmarks */ html.dark-mode .check-yes { color: var(--green); } /* Legal / policy page prose */ html.dark-mode .policy-content, html.dark-mode .legal-content, html.dark-mode article { color: var(--text-primary); } html.dark-mode .policy-content h2, html.dark-mode .legal-content h2, html.dark-mode article h2 { color: var(--text-primary); border-bottom-color: var(--border); } html.dark-mode .policy-content p, html.dark-mode .legal-content p, html.dark-mode article p { color: var(--text-secondary); } /* —————————————————————————————————————————— Dark Mode Toggle Button Positioned in nav after .nav-links —————————————————————————————————————————— */ .theme-toggle { display: flex; align-items: center; gap: 0.4rem; cursor: pointer; background: none; border: none; padding: 0; margin-left: 0.5rem; } .theme-toggle-track { position: relative; width: 40px; height: 22px; background: rgba(99, 102, 241, 0.15); border: 1px solid rgba(99, 102, 241, 0.2); border-radius: 11px; transition: background 0.25s ease, border-color 0.25s ease; } html.dark-mode .theme-toggle-track { background: rgba(129, 140, 248, 0.25); border-color: rgba(129, 140, 248, 0.35); } .theme-toggle-thumb { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: #6366f1; border-radius: 50%; transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.25s ease; display: flex; align-items: center; justify-content: center; font-size: 9px; line-height: 1; } html.dark-mode .theme-toggle-thumb { transform: translateX(18px); background: #818cf8; } .theme-toggle-icon { font-size: 0.75rem; color: var(--text-muted); transition: color 0.2s ease; line-height: 1; user-select: none; } html.dark-mode .theme-toggle-icon { color: var(--accent); } /* Mobile nav menu — dark overlay variant */ html.dark-mode .nav-mobile-menu { background: rgba(18, 18, 31, 0.97); border-bottom-color: rgba(129, 140, 248, 0.10); } html.dark-mode .nav-mobile-link { color: var(--text-secondary); border-bottom-color: var(--border); } html.dark-mode .nav-mobile-link:hover { color: var(--text-primary); } html.dark-mode .nav-hamburger span { background: var(--text-secondary); } /* Hamburger bars color on dark */ html.dark-mode .nav-hamburger span { background: var(--text-secondary); } /* Sticky bottom CTA dark mode */ html.dark-mode .sticky-mobile-cta { background: rgba(18, 18, 31, 0.97); border-top-color: var(--border); } /* Footer dark mode */ html.dark-mode footer, html.dark-mode .footer { background: var(--bg-secondary); border-top-color: var(--border); } html.dark-mode .footer-link, html.dark-mode .footer-text { color: var(--text-muted); } /* Smooth transition for theme switching */ html { transition: color 0.2s ease; } body, nav, .nav-mobile-menu, .card, .feature-card, .pricing-card, .tier-card, [class*="-card"], [class*="-block"], input, textarea, select { transition: background-color 0.25s ease, border-color 0.25s ease, color 0.2s ease, box-shadow 0.25s ease; }