/* ══════════════════════════════════════════════════════════════ BW / Light Mode overrides Active when has class "bw-mode" Loaded as a normal stylesheet so it is never in a timing race with Tailwind CDN's runtime-injected styles. ══════════════════════════════════════════════════════════════ */ /* --- Backgrounds ------------------------------------------- */ html.bw-mode body { background-color: #ffffff !important; } html.bw-mode header { background-color: rgba(255,255,255,0.94) !important; border-color: rgba(0,0,0,0.1) !important; } html.bw-mode footer { background-color: #f4f4f4 !important; border-color: rgba(0,0,0,0.08) !important; } html.bw-mode .backdrop-blur-xl { background-color: rgba(255,255,255,0.94) !important; } html.bw-mode [class*="bg-[#050505]"] { background-color: #ffffff !important; } html.bw-mode [class*="bg-[#121214]"] { background-color: #f0f0f0 !important; } html.bw-mode [class*="bg-[#0e0e10]"] { background-color: #e8e8e8 !important; } html.bw-mode [class*="bg-[#1a1a1c]"] { background-color: #e0e0e0 !important; } html.bw-mode [class*="bg-[#222]"] { background-color: #cccccc !important; } html.bw-mode [class*="bg-white\/5"] { background-color: rgba(0,0,0,0.04) !important; } html.bw-mode [class*="bg-white\/10"] { background-color: rgba(0,0,0,0.07) !important; } html.bw-mode [class*="bg-[#2E7D32]\/8"] { background-color: rgba(27,94,32,0.08) !important; } html.bw-mode [class*="bg-[#2E7D32]\/15"] { background-color: rgba(27,94,32,0.15) !important; } /* --- Borders ----------------------------------------------- */ html.bw-mode .ghost-border { border-color: rgba(0,0,0,0.1) !important; outline-color: rgba(0,0,0,0.1) !important; } html.bw-mode [class*="border-[rgba(64"] { border-color: rgba(0,0,0,0.08) !important; } html.bw-mode [class*="border-white"] { border-color: rgba(0,0,0,0.08) !important; } html.bw-mode [class*="border-[#2E7D32]"] { border-color: #1B5E20 !important; } /* --- Gradients on image overlays --------------------------- */ html.bw-mode [class*="from-[#050505]"] { --tw-gradient-from: rgba(230,230,230,0.97) !important; } html.bw-mode [class*="from-black"] { --tw-gradient-from: rgba(210,210,210,0.9) !important; } html.bw-mode [class*="from-[#121214]"] { --tw-gradient-from: rgba(240,240,240,0.97) !important; } html.bw-mode [class*="via-[#12121460]"] { --tw-gradient-via: rgba(240,240,240,0.38) !important; } html.bw-mode [class*="via-[#121214"] { --tw-gradient-via: rgba(240,240,240,0.75) !important; } /* --- Form inputs ------------------------------------------- */ html.bw-mode .brutalist-input { border-bottom-color: #aaaaaa !important; } html.bw-mode .brutalist-input::placeholder { color: rgba(0,0,0,0.3) !important; } /* --- TEXT: universal dark override ------------------------- Beats all Tailwind color utilities (text-white, etc.) */ html.bw-mode * { color: #111111 !important; } /* Muted text — slightly lighter */ html.bw-mode [class*="text-[#666666]"], html.bw-mode [class*="text-[#444]"], html.bw-mode .text-gray-400, html.bw-mode .text-gray-500, html.bw-mode .text-gray-600 { color: #555555 !important; } /* Green accent text */ html.bw-mode [class*="text-[#2E7D32]"] { color: #1B5E20 !important; } /* BW button active state */ html.bw-mode #bw-toggle { border-color: rgba(0,0,0,0.35) !important; font-weight: 700; } /* --- Logo swap on theme toggle ----------------------------- */ html:not(.bw-mode) .logo-light { display: none; } html.bw-mode .logo-dark { display: none !important; } /* --- VIEW PROFILE button hover — invert for visibility in light mode --- In dark mode the button flips from transparent→white bg, white→black text. In light mode white-on-light is invisible, so flip it the other way: dark bg + white text on hover. */ html.bw-mode .group:hover [class*="group-hover:bg-white"] { background-color: #111111 !important; } html.bw-mode .group:hover [class*="group-hover:text-black"] { color: #ffffff !important; } html.bw-mode .group:hover [class*="group-hover:text-black"] * { color: #ffffff !important; } /* --- ALWAYS WHITE — green-bg blocks keep white text -------- Higher specificity (0,2,1) beats universal * (0,1,1) Covers: Let's Collab tile, Get in Touch, Book CTA, filter pills, submit button — all pages, both languages */ html.bw-mode [class*="bg-[#2E7D32]"], html.bw-mode [class*="bg-[#2E7D32]"] *, html.bw-mode [class*="bg-[#1B5E20]"], html.bw-mode [class*="bg-[#1B5E20]"] * { color: #ffffff !important; }