/** * Perbaikan tampilan halaman publik. * * Dimuat SETELAH dist/css/main.css supaya berkas design lama tetap utuh * (tidak diubah-ubah) dan semua penyesuaian terkumpul di satu tempat ini. */ /* ------------------------------------------------------------------ * 1. Foto dress code * Penyebab asli scroll horizontal bukan CSS ini, tapi slick slider * `.box-dresscode` yang belum diinisialisasi (lihat js/legacy.js). * Tanpa slick, 12 foto tampil bertumpuk penuh dan `.box-dresscode img` * (width:100% + margin:0 10px) melebar 10px keluar layar. * Aturan di bawah hanya JARING PENGAMAN bila slick gagal dimuat; * saat slick aktif, inline width dari slick yang menang. * ------------------------------------------------------------------ */ .box-dresscode img { width: calc(100% - 20px); } /* CATATAN: jangan pakai `html, body { overflow-x: hidden }`. Properti itu membuat menjadi scroll container sendiri sehingga window.scrollTo() tidak lagi menggulir halaman. Perbaikan di atas (width gambar dresscode) sudah menghilangkan penyebab overflow-nya. */ /* ------------------------------------------------------------------ * 3. Label pada field yang teksnya selalu tampil * Label melayang hanya naik saat group punya class .focused/.filled. * Untuk , dan , browser * SELALU menampilkan teks (daftar pilihan / "dd/mm/yyyy" / tombol * "Choose File"), jadi labelnya harus selalu naik — kalau tidak, * label akan tertimpa teks bawaan itu. JS (legacy.js) menambahkan * .filled; aturan ini jadi cadangan bila JS gagal (browser modern). * ------------------------------------------------------------------ */ .segment-register .mb-3.floating:has(> select) > label, .segment-register .mb-3.floating:has(> input[type="date"]) > label, .segment-register .mb-3.floating:has(> input[type="file"]) > label { top: 25px; transform: translateY(-100%); } /* ------------------------------------------------------------------ * 4. Daftar pilihan