/* =================================================== DARK MODE — Intelligent Insights Applied via .dark class on =================================================== */ /* ---- Transition for smooth toggle ---- */ .dark-transition, .dark-transition *, .dark-transition *::before, .dark-transition *::after { transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease !important; } /* ---- Body ---- */ .dark body { background: #0d1e2e !important; color: #cfe0f0 !important; } /* ---- Navbar ---- */ .dark nav.fixed, .dark header#topbar { background: rgba(13, 30, 46, 0.85) !important; border-bottom-color: rgba(255,255,255,0.07) !important; } /* ---- Cards / Surfaces ---- */ .dark .report-card, .dark .feature-card { background: #142438 !important; border-color: rgba(255,255,255,0.07) !important; } .dark .report-card:hover { box-shadow: 0 16px 40px rgba(0,0,0,0.3), 0 6px 16px rgba(0,0,0,0.2) !important; } /* ---- CTA primary (accent — keep, works on dark) ---- */ /* No change needed */ /* ---- Tab buttons ---- */ .dark .tab-btn { color: #8faec9 !important; border-color: rgba(255,255,255,0.1) !important; } .dark .tab-btn:hover { background: rgba(255,255,255,0.05) !important; border-color: rgba(255,255,255,0.18) !important; color: #cfe0f0 !important; } .dark .tab-btn.active { background: #2a4a6e !important; border-color: #2a4a6e !important; color: #fff !important; } /* ---- Suite tabs ---- */ .dark .suite-tab { color: #8faec9 !important; border-color: rgba(255,255,255,0.1) !important; } .dark .suite-tab:hover { background: rgba(255,255,255,0.05) !important; border-color: rgba(255,255,255,0.18) !important; color: #cfe0f0 !important; } .dark .suite-tab.active { background: #2a4a6e !important; border-color: #2a4a6e !important; color: #fff !important; } /* ---- Inputs / form elements ---- */ .dark .form-input, .dark .company-input { background: #0a1726 !important; color: #cfe0f0 !important; border-color: rgba(255,255,255,0.1) !important; } .dark .form-input::placeholder, .dark .company-input::placeholder { color: #4e6e88 !important; } .dark .form-input:hover, .dark .company-input:hover { border-color: rgba(255,255,255,0.18) !important; background: #0d1e2e !important; } .dark .form-input:focus, .dark .company-input:focus { background: #0a1726 !important; border-color: #F49120 !important; box-shadow: 0 0 0 3px rgba(244,145,32,0.12) !important; } .dark .company-input:read-only { background: #142438 !important; color: #90c0e0 !important; } /* ---- Number stepper ---- */ .dark .stepper { background: #0a1726 !important; border-color: rgba(255,255,255,0.1) !important; } .dark .stepper-btn { color: #8faec9 !important; } .dark .stepper-btn:hover { background: rgba(255,255,255,0.08) !important; color: #cfe0f0 !important; } .dark .stepper-value { color: #90c0e0 !important; } /* ---- Secondary button ---- */ .dark .btn-secondary { color: #8faec9 !important; border-color: rgba(255,255,255,0.1) !important; } .dark .btn-secondary:hover { background: rgba(255,255,255,0.05) !important; border-color: rgba(255,255,255,0.18) !important; color: #cfe0f0 !important; } /* ---- Back link ---- */ .dark .back-link { color: #6a8da8 !important; } .dark .back-link:hover { color: #90c0e0 !important; } /* ---- Logout button ---- */ .dark .logout-btn:hover { background: rgba(255,255,255,0.07) !important; } /* ---- Nav link (landing page) ---- */ .dark .nav-link { color: #8faec9 !important; } .dark .nav-link:hover { color: #cfe0f0 !important; } /* ---- White boxes → dark surface ---- */ .dark .bg-white { background-color: #142438 !important; } /* ---- Tailwind color class overrides ---- */ /* Text colors */ .dark .text-navy, .dark .text-navy\/60, .dark .text-navy\/80 { color: #90c0e0 !important; } .dark .text-neutral { color: #cfe0f0 !important; } .dark .text-neutral-light { color: #8faec9 !important; } .dark .text-neutral-muted { color: #6a8da8 !important; } /* Background colors */ .dark .bg-navy { background-color: #1a3352 !important; } .dark .bg-surface, .dark .bg-surface\/80 { background-color: #0d1e2e !important; } .dark .bg-surface\/warm { background-color: #142438 !important; } .dark .bg-surface-card { background-color: #142438 !important; } /* Navy bg with opacity */ .dark .bg-navy\/5 { background-color: rgba(255,255,255,0.03) !important; } .dark .bg-navy\/8 { background-color: rgba(255,255,255,0.04) !important; } .dark .bg-navy\/10 { background-color: rgba(255,255,255,0.05) !important; } .dark .bg-navy\/15 { background-color: rgba(255,255,255,0.07) !important; } .dark .bg-navy\/20 { background-color: rgba(255,255,255,0.09) !important; } /* Border colors */ .dark .border-navy\/5 { border-color: rgba(255,255,255,0.05) !important; } .dark .border-navy\/6 { border-color: rgba(255,255,255,0.06) !important; } .dark .border-navy\/8 { border-color: rgba(255,255,255,0.08) !important; } .dark .border-navy\/10 { border-color: rgba(255,255,255,0.10) !important; } .dark .border-navy\/12 { border-color: rgba(255,255,255,0.12) !important; } .dark .border-navy\/15 { border-color: rgba(255,255,255,0.15) !important; } .dark .border-navy\/20 { border-color: rgba(255,255,255,0.20) !important; } .dark .border-navy\/30 { border-color: rgba(255,255,255,0.25) !important; } /* Divide colors */ .dark .divide-navy\/6 > * + * { border-color: rgba(255,255,255,0.06) !important; } .dark .divide-navy\/8 > * + * { border-color: rgba(255,255,255,0.08) !important; } /* ---- Auth page (split layout left panel) ---- */ .dark .brand-panel { background-color: #0a1726 !important; } /* ---- Docs page sidebar ---- */ .dark #sidebar { background: #0a1726 !important; border-right-color: rgba(255,255,255,0.07) !important; } .dark .doc-link { color: #8faec9 !important; } .dark .doc-link:hover, .dark .doc-link.active { color: #F49120 !important; background: rgba(244,145,32,0.08) !important; } /* ---- Company page ---- */ .dark #hero-section { background: #0a1726 !important; } /* ---- Progress / status ---- */ .dark .step-item .step-icon { background: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.1) !important; } /* ---- Info cards — light mode base + dark override ---- */ .info-card { background: rgba(255,255,255,0.7); border: 1px solid rgba(25,54,89,0.06); backdrop-filter: blur(8px); } .info-card-icon-navy { background: rgba(25,54,89,0.07); } .dark .info-card { background: #142438; border-color: rgba(255,255,255,0.07); backdrop-filter: none; } .dark .info-card-icon-navy { background: rgba(255,255,255,0.06); } .dark .info-card-icon-navy svg path, .dark .info-card-icon-navy svg circle, .dark .info-card-icon-navy svg polyline { stroke: #8faec9; } /* ---- Report card icon containers with navy bg — lighten in dark ---- */ .dark .report-card .bg-navy\/6 { background: rgba(255,255,255,0.06) !important; } /* Navy-stroked SVG icons inside report cards become unreadable on dark bg. Target the icon wrapper div that uses bg-navy/6 and force its SVG paths light. */ .dark .report-card .bg-navy\/6 svg path, .dark .report-card .bg-navy\/6 svg circle, .dark .report-card .bg-navy\/6 svg rect, .dark .report-card .bg-navy\/6 svg polyline, .dark .report-card .bg-navy\/6 svg line { stroke: #8faec9 !important; } /* ---- Previous competitors panel ---- */ .dark #prev-competitors-panel { background: #0a1726 !important; border-color: rgba(255,255,255,0.08) !important; } /* ---- Dark mode toggle button ---- */ #dark-toggle { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 9px; border: 1.5px solid rgba(25,54,89,0.12); background: transparent; cursor: pointer; color: #6B7280; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease; flex-shrink: 0; } #dark-toggle:hover { background: rgba(25,54,89,0.06); border-color: rgba(25,54,89,0.2); color: #193659; transform: translateY(-1px); } #dark-toggle:focus-visible { outline: 2px solid #F49120; outline-offset: 2px; } .dark #dark-toggle { border-color: rgba(255,255,255,0.12); color: #8faec9; } .dark #dark-toggle:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.22); color: #cfe0f0; } /* Sun icon (shown in dark mode) */ #dark-toggle .icon-sun { display: none; } #dark-toggle .icon-moon { display: block; } .dark #dark-toggle .icon-sun { display: block; } .dark #dark-toggle .icon-moon { display: none; } /* ---- Language toggle ---- */ #lang-toggle { display: inline-flex; align-items: center; gap: 3px; height: 36px; padding: 0 8px; border-radius: 9px; border: 1.5px solid rgba(25,54,89,0.12); background: transparent; cursor: pointer; font-family: 'Manrope', sans-serif; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.05em; color: #6B7280; flex-shrink: 0; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s cubic-bezier(0.16,1,0.3,1); } #lang-toggle:hover { background: rgba(25,54,89,0.06); border-color: rgba(25,54,89,0.2); color: #193659; transform: translateY(-1px); } #lang-toggle:active { transform: translateY(0); } #lang-toggle:focus-visible { outline: 2px solid #F49120; outline-offset: 2px; } .lang-sep { opacity: 0.25; font-weight: 400; font-size: 0.6rem; } .lang-en, .lang-es { opacity: 0.4; transition: opacity 0.2s ease, color 0.2s ease; } .lang-active { opacity: 1; color: #193659; } .dark #lang-toggle { border-color: rgba(255,255,255,0.12); color: #8faec9; } .dark #lang-toggle:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.22); color: #cfe0f0; } .dark .lang-active { color: #cfe0f0; } /* ---- Subnav (admin pages) ---- */ .subnav { animation: subnavIn 0.35s cubic-bezier(0.16,1,0.3,1) forwards; } @keyframes subnavIn { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } } .subnav-tab { display:inline-flex; align-items:center; gap:6px; padding:5px 14px; border-radius:8px; font-family:'Manrope',sans-serif; font-size:13px; font-weight:600; color:#6B7280; text-decoration:none; transition:background 0.18s,color 0.18s; } .subnav-tab:hover { background:rgba(25,54,89,0.06); color:#193659; } .subnav-tab.active { background:rgba(25,54,89,0.08); color:#193659; font-weight:700; } .dark .subnav { background:rgba(13,30,46,0.7) !important; } .dark .subnav-tab { color:#8faec9; } .dark .subnav-tab:hover { background:rgba(255,255,255,0.06) !important; color:#cfe0f0; } .dark .subnav-tab.active { background:rgba(255,255,255,0.1) !important; color:#cfe0f0; font-weight:700; }