/* ===== LIGHT THEME OVERRIDES ===== Applied via [data-theme="light"] on . Uses !important to override Tailwind CDN utilities and inline styles. ================================== */ /* --- Body & base colors --- */ [data-theme="light"] body { background: #f8f7f4 !important; color: #374151 !important; } /* --- Nav bar --- */ [data-theme="light"] nav.fixed { background: rgba(255,255,255,0.92) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; border-bottom-color: rgba(0,0,0,0.06) !important; } /* --- Dropdown menu --- */ [data-theme="light"] .nav-dropdown-menu { background: rgba(255,255,255,0.98) !important; border-color: rgba(0,0,0,0.08) !important; box-shadow: 0 8px 30px rgba(0,0,0,0.1) !important; } [data-theme="light"] .nav-dropdown-menu a { color: rgba(55,65,81,0.6) !important; } [data-theme="light"] .nav-dropdown-menu a:hover { color: #111827 !important; background: rgba(0,0,0,0.03) !important; } [data-theme="light"] .nav-dropdown-menu .dropdown-divider { border-top-color: rgba(0,0,0,0.06) !important; } /* --- Mobile menu --- */ [data-theme="light"] #mobile-menu { background: rgba(255,255,255,0.97) !important; border-top-color: rgba(0,0,0,0.06) !important; } /* --- Hamburger button --- */ [data-theme="light"] button[aria-label="Meniu"] { color: rgba(55,65,81,0.6) !important; } [data-theme="light"] button[aria-label="Meniu"]:hover { color: #111827 !important; } /* --- Mobile menu accordion buttons --- */ [data-theme="light"] #mobile-menu button { color: rgba(55,65,81,0.7) !important; } [data-theme="light"] #mobile-menu button:hover { color: #111827 !important; } /* ===== TEXT-WHITE OPACITY OVERRIDES ===== Tailwind generates classes like .text-white\/60 Scale opacity up slightly for readability on light bg */ [data-theme="light"] .text-white\/15 { color: rgba(55,65,81,0.20) !important; } [data-theme="light"] .text-white\/20 { color: rgba(55,65,81,0.28) !important; } [data-theme="light"] .text-white\/25 { color: rgba(55,65,81,0.35) !important; } [data-theme="light"] .text-white\/30 { color: rgba(55,65,81,0.42) !important; } [data-theme="light"] .text-white\/35 { color: rgba(55,65,81,0.48) !important; } [data-theme="light"] .text-white\/40 { color: rgba(55,65,81,0.55) !important; } [data-theme="light"] .text-white\/50 { color: rgba(55,65,81,0.65) !important; } [data-theme="light"] .text-white\/60 { color: rgba(55,65,81,0.72) !important; } [data-theme="light"] .text-white\/70 { color: rgba(55,65,81,0.82) !important; } /* Plain text-white → dark gray (but NOT on colored bg buttons — see below) */ [data-theme="light"] .text-white { color: #374151 !important; } /* ===== PRESERVE WHITE TEXT ON COLORED BUTTONS ===== Higher specificity keeps text white on green/red backgrounds */ [data-theme="light"] .bg-ecogreen .text-white, [data-theme="light"] .bg-ecogreen.text-white, [data-theme="light"] .bg-ecored .text-white, [data-theme="light"] .bg-ecored.text-white, [data-theme="light"] a.bg-ecogreen, [data-theme="light"] a.bg-ecored, [data-theme="light"] .cta-btn.bg-ecored { color: #fff !important; } /* ===== HOVER STATE OVERRIDES ===== */ [data-theme="light"] .hover\:text-white:hover { color: #111827 !important; } [data-theme="light"] .hover\:border-white\/20:hover { border-color: rgba(55,65,81,0.20) !important; } [data-theme="light"] .hover\:border-white\/30:hover { border-color: rgba(55,65,81,0.30) !important; } [data-theme="light"] .hover\:bg-white\/\[0\.01\]:hover { background-color: rgba(0,0,0,0.03) !important; } [data-theme="light"] .hover\:bg-white\/\[0\.02\]:hover { background-color: rgba(0,0,0,0.04) !important; } /* ===== BORDER OVERRIDES ===== */ [data-theme="light"] .border-white\/5 { border-color: rgba(55,65,81,0.08) !important; } [data-theme="light"] .border-white\/10 { border-color: rgba(55,65,81,0.12) !important; } [data-theme="light"] .border-white\/15 { border-color: rgba(55,65,81,0.15) !important; } [data-theme="light"] .border-white\/20 { border-color: rgba(55,65,81,0.20) !important; } [data-theme="light"] .border-white\/30 { border-color: rgba(55,65,81,0.30) !important; } [data-theme="light"] .border-white\/\[0\.03\] { border-color: rgba(55,65,81,0.05) !important; } [data-theme="light"] .border-white\/\[0\.04\] { border-color: rgba(55,65,81,0.06) !important; } [data-theme="light"] .border-white\/\[0\.06\] { border-color: rgba(55,65,81,0.10) !important; } [data-theme="light"] .border-white\/\[0\.08\] { border-color: rgba(55,65,81,0.12) !important; } /* ===== BACKGROUND OVERRIDES ===== */ [data-theme="light"] .bg-white\/5 { background-color: rgba(55,65,81,0.05) !important; } [data-theme="light"] .bg-white\/10 { background-color: rgba(55,65,81,0.08) !important; } [data-theme="light"] .bg-white\/20 { background-color: rgba(55,65,81,0.12) !important; } [data-theme="light"] .bg-white\/80 { background-color: rgba(55,65,81,0.70) !important; } [data-theme="light"] .bg-white\/\[0\.01\] { background-color: rgba(0,0,0,0.02) !important; } [data-theme="light"] .bg-white\/\[0\.02\] { background-color: rgba(0,0,0,0.03) !important; } [data-theme="light"] .bg-white\/\[0\.03\] { background-color: rgba(0,0,0,0.04) !important; } /* bg-black used on stats/location cards */ [data-theme="light"] .bg-black { background-color: #fff !important; } [data-theme="light"] .hover\:bg-white\/\[0\.02\]:hover { background-color: rgba(0,0,0,0.04) !important; } /* ===== COMPONENT OVERRIDES ===== */ /* Service cards & domain cards */ [data-theme="light"] .service-card, [data-theme="light"] .domain-card { background: #fff !important; border-color: rgba(55,65,81,0.10) !important; } /* FAQ items */ [data-theme="light"] .faq-item { border-color: rgba(55,65,81,0.10) !important; background: #fff !important; } [data-theme="light"] .faq-item:hover { border-color: rgba(0,144,53,0.25) !important; } /* Form inputs */ [data-theme="light"] .form-input { background: #fff !important; border-color: rgba(55,65,81,0.15) !important; color: #374151 !important; } [data-theme="light"] .form-input::placeholder { color: rgba(55,65,81,0.4) !important; } [data-theme="light"] .placeholder-white\/25::placeholder { color: rgba(55,65,81,0.35) !important; } [data-theme="light"] .form-select { background-color: #fff !important; color: #374151 !important; } [data-theme="light"] .form-select option { background: #fff !important; color: #374151 !important; } /* ===== FOOTER ===== */ [data-theme="light"] footer { background: #f0efec !important; } /* ===== NOISE GRAIN ===== */ [data-theme="light"] body::before { opacity: 0.015 !important; } /* ===== NAV LINK UNDERLINE ===== */ [data-theme="light"] .nav-link::after { background: #009035 !important; } /* ===== GRADIENT OVERLAYS ===== Override inline gradients with dark colors in light mode */ [data-theme="light"] [style*="radial-gradient"] { opacity: 0.6; } [data-theme="light"] [style*="linear-gradient"][style*="rgba(0,0,0,1)"] { background: linear-gradient(135deg, rgba(227,0,22,0.04) 0%, rgba(248,247,244,1) 50%, rgba(0,144,53,0.04) 100%) !important; } [data-theme="light"] [style*="rgba(255,255,255,0.04)"] { background: rgba(0,0,0,0.03) !important; } [data-theme="light"] [style*="rgba(255,255,255,0.02)"] { background: transparent !important; } /* ===== CTA border button (outline style) ===== */ [data-theme="light"] a.cta-btn.bg-ecored, [data-theme="light"] .cta-btn.bg-ecored { color: #fff !important; } /* ===== ARTICLE / BLOG CONTENT ===== */ [data-theme="light"] article { color: #374151 !important; } [data-theme="light"] .article-body h2 { color: #111827 !important; } [data-theme="light"] .article-body h3 { color: #1f2937 !important; } [data-theme="light"] .article-body p, [data-theme="light"] .article-body ul, [data-theme="light"] .article-body ol { color: rgba(55,65,81,0.75) !important; } [data-theme="light"] .article-body li { color: rgba(55,65,81,0.75) !important; } [data-theme="light"] .article-body strong { color: #374151 !important; } /* ===== LEGAL CONTENT (EULA, Privacy, Terms) ===== */ [data-theme="light"] .legal-content h2 { color: #111827 !important; } [data-theme="light"] .legal-content h3 { color: #1f2937 !important; } [data-theme="light"] .legal-content p, [data-theme="light"] .legal-content ul li, [data-theme="light"] .legal-content ol li { color: rgba(55,65,81,0.75) !important; } [data-theme="light"] .legal-content strong { color: #374151 !important; } /* ===== TABLE OVERRIDES ===== */ [data-theme="light"] table thead th { color: rgba(55,65,81,0.72) !important; } [data-theme="light"] table tbody { color: rgba(55,65,81,0.65) !important; } [data-theme="light"] table td.text-white\/60 { color: rgba(55,65,81,0.72) !important; } /* ===== TABLE OF CONTENTS / SIDEBAR ITEMS ===== */ [data-theme="light"] .border-white\/\[0\.06\] { border-color: rgba(55,65,81,0.10) !important; } /* ===== TOGGLE BUTTON ===== */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.1); background: transparent; color: rgba(255,255,255,0.5); cursor: pointer; transition: color 0.2s, border-color 0.2s, background 0.2s; padding: 0; } .theme-toggle:hover { color: #fff; border-color: rgba(255,255,255,0.2); } [data-theme="light"] .theme-toggle { border-color: rgba(55,65,81,0.15) !important; color: rgba(55,65,81,0.5) !important; } [data-theme="light"] .theme-toggle:hover { color: #111827 !important; border-color: rgba(55,65,81,0.25) !important; } /* Sun/moon icon visibility */ .sun-icon { display: none; } .moon-icon { display: block; } [data-theme="light"] .sun-icon { display: block; } [data-theme="light"] .moon-icon { display: none; } /* Mobile toggle variant */ .theme-toggle-mobile { display: inline-flex; align-items: center; gap: 8px; font-size: 0.875rem; font-weight: 500; background: transparent; border: none; cursor: pointer; padding: 0; color: rgba(255,255,255,0.6); transition: color 0.2s; } .theme-toggle-mobile:hover { color: #fff; } [data-theme="light"] .theme-toggle-mobile { color: rgba(55,65,81,0.6) !important; } [data-theme="light"] .theme-toggle-mobile:hover { color: #111827 !important; } /* ===== WASTE CODES SEARCH ===== */ [data-theme="light"] .search-input { background: rgba(0,0,0,0.04) !important; border-color: rgba(55,65,81,0.15) !important; color: #374151 !important; } [data-theme="light"] .search-input::placeholder { color: rgba(55,65,81,0.4) !important; } [data-theme="light"] .search-input:focus { border-color: rgba(0,144,53,0.4) !important; background: rgba(0,0,0,0.06) !important; } [data-theme="light"] .search-clear { background: rgba(0,0,0,0.06) !important; color: rgba(55,65,81,0.5) !important; } [data-theme="light"] .search-clear:hover { background: rgba(0,0,0,0.1) !important; color: #111827 !important; } [data-theme="light"] .stat-card { background: rgba(0,0,0,0.03) !important; border-color: rgba(55,65,81,0.08) !important; } [data-theme="light"] .tree-group { border-color: rgba(55,65,81,0.08) !important; background: #fff !important; } [data-theme="light"] .tree-subgroup { border-color: rgba(55,65,81,0.06) !important; } [data-theme="light"] .code-badge { background: rgba(55,65,81,0.08) !important; color: #374151 !important; } [data-theme="light"] .code-badge.dangerous { background: rgba(227,0,22,0.08) !important; color: #dc2626 !important; } [data-theme="light"] .highlight-match { background: rgba(0,144,53,0.15) !important; color: #065f22 !important; } [data-theme="light"] .resource-card { background: #fff !important; border-color: rgba(55,65,81,0.10) !important; } /* ===== TRANSITION (only during toggle) ===== */ .theme-transitioning * { transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease !important; }