/* ════════════════════════════════════════════════════════════════ dark-shim.css — Carbon+Amber theme overlay for legacy Tailwind pages Applied 2026-05-04 to retrofit pages that still use the navy/blue palette so they match the new water-energy.co.il dark redesign. Drop this into any page above the and it will: • Repaint the body to graphite #1F2024 • Remap Tailwind navy/accent classes to amber #F59E0B + dark surfaces • Update glass cards, hero gradients, and result pills ════════════════════════════════════════════════════════════════ */ :root{ --bg:#1F2024; --bg-1:#2A2C32; --bg-2:#353841; --bg-deep:#16171A; --line:rgba(255,255,255,.10); --line-bright:rgba(245,158,11,.36); --ink:#FAFAF9; --ink-soft:#E8E3DA; --ink-faint:#ADA89F; --accent:#F59E0B; --accent-2:#FBBF24; --accent-deep:#B45309; --accent-glow:rgba(245,158,11,.4); --accent-soft:rgba(245,158,11,.10); --water:#38BDF8; } html{background:var(--bg)!important} body{background:var(--bg)!important;color:var(--ink)!important;-webkit-font-smoothing:antialiased} /* Backgrounds */ .bg-navy{background:var(--bg-1)!important} .bg-bgpage,.bg-white{background:var(--bg)!important} .bg-gray-50,.bg-gray-100,.bg-gray-200{background:var(--bg-2)!important} .bg-blue-50,.bg-amber-50,.bg-red-50,.bg-green-50,.bg-emerald-50,.bg-purple-50,.bg-orange-50,.bg-yellow-50,.bg-indigo-50,.bg-pink-50,.bg-cyan-50,.bg-teal-50{background:var(--bg-2)!important} .bg-blue-100,.bg-amber-100,.bg-red-100,.bg-green-100,.bg-yellow-100,.bg-purple-100,.bg-emerald-100,.bg-orange-100{background:var(--bg-2)!important} .bg-accent{background:var(--accent)!important;color:var(--bg)!important} .bg-accent\/80:hover,.hover\:bg-accent\/80:hover{background:var(--accent-2)!important} .bg-accent\/20{background:var(--accent-soft)!important} /* Foregrounds */ .text-navy{color:var(--ink)!important} .text-accent{color:var(--accent)!important} .text-gray-300,.text-gray-400,.text-gray-500,.text-gray-600,.text-gray-700,.text-gray-800,.text-gray-900,.text-slate-500,.text-slate-600,.text-slate-700,.text-slate-800{color:var(--ink-soft)!important} .text-blue-700,.text-blue-800,.text-emerald-700,.text-emerald-800,.text-purple-700,.text-amber-700,.text-blue-600,.text-emerald-600,.text-amber-600,.text-purple-600,.text-yellow-700,.text-yellow-800,.text-indigo-700,.text-indigo-800,.text-cyan-700,.text-teal-700{color:var(--accent)!important} .text-red-600,.text-red-700,.text-red-800{color:#FCA5A5!important} .text-green-600,.text-green-700,.text-green-800{color:#86EFAC!important} .text-white{color:var(--ink)!important} .text-white\/80,.text-white\/70,.text-white\/60,.text-white\/50,.text-white\/40,.text-white\/30{color:var(--ink-soft)!important} /* Borders */ .border-accent{border-color:var(--accent)!important} .border-accent\/30,.border-accent\/40,.border-accent\/50{border-color:var(--line-bright)!important} .border-gray-100,.border-gray-200,.border-gray-300{border-color:var(--line)!important} .border-red-100,.border-amber-100,.border-blue-100,.border-green-100,.border-yellow-100,.border-emerald-100{border-color:var(--line)!important} .border-blue-300\/30,.border-blue-400\/40,.border-green-400\/40,.border-emerald-500\/30,.border-emerald-200{border-color:var(--line-bright)!important} .border-blue-500,.border-emerald-500,.border-blue-600,.border-emerald-600{border-color:var(--accent)!important} .divide-gray-100>*+*,.divide-gray-200>*+*{border-color:var(--line)!important} /* Shadows */ .shadow,.shadow-md,.shadow-lg,.shadow-xl,.shadow-2xl{box-shadow:0 16px 40px rgba(0,0,0,.3)!important} /* Hero gradient (used by guides + region pages) */ .hero-gradient{ background:linear-gradient(180deg,var(--bg) 0%,var(--bg-1) 100%)!important; position:relative; overflow:hidden; } .hero-gradient::before{ content:''; position:absolute; top:-200px; right:-200px; width:800px; height:800px; background:radial-gradient(circle,var(--accent-soft) 0%,transparent 60%); pointer-events:none; } .hero-gradient::after{ content:''; position:absolute; bottom:-200px; left:-200px; width:600px; height:600px; background:radial-gradient(circle,rgba(56,189,248,.08) 0%,transparent 60%); pointer-events:none; } /* Glass cards */ .glass{ background:var(--bg-1)!important; border:1px solid var(--line)!important; box-shadow:0 8px 32px rgba(0,0,0,.25)!important; color:var(--ink)!important; } .card-hover{transition:transform .35s,box-shadow .35s,border-color .35s} .card-hover:hover{ transform:translateY(-6px)!important; box-shadow:0 24px 48px rgba(0,0,0,.4)!important; border-color:var(--line-bright)!important; } /* Prose (article) styling */ .prose,.prose p,.prose li{color:var(--ink-soft)!important} .prose h1,.prose h2,.prose h3,.prose h4,.prose h5,.prose h6{color:var(--ink)!important} .prose strong{color:var(--ink)!important} .prose a{color:var(--accent)!important} .prose blockquote{ border-right:3px solid var(--accent)!important; background:var(--bg-1)!important; color:var(--ink)!important; } .prose code{ background:var(--bg-deep)!important; color:var(--accent)!important; padding:2px 6px; border-radius:4px; } .prose table{border-collapse:collapse} .prose thead{background:var(--bg-2)!important;color:var(--accent)!important} .prose th,.prose td{border-bottom:1px solid var(--line)!important;padding:10px 14px} /* Inputs */ input,textarea,select{ background:var(--bg-1)!important; color:var(--ink)!important; border-color:var(--line)!important; } input:focus,textarea:focus,select:focus{ border-color:var(--accent)!important; outline:none; box-shadow:0 0 0 3px var(--accent-soft)!important; } input::placeholder,textarea::placeholder{color:var(--ink-faint)!important} /* Tables */ table{border-color:var(--line)!important} th{background:var(--bg-2)!important;color:var(--accent)!important} td{border-color:var(--line)!important} tr.bg-white{background:var(--bg-1)!important} tr.bg-gray-50{background:var(--bg-2)!important} /* Scrollbar */ ::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-track{background:var(--bg-1)} ::-webkit-scrollbar-thumb{ background:linear-gradient(180deg,var(--accent-deep),var(--accent)); border-radius:6px; border:2px solid var(--bg-1); } ::-webkit-scrollbar-thumb:hover{background:var(--accent-2)} ::selection{background:var(--accent);color:var(--bg)} /* BACK-TO-TOP button (injected into every page) */ .back-top{position:fixed;bottom:28px;right:28px;width:48px;height:48px;background:rgba(31,32,36,.85);backdrop-filter:blur(12px) saturate(180%);border:1px solid var(--line-bright);border-radius:50%;display:none;place-items:center;color:var(--accent);z-index:90;cursor:pointer;font-family:inherit} .back-top.visible{display:grid!important} .back-top:hover{background:var(--accent)!important;color:var(--bg)!important;box-shadow:0 8px 28px var(--accent-glow);transform:translateY(-3px)} .back-top:focus-visible{outline:2px solid var(--accent);outline-offset:3px} .back-top svg{transition:transform .25s} .back-top:hover svg{transform:translateY(-2px)} @media (max-width:768px){.back-top{bottom:24px;right:18px;width:44px;height:44px}} /* Gradient backgrounds (Tailwind) */ [class*="from-blue"],[class*="to-blue"],[class*="via-blue"]{filter:hue-rotate(150deg) saturate(.7)} /* Specific overrides for sticky TOC commonly used in guide pillar pages */ .sticky-toc,.toc-sticky,nav.toc{ background:var(--bg-1)!important; border-color:var(--line)!important; } .sticky-toc a,.toc-sticky a,nav.toc a{color:var(--ink-soft)!important} .sticky-toc a:hover,.toc-sticky a:hover,nav.toc a:hover,.sticky-toc a.active,nav.toc a.active{color:var(--accent)!important}