/* ===================================================== Dalvox Capital — Light Mode Theme Activated by class "light" on Default: dark (no class). Toggle via DalvoxTheme.toggle() ===================================================== */ /* ── Base ── */ html.light body { background: #F8F7F4; color: #3C3B3F; } /* ── Custom ink tokens ── */ html.light .bg-ink-950 { background-color: #FAFAF8 !important; } html.light .bg-ink-900 { background-color: #F1F0EC !important; } html.light .bg-ink-850 { background-color: #E9E7E2 !important; } html.light .bg-ink-800 { background-color: #E0DDD7 !important; } html.light .bg-ink-700 { background-color: #D4D1CA !important; } html.light .bg-ink-600 { background-color: #C8C5BE !important; } html.light .from-ink-950 { --tw-gradient-from: #FAFAF8 var(--tw-gradient-from-position) !important; } html.light .from-ink-900 { --tw-gradient-from: #F1F0EC var(--tw-gradient-from-position) !important; } html.light .from-ink-850 { --tw-gradient-from: #E9E7E2 var(--tw-gradient-from-position) !important; } html.light .to-ink-950 { --tw-gradient-to: #FAFAF8 var(--tw-gradient-to-position) !important; } html.light .to-ink-900 { --tw-gradient-to: #F1F0EC var(--tw-gradient-to-position) !important; } html.light .to-ink-850 { --tw-gradient-to: #E9E7E2 var(--tw-gradient-to-position) !important; } /* ── Chalk text tokens ── */ html.light .text-chalk { color: #3C3B3F !important; } html.light .text-chalk-mute { color: #5E5D66 !important; } html.light .text-chalk-dim { color: #7A7A82 !important; } /* ── Standard Tailwind black ── */ html.light .bg-black { background-color: #F8F7F4 !important; } html.light .bg-black\/50 { background-color: rgba(248,247,244,.80) !important; } html.light .bg-black\/60 { background-color: rgba(240,238,234,.75) !important; } html.light .bg-black\/70 { background-color: rgba(248,247,244,.90) !important; } html.light .bg-black\/95 { background-color: rgba(248,247,244,.97) !important; } html.light .to-black { --tw-gradient-to: #F8F7F4 var(--tw-gradient-to-position) !important; } /* ── Standard Tailwind white text ── */ html.light .text-white { color: #3C3B3F !important; } html.light .text-white\/80 { color: rgba(60,59,63,.80) !important; } html.light .text-white\/90 { color: rgba(60,59,63,.90) !important; } html.light .hover\:text-white:hover { color: #3C3B3F !important; } /* ── White-opacity surfaces → dark-opacity ── */ html.light .bg-white\/\[0\.02\] { background-color: rgba(0,0,0,.025) !important; } html.light .bg-white\/\[0\.025\] { background-color: rgba(0,0,0,.030) !important; } html.light .bg-white\/\[0\.03\] { background-color: rgba(0,0,0,.040) !important; } html.light .bg-white\/\[0\.04\] { background-color: rgba(0,0,0,.050) !important; } html.light .bg-white\/\[0\.045\] { background-color: rgba(0,0,0,.060) !important; } html.light .bg-white\/\[0\.05\] { background-color: rgba(0,0,0,.060) !important; } html.light .hover\:bg-white\/\[0\.04\]:hover { background-color: rgba(0,0,0,.05) !important; } html.light .from-white\/\[0\.03\] { --tw-gradient-from: rgba(0,0,0,.04) var(--tw-gradient-from-position) !important; } /* ── White-opacity borders → dark-opacity ── */ html.light .border-white\/\[0\.06\] { border-color: rgba(0,0,0,.08) !important; } html.light .border-white\/\[0\.07\] { border-color: rgba(0,0,0,.09) !important; } html.light .border-white\/\[0\.08\] { border-color: rgba(0,0,0,.10) !important; } html.light .border-white\/\[0\.09\] { border-color: rgba(0,0,0,.12) !important; } html.light .border-white\/15 { border-color: rgba(0,0,0,.15) !important; } html.light .border-white\/10 { border-color: rgba(0,0,0,.10) !important; } html.light .hover\:border-white\/20:hover { border-color: rgba(0,0,0,.20) !important; } /* ── Grid backdrop — hidden in light mode ── */ html.light .grid-bg { background-image: none !important; } /* ── Gold: keep original for large/bold text; darken only small mono labels ── */ /* eyebrows, tier names, tags — small uppercase monospace */ html.light .font-mono.text-gold { color: #D4AF37 !important; font-weight: 700 !important; } html.light .font-mono.text-gold\/70 { color: rgba(212,175,55,.70) !important; font-weight: 700 !important; } /* Gold borders — use darkened gold */ html.light .border-gold\/15 { border-color: rgba(0,0,0,.08) !important; } html.light .border-gold\/25 { border-color: rgba(212,175,55,.25) !important; } html.light .border-gold\/30 { border-color: rgba(212,175,55,.30) !important; } html.light .border-gold\/50 { border-color: rgba(212,175,55,.55) !important; } html.light .hover\:border-gold\/25:hover { border-color: rgba(212,175,55,.30) !important; } html.light .hover\:border-gold\/30:hover { border-color: rgba(212,175,55,.35) !important; } html.light .hover\:border-gold\/60:hover { border-color: rgba(212,175,55,.60) !important; } /* Gold bg subtle tints — darkened base */ html.light .bg-gold\/\[0\.05\] { background-color: rgba(212,175,55,.05) !important; } html.light .bg-gold\/\[0\.06\] { background-color: rgba(212,175,55,.06) !important; } html.light .bg-gold\/\[0\.07\] { background-color: rgba(0,0,0,.04) !important; } html.light .bg-gold\/\[0\.08\] { background-color: rgba(212,175,55,.08) !important; } html.light .bg-gold\/10 { background-color: rgba(212,175,55,.10) !important; } html.light .bg-gold\/15 { background-color: rgba(212,175,55,.15) !important; } html.light .hover\:bg-gold\/15:hover { background-color: rgba(212,175,55,.15) !important; } /* Hero gold glow blob — hide on light (too harsh on white) */ html.light section#home .blur-\[140px\] { opacity: 0 !important; } html.light .bg-gold\/\[0\.06\].blur-3xl { opacity: .35 !important; } html.light .bg-gold\/\[0\.05\].blur-\[120px\] { opacity: .25 !important; } /* ── Glows & shadows ── */ html.light .gold-glow { box-shadow: 0 0 0 1px rgba(212,175,55,.18), 0 20px 60px -15px rgba(212,175,55,.10) !important; } /* Featured "Most Popular" card — extra contrast */ html.light .border-gold\/50 { box-shadow: 0 0 0 1.5px rgba(212,175,55,.40), 0 12px 36px -8px rgba(212,175,55,.15) !important; } html.light .gold-text-glow { text-shadow: none !important; } html.light .hairline { border-color: rgba(0,0,0,.08) !important; } /* ── Chart SVG lines — make visible on light ── */ html.light svg line:not(.dalvox-cross) { stroke: rgba(0,0,0,.12) !important; } html.light svg .dalvox-cross { stroke: rgba(212,175,55,.55) !important; } html.light svg .dalvox-tip rect { fill: #FAFAF8 !important; stroke: rgba(212,175,55,.60) !important; } html.light svg .dalvox-tip text { fill: #3C3B3F !important; } html.light svg .dalvox-dot { stroke: #F8F7F4 !important; } /* ── Forms ── */ html.light .fi { background: rgba(0,0,0,.03) !important; border-color: rgba(0,0,0,.12) !important; color: #111010 !important; } html.light .fi:focus { border-color: rgba(212,175,55,.55) !important; } html.light .fi::placeholder { color: #9CA3AF !important; } html.light .fl { color: #71717A !important; } html.light select.fi option { background: #EAE8E3 !important; color: #111010 !important; } /* ── Custom Select ── */ html.light .cs-trigger { background: rgba(0,0,0,.03) !important; border-color: rgba(0,0,0,.12) !important; color: #111010 !important; } html.light .cs-trigger:hover { border-color: rgba(0,0,0,.22) !important; } html.light .cs-trigger.cs-open { border-color: rgba(212,175,55,.55) !important; } html.light .cs-dropdown { background: #EAE8E3 !important; border-color: rgba(212,175,55,.22) !important; box-shadow: 0 12px 40px rgba(0,0,0,.10) !important; } html.light .cs-option { color: #4A4A52 !important; } html.light .cs-option:hover { background: rgba(212,175,55,.10) !important; color: #111010 !important; } html.light .cs-option.cs-selected { color: #D4AF37 !important; background: rgba(212,175,55,.08) !important; } html.light .cs-search-wrap { background: #EAE8E3 !important; border-color: rgba(0,0,0,.06) !important; } html.light .cs-search { background: rgba(0,0,0,.05) !important; border-color: rgba(0,0,0,.12) !important; color: #111010 !important; } html.light .cs-search::placeholder { color: #9CA3AF !important; } html.light .cs-chevron { color: #71717A !important; } html.light .cs-no-results { color: #71717A !important; } /* ── Scrollbars ── */ html.light .thin-scroll::-webkit-scrollbar-track { background: rgba(0,0,0,.04) !important; } html.light .thin-scroll::-webkit-scrollbar-thumb { background: rgba(212,175,55,.25) !important; } /* ── Legal prose ── */ html.light .prose-legal h2 { color: #111010 !important; border-color: rgba(0,0,0,.07) !important; } html.light .prose-legal p, html.light .prose-legal ul li { color: #4A4A52 !important; } html.light .prose-legal strong { color: #111010 !important; } /* ── Footer ── */ html.light .footer-nav-item { color: #4A4A52 !important; } html.light .footer-nav-item:hover { color: #D4AF37 !important; background: rgba(212,175,55,.07) !important; } /* Light-mode mobile footer — bolder icons, "Navigation" label and side details for legibility on white */ html.light footer#contact .sm\:hidden .footer-nav-item { font-weight: 700 !important; } html.light footer#contact .sm\:hidden .footer-nav-item i, html.light footer#contact .sm\:hidden .footer-nav-item svg { stroke-width: 2.5 !important; } html.light footer#contact .sm\:hidden span.font-mono { font-weight: 700 !important; color: #B8860B !important; } html.light footer#contact .sm\:hidden a.font-mono { font-weight: 700 !important; color: #4A4A52 !important; } /* ── Nav mobile button ── */ html.light #navToggle { color: #3C3B3F !important; } html.light button.lg\:hidden { color: #3C3B3F !important; } /* ── Logo: darken bright highlights for legibility on white ── */ html.light img[alt="Dalvox Capital"] { filter: none; } /* ── Blur blobs — hide across all pages in light mode ── */ html.light .blur-\[140px\] { opacity: 0 !important; } /* ── Table opacity variant (comparison table wrapper) ── */ html.light .bg-ink-850\/60 { background-color: rgba(233,231,226,.60) !important; } /* ── bg-white/10 (vertical dividers in hero stats) ── */ html.light .bg-white\/10 { background-color: rgba(0,0,0,.10) !important; } /* ── bg-white/[0.06] (progress-bar tracks in tour) — show unfilled track on white ── */ html.light .bg-white\/\[0\.06\] { background-color: rgba(0,0,0,.10) !important; } /* ── divide-y separator lines — invisible on white without this ── */ html.light .divide-white\/\[0\.07\] > :not([hidden]) ~ :not([hidden]) { border-color: rgba(0,0,0,.10) !important; } /* ── Hero "scroll down" note (text-gold/55) — too faint on white ── */ html.light .text-gold\/55 { color: #B8860B !important; } /* ── Bridge divider lines ── */ html.light .to-white\/\[0\.08\] { --tw-gradient-to: rgba(0,0,0,.09) var(--tw-gradient-to-position) !important; } /* ── Heatmap cell text — dark on any tinted cell ── */ html.light .heat td[style] { color: #2E2C29 !important; } html.light .heat td:not([style]) { color: #8C8C96 !important; } /* ── Lucide SVG icons with text-gold ── */ html.light svg.lucide.text-gold { color: #D4AF37 !important; } html.light svg.lucide.text-gold\/60 { color: rgba(212,175,55,.65) !important; } html.light svg.lucide.text-gold\/70 { color: rgba(212,175,55,.70) !important; } /* ── Gold opacity variants — small decorative/secondary use ── */ html.light .text-gold\/60 { color: rgba(212,175,55,.65) !important; } html.light .text-gold\/70 { color: rgba(212,175,55,.72) !important; } html.light .text-gold\/80 { color: rgba(212,175,55,.84) !important; } html.light .font-mono.text-gold\/80 { color: rgba(212,175,55,.84) !important; font-weight: 700 !important; } /* ── Audit pipeline — unified dark amber palette ── */ html.light [data-pipeline] .text-gold { color: #D4AF37 !important; } html.light [data-pipeline] .text-gold\/60 { color: rgba(212,175,55,.65) !important; } html.light [data-pipeline] .text-gold\/70 { color: rgba(212,175,55,.72) !important; } html.light [data-pipeline] .text-gold\/80 { color: rgba(212,175,55,.84) !important; } /* ── FAQ list icons & category labels ── */ html.light #faq-list .text-gold { color: #D4AF37 !important; } html.light #faq-list .text-gold\/80 { color: rgba(212,175,55,.84) !important; } /* ── Coverage grid stats (audit page) ── */ html.light #coverage-grid .text-gold { color: #D4AF37 !important; } /* ── Theme toggle button ── */ html.light .dvx-theme-btn { border-color: rgba(0,0,0,.14) !important; color: #52525B !important; } html.light .dvx-theme-btn:hover { color: #D4AF37 !important; border-color: rgba(212,175,55,.35) !important; background: rgba(212,175,55,.05) !important; } /* ── Carousel arrow buttons ── */ html.light .dvx-car-btn { background: rgba(0,0,0,0.06) !important; border-color: rgba(0,0,0,0.12) !important; color: #3C3B3F !important; } html.light .dvx-car-btn:disabled { background: rgba(0,0,0,0.03) !important; border-color: rgba(0,0,0,0.06) !important; color: rgba(0,0,0,0.2) !important; opacity: 1 !important; } /* ── Floating chart tooltips ── */ html.light #dalvox-gtip { background: #FAFAF8 !important; border-color: rgba(212,175,55,.55) !important; color: #3C3B3F !important; box-shadow: 0 4px 20px rgba(0,0,0,.10) !important; } html.light #dalvox-multi-tip { background: #FAFAF8 !important; border-color: rgba(212,175,55,.35) !important; box-shadow: 0 8px 32px rgba(0,0,0,.10) !important; } /* ── Theme toggle icons — CSS-only, no JS needed ── */ .dvx-theme-btn .dvx-sun { display: block; } .dvx-theme-btn .dvx-moon { display: none; } html.light .dvx-theme-btn .dvx-sun { display: none !important; } html.light .dvx-theme-btn .dvx-moon { display: block !important; }