/* ========================================================================== detail.css - Gaya halaman detail (kegiatan di agenda/, bidang di bidang/) Halaman-halaman ini berdiri sendiri, tanpa Perute dan kepala pulau milik index.html: tujuannya memang pratinjau WhatsApp dulu, halaman kedua. Keluarga warna dan hurufnya disamakan dengan situs utama dan temanya mengikuti js/tema.js lewat atribut data-tema di , jadi tautan yang dibagikan terasa melanjutkan situs yang sama, bukan pindah tempat. ========================================================================== */ :root{ --ink:#241417; --muted:#77656A; --faint:#A9989C; --paper:#FFFFFF; --tint:#FAF5F3; --line:#EAE0DC; --red:#B4232A; --red-deep:#8E1F24; --gold:#C98A12; --gold-terang:#F0C36B; --serif:Georgia,'Times New Roman',serif; --sans:'Segoe UI',system-ui,-apple-system,sans-serif; } html[data-tema="gelap"]{ --paper:#251916; --tint:#2E201C; --line:#47332E; --ink:#F6ECE8; --muted:#C0AAA3; --faint:#9E8880; --red:#E0555B; --red-deep:#A3282E; --gold:#E0A63C; } *{margin:0;padding:0;box-sizing:border-box} body{background:var(--paper);color:var(--ink);font-family:var(--sans); font-size:16px;line-height:1.65} .wrap{max-width:860px;margin:0 auto;padding:0 24px} img{max-width:100%} /* Scrollbar bawaan disembunyikan, sama seperti halaman utama (blok 2b di css/style.css): kehadirannya mengubah lebar layar di tengah perpindahan halaman, semua posisi ikut bergeser. Gantinya batang emas dari js/gulir.js + .gulir di bawah, wujudnya persis punya halaman utama. */ 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} /* Selagi layar muat menutupi, batangnya mengalah penuh (kelasnya diatur js/tirai.js). */ html.tirai-tutup .gulir{opacity:0 !important} 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} @media (hover:none){.gulir{display:none}} /* --- Kepala halaman: kembaran kepala utama, dan ia tak pernah menghilang --- Dulu kepala ini di bawah layar muat: begitu berpindah halaman, bilahnya lenyap bintik lalu muncul bintik lagi saat tirainya membuka. Kini posisi, tinggi, dan isinya persis keadaan puncak kepala halaman utama (bilah 72px, logo 38px, bantal 34px), dan ia berdiri DI ATAS layar muat (z-95, sama dengan index). Selagi tertutup ia memakai wajah malamnya: krem di atas naungan gelap kabur, resep yang sama dengan kepala utama di puncak. Begitu tirainya membuka, ia melebur ke tinta halaman. Dua wajah itu berpindah mulus lewat transisi warna; kelas html tirai-tutup dipasang skrip inline sebelum cat pertama. */ .kepala{position:fixed;top:0;left:0;right:0;z-index:95} .kepala::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%); opacity:0;transition:opacity .45s ease} html.tirai-tutup .kepala::before{opacity:1} /* Bingkai transparan 1px ikut meniru .bar milik kepala utama: tanpa ini isi kembaran ini meleset satu piksel dari aslinya saat dipertukarkan. */ .kepala-isi{display:flex;align-items:center;gap:16px;height:72px;padding:0 34px; border:1px solid transparent;border-radius:999px} .identitas{display:flex;align-items:center;gap:11px;text-decoration:none; color:var(--ink);transition:color .35s} html.tirai-tutup .identitas{color:#FFF7F0} .identitas img{width:38px;height:38px;object-fit:contain;flex:none; filter:drop-shadow(0 2px 7px rgba(20,10,12,.45))} .identitas .wm b{display:block;font-size:16px;letter-spacing:.4px;line-height:1.15} .identitas .wm > span{font-size:12px;color:var(--muted); letter-spacing:.6px;transition:color .35s} /* Anak panah identitas sengaja INLINE seperti punya kepala utama: kalau di-blok-kan, kotak barisnya bertambah 4px dan jarak "OSIS Padmanaba" ke "SMAN 3 Yogyakarta" melebar sebelebihnya. */ html.tirai-tutup .identitas .wm > span{color:rgba(255,240,232,.72)} .kepala-kanan{margin-left:auto;display:flex;align-items:center;gap:10px} .tbtn{display:flex;align-items:center;justify-content:center;flex:none; width:40px;height:40px;background:none;border:1px solid var(--line); border-radius:9px;cursor:pointer;color:var(--ink); transition:border-color .3s,color .3s} html.tirai-tutup .tbtn{border-color:rgba(255,244,232,.4);color:#FFF7F0} .tbtn:hover{border-color:var(--gold);color:var(--gold)} html.tirai-tutup .tbtn:hover{border-color:#F0C36B;color:#F0C36B} .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} /* Isi halaman digeser ke bawah bilah yang kini melayang. */ main.wrap{padding-top:72px} /* Di layar kecil kepala utama mengecil (62px, bantal 18px, logo 34px); kembarannya mengecil PAS di angka yang sama, lain itu posisinya meleset beberapa piksel dan pertukarannya lewat layar muat tampak melompat. */ @media(max-width:820px){ .kepala-isi{height:62px;padding:0 18px;gap:12px} .identitas img{width:34px;height:34px} main.wrap{padding-top:62px} } /* Saat digulir, bilahnya diberi latar kertas dan garis rambut supaya isi yang lewat di bawahnya tidak bertabrakan dengan identitasnya (halaman utama membentuk pulau kaca di posisi yang sama; di halaman pendek ini kertas polos cukup). Kelasnya dipasang js/gulir.js. */ body.kepala-lengket .kepala{background:var(--paper);box-shadow:0 1px 0 var(--line)} /* Dan selagi layar muat menutupi, wajah malamnya menang atas latar kertas: aturan ini sengaja ditulis sesudahnya. */ html.tirai-tutup .kepala{background:none;box-shadow:none} /* --- Mundur: pintu kembali di bawah kepala, bukan di dalamnya --- Kembaran wujud tombol "Kembali ke Halaman Utama" milik peta kabinet: pil berbingkai dengan anak panah ke kiri, menonjol sendiri di bawah kepala halaman supaya mudah dijangkau ibu jari. */ .mundur{display:inline-flex;align-items:center;gap:9px;margin:22px 0 0; font-size:14px;font-weight:600;text-decoration:none;color:var(--muted); padding:9px 18px;border:1px solid var(--line);border-radius:8px; transition:color .3s,border-color .3s} .mundur svg{width:13px;height:13px;flex:none;fill:none;stroke:currentColor; stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} .mundur:hover,.mundur:focus-visible{color:var(--gold);border-color:var(--gold)} /* --- Panggung: poster kegiatan --- Gambarnya persis og:image yang dibawa WhatsApp, jadi pengunjung yang datang dari tautan bagikan melihat wajah yang sama dengan pratinjaunya. */ .panggung{margin:30px 0 24px} .panggung img{display:block;width:100%;height:auto;border-radius:18px; border:1px solid var(--line);box-shadow:0 24px 60px rgba(30,12,14,.16)} .status{display:inline-flex;align-items:center;gap:7px;font-size:10px;font-weight:700; letter-spacing:1.6px;text-transform:uppercase;border-radius:999px;padding:6px 13px; color:#FFF3E4;background:rgba(22,10,12,.42);border:1px solid rgba(255,244,232,.3)} .status .titik{width:7px;height:7px;border-radius:50%;flex:none;background:#F0C36B} .status.jalan .titik{background:#97DE9A} .status.selesai .titik{background:rgba(255,244,232,.62)} h1{font-family:var(--serif);font-size:clamp(26px,4.4vw,37px);line-height:1.22; margin:14px 0 12px} .cerita{color:var(--muted);font-size:15.5px;max-width:660px} /* --- Rincian: hanya yang penting, tanpa karangan --- Baris definisi sederhana. Yang tidak diketahui pasti (misalnya penyelenggara) sengaja tidak dibuat-buat; barisnya boleh kurang. */ .rincian{margin:26px 0 0;padding:18px 22px;background:var(--tint); border:1px solid var(--line);border-radius:14px;display:grid;gap:13px} .rincian > div{display:flex;gap:14px;align-items:baseline} .rincian dt{font-size:11px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase; color:var(--faint);width:118px;flex:none} .rincian dd{font-size:15px;font-weight:600} .aksi{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap} .tombol-bagi{display:inline-flex;align-items:center;gap:9px;padding:12px 22px; border-radius:999px;border:none;cursor:pointer;background:var(--red);color:#fff; font-family:var(--sans);font-weight:600;font-size:14.5px; transition:background .3s,box-shadow .3s} .tombol-bagi:hover{background:var(--red-deep);box-shadow:0 12px 30px rgba(180,35,42,.35)} .tombol-bagi svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8; stroke-linecap:round;stroke-linejoin:round} .tombol-ig{display:inline-flex;align-items:center;gap:9px;padding:12px 22px; border-radius:999px;border:1px solid var(--line);color:var(--ink); text-decoration:none;font-size:14.5px;font-weight:600; transition:border-color .3s,color .3s} .tombol-ig:hover{border-color:var(--gold);color:var(--gold)} .catatan{margin-top:20px;font-size:13px;color:var(--faint)} /* Upilan "tautan disalin" dari js/bagi.js (sama dengan di situs utama). */ .upilan{position:fixed;left:50%;bottom:28px;z-index:150;transform:translateX(-50%) translateY(10px); background:#241417;color:#FFF7F0;font-size:13.5px;padding:10px 18px;border-radius:999px; opacity:0;pointer-events:none;box-shadow:0 14px 34px rgba(20,8,10,.35); transition:opacity .3s,transform .3s var(--ease)} .upilan.tampak{opacity:1;transform:translateX(-50%) translateY(0)} .kaki{margin-top:56px;border-top:1px solid var(--line);padding:20px 0 30px; text-align:center;font-size:12.5px;color:var(--faint)} @media(max-width:560px){ .wrap{padding:0 18px} .panggung{margin-top:20px} /* Anak panah identitas di ponsel TETAP tampak: kepala halaman utama di ponsel pun menampilkannya, dan kembaran ini harus cocok baris per baris supaya pertukarannya lewat layar muat tak bergoyang. */ .rincian{padding:16px 16px} .rincian > div{flex-direction:column;gap:2px} .rincian dt{width:auto} } /* --- Halaman bidang: identitasnya angka dan chip, bukan deretan teks --- */ .kicker{display:block;font-size:11px;font-weight:700;letter-spacing:2.4px; text-transform:uppercase;color:var(--gold)} .label-chips{display:block;margin:30px 0 12px;font-size:11px;font-weight:700; letter-spacing:1.6px;text-transform:uppercase;color:var(--faint)} .chips{display:flex;flex-wrap:wrap;gap:9px;margin:0;padding:0;list-style:none} .chips li{padding:8px 15px;border:1px solid var(--line);border-radius:999px; background:var(--tint);font-size:13.5px;font-weight:600;color:var(--ink)} .pager{display:flex;justify-content:space-between;gap:12px;margin-top:34px; font-size:13.5px} .pager a{color:var(--muted);text-decoration:none;padding:6px 2px} .pager a:hover{color:var(--gold)} .pager span{visibility:hidden} @media(max-width:560px){ .chips li{padding:7px 13px;font-size:13px} }