/* ========================================================================== Blueshore Technologies — Light Theme Overrides Active when: does NOT have class "dark" Strategy: Override hard-coded dark colors using attribute selectors and element-specific rules so light mode looks polished. ========================================================================== */ /* =========================================================================== THEME TOGGLE BUTTON — works in both dark and light modes =========================================================================== */ /* Global Image Toggling */ html.dark .light-img { display: none !important; } html:not(.dark) .dark-img { display: none !important; } .theme-toggle-btn { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; background: transparent; border: 1.5px solid rgba(255, 255, 255, 0.2); color: #cbd5e1; flex-shrink: 0; outline: none; } html:not(.dark) .theme-toggle-btn { border-color: rgba(0, 0, 0, 0.15) !important; color: #374151 !important; } .theme-toggle-btn:hover { background: rgba(55,144,255, 0.12) !important; border-color: #3790ff !important; color: #3790ff !important; } /* =========================================================================== BASE — HTML & BODY =========================================================================== */ html:not(.dark) { color-scheme: light; } html:not(.dark) body { background-color: #f8fafc !important; color: #0f172a !important; } /* =========================================================================== DARK BACKGROUND OVERRIDES Using [class*="..."] attribute substring selectors to catch Tailwind arbitrary values like bg-[#030816], bg-[#030816]/90, etc. =========================================================================== */ /* Deepest dark → light blue-gray */ html:not(.dark) [class*="bg-[#030816]"] { background-color: #f8fafc !important; } /* Card dark bg → white */ html:not(.dark) [class*="bg-[#0B1221]"], html:not(.dark) [class*="bg-[#0b1221]"] { background-color: #ffffff !important; } /* Elevated surfaces → slate-100 */ html:not(.dark) [class*="bg-[#131B2F]"], html:not(.dark) [class*="bg-[#131b2f]"] { background-color: #f1f5f9 !important; } /* Dark overlay */ html:not(.dark) [class*="bg-[#1a233a]"] { background-color: #f1f5f9 !important; } /* Other dark shades used across pages */ html:not(.dark) [class*="bg-[#02040f]"], html:not(.dark) [class*="bg-[#02050f]"], html:not(.dark) [class*="bg-[#0b1c30]"], html:not(.dark) [class*="bg-[#0e1f32]"], html:not(.dark) [class*="bg-[#243448]"] { background-color: #f1f5f9 !important; } /* Semi-transparent white overlays on dark → subtle on light */ html:not(.dark) [class*="bg-white/5"], html:not(.dark) [class*="bg-white/10"], html:not(.dark) [class*="bg-white/20"] { background-color: rgba(0, 0, 0, 0.025) !important; } /* Fix: Prevent semi-transparent dark overlays from becoming solid opaque blocks */ html:not(.dark) [class*="bg-[#030816]/"], html:not(.dark) [class*="bg-[#0B1221]/"], html:not(.dark) [class*="bg-[#0b1221]/"], html:not(.dark) [class*="bg-[#131B2F]/"], html:not(.dark) [class*="bg-[#131b2f]/"], html:not(.dark) [class*="bg-[#1a233a]/"], html:not(.dark) [class*="bg-[#02040f]/"], html:not(.dark) [class*="bg-[#02050f]/"], html:not(.dark) [class*="bg-[#0b1c30]/"], html:not(.dark) [class*="bg-[#0e1f32]/"], html:not(.dark) [class*="bg-[#243448]/"] { background-color: rgba(0, 0, 0, 0.03) !important; } /* =========================================================================== TEXT COLOR OVERRIDES =========================================================================== */ /* White text → near-black on light backgrounds */ html:not(.dark) .text-white { color: #0f172a !important; } /* Light gray → readable medium gray */ html:not(.dark) .text-slate-300 { color: #475569 !important; } html:not(.dark) .text-slate-400 { color: #64748b !important; } /* Cyan accent labels → darker for readability on white */ html:not(.dark) [class*="text-[#3790ff]"] { color: #3790ff !important; } /* Gold accent — keep as-is (warm, visible on light bg) */ /* html:not(.dark) [class*="text-[#3790ff]"] — intentionally not overriding */ /* Cyan background badges → very light cyan tint */ html:not(.dark) [class*="bg-[#3790ff]/10"], html:not(.dark) [class*="bg-[#3790ff]/20"] { background-color: rgba(55, 144, 255, 0.08) !important; } /* =========================================================================== BORDER OVERRIDES =========================================================================== */ html:not(.dark) [class*="border-white/5"] { border-color: rgba(0, 0, 0, 0.05) !important; } html:not(.dark) [class*="border-white/10"] { border-color: rgba(0, 0, 0, 0.08) !important; } html:not(.dark) [class*="border-white/20"] { border-color: rgba(0, 0, 0, 0.1) !important; } html:not(.dark) [class*="border-white/30"] { border-color: rgba(0, 0, 0, 0.12) !important; } /* Dividers */ html:not(.dark) [class*="divide-white/"]>*+* { border-color: rgba(0, 0, 0, 0.06) !important; } /* Ring utilities */ html:not(.dark) [class*="ring-white/"] { --tw-ring-color: rgba(0, 0, 0, 0.08) !important; } /* =========================================================================== NAVIGATION =========================================================================== */ /* Hard-coded dark nav backgrounds (about.html, services.html, etc.) */ html:not(.dark) nav[class*="bg-[#030816]"] { background-color: rgba(248, 250, 252, 0.96) !important; border-bottom-color: rgba(0, 0, 0, 0.08) !important; } /* Nav text that's hard-coded white */ html:not(.dark) nav .text-white { color: #0f172a !important; } html:not(.dark) nav .text-slate-300 { color: #374151 !important; } /* Nav text and icons default/hover states */ html:not(.dark) nav.fixed.top-0 .text-slate-600 { color: #000000 !important; } html:not(.dark) nav.fixed.top-0 .text-slate-600:hover, html:not(.dark) nav.fixed.top-0 .group:hover > a { color: #3790ff !important; } /* Dropdown menus */ html:not(.dark) nav [class*="bg-[#0B1221]"], html:not(.dark) nav [class*="bg-[#0b1221]"] { background-color: #ffffff !important; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1) !important; } /* Hamburger button */ html:not(.dark) .hamburger-btn { background: rgba(0, 0, 0, 0.04) !important; border-color: rgba(0, 0, 0, 0.12) !important; color: #374151 !important; } html:not(.dark) .hamburger-btn:hover { background: rgba(55,144,255, 0.08) !important; } /* =========================================================================== HERO SECTIONS Overrides inline