/* ============================================================ PERUHAN — Design System Palette: Forest + Stone + Amber (satu accent) Font: Plus Jakarta Sans (body) / Outfit (display) ============================================================ */ /* ---------- 1. Tokens ---------- */ @font-face{font-family:'PJS';src:url('../fonts/pjs-latin.woff2') format('woff2');font-weight:200 800;font-display:swap;font-style:normal} @font-face{font-family:'PJS';src:url('../fonts/pjs-ext.woff2') format('woff2');font-weight:200 800;font-display:swap;font-style:normal;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'Outfit';src:url('../fonts/outfit-latin.woff2') format('woff2');font-weight:100 900;font-display:swap;font-style:normal} @font-face{font-family:'Outfit';src:url('../fonts/outfit-ext.woff2') format('woff2');font-weight:100 900;font-display:swap;font-style:normal;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} :root{ /* colour roles */ --brand:#12513c; /* deep forest - structure */ --brand-ink:#0c3b2b; --brand-soft:#e4efe9; --accent:#c8791a; /* amber - the single accent */ /* warna teks/ikon DI ATAS latar --brand. Di mode terang --brand gelap (butuh teks putih), di mode gelap --brand terang (butuh teks gelap). Token ini yang membuat avatar "S" selalu terbaca di kedua mode. */ --on-brand:#fff; /* teks/ikon DI ATAS latar --accent (amber). Amber itu terang di KEDUA mode, jadi teksnya harus selalu gelap. Versi lama `color:#fff` = kontras 1.05 (putih di atas amber) -> tombol "Lihat Agenda" nyaris tak terbaca. */ --on-accent:#3a2405; /* teks di atas latar --brand-ink (footer). --brand-ink itu hijau GELAP di mode terang tapi hijau TERANG di mode gelap, jadi teksnya harus ikut. */ --on-brand-ink:#fff; /* PITA GELAP (hero & footer). --brand-ink berubah jadi hijau TERANG di mode gelap, sehingga teks putih di atasnya jadi kontras 1.45. Pita ini memang harus tetap gelap di KEDUA mode, jadi pakai token sendiri. */ --band:#0c3b2b; --on-band:#fff; --accent-soft:#fdf1de; --accent-ink:#8a4f08; --bg:#f6f6f4; --surface:#ffffff; --surface-2:#fbfbfa; --fg:#15201c; --fg-2:#4c5a55; --fg-3:#7b8781; --line:#e2e5e2; --line-2:#eef0ee; /* Zebra tabel: 2 warna SOFT yang tetap JELAS beda tapi tidak bikin keder. Baris 1 = putih (--surface), baris 2 = tint hijau sangat pucat. Jangan pakai --surface-2 (#fbfbfa) -> terlalu dekat putih, zebra tak terlihat sama sekali. */ /* Rasio kontras baris 1 vs baris 2 (terukur, bukan tebasan): versi lama --surface-2 40% -> 1.009 (PRAKTIS TAK TERLIHAT) nilai di bawah ini -> 1.13 (jelas, tetap soft) Jangan naikkan >1.25: baris jadi bergaris-garis keras dan "berkeder". Teks utama tetap 14.8:1, teks redup --fg-3 3.3:1 (sudah redup sejak awal, zebra tidak mengubahnya). */ --row-2:#eaf3ee; --row-hover:#dfece6; --row-aksi:#f4f8f5; /* baris tombol: paling pucat */ /* Latar tombol di dalam tabel. Harus berbeda dari KEDUA warna baris: 1.23 vs baris putih, 1.09 vs baris zebra (#eaf3ee). Kalau tombolnya transparan, warnanya persis sama dengan zebra (rasio 1.000) -> samar. */ /* ---------- TOKEN TOMBOL DI DALAM TABEL (sistem warna per makna) ---------- Semua angka rasio di bawah DIUKUR, bukan tebasan. Syarat: (a) teks di atas tombol >= 4.5 (WCAG AA), (b) latar tombol >= 1.10 dari KEDUA warna baris (putih & zebra hijau) supaya tidak "samar", (c) tetap soft -- bukan blok warnasolid yang menyilaukan. PITFALL: memakai --ok-bg/--warn-bg/--err-bg yang sudah ada TIDAK bisa dipakai -- nilainya terlalu dekat dengan zebra (1.01-1.03), persis masalah yang sedang diperbaiki. Jadi butuh tint sendiri yang lebih tegas (~30-38% warna, bukan 15%). */ --btn-netral-bg:#dae6e0; --btn-netral-fg:#15201c; /* teks 13.05, baris 1.28/1.13 */ --btn-ok-bg:#daeae3; --btn-ok-fg:#0d3d27; /* teks 9.84, baris 1.25/1.10 */ --btn-warn-bg:#eee4d3; --btn-warn-fg:#5c3a05; /* teks 8.08, baris 1.26/1.11 */ --btn-err-bg:#f4e1dd; --btn-err-fg:#7a2416; /* teks 7.97, baris 1.26/1.11 */ --btn-info-bg:#d5dde6; --btn-info-fg:#182b3d; /* biru hue 210, teks 10.55 */ --btn-violet-bg:#ddd5e6; --btn-violet-fg:#2b183d; /* ungu hue 270, teks 11.33 */ --btn-kuning-bg:#e6e6d5; --btn-kuning-fg:#3d3d18; /* kuning hue 60, teks 8.86 */ --btn-bg:var(--btn-netral-bg); /* ---------- TOKEN KOTAK/BADGE STATUS ---------- Masalah SAMA seperti tombol: --ok-bg/--warn-bg/--err-bg/--info-bg dan --line-2 terlalu dekat dengan zebra (kontras 1.008-1.048) -> kotak "Lunas"/"Aktif"/"Warga" nyaris tak terlihat tepinya. Token di bawah = tint lebih tegas (~22%), semuanya DIUKUR: syarat teks >= 4.5 dan latar >= 1.10 dari KEDUA warna baris. */ /* ---------- TOKEN BADGE/KOTAK STATUS ---------- Masalah yang sama seperti tombol: --ok-bg/--warn-bg/--err-bg terlalu dekat dengan zebra (1.008-1.048) -> kotak status "Lunas"/"Aktif" nyaris tak terlihat tepinya. Token ini tint lebih tegas (~22%). Syarat: teks >= 4.5, latar >= 1.10 dari KEDUA warna baris. */ --badge-ok-bg:#cde2d8; --badge-ok-fg:#14603d; /* teks 5.58, baris 1.36/1.20 */ --badge-warn-bg:#ebdec9; --badge-warn-fg:#8a5608; /* teks 4.63, baris 1.33/1.17 */ --badge-err-bg:#eed2ce; --badge-err-fg:#94291a; /* teks 5.69, baris 1.42/1.26 */ --badge-info-bg:#cddbe5; --badge-info-fg:#1c5c8a; /* teks 5.04, baris 1.41/1.25 */ --badge-muted-bg:#dbdedd; --badge-muted-fg:#3d4a45;/* teks 6.85, baris 1.35/1.20 */ --badge-accent-bg:#f2dfc8; --badge-accent-fg:#8a4f08;/* teks 5.05, baris 1.30/1.15 */ --badge-brand-bg:#d3e4dc; --badge-brand-fg:#12513c; /* teks 7.04, baris 1.32/1.17 */ --badge-menunggu-bg:#f5dc62; --badge-menunggu-fg:#473e12; /* YELLOW hue 50, teks 7.78, latar 1.37/1.21, + ikon jam */ --badge-belumbayar-bg:#d4cbdf; --badge-belumbayar-fg:#281f33; /* UNGU hue 268, teks 10.05, latar 1.57/1.38 */ /* 4) UNGU = "> 3 bulan tidak masuk" (status login, permintaan 16 Okt 2026: merah belum pernah · hijau pernah · kuning < 3 bulan · ungu > 3 bulan). */ --badge-ungu-bg:#ddcbf0; --badge-ungu-fg:#4a2483; /* UNGU hue 272, teks 9.17 */ /* Status login "> 3 bulan tidak masuk" (permintaan user 16 Okt 2026: red=belum pernah, green=pernah, yellow=<3 bulan, ungu=>3 bulan). */ --badge-lama-bg:#d8cbe8; --badge-lama-fg:#3a1f5e; /* UNGU hue 275, teks 8.86 */ /* Ikon jam (Tabler v3, MIT) sebagai mask -> warnanya ikut `currentColor` badge, jadi otomatis cocok di mode terang maupun gelap. Dipakai oleh .badge-menunggu supaya "Menunggu" beda BENTUK, bukan cuma warna. */ --ikon-jam:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); --ok:#1a7a4f; --ok-bg:#e3f4eb; --warn:#a2670a; --warn-bg:#fdf2e0; --err:#b3341f; --err-bg:#fbeae7; /* Kabar Duka: kuning hangat, kontras cukup di mode terang & gelap. */ --duka-bg:#fff8e1; --duka-bg-hi:#fff1c2; --duka-line:#e8b04a; --duka-ink:#7a5b00; /* Pita berkabung: cokelat-hitam, teks krem (kartu khusus Kabar Duka). */ --duka-pita:#2e2418; --duka-pita-fg:#f4e3bd; --info:#1c5c8a; --info-bg:#e6f0f7; /* space */ --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem; --s6:2rem; --s7:3rem; --s8:4rem; --s9:6rem; /* radius: satu sistem, all-soft */ --r-sm:8px; --r:14px; --r-lg:20px; --r-full:999px; /* motion */ --f-fast:150ms; --f:240ms; --f-slow:420ms; --ease:cubic-bezier(.22,.61,.36,1); --shadow:0 1px 2px rgba(18,81,60,.05),0 4px 14px -6px rgba(18,81,60,.12); --shadow-lg:0 2px 6px rgba(18,81,60,.06),0 18px 40px -18px rgba(18,81,60,.28); --wrap:1180px; } html[data-mode="dark"]{ --on-brand:#0e1512; --band:#0a2b20; --on-accent:#2a1a04; --on-brand-ink:#0e1512; /* Status colors HARUS dicerahkan di mode gelap. Versi lama hanya menimpa latarnya (--ok-bg/--warn-bg/--err-bg); teksnya tetap gelap (#1a7a4f/#a2670a/#b3341f) -> kontras ~3.3 di atas latar gelap. */ /* Zebra mode gelap: --surface #151e1a, jadi baris 2 harus SEDIKIT lebih terang, bukan lebih gelap (kalau lebih gelap, hilang ke background). */ --row-2:#1e2b26; --row-hover:#283830; --row-aksi:#19231f; --btn-netral-bg:#2a3831; --btn-netral-fg:#e8efeb; /* teks 10.52, baris 1.39/1.20 */ --btn-ok-bg:#204030; --btn-ok-fg:#4ec98a; /* teks 5.47, baris 1.49/1.29 */ --btn-warn-bg:#3f3b24; --btn-warn-fg:#e8b04a; /* teks 5.77, baris 1.51/1.30 */ --btn-err-bg:#41342c; --btn-err-fg:#f08a75; /* teks 4.91, baris 1.42/1.23 */ --btn-info-bg:#29363b; --btn-info-fg:#99a9ba; /* teks 5.19, baris 1.37/1.18 */ --btn-violet-bg:#302f3b; --btn-violet-fg:#a999ba; /* teks 4.98, baris 1.29/1.12 */ --btn-kuning-bg:#373e2c; --btn-kuning-fg:#baba99; /* teks 5.60, baris 1.53/1.32 */ --btn-bg:var(--btn-netral-bg); /* ---------- TOKEN KOTAK/BADGE STATUS ---------- Masalah SAMA seperti tombol: --ok-bg/--warn-bg/--err-bg/--info-bg dan --line-2 terlalu dekat dengan zebra (kontras 1.008-1.048) -> kotak "Lunas"/"Aktif"/"Warga" nyaris tak terlihat tepinya. Token di bawah = tint lebih tegas (~22%), semuanya DIUKUR: syarat teks >= 4.5 dan latar >= 1.10 dari KEDUA warna baris. */ --badge-ok-bg:#224433; --badge-ok-fg:#4ec98a; /* teks 5.17, baris 1.58/1.36 */ --badge-warn-bg:#433e25; --badge-warn-fg:#e8b04a; /* teks 5.50, baris 1.59/1.37 */ --badge-err-bg:#45362e; --badge-err-fg:#f08a75; /* teks 4.72, baris 1.48/1.27 */ --badge-info-bg:#2c4249; --badge-info-fg:#7cc0f0; /* teks 5.37, baris 1.61/1.39 */ --badge-muted-bg:#353f3b; --badge-muted-fg:#c3cfc9;/* teks 6.80, baris 1.56/1.35 */ --badge-accent-bg:#483f26; --badge-accent-fg:#f0c680;/* teks 6.50, baris 1.63/1.41 */ --badge-brand-bg:#1d3a2e; --badge-brand-fg:#6fcf9f; /* teks 6.15, baris 1.37/1.18 */ --badge-menunggu-bg:#4a3f18; --badge-menunggu-fg:#f0d878; /* teks 7.34, latar 1.64/1.41 */ --badge-belumbayar-bg:#30303b; --badge-belumbayar-fg:#ac9ebc; /* teks 5.19, latar 1.31/1.13 */ --badge-ungu-bg:#382b55; --badge-ungu-fg:#c4a6f2; /* UNGU terang, teks 7.03 */ --badge-lama-bg:#33294a; --badge-lama-fg:#c9aef0; /* UNGU terang, teks 6.94 */ --ok:#4ec98a; --warn:#e8b04a; --err:#f08a75; /* Kabar Duka mode gelap: lebih gelap, teks tetap terbaca. */ --duka-bg:#2b2410; --duka-bg-hi:#3a300f; --duka-line:#e8b04a; --duka-ink:#f0d878; --duka-pita:#1a1510; --duka-pita-fg:#f0d878; --brand:#6fcf9f; --brand-ink:#a5e3c2; --brand-soft:#12241d; --accent:#e8a94a; --accent-soft:#2c2113; --accent-ink:#f0c680; --bg:#0e1512; --surface:#151e1a; --surface-2:#1a2420; --fg:#e8efeb; --fg-2:#a7b5af; --fg-3:#7b8a83; --line:#25322c; --line-2:#1e2823; --ok-bg:#12291f; --warn-bg:#2a2114; --err-bg:#2c1917; --info-bg:#132229; --shadow:0 1px 2px rgba(0,0,0,.3),0 4px 14px -6px rgba(0,0,0,.5); --shadow-lg:0 2px 6px rgba(0,0,0,.35),0 18px 40px -18px rgba(0,0,0,.7); } @media (prefers-color-scheme:dark){ html:not([data-mode="light"]){ --on-brand:#0e1512; --band:#0a2b20; --on-accent:#2a1a04; --on-brand-ink:#0e1512; /* Zebra mode gelap: --surface #151e1a, jadi baris 2 harus SEDIKIT lebih terang, bukan lebih gelap (kalau lebih gelap, hilang ke background). */ --row-2:#1e2b26; --row-hover:#283830; --row-aksi:#19231f; --btn-netral-bg:#2a3831; --btn-netral-fg:#e8efeb; /* teks 10.52, baris 1.39/1.20 */ --btn-ok-bg:#204030; --btn-ok-fg:#4ec98a; /* teks 5.47, baris 1.49/1.29 */ --btn-warn-bg:#3f3b24; --btn-warn-fg:#e8b04a; /* teks 5.77, baris 1.51/1.30 */ --btn-err-bg:#41342c; --btn-err-fg:#f08a75; /* teks 4.91, baris 1.42/1.23 */ --btn-info-bg:#29363b; --btn-info-fg:#99a9ba; /* teks 5.19, baris 1.37/1.18 */ --btn-violet-bg:#302f3b; --btn-violet-fg:#a999ba; /* teks 4.98, baris 1.29/1.12 */ --btn-kuning-bg:#373e2c; --btn-kuning-fg:#baba99; /* teks 5.60, baris 1.53/1.32 */ --btn-bg:var(--btn-netral-bg); /* ---------- TOKEN KOTAK/BADGE STATUS ---------- Masalah SAMA seperti tombol: --ok-bg/--warn-bg/--err-bg/--info-bg dan --line-2 terlalu dekat dengan zebra (kontras 1.008-1.048) -> kotak "Lunas"/"Aktif"/"Warga" nyaris tak terlihat tepinya. Token di bawah = tint lebih tegas (~22%), semuanya DIUKUR: syarat teks >= 4.5 dan latar >= 1.10 dari KEDUA warna baris. */ --badge-ok-bg:#224433; --badge-ok-fg:#4ec98a; /* teks 5.17, baris 1.58/1.36 */ --badge-warn-bg:#433e25; --badge-warn-fg:#e8b04a; /* teks 5.50, baris 1.59/1.37 */ --badge-err-bg:#45362e; --badge-err-fg:#f08a75; /* teks 4.72, baris 1.48/1.27 */ --badge-info-bg:#2c4249; --badge-info-fg:#7cc0f0; /* teks 5.37, baris 1.61/1.39 */ --badge-muted-bg:#353f3b; --badge-muted-fg:#c3cfc9;/* teks 6.80, baris 1.56/1.35 */ --badge-accent-bg:#483f26; --badge-accent-fg:#f0c680;/* teks 6.50, baris 1.63/1.41 */ --badge-brand-bg:#1d3a2e; --badge-brand-fg:#6fcf9f; /* teks 6.15, baris 1.37/1.18 */ --badge-menunggu-bg:#4a3f18; --badge-menunggu-fg:#f0d878; /* teks 7.34, latar 1.64/1.41 */ --badge-belumbayar-bg:#30303b; --badge-belumbayar-fg:#ac9ebc; /* teks 5.19, latar 1.31/1.13 */ --badge-ungu-bg:#382b55; --badge-ungu-fg:#c4a6f2; /* UNGU terang, teks 7.03 */ --badge-lama-bg:#33294a; --badge-lama-fg:#c9aef0; /* UNGU terang, teks 6.94 */ --ok:#4ec98a; --warn:#e8b04a; --err:#f08a75; /* Kabar Duka mode gelap: lebih gelap, teks tetap terbaca. */ --duka-bg:#2b2410; --duka-bg-hi:#3a300f; --duka-line:#e8b04a; --duka-ink:#f0d878; --duka-pita:#1a1510; --duka-pita-fg:#f0d878; --brand:#6fcf9f; --brand-ink:#a5e3c2; --brand-soft:#12241d; --accent:#e8a94a; --accent-soft:#2c2113; --accent-ink:#f0c680; --bg:#0e1512; --surface:#151e1a; --surface-2:#1a2420; --fg:#e8efeb; --fg-2:#a7b5af; --fg-3:#7b8a83; --line:#25322c; --line-2:#1e2823; --ok-bg:#12291f; --warn-bg:#2a2114; --err-bg:#2c1917; --info-bg:#132229; } } /* ---------- 2. Base ---------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{ margin:0;font-family:'PJS',system-ui,sans-serif;background:var(--bg);color:var(--fg); font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased; } h1,h2,h3,h4{font-family:'Outfit','PJS',sans-serif;font-weight:700;line-height:1.15;margin:0 0 var(--s3);letter-spacing:-.02em} h1{font-size:clamp(2rem,5.2vw,3.4rem)} h2{font-size:clamp(1.5rem,3.4vw,2.2rem)} h3{font-size:1.2rem} p{margin:0 0 var(--s4)} a{color:var(--brand);text-decoration:none} a:hover{text-decoration:underline} img{max-width:100%;display:block} :focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px} .wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--s4)} @media(min-width:768px){.wrap{padding-inline:var(--s6)}} .skip{position:absolute;left:-9999px} .skip:focus{left:8px;top:8px;z-index:200;background:var(--surface);padding:10px 16px;border-radius:var(--r-sm)} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* ---------- 3. Nav ---------- */ .nav{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--surface) 88%,transparent); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)} /* SAMAKAN dengan .wrap konten & footer. Kalau header lebih lebar dari body's, isiheaderbergeser ke kiri/kanan -> halaman terlihat tidak rapi. Konten di dalam .nav-in tetap boleh penuh (tanpa padding ganda). */ /* padding-inline HARUS sama dengan .wrap (var(--s4)) supaya isi header, konten, dan footer mulai dari satu garis vertikal yang sama. */ /* Navbar boleh LEBIH lebar dari .wrap konten. Isinya (logo + nama + 8 menu + tombol akun) butuh ~1402px, sedangkan --wrap cuma 1180px. Kalau dipaksa sama --wrap, nama housing akan terus mengecil / meluber. Yang penting alignment: padding-nya sama dengan .wrap, jadi konten navbar & konten halaman mulai dari satu garis vertikal yang sama. */ .nav-in{max-width:1560px;margin-inline:auto;padding:0 var(--s4);min-height:68px; display:flex;align-items:center;gap:var(--s4);flex-wrap:nowrap} @media(min-width:768px){.nav-in{min-height:72px;padding-inline:var(--s6)}} /* Brand: nama perumahan TIDAK PERNAH dipotong (tanpa ellipsis). Fontnya menyesuaikan lebar layar, dan kalau benar-benar sempit nama turun ke 2 baris -- tetap kebaca, tidak pernah jadi "Perumahan Taman S...". */ .brand{display:flex;align-items:center;gap:10px;font-family:'Outfit';font-weight:800; font-size:1.32rem;color:var(--fg);letter-spacing:-.02em; min-width:0;flex:0 1 auto;order:1;padding-block:6px} /* Nama housing: flex:0 0 auto supaya TIDAK pernah gepengit (font-fit JS yang menentukan ukuran font, bukan flex yang memotong). .brand sendiri yang boleh menyusut supaya nav-links & kartu akun punya ruang. */ .brand-name{min-width:0;flex:0 0 auto;white-space:nowrap;line-height:1.15} .brand:hover{text-decoration:none} /* Logo asli (rumah taupe + dahan gradasi biru-hijau) diletakkan di kotak PUTIH supaya warnanya tidak berubah, dan tanpa gradasi brand supaya ikon tampil bersih seperti pada logo. */ .brand-mark{width:40px;height:40px;border-radius:11px;flex:none; display:grid;place-items:center;background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.07);overflow:hidden} .brand-mark img{width:100%;height:100%;object-fit:contain;display:block} /* Menu utama: tampil mulai 980px. Di bawah itu pakai header HP (burger) yang bersih. Ambang 980 dipilih supaya HP dalam "Mode situs desktop" -- yang viewport-nya sekitar 980px -- dapat versi desktop yang sama dengan web. */ .nav-links{display:none;align-items:center;gap:10px;margin-left:auto; flex-wrap:nowrap;flex:0 0 auto;order:2} @media(min-width:980px){.nav-links{display:flex}} .nav-links a{color:var(--fg-2);font-size:.94rem;font-weight:500;padding:6px 0; border-bottom:2px solid transparent;white-space:nowrap} .nav-links a:hover{color:var(--fg);text-decoration:none;border-bottom-color:var(--accent)} .nav-cta{display:none;order:3} /* gap wajib: tanpa ini tombol tema MENEMPEL ke kartu akun (borders saling bersentuhan dan terlihat seperti satu tombol aneh). */ @media(min-width:980px){.nav-cta{display:flex;align-items:center;gap:10px; margin-left:var(--s3)}} .burger{background:none;border:1px solid var(--line);width:42px;height:42px;border-radius:11px; display:grid;place-items:center;cursor:pointer;color:var(--fg);font-size:1.3rem;order:3} @media(min-width:980px){.burger{display:none}} /* Ganti tema di layar kecil: tombol sendiri di header, supaya drawer tidak perlu memuatnya (menyamakan menu HP & desktop). */ .tema-hp{display:grid;place-items:center;width:40px;height:40px;flex:none; border:1px solid var(--line);border-radius:12px;background:var(--surface); color:var(--fg);font-family:'PJS';font-size:1.15rem;cursor:pointer; order:2;margin-left:auto} .tema-hp:hover{background:var(--surface-2);border-color:var(--fg-3)} .tema-hp:active{transform:scale(.96)} @media(min-width:980px){.tema-hp{display:none}} /* Zona rapat (980-1319px) -- ini yang dipakai HP saat "Mode situs desktop" (viewport ~980px). Semua tetap SATU BARIS dan bentuknya sama dengan web: nama perumahan dikecilkan, kartu akun jadi avatar saja, jarak dirapatkan. */ @media(min-width:980px) and (max-width:1319px){ .nav-in{gap:8px;flex-wrap:nowrap} /* brand tetap boleh menyusut supaya font-fit punya ruang (flex:0 0 auto = LEBIAR, tidak bisa dikecilkan -> nav-links terdorong keluar & halaman melebar) */ .brand{flex:0 1 auto;min-width:0;line-height:1.12;max-width:calc(100% - 220px)} .brand-mark{width:32px;height:32px;border-radius:9px;font-size:.95rem} /* gap 0 membuat menu terlihat menempel ("DashboardBeranda"). 12px masih muat karena nama perumahan sudah disembunyikan di bawah 1400px. */ .nav-links{gap:12px;min-width:0;flex:0 1 auto} .nav-links a{font-size:.82rem;padding:5px 2px} .nav-cta{margin-left:var(--s3);min-width:0;flex:0 1 auto;gap:8px} .akun-wrap{flex:0 1 auto} .akun-btn{padding:3px} .akun-av{width:28px;height:28px;font-size:.82rem} .akun-id{display:none} .akun-ca{display:none} } /* Layar sangat sempit */ @media(max-width:480px){ .nav-cta .btn{padding-inline:10px} .brand-mark{width:34px;height:34px;border-radius:10px;font-size:1rem} .nav-in{gap:10px} h1{font-size:1.55rem} h2{font-size:1.25rem} .wrap{padding-inline:var(--s3)} .nav-in{padding-inline:var(--s3)} } /* ---------- Kartu akun di header (web): avatar + nama + peran, klik = menu ---------- */ .akun-wrap{position:relative} .akun-btn{display:flex;align-items:center;gap:10px;padding:5px 12px 5px 6px; border:1px solid var(--line);border-radius:var(--r-full);background:var(--surface); cursor:pointer;font:inherit;color:var(--fg);max-width:270px; transition:border-color var(--f-fast) var(--ease),background var(--f-fast) var(--ease)} .akun-btn:hover{border-color:var(--fg-3);background:var(--surface-2)} .akun-btn[aria-expanded="true"]{border-color:var(--brand);background:var(--surface-2)} .akun-av{width:32px;height:32px;flex:none;border-radius:var(--r-full);background:var(--brand); color:var(--on-brand);display:grid;place-items:center;font-weight:800;font-size:.9rem} /* Avatar: di dark mode --brand berubah jadi hijau TERANG, jadi teksnya harus tetap GELAP. Versi lama memakai #08130e yang hampir sama dengan hijau terang -> kontras 1.89 (huruf "S" nyaris tak terlihat). Pakai --surface yang selalu kontras dengan --brand di kedua mode. */ .akun-id{display:flex;flex-direction:column;align-items:flex-start;min-width:0} .akun-nm{font-weight:700;font-size:.9rem;line-height:1.2;max-width:180px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .akun-ca{font-size:.7rem;color:var(--fg-3);line-height:1} /* WEB = dropdown ringkas (klik avatar -> menu kecil). BEDA dari mobile yang pakai daftar kartu penuh. */ .akun-menu{position:absolute;top:calc(100% + 10px);right:0;z-index:70;min-width:250px; background:var(--surface);border:1px solid var(--line);border-radius:var(--r); box-shadow:var(--shadow-lg);padding:6px;display:flex;flex-direction:column;gap:2px; transform-origin:top right;opacity:0;transform:translateY(-6px) scale(.97); transition:opacity var(--f-fast) var(--ease),transform var(--f-fast) var(--ease)} .akun-menu[hidden]{display:none} .akun-menu:not([hidden]){opacity:1;transform:none} .akun-menu::before{content:'';position:absolute;top:-5px;right:26px;width:10px;height:10px; background:var(--surface);border-left:1px solid var(--line);border-top:1px solid var(--line); transform:rotate(45deg)} .akun-menu a{display:flex;align-items:center;gap:10px;min-height:42px;padding:0 12px; border-radius:var(--r-sm);color:var(--fg-2);font-weight:600;font-size:.92rem; text-decoration:none;transition:background var(--f-fast) var(--ease),color var(--f-fast) var(--ease)} .akun-menu a::before{content:'';width:7px;height:7px;flex:none;border-radius:2px; background:var(--line);transition:background var(--f-fast) var(--ease)} .akun-menu a:hover{background:var(--surface-2);color:var(--fg)} .akun-menu a:hover::before{background:var(--accent)} .akun-menu a.keluar{color:var(--err)} .akun-menu a.keluar::before{background:var(--err-bg)} .akun-menu a.keluar:hover{background:var(--err-bg);color:var(--err)} .akun-sep{display:block;height:1px;background:var(--line);margin:4px 6px} @media(max-width:979px){.akun-wrap{display:none}} /* ---------- Menu HP: sheet full, konten dibatasi max-width supaya di layar lebar tetap di tengah dan tidak terlalu panjang/kosong. */ .drawer{position:fixed;inset:var(--nav-h,68px) 0 0;background:var(--surface);z-index:59; transform:translateY(-8px);opacity:0;pointer-events:none; transition:opacity var(--f) var(--ease),transform var(--f) var(--ease); overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain} .drawer.open{opacity:1;transform:none;pointer-events:auto} .drawer-in{max-width:520px;margin:0 auto;padding:var(--s5) var(--s4) calc(var(--s8) + env(safe-area-inset-bottom,0px)); display:flex;flex-direction:column;gap:var(--s4)} /* kartu identitas (hanya saat login) */ .drawer-me{display:flex;align-items:center;gap:12px;padding:12px 14px; border:1px solid var(--line);border-radius:var(--r);background:var(--surface-2)} .drawer-av{width:42px;height:42px;flex:none;border-radius:var(--r-full); background:var(--brand);color:var(--on-brand);display:grid;place-items:center; font-weight:800;font-size:1.05rem} .drawer-id{min-width:0;display:flex;flex-direction:column;align-items:flex-start} .drawer-nm{font-weight:700;font-size:1rem;line-height:1.25;color:var(--fg); max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* Semua isi menu (link, tombol, keluar) satu gaya: kartu full-width, rata kiri, tinggi sama, sudut sama. Bedanya cuma warna latar. */ .drawer-nav{display:flex;flex-direction:column;gap:8px} .drawer-nav a,.drawer-item{display:flex;align-items:center;min-height:54px;padding:0 16px; border:1px solid var(--line);border-radius:var(--r);background:var(--surface); color:var(--fg);font-family:'PJS';font-weight:600;font-size:1rem;line-height:1.3; text-align:left;text-decoration:none;cursor:pointer;width:100%; transition:background var(--f-fast) var(--ease),border-color var(--f-fast) var(--ease)} .drawer-nav a:hover,.drawer-item:hover{background:var(--surface-2);border-color:var(--fg-3)} .drawer-nav a:active,.drawer-item:active{transform:scale(.99)} /* pemisah tipis sebelum blok akun */ .drawer-sep{display:block;height:1px;background:var(--line);margin:var(--s2) 0} /* Masuk: hijau solid + teks putih (kontras terang) */ .drawer-nav a.masuk{background:var(--brand);border-color:var(--brand);color:var(--on-brand);font-weight:700} .drawer-nav a.masuk:hover{background:var(--brand-ink);border-color:var(--brand-ink)} /* Keluar: merah muda + teks merah, tetap satu gaya */ .drawer-nav a.keluar{background:var(--err-bg);border-color:var(--err);color:var(--err);font-weight:700} .drawer-nav a.keluar:hover{background:var(--err);color:#fff} /* Honeypot anti bot form Daftar: hilang dari tampilan tapi tetap ada di DOM supaya bot yang mengisi semua input ikut mengisinya. */ .hp-trap{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px; overflow:hidden;opacity:0;pointer-events:none} /* ---------- 4. Buttons ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:'PJS';font-weight:600; font-size:.95rem;padding:12px 22px;border-radius:var(--r-full);border:1.5px solid transparent;cursor:pointer; transition:transform var(--f-fast) var(--ease),background var(--f-fast),box-shadow var(--f-fast);white-space:nowrap;min-height:46px} .btn:active{transform:scale(.97)} .btn-primary{background:var(--brand);color:var(--on-brand)} html[data-mode="dark"] .btn-primary{color:#08130e} @media(prefers-color-scheme:dark){html:not([data-mode="light"]) .btn-primary{color:#08130e}} .btn-primary:hover{background:var(--brand-ink);text-decoration:none;box-shadow:var(--shadow)} .btn-accent{background:var(--accent);color:var(--on-accent)} .btn-accent:hover{background:var(--accent-ink);text-decoration:none} .btn-ghost{background:transparent;border-color:var(--line);color:var(--fg)} .btn-ghost:hover{background:var(--surface-2);text-decoration:none;border-color:var(--fg-3)} .btn-danger{background:transparent;border-color:var(--err);color:var(--err)} .btn-danger:hover{background:var(--err-bg);text-decoration:none} .btn-sm{padding:8px 16px;font-size:.86rem;min-height:38px} .btn-block{width:100%} .btn:disabled{opacity:.5;cursor:not-allowed} /* ---------- 23.9 LAPORAN KAS: warna per tipe (14 Okt 2026) ---------- Permintaan user: "untuk laporan kas warga, kategori pengeluaran warna red, kalau pemasukan warna green". Warna dipakai di 3 tempat sekaligus supaya satu istilah = satu warna: /kas "Per kategori" : badge Pemasukan (hijau) vs Pengeluaran (merah) /kas "Mutasi terakhir" & tabel 6 bulan : angka + / - (hijau / merah) /panel/kas KPI + tabel mutasi : sama classes: .kat-pemasukan / .kat-pengeluaran (baris) dan .kat-pemasukan-nil / .kat-pengeluaran-nil (angka nominal) */ .kat-pemasukan-nil{color:var(--ok)} .kat-pengeluaran-nil{color:var(--err)} .kat-pemasukan .badge{background:var(--badge-ok-bg);color:var(--badge-ok-fg); border-color:color-mix(in srgb,var(--badge-ok-fg) 26%,transparent)} .kat-pengeluaran .badge{background:var(--badge-err-bg);color:var(--badge-err-fg); border-color:color-mix(in srgb,var(--badge-err-fg) 26%,transparent)} /* Baris kategori dapat tint tipis supaya saat mata otosatis membaca "keluar" atau "masuk", tidak harus SHOULD baca badge-nya dulu. */ .baris.kat-pemasukan{box-shadow:inset 3px 0 0 var(--ok)} .baris.kat-pengeluaran{box-shadow:inset 3px 0 0 var(--err)} /* ---------- 5. Cards + surfaces ---------- */ .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)} .card-p{padding:var(--s5)} /* ---------- Daftar pengumuman: 2 kolom SAMA BESAR ---------- Permintaan user 16 Okt 2026: *"daftar pengumuman'y d bkin 2 kolom & tiap kolom ukuran'y sama semua"*. `repeat(2, minmax(0,1fr))` = dua kolom PERSIS sama lebar (bukan 1.3fr/.7fr seperti `.cols-2a`). `align-items:stretch` + `.peng-item` flex-column + `.peng-kaki{margin-top:auto}` bikin SEMUA kartu sama tinggi dan baris tombolnya rata di bawah, jadi kedua kolom terlihat rapi sejajar meski isi tiap pengumuman beda panjang. HP: 1 kolom (tidak dipaksa 2 supaya teks tidak sesak). */ .peng-grid{display:grid;gap:var(--s4);grid-template-columns:minmax(0,1fr); align-items:stretch} @media(min-width:820px){ .peng-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } .peng-item{display:flex;flex-direction:column;min-width:0} /* ---------- Catatan: kelas `.peng-duka` / `.badge-duka` DIHAPUS ---------- Digantikan template khusus `_kabar_duka.html` + keluarga `.duka*` di bawah (permintaan user 17 Okt 2026: "Bsa ga u bkinin template khusus kabar duka"). Jangan dihidupkan lagi -- dua sistem warna kuning yang jalan bersamaan bikin tampilan tidak konsisten. */ /* ===================================================================== KARTU KHUSUS KABAR DUKA (template `_kabar_duka.html`) Permintaan user 17 Okt 2026: *"Bsa ga u bkinin template khusus kabar duka"*. Bentuknya SENGAJA beda dari kartu pengumuman biasa: - pita berkabung gelap di atas (bukan badge kecil); - garis emas tipis sebagai pemisah, bukan border biasa; - kutipan doa di varian utama; - tanpa tombol Hapus (auto-hapus 7 hari). ⚠️ Animasi blink dipindah ke `.duka-badan`, BUKAN ke seluruh kartu. Pita gelap tetap diam supaya tidak terlihat seperti kedipan error; hanya badan kuning yang berdenyut pelan. `prefers-reduced-motion` mematikan animasi tapi warna kuning TETAP ada. ===================================================================== */ .duka{ display:flex;flex-direction:column;overflow:hidden; border-radius:var(--r-lg);border:1px solid var(--duka-line); background:var(--surface);color:inherit; box-shadow:0 1px 2px rgba(0,0,0,.04),0 8px 24px -18px rgba(0,0,0,.35)} /* Pita berkabung */ .duka-pita{ display:flex;align-items:center;gap:8px; background:var(--duka-pita);color:var(--duka-pita-fg); padding:9px 16px;font-size:.76rem;font-weight:800; letter-spacing:.14em;text-transform:uppercase} .duka-pita .ico{width:15px;height:15px;flex:none;opacity:.9} .duka-tanggal{margin-left:auto;font-weight:600;letter-spacing:.02em; text-transform:none;opacity:.8;font-variant-numeric:tabular-nums} .duka-sisa{margin-left:auto;font-weight:700;letter-spacing:.02em; text-transform:none;padding:2px 9px;border-radius:var(--r-full); background:rgba(244,227,189,.16);border:1px solid rgba(244,227,189,.3)} /* Badan: kuning + denyut pelan */ .duka-badan{ display:flex;flex-direction:column;gap:10px;flex:1; padding:var(--s5) var(--s5) var(--s4); background:var(--duka-bg); animation:duka-denyut 2.4s ease-in-out infinite} @keyframes duka-denyut{ 0%,100%{background:var(--duka-bg)} 50%{background:var(--duka-bg-hi)}} .duka-judul{margin:0;font-size:1.16rem;line-height:1.35;color:var(--fg)} .duka-isi{margin:0;font-size:.93rem;line-height:1.6;color:var(--fg-2); white-space:pre-line} .duka-garis{height:1px;background:var(--duka-line);opacity:.5;margin:2px 0} .duka-doa{margin:0;font-style:italic;font-size:.9rem;color:var(--duka-ink); font-weight:600;text-align:center} .duka-kaki{display:flex;align-items:center;justify-content:space-between; gap:10px;margin-top:auto;padding-top:4px} .duka-meta{font-size:.79rem;color:var(--fg-3); font-variant-numeric:tabular-nums} /* Tombol di dalam kartu: cokelat senada pita, bukan hijau brand. */ .duka-btn{background:var(--duka-pita);color:var(--duka-pita-fg); border-color:var(--duka-pita)} .duka-btn:hover{filter:brightness(1.18)} /* Varian UTAMA (beranda): lebih besar, judul lebih tegas. */ .duka-utama .duka-judul{font-size:clamp(1.3rem,2.4vw,1.6rem)} .duka-utama .duka-badan{padding:var(--s6)} .duka-utama .duka-isi{font-size:1rem} /* Varian KARTU (daftar publik): seluruh kartu bisa diklik. */ .duka-kartu{text-decoration:none;transition:transform .18s ease,box-shadow .18s ease} .duka-kartu:hover{transform:translateY(-2px); box-shadow:0 2px 4px rgba(0,0,0,.05),0 14px 30px -20px rgba(0,0,0,.4)} .duka-panah{display:grid;place-items:center;width:28px;height:28px; border-radius:var(--r-full);background:rgba(46,36,24,.08); color:var(--duka-pita)} .duka-panah .ico{width:15px;height:15px} /* Varian PANEL: rapat, tanpa animasi mencolok (pengurus sedang bekerja). */ .duka-panel .duka-badan{padding:var(--s4)} .duka-panel .duka-judul{font-size:1.02rem} @media(prefers-reduced-motion:reduce){ .duka-badan{animation:none} .duka-kartu:hover{transform:none}} /* Varian DETAIL (halaman /pengumuman/): lebih lapang, judul besar, kutipan doa di atas judul, paragraf takziah di bawah isi. */ .duka-detail .duka-badan{padding:var(--s6);gap:var(--s4)} .duka-judul-besar{font-size:clamp(1.45rem,3.2vw,2rem);line-height:1.25} .duka-doa-atas{margin:0;font-size:.95rem} .duka-isi-penuh{white-space:pre-line;font-size:1.03rem;line-height:1.75; color:var(--fg)} .duka-takziah{margin:0;font-size:.93rem;line-height:1.7;color:var(--fg-2); font-style:italic;border-left:3px solid var(--duka-line);padding-left:14px} .duka-detail .duka-kaki{border-top:1px solid var(--duka-line);padding-top:var(--s4); flex-wrap:wrap} /* ---------- Foto pada kartu Kabar Duka ---------- Permintaan user 17 Okt 2026: form Kabar Duka punya unggahan foto. Foto almarhum ditampilkan LAYAK (tidak dipotong aneh): `object-fit:contain` di bingkai bertalang gelap, bukan `cover` yang memotong wajah. */ .duka-foto{display:block;border-radius:var(--r); background:rgba(46,36,24,.06);border:1px solid var(--duka-line); object-fit:contain} .duka-foto-utama{width:100%;max-height:340px;margin:0 auto 4px} .duka-foto-kecil{width:64px;height:64px;flex:none;border-radius:var(--r-sm); object-fit:cover} .duka-kepala{display:flex;align-items:center;gap:12px;min-width:0} .duka-kepala .duka-judul{min-width:0} /* Poster takziah: ditampilkan UTUH (bukan dipotong) karena sudah berupa gambar jadi berukuran 1080x1350. Klik untuk membuka versi penuh. */ .duka-poster{display:block;margin:0 auto;max-width:420px;width:100%; border-radius:var(--r);overflow:hidden;border:1px solid var(--duka-line); box-shadow:0 2px 6px rgba(0,0,0,.08),0 16px 40px -26px rgba(0,0,0,.45)} .duka-poster img{display:block;width:100%;height:auto} .duka-poster-aksi{display:flex;gap:8px;justify-content:center;margin-top:10px; flex-wrap:wrap} .duka-poster-note{display:flex;align-items:flex-start;gap:9px; background:var(--duka-bg);border:1px dashed var(--duka-line); border-radius:var(--r);padding:10px 13px;font-size:.84rem;line-height:1.5; color:var(--duka-ink);margin-bottom:var(--s4)} .duka-poster-note .ico{width:16px;height:16px;flex:none;margin-top:2px} /* Catatan pembuka di form (bukan di kartu): pengingat aturan 7 hari. */ .duka-form-note{display:flex;align-items:flex-start;gap:9px; background:var(--duka-bg);border:1px solid var(--duka-line); border-radius:var(--r);padding:11px 13px;margin-bottom:var(--s4); font-size:.85rem;line-height:1.5;color:var(--duka-ink)} .duka-form-note .ico{width:16px;height:16px;flex:none;margin-top:2px} .field label .opsional{color:var(--fg-3);font-weight:500;font-size:.85em} /* Pratinjau foto di form: dibatasi supaya tidak mendorong tombol jauh ke bawah. */ #pratinjauFoto{display:block;margin-top:10px;max-width:100%;max-height:180px; border-radius:var(--r);border:1px solid var(--line);object-fit:contain} .peng-isi{flex:1;margin:6px 0} .peng-kaki{margin-top:auto} /* ---------- Dashboard: 2 panel sebelahan SAMA TINGGI ---------- Permintaan user 16 Okt 2026: kotak "Iuran N bulan terakhir" & "Pesanan lapak" ukurannya disamakan biar enak dilihat. Masalah lama: grid pakai `align-items:start` -> tiap panel setinggi isinya sendiri (terukur 290px vs 319px, beda 29px, tepi bawah tak rata). Sekarang `stretch` + panel flex-column + `.panel-b{flex:1}`: kedua kotak SAMA TINGGI, isi yang lebih pendek meregang mengisi. Hanya dipakai dashboard (`.dash-pair`); halaman lain yang memakai `.g2` tidak berubah. */ /* ============ DUA PANEL SEBELAHAN: LEBAR SAMA + TINGGI SAMA ============ Pola ini dipakai berulang (dashboard, /iuran, /kas). Pakai `.pair-sama` untuk kasus baru; `.dash-pair` & `.iuran-pair` dipertahankan sebagai alias supaya template lama tidak perlu diubah. Kenapa perlu: grid `.cols-2`/`.g2` default `align-items:start` -> tiap panel setinggi isinya sendiri, tepi bawah tidak rata (terukur 174px vs 191px). Dengan `stretch` + panel flex-column + `.panel-b{flex:1}`, kedua kotak sama tinggi dan isi yang lebih pendek meregang mengisi. ⚠️ JANGAN pakai `height` mati: isi bisa berubah (mutasi nambah) -> kepotong. */ .pair-sama,.dash-pair,.iuran-pair,.kas-pair{align-items:stretch} .pair-sama>.panel,.dash-pair>.panel, .iuran-pair>.panel,.kas-pair>.panel{display:flex;flex-direction:column} .pair-sama>.panel>.panel-b,.dash-pair>.panel>.panel-b, .iuran-pair>.panel>.panel-b,.kas-pair>.panel>.panel-b{ flex:1;display:flex;flex-direction:column} .pair-sama>.panel>.panel-b>.tbl-scroll,.dash-pair>.panel>.panel-b>.tbl-scroll, .iuran-pair>.panel>.panel-b>.tbl-scroll, .kas-pair>.panel>.panel-b>.tbl-scroll{flex:1} /* ---------- `.list-sama`: pasangan panel berisi DAFTAR ---------- Dipakai bersama `.pair-sama` kalau isi dua panel jauh beda panjang (Ringkasan pengurus: Agenda 1 baris/118px vs Pesanan 6 baris/471px = beda 353px). Kalau hanya diregangkan, kotak Agenda jadi KOSONG MELOMPONG 353px -- jelek. Jadi tinggi isi dibatasi `--list-max` dan sisanya di-scroll: dua kotak tetap SAMA TINGGI, halaman lebih pendek, ruang kosong minimal. Ubah `--list-max` kalau mau lebih banyak baris kelihatan. */ /* Batas tinggi HANYA saat dua panel bersebelahan (>=820px). Di HP panel tumpuk vertikal, jadi tidak perlu sama tinggi -> daftar ditampilkan penuh tanpa scroll dalam kotak kecil. */ @media(min-width:820px){ /* 330px = 4 baris (70.6px) + padding 48px -> baris TIDAK kepotong separuh. Cek ulang dengan /tmp/ukur_pad.py kalau tinggi baris berubah. */ .list-sama{--list-max:330px} .list-sama>.panel>.panel-b{flex:1;min-height:0;overflow-y:auto; max-height:var(--list-max)} } /* Scrollbar tipis, jangan makan lebar panel. */ .list-sama>.panel>.panel-b::-webkit-scrollbar{width:8px} .list-sama>.panel>.panel-b::-webkit-scrollbar-thumb{ background:var(--line);border-radius:var(--r-full)} .list-sama>.panel>.panel-b{scrollbar-width:thin} /* `.panel-sama` = penanda saja (tanpa aturan sendiri); semua perilakunya diatur lewat induk `.dash-pair`/`.iuran-pair`. */ /* /iuran: 2 kolom SAMA LEBAR (bukan 1.3fr/.7fr seperti `.cols-2a` lama). */ @media(min-width:820px){.iuran-pair{grid-template-columns:repeat(2,minmax(0,1fr))}} .panel{min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden} .panel-h{padding:var(--s5);border-bottom:1px solid var(--line-2);display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap} .panel-h h3{margin:0;flex:1;min-width:140px} .panel-b{padding:var(--s5)} .grid{display:grid;gap:var(--s4);min-width:0} .grid>*{min-width:0} .kpi{min-width:0;overflow-wrap:anywhere} .g2{grid-template-columns:1fr} .g3{grid-template-columns:1fr} .g4{grid-template-columns:repeat(2,1fr)} @media(min-width:640px){.g3{grid-template-columns:repeat(2,1fr)}.g4{grid-template-columns:repeat(4,1fr)}} @media(min-width:900px){.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}} /* ---------- 6. Hero ---------- */ .hero{position:relative;background:var(--band);color:var(--on-band);overflow:hidden} .hero-bg{position:absolute;inset:0} .hero-bg img{width:100%;height:100%;object-fit:cover;opacity:.4} .hero-bg::after{content:'';position:absolute;inset:0; background:linear-gradient(115deg,rgba(12,59,43,.94) 0%,rgba(12,59,43,.72) 52%,rgba(200,121,26,.28) 100%)} /* Hero (beranda). Padding ATAS dirapatkan ke `--s5` (24px) supaya SAMA dengan `.sec` -- permintaan user 16 Okt 2026: "kok jarak header k tulisan jauh bgt". Dulu `--s7` (48px) / `--s8` (64px desktop), jadi tulisan pertama (eyebrow) turun 64px dari header padahal di halaman lain cuma 24px. Padding BAWAH juga diturunkan satu langkah (`--s8`/`--s9` -> `--s7`/`--s8`) supaya jeda hero ke section pertama tidak terlalu jauh. Jangan naikkan lagi tanpa alasan. */ .hero-in{position:relative;max-width:var(--wrap);margin-inline:auto;padding:var(--s5) var(--s4) var(--s7)} @media(min-width:768px){.hero-in{padding:var(--s5) var(--s6) var(--s8)}} .hero-grid{display:grid;gap:var(--s6);align-items:center} @media(min-width:900px){.hero-grid{grid-template-columns:1.15fr .85fr}} .hero h1{color:#fff;max-width:14ch;margin-bottom:var(--s4)} .hero p.lead{font-size:1.06rem;color:rgba(255,255,255,.85);max-width:52ch;margin-bottom:var(--s5)} .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.74rem;font-weight:700;letter-spacing:.14em; text-transform:uppercase;color:var(--accent);background:rgba(200,121,26,.14);padding:7px 14px;border-radius:var(--r-full);margin-bottom:var(--s4)} .hero-actions{display:flex;gap:var(--s3);flex-wrap:wrap} .hero-actions .btn-ghost{border-color:rgba(255,255,255,.4);color:#fff} .hero-actions .btn-ghost:hover{background:rgba(255,255,255,.12)} .hero-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.16);border-radius:var(--r);overflow:hidden;backdrop-filter:blur(8px)} .hero-stat{background:rgba(18,81,60,.5);padding:var(--s5) var(--s4)} .hero-stat b{display:block;font-family:'Outfit';font-size:1.7rem;color:#fff;letter-spacing:-.02em;line-height:1.1} .hero-stat span{font-size:.82rem;color:rgba(255,255,255,.72)} /* ---------- 7. Sections ---------- */ /* Jarak section. Permintaan user 16 Okt 2026: "kok jarak header k tulisan jauh bgt ya bsa d rapihin gtu yar ga ad jeda jauh bgt sklian ma footer'y jga", lalu disusul: "yg footer msh jauh jrak'y bsa d dketin lg". SEBELUM (terukur di live): padding 48px (HP) / 64px (desktop) atas-bawah, DITAMBAH `.ft{margin-top:48px}` yang dobel dengan padding-bawah section. Hasilnya header->judul 64px & tulisan->tulisan footer 137px (desktop). TAHAP 1: padding atas dipotong jadi 24/32px, `.ft{margin-top}` DIHAPUS. TAHAP 2 (permintaan lanjutan): padding BAWAH juga dirapatkan, dan padding section dibuat SIMETRIS supaya jarak antar-section seragam. TAHAP 3 ("yg footer msh jauh jrak'y bsa d dketin lg"): 24px di kedua viewport (media override dihapus - desktop tidak perlu lebih lega dari HP). ⚠️ JANGAN naikkan lagi ke --s7/--s8 tanpa alasan: user sudah 3x minta dirapatkan. Kalau perlu diubah, ukur dulu di live (/tmp/ukur_jarak_hal.py untuk box, /tmp/ukur_footer.py untuk jarak TULISAN->TULISAN) dan bandingkan angkanya, jangan asal ganti token. */ .sec{padding:var(--s6) 0} /* Section PERTAMA (yang nempel header) & TERAKHIR (yang nempel footer) dipangkas terpisah. Permintaan user 16 Okt 2026: "kok jarak header k tulisan jauh bgt ya bsa d rapihin gtu yar ga ad jeda jauh bgt sklian ma footer'y jga" lalu "yg footer msh jauh jrak'y bsa d dketin lg", lalu "Kok yg footer deket bgt ya bsa d samain kyk header jrak'y". KENAPA dipisah: `padding` section dipakai TIGA fungsi sekaligus -- (a) jarak header ke konten, (b) jarak antar-section, (c) jarak konten ke footer. Kalau diturunkan global, jarak antar-section ikut rapat dan halaman ber-section-banyak (beranda) jadi berdesakan (terbukti: verifikasi visual bilang "cenderung terlalu mepet"). Jadi: - default `.sec` tetap LEGA (--s6 = 32px -> antar-section 64px); - section PERTAMA & TERAKHIR dipangkas ke --s5 (24px) -- SAMA di kedua ujung (permintaan terakhir: footer jangan lebih rapat dari header). JANGAN turunkan lagi ke --s3 (12px): pernah dicoba, user bilang "deket bgt". Specificity: `main > section.sec:first-of-type` / `:last-of-type` (0,2,2) menang atas `.sec` (0,1,0), jadi berlaku desktop & HP tanpa media query. Catatan: di BERANDA section pertama adalah `.hero` (bukan `.sec`), jadi `:first-of-type` TIDAK kena apa pun di sana -- itu memang benar, jarak hero ke header diatur terpisah lewat `.hero-in`. Terukur (desktop 1400px & HP 390px identik, semua 6 halaman): header -> tulisan : 64px / 48px -> 24px konten -> kotak footer : 137px -> 24px (sama dgn header) antar-section beranda : TIDAK berubah (64px) */ main > section.sec:first-of-type{padding-top:var(--s5)} main > section.sec:last-of-type{padding-bottom:var(--s5)} .sec-alt{background:var(--surface-2)} .sec-head{max-width:64ch;margin-bottom:var(--s6)} /* Judul nama perumahan (halaman Profil): selalu SATU BARIS, font menyesuaikan */ .sec-head-judul{max-width:none} .judul-peruhan{white-space:nowrap;font-size:clamp(1.9rem,4vw,2.7rem);max-width:100%} .sec-head h2{margin-bottom:var(--s2)} .sec-head p{color:var(--fg-2);margin:0} .sec-head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;margin-bottom:var(--s6)} /* ---------- 8. Badges ---------- */ /* Badge/kotak status. Memakai token --badge-* yang lebih tegas dari zebra. Versi lama memakai --ok-bg/--warn-bg/--err-bg yang kontrasnya cuma 1.008-1.048 terhadap baris zebra -> kotaknya "samar" (nyaris tak terlihat tepinya). Lihat blok token untuk angka terukurnya. */ .badge{display:inline-flex;align-items:center;gap:6px;font-size:.74rem;font-weight:700;letter-spacing:.02em; padding:5px 11px;border-radius:var(--r-full);background:var(--badge-brand-bg);color:var(--badge-brand-fg);white-space:nowrap; border:1px solid color-mix(in srgb,var(--badge-brand-fg) 26%,transparent)} .badge-ok{background:var(--badge-ok-bg);color:var(--badge-ok-fg); border-color:color-mix(in srgb,var(--badge-ok-fg) 26%,transparent)} .badge-warn{background:var(--badge-warn-bg);color:var(--badge-warn-fg); border-color:color-mix(in srgb,var(--badge-warn-fg) 26%,transparent)} .badge-err{background:var(--badge-err-bg);color:var(--badge-err-fg); border-color:color-mix(in srgb,var(--badge-err-fg) 26%,transparent)} /* UNGU: "> 3 bulan tidak masuk" di kolom "Pernah masuk?" */ .badge-ungu{background:var(--badge-ungu-bg);color:var(--badge-ungu-fg); border-color:color-mix(in srgb,var(--badge-ungu-fg) 26%,transparent)} .badge-info{background:var(--badge-info-bg);color:var(--badge-info-fg); border-color:color-mix(in srgb,var(--badge-info-fg) 26%,transparent)} .badge-muted{background:var(--badge-muted-bg);color:var(--badge-muted-fg); border-color:color-mix(in srgb,var(--badge-muted-fg) 26%,transparent)} /* ---------- 3 status yang wajib kebedain satu sama lain ---------- Permintaan user: "yang belum bayar, belum, sama menunggu dibedain ke warna yang lain yang belum ada, biar gak ada yang sama warnanya". Hijau/amber/merah/biru/abu sudah dipakai, jadi 3 warna BARU: Belum bayar (belum pernah bayar) -> MAGENTA (hue 325) Belum (tagihan blm dibayar) -> UNGU (hue 265) Menunggu (nunggu verifikasi) -> NAVY gelap (hue 220, value jauh Menunggu TAMBAH ikon jam: warna biru apa pun masih tetanggaan dengan "Dikirim" (info), jadi bentuk yang membedakan, bukan cuma warna. Ini juga menolong pengguna buta warna. */ /* "> 3 bulan tidak masuk" -> UNGU (4 warna status login, lihat _label_login) */ .badge-lama{background:var(--badge-lama-bg);color:var(--badge-lama-fg); border-color:color-mix(in srgb,var(--badge-lama-fg) 26%,transparent)} .badge-belumbayar{background:var(--badge-belumbayar-bg);color:var(--badge-belumbayar-fg); border-color:color-mix(in srgb,var(--badge-belumbayar-fg) 30%,transparent)} .badge-menunggu{background:var(--badge-menunggu-bg);color:var(--badge-menunggu-fg); border-color:color-mix(in srgb,var(--badge-menunggu-fg) 30%,transparent)} .badge-menunggu::before{content:"";width:11px;height:11px;flex:0 0 11px; background:currentColor; -webkit-mask:var(--ikon-jam) center/contain no-repeat; mask:var(--ikon-jam) center/contain no-repeat} @media(min-width:1000px){.bubble-ok{background:var(--ok-bg);color:var(--ok)}} /* ---------- 9. Forms ---------- */ .field{margin-bottom:var(--s4)} .field label{display:block;font-weight:600;font-size:.9rem;margin-bottom:6px;color:var(--fg)} /* Penanda field WAJIB (mis. foto bukti transfer di /iuran). Merah supaya langsung kelihatan bahwa tanpa isian ini form tidak bisa dikirim. */ .field label .wajib{color:var(--err);font-weight:700} .field .hint{font-size:.82rem;color:var(--fg-3);margin-top:6px;display:block} .field .err{font-size:.84rem;color:var(--err);margin-top:6px;display:block;font-weight:500} /* Tanda field WAJIB (mis. foto bukti transfer di /iuran). Merah supaya langsung kelihatan bahwa form tidak bisa dikirim tanpa isian ini. */ .field label .wajib{color:var(--err);font-weight:700;margin-left:2px} /* Peringatan kecil di bawah field wajib (mis. "Belum ada agenda"). */ .field .wajib-kecil{color:var(--err);font-weight:600} input[type=text],input[type=email],input[type=password],input[type=number],input[type=date], input[type=time],input[type=tel],input[type=search],input[type=file],select,textarea{ width:100%;font-family:'PJS';font-size:1rem;padding:13px 15px;border:1.5px solid var(--line); border-radius:var(--r-sm);background:var(--surface);color:var(--fg);transition:border-color var(--f-fast),box-shadow var(--f-fast); min-height:48px} textarea{min-height:110px;resize:vertical;line-height:1.55} input::placeholder,textarea::placeholder{color:var(--fg-3);opacity:1} input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)} select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--fg-3) 50%),linear-gradient(135deg,var(--fg-3) 50%,transparent 50%); background-position:calc(100% - 19px) 21px,calc(100% - 14px) 21px;background-size:5px 5px;background-repeat:no-repeat;padding-right:40px} input[type=file]{padding:10px;font-size:.9rem;min-height:0} .row{display:grid;gap:var(--s4);min-width:0} .row>*{min-width:0} .field input,.field select,.field textarea{max-width:100%;width:100%} .field{min-width:0} /* baris tombol: boleh wrap di layar sempit, tombolnya flex:none */ .row-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px} /* kotak pemberitahuan di dalam halaman */ .notice{display:flex;gap:10px;align-items:flex-start;padding:13px 15px;border-radius:var(--r-sm); font-size:.9rem;line-height:1.5;border:1px solid;margin-bottom:16px} .notice b{display:block;margin-bottom:2px} .notice-warn{background:var(--warn-bg);border-color:var(--warn);color:var(--fg)} .notice-err{background:var(--err-bg);border-color:var(--err);color:var(--fg)} .notice-ok{background:var(--ok-bg);border-color:var(--ok);color:var(--fg)} /* penanda konten bisa digeser di HP (sidebar/tab/filter) */ .scroller{position:relative} .scroller::after{content:'';position:absolute;top:0;right:0;bottom:0;width:26px;pointer-events:none; background:linear-gradient(to right,transparent,var(--surface));opacity:0;transition:opacity .2s} @media(hover:none){.chipwrap::after{opacity:.9}} .row-actions .btn{flex:none;min-width:0} .flex-b{min-width:0} @media(min-width:680px){.row-2{grid-template-columns:1fr 1fr}.row-3{grid-template-columns:repeat(3,1fr)}} .check{display:flex;align-items:flex-start;gap:10px;font-size:.92rem;color:var(--fg-2);cursor:pointer} .check input{width:20px;height:20px;min-height:0;margin-top:2px;flex:none;accent-color:var(--brand)} /* ---------- 10. Table ---------- */ .tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;min-width:0; overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch} .tbl-scroll::-webkit-scrollbar{height:7px} .tbl-scroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px} table.tbl{width:100%;border-collapse:collapse;font-size:.93rem;min-width:620px} .tbl th{text-align:left;font-size:.74rem;text-transform:uppercase;letter-spacing:.07em;color:var(--fg-3); font-weight:700;padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap} .tbl td{padding:13px 12px;border-bottom:1px solid var(--line-2);vertical-align:middle} .tbl tr:last-child td{border-bottom:0} .tbl tbody tr:hover{background:var(--row-hover)} /* ── Tombol sortir di judul kolom (permintaan user 16 Okt 2026) ────────── "d menu data warga d ksh tombol short d tiap judul'y". Seluruh area judul bisa diklik. Panah kecil menunjukkan kolom mana yang sedang aktif & arahnya. ⚠️ Panah diposisikan ABSOLUTE (bukan ikut aliran flex) supaya TIDAK memakan lebar teks judul -- kalau ikut aliran, judul jadi terpotong ("RUMAH" -> "RU...", "TELEGRAM" -> "TE..."). Padding kanan disisakan sedikit sebagai tempat panah. */ .tbl th.th-urut{padding:0;position:relative} .tbl th.th-urut > a{display:block; width:100%;min-height:42px;padding:14px 17px 14px 12px; color:inherit;text-decoration:none;font:inherit; font-size:.74rem;font-weight:700;text-transform:uppercase; letter-spacing:.07em;white-space:nowrap;cursor:pointer; border-radius:var(--r-sm)} .tbl th.th-urut.t-c > a{text-align:center;padding-left:17px} .tbl th.th-urut > a:hover{background:var(--row-hover);color:var(--fg)} .tbl th.th-urut > a:focus-visible{outline:2px solid var(--brand);outline-offset:-2px} .tbl th.th-urut .th-arah{position:absolute;right:5px;top:50%; transform:translateY(-50%);font-size:.72rem;opacity:.4;line-height:1} .tbl th.th-urut > a:hover .th-arah{opacity:.85} .tbl th.th-urut.aktif > a{color:var(--brand)} .tbl th.th-urut.aktif .th-arah{opacity:1;font-weight:700} .num{font-variant-numeric:tabular-nums;white-space:nowrap} .strong{font-weight:700} .muted{color:var(--fg-3)} .small{font-size:.86rem} /* ---------- 11. KPI ---------- */ .kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:var(--s5)} .kpi .lab{font-size:.8rem;color:var(--fg-3);font-weight:600;margin-bottom:6px} /* Angka rupiah HARUS utuh di 320px. Versi lama pakai nowrap + 1.15rem minimum, sehingga "Rp1.234.500" meluber dan dipotong ellipsis (scrollWidth 106 > 90). Perbaikan: izinkan wrapping antar digit (overflow-wrap:anywhere BUKAN text-overflow:ellipsis), dan turunkan clamp min ke 0.95rem + kurangi letter-spacing supaya "Rp1.234.500" muat satu baris di HP kecil. */ /* Angka rupiah HARUS utuh, bahkan di grid 4 kolom pada tablet (~114px/kartu). Solusi: container query unit (cqi) -- ukuran huruf mengikuti lebar KARTU, bukan lebar layar. Kalau browser tidak mendukung cqi, ada fallback vw. 1cqi = 1% dari lebar kartu, jadi clamp(11px, 7.5cqi, 26.4px) selalu muat. */ .kpi{container-type:inline-size} .kpi .val{font-family:'Outfit';font-size:clamp(.95rem,4.2vw,1.65rem); font-size:clamp(11px,7.5cqi,1.65rem);font-weight:700; letter-spacing:-.03em;line-height:1.15; overflow-wrap:anywhere;hyphens:none; font-variant-numeric:tabular-nums;white-space:nowrap} .kpi .val.ok{color:var(--ok)}.kpi .val.warn{color:var(--warn)}.kpi .val.err{color:var(--err)} /* ---------- 12. Toast + flash ---------- */ /* popup pesan di bawah layar: tidak menutupi konten, aman di HP */ #toast{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%);z-index:300;display:flex;flex-direction:column; gap:8px;align-items:center;pointer-events:none; width:min(560px,calc(100vw - 24px))} #toast .t{display:flex;align-items:flex-start;gap:10px;width:100%; padding:13px 16px;border-radius:14px;background:var(--surface);color:var(--fg); border:1px solid var(--line); box-shadow:0 10px 30px rgba(8,14,11,.18),0 2px 6px rgba(8,14,11,.08); font-size:.92rem;line-height:1.45;font-weight:500;text-align:left; opacity:0;transform:translateY(14px) scale(.97); transition:opacity .22s ease,transform .22s cubic-bezier(.2,.9,.3,1.2); pointer-events:auto;overflow-wrap:anywhere} #toast .t.in{opacity:1;transform:translateY(0) scale(1)} #toast .t.err{background:var(--err-bg);border-color:var(--err)} #toast .t.err::before{content:'\2715';color:var(--err);font-weight:800;flex:none;line-height:1.4} #toast .t.ok{background:var(--ok-bg);border-color:var(--ok)} #toast .t.ok::before{content:'\2713';color:var(--ok);font-weight:800;flex:none;line-height:1.4} #toast .t.warn{background:var(--warn-bg);border-color:var(--warn)} #toast .t.warn::before{content:'\26A0';color:var(--warn);flex:none;line-height:1.4} @media(max-width:480px){ #toast{bottom:0;left:0;transform:none;width:100%; padding:10px 10px calc(10px + env(safe-area-inset-bottom,0px))} #toast .t{border-radius:12px;font-size:.9rem} } @media(prefers-reduced-motion:reduce){ #toast .t{transition:none;opacity:1;transform:none} } /* ---------- 13. Galeri ---------- */ .gal{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3)} @media(min-width:700px){.gal{grid-template-columns:repeat(3,1fr)}} @media(min-width:1000px){.gal{grid-template-columns:repeat(4,1fr)}} /* ---------- Panel "Foto di galeri" (dalam .pair-sama) ---------- Grid `.gal` biasa memakai media query LEBAR LAYAR (>=1000px -> 4 kolom), padahal panelnya cuma ~448px -> thumbnail jadi ~100px kecil dan menyisakan ruang kosong besar. `.gal-isi` memakai 2 kolom dan MELAR mengisi tinggi panel (yang tingginya mengikuti kotak "Unggah foto"). `aspect-ratio:auto` + `grid-auto-rows:1fr` -> thumbnail mengisi sisa ruang, foto tetap rapi karena `object-fit:cover`. ⚠️ Hanya dipakai di panel_galeri.html. Galeri publik tetap `.gal` biasa. */ .gal.gal-isi{grid-template-columns:repeat(2,minmax(0,1fr)); align-content:start} /* ---------- WADAH FOTO & VIDEO di halaman Galeri panel ---------- Permintaan user 16 Okt 2026: *"bkinin d galeri ad wadah tuk foto ma video jd klo upload foto dy msuk k wadah foto bgtu pn jga video smua msuk b'dasarkn kaitkan ke agenda"*. Tiap wadah berisi beberapa KELOMPOK (satu per agenda). */ .wadah-grup{margin-bottom:var(--s5)} .wadah-grup:last-child{margin-bottom:0} .wadah-grup-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap; padding:8px 0 10px;border-bottom:1px dashed var(--line);margin-bottom:12px} .wadah-agenda{font-weight:700;font-size:.95rem;color:var(--fg)} /* "Tanpa agenda" dibedakan supaya jelas bukan bagian agenda tertentu. */ .wadah-agenda.wadah-tanpa{color:var(--fg-3);font-weight:600;font-style:italic} /* Grid di dalam wadah: 3 kolom tetap (bukan 4) supaya thumbnail tidak kekecilan. */ .gal.gal-wadah{grid-template-columns:repeat(2,minmax(0,1fr))} @media(min-width:700px){.gal.gal-wadah{grid-template-columns:repeat(3,minmax(0,1fr))}} .gal-sub{font-size:.72rem;font-weight:500;opacity:.8;margin-top:2px} /* Thumbnail VIDEO: pakai