/* ================================================ EUSKO-RENEW · Dark Mode Overrides forest: #7c3aed | Toggle: class="dark" on ================================================ */ /* ── 1. Smooth global transitions ───────────────── */ *, *::before, *::after { transition-property: background-color, border-color, color, box-shadow; transition-duration: 0.22s; transition-timing-function: ease; } /* Exempt animations from interference */ .hero-animate, .blob-1, .blob-2, .blob-3, .pulse-dot, #scroll-progress, .btn-primary::before { transition: none !important; } /* ── 2. Color scheme ────────────────────────────── */ html.dark { color-scheme: dark; } /* ── 3. Body ────────────────────────────────────── */ .dark body { background-color: #0d0d0d; color: #e2e8f0; } /* ── 4. Header ──────────────────────────────────── */ .dark header { background-color: rgba(8, 8, 8, 0.96) !important; border-color: rgba(255, 255, 255, 0.07) !important; } /* ── 5. Mobile nav ──────────────────────────────── */ .dark #mobile-nav { background-color: #111 !important; border-color: rgba(255, 255, 255, 0.06) !important; } .dark .mobile-nav-link { color: #94a3b8; } .dark .mobile-nav-link:hover { background-color: rgba(124, 58, 237, 0.1); color: #c084fc; } .dark .mobile-nav-active { background-color: rgba(124, 58, 237, 0.15) !important; color: #c084fc !important; } .dark .mobile-nav-active::before { background: #c084fc; } /* ── 6. Nav links (desktop) ─────────────────────── */ .dark nav a { color: #94a3b8; } .dark nav a.text-forest, .dark nav a.font-semibold.text-forest { color: #c084fc !important; } .dark nav a:hover { color: #c084fc; } .dark nav a::after { background: #c084fc; } /* ── 7. Lang switcher ───────────────────────────── */ .dark #lang-switcher { border-color: rgba(255, 255, 255, 0.12) !important; background-color: transparent; } .dark .lang-btn { color: #94a3b8; } .dark .lang-btn.bg-forest { background-color: #7c3aed !important; color: #fff !important; } /* ── 8. Dark mode button ────────────────────────── */ .dark #dark-mode-btn { border-color: rgba(255, 255, 255, 0.15) !important; color: #94a3b8; } .dark #dark-mode-btn:hover { border-color: rgba(124, 58, 237, 0.5) !important; color: #c084fc; } /* ── 9. Text overrides ──────────────────────────── */ .dark .text-steel { color: #e2e8f0 !important; } .dark .text-stone-700 { color: #94a3b8 !important; } .dark .text-stone-600 { color: #94a3b8 !important; } .dark .text-stone-500 { color: #6b7280 !important; } .dark .text-stone-400 { color: #9ca3af !important; } .dark .text-stone-300 { color: #d1d5db !important; } /* ── 10. Background overrides ───────────────────── */ .dark .bg-white { background-color: #181818 !important; } .dark .bg-mist { background-color: #1a1a1a !important; } .dark .bg-mist\/40 { background-color: rgba(26,26,26,0.7) !important; } .dark .bg-mist\/50 { background-color: rgba(26,26,26,0.8) !important; } .dark .bg-mist\/60 { background-color: rgba(26,26,26,0.9) !important; } .dark .bg-white\/80 { background-color: rgba(20,20,20,0.8) !important; } .dark .bg-white\/90 { background-color: rgba(16,16,16,0.92) !important; } .dark .bg-stone-100 { background-color: #202020 !important; } .dark .bg-stone-100\/80 { background-color: rgba(32,32,32,0.8) !important; } .dark .bg-stone-100\/90 { background-color: rgba(32,32,32,0.9) !important; } .dark .bg-violet-50 { background-color: rgba(124,58,237,0.12) !important; } .dark .bg-red-50 { background-color: rgba(220,38,38,0.1) !important; } .dark .bg-forest\/5 { background-color: rgba(124,58,237,0.08) !important; } .dark .bg-forest\/10 { background-color: rgba(124,58,237,0.15) !important; } .dark .bg-forest\/15 { background-color: rgba(124,58,237,0.2) !important; } /* ── 11. Light section inline backgrounds ───────── */ .dark .bg-light-section { background: #0d0820 !important; } /* ── 12. Border overrides ───────────────────────── */ .dark .border-stone-200, .dark .border-stone-200\/80, .dark .border-stone-200\/60 { border-color: rgba(255,255,255,0.09) !important; } .dark .border-stone-100 { border-color: rgba(255,255,255,0.05) !important; } .dark .border-white\/10 { border-color: rgba(255,255,255,0.07) !important; } .dark .border-forest\/15 { border-color: rgba(124,58,237,0.25) !important; } .dark .border-forest\/20 { border-color: rgba(124,58,237,0.3) !important; } /* ── 13. Cards ──────────────────────────────────── */ .dark .card-lift { background-color: #1c1c1c; border-color: rgba(255,255,255,0.08) !important; } .dark .card-lift:hover { box-shadow: 0 20px 50px rgba(124,58,237,0.18); border-color: rgba(124,58,237,0.35) !important; } .dark .icon-box { background-color: rgba(124,58,237,0.18) !important; } /* ── 14. Authority side panel ───────────────────── */ .dark .authority-panel { background-color: #1c1c1c !important; } /* ── 15. Form inputs ────────────────────────────── */ .dark input, .dark textarea, .dark select { background-color: #1c1c1c !important; border-color: rgba(255,255,255,0.12) !important; color: #e2e8f0 !important; } .dark input::placeholder, .dark textarea::placeholder { color: #6b7280 !important; } .dark input:focus, .dark textarea:focus, .dark select:focus { border-color: #7c3aed !important; box-shadow: 0 0 0 2px rgba(124,58,237,0.25) !important; } .dark label { color: #cbd5e1 !important; } .dark select option { background-color: #1c1c1c; color: #e2e8f0; } /* ── 16. Checkbox area ──────────────────────────── */ .dark .rounded-lg.border.border-stone-200.bg-mist\/40 { background-color: #1c1c1c !important; border-color: rgba(255,255,255,0.1) !important; } /* ── 17. Prose / legal text ─────────────────────── */ .dark .prose p, .dark .space-y-6 p { color: #94a3b8; } .dark .prose h2, .dark .space-y-6 h2 { color: #e2e8f0; } .dark .prose strong, .dark .space-y-6 strong { color: #e2e8f0; } .dark .prose a { color: #c084fc; } /* ── 18. Footer ─────────────────────────────────── */ .dark footer { border-color: rgba(255,255,255,0.05) !important; } /* ── 19. Flash / alert messages ─────────────────── */ .dark [role="alert"].bg-violet-50 { background-color: rgba(124,58,237,0.12) !important; border-color: rgba(124,58,237,0.3) !important; } .dark [role="alert"].bg-red-50 { background-color: rgba(220,38,38,0.1) !important; border-color: rgba(220,38,38,0.3) !important; } /* ── 20. Shadows in dark ────────────────────────── */ .dark .shadow-sm { box-shadow: 0 1px 3px rgba(0,0,0,0.5) !important; } .dark .shadow-lg { box-shadow: 0 10px 30px rgba(0,0,0,0.6) !important; } .dark .shadow-xl { box-shadow: 0 20px 50px rgba(0,0,0,0.6) !important; } .dark .shadow-2xl { box-shadow: 0 25px 60px rgba(0,0,0,0.7) !important; } /* ── 21. 404 number ─────────────────────────────── */ .dark .text-forest\/20 { color: rgba(124,58,237,0.12) !important; } /* ── 22. Dot grid in dark ───────────────────────── */ .dark .dot-grid { background-image: radial-gradient(circle, rgba(124,58,237,0.22) 1.5px, transparent 1.5px) !important; } .dark .dot-grid-light { background-image: radial-gradient(circle, rgba(124,58,237,0.12) 1.5px, transparent 1.5px) !important; } /* ── 23. Quote / blockquote ─────────────────────── */ .dark .border-l-4.border-forest { border-color: #7c3aed !important; } /* ── 24. Aside info box ─────────────────────────── */ .dark .border-l-4.border-forest.bg-stone-100\/80, .dark .rounded-2xl.border-l-4.border-forest { background-color: rgba(124,58,237,0.08) !important; } /* ── 25. Scrollbar ──────────────────────────────── */ .dark ::-webkit-scrollbar { width: 8px; } .dark ::-webkit-scrollbar-track { background: #111; } .dark ::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 4px; } .dark ::-webkit-scrollbar-thumb:hover { background: #3a3a3a; }