/* ============================================================ theme.css — METEOR Dua tema terpisah: [data-theme="admin"] → dashboard internal (merah bata + abu muda) [data-theme="publik"] → halaman bayar & halaman lokasi (biru Facebook) Pakai: atau Mode gelap: — hanya untuk tema admin. Halaman pembeli sengaja TIDAK ikut gelap; tampilan yang dilihat pelanggan dijaga tetap satu rupa. data-mode dipasang skrip kecil di sebelum halaman digambar, dan sudah berupa hasil akhir ("gelap"/"terang") — pilihan "ikut sistem" diterjemahkan di JS. Jadi CSS cukup punya satu jalur gelap, tanpa blok kembar untuk prefers-color-scheme. ============================================================ */ /* ---------- 1. PALET MENTAH ---------- */ :root { /* Merah bata terang */ --bata-50: #FCF2EF; --bata-100: #F8DFD7; --bata-200: #F0BEAE; --bata-300: #E59780; --bata-400: #D96C4C; --bata-500: #C9452B; /* warna utama brand */ --bata-600: #AC3721; --bata-700: #8B2B19; --bata-800: #6A2113; --bata-900: #46160D; /* Abu muda — netral hangat, sengaja bukan abu biru supaya nyambung sama merah bata */ --abu-25: #FBFBFA; --abu-50: #F5F5F3; --abu-100: #ECECE9; /* background aplikasi */ --abu-200: #DEDEDA; --abu-300: #C9C9C4; --abu-400: #A8A8A2; --abu-500: #85857F; --abu-600: #66665F; --abu-700: #4A4A45; --abu-800: #2F2F2B; --abu-900: #1A1A17; /* Biru Facebook */ --fb-blue: #1877F2; --fb-blue-hover: #166FE5; --fb-blue-press: #1461CC; --fb-bg: #F0F2F5; --fb-surface: #FFFFFF; --fb-text: #050505; --fb-text-2: #65676B; --fb-border: #CED0D4; --fb-divider: #DADDE1; --fb-green: #42B72A; --fb-red: #FA383E; /* Palet malam — netral hangat, senada dengan --abu-* yang juga hangat. Sengaja bukan hitam pekat: di layar HP murah teks putih di atas #000 terlihat "bergetar", dan bayangan kartu hilang sama sekali. */ --malam-900: #1A1815; /* background aplikasi */ --malam-800: #232120; /* permukaan kartu */ --malam-700: #2C2A27; /* permukaan alternatif */ --malam-600: #38352F; /* garis tepi */ --malam-100: #EFEDE9; /* teks utama */ --malam-200: #B5B0A7; /* teks sekunder — 8,2:1 di atas --malam-900 */ /* Teks redup. Diukur bukan cuma di atas background, tapi juga di atas kartu (--malam-800) dan permukaan alternatif (--malam-700) — di sana latarnya lebih terang, jadi selisihnya yang paling tipis: 4,6:1. */ --malam-300: #979188; /* Bata di atas gelap. --bata-500 cuma 3,3:1 di sana, terlalu redup untuk teks. Nada ini terbaca 5,9:1 DUA ARAH: sebagai warna teks di atas background gelap, dan sebagai latar tombol dengan tulisan gelap di atasnya — jadi satu token cukup untuk kedua peran. */ --bata-malam: #E07C57; --bata-malam-hover: #E88F6E; --bata-malam-press: #C96A46; --bata-malam-soft: #3A241C; --bata-malam-border:#55362A; /* Warna status titik — dipakai di dua tema, harus konsisten */ --st-draft: #A8A8A2; --st-tersedia: #1F9D55; --st-dipesan: #E08700; --st-terjual: #C9452B; --st-diambil: #4A6FA5; --st-hilang: #6A2113; --st-kedaluwarsa: #C9C9C4; /* Spasi & radius */ --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-full: 999px; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-8: 48px; } /* ---------- 2. TEMA ADMIN ---------- */ [data-theme="admin"] { --bg: var(--abu-100); --surface: #FFFFFF; --surface-alt: var(--abu-50); --border: var(--abu-200); --divider: var(--abu-200); --text: var(--abu-900); --text-2: var(--abu-600); --text-3: var(--abu-500); --brand: var(--bata-500); --brand-hover: var(--bata-600); --brand-press: var(--bata-700); --brand-soft: var(--bata-50); --brand-border: var(--bata-200); --on-brand: #FFFFFF; --ok: #1F9D55; --warn: #E08700; --error: #C0271D; /* Latar lembut untuk pil status (naik/turun, peringatan, hitung mundur). Dulu ditulis langsung sebagai hex di app.css — dijadikan token supaya mode gelap tidak perlu menimpa aturannya satu per satu. */ --ok-soft: #E6F9EE; --warn-soft: #FFF4E5; --error-soft: #FFEBEE; --info: #1877F2; --info-soft: #E7F3FF; /* Tulisan di atas isian --ok / --error (tombol sukses, angka notifikasi). Di mode gelap warna status jadi terang, jadi tulisannya harus gelap. */ --on-status: #FFFFFF; /* Gelembung pratinjau balasan WhatsApp — meniru warna asli aplikasinya. */ --wa-bubble: #DCF8C6; --wa-teks: #111111; /* Dipakai 5x di app.css sebagai var(--aksen, #C9452B) tapi tidak pernah didefinisikan, jadi selama ini selalu jatuh ke hex cadangannya. */ --aksen: var(--brand); --font-display: 'Archivo', system-ui, sans-serif; --font-body: 'Inter', system-ui, -apple-system, sans-serif; --shadow-sm: 0 1px 2px rgba(26,26,23,.07); --shadow-md: 0 2px 8px rgba(26,26,23,.09); } /* ---------- 2b. TEMA ADMIN — MODE GELAP ---------- */ /* Kekhususan selektor ini (0,2,0) mengalahkan [data-theme="admin"] (0,1,0), jadi cukup menimpa token; tidak ada satu pun komponen yang perlu ditulis ulang di sini. */ [data-mode="gelap"] [data-theme="admin"] { --bg: var(--malam-900); --surface: var(--malam-800); --surface-alt: var(--malam-700); --border: var(--malam-600); --divider: var(--malam-600); --text: var(--malam-100); --text-2: var(--malam-200); --text-3: var(--malam-300); --brand: var(--bata-malam); --brand-hover: var(--bata-malam-hover); --brand-press: var(--bata-malam-press); --brand-soft: var(--bata-malam-soft); --brand-border: var(--bata-malam-border); /* Tulisan GELAP di atas isian bata — putih di atas #E07C57 cuma 2,4:1. */ --on-brand: #1F1A17; --ok: #46C97C; --warn: #F0B429; --error: #F4776B; --ok-soft: #16301F; --warn-soft: #33280F; --error-soft: #3B211F; --info: #6FA8F0; --info-soft: #1B2A3D; --on-status: #1C1917; --wa-bubble: #04594A; --wa-teks: #E7F0EA; /* Yang memisahkan lapisan di mode gelap adalah beda terang permukaan, bukan bayangan. Bayangan tetap ada, hanya untuk elemen melayang. */ --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow-md: 0 6px 18px rgba(0,0,0,.55); /* Status titik dinaikkan terangnya — #6A2113 (HILANG) praktis tak terbaca di atas latar gelap. Warna penanda di peta tidak diubah: itu diatur STATUS_COLORS di app.js dan duduk di atas ubin peta. */ --st-draft: #B4AEA4; --st-tersedia: #46C97C; --st-dipesan: #F0A93B; --st-terjual: #EF7E62; --st-diambil: #86A9DF; --st-hilang: #C98B72; --st-kedaluwarsa: #9A968D; } /* ---------- 3. TEMA PUBLIK (biru Facebook) ---------- */ [data-theme="publik"] { --bg: var(--fb-bg); --surface: var(--fb-surface); --surface-alt: var(--fb-bg); --border: var(--fb-border); --divider: var(--fb-divider); --text: var(--fb-text); --text-2: var(--fb-text-2); --text-3: var(--fb-text-2); --brand: var(--fb-blue); --brand-hover: var(--fb-blue-hover); --brand-press: var(--fb-blue-press); --brand-soft: #E7F3FF; --brand-border: #BBDBFB; --on-brand: #FFFFFF; --ok: var(--fb-green); --warn: #F7B928; --error: var(--fb-red); --ok-soft: #E3F5E1; --warn-soft: #FFF4E5; --error-soft: #FFEBEE; --info: var(--fb-blue); --info-soft: #E7F3FF; --wa-bubble: #DCF8C6; --wa-teks: #111111; --on-status: #FFFFFF; --aksen: var(--brand); /* Font sistem: nol download, penting buat sinyal tipis di lapangan */ --font-display: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-body: var(--font-display); --shadow-sm: 0 1px 2px rgba(0,0,0,.1); --shadow-md: 0 2px 12px rgba(0,0,0,.12); } /* ---------- 4. DASAR ---------- */ *, *::before, *::after { box-sizing: border-box; } /* Memberi tahu browser warna dasar halaman, supaya kolom isian bawaan, menu