/* ============================================================ 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 ============================================================ */ /* ---------- 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; /* 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; --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); } /* ---------- 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); /* 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; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; } h1, h2, h3 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.015em; margin: 0 0 var(--sp-3); } h1 { font-size: 1.6rem; } h2 { font-size: 1.25rem; } h3 { font-size: 1.05rem; } a { color: var(--brand); } /* Angka di dashboard wajib rata — jangan sampai kolom rupiah goyang */ .angka, td, .stat-nilai { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } /* ---------- 5. KOMPONEN ---------- */ .kartu { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-4); box-shadow: var(--shadow-sm); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: 10px var(--sp-4); border: 1px solid transparent; border-radius: var(--r-sm); font: inherit; font-weight: 600; cursor: pointer; transition: background .12s ease; } .btn-utama { background: var(--brand); color: var(--on-brand); } .btn-utama:hover { background: var(--brand-hover); } .btn-utama:active { background: var(--brand-press); } .btn-kedua { background: var(--surface); color: var(--text); border-color: var(--border); } .btn-kedua:hover { background: var(--surface-alt); } .btn-blok { width: 100%; padding: 13px var(--sp-4); font-size: 1.05rem; } .btn:focus-visible, .input:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } .input { width: 100%; padding: 10px var(--sp-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); font: inherit; color: var(--text); } .input::placeholder { color: var(--text-3); } /* Badge status titik */ .badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--r-full); font-size: .78rem; font-weight: 600; background: var(--surface-alt); color: var(--text-2); } .badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .badge[data-status="DRAFT"] { color: var(--st-draft); } .badge[data-status="TERSEDIA"] { color: var(--st-tersedia); } .badge[data-status="DIPESAN"] { color: var(--st-dipesan); } .badge[data-status="TERJUAL"] { color: var(--st-terjual); } .badge[data-status="DIAMBIL"] { color: var(--st-diambil); } .badge[data-status="HILANG"] { color: var(--st-hilang); } .badge[data-status="KEDALUWARSA"] { color: var(--st-kedaluwarsa); } /* Nominal transfer — elemen paling penting di halaman bayar. Sengaja dibikin paling menonjol di seluruh halaman. */ .nominal-box { background: var(--brand-soft); border: 1px solid var(--brand-border); border-radius: var(--r-md); padding: var(--sp-5); text-align: center; } .nominal-angka { font-size: 2.4rem; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--text); line-height: 1.1; } .nominal-catatan { margin-top: var(--sp-2); font-size: .9rem; font-weight: 600; color: var(--error); } /* Peringatan */ .peringatan { background: #FFF4E5; border-left: 4px solid var(--warn); border-radius: var(--r-sm); padding: var(--sp-3) var(--sp-4); font-size: .92rem; } /* Countdown */ .countdown { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 6px var(--sp-3); border-radius: var(--r-full); background: var(--surface-alt); font-weight: 600; font-variant-numeric: tabular-nums; } .countdown[data-mendesak="1"] { background: #FFEBEE; color: var(--error); } /* Halaman publik dibuka di HP — batasi lebar, kasih ruang napas */ .wadah-publik { max-width: 480px; margin: 0 auto; padding: var(--sp-4); } /* ---------- 6. AKSESIBILITAS ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }