/* =================================================== publik.css — Skala adaptif Layanan Publik + Auth MASALAH Sebagian besar pengguna memakai display scaling Windows 125%. Monitor 1920x1080 pada 125% melaporkan viewport CSS 1536px, bukan 1920px. Semua ukuran px tetap sama persis sementara ruang di sekitarnya menyusut ~23%, jadi teks, padding, gambar dan kartu terbaca kebesaran dan sempit. CARA KERJA Dua kelompok token, mekanismenya sengaja dibedakan: 1. UKURAN FONT ditulis eksplisit per tingkat, tidak ikut pengali. Kalau dikali rata, teks kecil jatuh di bawah 12px dan tidak kebaca lagi. 2. JARAK & UKURAN KOTAK ikut satu pengali --pub-scale. Ditulis sekali sebagai calc(Npx * var(--pub-scale)) DI LUAR media query; cukup mendefinisikan ulang --pub-scale di dalam query dan semuanya ikut berubah, karena custom property di dalam calc() di-resolve saat dipakai, bukan saat dideklarasi. BATAS BAND: 992.02px - 1599.98px Dibatasi di KEDUA ujung, dan batas bawahnya penting. informasi.css dimuat lewat section 'pre-css', jadi SEBELUM Bootstrap/Skote/custom.css. File ini dimuat paling akhir, jadi menang urutan sumber pada specificity yang sama - di media query mana pun. Kalau band ini dibiarkan terbuka ke bawah, dia juga akan menimpa media query 992/768/480 milik informasi.css dan merusak tampilan HP. Berhenti di 992.02px = di bawah itu informasi.css yang pegang, tidak diganggu sama sekali. 1600px bukan breakpoint bawaan Bootstrap (xxl mentok di 1400px), tapi memang harus segitu supaya kasus 1920 @125% (1536px) ketangkap. Jangan "dibenerin" jadi 1400. Tingkat >= 1600px = tampilan hari ini, apa adanya. Tidak ada yang berubah untuk pengguna 100%. =================================================== */ :root { /* ---- UKURAN FONT - eksplisit per tingkat ---- */ --pub-fs-display: 48px; /* judul section info-* */ --pub-fs-number: 42px; /* angka stat card */ --pub-fs-banner-title: 40px; /* h2 motif banner */ --pub-fs-auth-h1: 40px; /* h1 panel kiri login/register */ --pub-fs-banner-sub: 20px; /* h4 motif banner */ --pub-fs-body: 16px; /* teks isi + label stat card */ --pub-fs-btn: 13px; /* tombol topbar desktop */ --pub-fs-btn-sm: 12px; /* tombol topbar mobile */ --pub-fs-btn-icon: 15px; --pub-fs-btn-icon-sm: 14px; /* ---- JARAK & UKURAN KOTAK - ikut --pub-scale ---- */ --pub-scale: 1; --pub-welcome-py: calc(68px * var(--pub-scale)); --pub-welcome-px: calc(60px * var(--pub-scale)); --pub-section-mb: calc(48px * var(--pub-scale)); --pub-stats-title-mb: calc(60px * var(--pub-scale)); --pub-img-hero-h: calc(420px * var(--pub-scale)); --pub-img-potensi-h: calc(500px * var(--pub-scale)); --pub-card-min-h: calc(240px * var(--pub-scale)); --pub-card-pad: calc(24px * var(--pub-scale)); --pub-grid-gap: calc(20px * var(--pub-scale)); --pub-potensi-pad-t: calc(20px * var(--pub-scale)); --pub-potensi-pad-x: calc(40px * var(--pub-scale)); --pub-potensi-pad-b: calc(40px * var(--pub-scale)); --pub-banner-pad: calc(20px * var(--pub-scale)); --pub-page-pad: calc(16px * var(--pub-scale)); --pub-btn-py: calc(6px * var(--pub-scale)); --pub-btn-px: calc(16px * var(--pub-scale)); --pub-btn-px-lg: calc(20px * var(--pub-scale)); --pub-btn-sm-py: calc(5px * var(--pub-scale)); --pub-btn-sm-px: calc(12px * var(--pub-scale)); --pub-btn-sm-px-lg: calc(14px * var(--pub-scale)); /* Lebar form login TIDAK ikut --pub-scale. Kolom form punya lebar minimum yang nyaman dipakai - sama alasannya dengan lantai 12px untuk font. Dikali 0.8 hasilnya 336px di dalam kolom 768px, dan itu terasa sesak: label, input dan judul mulai berdesakan. Dibiarkan tetap 420px. */ --pub-auth-form-w: 420px; --pub-auth-content-w: calc(520px * var(--pub-scale)); --pub-auth-offset-b: calc(60px * var(--pub-scale)); --pub-auth-offset-l: calc(50px * var(--pub-scale)); /* ---- SHELL ---- */ --pub-sidebar-w: 250px; } /* LAPTOP - 1920@125% (1536px), 1920@150% (1280px), 1366x768. Batas bawah 992.02px WAJIB, lihat catatan di atas. */ @media (min-width: 992.02px) and (max-width: 1599.98px) { :root { --pub-fs-display: 36px; --pub-fs-number: 32px; --pub-fs-banner-title: 30px; --pub-fs-auth-h1: 30px; --pub-fs-banner-sub: 16px; --pub-fs-body: 14px; --pub-fs-btn: 12px; --pub-fs-btn-sm: 11px; --pub-fs-btn-icon: 14px; --pub-fs-btn-icon-sm: 13px; --pub-scale: 0.8; --pub-sidebar-w: 200px; } } /* ====================================== SHELL - LEBAR SIDEBAR Skote memakai 250px mati di app.min.css. Di 1920px itu 13% layar, tapi di 1536px jadi 16,3% - kolom isi terasa kesempit. Diturunkan ke 200px di tingkat laptop. Dijaga @media (min-width: 992.02px) supaya perilaku mobile Skote (.vertical-menu{display:none}, .main-content{margin-left:0!important}) tidak tersentuh. Keadaan collapse aman tanpa !important dari sisi kita: .vertical-collpsed .vertical-menu dan .navbar-brand-box punya !important sendiri, dan .vertical-collpsed .main-content dua kelas - specificity lebih tinggi dari .main-content polos di bawah ini. ====================================== */ @media (min-width: 992.02px) { .vertical-menu { width: var(--pub-sidebar-w); } .main-content { margin-left: var(--pub-sidebar-w); } .navbar-brand-box { width: var(--pub-sidebar-w); } } /* Padding isi halaman ikut pengali. custom.css memasang .page-content{padding:16px} portal-wide; di sini cuma diskalakan untuk halaman yang memuat file ini. */ .page-content { padding: var(--pub-page-pad); } /* ====================================== MOTIF BANNER Dulu 100% inline di v_motif_banner.php sehingga tidak bisa ditimpa CSS sama sekali. PENTING: margin-atas TIDAK ikut --pub-scale. Itu bukan jarak hias, tapi ruang bebas untuk topbar 70px yang position:fixed - menambal .page-content{padding:16px} di custom.css yang menimpa padding-top 94px bawaan Skote. Kalau dikali 0.8 jadi 56px, banner masuk ke bawah topbar. ====================================== */ .pub-banner { margin: var(--topbar-height, 70px) 0 0; padding: var(--pub-banner-pad); } .pub-banner__subtitle { color: var(--green-main, #288052); font-size: var(--pub-fs-banner-sub); font-weight: 600; letter-spacing: 0.1rem; margin: 0; } .pub-banner__title { color: #000000; font-size: var(--pub-fs-banner-title); font-weight: 600; margin: 0; text-wrap: wrap; /* max-width, bukan width: nilai 600px mati bikin judul jebol di layar sempit karena komponen ini tidak punya fallback mobile sama sekali. */ max-width: var(--pub-banner-w, 600px); } /* ====================================== TOMBOL TOPBAR (Beranda Magelang / Login) Ukurannya WAJIB lewat kelas, jangan inline: showAuthState() di public/js/app.public.js memanggil removeAttr('style') pada [data-auth-logged-in], jadi atribut style di pembungkusnya dihapus total saat runtime. ====================================== */ .pub-topbar-btn { font-size: var(--pub-fs-btn); padding: var(--pub-btn-py) var(--pub-btn-px); border-radius: 6px; } .pub-topbar-btn i { font-size: var(--pub-fs-btn-icon); vertical-align: middle; } .pub-topbar-btn--primary { padding: var(--pub-btn-py) var(--pub-btn-px-lg); font-weight: 600; } /* Varian mobile (d-xl-none, tampil di bawah 1200px) */ .pub-topbar-btn--sm { font-size: var(--pub-fs-btn-sm); padding: var(--pub-btn-sm-py) var(--pub-btn-sm-px); } .pub-topbar-btn--sm i { font-size: var(--pub-fs-btn-icon-sm); } .pub-topbar-btn--sm.pub-topbar-btn--primary { padding: var(--pub-btn-sm-py) var(--pub-btn-sm-px-lg); } /* ====================================== AUTH (login / register / forget-password) Token dipakai oleh blok