/* ════════════════════════════════════════════════════════════════ 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; --water-soft:rgba(56,189,248,.12); --green:#86EFAC; --green-soft:rgba(34,197,94,.12); } 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). Sits ABOVE the a11y widget (#a11y-fab, bottom:24px right:24px, 56px tall, z-index:9998) so the two never overlap on mobile. WhatsApp `.fab` lives on the LEFT side. */ .back-top{position:fixed;bottom:calc(96px + env(safe-area-inset-bottom,0px));right:30px;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:9997;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:calc(88px + env(safe-area-inset-bottom,0px));right:22px;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} /* ════════════════════════════════════════════════════════════════ GUIDE PILLAR OVERRIDES — applied 2026-05-04 evening /guides/* uses inline `.prose` + `.callout-*` + `.formula` styles that hardcode #1A2744 navy / #F4F5F8 light bg / pastel callout backgrounds. These selectors override those inline rules and remap them to Carbon+Amber tokens so the guides become readable on the graphite body that dark-shim already enforces. ════════════════════════════════════════════════════════════════ */ /* Body color override (the inline `body{background:#F4F5F8;color:#1f2937}` in the guides forces light bg + dark text — kill it) */ body[class*=""],html[class*=""]{color:var(--ink)!important} /* Force any element with the dark text color #1f2937 / #374151 / #111827 / #1A2744 that came from the legacy CSS to use ink-soft */ /* PROSE TYPOGRAPHY */ .prose{color:var(--ink-soft)!important;max-width:none} .prose h1,.prose h2,.prose h3,.prose h4,.prose h5,.prose h6{color:var(--ink)!important;border-color:var(--line)!important} .prose h2{border-top-color:var(--line-bright)!important} .prose p,.prose li{color:var(--ink-soft)!important} .prose strong{color:var(--ink)!important} .prose a{color:var(--accent)!important;text-decoration-color:var(--line-bright)!important} .prose a:hover{color:var(--accent-2)!important;text-decoration-color:var(--accent)!important} .prose blockquote{border-color: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 — override navy header */ .prose table{background:var(--bg-1)!important;border:1px solid var(--line)!important;border-radius:0!important;color:var(--ink-soft)!important;overflow:hidden} .prose thead,.prose th{background:var(--bg-2)!important;color:var(--accent)!important;border-bottom:1px solid var(--line)!important} .prose th{padding:12px 14px;text-align:right;font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.08em} .prose td{padding:12px 14px;border-bottom:1px solid var(--line)!important;color:var(--ink-soft)!important} .prose tr:nth-child(even) td{background:rgba(255,255,255,.02)} /* CALLOUTS — replace pastel backgrounds with dark variants */ .callout{padding:18px 22px!important;border-radius:0!important;margin:18px 0!important;border-right:3px solid!important;color:var(--ink-soft)!important} .callout strong{color:var(--ink)!important} .callout-info{background:var(--water-soft)!important;border-color:var(--water)!important;color:var(--ink-soft)!important} .callout-info strong{color:var(--water)!important} .callout-tip{background:rgba(34,197,94,.10)!important;border-color:#86EFAC!important;color:var(--ink-soft)!important} .callout-tip strong{color:#86EFAC!important} .callout-warn{background:var(--accent-soft)!important;border-color:var(--accent)!important;color:var(--ink-soft)!important} .callout-warn strong{color:var(--accent-2)!important} .callout-danger,.callout-error,.callout.danger,.callout.error{background:rgba(239,68,68,.12)!important;border-color:#FCA5A5!important;color:var(--ink-soft)!important} .callout-danger strong,.callout.danger strong{color:#FCA5A5!important} /* Compound .callout.info/.tip/.warn/.danger variant (used in vfd-pumps guide) */ .callout.info{background:var(--water-soft)!important;border-color:var(--water)!important;color:var(--ink-soft)!important} .callout.info strong{color:var(--water)!important} .callout.tip{background:var(--green-soft)!important;border-color:var(--green)!important;color:var(--ink-soft)!important} .callout.tip strong{color:var(--green)!important} .callout.warn{background:var(--accent-soft)!important;border-color:var(--accent)!important;color:var(--ink-soft)!important} .callout.warn strong{color:var(--accent-2)!important} /* FORMULA — graphite-deep with amber text */ .formula{background:var(--bg-deep)!important;color:var(--accent)!important;border:1px solid var(--line-bright)!important;border-radius:0!important;padding:18px 24px!important;font-family:'Courier New',monospace;direction:ltr;text-align:left;margin:16px 0;letter-spacing:.04em;font-weight:600} /* HERO-GRADIENT — replace navy with graphite + amber radial */ .hero-gradient{background:linear-gradient(180deg,var(--bg) 0%,var(--bg-1) 60%,var(--bg-2) 100%)!important;position:relative;overflow:hidden;color:var(--ink)!important} .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;z-index:0} .hero-gradient::after{content:'';position:absolute;bottom:-300px;left:-300px;width:900px;height:900px;background:radial-gradient(circle,var(--water-soft) 0%,transparent 60%);pointer-events:none;z-index:0} .hero-gradient > *{position:relative;z-index:1} .hero-gradient h1,.hero-gradient h2,.hero-gradient h3{color:var(--ink)!important} .hero-gradient .text-blue-100,.hero-gradient .text-blue-200,.hero-gradient .text-white{color:var(--ink-soft)!important} .hero-gradient .text-amber-300,.hero-gradient .text-emerald-300{color:var(--accent-2)!important} /* TOC sticky right rail (used in pillar guides) */ .toc{position:sticky;top:80px;max-height:calc(100vh - 100px);overflow-y:auto;background:var(--bg-1)!important;border:1px solid var(--line)!important;padding:14px;border-radius:0!important} .toc a,.toc-link{display:block;padding:8px 12px!important;color:var(--ink-soft)!important;border-right:2px solid transparent;font-size:13.5px;text-decoration:none;border-radius:0!important;transition:color .2s,background .2s,border-color .2s} .toc a:hover,.toc-link:hover{background:var(--accent-soft)!important;color:var(--accent)!important;border-color:var(--accent)!important} .toc a.active,.toc-link.active{background:var(--accent-soft)!important;color:var(--accent)!important;border-color:var(--accent)!important} /* READ-TIME pill */ .read-time{display:inline-flex;align-items:center;gap:8px;background:var(--accent-soft)!important;color:var(--accent-2)!important;padding:5px 14px!important;border-radius:999px!important;font-size:13px;font-weight:600;border:1px solid var(--line-bright)!important} /* GUIDE-CARD on /guides/ index — base border first */ .guide-card{background:var(--bg-1)!important;border:1px solid var(--line)!important;color:var(--ink-soft)!important;transition:transform .25s,border-color .25s,box-shadow .25s} .guide-card:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(0,0,0,.4)!important} .guide-card:hover:not(.cat-energy):not(.cat-pump):not(.cat-tech){border-color:var(--line-bright)!important} .guide-card h3,.guide-card .text-navy,.guide-card .font-black{color:var(--ink)!important} .guide-card p{color:var(--ink-soft)!important} /* CATEGORY borders on guides index — compound selector beats .guide-card border */ .guide-card.cat-energy,.cat-energy{border-right:4px solid var(--accent)!important;border-left-color:var(--line)!important;border-top-color:var(--line)!important;border-bottom-color:var(--line)!important} .guide-card.cat-pump,.cat-pump{border-right:4px solid var(--water)!important;border-left-color:var(--line)!important;border-top-color:var(--line)!important;border-bottom-color:var(--line)!important} .guide-card.cat-tech,.cat-tech{border-right:4px solid #86EFAC!important;border-left-color:var(--line)!important;border-top-color:var(--line)!important;border-bottom-color:var(--line)!important} /* Generic light pastel chips on /guides/ — bg-amber-500/20 etc. that were used in hero filter pills */ .bg-amber-500\/20,.bg-blue-500\/20,.bg-emerald-500\/20{background:var(--accent-soft)!important;border-color:var(--line-bright)!important;color:var(--accent-2)!important} .bg-amber-500\/30:hover,.hover\:bg-amber-500\/30:hover,.bg-blue-500\/30:hover,.hover\:bg-blue-500\/30:hover,.bg-emerald-500\/30:hover,.hover\:bg-emerald-500\/30:hover{background:rgba(245,158,11,.18)!important} /* Override "border-top:2px solid #e5e7eb" hardcoded on .prose h2 */ .prose h2[style*="border-top"]{border-top-color:var(--line-bright)!important} /* Inline color hex in .prose elements via [style*="color:#1A2744"] won't work — but the above .prose h2/h3/p/strong rules already target by selector, so inline color is ALSO superseded if those rules use !important — which they do. */ /* ════════════════════════════════════════════════════════════════ PASTEL GRADIENTS + BORDER-200 — added 2026-05-05 Tailwind `bg-gradient-to-* from-X-50 to-Y-50` produces a light pastel gradient via CSS vars (--tw-gradient-from / --tw-gradient-to). These bypass our .bg-X-50 overrides above. Same for `border-X-200` rings on contact cards and CTAs. The `from-X-50`/`to-X-50` rules nuke the pastel stops; the wildcard fallback catches the rare remaining cases. ════════════════════════════════════════════════════════════════ */ /* Kill light pastel gradient backgrounds — collapse to dark surface */ [class*="from-blue-50"],[class*="from-green-50"],[class*="from-amber-50"],[class*="from-orange-50"],[class*="from-purple-50"],[class*="from-pink-50"],[class*="from-rose-50"],[class*="from-indigo-50"],[class*="from-cyan-50"],[class*="from-teal-50"],[class*="from-red-50"],[class*="from-yellow-50"],[class*="from-emerald-50"],[class*="from-sky-50"],[class*="from-violet-50"],[class*="from-slate-50"],[class*="from-gray-50"]{ --tw-gradient-from:var(--bg-1)!important; --tw-gradient-stops:var(--bg-1),var(--bg-2)!important; } [class*="to-blue-50"],[class*="to-green-50"],[class*="to-amber-50"],[class*="to-orange-50"],[class*="to-purple-50"],[class*="to-pink-50"],[class*="to-rose-50"],[class*="to-indigo-50"],[class*="to-cyan-50"],[class*="to-teal-50"],[class*="to-red-50"],[class*="to-yellow-50"],[class*="to-emerald-50"],[class*="to-sky-50"],[class*="to-violet-50"],[class*="to-slate-50"],[class*="to-gray-50"]{ --tw-gradient-to:var(--bg-2)!important; } /* Belt-and-suspenders: any gradient-to-* div with a *-50 from/to gets a flat dark bg in case the CSS-var override is overridden by other Tailwind layers */ [class*="bg-gradient-to-"][class*="-50"]{ background-image:linear-gradient(135deg,var(--bg-1) 0%,var(--bg-2) 100%)!important; } /* Pastel border-200 rings around contact / CTA cards */ .border-blue-200,.border-green-200,.border-amber-200,.border-orange-200,.border-purple-200,.border-pink-200,.border-rose-200,.border-indigo-200,.border-cyan-200,.border-teal-200,.border-red-200,.border-yellow-200,.border-emerald-200,.border-sky-200,.border-violet-200,.border-slate-200,.border-gray-200{ border-color:var(--line-bright)!important; } /* Pastel border-100 fallback (some chips use it) */ .border-blue-100,.border-green-100,.border-amber-100,.border-orange-100,.border-purple-100,.border-pink-100,.border-rose-100,.border-indigo-100,.border-cyan-100,.border-teal-100,.border-red-100,.border-yellow-100,.border-emerald-100,.border-sky-100,.border-violet-100,.border-slate-100,.border-gray-100{ border-color:var(--line)!important; } /* `bg-white` button on contact card (the email outline button) — keep readable */ a.bg-white,button.bg-white{background:var(--bg-1)!important;color:var(--accent)!important;border-color:var(--line-bright)!important} a.bg-white:hover,button.bg-white:hover{background:var(--bg-2)!important;color:var(--accent-2)!important}