/* ============================================================ Zumnaa IAM — Liquid Glass tokens SOURCE OF TRUTH. Templates compose these; they never write raw backdrop-filter / surface rgba themselves. Pair with Tailwind standalone CLI output (app.css). ============================================================ */ :root { color-scheme: light dark; } /* ---- Ambient background (what the glass refracts) ---- */ body { min-height: 100vh; background: radial-gradient(1200px 700px at 12% -8%, #ffd9a0 0%, transparent 55%), radial-gradient(1000px 800px at 92% 8%, #c4a0ff 0%, transparent 55%), radial-gradient(900px 900px at 60% 110%, #7ee0d8 0%, transparent 55%), linear-gradient(120deg, #f2ede6, #e9e4f2); background-attachment: fixed; } html.dark body { background: radial-gradient(1200px 700px at 12% -8%, #6a3d12 0%, transparent 55%), radial-gradient(1000px 800px at 92% 8%, #3a2260 0%, transparent 55%), radial-gradient(900px 900px at 60% 110%, #0d4a44 0%, transparent 55%), linear-gradient(120deg, #14121a, #100d18); background-attachment: fixed; } /* ---- Glass level 1: subtle (rows hover, chips, inputs) ---- */ .glass-subtle { background: rgba(255,255,255,0.28); backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%); border: 1px solid rgba(255,255,255,0.40); } html.dark .glass-subtle { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10); } /* ---- Glass level 2: standard (cards, sidebar, topbar, tables) ---- */ .glass { background: rgba(255,255,255,0.42); backdrop-filter: blur(22px) saturate(180%); -webkit-backdrop-filter: blur(22px) saturate(180%); border: 1px solid rgba(255,255,255,0.55); box-shadow: 0 8px 32px rgba(31,38,80,0.14), inset 0 1px 0 rgba(255,255,255,0.65), inset 0 -1px 0 rgba(255,255,255,0.10); } html.dark .glass { background: rgba(28,26,38,0.42); border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 8px 32px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.14), inset 0 -1px 0 rgba(255,255,255,0.04); } /* ---- Glass level 3: strong (modals, dropdowns, toasts) ---- */ .glass-strong { background: rgba(255,255,255,0.60); backdrop-filter: blur(40px) saturate(200%); -webkit-backdrop-filter: blur(40px) saturate(200%); border: 1px solid rgba(255,255,255,0.70); box-shadow: 0 20px 60px rgba(31,38,80,0.28), inset 0 1px 0 rgba(255,255,255,0.80); } html.dark .glass-strong { background: rgba(30,28,40,0.66); border: 1px solid rgba(255,255,255,0.16); box-shadow: 0 20px 60px rgba(0,0,0,0.60), inset 0 1px 0 rgba(255,255,255,0.16); } /* ---- Glass level 4: liquid (floating menus/popovers ala macOS/iOS) ---- Dipakai utk elemen MELAYANG di atas segalanya (dropdown akun, popover). WAJIB dirender di body (x-teleport) — jangan di dalam .glass/.refract: backdrop-filter induk menjadi containing block + overflow:hidden memotong panel (bug dropdown profil 2026-07-10). */ .glass-liquid { background: linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.55)); backdrop-filter: blur(48px) saturate(220%) brightness(1.05); -webkit-backdrop-filter: blur(48px) saturate(220%) brightness(1.05); border: 1px solid rgba(255,255,255,0.75); box-shadow: 0 24px 70px rgba(31,38,80,0.30), 0 6px 18px rgba(31,38,80,0.14), inset 0 1px 0 rgba(255,255,255,0.90), inset 0 -1px 0 rgba(255,255,255,0.20); } html.dark .glass-liquid { background: linear-gradient(180deg, rgba(44,42,58,0.78), rgba(30,28,40,0.72)); border: 1px solid rgba(255,255,255,0.18); box-shadow: 0 24px 70px rgba(0,0,0,0.65), 0 6px 18px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -1px 0 rgba(255,255,255,0.05); } /* refleksi specular atas — efek "liquid" lensa (tanpa .refract, boleh dipakai bersama border-radius apa pun). CATATAN: sengaja TANPA `position: relative` — glass.css dimuat setelah app.css sehingga akan menimpa .fixed/.absolute Tailwind (specificity sama, last wins). Elemen pemakai wajib positioned sendiri (fixed/ absolute) supaya ::before ter-anchor. */ .glass-liquid::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 45%; border-radius: inherit; border-bottom-left-radius: 0; border-bottom-right-radius: 0; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,0.35), transparent); mix-blend-mode: overlay; } /* animasi masuk elemen .glass-liquid — spring kecil ala macOS. Restart otomatis tiap x-show menampilkan elemen (display none→block). Reduced-motion dimatikan oleh rule global di bawah. */ @keyframes glass-liquid-in { 0% { opacity: 0; transform: scale(.92) translateY(-10px); filter: blur(3px); } 55% { opacity: 1; transform: scale(1.015) translateY(1px); filter: blur(0); } 100% { opacity: 1; transform: scale(1) translateY(0); } } .liquid-in { animation: glass-liquid-in .30s cubic-bezier(.3, 1.35, .55, 1); } /* ---- Specular edge highlight (cards & modals only, never nested) ---- */ .refract { position: relative; overflow: hidden; } .refract::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(135deg, rgba(255,255,255,0.50) 0%, transparent 30%, transparent 70%, rgba(255,255,255,0.18) 100%); mix-blend-mode: overlay; } /* ---- Layout fill-height (keputusan user 2026-07-10) ---- Halaman ber-tabel TIDAK boleh membuat scrollbar browser: shell dikunci setinggi viewport, kartu tabel .fill-page mengisi sisa tinggi, dan scroll terjadi DI DALAM .table-scroll (thead sticky berlatar glass). Berlaku desktop & mobile. */ .fill-page { flex: 1 1 0%; min-height: 0; display: flex; flex-direction: column; } .table-scroll { flex: 1 1 0%; min-height: 0; overflow: auto; } .table-scroll thead th { position: sticky; top: 0; z-index: 5; background: rgba(255,255,255,0.55); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); } html.dark .table-scroll thead th { background: rgba(30,28,40,0.78); } /* paginasi menempel di DASAR area scroll — tidak ikut tergulir (keputusan user 2026-07-10); latar glass supaya baris lewat di belakang */ .table-scroll .paging-sticky { position: sticky; bottom: 0; z-index: 5; background: rgba(255,255,255,0.55); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); border-top: 1px solid rgba(255,255,255,0.45); } html.dark .table-scroll .paging-sticky { background: rgba(30,28,40,0.78); border-top: 1px solid rgba(255,255,255,0.10); } /* ---- Spinner ---- */ .glass-spinner { width: 1.5rem; height: 1.5rem; border-radius: 9999px; border: 2.5px solid rgba(255,255,255,0.35); border-top-color: rgb(99 102 241); /* indigo-500 */ animation: glass-spin .7s linear infinite; display: inline-block; } @keyframes glass-spin { to { transform: rotate(360deg); } } /* HTMX indicator plumbing */ .htmx-indicator { display: none; } .htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: flex; } /* Button inline-loading: