/* ========================================================================= SEATRA — Sistem Desain "Laut Dalam" Palet diturunkan dari logo organisasi (navy #023675 → aqua #07B9C8). Satu aksen hangat (koral) disisakan dari tema Senja untuk ajakan bertindak. ========================================================================= */ /* ---------- 1. Token ---------- */ :root { /* Netral — dasar dingin, bukan abu-abu netral, supaya menyatu dengan navy */ --paper: #F4F7FB; --surface: #FFFFFF; --surface-2: #F8FBFD; --line: #E1E9F2; --line-strong: #CBD8E7; --ink: #0A1F3C; --ink-2: #33507A; --muted: #5C748F; --faint: #8CA0B8; /* Merek — langsung dari logo */ --navy-900: #022A5E; --navy: #04478E; --navy-600: #0567B1; --sea: #0686C8; --aqua: #07B9C8; --foam: #9BDCE7; --foam-soft: #E8F5F9; --navy-soft: #E7EFF9; /* Aksen hangat — dipakai hemat: hanya ajakan bertindak & sorotan */ --senja: #FF6B4A; --senja-ink: #B23A20; --senja-soft: #FFEDE8; --amber: #E08A00; --amber-soft: #FFF4DF; /* Semantik */ --ok: #0E8A5F; --ok-soft: #E3F5EE; --warn: #B36B00; --warn-soft: #FFF4DF; --danger: #C62B45; --danger-soft: #FCE9EC; /* Warna aksen aktif — dipertukarkan oleh nada halaman */ --accent: var(--sea); --accent-ink: var(--navy); --accent-soft: var(--navy-soft); --cta: var(--senja); --cta-ink: #FFFFFF; /* Bentuk & jarak — skala rapat khas aplikasi kerja */ --r-xs: 6px; --r-sm: 8px; --r: 10px; --r-lg: 14px; --r-full: 999px; --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 56px; --topbar-h: 56px; --bottomnav-h: 62px; /* Bayangan tipis — kredibilitas datang dari garis, bukan dari mengambang */ --sh-1: 0 1px 2px rgba(10,31,60,.06); --sh-2: 0 2px 8px rgba(10,31,60,.07); --sh-3: 0 12px 28px -8px rgba(10,31,60,.18); --font-display: 'Archivo', 'Plus Jakarta Sans', system-ui, sans-serif; --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace; } /* Nada "Amanah" — halaman uang, verifikasi, legalitas. Aksen hangat dicabut total: tidak ada koral, tidak ada gradasi. */ [data-tone="amanah"] { --accent: var(--navy); --accent-soft: var(--navy-soft); --cta: var(--navy); --cta-ink: #FFFFFF; --paper: #F5F7FA; } /* Tema alternatif "Senja Sultra" (sesuai spesifikasi lama). Aktifkan dengan untuk membandingkan. */ [data-theme="senja"] { --navy-900: #3D1030; --navy: #8E1F52; --navy-600: #C02460; --sea: #E63977; --aqua: #FF6B4A; --foam: #FFC9A6; --foam-soft: #FFF0E9; --navy-soft: #FDE1EC; --cta: #FFB020; --cta-ink: #3D1030; --ink: #241733; --ink-2: #58405F; } /* ---------- 2. Dasar ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 14.5px; line-height: 1.55; -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; } h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 700; letter-spacing: -.015em; line-height: 1.2; color: var(--ink); } h1 { font-size: 24px; } h2 { font-size: 18px; } h3 { font-size: 15.5px; } h4 { font-size: 13.5px; } p { margin: 0 0 var(--s-3); } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } :focus-visible { outline: 2px solid var(--sea); outline-offset: 2px; border-radius: var(--r-xs); } img, svg { max-width: 100%; } [hidden] { display: none !important; } .mono { font-family: var(--font-mono); font-size: .92em; letter-spacing: -.02em; } .muted { color: var(--muted); } .faint { color: var(--faint); } .tiny { font-size: 11.5px; } .sm { font-size: 13px; } .strong { font-weight: 650; } .num { font-family: var(--font-mono); font-weight: 500; } .row { display: flex; align-items: center; gap: var(--s-2); } .row.wrap { flex-wrap: wrap; } .spread { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); } .grow { flex: 1; min-width: 0; } .stack { display: flex; flex-direction: column; gap: var(--s-3); } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } /* ---------- 3. Kerangka aplikasi ---------- */ /* Menu utama horizontal di atas. Kolom isi dibiarkan lebar karena di situlah lini masa (posting teks/gambar/video) akan tinggal. */ .appshell { min-height: 100dvh; display: flex; flex-direction: column; } .content { padding: var(--s-5) var(--s-6) var(--s-8); max-width: 1560px; width: 100%; margin: 0 auto; } /* Dua kolom: lini masa + rel obrolan yang menempel */ .duacol { display: grid; grid-template-columns: minmax(0,1fr) 380px; gap: var(--s-5); align-items: start; } .rail { position: sticky; top: calc(var(--topbar-h) + var(--s-4)); } /* --- Bilah atas --- */ .topbar { position: sticky; top: 0; z-index: 40; height: var(--topbar-h); background: rgba(255,255,255,.92); backdrop-filter: saturate(1.6) blur(8px); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: var(--s-3); padding: 0 var(--s-5); } .topbar .mobilebrand { display: none; align-items: center; gap: 8px; } .topbar .mobilebrand .mark { width: 28px; height: 28px; } .topbar .mobilebrand b { font-family: var(--font-display); letter-spacing: .05em; font-size: 15px; } .search { flex: 1; max-width: 420px; position: relative; } .search input { width: 100%; height: 34px; padding: 0 12px 0 34px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); font: inherit; font-size: 13.5px; color: var(--ink); } .search input::placeholder { color: var(--faint); } .search input:focus { background: #fff; border-color: var(--sea); outline: none; box-shadow: 0 0 0 3px rgba(6,134,200,.13); } .search .ico { position: absolute; left: 10px; top: 8px; width: 17px; height: 17px; color: var(--faint); } .topbar .actions { margin-left: auto; display: flex; align-items: center; gap: 6px; } /* Pengalih peran — demo memungkinkan Anggota ↔ Pengurus */ .roleswitch { display: flex; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-full); padding: 2px; } .roleswitch button { border: 0; background: none; font: inherit; font-size: 12px; font-weight: 600; padding: 3px 11px; border-radius: var(--r-full); color: var(--muted); cursor: pointer; } .roleswitch button[aria-pressed="true"] { background: var(--navy); color: #fff; } .iconbtn { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink-2); cursor: pointer; position: relative; } .iconbtn:hover { background: var(--surface-2); border-color: var(--line-strong); } .iconbtn .dot { position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--senja); border: 1.5px solid #fff; } .avatar { width: 32px; height: 32px; flex: none; border-radius: var(--r-sm); background: linear-gradient(140deg, var(--navy-600), var(--aqua)); color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 700; font-family: var(--font-display); letter-spacing: .02em; } .avatar.lg { width: 52px; height: 52px; font-size: 17px; border-radius: var(--r); } .avatar.xs { width: 26px; height: 26px; font-size: 10.5px; border-radius: var(--r-xs); } /* ---------- 4. Kepala halaman + tanda tangan "garis denyut" ---------- */ .pagehead { margin-bottom: var(--s-5); } .pagehead .eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--accent); margin-bottom: 5px; } .pagehead h1 { font-size: 25px; } .pagehead .desc { color: var(--muted); font-size: 13.5px; margin-top: 5px; max-width: 68ch; } /* Garis air: motif ombak+denyut dari logo, muncul tepat sekali per halaman */ .waterline { display: block; width: 100%; height: 10px; margin: var(--s-4) 0 0; overflow: visible; } .waterline path { fill: none; stroke-width: 2; stroke-linecap: round; } .waterline .wave { stroke: var(--foam); } .waterline .pulse { stroke: var(--aqua); } .waterline .spark { stroke: var(--cta); } /* ---------- 5. Kartu & panel ---------- */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); } .card > .hd { padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); } .card > .bd { padding: var(--s-5); } .card > .bd.tight { padding: var(--s-4); } .card > .ft { padding: var(--s-3) var(--s-5); border-top: 1px solid var(--line); background: var(--surface-2); border-radius: 0 0 var(--r-lg) var(--r-lg); } .grid { display: grid; gap: var(--s-4); } .grid.c2 { grid-template-columns: repeat(2, minmax(0,1fr)); } .grid.c3 { grid-template-columns: repeat(3, minmax(0,1fr)); } .grid.c4 { grid-template-columns: repeat(4, minmax(0,1fr)); } .grid.main { grid-template-columns: minmax(0,1fr) 340px; align-items: start; } /* Kartu angka — label kecil di atas, angka besar bertabular */ .stat { padding: var(--s-4); } .stat .k { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; color: var(--muted); text-transform: uppercase; } .stat .v { font-family: var(--font-display); font-size: 27px; font-weight: 700; letter-spacing: -.02em; margin-top: 2px; } .stat .d { font-size: 12px; color: var(--muted); margin-top: 2px; } .stat .d.up { color: var(--ok); } .stat .d.down { color: var(--danger); } /* ---------- 6. Tombol ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 34px; padding: 0 14px; border-radius: var(--r-sm); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: background .13s ease, border-color .13s ease, transform .08s ease; white-space: nowrap; } .btn:hover { background: var(--surface-2); text-decoration: none; } .btn:active { transform: translateY(1px); } .btn.primary { background: var(--cta); border-color: transparent; color: var(--cta-ink); } .btn.primary:hover { filter: brightness(.94); } .btn.navy { background: var(--navy); border-color: transparent; color: #fff; } .btn.navy:hover { background: var(--navy-900); } .btn.ghost { border-color: transparent; background: transparent; color: var(--ink-2); } .btn.ghost:hover { background: var(--surface-2); } .btn.danger { color: var(--danger); border-color: #F3C9D1; background: var(--danger-soft); } .btn.s { height: 28px; padding: 0 10px; font-size: 12.5px; } .btn.lg { height: 42px; padding: 0 20px; font-size: 15px; } .btn.block { width: 100%; } .btn[disabled] { opacity: .45; pointer-events: none; } .btn .ico { width: 16px; height: 16px; flex: none; } /* ---------- 7. Label status ---------- */ .pill { display: inline-flex; align-items: center; gap: 5px; height: 21px; padding: 0 9px; border-radius: var(--r-full); font-size: 11.5px; font-weight: 650; letter-spacing: .01em; background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); } .pill.sea { background: var(--navy-soft); color: var(--navy); border-color: transparent; } .pill.aqua { background: var(--foam-soft); color: #05707C; border-color: transparent; } .pill.ok { background: var(--ok-soft); color: var(--ok); border-color: transparent; } .pill.warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; } .pill.danger { background: var(--danger-soft); color: var(--danger); border-color: transparent; } .pill.cta { background: var(--senja-soft); color: var(--senja-ink); border-color: transparent; } .pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } /* Penanda status pengembangan — dari kolom Status di spesifikasi */ .tag-status { font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .05em; } /* ---------- 8. Daftar & tabel ---------- */ .list { display: flex; flex-direction: column; } .list > .item { padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--line); display: flex; gap: var(--s-3); } .list > .item:last-child { border-bottom: 0; } .list > .item:hover { background: var(--surface-2); } table.t { width: 100%; border-collapse: collapse; font-size: 13.5px; } table.t th { text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); padding: 9px var(--s-4); border-bottom: 1px solid var(--line-strong); background: var(--surface-2); } table.t td { padding: 11px var(--s-4); border-bottom: 1px solid var(--line); vertical-align: top; } table.t tr:last-child td { border-bottom: 0; } table.t td.n { font-family: var(--font-mono); text-align: right; white-space: nowrap; } /* ---------- 9. Form ---------- */ label.f { display: block; font-size: 12.5px; font-weight: 650; margin-bottom: 5px; color: var(--ink); } label.f .opt { font-weight: 400; color: var(--faint); } .in, select.in, textarea.in { width: 100%; padding: 8px 11px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); font: inherit; font-size: 13.5px; background: var(--surface); color: var(--ink); } .in:focus { outline: none; border-color: var(--sea); box-shadow: 0 0 0 3px rgba(6,134,200,.13); } textarea.in { min-height: 88px; resize: vertical; } .hint { font-size: 12px; color: var(--muted); margin-top: 5px; } .err { font-size: 12px; color: var(--danger); margin-top: 5px; } /* ---------- 10. Catatan & keadaan kosong ---------- */ .note { display: flex; gap: 10px; padding: var(--s-3) var(--s-4); border-radius: var(--r); font-size: 13px; border: 1px solid transparent; } .note .ico { width: 17px; height: 17px; flex: none; margin-top: 2px; } .note.info { background: var(--navy-soft); color: var(--navy); } .note.warn { background: var(--warn-soft); color: #7A4A00; } .note.danger { background: var(--danger-soft);color: #8E1B30; } .note.ok { background: var(--ok-soft); color: #0A6144; } .empty { text-align: center; padding: var(--s-8) var(--s-5); color: var(--muted); } .empty h3 { margin-bottom: 5px; } .empty .ico { width: 34px; height: 34px; color: var(--faint); margin-bottom: var(--s-3); } /* ---------- 11. Bilah bawah (mobile) ---------- */ .bottomnav { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; height: calc(var(--bottomnav-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: rgba(255,255,255,.96); backdrop-filter: blur(10px); border-top: 1px solid var(--line); } .bottomnav .items { display: grid; grid-template-columns: repeat(5,1fr); height: var(--bottomnav-h); } .bottomnav a, .bottomnav button { border: 0; background: none; font: inherit; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 10.5px; font-weight: 600; color: var(--muted); text-decoration: none; } .bottomnav .ico { width: 21px; height: 21px; } .bottomnav [aria-current="page"] { color: var(--navy); } .bottomnav .center .ico { width: 44px; height: 44px; border-radius: 13px; margin-top: -16px; background: var(--cta); color: var(--cta-ink); display: grid; place-items: center; box-shadow: 0 6px 16px -4px rgba(255,107,74,.5); border: 3px solid #fff; } [data-tone="amanah"] .bottomnav .center .ico { box-shadow: 0 6px 16px -4px rgba(4,71,142,.4); } /* ---------- 12. Lembar geser & pemberitahuan ---------- */ .sheet-back { position: fixed; inset: 0; background: rgba(4,20,40,.42); z-index: 60; } .sheet { position: fixed; z-index: 61; background: var(--surface); left: 0; right: 0; bottom: 0; border-radius: var(--r-lg) var(--r-lg) 0 0; max-height: 86dvh; overflow-y: auto; box-shadow: var(--sh-3); padding-bottom: env(safe-area-inset-bottom); } .sheet .hd { padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; } .sheet .bd { padding: var(--s-4) var(--s-5) var(--s-6); } .toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--bottomnav-h) + 18px); z-index: 70; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: var(--r-full); font-size: 13px; font-weight: 600; box-shadow: var(--sh-3); } /* Bilah luring — muncul saat koneksi hilang */ .offlinebar { display: none; background: var(--amber-soft); color: #7A4A00; border-bottom: 1px solid #F0DBB0; padding: 7px var(--s-5); font-size: 12.5px; font-weight: 600; } body.is-offline .offlinebar { display: block; } /* ---------- 13. Responsif ---------- */ @media (max-width: 1360px) { .grid.main { grid-template-columns: minmax(0,1fr); } .grid.c4 { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 1180px) { .duacol { grid-template-columns: minmax(0,1fr); } .rail { position: static; } } @media (max-width: 900px) { .topnav .items { display: none; } .topnav .brandtext { display: none; } } @media (max-width: 768px) { .bottomnav { display: block; } .topbar .mobilebrand { display: flex; } .topbar { padding: 0 var(--s-4); } .search { display: none; } .content { padding: var(--s-4) var(--s-4) calc(var(--bottomnav-h) + var(--s-7)); } .grid.c2, .grid.c3, .grid.c4 { grid-template-columns: minmax(0,1fr); } .pagehead h1 { font-size: 21px; } .card > .bd { padding: var(--s-4); } .list > .item { padding: var(--s-3) var(--s-4); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } } @media print { .topbar, .topnav, .bottomnav, .rail { display: none !important; } } /* ========================================================================= 14. Bilah menu atas — dirapatkan agar sepuluh butir muat satu baris ========================================================================= */ .topnav { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.94); backdrop-filter: saturate(1.6) blur(10px); border-bottom: 1px solid var(--line); } .topnav .inner { display: flex; align-items: center; gap: var(--s-3); height: 56px; padding: 0 var(--s-4); max-width: 1680px; margin: 0 auto; } .topnav .brand { display: flex; align-items: center; gap: 8px; flex: none; text-decoration: none; max-width: 190px; } .topnav .brand .mark { width: 32px; height: 32px; border-radius: 8px; flex: none; } .topnav .brandtext { min-width: 0; } .topnav .brandtext .n { font-family: var(--font-display); font-weight: 700; font-size: 13.5px; letter-spacing: .05em; color: var(--ink); line-height: 1.15; } .topnav .brandtext .s { font-size: 10.5px; color: var(--muted); max-width: 140px; } .topnav .items { display: flex; align-items: center; gap: 1px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; padding-left: var(--s-2); border-left: 1px solid var(--line); } .topnav .items::-webkit-scrollbar { display: none; } .tnavlink { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; padding: 6px 9px; border-radius: var(--r-sm); position: relative; color: var(--ink-2); font-size: 12.5px; font-weight: 600; text-decoration: none; letter-spacing: -.005em; } .tnavlink:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; } .tnavlink .ico { width: 15px; height: 15px; opacity: .75; flex: none; } .tnavlink[aria-current="page"] { background: var(--navy); color: #fff; } .tnavlink[aria-current="page"] .ico { opacity: 1; color: var(--foam); } .tnavlink .count { font-family: var(--font-mono); font-size: 10px; background: var(--senja); color: #fff; padding: 0 4px; border-radius: var(--r-full); line-height: 15px; } .tnavlink[aria-current="page"] .count { background: rgba(255,255,255,.25); } .tnavlink[data-tone="amanah"]::after { content: ""; position: absolute; left: 9px; right: 9px; bottom: 2px; height: 2px; border-radius: 2px; background: var(--aqua); opacity: .5; } .tnavlink[aria-current="page"][data-tone="amanah"]::after { background: var(--foam); opacity: .8; } /* Ikon disembunyikan lebih dulu saat ruang menyempit — teks lebih penting */ @media (max-width: 1400px) { .tnavlink .ico { display: none; } .tnavlink { padding: 6px 10px; } } @media (max-width: 1180px) { .topnav .brandtext { display: none; } } .topnav .right { display: flex; align-items: center; gap: 6px; flex: none; padding-left: var(--s-2); border-left: 1px solid var(--line); } .pill.peran-super_admin { background: #2A1A4A; color: #E4D9FF; } .pill.peran-admin { background: var(--navy); color: #fff; } .pill.peran-pengurus { background: var(--foam-soft); color: #05707C; } .pill.peran-anggota { background: var(--surface-2); color: var(--muted); } @media (max-width: 900px) { .topnav .right .pill { display: none; } } /* Menu akun */ .menu-akun { position: relative; } .menu-akun > summary { list-style: none; cursor: pointer; } .menu-akun > summary::-webkit-details-marker { display: none; } .menu-akun .panel { position: absolute; right: 0; top: calc(100% + 8px); width: 236px; z-index: 50; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-3); overflow: hidden; padding-bottom: 4px; } .menu-akun .panel .kepala { padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--surface-2); } .menu-akun .panel a, .menu-akun .panel button { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; padding: 9px 12px; font: inherit; font-size: 13px; font-weight: 600; color: var(--ink-2); background: none; border: 0; cursor: pointer; text-decoration: none; } .menu-akun .panel a:hover, .menu-akun .panel button:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; } .menu-akun .panel form { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 4px; } .menu-akun .panel form button { color: var(--danger); } /* ========================================================================= 15. Lini masa: komposer & pos (chit-chat) ========================================================================= */ .komposer { display: flex; gap: var(--s-3); padding: var(--s-4) var(--s-5); } .komposer .area { flex: 1; min-height: 46px; border: 0; resize: none; font: inherit; font-size: 15px; color: var(--ink); background: transparent; padding: 8px 0; } .komposer .area::placeholder { color: var(--faint); } .komposer .area:focus { outline: none; } .komposer-alat { display: flex; align-items: center; gap: 4px; padding: 0 var(--s-5) var(--s-4) calc(var(--s-5) + 32px + var(--s-3)); flex-wrap: wrap; } .komposer-alat .kiri { display: flex; gap: 2px; } .alatbtn { width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--sea); cursor: pointer; } .alatbtn:hover { background: var(--navy-soft); } .alatbtn[disabled] { color: var(--faint); cursor: not-allowed; } .penyaring { font-size: 11.5px; color: var(--muted); display: flex; align-items: center; gap: 5px; } .penyaring.tahan { color: var(--warn); font-weight: 600; } .penyaring.blokir { color: var(--danger); font-weight: 600; } .pos { display: flex; gap: var(--s-3); padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--line); } .pos:hover { background: var(--surface-2); } .pos .isi { flex: 1; min-width: 0; } .pos .kepala { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font-size: 13.5px; } .pos .kepala .nama { font-weight: 700; color: var(--ink); } .pos .kepala .meta { color: var(--faint); font-size: 12.5px; } .pos .teks { margin: 3px 0 0; font-size: 14.5px; line-height: 1.5; white-space: pre-wrap; } .pos .lampiran { margin-top: 10px; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; } .pos .lampiran img { display: block; width: 100%; } .pos .lampiran .video { aspect-ratio: 16/9; display: grid; place-items: center; gap: 6px; background: var(--navy-900); color: var(--foam); font-size: 12.5px; text-align: center; padding: var(--s-4); } .pos .aksi { display: flex; gap: var(--s-6); margin-top: 10px; } .pos .aksi button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 0; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--muted); cursor: pointer; } .pos .aksi button:hover { color: var(--sea); } .pos .aksi button.suka:hover { color: var(--senja); } /* Pos yang ditahan penyaring kata */ .pos.ditahan { background: var(--warn-soft); } .pos.disembunyikan .teks { filter: blur(4px); user-select: none; } /* ========================================================================= 16. Rel obrolan ========================================================================= */ .chatbox { display: flex; flex-direction: column; height: calc(100dvh - var(--topbar-h) - var(--s-8)); max-height: 720px; } .chatbox .kepala { padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); } .chatbox .tema { display: flex; gap: 5px; padding: var(--s-2) var(--s-3); overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: none; } .chatbox .tema::-webkit-scrollbar { display: none; } .chatbox .tema button { border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-full); padding: 3px 11px; font: inherit; font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; cursor: pointer; } .chatbox .tema button.on { background: var(--navy); border-color: transparent; color: #fff; } .chatbox .badan { flex: 1; overflow-y: auto; padding: var(--s-3) var(--s-4); display: flex; flex-direction: column; gap: var(--s-3); } .chatbox .kaki { border-top: 1px solid var(--line); padding: var(--s-3) var(--s-4); } .pesan { display: flex; gap: 9px; } .pesan .balon { background: var(--surface-2); border: 1px solid var(--line); border-radius: 4px 12px 12px 12px; padding: 8px 11px; font-size: 13.5px; line-height: 1.45; max-width: 100%; } .pesan .nm { font-size: 11.5px; color: var(--muted); margin-bottom: 3px; } .pesan.saya { flex-direction: row-reverse; } .pesan.saya .balon { background: var(--navy-soft); border-color: transparent; border-radius: 12px 4px 12px 12px; } .kirim { display: flex; align-items: flex-end; gap: 6px; border: 1px solid var(--line-strong); border-radius: var(--r); padding: 6px; background: var(--surface); } .kirim textarea { flex: 1; border: 0; resize: none; font: inherit; font-size: 13.5px; min-height: 34px; max-height: 110px; background: transparent; } .kirim textarea:focus { outline: none; } /* ========================================================================= 17. Halaman publik (landing) ========================================================================= */ .pub { background: var(--surface); } .pubnav { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.9); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } .pubnav .inner { max-width: 1180px; margin: 0 auto; padding: 0 var(--s-5); height: 66px; display: flex; align-items: center; gap: var(--s-5); } .pubnav .tautan { margin-left: auto; display: flex; gap: var(--s-2); align-items: center; } .pubnav .tautan a { font-size: 13.5px; font-weight: 600; color: var(--ink-2); padding: 8px 12px; border-radius: var(--r-sm); } .pubnav .tautan a:hover { background: var(--surface-2); text-decoration: none; } .hero { position: relative; overflow: hidden; background: linear-gradient(168deg, #F2F8FC 0%, #E6F1FA 55%, #DDEEF6 100%); } .hero::after { content: ""; position: absolute; right: -8%; top: -30%; width: 620px; height: 620px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, rgba(7,185,200,.20), rgba(4,71,142,0) 62%); pointer-events: none; } .hero .inner { max-width: 1180px; margin: 0 auto; padding: var(--s-9) var(--s-5); display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--s-8); align-items: center; position: relative; z-index: 1; } .hero h1 { font-size: 46px; line-height: 1.08; letter-spacing: -.03em; } .hero h1 .tekan { color: var(--navy); } .hero h1 .laut { background: linear-gradient(96deg, var(--sea), var(--aqua)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .hero .lead { font-size: 16px; color: var(--ink-2); max-width: 52ch; margin: var(--s-4) 0 var(--s-6); } .eyebrow-pill { display: inline-flex; align-items: center; gap: 7px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-full); padding: 5px 13px 5px 8px; font-size: 12.5px; font-weight: 600; color: var(--navy); box-shadow: var(--sh-1); } .sec { max-width: 1180px; margin: 0 auto; padding: var(--s-9) var(--s-5); } .sec-head { max-width: 60ch; margin-bottom: var(--s-6); } .sec-head h2 { font-size: 30px; letter-spacing: -.025em; } .sec-head p { color: var(--muted); margin-top: 8px; } .fitur { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--s-4); } .fitur .kartu { padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); } .fitur .kartu .lambang { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--navy-soft); color: var(--navy); margin-bottom: var(--s-3); } .fitur .kartu h3 { margin-bottom: 5px; } .fitur .kartu p { color: var(--muted); font-size: 13.5px; margin: 0; } .angka { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--s-4); } .angka .a { text-align: center; padding: var(--s-5) var(--s-3); border: 1px solid var(--line); border-radius: var(--r-lg); } .angka .a .v { font-family: var(--font-display); font-size: 30px; font-weight: 700; color: var(--navy); } .angka .a .k { font-size: 12.5px; color: var(--muted); margin-top: 3px; } .pubfoot { background: var(--navy-900); color: #B9CFE8; padding: var(--s-8) var(--s-5) var(--s-6); } .pubfoot .inner { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s-6); } .pubfoot a { color: #DCE8F7; font-size: 13.5px; display: block; padding: 3px 0; } .pubfoot h4 { color: #fff; margin-bottom: var(--s-2); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; } .pubfoot .bawah { max-width: 1180px; margin: var(--s-6) auto 0; padding-top: var(--s-4); border-top: 1px solid rgba(255,255,255,.12); font-size: 12px; } /* ========================================================================= 18. Sorotan (reels foto + keterangan, diisi pengurus) ========================================================================= */ .sorotan { display: flex; gap: var(--s-4); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--s-3); scrollbar-width: thin; } .sorotan::-webkit-scrollbar { height: 6px; } .sorotan::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; } .reel { flex: none; width: 260px; aspect-ratio: 9/14; scroll-snap-align: start; position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--navy-900); color: #fff; border: 1px solid var(--line); text-decoration: none; } .reel .gbr { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .reel .tirai { position: absolute; inset: 0; background: linear-gradient(to top, rgba(2,25,55,.92) 0%, rgba(2,25,55,.35) 45%, rgba(2,25,55,.05) 100%); } .reel .isi { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--s-4); } .reel .label { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: rgba(255,255,255,.18); backdrop-filter: blur(4px); padding: 3px 9px; border-radius: var(--r-full); margin-bottom: 8px; } .reel h3 { color: #fff; font-size: 15.5px; line-height: 1.25; } .reel p { color: #CFE3F5; font-size: 12.5px; margin: 5px 0 0; line-height: 1.4; } .reel .cap { font-size: 11px; color: #93B4D6; margin-top: 8px; display: flex; align-items: center; gap: 5px; } .reel:hover { text-decoration: none; } .reel:hover .gbr { transform: scale(1.03); transition: transform .3s ease; } /* Slot kosong — supaya pengurus tahu ada yang harus diisi */ .reel.kosong { background: var(--surface-2); border: 1.5px dashed var(--line-strong); color: var(--muted); display: grid; place-items: center; text-align: center; padding: var(--s-5); } /* ========================================================================= 19. Kartu anggota digital (e-Card) Kartu adalah GAMBAR hasil render server, bukan tata letak CSS. Satu perender untuk layar dan unduhan — tidak bisa melenceng satu sama lain. ========================================================================= */ .ecard-bingkai { width: 100%; max-width: 720px; aspect-ratio: 1.5; border-radius: 16px; overflow: hidden; background: var(--surface-2); box-shadow: 0 18px 40px -14px rgba(4,40,90,.32); border: 1px solid var(--line); position: relative; } .ecard-bingkai img { display: block; width: 100%; height: 100%; object-fit: cover; } /* Kerangka saat gambar masih dimuat */ .ecard-bingkai::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(100deg, var(--surface-2) 30%, var(--foam-soft) 50%, var(--surface-2) 70%); background-size: 240% 100%; animation: geser 1.4s linear infinite; } .ecard-bingkai img { position: relative; z-index: 1; } @keyframes geser { to { background-position: -240% 0; } } @media (max-width: 1180px) { .hero .inner { grid-template-columns: minmax(0,1fr); gap: var(--s-6); } .hero h1 { font-size: 36px; } .pubfoot .inner { grid-template-columns: 1fr 1fr; } } @media (max-width: 768px) { .fitur, .angka { grid-template-columns: minmax(0,1fr); } .angka { grid-template-columns: repeat(2, minmax(0,1fr)); } .hero .inner, .sec { padding: var(--s-7) var(--s-4); } .hero h1 { font-size: 30px; } .sec-head h2 { font-size: 23px; } .pubnav .tautan a:not(.btn) { display: none; } .pubfoot .inner { grid-template-columns: 1fr; } .komposer, .pos { padding: var(--s-3) var(--s-4); } .komposer-alat { padding-left: var(--s-4); } .reel { width: 220px; } .chatbox { height: auto; max-height: none; } }