/* ========================================================================== syarif.com — preloader & transisi antar halaman -------------------------------------------------------------------------- Dua keadaan, satu potong markup (lihat inc/preloader.php): 1. Kunjungan pertama dalam satu sesi → varian "intro": tirai gelap sudah menutup sejak cat pertama, judul naik dari balik topeng, penghitung berjalan sampai 100, lalu tirai terangkat kolom per kolom. 2. Setiap pindah halaman sesudahnya → varian "nav": tirai turun menutup halaman lama, browser berpindah, tirai naik lagi di halaman baru. Tanpa penghitung — yang ditunggu cuma sepersekian detik. Kelas keadaan dipasang di , bukan di elemen preloader, supaya isi halaman ikut bisa merespons: .syarif-preload tirai menutup, halaman baru dimuat .syarif-preload-intro varian intro .syarif-preload-nav varian pindah halaman .syarif-buka tirai sedang terangkat .syarif-pergi tirai sedang turun, halaman mau ditinggalkan Semua yang bergerak di sini hanya transform dan opacity — tidak ada properti yang memicu layout, jadi tetap mulus di HP. Tanpa JavaScript: tidak pernah dapat kelas apa pun, .preloader berhenti di visibility:hidden, dan halaman tampil seperti biasa. ========================================================================== */ .preloader { /* Jumlah kolom tirai. Harus sama dengan yang dirender inc/preloader.php — dipakai untuk membalik urutan jeda saat tirai naik. */ --pre-kolom: 5; --pre-jeda: 0.07s; position: fixed; inset: 0; z-index: 9000; visibility: hidden; pointer-events: none; } html.syarif-preload .preloader, html.syarif-buka .preloader, html.syarif-pergi .preloader { visibility: visible; pointer-events: auto; /* selama tirai menutup, klik tidak tembus ke halaman */ } /* Selama tirai menutup penuh, halaman di baliknya tidak boleh bisa digulir — kalau tidak, orang menggulir layar gelap. */ html.syarif-preload { overflow: hidden; } /* — tirai: kolom-kolom yang bergerak sendiri-sendiri — */ .preloader-tirai { position: absolute; inset: 0; /* Kolom sengaja dibuat lebih lebar dari jatahnya (lihat di bawah); yang menjulur keluar dipotong di sini. */ overflow: hidden; } /* Kolom ditempatkan absolut, bukan dengan flex. Dengan flex, lebar tiap kolom adalah pembagian yang jarang bulat — di layar 1866px dibagi 5 tiap kolom dapat 373,2px — dan tepi yang jatuh di tengah piksel menyisakan garis rambut tembus pandang di antara kolom. Di sini tiap kolom dilebarkan 1px ke kiri dan 1px ke kanan sehingga selalu menimpa tetangganya. Berapa pun lebar layarnya, tidak ada celah — juga tidak saat kolomnya bergerak dengan jeda berbeda. */ .preloader-panel { position: absolute; top: 0; bottom: 0; left: calc(var(--i) * 100% / var(--pre-kolom) - 1px); width: calc(100% / var(--pre-kolom) + 2px); background: var(--color-accent-2-800); transform: translateY(101%); /* 101% menutup celah pembulatan sub-piksel */ /* Keadaan istirahat sengaja tanpa durasi. Kalau di sini ada transisi, tiap kali kelas keadaan dilepas panel akan meluncur balik melintasi layar — tak terlihat karena visibility:hidden, tapi tetap satu detik kerja compositor yang percuma. Durasinya dipasang oleh kelas keadaan di bawah. */ transition: transform 0s; will-change: transform; } /* Butiran halus supaya bidang gelapnya tidak terlihat seperti blok cat. Ditempel di tiap kolom, bukan di wadahnya, supaya ikut pergi bersama tirai. Disurutkan 1px di kiri-kanan supaya persis mengisi jatah kolom: kalau ikut melebar ke bagian yang menimpa tetangga, butirannya bertumpuk dua lapis dan justru menggambar garis di tempat yang tadi mau dihilangkan. */ .preloader-panel::after { content: ""; position: absolute; inset: 0 1px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); opacity: 0.3; mix-blend-mode: soft-light; pointer-events: none; } /* Keadaan tirai. Urutan blok di bawah ini menentukan siapa yang menang, jadi jangan ditukar: .syarif-buka harus terakhir supaya mengalahkan .syarif-preload yang masih menempel saat tirai mulai naik. */ html.syarif-preload .preloader-panel, html.syarif-pergi .preloader-panel { transform: translateY(0); transition: transform var(--dur-tirai) var(--ease-tirai) calc(var(--i) * var(--pre-jeda)); } html.syarif-buka .preloader-panel { transform: translateY(-101%); /* Naiknya dari arah berlawanan dengan turunnya — terasa satu sapuan utuh, bukan dua gerakan yang kebetulan berurutan. */ transition: transform var(--dur-tirai) var(--ease-tirai) calc((var(--pre-kolom) - 1 - var(--i)) * var(--pre-jeda)); } /* Pindah halaman tidak boleh selambat intro: orang sudah tahu mau ke mana. */ html.syarif-preload-nav .preloader-panel, html.syarif-pergi .preloader-panel { transition-duration: var(--dur-tirai-cepat); } /* — isi tirai — */ .preloader-isi { position: relative; height: 100%; display: grid; grid-template-rows: auto 1fr auto auto; gap: clamp(18px, 2.6vw, 30px); padding: clamp(20px, 3.2vw, 46px); color: var(--color-accent-2-100); font-family: var(--font-heading); background: radial-gradient( 120% 80% at 50% 108%, color-mix(in srgb, var(--color-accent) 26%, transparent) 0%, transparent 62% ); opacity: 0; transition: opacity var(--dur) var(--ease); } html.syarif-preload .preloader-isi { opacity: 1; } /* Saat halaman ditinggalkan, isinya baru muncul setelah tirai benar-benar menutup — kalau bersamaan, teksnya terbaca di atas halaman lama. */ html.syarif-pergi .preloader-isi { opacity: 1; transition-delay: calc(var(--dur-tirai-cepat) * 0.55); } html.syarif-buka .preloader-isi { opacity: 0; transition-duration: var(--dur-fast); transition-delay: 0s; } .preloader-atas, .preloader-bawah { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; } .preloader-mark { font-size: clamp(19px, 2.2vw, 24px); font-weight: var(--font-heading-weight); letter-spacing: -0.03em; color: #ffffff; } .preloader-mark span { color: var(--color-accent-300); } .preloader-meta, .preloader-status { font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: color-mix(in srgb, var(--color-accent-2-100) 62%, transparent); } /* — judul: tiap baris naik dari balik topengnya sendiri — */ .preloader-tengah { align-self: center; /* Jangan batasi dengan satuan ch di sini: ch dihitung dari font-size elemen ini (16px), bukan dari font judul yang 92px — hasilnya kotak selebar ~220px, teksnya membungkus tiga baris, lalu terpotong oleh topeng di bawah. Lebar dibiarkan penuh; yang mengatur panjang baris adalah max-width di .preloader-baris, tempat ukuran fontnya memang berlaku. */ max-width: 100%; } .preloader-baris { display: block; overflow: hidden; /* inilah topengnya */ font-size: clamp(34px, 6.4vw, 88px); line-height: 1.06; letter-spacing: -0.04em; color: #ffffff; max-width: 15ch; /* Topeng memotong dua arah, bukan cuma atas-bawah. Tanpa ruang tambahan di kanan, ekor huruf miring Cormorant ("tidak.") kena pangkas. Marginnya menarik kotak kembali supaya perataan kirinya tidak bergeser. */ padding-right: 0.14em; margin-right: -0.14em; } .preloader-baris > span { display: block; /* Animasi, bukan transisi: keyframe berjalan sejak cat pertama tanpa menunggu JavaScript, jadi judulnya tetap muncul kalau app JS gagal. */ animation: syarif-pre-naik var(--dur-slow) var(--ease-tirai) both; animation-delay: calc(0.14s + var(--i) * 0.1s); } .preloader-baris-aksen { font-family: var(--font-accent); font-weight: 600; font-style: italic; letter-spacing: 0; color: var(--color-accent-300); } @keyframes syarif-pre-naik { from { transform: translateY(112%); } to { transform: translateY(0); } } @keyframes syarif-pre-masuk { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } .preloader-atas, .preloader-bawah, .preloader-garis { animation: syarif-pre-masuk var(--dur) var(--ease) both; } .preloader-atas { animation-delay: 0.06s; } .preloader-garis { animation-delay: 0.3s; } .preloader-bawah { animation-delay: 0.36s; } /* — penghitung — */ .preloader-angka { display: flex; align-items: baseline; gap: 2px; font-size: clamp(58px, 11vw, 132px); font-weight: var(--font-heading-weight); line-height: 0.8; letter-spacing: -0.055em; color: #ffffff; /* Angka lebar-tetap: tanpa ini lebarnya berkedut tiap ganti digit. */ font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } .preloader-angka i { font-size: 0.28em; font-style: normal; letter-spacing: 0; color: var(--color-accent-300); } /* — garis kemajuan — */ .preloader-garis { position: relative; height: 1px; background: color-mix(in srgb, var(--color-neutral-100) 16%, transparent); } .preloader-garis i { position: absolute; inset: 0; display: block; background: var(--color-accent); transform: scaleX(var(--pre-maju, 0)); transform-origin: left center; transition: transform var(--dur) var(--ease); } /* — varian "nav": hanya tirai dan tanda kecil — Semua yang bercerita (judul, angka, garis) tidak ikut muncul: pindah halaman bukan momen untuk membaca ulang tagline. */ html.syarif-preload-nav .preloader-tengah, html.syarif-preload-nav .preloader-bawah, html.syarif-preload-nav .preloader-garis, html.syarif-preload-nav .preloader-meta, html.syarif-pergi .preloader-tengah, html.syarif-pergi .preloader-bawah, html.syarif-pergi .preloader-garis, html.syarif-pergi .preloader-meta { display: none; } html.syarif-preload-nav .preloader-isi, html.syarif-pergi .preloader-isi { grid-template-rows: 1fr; place-items: center; } html.syarif-preload-nav .preloader-atas, html.syarif-pergi .preloader-atas { animation-delay: 0s; } /* — isi halaman ikut masuk saat tirai naik — Hanya opacity: transform di sini akan mematahkan .pricebox yang position:fixed di dalam #konten. */ .site-header, #konten, .site-footer { transition: opacity var(--dur-slow) var(--ease); } html.syarif-preload .site-header, html.syarif-preload #konten, html.syarif-preload .site-footer { opacity: 0; } html.syarif-buka .site-header, html.syarif-buka #konten, html.syarif-buka .site-footer { transition-delay: 0.16s; } /* — layar sempit — */ @media (max-width: 640px) { .preloader-meta { display: none; } .preloader-baris { max-width: 11ch; } /* Baris bawah berisi dua hal yang tidak bisa mengecil sendiri: label dan angka. Di 360px keduanya beradu dan salah satu terdorong keluar layar, jadi di sini angkanya diberi batas bawah yang lebih kecil dan labelnya dirapatkan. */ .preloader-angka { font-size: clamp(46px, 16vw, 84px); } .preloader-bawah { gap: 12px; } .preloader-status { font-size: 11px; letter-spacing: 0.12em; } } /* — hormati "kurangi gerak" — tokens.css sudah memangkas semua durasi jadi ~0; yang tersisa cuma jeda antar kolom, yang kalau dibiarkan justru jadi satu-satunya hal yang bergerak. */ @media (prefers-reduced-motion: reduce) { .preloader-panel, .preloader-isi, .preloader-baris > span, .preloader-atas, .preloader-bawah, .preloader-garis, .site-header, #konten, .site-footer { transition-delay: 0s !important; animation-delay: 0s !important; } }