/* ===================================================================== WEBSITE RW - SISTEM DESAIN (mobile-first, ramah warga usia lanjut) ===================================================================== Prinsip desain (lihat dokumen rencana proyek): - Font dasar besar (min 16-18px), elemen penting lebih besar lagi - Kontras tinggi (hindari abu-abu muda di atas putih) - Tombol & elemen sentuh besar (target minimal 44x44px) - Ikon + label teks sederhana, hindari istilah teknis - Mendukung 3 ukuran teks (kecil/sedang/besar) & mode gelap opsional ===================================================================== */ :root { /* --- Warna: kontras tinggi, bukan abu-abu muda di atas putih --- */ --warna-utama: #0F6E3D; /* hijau RW - bisa diganti warna_tema per RW */ --warna-utama-gelap: #0A4E2B; --warna-aksen: #B45309; /* oranye hangat untuk aksi sekunder/darurat */ --warna-bahaya: #B91C1C; --warna-sukses: #15803D; --warna-peringatan: #B45309; --warna-info: #1D4ED8; --warna-teks: #1A1A1A; --warna-teks-lembut: #4B5563; /* tetap kontras cukup, bukan abu sangat muda */ --warna-latar: #FFFFFF; --warna-latar-alt: #F3F6F4; --warna-kartu: #FFFFFF; --warna-garis: #D8DEDA; --radius: 14px; --bayangan: 0 2px 10px rgba(0,0,0,0.08); /* --- Ukuran teks dasar: bisa diubah lewat kelas ukuran-teks-* di --- */ --skala-teks: 1; --fs-dasar: calc(17px * var(--skala-teks)); --fs-kecil: calc(14px * var(--skala-teks)); --fs-besar: calc(20px * var(--skala-teks)); --fs-judul: calc(26px * var(--skala-teks)); --fs-judul-besar: calc(32px * var(--skala-teks)); --fs-penting: calc(24px * var(--skala-teks)); /* nomor telepon darurat, nominal iuran */ --target-sentuh: 48px; } html[data-ukuran-teks="kecil"] { --skala-teks: 0.9; } html[data-ukuran-teks="sedang"] { --skala-teks: 1; } html[data-ukuran-teks="besar"] { --skala-teks: 1.25; } @media (prefers-color-scheme: dark) { html:not([data-mode="terang"]) { --warna-teks: #F1F5F2; --warna-teks-lembut: #C7D0CA; --warna-latar: #141815; --warna-latar-alt: #1C211D; --warna-kartu: #20261F; --warna-garis: #333B34; --warna-utama: #3CB371; --warna-utama-gelap: #2E8B57; } } html[data-mode="gelap"] { --warna-teks: #F1F5F2; --warna-teks-lembut: #C7D0CA; --warna-latar: #141815; --warna-latar-alt: #1C211D; --warna-kartu: #20261F; --warna-garis: #333B34; --warna-utama: #3CB371; --warna-utama-gelap: #2E8B57; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: var(--fs-dasar); line-height: 1.55; color: var(--warna-teks); background: var(--warna-latar-alt); padding-bottom: env(safe-area-inset-bottom, 0); } h1, h2, h3, h4 { line-height: 1.3; margin: 0 0 .5em; font-weight: 700; } h1 { font-size: var(--fs-judul-besar); } h2 { font-size: var(--fs-judul); } h3 { font-size: var(--fs-besar); } p { margin: 0 0 1em; } a { color: var(--warna-utama-gelap); text-decoration: underline; text-underline-offset: 2px; } small, .teks-kecil { font-size: var(--fs-kecil); color: var(--warna-teks-lembut); } .teks-penting { font-size: var(--fs-penting); font-weight: 700; } img { max-width: 100%; height: auto; display: block; } /* ===================================================================== LAYOUT DASAR ===================================================================== */ .wadah { max-width: 640px; margin: 0 auto; padding: 0 16px; } .wadah-lebar { max-width: 1100px; margin: 0 auto; padding: 0 16px; } main { display: block; min-height: 60vh; padding: 20px 0 40px; } .kartu { background: var(--warna-kartu); border: 1px solid var(--warna-garis); border-radius: var(--radius); box-shadow: var(--bayangan); padding: 18px; margin-bottom: 16px; } .grid-2 { display: grid; grid-template-columns: 1fr; gap: 14px; } @media (min-width: 640px) { .grid-2 { grid-template-columns: 1fr 1fr; } } .grid-3 { display: grid; grid-template-columns: 1fr; gap: 14px; } @media (min-width: 640px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } } .halaman-kosong { text-align: center; padding: 60px 20px; color: var(--warna-teks-lembut); } /* ===================================================================== HEADER + MENU HAMBURGER ===================================================================== */ .header-situs { position: sticky; top: 0; z-index: 50; background: var(--warna-utama); color: #fff; box-shadow: var(--bayangan); } .header-situs .wadah-lebar { display: flex; align-items: center; justify-content: space-between; height: 64px; } .header-situs a { color: #fff; text-decoration: none; } .merek { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: var(--fs-besar); } .merek img { width: 36px; height: 36px; border-radius: 8px; background: #fff; } .tombol-hamburger { width: var(--target-sentuh); height: var(--target-sentuh); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; background: transparent; border: none; cursor: pointer; } .tombol-hamburger span { display: block; width: 26px; height: 3px; background: #fff; border-radius: 2px; } .menu-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 60; opacity: 0; pointer-events: none; transition: opacity .2s ease; } .menu-overlay.terbuka { opacity: 1; pointer-events: auto; } .menu-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(320px, 85vw); background: var(--warna-latar); z-index: 70; transform: translateX(100%); transition: transform .25s ease; overflow-y: auto; box-shadow: -4px 0 20px rgba(0,0,0,.2); } .menu-panel.terbuka { transform: translateX(0); } .menu-panel-header { display: flex; justify-content: space-between; align-items: center; padding: 16px; border-bottom: 1px solid var(--warna-garis); } .menu-panel-header .tutup { font-size: 28px; background: none; border: none; width: var(--target-sentuh); height: var(--target-sentuh); cursor: pointer; color: var(--warna-teks); } .menu-panel nav a { display: flex; align-items: center; gap: 14px; padding: 16px 18px; font-size: var(--fs-besar); color: var(--warna-teks); text-decoration: none; border-bottom: 1px solid var(--warna-garis); min-height: var(--target-sentuh); } .menu-panel nav a:active, .menu-panel nav a.aktif { background: var(--warna-latar-alt); color: var(--warna-utama-gelap); font-weight: 700; } .menu-panel .grup-judul { padding: 14px 18px 4px; font-size: var(--fs-kecil); text-transform: uppercase; letter-spacing: .05em; color: var(--warna-teks-lembut); } /* ===================================================================== TOMBOL ===================================================================== */ .tombol { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--target-sentuh); padding: 12px 22px; border-radius: 12px; border: 2px solid transparent; font-size: var(--fs-dasar); font-weight: 700; text-decoration: none; cursor: pointer; background: var(--warna-latar-alt); color: var(--warna-teks); } .tombol-besar { min-height: 56px; padding: 14px 26px; font-size: var(--fs-besar); width: 100%; } .tombol-utama { background: var(--warna-utama); border-color: var(--warna-utama); color: #fff; } .tombol-utama:active { background: var(--warna-utama-gelap); } .tombol-aksen { background: var(--warna-aksen); border-color: var(--warna-aksen); color: #fff; } .tombol-bahaya { background: var(--warna-bahaya); border-color: var(--warna-bahaya); color: #fff; } .tombol-garis { background: transparent; border-color: var(--warna-utama); color: var(--warna-utama-gelap); } .tombol-kecil { min-height: 40px; padding: 8px 16px; font-size: var(--fs-kecil); width: auto; } .tombol:disabled { opacity: .5; cursor: not-allowed; } .tombol-blok { display: flex; width: 100%; } /* Tombol WhatsApp mengambang (Hubungi Admin) */ .tombol-wa-mengambang { position: fixed; right: 16px; bottom: 16px; z-index: 40; width: 60px; height: 60px; border-radius: 50%; background: #25D366; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0,0,0,.25); font-size: 28px; text-decoration: none; } /* ===================================================================== POPUP "SIMPAN KE LAYAR UTAMA" (ajakan pasang PWA, muncul sekali) ===================================================================== */ .popup-instal { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 55; max-width: 480px; margin: 0 auto; background: var(--warna-kartu); border: 1px solid var(--warna-garis); border-radius: var(--radius); box-shadow: 0 8px 28px rgba(0,0,0,.22); padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0)); display: none; animation: popup-instal-masuk .35s ease; } .popup-instal.terbuka { display: block; } .popup-instal[data-konteks="internal"] { bottom: 100px; } @keyframes popup-instal-masuk { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } .popup-instal-baris { display: flex; align-items: flex-start; gap: 12px; } .popup-instal-ikon { flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; background: var(--warna-utama); color: #fff; font-size: 22px; display: flex; align-items: center; justify-content: center; } .popup-instal-isi { flex: 1; min-width: 0; } .popup-instal-isi h3 { font-size: var(--fs-dasar); margin: 0 0 4px; } .popup-instal-isi p { font-size: var(--fs-kecil); color: var(--warna-teks-lembut); margin: 0; } .popup-instal-tutup { flex-shrink: 0; background: none; border: none; font-size: 20px; line-height: 1; color: var(--warna-teks-lembut); cursor: pointer; padding: 4px; min-width: 32px; min-height: 32px; } .popup-instal-aksi { display: flex; gap: 10px; margin-top: 14px; } .popup-instal-aksi .tombol { flex: 1; } /* ===================================================================== FORMULIR ===================================================================== */ label { display: block; font-weight: 700; margin-bottom: 6px; font-size: var(--fs-dasar); } .keterangan-field { font-size: var(--fs-kecil); color: var(--warna-teks-lembut); margin-top: 4px; } .grup-form { margin-bottom: 18px; } input[type=text], input[type=password], input[type=email], input[type=tel], input[type=number], input[type=date], input[type=time], input[type=file], select, textarea { width: 100%; min-height: var(--target-sentuh); padding: 12px 14px; font-size: var(--fs-dasar); border: 2px solid var(--warna-garis); border-radius: 10px; background: var(--warna-kartu); color: var(--warna-teks); font-family: inherit; } textarea { min-height: 120px; } input:focus, select:focus, textarea:focus { outline: 3px solid var(--warna-info); outline-offset: 1px; border-color: var(--warna-info); } .pilihan-besar { display: flex; align-items: center; gap: 12px; padding: 14px; border: 2px solid var(--warna-garis); border-radius: 10px; margin-bottom: 10px; min-height: var(--target-sentuh); } .pilihan-besar input[type=checkbox], .pilihan-besar input[type=radio] { width: 26px; height: 26px; flex-shrink: 0; } .pesan-error { color: var(--warna-bahaya); font-weight: 700; font-size: var(--fs-kecil); margin-top: 6px; } /* ===================================================================== BADGE STATUS ===================================================================== */ .badge { display: inline-block; padding: 5px 12px; border-radius: 999px; font-size: var(--fs-kecil); font-weight: 800; } .badge-info { background: #DBEAFE; color: #1D4ED8; } .badge-warning { background: #FEF3C7; color: #92400E; } .badge-sukses { background: #DCFCE7; color: #15803D; } .badge-bahaya { background: #FEE2E2; color: #B91C1C; } .badge-netral { background: var(--warna-latar-alt); color: var(--warna-teks-lembut); border: 1px solid var(--warna-garis); } html[data-mode="gelap"] .badge-info, html:not([data-mode="terang"]) .badge-info { background:#1E3A8A55; } /* ===================================================================== FLASH MESSAGE / ALERT ===================================================================== */ .alert { border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; font-weight: 600; border: 2px solid transparent; } .alert-sukses { background: #DCFCE7; color: #14532D; border-color: #86EFAC; } .alert-bahaya { background: #FEE2E2; color: #7F1D1D; border-color: #FCA5A5; } .alert-info { background: #DBEAFE; color: #1E3A8A; border-color: #93C5FD; } /* ===================================================================== NAVIGASI BAWAH (dasbor internal, mobile) ===================================================================== */ .nav-bawah { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: flex; background: var(--warna-kartu); border-top: 1px solid var(--warna-garis); padding-bottom: env(safe-area-inset-bottom, 0); } .nav-bawah a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 8px 2px; min-height: var(--target-sentuh); color: var(--warna-teks-lembut); text-decoration: none; font-size: 12px; font-weight: 700; } .nav-bawah a.aktif { color: var(--warna-utama-gelap); } .nav-bawah .ikon { font-size: 22px; } main.dengan-nav-bawah { padding-bottom: 90px; } /* ===================================================================== TABEL RESPONSIF ===================================================================== */ .tabel-bungkus { overflow-x: auto; border: 1px solid var(--warna-garis); border-radius: var(--radius); } table { width: 100%; border-collapse: collapse; min-width: 480px; background: var(--warna-kartu); } th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--warna-garis); font-size: var(--fs-dasar); } th { background: var(--warna-latar-alt); font-weight: 800; } /* ===================================================================== UTILITAS ===================================================================== */ .flex { display: flex; } .flex-tengah { display: flex; align-items: center; } .flex-antara { display: flex; align-items: center; justify-content: space-between; } .flex-wrap { flex-wrap: wrap; } .gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .mt-0{margin-top:0} .mt-8{margin-top:8px} .mt-16{margin-top:16px} .mt-24{margin-top:24px} .mb-0{margin-bottom:0} .mb-8{margin-bottom:8px} .mb-16{margin-bottom:16px} .mb-24{margin-bottom:24px} .pusat { text-align: center; } .lebar-penuh { width: 100%; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; } .skip-link { position: absolute; left: -999px; top: 0; background: #fff; color: #000; padding: 10px 16px; z-index: 100; } .skip-link:focus { left: 8px; top: 8px; } /* Footer eksternal */ .footer-situs { background: var(--warna-latar-alt); border-top: 1px solid var(--warna-garis); padding: 28px 0 100px; margin-top: 30px; } .footer-situs .wadah-lebar { text-align: center; color: var(--warna-teks-lembut); font-size: var(--fs-kecil); } /* Kartu ringkasan dasbor */ .kartu-ringkas { display: flex; align-items: center; gap: 14px; } .kartu-ringkas .ikon-bulat { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 26px; background: var(--warna-latar-alt); flex-shrink: 0; } /* Peta digital (leaflet override ringan) */ #peta-digital { width: 100%; height: 420px; border-radius: var(--radius); border: 1px solid var(--warna-garis); } @media print { .header-situs, .nav-bawah, .tombol-wa-mengambang, .menu-panel, .footer-situs, .popup-instal, .jangan-print { display: none !important; } body { background: #fff; } }