/* ========================================================================== tirai.css - layar transisi bermerek untuk halaman terpisah Kembaran wujud dari .sapu-layar di css/style.css milik index.html. Di situs utama ia layar antarhalaman yang dipasang lewat transisi; di sini ia layar muat yang keadaan tertutupnya adalah keadaan awal: markupnya ditulis di awal , dan kelas tirai-ada di (dipasang skrip inline di ) yang memunculkannya. Tanpa JavaScript kelas itu tak pernah terpasang, jadi layarnya tak pernah menutupi apa pun. Jaga selaras dengan bagian 3b di style.css bila mengubah wujudnya. ========================================================================== */ .sapu-layar{position:fixed;inset:0;z-index:89;pointer-events:none; visibility:hidden;opacity:0} .tirai-ada .sapu-layar{visibility:visible;opacity:1;pointer-events:auto; transition:opacity .38s ease; background:linear-gradient(160deg,#7C181D 0%,#8E1F24 46%,#5C0F13 100%)} .tirai-ada .sapu-layar::before{content:"";position:absolute;inset:0; background:url(../img/pola-tirai.png) repeat;background-size:360px 360px; opacity:.5} /* Kanvas dokumen memakai warna dasar tirai SELAMA tudungan pertama (kelas tirai-dasar, dipasang skrip inline di , dilepas buka()): bila browser sempat melukis satu kadarpun sebelum lapisan tirainya siap, yang kentara warna tirai, bukan putih kosong. Penutupan untuk berpindah sengaja TIDAK memasangnya lagi: di balik tirai yang sedang merekah menutup, latar halaman tak boleh menyentak ke marun. */ html.tirai-dasar{background:#7C181D} .sapu-tengah{position:absolute;left:24px;right:24px;top:50%; transform:translateY(-50%);text-align:center;color:#F0C36B} /* Keadaan tertutup langsung dalam wujud finalnya (garis terentang, nama tampak): layar muat tak perlu animasi kemunculan, ia sudah ada di sana sejak cat pertama. */ .tirai-ada .sapu-tengah .garis-sapu{display:block;width:170px;height:1px; margin:0 auto 4px; background:linear-gradient(90deg,rgba(240,195,107,0),rgba(240,195,107,.9) 30%,rgba(240,195,107,.9) 70%,rgba(240,195,107,0)); box-shadow:0 0 12px rgba(240,195,107,.35)} .tirai-ada .sapu-tengah .cat{display:block;font-size:11px;font-weight:600; letter-spacing:5px;text-transform:uppercase;color:rgba(240,195,107,.72)} .tirai-ada .sapu-tengah b{display:inline-block;font-family:var(--serif,Georgia,serif); font-weight:600;font-size:clamp(30px,4.6vw,54px);line-height:1.25; margin:10px 0 12px;letter-spacing:.14em} @supports ((-webkit-background-clip:text) or (background-clip:text)){ .tirai-ada .sapu-tengah b{ /* Sama dengan layar sapu di style.css: gradasi emas logam diklip ke huruf, dengan sebilah kilau miring 135 derajat. */ background-image: linear-gradient(135deg,rgba(255,255,255,0) 47%,rgba(255,250,228,.98) 50%,rgba(255,255,255,0) 53%), linear-gradient(180deg,#FFF7D6 0%,#FFE9A6 13%,#F2C14E 30%,#C8912B 45%,#93600F 57%,#7B4E0A 64%,#C8962F 77%,#F3D67C 90%,#FFF3C9 100%); background-size:220% 100%,100% 100%; background-position:100% 0,0 0; background-repeat:no-repeat,no-repeat; -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent; text-shadow:0 1px 0 rgba(255,244,200,.28),0 4px 14px rgba(46,18,3,.55), 0 0 30px rgba(240,195,107,.22); /* Selagi halaman dimuat, kilau menyapu berulang: tanda hidup bahwa ada yang sedang disiapkan. Dua ujung lintasannya sama-sama di luar huruf, jadi putaran ulangnya tak terlihat melompat. */ animation:kilau-muat 2.6s cubic-bezier(.45,.05,.55,.95) .3s infinite} } @keyframes kilau-muat{ from{background-position:100% 0,0 0} to{background-position:0% 0,0 0}} /* Membuka: memudar 0,55 dtk membuka isi halaman. Kilaunya SENGAJA tidak dimatikan selagi memudar: dulu animasinya dihentikan tepat saat layar membuka, dan kilau yang tiba-tiba beku itu terbaca sebagai kedipan. Ia ikut memudar bersama layarnya, jadi perjalanan kilau terasa lancar dari layar ini ke layar berikutnya (lingarannya sama persis dengan layar transisi di css/style.css). Elemenya sengaja tidak dibuang dari DOM supaya bisa dipakai lagi menutup saat tautan internal ditekan (lihat js/tirai.js). */ .tirai-ada .sapu-layar.tirai-buka{opacity:0;pointer-events:none; transition:opacity .55s ease}