/* ========================================================================== OSIS Padmanaba - Gaya Utama Dibuat untuk SMAN 3 Yogyakarta. Palet: merah padma, emas, kertas hangat. Struktur file ini mengikuti urutan halaman, dari atas ke bawah: 1. Variabel warna dan dasar 2. Kepala halaman dan navigasi 3. Hero 4. Bagian umum 5. Tentang dan struktur 6. Peta kabinet (layar penuh) 7. Bidang, agenda, visi misi, kontak, footer 8. Animasi dan media query ========================================================================== */ /* ===== 1. Variabel warna dan dasar ===== */ :root{ --ink:#241417; --muted:#77656A; --faint:#A9989C; --paper:#FFFFFF; --tint:#FAF5F3; --line:#EAE0DC; --red:#B4232A; --red-deep:#8E1F24; --gold:#C98A12; --nav-ink:#5C4A4E; --body-ink:#4E3D41; --serif:Georgia,'Times New Roman',serif; --sans:'Segoe UI',system-ui,-apple-system,sans-serif; --ease:cubic-bezier(.19,1,.22,1); } /* Tema gelap halaman utama. Keluarga warnanya sengaja sama dengan tema gelap peta kabinet (hitam hangat, krem, emas), jadi membuka peta dari halaman gelap terasa melanjutkan ruangan yang sama, bukan pindah situs. Dasarnya COKELAT TUA hangat, bukan hitam: yang terlalu gelap membuat halaman terlihat mati. Hampir semua warna halaman sudah lewat variabel, jadi cukup menimpa variabelnya. Atributnya dipasang di oleh js/tema.js dan disimpan di localStorage. */ html[data-tema="gelap"]{ /* Dasarnya MARUN-GELAP hangat, bukan cokelat dan bukan hitam: cokelat membuat halaman terasa kehilangan nyawa (kritik putaran 13), hitam murni membuatnya mati. Merah di dalamnya menjaga situs ini terasa satu darah dengan hero, di tema mana pun. */ --paper:#2A1518; --tint:#35191C; --line:#532D2F; --ink:#F6ECE8; --muted:#C9B3AC; --faint:#A38C88; /* Merah dibenerkan sedikit agar tetap terbaca di atas marun gelap. */ --red:#E0555B; --red-deep:#A3282E; --gold:#E0A63C; --nav-ink:#D8C6BB; --body-ink:#D6C6BA; } /* Hero kini berwarna maroon di kedua tema (blok merek), dan padmanya emas, jadi tidak perlu penyesuaian tema seperti dulu. */ /* Papan nama di kartu struktur memakai tinta sebagai latarnya; warna teksnya mengikuti kertas, jadi di tema gelap pilnya terang bertulisan gelap. */ *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} /* Kontrak CSS Lenis (js/lenis.min.js, putaran 12): selagi Lenis memandu roda mouse, scroll-behavior:smooth milik harus diam supaya tidak ada dua animasi gulir yang berebut. Ponsel tak tersentuh: Lenis bawaannya membiarkan guliran sentuh asli. Aturan resmi dari dokumentasinya. */ html.lenis,html.lenis body{height:auto} .lenis.lenis-smooth{scroll-behavior:auto !important} .lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain} .lenis.lenis-stopped{overflow:hidden} /* Latar halaman diberi butir kertas (putaran 18): tekstur kedua milik situs ini selain lambang emas, jadi permukaan yang kosong sekalipun tidak terasa datar. Butirnya ubin PNG mungil yang digaji lebih dulu (bukan filter SVG runtime: filter itu membebani raster pertama headless Edge dan menggeser waktu transisi sapuan, ketahuan uji 1b/1c uji_r9), hitam hangat di siang dan krem hangat di malam, puncak alfanya 5% agar cuma terasa sebagai "kertas", bukan noda. Kartu, foto, dan hero punya latar sendiri sehingga butir ini hanya hidup di permukaan telanjang. */ body{background-color:var(--paper); background-image:url(../img/butir-terang.png);background-size:180px 180px; color:var(--ink);font-family:var(--sans); font-size:16px;line-height:1.65} html[data-tema="gelap"] body{background-image:url(../img/butir-gelap.png)} .wrap{max-width:1100px;margin:0 auto;padding:0 24px} /* Terlihat hanya saat difokus dengan tombol Tab. Membantu pengguna keyboard melompati menu tanpa harus melewatinya satu per satu. */ .skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--red); color:#fff;padding:10px 18px;border-radius:0 0 8px 0;text-decoration:none;font-size:14px} .skip-link:focus{left:0} /* Cincin fokus keyboard sengaja dihilangkan: cincin abu-abu di sekeliling tombol terlihat seperti cacat gambar, padahal hampir semua elemen interaktif di situs ini sudah punya gaya keadaannya sendiri (mengangkat diri, berubah warna, bordernya menyala). Tautan "Lompat ke konten utama" tetap muncul saat ditab karena gayanya lewat posisi, bukan outline. */ /* ===== 2. Kepala halaman dan navigasi ===== Kepala halaman melayang bebas di atas jendela. Di puncak halaman ia transparan, menyatu dengan hero maroon, dan teksnya berwarna krem terang. Begitu halaman digulir, bilahnya berubah menjadi pulau: membulat penuh, menjauh dari tepi atas, memakai kertas kabur, dan diberi bayangan. Kelas .pulau dipasang dan dicabut js/app.js mengikuti posisi gulir. */ header.site{position:fixed;top:0;left:0;right:0;z-index:95} /* Kepala sengaja berdiri DI ATAS layar sapuan (.sapu-layar z-89): saat pindah halaman, kepala justru yang tetap tampak sementara isi ditukar di balik layar itu. Tetap di bawah .frame peta (100), .skip-link (200), dan modal pengurus (220). */ /* --- Naungan kabur di puncak halaman --- ala inspeksirumah.id: kepala tak pernah bertumpu pada satu warna. Di puncak halaman ia hanya naungan gelap mengkabur yang memudar ke bawah (foto atau isi apa pun di belakangnya tetap terasa), begitu digulir naungan ini diredam dan pulau kaca di bawah yang mengambil alih. Lapisan kuno hidup di ::before supaya mask pudarnya tak ikut memudarkan logo dan menu; bila dipasang langsung di header, isinya ikut hilang. */ header.site::before{content:"";position:absolute;inset:0;z-index:-1; pointer-events:none; background:linear-gradient(180deg,rgba(24,6,8,.5) 0%,rgba(24,6,8,.2) 58%,rgba(24,6,8,0) 100%); backdrop-filter:blur(9px) saturate(1.12); -webkit-backdrop-filter:blur(9px) saturate(1.12); -webkit-mask:linear-gradient(180deg,#000 26%,transparent 100%); mask:linear-gradient(180deg,#000 26%,transparent 100%); transition:opacity .45s ease} header.site.pulau::before{opacity:0} /* Dua wujud kepala, ala transisi pulau: di puncak halaman bilahnya meregang selebar jendela (logo di tepi kiri, menu di tengah, tombol di tepi kanan), lalu begitu digulir semuanya meluncur masuk ke pulau melayang yang menyusut di tengah. Yang dianimasikan sengaja properti yang dihitung ulang tiap frame (lebar maksimal, bantalan, tinggi, jarak antar item), supaya isi bilah benar-benar bergeser mulus mengikuti bingkainya, bukan melompat ke posisi baru. */ .bar{display:flex;align-items:center;gap:16px;height:72px;margin:0 auto; border-radius:999px;border:1px solid transparent;background:transparent; transition:margin-top .5s var(--ease),max-width .55s var(--ease), padding .5s var(--ease),height .4s,gap .45s var(--ease), background .35s,border-color .35s,box-shadow .45s var(--ease), border-radius .5s var(--ease), backdrop-filter .35s ease,-webkit-backdrop-filter .35s ease} header.site .bar{max-width:100%;padding:0 34px} /* Pulau melayang: kaca cair ala iOS, SATU RESEP untuk dua tema. Sengaja tak menyentuh variabel tema: sifat kaca justru itu, netral dan menuruti apa pun yang ada di belakangnya. Tintanya tebal, 52% putih, supaya isi pulau boleh memakai tinta gelap di KEDUA tema: diukur di seluruh halaman isi, kaca tipis 10% tak pernah memberi 4,5:1 untuk tinta mana pun (krem bahkan cuma 1,0-1,4:1 di titik terterangnya), sedangkan resep ini menetap di atas 5:1 untuk tinta gelap. */ header.site.pulau .bar{margin-top:10px;max-width:1100px;height:58px;padding:0 24px; background:linear-gradient(115deg,rgba(255,255,255,.28),rgba(255,255,255,.06) 38%,rgba(255,255,255,0) 60%,rgba(255,255,255,.14)), rgba(255,255,255,.52); border-color:rgba(255,255,255,.38); box-shadow:0 16px 44px rgba(36,20,23,.22), inset 0 1px 0 rgba(255,255,255,.42), inset 0 -1px 0 rgba(255,255,255,.14); backdrop-filter:blur(20px) saturate(1.55); -webkit-backdrop-filter:blur(20px) saturate(1.55)} .mark{display:flex;align-items:center;gap:11px;text-decoration:none;color:#FFF7F0; transition:color .35s} header.site.pulau .mark{color:#241417} /* Logo OSIS tampil apa adanya tanpa bingkai kotak. Pemisahnya dari latar berupa bayangan lembut yang MENGIKUTI bentuk lotusnya: drop-shadow digambar dari siluet gambar, bukan dari kotaknya. */ .mark .logo{width:38px;height:38px;object-fit:contain;flex:none; filter:drop-shadow(0 2px 7px rgba(20,10,12,.45)); transition:width .5s var(--ease),height .5s var(--ease)} header.site.pulau .mark .logo{width:32px;height:32px} .mark svg{width:38px;height:24px} .mark .wm b{display:block;font-size:16px;letter-spacing:.4px;line-height:1.15; transition:font-size .5s var(--ease)} header.site.pulau .mark .wm b{font-size:15px} .mark .wm span{font-size:12px;color:rgba(255,240,232,.72);letter-spacing:.6px; transition:color .35s,font-size .5s var(--ease)} header.site.pulau .mark .wm span{font-size:11px} header.site.pulau .mark .wm span{color:rgba(36,20,23,.9)} /* Baris "SMAN 3 Yogyakarta" tetap satu tangga lebih redup dari papan namanya, tapi sekali ini hierarkinya lewat ukuran saja (11px vs 15px): opacity di bawah 0,9 menggerus kontrasnya melewati batas di titik latar tergelap, jadi warnanya dibuat nyaris sama dengan tinta utama. */ nav.main{margin-left:auto;display:flex;gap:26px; transition:gap .5s var(--ease),opacity .3s ease} header.site.pulau nav.main{gap:22px} nav.main a{position:relative;color:rgba(255,241,233,.85);text-decoration:none;font-size:15px; padding:4px 0;border-bottom:2px solid transparent; transition:color .3s,border-color .15s,font-size .5s var(--ease)} /* Garis bawah menyapu dari kiri (mikrointeraksi): border transparan tetap dipasang supaya tingginya tidak bergeser satu piksel pun saat garis muncul; garisnya digambar ::after mengikuti warna teks (currentColor), jadi dua wujud kepala (transparan dan pulau) otomatis ikut. */ nav.main a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px; background:currentColor;transform:scaleX(0);transform-origin:left; transition:transform .4s var(--ease)} nav.main a:hover::after,nav.main a:focus-visible::after{transform:scaleX(1)} header.site.pulau nav.main a{font-size:14px} nav.main a:hover{color:#F0C36B;border-color:transparent} header.site.pulau nav.main a{color:#241417} /* Hover di dalam pulau memakai merah tua, bukan var(--red): di tema gelap var(--red) diterangkan jadi #E0555B, yang lenyap di atas kaca putih. Garis bawahnya ikut muncul, jadi perubahan keadaannya tak bergantung pada warna saja. */ header.site.pulau nav.main a:hover{color:#6E1418;border-color:transparent} .burger{display:none;margin-left:auto;background:none;border:1px solid rgba(255,244,232,.4); border-radius:8px;padding:11px 12px;cursor:pointer;color:#FFF7F0; transition:color .3s,border-color .3s,opacity .3s ease} .burger span{display:block;width:18px;height:14px;position:relative} .burger i{position:absolute;left:0;right:0;height:2px;border-radius:2px; background:currentColor;top:0; transition:transform .45s var(--ease),opacity .3s,top .45s var(--ease)} .burger i:nth-child(2){top:6px} .burger i:nth-child(3){top:12px} /* Saat menunya terbuka, tiga garisnya menyusun diri jadi silang: garis pertama dan ketiga berputar ke titik tengah, garis tengahnya mengecil dan lenyap. Warna emasnya (aturan di blok layar kecil) menandai bahwa menunya sedang terbuka. */ .burger[aria-expanded="true"] i:nth-child(1){top:6px;transform:rotate(45deg)} .burger[aria-expanded="true"] i:nth-child(2){opacity:0;transform:scaleX(.3)} .burger[aria-expanded="true"] i:nth-child(3){top:6px;transform:rotate(-45deg)} header.site.pulau .burger{color:#241417;border-color:rgba(36,20,23,.30)} /* Tombol tema halaman utama, sepupu dari .fbtn.tema di peta: satu tombol, ikonnya ditukar lewat data-tema di . Di tema terang ikonnya bulan (ajakan mencoba tema gelap), di tema gelap matahari. */ .tbtn{display:flex;align-items:center;justify-content:center;flex:none; width:40px;height:40px;background:none;border:1px solid rgba(255,244,232,.4); border-radius:9px;cursor:pointer;color:#FFF7F0;font-size:15px; transition:border-color .3s,color .3s,width .5s var(--ease),height .5s var(--ease)} header.site.pulau .tbtn{width:36px;height:36px} .tbtn:hover{border-color:#F0C36B;color:#F0C36B} header.site.pulau .tbtn{border-color:rgba(36,20,23,.30);color:#241417} header.site.pulau .tbtn:hover{border-color:#6E1418;color:#6E1418} /* Ikonnya SVG tulenan, bukan lagi glyph \263E/\2600 dari font: bulan Segoe UI Symbol ternyata digambar jadi sabit rambut satu-dua piksel yang anti-alias-nya jadi sup pada 15px (terukur cuma 3,5:1 di dalam pulau). SVG ikut currentColor, tajam di ukuran mana pun, dan pilihan ikonnya tetap sama: di tema terang bulan (ajakan mencoba tema gelap), di tema gelap matahari. */ .tbtn svg{width:16px;height:16px;display:block;fill:none;stroke:currentColor; stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .tbtn .ikon-matahari{display:none} html[data-tema="gelap"] .tbtn .ikon-matahari{display:block} html[data-tema="gelap"] .tbtn .ikon-bulan{display:none} /* Ikon yang baru muncul memutar masuk (mikrointeraksi penukaran tema): animasinya jalan tiap kali display berpindah dari none. */ @keyframes pintar{from{transform:rotate(-90deg) scale(.55);opacity:0} to{transform:none;opacity:1}} html[data-tema="gelap"] .tbtn .ikon-matahari{animation:pintar .5s var(--ease)} html:not([data-tema="gelap"]) .tbtn .ikon-bulan{animation:pintar .5s var(--ease)} @media (prefers-reduced-motion: reduce){ html[data-tema="gelap"] .tbtn .ikon-matahari, html:not([data-tema="gelap"]) .tbtn .ikon-bulan{animation:none}} /* --- Wujud kepala: satu saja, di mana pun halamannya --- Dulu halaman isi memakai bilah kertas (kelas .di-isi dari Perute) supaya tombolnya jelas di atas foto Tentang; keputusan akhir justru sebaliknya: kepala tetap transparan krem seperti di halaman depan, karena pita gelap atas foto Tentang sudah cukup melindungi kontrasnya, dan wujud yang seragam membuat perpindahan halaman tak perlu pergantian warna kepala. Satu-satunya wujud lain tetap pulau melayang saat digulir (lihat atas), dan Perute melepas pulau itu selama layar sapuan berjalan. */ /* Jeda gulir untuk lompatan #anchor: dengan kepala melayang, judul bagian harus turun sedikit agar tidak tersembunyi di balik pulau. */ section[id],#beranda{scroll-margin-top:88px} /* --- 2b. Penunjuk gulir, gantian scrollbar bawaan --- Scrollbar bawaan disembunyikan karena kehadirannya mengubah lebar layar: halaman depan pas satu layar (tak bergulir, tanpa scrollbar), halaman isi panjang (dengan scrollbar), dan pergantian itu terjadi PERSIS di tengah layar transisi, jadi semua posisi tampak bergeser menyesuaikan diri. Gantinya: penunjuk emas setipis pensil di tepi kanan yang hanya tampak selagi menggulir, memudar ketika berhenti, dan panjangnya mencerminkan seberapa panjang dokumen. Dan ia bukan pajangan: bisa disentuh. Menyeret ibu jarinya menggulirkan halaman, mengklik jalurnya melompat ke tempat itu, dan mendekat kepadanya menebalkannya sedikit sebagai ajakan (perilakunya di js/app.js). Guliran roda dan sentuhan tak terpengaruh. */ html{scrollbar-width:none} /* Firefox */ html::-webkit-scrollbar,body::-webkit-scrollbar{display:none;width:0;height:0} .gulir{position:fixed;top:0;right:0;bottom:0;width:14px;z-index:96; opacity:0;transition:opacity .45s ease;touch-action:none} /* Z-96: di atas kepala halaman (95). Tanpa ini 72px teratas jalurnya mati, tertutup kotak kepala yang melintang selebar jendela. Sisi kanan kepala memang kosong (hanya bantal 34px), jadi tidak ada tombol yang tertutup. Selagi layar sapuan berjalan ia mengalah penuh. */ body.sapu-jalan .gulir{opacity:0 !important} /* Tampak selagi menggulir, selagi diarahkan, dan selama ibu jarinya dipegang (.gulir-ditahan), berapa lamapun tangan diam. */ body.sedang-gulir .gulir,body.gulir-ditahan .gulir,.gulir:hover{opacity:1} .gulir i{position:absolute;right:3px;top:4px;width:4px;border-radius:999px; background:linear-gradient(180deg,#F5D78A,#C98B2E); box-shadow:0 0 10px rgba(240,195,107,.4);cursor:grab; transition:width .25s ease,right .25s ease} .gulir:hover i,body.gulir-ditahan .gulir i{width:6px;right:2px} body.gulir-ditahan .gulir i{cursor:grabbing} body.gulir-ditahan{user-select:none;-webkit-user-select:none} /* Perangkat sentuh punya penunjuk gulirnya sendiri; milik ini cuma untuk penunjuk tetapis. */ @media (hover:none){.gulir{display:none}} /* ===== 3. Hero ===== Layar pembuka penuh: tingginya sekali layar, isi di kiri, dan ruang kanan sengaja dikosongkan sebagai tempat foto pengurus yang akan datang; sementara itu pendaran emas dan bara menempati zonanya. Latar berlapis: gradasi maroon, pola titik, pendaran emas, vinyet, plus bara emas yang melayang pelan (canvas .bara, digambar js/app.js). Warnanya sengaja sama di dua tema: inilah blok merek halaman, yang terang pun tetap maroon. */ /* Lapisan latar hero dipisah ke variabel tingkat akar supaya gampang dipakai ulang di luar hero bila kelak perlu (dulu tirai sapu antarhalaman memakainya; kini layar sapuan punya gradasi sendiri yang lebih gelap). Posisi pendarannya memakai fallback var(--glow-x,76%), jadi dipakai di luar hero pun tetap sah. Foto stok sempat dicoba sebagai lapisan dasar (gradasinya dibuat tembus) lalu DIBUANG: di halaman resmi, foto orang asing terasa janggal, dan gradasinya kehilangan kedalaman maroonnya. Butir titiknya sempat dipertegas ke .14/2px supaya latarnya tidak terasa rata, lalu DIBUANG lagi: pada jarak 30px ia terbaca sebagai kertas bergaris, bukan sebagai permukaan, dan kisi rapi seperti itu bersaing dengan kelopak lotus yang justru bergerak bebas di atasnya. Yang menghidupkan latar ini kelopaknya, bukan butirnya. */ :root{ --lapisan-hero: radial-gradient(950px 640px at var(--glow-x,76%) var(--glow-y,44%),rgba(224,166,60,.30),transparent 63%), radial-gradient(900px 520px at 8% 112%,rgba(46,7,9,.55),transparent 58%), radial-gradient(130% 110% at 62% 36%,transparent 55%,rgba(26,3,5,.5) 100%), linear-gradient(158deg,#8E1F24 0%,#B4232A 46%,#6E1418 100%); } .hero{position:relative;overflow:hidden;color:#F9EFE9; --glow-x:76%; --glow-y:44%; min-height:100vh;min-height:100svh; display:flex;align-items:center; background:var(--lapisan-hero); background-size:auto,auto,auto,auto} /* Saat digulir, latarnya terasa tertambat (ala rujukan yang disukai pengunjung). Hanya di layar besar; iOS mengabaikan attachment:fixed, dan membiarkannya begitu lebih baik daripada gambarnya melompat-lompat. */ @media(min-width:821px){.hero{background-attachment:fixed}} /* Kanvas bara: partikel emas halus di atas maroon, memenuhi satu layar. */ .hero .bara{position:absolute;inset:0;width:100%;height:100%;pointer-events:none} /* Motif garis lambang, ditirukan dari kartu pratinjau beranda dan layar sapu: ruang kosong hero tidak pernah benar-benar kosong, ia berisi tekstur bermerek yang nyaris tak tampak (7%). Lapisan ::after sengaja TANPA transform apa pun: identitas transform pun mematikan background-attachment:fixed milik .hero di layar besar. */ .hero::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background:url(../img/pola-tirai.png) repeat;background-size:360px 360px; opacity:.07} /* --- 3b. Dua halaman dan layar sapuannya --- Berlaku hanya bila js/app.js memasang kelas .zegerak di : pengunjung yang mengizinkan animasi. Tanpa itu kedua .halaman tampil menumpuk sebagai satu dokumen yang mengalir biasa (perilaku lama), dan .sapu-layar tidak pernah terlihat. Bila aktif, hanya satu .halaman yang tampak pada satu waktu. Berpindah halaman digerakkan IIFE "Perute halaman" di js/app.js dengan satu layar transisi bermerek: layar maroon bermotif garis kedua logo dengan nama OSIS di tengahnya memudar menutupi isi, isi ditukar di baliknya selagi layar berdiam sebentar (rasa loading premium), kilau emas menyapu nama, lalu layar memudar lagi membuka halaman yang dituju. Tidak ada tirai yang menggeser; yang ada hanyalah kemunculan dan kemudaran layar ini. Hash tetap menjadi alamat (#beranda, #tentang, #agenda, dst.), jadi tombol mundur browser dan tautan langsung tetap bekerja tanpa memuat ulang. */ html.zegerak .halaman{display:none} html.zegerak .halaman.aktif{display:block} /* Layar transisi: tetap di tempat (tanpa transform) supaya motifenya benar- benar still; yang berubah hanya kemunculan dan kemudarannya. Z-89: di bawah kepala halaman (95), di atas isi. */ .sapu-layar{position:fixed;inset:0;z-index:89;pointer-events:none; visibility:hidden;opacity:0; transition:opacity .55s ease,visibility 0s linear .55s; background:linear-gradient(160deg,#7C181D 0%,#8E1F24 46%,#5C0F13 100%)} .sapu-layar::before{content:"";position:absolute;inset:0; background:url(../img/pola-tirai.png) repeat;background-size:360px 360px; opacity:.5} .sapu-layar.tampak{visibility:visible;opacity:1; transition:opacity .38s ease,visibility 0s} /* Nama di tengah layar. Jeda hurufnya melebar-lalu-mampu saat layar tampak, dan warnanya bukan warna pas: ia gradasi emas yang diklip ke huruf, dan posisi gradasinya dianimasikan sehingga sebilah kilau terang menyapu namanya dari kiri ke kanan selagi layar berdiam. */ .sapu-tengah{position:absolute;left:24px;right:24px;top:50%; transform:translateY(-50%);text-align:center;color:#F0C36B} /* Garis emas pembuka: pengganti tulisan "Organisasi Siswa Intra Sekolah" yang dibuang karena mengajari orang membaca saat seharusnya menikmati. Ia terentang pelan dari tengah begitu layar tampak, pembuka yang diam. */ .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); transform:scaleX(0); transition:transform .9s var(--ease) .1s} .sapu-layar.tampak .garis-sapu{transform:scaleX(1)} .sapu-tengah .cat{display:block;font-size:11px;font-weight:600; letter-spacing:5px;text-transform:uppercase;color:rgba(240,195,107,.72); opacity:0;transition:opacity .5s ease .15s} .sapu-tengah b{display:inline-block;font-family:var(--serif);font-weight:600; font-size:clamp(30px,4.6vw,54px);line-height:1.25;margin:10px 0 12px; letter-spacing:.34em;opacity:0; transition:letter-spacing .7s var(--ease),opacity .5s ease} @supports ((-webkit-background-clip:text) or (background-clip:text)){ .sapu-tengah b{ /* Tiga lapis latar, semuanya diklip ke huruf: di atas bilah kilau yang disapu, di bawah gradasi emas logam tegak (gelap di bawah, nyala di atas, dengan sebilah bayangan memantul di tengah batang huruf). Bilah kilaunya MIRING 135 derajat dan SENYAP: pitanya hanya 6% lebar garis gradasi, jadi yang melintas benar-benar bilah cahaya tipis, bukan selimut terang. Dua hal itu yang membuat sapuannya menyerong seperti rujukan: pita lebar pada sudut miring tetap terbaca sebagai selimut, dan sudut dangkal (105 derajat, versi lama) membuat bilahnya nyaris tegak sehingga seluruh nama menyala serentak. Karena bilahnya menyerong, tiap huruf tersapu lebih lama, jadi durasinya boleh panjang dan terasa satu tarikan. Diuji di work/preview/kilau-sudut2.html sebelum dipindahkan ke sini. */ 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; /* Bayangan huruf tetap tergambar meski isinya latarnya: satu garis nyala di tepi atas dan satu daleman lembut, memberi ketebalan. */ 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)} } .sapu-layar.tampak .sapu-tengah .cat{opacity:1} /* Kilaunya LINGARAN tanpa henti, bukan satu sapuan yang selesai: persis sama dengan layar muat di halaman detail (css/tirai.css). Dulu di sini sapuan sekali jalan lalu berhenti, dan di halaman detail kilaunya mati begitu layar membuka; hasilnya kilau "putus" di tengah perjalanan berpindah halaman. Karena kedua layar memakai lingaran yang sama, kilau terasa menyambung dari halaman utama ke halaman detail dan pulang kembali: selama ada layar yang tampak, kilaunya pasti sedang menyapu. */ .sapu-layar.tampak .sapu-tengah b{letter-spacing:.14em;opacity:1; animation:kilau-emas 2.6s cubic-bezier(.45,.05,.55,.95) .3s infinite} /* Sapuan kilau: dari tepi kiri nama ke tepi kanannya (posisi latar 100% menaruh bilah terang di kiri huruf, 0% di kanannya). Lapisan gradasi logamnya tidak ikut digerakkan: posisinya disangkal di tiap keyframe. Karena bilahnya kini miring dan jauh lebih tinggi daripada teks, tiap huruf tersapu lebih lama, jadi durasinya dinaikkan supaya sapuannya tetap terasa satu tarikan, bukan berhenti di tengah. */ @keyframes kilau-emas{ from{background-position:100% 0,0 0} to{background-position:0% 0,0 0}} /* Kepulangan dari halaman detail (agenda/bidang): kelas sapu-awal dipasang skrip inline di hanya bila js/tirai.js di halaman sebelumnya mencatat tanda di sessionStorage. Layarnya menunggu dalam keadaan tertutup sejak cat pertama (transisinya dimatikan supaya tak memudar-mudar di awal), lalu Perute melepas kelasnya selagi layar memudar membuka halaman. Wujud dalamnya dipaksa ke keadaan finalnya tanpa animasi kemunculan: layar muat memang sudah ada di sana. */ html.sapu-awal .sapu-layar{visibility:visible;opacity:1;transition:none} /* Sama dengan tirai-dasar di css/tirai.css: selagi layar kepulangan menutup, kanvas dokumen diwarnai dasar tirai supaya kadar prapulih (bfcache) yang keburu dilukis browser tak pernah memperlihatkan putih kosong di belakang tirai. Kelasnya hilang bersamaan dengan pembukaan layar, di bawah tirai yang masih pekat. */ html.sapu-awal{background:#7C181D} html.sapu-awal .sapu-layar .garis-sapu{transform:scaleX(1)} html.sapu-awal .sapu-layar .cat{opacity:1} html.sapu-awal .sapu-layar b{opacity:1;letter-spacing:.14em; animation:kilau-emas 2.6s cubic-bezier(.45,.05,.55,.95) .3s infinite} /* Menu dan burger halaman utama tidak ada di kepala halaman detail, jadi keduanya menyingkir dari panggung SELAGI layar menutup dan baru kembali setelah layar membuka: yang tertukar di tengah perjalanan jadi dua bilah yang isinya persis sama (logo + tombol tema), tak ada elemen yang bintik hilang saat dokumen ditukar. Pulau juga dilabuhkan oleh js/app.js selagi sapu-jalan, jadi wujudnya saat menutup = puncak transparan = wajah yang ditunggu kepala halaman detail di seberang. */ body.sapu-jalan nav.main,body.sapu-jalan .burger{opacity:0} html.sapu-awal nav.main,html.sapu-awal .burger{opacity:0;transition:none} /* --- Pembuka terkunci (sapu-buka) --- Saat layar melepas tampak/sapu-awalnya, Perute memasang sapu-buka lebih dulu. Dulu pelepasan memulangkan isi layar ke keadaan dasarnya: jarak huruf nama menyusut dari .14em ke .34em SELAGI layarnya memudar, dan di layar sempit keadaan akhir itu melipat nama jadi dua baris, terbaca kedipan sesaat di ujung layar muat. Kini isi layar BEKU di wujud tampaknya (nama tetap .14em dan kilaunya terus berputar) dan hanya lapirannya yang memudar, persis cara tirai halaman detail membuka diri. Kelasnya dilepas lagi setelah pemudaran tuntas; saat itu layarnya sudah tak terlihat, jadi pemulangannya ke keadaan dasar tak berpandang. */ .sapu-layar.sapu-buka{visibility:visible;opacity:0; transition:opacity .55s ease,visibility 0s linear .55s} .sapu-layar.sapu-buka .garis-sapu{transform:scaleX(1)} .sapu-layar.sapu-buka .sapu-tengah .cat{opacity:1} .sapu-layar.sapu-buka .sapu-tengah b{letter-spacing:.14em;opacity:1; animation:kilau-emas 2.6s cubic-bezier(.45,.05,.55,.95) .3s infinite} /* .hero-in adalah .wrap yang sama: margin auto milik .wrap tetap dipakai supaya kolom isinya segaris dengan kepala halaman, dan padding shorthand jangan menimpa padding horizontal .wrap (dua-duanya specificity sama, urutan berkas menang). Cukup batas lebar teksnya; sisanya kanan untuk zona foto. */ .hero-in{position:relative;z-index:1;padding-top:130px;padding-bottom:150px; /* Lebar penuh kolom .wrap: tanpa ini, sebagai anak flex ia mengecil mengikuti isinya, dan tepi kirinya meleset dari kepala halaman. */ width:100%} h1{font-family:var(--serif);font-size:clamp(38px,5vw,56px);line-height:1.08; letter-spacing:-.5px;font-weight:700} h1 em{font-style:normal;color:var(--red)} .lead{margin:20px 0 30px;font-size:18px;color:var(--muted);max-width:540px} /* Teks hero di atas maroon: krem hangat dan emas, bukan putih dingin. Nadanya kini tiga tingkat: sapaan kecil, nama organisasi besar beremas logam, lalu kalimat penyerta. Sapaan memakai ukuran dan jarak huruf yang sama dengan catatan di layar transisi, jadi halaman depan terasa lanjutan dari layar yang baru saja dilihat pengunjung. */ .hero .sapa{margin:0 0 16px;font-size:12px;font-weight:600;letter-spacing:3.5px; text-transform:uppercase;color:rgba(250,225,160,.95)} .hero h1{color:#F3D67C;font-size:clamp(40px,5.6vw,62px);line-height:1.04; letter-spacing:.004em} /* Emas logam judul: gradasi TERANG saja, tanpa pita pantul gelap yang dipakai nama di layar transisi. Di sana latarnya maroon tua; di sini maroon terang, jadi pita gelap #7B4E0A itu jatuh ke kontras sekitar 1,1:1 dan separuh batang huruf akan menyatu dengan latar. Tiga berhenti terang berturut-turut memberi kesan logam tanpa mengorbankan keterbacaan. Ujung bawah gradasinya sengaja tidak lebih gelap dari #F3CC77: diukur langsung pada tangkapan dengan judul disembunyikan, #E0A63C cuma 2,9:1 terhadap pendar emas di belakangnya, sedangkan teks sebesar ini butuh 3:1. Kilau bergeraknya juga tidak dipakai: panggungnya sudah punya di layar transisi, dan judul ini beranimasi ulang setiap kali pengunjung kembali ke beranda. */ @supports ((-webkit-background-clip:text) or (background-clip:text)){ .hero h1{ background-image:linear-gradient(180deg,#FFFAE6 0%,#FDEBB4 32%,#F7D98D 68%,#F3CC77 100%); background-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,.22),0 6px 20px rgba(46,18,3,.42)} } /* Kalimat penyerta sengaja dibatasi 520px: pada 560px kalimatnya pecah meninggalkan "SMAN 3 Yogyakarta" sendirian di baris kedua, dan pada 520px pecahnya jatuh setelah "kegiatan" sehingga kedua baris seimbang. */ .hero .lead{color:rgba(255,240,232,.85);font-size:19px;margin:22px 0 0;max-width:520px} .hero .cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:38px} .btn{display:inline-block;padding:12px 26px;border:0;border-radius:8px;text-decoration:none; font-weight:600;font-size:15px;margin-right:10px; transition:background .25s,color .25s,border-color .25s,transform .45s var(--ease),box-shadow .45s var(--ease)} /* Border:0 di atas penting: tombol popup ini elemen