/* WebPies — dark theme (compiled from scss/theme.scss). Light is the default (the :root tokens in components.css). Adding the .theme-dark class on swaps the surface/ink tokens to dark values. Intentionally-dark sections (bg-ink / bg-[var(--ink)]) are kept dark so they read the same in both themes; only their cream-coloured text is re-lightened. */ html.theme-dark{ --cream:#101315; --cream-2:#1a1e22; --ink:#f2eee5; --ink-2:#e7e2d8; --muted:#9b988f; --line:rgba(242,238,229,.14); --lime:#c8f25c; --lime-deep:#9fd031; } /* keep the already-dark feature sections dark (they'd otherwise invert) */ html.theme-dark .bg-ink, html.theme-dark [class*="bg-[var(--ink)]"]{ background:#0a0c0e; color:var(--ink); } /* code window + any always-dark surface that sets background:var(--ink) in CSS */ html.theme-dark .codewin{ background:#0a0c0e; } html.theme-dark .bg-ink [class*="text-[var(--cream)]"], html.theme-dark [class*="bg-[var(--ink)]"] [class*="text-[var(--cream)]"]{ color:var(--ink) !important; } /* grain: faint light speckle instead of dark */ html.theme-dark .grain{ background-image:radial-gradient(rgba(255,255,255,.03) 1px, transparent 1px); } /* header chrome in dark */ html.theme-dark .scrolled{ background:rgba(16,19,21,.82); border-bottom-color:var(--line); } html.theme-dark #nav.stk-float > div{ background:rgba(16,19,21,.85); } /* placeholders */ html.theme-dark .ph{ background:repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 1px, transparent 1px 10px), var(--cream-2); } /* Service cards: keep the hover surface DARK in dark mode. The base :hover uses background:var(--ink) (light in dark mode), which would hide the light hover-text. Darken on hover instead, keeping text light. */ html.theme-dark .service-card:hover{ background:#0a0c0e; color:var(--ink); } /* Lime surfaces always need DARK text — the swapped --ink is light in dark mode, so buttons/badges/highlights on lime would otherwise be light-on-lime. */ html.theme-dark .btn-lime, html.theme-dark .bg-lime, html.theme-dark .badge-deal, html.theme-dark #nav.stk-invert .btn-ink{ color:#0d0f12 !important; } /* theme toggle icon swap */ .th-ic{ display:none; } html:not(.theme-dark) .th-moon{ display:block; } html.theme-dark .th-sun{ display:block; }