/* ========================================================================== LaporSampah — Design Tokens (adopsi JokoUI) SUMBER TUNGGAL warna, radius, shadow, dan font untuk seluruh reskin. - Light mode = :root, dark mode = class .dark pada (di-set theme.js) - Dipetakan ke utility Tailwind lewat assets/js/tailwind.config.js - Saat pindah ke Tailwind build: file ini tetap dipakai apa adanya. ========================================================================== */ :root { /* --- Brand (JokoUI lime) --- */ --primary: #65a30d; /* lime-600 — tombol/aksi utama */ --primary-foreground: #ffffff; --primary-hover: #4d7c0f; /* lime-700 */ --accent: #84cc16; /* lime-500 — aksen/highlight */ --accent-foreground: #0f172a; --green: #16a34a; /* green-600 — aksen sekunder */ /* --- Permukaan & netral (slate) --- */ --background: #f8fafc; /* slate-50 */ --foreground: #0f172a; /* slate-900 */ --card: #ffffff; --card-foreground: #0f172a; --secondary: #f1f5f9; /* slate-100 */ --secondary-foreground: #475569; /* slate-600 */ --muted: #f1f5f9; --muted-foreground: #64748b; /* slate-500 */ --border: #e2e8f0; /* slate-200 */ --ring: #65a30d; /* --- Status & kategori (KONTRAK LAMA — nilai harus tetap konsisten dengan warna marker/badge yang di-hardcode di JS/PHP) --- */ --organik: #10b981; --anorganik: #3b82f6; --b3: #ef4444; --status-pending: #f59e0b; --status-diproses: #3b82f6; --status-selesai: #10b981; --status-ditolak: #ef4444; /* --- Glassmorphism (JokoUI) --- */ --glass-bg: rgba(255, 255, 255, 0.7); --glass-border: rgba(255, 255, 255, 0.3); --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); /* --- Radius (selaras skala Tailwind; untuk CSS non-Tailwind) --- */ --radius-lg: 0.75rem; --radius-xl: 1rem; --radius-2xl: 1rem; --radius-3xl: 1.5rem; --radius-4xl: 2rem; --radius-full: 9999px; /* --- Shadow lembut (nama unik, tidak menabrak --shadow-* di style.css) --- */ --shadow-soft: 0 4px 20px -2px rgba(15, 23, 42, 0.08); --shadow-card: 0 8px 30px -4px rgba(15, 23, 42, 0.10); --shadow-lift: 0 16px 40px -8px rgba(15, 23, 42, 0.16); --shadow-glow: 0 0 24px rgba(132, 204, 22, 0.35); /* --- Gradien khas --- */ --gradient-primary: linear-gradient(135deg, #84cc16 0%, #16a34a 100%); --gradient-hero: linear-gradient(180deg, #f7fee7 0%, #f8fafc 60%); /* --- Font --- */ --font-sans: 'Poppins', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; /* --- Triplet RGB (WAJIB sinkron dengan hex di atas) --- Dipakai tailwind.config.js sebagai rgb(var(--x-rgb) / ) agar opacity modifier (bg-primary/10, ring-ring/40, dst.) berfungsi. */ --primary-rgb: 101 163 13; --primary-foreground-rgb: 255 255 255; --primary-hover-rgb: 77 124 15; --accent-rgb: 132 204 22; --accent-foreground-rgb: 15 23 42; --background-rgb: 248 250 252; --foreground-rgb: 15 23 42; --card-rgb: 255 255 255; --card-foreground-rgb: 15 23 42; --secondary-rgb: 241 245 249; --secondary-foreground-rgb: 71 85 105; --muted-rgb: 241 245 249; --muted-foreground-rgb: 100 116 139; --border-rgb: 226 232 240; --ring-rgb: 101 163 13; --organik-rgb: 16 185 129; --anorganik-rgb: 59 130 246; --b3-rgb: 239 68 68; } .dark { --primary: #bef264; /* lime-300 — kontras di latar gelap */ --primary-foreground: #0f172a; --primary-hover: #a3e635; /* lime-400 */ --accent: #a3e635; --accent-foreground: #0f172a; --green: #4ade80; --background: #0f172a; /* slate-900 */ --foreground: #f8fafc; --card: #1e293b; /* slate-800 */ --card-foreground: #f8fafc; --secondary: #334155; /* slate-700 */ --secondary-foreground: #cbd5e1; --muted: #334155; --muted-foreground: #94a3b8; --border: #334155; --ring: #a3e635; --glass-bg: rgba(30, 41, 59, 0.8); --glass-border: rgba(255, 255, 255, 0.1); --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); --shadow-soft: 0 4px 20px -2px rgba(0, 0, 0, 0.4); --shadow-card: 0 8px 30px -4px rgba(0, 0, 0, 0.45); --shadow-lift: 0 16px 40px -8px rgba(0, 0, 0, 0.55); --shadow-glow: 0 0 24px rgba(163, 230, 53, 0.25); --gradient-hero: linear-gradient(180deg, #14532d22 0%, #0f172a 60%); /* Triplet RGB dark (sinkron dengan hex dark di atas) */ --primary-rgb: 190 242 100; --primary-foreground-rgb: 15 23 42; --primary-hover-rgb: 163 230 53; --accent-rgb: 163 230 53; --accent-foreground-rgb: 15 23 42; --background-rgb: 15 23 42; --foreground-rgb: 248 250 252; --card-rgb: 30 41 59; --card-foreground-rgb: 248 250 252; --secondary-rgb: 51 65 85; --secondary-foreground-rgb: 203 213 225; --muted-rgb: 51 65 85; --muted-foreground-rgb: 148 163 184; --border-rgb: 51 65 85; --ring-rgb: 163 230 53; } /* -------------------------------------------------------------------------- Alias legacy: variabel yang DIPAKAI style.css/koreksi/corrections_gallery tetapi tidak pernah didefinisikan di sana. Didefinisikan di sini agar halaman lama tidak rusak begitu tokens.css ikut dimuat. -------------------------------------------------------------------------- */ :root { --primary-green: var(--primary); --light-green: #ecfccb; /* lime-100 */ --lighter-green: #f7fee7; /* lime-50 */ --border-gray: var(--border); --gray-400: #94a3b8; } /* -------------------------------------------------------------------------- Dasar halaman + guard pihak ketiga saat preflight Tailwind aktif -------------------------------------------------------------------------- */ body { background-color: var(--background); color: var(--foreground); font-family: var(--font-sans); } /* Preflight Tailwind memberi img{max-width:100%} — merusak tile Leaflet */ .leaflet-pane img, .leaflet-tile, .leaflet-marker-icon, .leaflet-marker-shadow { max-width: none !important; max-height: none !important; } /* Ikon Font Awesome di dalam tombol tak boleh kena reset line-height ekstrem */ .fa, .fas, .far, .fab { line-height: 1; }