/* === Dark Mode Styles === */ /* Triggered by [data-theme="dark"] on element */ [data-theme="dark"] .gonka-landing { color: #fff; } [data-theme="dark"] .gonka-hero::before { background: url("../images/landing-dark.png") center/cover no-repeat; } [data-theme="dark"] .gonka-header { background-color: transparent; } [data-theme="dark"] .gonka-banner span { color: #fff; } [data-theme="dark"] .footer-col h4, [data-theme="dark"] .brand-logo span { color: #fff; } [data-theme="dark"] .gonka-landing svg:not(.no-invert) { filter: invert(1); } /* Don't invert colored SVG icons that use explicit fill colors */ [data-theme="dark"] .social svg { filter: none; } [data-theme="dark"] .social svg path { fill: #787878; } [data-theme="dark"] .social a:hover svg path { fill: #fff; } /* Card in dark mode */ [data-theme="dark"] .card { background: #1a1a1a; box-shadow: 0px 4px 16px rgba(255,255,255,0.06); } [data-theme="dark"] .card:hover { box-shadow: 0px 8px 24px rgba(255,255,255,0.1); } /* Quick-link cards in dark mode */ [data-theme="dark"] .quick-link-card { background: #1a1a1a; box-shadow: 0px 4px 16px rgba(255,255,255,0.06); } [data-theme="dark"] .quick-link-card:hover { box-shadow: 0px 8px 24px rgba(255,255,255,0.1); } /* Modal in dark */ [data-theme="dark"] .modal-box { background: #111; } /* CF7 Form in dark mode */ [data-theme="dark"] .wpcf7-form input[type="text"], [data-theme="dark"] .wpcf7-form input[type="email"], [data-theme="dark"] .wpcf7-form textarea { background: #1a1a1a; border-color: #333; color: #fff; } /* Scrolled header shadow in dark mode */ [data-theme="dark"] .gonka-header.scrolled { box-shadow: 0 2px 8px rgba(255,255,255,0.05); }