/* ============================================================ * UNIFIED DARK MODE LAYER — rule 49 neutral palette * File: /assets/css/dark-mode.css * Version: 1.0 * * ONE source of truth for customer-facing dark mode. Linked from header.php * on every page (and directly from pages with their own like blog). * Scope: html.dark only → light mode 100% untouched. * * Catches BARE Tailwind classes (.bg-white) AND dark:-prefixed (.dark\:bg-gray-800) * so any page/modal/toast using Tailwind goes neutral automatically — kills the * per-page whack-a-mole. Page-specific rules (.dark .fp-left etc.) are more * specific and win over these generic ones (correct: named overrides generic). * * Palette: base #0A0A0A / card #191919 / raised #222 / border #2a2a2a / * input #1f1f1f / text #fff / secondary #a3a3a3 / tertiary #737373 * ============================================================ */ html.dark body { background:#0A0A0A !important; color:#ffffff; } /* ---- SURFACES (bare + dark:-prefixed) ---- */ html.dark .bg-white:not(.img-container):not(.keep-light):not([class*="logo-tile"]), html.dark .dark\:bg-gray-800 { background:#191919 !important; } html.dark .bg-gray-50, html.dark .bg-gray-100, html.dark .dark\:bg-gray-900 { background:#191919 !important; } html.dark .bg-gray-900, html.dark .dark\:bg-black { background:#0A0A0A !important; } html.dark .bg-gray-200, html.dark .bg-gray-300, html.dark .dark\:bg-gray-700 { background:#222222 !important; } html.dark .dark\:bg-gray-600 { background:#2a2a2a !important; } html.dark .dark\:bg-gray-700\/50 { background:rgba(255,255,255,0.04) !important; } html.dark .dark\:bg-gray-700\/60 { background:rgba(255,255,255,0.05) !important; } html.dark .dark\:bg-gray-700\/40 { background:rgba(255,255,255,0.03) !important; } /* ---- LOGO / IMAGE TILES (rule 49: stay light so dark logos read) ---- */ html.dark .img-container, html.dark .keep-light, html.dark [class*="logo-tile"] { background:#f5f5f5 !important; } /* ---- BORDERS → neutral (rule 49 c3: NO white hairlines) ---- */ html.dark .border-gray-100, html.dark .border-gray-200, html.dark .border-gray-300, html.dark .dark\:border-gray-600, html.dark .dark\:border-gray-700, html.dark .dark\:border-gray-800 { border-color:#2a2a2a !important; } /* ---- TEXT: lift dims toward white (rule 49 c2, all >=4.5:1 on #0A0A0A) ---- */ html.dark .text-gray-900, html.dark .dark\:text-white { color:#ffffff !important; } html.dark .text-gray-800, html.dark .dark\:text-gray-100, html.dark .dark\:text-gray-200 { color:#ffffff !important; } html.dark .text-gray-700, html.dark .dark\:text-gray-300 { color:#ffffff !important; } /* body penting = putih */ html.dark .text-gray-600, html.dark .dark\:text-gray-400 { color:#e5e5e5 !important; } /* body sekunder = terang */ html.dark .text-gray-500, html.dark .dark\:text-gray-500 { color:#c4c4c4 !important; } /* sub-info = kebaca */ html.dark .text-gray-400 { color:#9a9a9a !important; } /* meta/caption tetap dim (sengaja, jaga hierarchy) */ /* user req: teks penting -> putih, bukan abu. meta (gray-400) sengaja tetap dim. */ /* ---- BLUE CHROME → neutral-friendly (links stay blue, decorative blue muted) ---- */ html.dark .dark\:bg-blue-900\/20, html.dark .dark\:bg-blue-900\/30, html.dark .dark\:bg-blue-900\/40, html.dark .dark\:bg-indigo-900\/20, html.dark .dark\:bg-indigo-900\/30 { background:color-mix(in srgb,#5E9EFF 13%,transparent) !important; } html.dark .dark\:text-blue-300, html.dark .dark\:text-blue-400, html.dark .dark\:text-indigo-300, html.dark .dark\:text-indigo-400 { color:#5E9EFF !important; } html.dark .dark\:border-blue-600, html.dark .dark\:border-blue-700, html.dark .dark\:border-blue-700\/50, html.dark .dark\:border-blue-800, html.dark .dark\:border-blue-400, html.dark .dark\:border-indigo-600, html.dark .dark\:border-indigo-700 { border-color:color-mix(in srgb,#5E9EFF 35%,transparent) !important; } /* ---- BADGES (rule 49b: light pastel classes → GitHub tint in dark) ---- */ html.dark .bg-green-50, html.dark .bg-green-100 { background:color-mix(in srgb,#34E646 13%,transparent) !important; border-color:color-mix(in srgb,#34E646 35%,transparent); } html.dark .bg-red-50, html.dark .bg-red-100 { background:color-mix(in srgb,#FF6A56 13%,transparent) !important; border-color:color-mix(in srgb,#FF6A56 35%,transparent); } html.dark .bg-yellow-50,html.dark .bg-yellow-100, html.dark .bg-amber-50, html.dark .bg-amber-100 { background:color-mix(in srgb,#F0D030 13%,transparent) !important; border-color:color-mix(in srgb,#F0D030 35%,transparent); } html.dark .bg-blue-50, html.dark .bg-blue-100 { background:color-mix(in srgb,#5E9EFF 13%,transparent) !important; border-color:color-mix(in srgb,#5E9EFF 35%,transparent); } html.dark .bg-purple-50,html.dark .bg-purple-100{ background:color-mix(in srgb,#bc8cff 13%,transparent) !important; border-color:color-mix(in srgb,#bc8cff 35%,transparent); } html.dark .bg-pink-50, html.dark .bg-pink-100 { background:color-mix(in srgb,#bc8cff 13%,transparent) !important; } html.dark .text-green-700, html.dark .text-green-800 { color:#34E646 !important; } html.dark .text-red-700, html.dark .text-red-800 { color:#FF6A56 !important; } html.dark .text-yellow-700,html.dark .text-yellow-800, html.dark .text-amber-700, html.dark .text-amber-800 { color:#F0D030 !important; } html.dark .text-blue-700, html.dark .text-blue-800 { color:#5E9EFF !important; } html.dark .text-purple-700,html.dark .text-purple-800 { color:#bc8cff !important; } /* ---- INPUTS (inset) ---- */ html.dark input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=range]), html.dark textarea, html.dark select { background:#1f1f1f; color:#fff; border-color:#2a2a2a; } html.dark input::placeholder, html.dark textarea::placeholder { color:#737373; } /* ---- HOVERS ---- */ html.dark .hover\:bg-gray-50:hover, html.dark .hover\:bg-gray-100:hover { background:#222222 !important; } html.dark .hover\:bg-gray-200:hover { background:#2a2a2a !important; } /* ---- PAYMENT METHOD BOXES — accent bg in dark (user req: 4 kotak dikasih warna aksen) ---- */ /* p/index.php grid order: QRIS, DANA, OVO, ShopeePay. Raised card + subtle brand tint (light enough that dark logos like QRIS stay readable). */ html.dark .pay-opt { background:#222222 !important; border-color:#2a2a2a !important; } html.dark #payment-methods-grid > label:nth-child(1) .pay-opt { background:color-mix(in srgb,#5E9EFF 8%, #222) !important; } /* QRIS */ html.dark #payment-methods-grid > label:nth-child(2) .pay-opt { background:color-mix(in srgb,#5E9EFF 12%, #222) !important; } /* DANA blue */ html.dark #payment-methods-grid > label:nth-child(3) .pay-opt { background:color-mix(in srgb,#bc8cff 12%, #222) !important; } /* OVO purple */ html.dark #payment-methods-grid > label:nth-child(4) .pay-opt { background:color-mix(in srgb,#FF6A56 12%, #222) !important; } /* ShopeePay orange */ /* selected state: ONLY the checked box gets blue border (peer:checked ~ sibling). NOTE: do NOT target `.peer-checked\:bg-blue-50` — that class is static on EVERY box, so it'd blue-border all of them (regression fixed). Unselected stays #2a2a2a. */ html.dark input.peer:checked ~ .pay-opt { border-color:#5E9EFF !important; background:color-mix(in srgb,#5E9EFF 18%, #222) !important; } /* checkout/index.php uses .pay-card */ html.dark .pay-card { background:#222222 !important; border-color:#2a2a2a !important; } html.dark .pay-card:hover { border-color:#5E9EFF !important; } html.dark .pay-card.selected { border-color:#5E9EFF !important; background:color-mix(in srgb,#5E9EFF 14%,transparent) !important; } /* ---- PPOB category tabs (index.php + p/topup.php): inactive label WHITE in dark ---- */ /* Active tab keeps brand gradient (inline). Inactive desktop=transparent/gray text, inactive mobile bg handled in Alpine :style. CSS forces label white; icon keeps brand color via its own inline :style. */ html.dark .ppob-cat-btn { color:#fff !important; } html.dark .ppob-cat-btn span { color:#fff !important; } /* ---- JS-INJECTED INLINE-STYLED MODALS/TOASTS (bucket 1: can't catch inline via class) ---- */ /* referral caption cards (.copy-card) use bg-gradient from-*-50 — Tailwind gradient utilities aren't caught by bare-class layer, so they stay LIGHT pastel. Neutralize so white text reads. */ html.dark .copy-card { background:#191919 !important; border-color:#2a2a2a !important; } html.dark .copy-card .copy-text { color:#e5e5e5 !important; } /* generic pastel→white gradient cards that survive as light in dark (washout) */ html.dark .bg-gradient-to-br.from-green-50, html.dark .bg-gradient-to-br.from-blue-50, html.dark .bg-gradient-to-br.from-amber-50, html.dark .bg-gradient-to-r.from-green-50, html.dark .bg-gradient-to-r.from-blue-50, html.dark .bg-gradient-to-r.from-amber-50 { background:#191919 !important; } /* cart "ditambah ke keranjang" toast (assets/js/cart.js #cart-modal-card) */ html.dark #cart-modal-card { background:rgba(25,25,25,0.95) !important; border-color:#2a2a2a !important; } html.dark #cart-modal-card p:first-of-type { color:#fff !important; } html.dark #cart-modal-card p { color:#a3a3a3 !important; } html.dark #cart-modal-card button { border-color:#2a2a2a !important; color:#bdbdbd !important; } /* ---- rule 49 c3: kill stray white rings/shadows ---- */ html.dark .ring-white { --tw-ring-color:#0A0A0A !important; } html.dark .dark\:ring-gray-800 { --tw-ring-color:#191919 !important; }