/* ========================================================================= LATAR GRADASI + BLOB iOS - BERKAS KANONIK ------------------------------------------------------------------------- Satu-satunya berkas latar halaman di proyek ini. JANGAN menyalin aturan blob di bawah ke CSS halaman mana pun; cukup muat berkas ini. Cara pasang: satu di posisi TERAKHIR dalam , setelah seluruh CSS lain. Urutannya penting - site.css dan panel.css juga menyetel body{background}, dan yang menang ditentukan urutan muat. JANGAN dipasang pada: halaman cetak/PDF (blob position:fixed menyebabkan halaman kosong ekstra), fragmen AJAX (tidak punya ), dan iframe pratinjau berkas. Latarnya murni body{background} + tiga pseudo-element fixed ber-z-index -1, jadi tidak butuh perubahan HTML, JavaScript, atau penyesuaian z-index. ========================================================================= */ :root{ /* Gradasi pastel: biru muda -> ungu -> merah muda. Selaras identitas psikologi pada tema utama situs. */ --pg-grad-1:#EEF2FF; --pg-grad-2:#F3E8FF; --pg-grad-3:#FDF2F8; --pg-blob-nila:#A5B4FC; --pg-blob-merah-muda:#F9A8D4; --pg-blob-lavender:#C4B5FD; --pg-blur:80px; --pg-opasitas:.35; } body{ background:linear-gradient(135deg, var(--pg-grad-1) 0%, var(--pg-grad-2) 50%, var(--pg-grad-3) 100%) !important; min-height:100vh; } /* html sengaja TIDAK diberi background: latar body dipropagasi ke kanvas justru karena html tidak punya latar sendiri. Begitu html diberi latar, latar body berubah jadi lapisan nyata yang menutupi blob z-index:-1. */ html::before, html::after, body::before{ content:''; position:fixed; border-radius:50%; filter:blur(var(--pg-blur)); opacity:var(--pg-opasitas); pointer-events:none; z-index:-1; } /* Blob nila - kiri atas */ html::before{ width:420px; height:420px; top:-120px; left:-110px; background:var(--pg-blob-nila); animation:pgMelayang 8s ease-in-out infinite; } /* Blob merah muda - kanan bawah */ html::after{ width:320px; height:320px; bottom:-90px; right:-80px; background:var(--pg-blob-merah-muda); animation:pgMelayang 10s ease-in-out infinite reverse; } /* Blob lavender - tengah kanan */ body::before{ width:200px; height:200px; top:46%; right:8%; background:var(--pg-blob-lavender); animation:pgMelayang 12s ease-in-out 2s infinite; } @keyframes pgMelayang{ 0%,100%{ transform:translate(0,0) scale(1); } 50% { transform:translate(26px,-22px) scale(1.07); } } /* -- Layar sempit: blob diredam supaya teks tetap tenang dibaca ----------- */ @media (max-width:480px){ :root{ --pg-opasitas:.22; --pg-blur:64px; } html::before{ width:280px; height:280px; } html::after { width:220px; height:220px; } body::before{ display:none; } } /* -- Hormati pengaturan aksesibilitas ------------------------------------- */ :root[data-gerak="diam"] html::before, :root[data-gerak="diam"] html::after, :root[data-gerak="diam"] body::before{ animation:none; } @media (prefers-reduced-motion: reduce){ html::before, html::after, body::before{ animation:none; } } /* Kontras tinggi & mode gelap mematikan latar dekoratif sepenuhnya: gradasi pastel merusak rasio kontras yang justru sedang diminta pengguna. */ :root[data-kontras="tinggi"] body{ background:#000 !important; } :root[data-kontras="gelap"] body{ background:#15101F !important; } :root[data-kontras="sepia"] body{ background:#F6EFE2 !important; } :root[data-kontras="tinggi"] html::before, :root[data-kontras="tinggi"] html::after, :root[data-kontras="tinggi"] body::before, :root[data-kontras="gelap"] html::before, :root[data-kontras="gelap"] html::after, :root[data-kontras="gelap"] body::before, :root[data-kontras="sepia"] html::before, :root[data-kontras="sepia"] html::after, :root[data-kontras="sepia"] body::before{ display:none; } /* -- Cetak: latar berwarna tidak boleh terbawa ke kertas ------------------ */ @media print{ body{ background:#fff !important; } html::before, html::after, body::before{ display:none !important; } }