/* * ============================================================ * pu-theme.css — Sistem Tema Terang/Gelap Pohon Uang (unified) * ============================================================ * Deploy path : public/assets/css/pu-theme.css * Bergantung : wtb-cinematic.css + patterns.css (import di bawah) * Konsumsi : @push('css') → * + snippet anti-flash di layout (lihat pu-theme-head-snippet.html) * + partial nav (pu-nav.html) yang membawa tombol toggle + wiring JS. * * SUMBER KEBENARAN: wtb-design-system repo Forgejo witdono/wtb-design-system * JANGAN hardcode hex di KOMPONEN — selalu pakai token (var(--pu-green), var(--primary), dll). * Hex brand HANYA boleh muncul di lapisan TOKEN (blok :root / [data-theme] di bawah). * Perubahan brand → ubah di repo wtb-design-system, BUKAN fork lokal di sini. * * KEPUTUSAN BOS (2026-08-14): gabung 2 register lama (pu-deepspace.css + * pu-porcelain.css) jadi SATU sistem tema — user MEMILIH mode (terang/gelap), * bukan satu register tetap. Menggantikan pu-deepspace.css & pu-porcelain.css. * * MEKANISME (pola theme-aware standar): * 1. Default = ikut sistem operasi (prefers-color-scheme). * 2. Toggle eksplisit (klik tombol) menang atas sistem, tersimpan di * localStorage key `pu-theme` (light|dark), lewat atribut data-theme * di . Tak ada nilai tersimpan / "system" → atribut dilepas, * prefers-color-scheme yang menentukan. * 3. Kontras semua token diverifikasi AA (>=4.5:1 teks) di KEDUA mode — * warisan langsung dari audit pu-deepspace.css (2026-08-14) + * pu-porcelain.css (2026-08-14). Nilai brand TIDAK diubah, hanya * dipindah ke selector [data-theme]/@media alih-alih file terpisah. * 4. Komponen (nav/disclaimer/tabel/badge/card/button) HANYA memakai * token semantik — nol selector kondisional-mode di lapisan komponen. * Perbedaan visual antar-mode yang BUKAN sekadar swap warna (mis. badge * Medium: chip solid emas di terang vs tint emas di gelap) diselesaikan * dengan token INDIRECTION tambahan (--pu-badge-medium-bg/-fg/-border, * dst) — bukan dengan menduplikasi CSS komponen per mode. * ============================================================ */ /* ============================================================ 1. SUMBER TOKEN + POLA WTB (urutan wajib: cinematic → patterns) ============================================================ wtb-cinematic.css :root = register Porcelain (terang) secara default — ini pas dipakai sebagai basis mode terang Pohon Uang tanpa perlu override token dasar (background/foreground/card/dll). .dark class di wtb-cinematic.css TIDAK dipakai di sini — CMS vendor (Aruna/Phoenix) mengontrol tag & kita tak bisa menambah class. Mode gelap di file ini dibangun via [data-theme="dark"] / media query, BUKAN class .dark — makanya seluruh token dasar (background, card, dst) di-mirror ulang secara eksplisit di Bagian 3 di bawah. */ @import 'wtb-cinematic.css'; @import 'patterns.css'; /* ============================================================ 2. FONT MASTER — Schibsted Grotesk + Newsreader + Hanken + JetBrains Mono ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@400;700;900&family=Newsreader:ital,opsz,wght@0,6..72,400;1,6..72,400&family=Hanken+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap'); /* ============================================================ 3. REGISTER TERANG (Porcelain) — default :root + [data-theme="light"] ============================================================ Basis warna teks/latar dasar (background/foreground/card/dll) sudah Porcelain via wtb-cinematic :root (Bagian 1) — blok ini HANYA menambah lapisan brand Pohon Uang. Ini SATU-SATUNYA tempat hex terang dinyatakan. KONTRAS AA (diverifikasi, warisan pu-porcelain.css 2026-08-14): --pu-green #1a6b3c vs Porcelain #f4f2f7 : 5.57:1 AA teks ✓ #ffffff vs --pu-green #1a6b3c : 6.13:1 AA button ✓ --foreground #1a1626 vs background #f4f2f7 : 17.0:1 AAA ✓ --muted-foreground #5b5470 vs secondary #ece8f2 : 5.81:1 AA ✓ --pu-badge-high-fg #a52d20 vs #ffffff : 5.91:1 AA ✓ --pu-badge-holiday-fg #5e3d8a vs #ffffff : 7.95:1 AAA ✓ --pu-on-gold #1a1000 vs --pu-gold #d4af37 : 9.58:1 AAA ✓ ⚠️ Emas #d4af37 di Porcelain vs bg = 1.87:1 (GAGAL AA) → HANYA dekoratif/ badge-bg (teks gelap di atasnya) via --pu-gold-text untuk teks emas. */ :root, :root[data-theme="light"] { /* ── Hijau Pohon Uang (versi Porcelain — gelap, kontras di atas terang) ── */ --pu-green: #1a6b3c; --pu-green-hover: #145830; --pu-green-bright: #3dba70; /* DEKORATIF saja (SVG/ornamen) — bukan teks */ --pu-green-dim: rgba(26, 107, 60, 0.08); --pu-green-muted: rgba(26, 107, 60, 0.22); /* ── Emas Pohon Uang — aksen dekoratif/badge di Porcelain ── */ --pu-gold: #d4af37; --pu-gold-hover: #c8991f; --pu-gold-dim: rgba(212, 175, 55, 0.12); --pu-gold-muted: rgba(212, 175, 55, 0.30); --pu-gold-text: #6b5000; /* amber gelap — teks emas AA di atas putih (7.19:1) */ /* ── Foreground di atas warna brand ── */ --pu-on-green: #ffffff; /* 6.13:1 AA vs --pu-green */ --pu-on-gold: #1a1000; /* 9.58:1 AAA vs --pu-gold */ /* ── Token indirection: label emas di disclaimer (raw gold gagal AA di terang) ── */ --pu-disclaimer-gold-label: var(--pu-gold-text); /* ── Badge dampak (Porcelain: teks gelap di atas tint terang) ── */ --pu-badge-high-fg: #a52d20; --pu-badge-high-bg: rgba(165, 45, 32, 0.12); --pu-badge-high-border: rgba(165, 45, 32, 0.28); --pu-badge-medium-bg: var(--pu-gold); /* chip SOLID emas (teks gelap di atas) */ --pu-badge-medium-fg: var(--pu-on-gold); --pu-badge-medium-border: var(--pu-gold-hover); --pu-badge-holiday-fg: #5e3d8a; --pu-badge-holiday-bg: rgba(94, 61, 138, 0.12); --pu-badge-holiday-border: rgba(94, 61, 138, 0.28); --pu-badge-currency-bg: var(--pu-green-dim); /* ── Token "netral" dipakai lintas komponen (badge Low, filter-btn) ── Porcelain: --secondary-foreground (#3a3350, 9.66:1 AAA) lebih tegas dibanding --muted-foreground di atas tint lavender terang. */ --pu-neutral-fg: var(--secondary-foreground); --pu-filter-hover-fg: var(--pu-green); /* ── Nilai kosong tabel ("—") — sengaja redup, bukan teks bermakna ── */ --pu-val-empty-color: var(--muted-foreground); --pu-val-empty-opacity: 0.6; /* ── Remap token semantik CTA/primary/brand → hijau Pohon Uang ── */ --primary: var(--pu-green); --primary-foreground: var(--pu-on-green); --ring: var(--pu-green); --brand: var(--pu-green); --brand-secondary: var(--pu-gold); --cta: var(--pu-green); --cta-foreground: var(--pu-on-green); --cta-hover: var(--pu-green-hover); --accent: rgba(26, 107, 60, 0.08); --accent-foreground: var(--pu-green); /* ── Sidebar ── */ --sidebar-primary: var(--pu-green); --sidebar-primary-foreground: var(--pu-on-green); --sidebar-accent: rgba(26, 107, 60, 0.08); --sidebar-accent-foreground: var(--pu-green); --sidebar-ring: var(--pu-green); /* ── Glass — bg + blur diwarisi wtb-cinematic Porcelain, border di-brand ── */ --glass-border: rgba(26, 107, 60, 0.16); /* ── Liquid glass — TOMBOL (ciri khas WTB, adaptasi teknik .btn--primary/ .btn--ghost di patterns.css — blur+saturate+sheen+rim — TAPI di-retint brand hijau/emas PU, bukan violet master hardcoded pattern asal). Alpha SENGAJA tinggi (bukan tembus-pandang) — identitas kaca datang dari RIM (border highlight) + SHEEN (specular atas), bukan transparansi badan tombol (selaras "ATURAN KANONIK GLASS CONTRAST" di patterns.css). Kontras diverifikasi via script WCAG (2026-08-14), backdrop terburuk porcelain/putih/hitam — lihat catatan angka di komponen Bagian 6/8/9. */ --pu-glass-cta-bg: linear-gradient(135deg, rgba(26,107,60,0.94), rgba(20,88,48,0.94)); --pu-glass-cta-bg-hover: linear-gradient(135deg, rgba(26,107,60,0.98), rgba(20,88,48,0.98)); --pu-glass-cta-border: rgba(255,255,255,0.55); --pu-glass-cta-border-hover: rgba(255,255,255,0.78); --pu-glass-cta-fg: #ffffff; --pu-glass-cta-glow: rgba(26,107,60,0.38); --pu-glass-cta-glow-hover: rgba(26,107,60,0.52); --pu-glass-ghost-bg: rgba(255,255,255,0.44); --pu-glass-ghost-bg-hover: rgba(255,255,255,0.66); --pu-glass-ghost-border: rgba(26,107,60,0.26); --pu-glass-ghost-border-hover: rgba(26,107,60,0.42); /* pill filter berwarna (High/Medium/Low) — alpha tinggi per-warna, diverifikasi individual (emas & merah lebih sensitif kontras). */ --pu-glass-active-high-bg: rgba(200,64,47,0.98); /* --destructive: 4.82:1 vs putih */ --pu-glass-active-medium-bg: rgba(212,175,55,0.97); /* --pu-gold: 8.41:1 vs on-gold */ --pu-glass-active-low-bg: rgba(236,232,242,0.97); /* --secondary: 9.21:1 vs secondary-fg */ --pu-glass-sheen-opacity: 0.55; /* ── Signature gradient Pohon Uang Porcelain ── */ --sig-gradient: linear-gradient(100deg, #1a6b3c, #2a9652, #c8991f, #d4af37); } /* ============================================================ 4. REGISTER GELAP (Deep Space) — sistem (prefers-color-scheme) + toggle eksplisit ============================================================ Dua jalur AGAR toggle SELALU menang atas preferensi sistem, dua arah: (a) @media(prefers-color-scheme:dark) + :not([data-theme="light"]) → gelap saat OS gelap DAN user belum pilih terang eksplisit. (b) :root[data-theme="dark"] (di luar media query) → gelap saat user pilih eksplisit, walau OS-nya terang. Isi kedua blok SAMA PERSIS (duplikasi disengaja — pola standar light/dark artifact: tiap jalur harus lengkap sendiri, tidak saling bergantung specificity lintas media-query). KONTRAS AA (diverifikasi, warisan pu-deepspace.css 2026-08-14): --pu-green #3dba70 vs Deep Space #0d0b1f : ~5.8:1 AA (AAA large) ✓ --pu-green-hover #4dcf84 vs Deep Space : ~7.2:1 AAA ✓ --pu-gold #d4af37 vs Deep Space : ~6.5:1 AA ✓ */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { /* ── Token dasar shadcn (mirror wtb-cinematic .dark — class .dark tak dipakai karena dikuasai CMS vendor) ── */ --background: #0d0b1f; --foreground: #edeaf5; --card: #221c34; --card-foreground: #edeaf5; --popover: #16121e; --popover-foreground: #edeaf5; --secondary: #1c1729; --secondary-foreground: #d9d3e8; --muted: #17131f; --muted-foreground: #9b92b5; --destructive: #e5654f; --destructive-foreground: #ffffff; --border: rgba(237, 234, 245, 0.13); --input: rgba(237, 234, 245, 0.18); --sidebar: #0d0b1f; --sidebar-foreground: #edeaf5; --sidebar-border: rgba(237, 234, 245, 0.09); --shadow-sm: inset 0 0 0 9999px rgba(255,255,255,0.04), inset 0 1px 0 rgba(255,255,255,0.10), 0 2px 8px rgba(0,0,0,0.5); --shadow-md: inset 0 0 0 9999px rgba(255,255,255,0.085), inset 0 1px 0 rgba(255,255,255,0.16), 0 24px 60px -24px rgba(0,0,0,0.85); --shadow-lg: inset 0 0 0 9999px rgba(255,255,255,0.14), inset 0 1px 0 rgba(255,255,255,0.22), 0 44px 96px -30px rgba(0,0,0,0.9); --glass-bg: rgba(20,16,35,0.78); --glass-border: rgba(255,255,255,0.16); --glass-blur: 14px; /* ── Liquid glass — TOMBOL (Deep Space). Alpha RENDAH+cerah = kaca lebih bening (backdrop selalu gelap → kontras aman, beda arah dgn terang: makin OPAQUE malah makin PUCAT/rendah kontras krn hijau-terang mendekati putih teks). Hover = SEDIKIT lebih transparan (efek "makin dalam"), bukan makin pekat — sudah diverifikasi WCAG, jangan balik arahnya. */ --pu-glass-cta-bg: linear-gradient(135deg, rgba(61,186,112,0.48), rgba(77,207,132,0.48)); --pu-glass-cta-bg-hover: linear-gradient(135deg, rgba(61,186,112,0.42), rgba(77,207,132,0.42)); --pu-glass-cta-border: rgba(255,255,255,0.34); --pu-glass-cta-border-hover: rgba(255,255,255,0.50); --pu-glass-cta-fg: #ffffff; --pu-glass-cta-glow: rgba(61,186,112,0.32); --pu-glass-cta-glow-hover: rgba(61,186,112,0.48); --pu-glass-ghost-bg: rgba(255,255,255,0.10); --pu-glass-ghost-bg-hover: rgba(255,255,255,0.14); --pu-glass-ghost-border: rgba(255,255,255,0.28); --pu-glass-ghost-border-hover: rgba(255,255,255,0.42); --pu-glass-active-high-bg: rgba(229,101,79,0.65); /* --destructive dark: 5.81:1 vs putih */ --pu-glass-active-medium-bg: rgba(212,175,55,0.85); /* --pu-gold: 6.64:1 vs on-gold (emas butuh alpha tinggi) */ --pu-glass-active-low-bg: rgba(28,23,41,0.55); /* --secondary dark: 5.79:1 vs muted-fg */ --pu-glass-sheen-opacity: 0.30; /* ── Lapisan brand Pohon Uang (Deep Space) ── */ --pu-green: #3dba70; --pu-green-hover: #4dcf84; --pu-green-dim: rgba(61, 186, 112, 0.12); --pu-green-muted: rgba(61, 186, 112, 0.28); --pu-gold: #d4af37; --pu-gold-hover: #e0c454; --pu-gold-dim: rgba(212, 175, 55, 0.12); --pu-gold-muted: rgba(212, 175, 55, 0.28); --pu-on-green: #071a0e; /* >12:1 AAA vs --pu-green */ --pu-on-gold: #1a1000; /* >11:1 AAA vs --pu-gold */ --pu-disclaimer-gold-label: var(--pu-gold); --pu-badge-high-fg: #f2867a; /* 4.8:1 AA vs --card */ --pu-badge-high-bg: rgba(229, 101, 79, 0.18); --pu-badge-high-border: rgba(229, 101, 79, 0.3); --pu-badge-medium-bg: var(--pu-gold-dim); /* tint — teks emas cerah di atasnya */ --pu-badge-medium-fg: var(--pu-gold); --pu-badge-medium-border: var(--pu-gold-muted); --pu-badge-holiday-fg: #b678d6; /* 4.6:1 AA vs --card */ --pu-badge-holiday-bg: rgba(107, 91, 196, 0.15); --pu-badge-holiday-border: rgba(107, 91, 196, 0.3); --pu-badge-currency-bg: rgba(61, 186, 112, 0.15); --pu-neutral-fg: var(--muted-foreground); --pu-filter-hover-fg: var(--foreground); --pu-val-empty-color: var(--muted); --pu-val-empty-opacity: 0.5; --primary: var(--pu-green); --primary-foreground: var(--pu-on-green); --ring: var(--pu-green); --brand: var(--pu-green); --brand-secondary: var(--pu-gold); --cta: var(--pu-green); --cta-foreground: var(--pu-on-green); --cta-hover: var(--pu-green-hover); --accent: rgba(61, 186, 112, 0.15); --accent-foreground: var(--pu-green); --sidebar-primary: var(--pu-green); --sidebar-primary-foreground: #071a0e; --sidebar-accent: rgba(61, 186, 112, 0.12); --sidebar-accent-foreground: var(--pu-green); --sidebar-ring: var(--pu-green); --sig-gradient: linear-gradient(100deg, #3dba70, #28a25a, #c8991f, #d4af37); } } :root[data-theme="dark"] { --background: #0d0b1f; --foreground: #edeaf5; --card: #221c34; --card-foreground: #edeaf5; --popover: #16121e; --popover-foreground: #edeaf5; --secondary: #1c1729; --secondary-foreground: #d9d3e8; --muted: #17131f; --muted-foreground: #9b92b5; --destructive: #e5654f; --destructive-foreground: #ffffff; --border: rgba(237, 234, 245, 0.13); --input: rgba(237, 234, 245, 0.18); --sidebar: #0d0b1f; --sidebar-foreground: #edeaf5; --sidebar-border: rgba(237, 234, 245, 0.09); --shadow-sm: inset 0 0 0 9999px rgba(255,255,255,0.04), inset 0 1px 0 rgba(255,255,255,0.10), 0 2px 8px rgba(0,0,0,0.5); --shadow-md: inset 0 0 0 9999px rgba(255,255,255,0.085), inset 0 1px 0 rgba(255,255,255,0.16), 0 24px 60px -24px rgba(0,0,0,0.85); --shadow-lg: inset 0 0 0 9999px rgba(255,255,255,0.14), inset 0 1px 0 rgba(255,255,255,0.22), 0 44px 96px -30px rgba(0,0,0,0.9); --glass-bg: rgba(20,16,35,0.78); --glass-border: rgba(255,255,255,0.16); --glass-blur: 14px; /* ── Liquid glass — TOMBOL (Deep Space, toggle eksplisit) — nilai identik blok @media di atas (duplikasi disengaja, lihat catatan Bagian 4). ── */ --pu-glass-cta-bg: linear-gradient(135deg, rgba(61,186,112,0.48), rgba(77,207,132,0.48)); --pu-glass-cta-bg-hover: linear-gradient(135deg, rgba(61,186,112,0.42), rgba(77,207,132,0.42)); --pu-glass-cta-border: rgba(255,255,255,0.34); --pu-glass-cta-border-hover: rgba(255,255,255,0.50); --pu-glass-cta-fg: #ffffff; --pu-glass-cta-glow: rgba(61,186,112,0.32); --pu-glass-cta-glow-hover: rgba(61,186,112,0.48); --pu-glass-ghost-bg: rgba(255,255,255,0.10); --pu-glass-ghost-bg-hover: rgba(255,255,255,0.14); --pu-glass-ghost-border: rgba(255,255,255,0.28); --pu-glass-ghost-border-hover: rgba(255,255,255,0.42); --pu-glass-active-high-bg: rgba(229,101,79,0.65); --pu-glass-active-medium-bg: rgba(212,175,55,0.85); --pu-glass-active-low-bg: rgba(28,23,41,0.55); --pu-glass-sheen-opacity: 0.30; --pu-green: #3dba70; --pu-green-hover: #4dcf84; --pu-green-dim: rgba(61, 186, 112, 0.12); --pu-green-muted: rgba(61, 186, 112, 0.28); --pu-gold: #d4af37; --pu-gold-hover: #e0c454; --pu-gold-dim: rgba(212, 175, 55, 0.12); --pu-gold-muted: rgba(212, 175, 55, 0.28); --pu-on-green: #071a0e; --pu-on-gold: #1a1000; --pu-disclaimer-gold-label: var(--pu-gold); --pu-badge-high-fg: #f2867a; --pu-badge-high-bg: rgba(229, 101, 79, 0.18); --pu-badge-high-border: rgba(229, 101, 79, 0.3); --pu-badge-medium-bg: var(--pu-gold-dim); --pu-badge-medium-fg: var(--pu-gold); --pu-badge-medium-border: var(--pu-gold-muted); --pu-badge-holiday-fg: #b678d6; --pu-badge-holiday-bg: rgba(107, 91, 196, 0.15); --pu-badge-holiday-border: rgba(107, 91, 196, 0.3); --pu-badge-currency-bg: rgba(61, 186, 112, 0.15); --pu-neutral-fg: var(--muted-foreground); --pu-filter-hover-fg: var(--foreground); --pu-val-empty-color: var(--muted); --pu-val-empty-opacity: 0.5; --primary: var(--pu-green); --primary-foreground: var(--pu-on-green); --ring: var(--pu-green); --brand: var(--pu-green); --brand-secondary: var(--pu-gold); --cta: var(--pu-green); --cta-foreground: var(--pu-on-green); --cta-hover: var(--pu-green-hover); --accent: rgba(61, 186, 112, 0.15); --accent-foreground: var(--pu-green); --sidebar-primary: var(--pu-green); --sidebar-primary-foreground: #071a0e; --sidebar-accent: rgba(61, 186, 112, 0.12); --sidebar-accent-foreground: var(--pu-green); --sidebar-ring: var(--pu-green); --sig-gradient: linear-gradient(100deg, #3dba70, #28a25a, #c8991f, #d4af37); } /* ============================================================ 5. OVERRIDE VENDOR CMS (Aruna/Phoenix) — mode-agnostic ============================================================ Deklarasi SEKALI SAJA, tanpa syarat mode: setiap nilai di sini adalah var() yang merujuk token semantik di Bagian 3/4. Custom property CSS di-resolve LAZY memakai nilai token yang sedang menang di elemen tsb — jadi --ph-heading otomatis ikut --foreground berganti mode tanpa perlu diduplikasi per [data-theme]. Ini prinsip inti sistem token bersatu (bukan 2 file terpisah lagi). */ :root { --ph-heading: var(--foreground); --ph-muted: var(--muted-foreground); --ph-bg: var(--background); --ph-surface: var(--card); --ph-border: var(--border); --ph-primary: var(--primary); --ph-primary-hover: var(--cta-hover); --ph-text: var(--foreground); --ph-text-muted: var(--muted-foreground); /* Bootstrap v5 body override */ --bs-body-bg: var(--background); --bs-body-color: var(--foreground); --bs-border-color: var(--border); } /* ============================================================ 6. TOMBOL TOGGLE TEMA — komponen (token-only, mode-agnostic) ============================================================ Ikon matahari/bulan: KEDUANYA ada di DOM, visibility diatur CSS murni berdasarkan mode aktif (bukan JS) — JS hanya menulis atribut data-theme + localStorage + aria-*. Ikon yang TAMPIL = mode yang akan AKTIF setelah diklik (konvensi saklar): mode terang aktif → tampil ikon bulan (klik → gelap); mode gelap aktif → tampil ikon matahari (klik → terang). */ .pu-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex-shrink: 0; padding: 0; position: relative; isolation: isolate; color: var(--muted-foreground); background: var(--pu-glass-ghost-bg); -webkit-backdrop-filter: blur(8px) saturate(185%); backdrop-filter: blur(8px) saturate(185%); border: 1px solid var(--pu-glass-ghost-border); border-radius: var(--radius-full); cursor: pointer; box-shadow: inset 0 1px 1px rgba(255,255,255,0.55), inset 0 -1px 1px rgba(255,255,255,0.14), 0 2px 8px -4px rgba(26,22,38,0.10); transition: color var(--duration-fast) var(--ease-hover), background var(--duration-fast) var(--ease-hover), border-color var(--duration-fast) var(--ease-hover), box-shadow var(--duration-fast) var(--ease-hover); } .pu-theme-toggle:hover, .pu-theme-toggle:focus-visible { color: var(--pu-green); background: var(--pu-glass-ghost-bg-hover); border-color: var(--pu-glass-ghost-border-hover); } /* specular sheen — arc cahaya di tepi atas lingkaran (teknik sama dgn .btn--ghost::after / .card::after di patterns.css, radius mengikuti). */ .pu-theme-toggle::after { content: ''; position: absolute; left: 12%; right: 12%; top: 1px; height: 46%; border-radius: inherit; background: linear-gradient(to bottom, rgba(255,255,255,0.55), rgba(255,255,255,0)); opacity: var(--pu-glass-sheen-opacity); pointer-events: none; } .pu-theme-icon { width: 18px; height: 18px; display: none; } /* Default (terang, tanpa media/atribut yang cocok) → tampil ikon bulan */ .pu-icon-moon { display: block; } .pu-icon-sun { display: none; } /* Gelap via sistem (dan belum override terang eksplisit) → tampil matahari */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pu-icon-sun { display: block; } :root:not([data-theme="light"]) .pu-icon-moon { display: none; } } /* Gelap via toggle eksplisit → tampil matahari (menang di kedua arah) */ :root[data-theme="dark"] .pu-icon-sun { display: block; } :root[data-theme="dark"] .pu-icon-moon { display: none; } /* ============================================================ 7. KOMPONEN DISCLAIMER POHON UANG (token-only) ============================================================ */ .pu-disclaimer { background: var(--pu-green-dim); border: 1px solid var(--pu-green-muted); border-left: 3px solid var(--pu-green); border-radius: var(--radius-card); padding: var(--space-4) var(--space-6); font-size: var(--text-sm); color: var(--foreground); line-height: 1.65; } .pu-disclaimer strong, .pu-disclaimer .pu-disclaimer-label { display: block; color: var(--pu-green); font-family: var(--ff-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: var(--space-2); } /* Varian emas — untuk info/warning (bukan edukasi) */ .pu-disclaimer--gold { background: var(--pu-gold-dim); border-color: var(--pu-gold-muted); border-left-color: var(--pu-gold); } .pu-disclaimer--gold strong, .pu-disclaimer--gold .pu-disclaimer-label { color: var(--pu-disclaimer-gold-label); } /* ============================================================ 8. KOMPONEN KALENDER EKONOMI (token-only) ============================================================ */ .pu-cal { max-width: 1100px; margin: 0 auto; padding: var(--space-8) var(--space-4) var(--space-20); font-family: var(--ff-body); } .pu-cal-hero { text-align: center; margin-bottom: var(--space-8); } .pu-cal-hero h1 { font-family: var(--ff-display); font-size: var(--text-h1); font-weight: 700; letter-spacing: -0.025em; line-height: 1.08; color: var(--foreground); margin-bottom: var(--space-3); } .pu-cal-hero p { color: var(--muted-foreground); font-size: var(--text-sm); } .pu-cal-meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-5); font-size: var(--text-xs); color: var(--muted-foreground); } .pu-cal-attribution a { color: var(--pu-green); text-decoration: underline; } .pu-cal-filters { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-6); } /* ── Liquid glass — pill filter (rest = kaca netral "ghost", active = kaca berwarna per kategori). Alpha & pemilihan warna diverifikasi WCAG AA per state (lihat token Bagian 3/4) — JANGAN turunkan alpha token active-* tanpa re-cek kontras (emas & merah lebih sensitif). */ .pu-filter-btn { padding: var(--space-2) var(--space-4); border-radius: var(--radius-full); border: 1px solid var(--pu-glass-ghost-border); background: var(--pu-glass-ghost-bg); -webkit-backdrop-filter: blur(8px) saturate(185%); backdrop-filter: blur(8px) saturate(185%); cursor: pointer; font-size: var(--text-xs); font-family: var(--ff-body); font-weight: 500; color: var(--pu-neutral-fg); position: relative; isolation: isolate; box-shadow: inset 0 1px 1px rgba(255,255,255,0.55), inset 0 -1px 1px rgba(255,255,255,0.14); transition: background var(--duration-normal) var(--ease-hover), border-color var(--duration-normal) var(--ease-hover), color var(--duration-normal) var(--ease-hover), box-shadow var(--duration-normal) var(--ease-hover), transform var(--duration-fast) var(--ease-hover); white-space: nowrap; } .pu-filter-btn::after { content: ''; position: absolute; left: 7%; right: 7%; top: 1px; height: 46%; border-radius: inherit; background: linear-gradient(to bottom, rgba(255,255,255,0.55), rgba(255,255,255,0)); opacity: var(--pu-glass-sheen-opacity); pointer-events: none; } .pu-filter-btn:hover { background: var(--pu-glass-ghost-bg-hover); border-color: var(--pu-glass-ghost-border-hover); color: var(--pu-filter-hover-fg); transform: translateY(-1px); } .pu-filter-btn:active { transform: translateY(0); } .pu-filter-btn.active { background: var(--pu-glass-cta-bg); color: var(--pu-glass-cta-fg); border-color: var(--pu-glass-cta-border); font-weight: 600; box-shadow: inset 0 1px 1px rgba(255,255,255,0.75), inset 0 -1px 1px rgba(255,255,255,0.20), 0 6px 16px -8px var(--pu-glass-cta-glow); } .pu-filter-btn.active:hover { background: var(--pu-glass-cta-bg-hover); border-color: var(--pu-glass-cta-border-hover); box-shadow: inset 0 1px 1px rgba(255,255,255,0.85), inset 0 -1px 1px rgba(255,255,255,0.24), 0 8px 20px -8px var(--pu-glass-cta-glow-hover); } .pu-filter-btn[data-filter="High"].active { background: var(--pu-glass-active-high-bg); border-color: var(--pu-glass-cta-border); color: var(--destructive-foreground); } .pu-filter-btn[data-filter="Medium"].active { background: var(--pu-glass-active-medium-bg); border-color: var(--pu-glass-cta-border); color: var(--pu-on-gold); } .pu-filter-btn[data-filter="Low"].active { background: var(--pu-glass-active-low-bg); border-color: var(--pu-glass-ghost-border-hover); color: var(--pu-neutral-fg); font-weight: 500; } .pu-cal-day { margin-bottom: var(--space-8); } .pu-cal-day-heading { font-family: var(--ff-display); font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pu-green); border-bottom: 1px solid var(--pu-green-muted); padding-bottom: var(--space-2); margin-bottom: var(--space-4); } .pu-cal-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); } .pu-cal-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); font-family: var(--ff-body); } .pu-cal-table th { text-align: left; padding: var(--space-3) var(--space-4); background: var(--muted); border-bottom: 1px solid var(--border); color: var(--muted-foreground); font-family: var(--ff-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; } .pu-cal-table td { padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--border); vertical-align: middle; color: var(--card-foreground); } .pu-cal-table tr:last-child td { border-bottom: none; } .pu-cal-table tr:hover td { background: var(--secondary); } .pu-badge-currency { display: inline-block; padding: 2px var(--space-2); border-radius: var(--radius-md); font-family: var(--ff-mono); font-weight: 700; font-size: 0.7rem; letter-spacing: 0.06em; background: var(--pu-badge-currency-bg); color: var(--pu-green); border: 1px solid var(--pu-green-muted); } .pu-badge-impact { display: inline-block; padding: 2px var(--space-3); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 600; white-space: nowrap; } .pu-badge-High { background: var(--pu-badge-high-bg); color: var(--pu-badge-high-fg); border: 1px solid var(--pu-badge-high-border); } .pu-badge-Medium { background: var(--pu-badge-medium-bg); color: var(--pu-badge-medium-fg); border: 1px solid var(--pu-badge-medium-border); } .pu-badge-Low { background: var(--secondary); color: var(--pu-neutral-fg); border: 1px solid var(--border); } .pu-badge-Holiday { background: var(--pu-badge-holiday-bg); color: var(--pu-badge-holiday-fg); border: 1px solid var(--pu-badge-holiday-border); } .pu-badge-Unknown { background: var(--secondary); color: var(--muted-foreground); border: 1px solid var(--border); } .pu-actual-val { font-weight: 600; color: var(--pu-green); } .pu-val-empty { color: var(--pu-val-empty-color); opacity: var(--pu-val-empty-opacity); } .pu-cal-empty { text-align: center; padding: var(--space-12) var(--space-4); color: var(--muted-foreground); border: 1px dashed var(--border); border-radius: var(--radius-card); } .pu-cal-empty h2 { font-size: var(--text-h3); margin-bottom: var(--space-2); color: var(--foreground); } .pu-cal-footer-note { margin-top: var(--space-10); font-size: var(--text-xs); color: var(--muted-foreground); text-align: center; } .pu-cal-footer-note a { color: var(--pu-green); text-decoration: underline; } @media (max-width: 640px) { .pu-cal-table th:nth-child(6), .pu-cal-table td:nth-child(6) { display: none; } .pu-cal-hero h1 { font-size: var(--text-h2); } } @media (max-width: 480px) { .pu-cal { padding-inline: var(--space-3); } } /* ============================================================ 9. KOMPONEN NAV POHON UANG (token-only — LESSON-208 fix tetap berlaku) ============================================================ Dibangun di CSS register baru — TIDAK bergantung pohon-uang.css lama, class .pu-page, atau class .puk-*. Nol selector kondisional-mode di sini; setiap warna via token semantik yang sudah berganti otomatis per [data-theme]/prefers-color-scheme (Bagian 3/4). Verify: computed display:flex + position:sticky di KEDUA mode. */ .pu-nav { position: sticky; top: 0; z-index: 900; width: 100%; height: 64px; background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); border-bottom: 1px solid var(--glass-border); } .pu-nav-inner { display: flex; align-items: center; gap: var(--space-4); max-width: 1200px; margin: 0 auto; padding: 0 var(--space-6); height: 100%; } .pu-brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; text-decoration: none; font-family: var(--ff-display); font-weight: 700; font-size: 1.125rem; color: var(--foreground); white-space: nowrap; letter-spacing: -0.015em; transition: opacity var(--duration-fast) var(--ease-hover); } .pu-brand:hover, .pu-brand:focus-visible { opacity: 0.88; } /* ── Logo pohon TRANSPARAN, sadar-tema (arahan Bos 2026-08-15: hilangkan tile/gradasi square lama, logo MEMBAUR dengan background nav — nol squircle, nol ring, nol shadow, nol bingkai). Dua aset PNG transparan (bukan satu tile opaque): varian CREAM untuk Deep Space (gelap), varian hijau-tua #1a6b3c untuk Porcelain (terang). Toggle CSS murni via [data-theme]/prefers-color-scheme — pola IDENTIK dengan toggle ikon matahari/bulan di Bagian 6 (sudah teruji, nol JS tambahan diperlukan). */ .pu-logo-wrap { display: inline-flex; align-items: center; flex-shrink: 0; height: 30px; } .pu-logo { display: block; height: 30px; width: auto; object-fit: contain; } /* Default (terang, tanpa media/atribut yang cocok) → varian hijau-tua */ .pu-logo-dark { display: none; } .pu-logo-light { display: block; } /* Gelap via sistem (dan belum override terang eksplisit) → varian cream */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pu-logo-dark { display: block; } :root:not([data-theme="light"]) .pu-logo-light { display: none; } } /* Gelap via toggle eksplisit → varian cream (menang di kedua arah) */ :root[data-theme="dark"] .pu-logo-dark { display: block; } :root[data-theme="dark"] .pu-logo-light { display: none; } .pu-brand-name { color: var(--foreground); } .pu-nav-links { display: flex; align-items: center; gap: var(--space-1); list-style: none; margin: 0; padding: 0; flex: 1; white-space: nowrap; overflow: visible; } .pu-nav-links > li { position: relative; } .pu-nav-link { display: flex; align-items: center; gap: 4px; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); font-family: var(--ff-body); font-size: var(--text-sm); font-weight: 500; color: var(--muted-foreground); text-decoration: none; transition: color var(--duration-fast) var(--ease-hover), background var(--duration-fast) var(--ease-hover); white-space: nowrap; cursor: pointer; background: none; border: none; } .pu-nav-link:hover, .pu-nav-link:focus-visible { color: var(--foreground); background: var(--accent); } .pu-nav-chevron { width: 14px; height: 14px; flex-shrink: 0; transition: transform var(--duration-fast) var(--ease-hover); color: var(--muted-foreground); } /* ── Liquid glass — trigger "Tools ▾" (satu-satunya nav-link dgn pill kaca permanen di rest state — menandai ia kontrol/dropdown, bukan tautan biasa; Kelas/EA Builder/Blog/Trainer TETAP plain-text+hover seperti semula, nol regresi ke nav yang sudah diverifikasi LESSON-208). ── */ .pu-nav-dropdown-trigger { position: relative; isolation: isolate; background: var(--pu-glass-ghost-bg); -webkit-backdrop-filter: blur(8px) saturate(185%); backdrop-filter: blur(8px) saturate(185%); border: 1px solid var(--pu-glass-ghost-border); border-radius: var(--radius-full); box-shadow: inset 0 1px 1px rgba(255,255,255,0.50), inset 0 -1px 1px rgba(255,255,255,0.12); } .pu-nav-dropdown-trigger::after { content: ''; position: absolute; left: 10%; right: 10%; top: 1px; height: 46%; border-radius: inherit; background: linear-gradient(to bottom, rgba(255,255,255,0.55), rgba(255,255,255,0)); opacity: var(--pu-glass-sheen-opacity); pointer-events: none; } .pu-nav-dropdown-trigger:hover, .pu-nav-dropdown-trigger:focus-visible { background: var(--pu-glass-ghost-bg-hover); border-color: var(--pu-glass-ghost-border-hover); } .pu-nav-dropdown { position: relative; } .pu-nav-dropdown:hover .pu-dropdown-panel, .pu-nav-dropdown:focus-within .pu-dropdown-panel { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); pointer-events: all; } .pu-nav-dropdown:hover .pu-nav-chevron, .pu-nav-dropdown:focus-within .pu-nav-chevron { transform: rotate(180deg); } .pu-dropdown-panel { position: absolute; top: calc(100% + var(--space-2)); left: 50%; transform: translateX(-50%) translateY(-6px); min-width: 240px; background: var(--popover); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-md); padding: var(--space-2); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--duration-fast) var(--ease-hover), transform var(--duration-fast) var(--ease-hover), visibility 0s var(--duration-fast); z-index: 1000; } .pu-dropdown-panel::before { content: ''; position: absolute; top: -10px; left: 0; right: 0; height: 10px; } .pu-dropdown-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); font-size: var(--text-sm); font-family: var(--ff-body); color: var(--popover-foreground); text-decoration: none; transition: background var(--duration-fast) var(--ease-hover), color var(--duration-fast) var(--ease-hover); } .pu-dropdown-item:hover, .pu-dropdown-item:focus-visible { background: var(--accent); color: var(--accent-foreground); } .pu-dropdown-item-icon { width: 20px; height: 20px; flex-shrink: 0; color: var(--pu-green); } .pu-nav-actions { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; margin-left: auto; } /* ── Liquid glass — "Masuk" (pill ghost, sekunder terhadap CTA hijau) ── */ .pu-nav-login { display: inline-flex; align-items: center; padding: var(--space-2) var(--space-4); border-radius: var(--radius-full); border: 1px solid var(--pu-glass-ghost-border); background: var(--pu-glass-ghost-bg); -webkit-backdrop-filter: blur(8px) saturate(185%); backdrop-filter: blur(8px) saturate(185%); font-family: var(--ff-body); font-size: var(--text-sm); font-weight: 500; color: var(--muted-foreground); text-decoration: none; white-space: nowrap; position: relative; isolation: isolate; box-shadow: inset 0 1px 1px rgba(255,255,255,0.55), inset 0 -1px 1px rgba(255,255,255,0.14); transition: color var(--duration-fast) var(--ease-hover), background var(--duration-fast) var(--ease-hover), border-color var(--duration-fast) var(--ease-hover); } .pu-nav-login::after { content: ''; position: absolute; left: 7%; right: 7%; top: 1px; height: 46%; border-radius: inherit; background: linear-gradient(to bottom, rgba(255,255,255,0.55), rgba(255,255,255,0)); opacity: var(--pu-glass-sheen-opacity); pointer-events: none; } .pu-nav-login:hover { color: var(--foreground); background: var(--pu-glass-ghost-bg-hover); border-color: var(--pu-glass-ghost-border-hover); } /* ── Liquid glass — CTA primer "Daftar Gratis" (kaca hijau near-opaque — identitas kaca dari rim+sheen, kontras≈solid, LIHAT token Bagian 3/4 utk angka kontras terverifikasi). ── */ .pu-nav-cta { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-5); border-radius: var(--radius-full); background: var(--pu-glass-cta-bg); -webkit-backdrop-filter: blur(8px) saturate(185%); backdrop-filter: blur(8px) saturate(185%); border: 1px solid var(--pu-glass-cta-border); color: var(--pu-glass-cta-fg); font-family: var(--ff-body); font-size: var(--text-sm); font-weight: 600; text-decoration: none; white-space: nowrap; position: relative; isolation: isolate; text-shadow: 0 1px 4px rgba(7,26,14,0.30); box-shadow: inset 0 1px 1px rgba(255,255,255,0.80), inset 0 -1px 1px rgba(255,255,255,0.22), 0 8px 22px -10px var(--pu-glass-cta-glow); transition: background var(--duration-fast) var(--ease-hover), border-color var(--duration-fast) var(--ease-hover), box-shadow var(--duration-fast) var(--ease-hover), transform var(--duration-fast) var(--ease-hover); } .pu-nav-cta::after { content: ''; position: absolute; left: 7%; right: 7%; top: 1px; height: 46%; border-radius: inherit; background: linear-gradient(to bottom, rgba(255,255,255,0.60), rgba(255,255,255,0)); opacity: var(--pu-glass-sheen-opacity); pointer-events: none; } .pu-nav-cta:hover { background: var(--pu-glass-cta-bg-hover); border-color: var(--pu-glass-cta-border-hover); transform: translateY(-1px); box-shadow: inset 0 1px 1px rgba(255,255,255,0.90), inset 0 -1px 1px rgba(255,255,255,0.28), 0 12px 28px -10px var(--pu-glass-cta-glow-hover); } .pu-nav-cta:active { transform: translateY(0); } /* Grup kanan: toggle tema + burger — selalu terlihat di kedua breakpoint. Desktop: mengikuti .pu-nav-actions (margin-left:auto) di sisi kanan. Mobile: .pu-nav-actions lenyap (display:none) → grup ini pegang sendiri margin-left:auto agar tetap menempel ke tepi kanan. */ .pu-nav-controls { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; } .pu-burger { display: none; flex-shrink: 0; padding: var(--space-2); min-width: 44px; min-height: 44px; color: var(--foreground); background: none; border: none; border-radius: var(--radius-md); cursor: pointer; transition: background var(--duration-fast) var(--ease-hover); } .pu-burger:hover { background: var(--accent); } .pu-burger svg { width: 24px; height: 24px; display: block; } .pu-mobile-menu { position: fixed; top: 64px; left: 0; right: 0; bottom: 0; background: var(--background); z-index: 850; overflow-y: auto; padding: var(--space-6) var(--space-4); flex-direction: column; gap: var(--space-1); display: none; border-top: 1px solid var(--border); } .pu-mobile-menu.open { display: flex; } .pu-mobile-link { display: flex; align-items: center; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); font-size: var(--text-base); font-family: var(--ff-body); font-weight: 500; color: var(--foreground); text-decoration: none; transition: background var(--duration-fast) var(--ease-hover); } .pu-mobile-link:hover { background: var(--accent); } .pu-mobile-section-label { font-family: var(--ff-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-foreground); padding: var(--space-4) var(--space-4) var(--space-2); margin-top: var(--space-2); } .pu-mobile-actions { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border); } /* ── Liquid glass — CTA + "Masuk" mobile (nilai identik varian desktop, token sudah mode-aware — tinggal pasang). ── */ .pu-mobile-cta { display: flex; justify-content: center; align-items: center; padding: var(--space-3) var(--space-6); border-radius: var(--radius-full); background: var(--pu-glass-cta-bg); -webkit-backdrop-filter: blur(8px) saturate(185%); backdrop-filter: blur(8px) saturate(185%); border: 1px solid var(--pu-glass-cta-border); color: var(--pu-glass-cta-fg); font-family: var(--ff-body); font-size: var(--text-base); font-weight: 600; text-decoration: none; position: relative; isolation: isolate; text-shadow: 0 1px 4px rgba(7,26,14,0.30); box-shadow: inset 0 1px 1px rgba(255,255,255,0.80), inset 0 -1px 1px rgba(255,255,255,0.22), 0 8px 22px -10px var(--pu-glass-cta-glow); transition: background var(--duration-fast) var(--ease-hover), border-color var(--duration-fast) var(--ease-hover); } .pu-mobile-cta::after { content: ''; position: absolute; left: 7%; right: 7%; top: 1px; height: 46%; border-radius: inherit; background: linear-gradient(to bottom, rgba(255,255,255,0.60), rgba(255,255,255,0)); opacity: var(--pu-glass-sheen-opacity); pointer-events: none; } .pu-mobile-cta:hover { background: var(--pu-glass-cta-bg-hover); border-color: var(--pu-glass-cta-border-hover); } .pu-mobile-login { display: flex; justify-content: center; align-items: center; padding: var(--space-3) var(--space-4); border-radius: var(--radius-full); border: 1px solid var(--pu-glass-ghost-border); background: var(--pu-glass-ghost-bg); -webkit-backdrop-filter: blur(8px) saturate(185%); backdrop-filter: blur(8px) saturate(185%); color: var(--muted-foreground); font-size: var(--text-sm); text-decoration: none; margin-top: var(--space-2); transition: background var(--duration-fast) var(--ease-hover), border-color var(--duration-fast) var(--ease-hover), color var(--duration-fast) var(--ease-hover); } .pu-mobile-login:hover { color: var(--foreground); background: var(--pu-glass-ghost-bg-hover); border-color: var(--pu-glass-ghost-border-hover); } @media (max-width: 768px) { .pu-nav-links, .pu-nav-actions { display: none; } .pu-nav-controls { margin-left: auto; } .pu-burger { display: flex; } .pu-nav-inner { padding: 0 var(--space-4); gap: var(--space-3); } } /* ============================================================ 10. FALLBACK — browser TANPA backdrop-filter (liquid glass tombol) ============================================================ patterns.css sudah punya fallback utk .card (@supports not ...) tapi BELUM utk .btn--primary/.btn--ghost — gap upstream yang di-tutup di sini secara lokal (layak diusulkan balik ke wtb-design-system: base .btn--primary/.btn--ghost juga butuh blok ini). Prinsip: browser tanpa backdrop-filter dapat SURFACE SOLID setara (bukan tembus/bocor) — nol regresi kontras (alpha glass sudah tinggi, jadi solid equivalent-nya praktis warna yang sama, cuma tanpa blur+sheen). */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .pu-nav-cta, .pu-mobile-cta { background: var(--pu-green); -webkit-backdrop-filter: none; backdrop-filter: none; border-color: var(--pu-green); } .pu-nav-cta:hover, .pu-mobile-cta:hover { background: var(--pu-green-hover); border-color: var(--pu-green-hover); } .pu-nav-login, .pu-mobile-login, .pu-theme-toggle, .pu-nav-dropdown-trigger, .pu-filter-btn { background: var(--secondary); -webkit-backdrop-filter: none; backdrop-filter: none; border-color: var(--border); } .pu-nav-login:hover, .pu-mobile-login:hover, .pu-theme-toggle:hover, .pu-nav-dropdown-trigger:hover, .pu-filter-btn:hover { background: var(--accent); border-color: var(--pu-green-muted); } .pu-filter-btn.active { background: var(--pu-green); color: var(--pu-on-green); border-color: var(--pu-green); } .pu-filter-btn[data-filter="High"].active { background: var(--destructive); border-color: var(--destructive); color: var(--destructive-foreground); } .pu-filter-btn[data-filter="Medium"].active { background: var(--pu-gold); border-color: var(--pu-gold); color: var(--pu-on-gold); } .pu-filter-btn[data-filter="Low"].active { background: var(--secondary); border-color: var(--border); color: var(--pu-neutral-fg); } /* Matikan sheen — dekorasi kaca tak relevan di surface solid */ .pu-nav-cta::after, .pu-mobile-cta::after, .pu-nav-login::after, .pu-theme-toggle::after, .pu-nav-dropdown-trigger::after, .pu-filter-btn::after { display: none; } }