/* ============================================================ TAMPILAN UNDANGAN — TEMA SIRKUS VINTAGE Poster tenda: kertas krem menua, garis merah, huruf poster, lampu panggung, dan potongan tiket. Berkas ini mengatur rupa halaman. Isi tulisannya TIDAK di sini — itu ada di data/konten.json. ============================================================ */ /* ------------------------------------------------------------ TOKEN WARNA Semua warna lewat sini. Mode terang dan gelap cukup diganti di satu tempat, komponennya tidak perlu disentuh. ------------------------------------------------------------ */ :root{ --ground:#F4E4C9; /* kertas poster yang sudah menua */ --panel:#EBD6B4; /* latar bagian selang-seling */ --kertas:#F7EBD4; /* kertas poster di sampul, sedikit lebih terang dari latar supaya bidangnya tetap terpisah */ --ink:#2A1A12; /* tinta cetak, coklat kehitaman */ --muted:#6E513C; /* teks sekunder */ --line:#C9AB80; /* garis rambut */ --merah:#B3241F; /* merah tenda */ --merah-tua:#8C1A16; --emas:#C8912F; /* huruf emas poster */ --biru:#1F4E5F; /* hijau-biru tua, warna kedua poster lama */ --invert-bg:#3A1210; /* bagian gelap: pita, hitung mundur, RSVP */ --invert-fg:#F7EAD2; --art-bright:1; /* kecerahan gambar buatan skrip */ /* Huruf bawaan sistem — sengaja tanpa Google Fonts. Halaman terbuka seketika, tanpa kedip ganti huruf. Playbill dan Rockwell adalah huruf poster sirkus klasik dan ada di Windows. Ponsel tidak punya keduanya, jadi di bawahnya dijejerkan huruf tebal berkait yang ada di Android dan iPhone. Rupanya tidak persis sama di setiap alat, dan itu tidak apa — yang membuat halaman ini terasa sirkus adalah garis, lampu, dan lidah tendanya, bukan hurufnya sendiri. */ --poster:"Playbill","Rockwell Extra Bold","Bodoni MT Black","Bodoni 72","Didot","Bookman Old Style",Rockwell,Georgia,serif; --serif:"Bookman Old Style","Palatino Linotype","Book Antiqua",Palatino,Georgia,"Times New Roman",serif; --sans:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif; /* Angka hitung mundur perlu huruf yang lebarnya sama tiap angka. Tanpa ini, kotak detik ikut bergoyang setiap kali angkanya berganti dari 1 ke 8 — kelihatan sekali karena berdetak terus. */ --mono:ui-monospace,"SF Mono","Cascadia Mono","Segoe UI Mono",Menlo,Consolas,monospace; --pad:clamp(1.25rem,5vw,5.5rem); --maxw:1180px; /* Garis tenda. Dipakai berulang di sampul, pita, dan kaki halaman, jadi ditulis sekali di sini. */ --garis-tenda:repeating-linear-gradient(90deg, var(--merah) 0 26px, transparent 26px 52px); } @media (prefers-color-scheme:dark){ :root{ --ground:#1C0D0A; --panel:#26120E; --kertas:#2E1511; --ink:#F2E2C6; --muted:#B49274; --line:#4A2A20; --merah:#C9342C; --merah-tua:#8C1A16; --emas:#D8A445; --biru:#4E8B9E; --invert-bg:#120705; --invert-fg:#F2E2C6; --art-bright:.9; } } /* ============================================================ TEMA LAIN Dipilih dari panel admin. Namanya ditempel build.js di tag , misal . Yang di atas sana (sirkus) tetap jadi bawaan. Tiap tema mengganti dua hal: warnanya, dan hiasan mana yang ikut tampil. Susunan halamannya tidak berubah — hanya satu berkas isi, satu susunan, tiga rupa. ============================================================ */ /* ============================================================ TEMA CIRQUEST Mengikuti poster acaranya: sinar merah-kuning memancar dari tengah, dua sudut atas biru berbintang, siluet tenda hitam berpuncak tiga bola, dan plakat hitam bertepi titik emas. Warnanya diambil dari poster itu: merah bata, kuning kunyit, biru kobalt, hitam yang kehangatan. ============================================================ */ :root[data-tema="cirquest"]{ --ground:#17140F; --panel:#201A13; --kertas:#17140F; --ink:#F4E4C1; --muted:#C4A87C; --line:#3B3226; --merah:#A8281C; --merah-tua:#7C1C13; --emas:#E9A22B; --biru:#1D4F9C; --invert-bg:#0F0D09; --invert-fg:#F4E4C1; --art-bright:.92; } /* ---------- Sampul: sinar memancar ---------- */ :root[data-tema="cirquest"] .sampul{ background:var(--merah); padding-top:clamp(1rem,4vh,2.5rem); } /* Sinarnya satu gradasi melingkar yang diulang: 24 bilah bergantian merah dan kuning. Titik pusatnya sengaja di atas tengah, seperti di poster. */ .sinar{ position:absolute; inset:0; overflow:hidden; background:repeating-conic-gradient(from -7.5deg at 50% 36%, var(--merah) 0 15deg, var(--emas) 15deg 30deg); } /* Dua sudut biru */ .sinar::before, .sinar::after{ content:""; position:absolute; top:0; width:38%; height:24%; background:var(--biru); } .sinar::before{ left:0; clip-path:polygon(0 0, 100% 0, 0 100%); } .sinar::after { right:0; clip-path:polygon(100% 0, 0 0, 100% 100%); } .sinar__bintang{ position:absolute; top:11%; width:clamp(18px,3.2vw,32px); height:auto; fill:var(--emas); } .sinar__bintang--kiri { left:7%; } .sinar__bintang--kanan{ right:7%; } /* Butiran kertas cetak. Derau digambar di dalam alamat gambar, jadi tidak ada berkas yang perlu diunduh. */ :root[data-tema="cirquest"] .sampul::after{ content:""; position:absolute; inset:0; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E"); opacity:.14; mix-blend-mode:multiply; } /* ---------- Tenda dan plakat ---------- */ :root[data-tema="cirquest"] .sampul__isi{ position:relative; } /* Plakat ditarik naik sedikit supaya kaki tenda tertutup olehnya, seperti di poster — bukan dua bentuk yang sekadar bertumpuk */ .tenda-svg{ display:block; width:min(96%,520px); margin:0 auto -9%; position:relative; z-index:1; } .tenda-svg__hitam{ fill:#17140F; } .tenda-svg__emas { fill:var(--emas); } /* Ruang dalam plakat harus lega di atas dan bawah: bentuk plakatnya berujung lancip di tengah, jadi tulisan yang mulai terlalu dekat tepi akan menembus garis titik-titiknya. */ :root[data-tema="cirquest"] .poster{ position:relative; z-index:2; background:none; border:0; box-shadow:none; padding:clamp(3.6rem,11vw,5.5rem) clamp(1.75rem,5vw,2.75rem); max-width:min(50ch,100%); } :root[data-tema="cirquest"] .poster::before{ display:none; } .plakat{ position:absolute; inset:0; width:100%; height:100%; } .plakat__bidang{ fill:var(--kertas); } .plakat__titik{ fill:none; stroke:var(--emas); stroke-width:5; stroke-dasharray:0 13; stroke-linecap:round; } .poster__teks{ position:relative; z-index:1; } /* ---------- Tulisan di sampul ---------- */ :root[data-tema="cirquest"] .sampul__pembuka{ color:var(--muted); } :root[data-tema="cirquest"] .sampul__jenis{ color:var(--emas); border:0; padding:0; } /* Nama acara satu kata dan harus utuh dalam satu baris — dipotong jadi "CIRQUES / T" jauh lebih buruk daripada sedikit lebih kecil. Karena itu nowrap, dan ukurannya dibatasi lebar layar. */ :root[data-tema="cirquest"] .sampul__nama{ color:var(--emas); text-shadow:none; font-size:min(3.4rem, 11.5vw); line-height:1; white-space:nowrap; letter-spacing:.01em; } .sampul__subnama{ margin-top:.5rem; color:var(--emas); font-family:var(--serif); font-weight:700; font-size:clamp(.9rem,3.2vw,1.15rem); letter-spacing:.12em; text-transform:uppercase; } :root[data-tema="cirquest"] .sampul__tagline{ color:rgba(244,228,193,.8); } :root[data-tema="cirquest"] .sampul__tagline i{ color:var(--emas); } :root[data-tema="cirquest"] .sampul__tanggal{ color:var(--ink); } :root[data-tema="cirquest"] .sampul__tempat{ border-top-color:rgba(233,162,43,.35); } :root[data-tema="cirquest"] .sampul__turun span{ border-right-color:var(--emas); border-bottom-color:var(--emas); } /* Rentang tanggal seperti di poster, diapit tanda pisah */ .sampul__rentang{ font-family:var(--serif); font-weight:700; color:var(--emas); font-size:clamp(.95rem,3.4vw,1.2rem); letter-spacing:.08em; text-transform:uppercase; margin-bottom:.5rem; } /* ---------- Bagian lain: hitam dengan tulisan emas ---------- */ :root[data-tema="cirquest"] .btn{ background:var(--emas); color:#17140F; border-color:#17140F; box-shadow:4px 4px 0 rgba(0,0,0,.55); } :root[data-tema="cirquest"] .btn:hover{ background:#F2B23F; box-shadow:2px 2px 0 rgba(0,0,0,.55); } :root[data-tema="cirquest"] .btn--garis{ background:transparent; color:var(--emas); border-color:var(--emas); } /* Tiket hitung mundur jadi kuning, mengikuti tipografi posternya */ :root[data-tema="cirquest"] .mundur__kotak{ background:var(--emas); color:#17140F; border-color:#17140F; } :root[data-tema="cirquest"] .mundur__kotak b{ color:#17140F; } :root[data-tema="cirquest"] .mundur__kotak:last-child b{ color:var(--merah); } :root[data-tema="cirquest"] .mundur__kotak span{ color:#5A4526; border-top-color:rgba(23,20,15,.35); } :root[data-tema="cirquest"] .karya-bagian h2, :root[data-tema="cirquest"] .rangkaian h2, :root[data-tema="cirquest"] .kartu h2{ color:var(--emas); } :root[data-tema="cirquest"] .karya-bagian h2 i{ color:var(--biru); } :root[data-tema="cirquest"] .surat__badan p:first-child::first-letter{ color:var(--emas); } :root[data-tema="cirquest"] .acara__jam{ background:var(--emas); color:#17140F; } :root[data-tema="cirquest"] .musik{ color:var(--emas); } :root[data-tema="cirquest"] .musik__ikon::after{ background:radial-gradient(circle at 50% 50%, #17140F 0 3px, var(--emas) 4px 7px, var(--merah) 8px 100%); } /* ---------- GALERI: kertas hangat, aksen kuningan ---------- Untuk pameran yang ingin terlihat tenang. Tanpa tenda, tanpa pita berjalan. */ :root[data-tema="galeri"]{ --ground:#F7F3EC; --panel:#EDE6D9; --kertas:#FFFDF9; --ink:#221F1A; --muted:#6B6255; --line:#DCD2C1; --merah:#8A6A3E; --merah-tua:#6B5230; --emas:#B08F5F; --biru:#4A5A52; --invert-bg:#221F1A; --invert-fg:#F3EDE1; --poster:"Iowan Old Style","Palatino Linotype","Book Antiqua",Palatino,Georgia,serif; } @media (prefers-color-scheme:dark){ :root[data-tema="galeri"]{ --ground:#16140F; --panel:#201D16; --kertas:#1C1913; --ink:#EFE8DA; --muted:#9A9082; --line:#342E24; --merah:#C7A46B; --merah-tua:#9C8153; --emas:#C7A46B; --biru:#7FA093; --invert-bg:#0E0C09; --invert-fg:#EFE8DA; --art-bright:.88; } } /* ---------- KELAM: galeri malam, gading di atas hitam ---------- */ :root[data-tema="kelam"]{ --ground:#141317; --panel:#1C1B21; --kertas:#1A1920; --ink:#EDEAF2; --muted:#9E99A8; --line:#2E2C36; --merah:#C9A227; --merah-tua:#9F7F1C; --emas:#DCC57E; --biru:#8496AE; --invert-bg:#0A090C; --invert-fg:#EDEAF2; --art-bright:.82; --poster:"Bodoni MT","Bodoni 72","Didot","Palatino Linotype",Palatino,Georgia,serif; } /* Tema ini sudah gelap sejak awal, jadi mode gelap tidak mengubah apa pun — hanya sedikit menurunkan kecerahan gambar. */ /* ---------- Hiasan khas sirkus hanya untuk tema sirkus ---------- */ :root[data-tema="galeri"] .tenda, :root[data-tema="kelam"] .tenda, :root[data-tema="galeri"] .pita, :root[data-tema="kelam"] .pita{ display:none; } /* Sampul tanpa garis tenda: cukup satu semburat cahaya dari atas */ :root[data-tema="galeri"] .sampul, :root[data-tema="kelam"] .sampul{ background: radial-gradient(80% 60% at 50% 0%, rgba(140,110,60,.16), transparent 65%), var(--ground); padding-top:clamp(3rem,9vh,5rem); } /* Poster jadi bidang tenang: satu garis tipis, tanpa bayangan padat */ :root[data-tema="galeri"] .poster, :root[data-tema="kelam"] .poster{ border:1px solid var(--line); box-shadow:none; background:var(--kertas); } :root[data-tema="galeri"] .poster::before, :root[data-tema="kelam"] .poster::before{ display:none; } /* Kotak hitung mundur tanpa gerigi tiket */ :root[data-tema="galeri"] .mundur__kotak::before, :root[data-tema="galeri"] .mundur__kotak::after, :root[data-tema="kelam"] .mundur__kotak::before, :root[data-tema="kelam"] .mundur__kotak::after{ display:none; } :root[data-tema="galeri"] .mundur__kotak, :root[data-tema="kelam"] .mundur__kotak{ background:transparent; color:var(--invert-fg); border:1px solid rgba(243,237,225,.18); box-shadow:none; } :root[data-tema="galeri"] .mundur__kotak b, :root[data-tema="kelam"] .mundur__kotak b{ color:var(--invert-fg); } :root[data-tema="galeri"] .mundur__kotak:last-child b, :root[data-tema="kelam"] .mundur__kotak:last-child b{ color:var(--emas); } :root[data-tema="galeri"] .mundur__kotak span, :root[data-tema="kelam"] .mundur__kotak span{ border-top:1px solid rgba(243,237,225,.15); color:rgba(243,237,225,.55); } /* Tombol rata, tanpa bayangan letterpress */ :root[data-tema="galeri"] .btn, :root[data-tema="kelam"] .btn{ box-shadow:none; border-width:1px; } :root[data-tema="galeri"] .btn:hover, :root[data-tema="kelam"] .btn:hover{ transform:none; box-shadow:none; } :root[data-tema="galeri"] .btn:active, :root[data-tema="kelam"] .btn:active{ transform:none; } :root[data-tema="galeri"] .kartu, :root[data-tema="kelam"] .kartu, :root[data-tema="galeri"] .frame, :root[data-tema="kelam"] .frame{ box-shadow:none; border-width:1px; } /* Garis tenda di kaki halaman dan garis-garis di bagian RSVP */ :root[data-tema="galeri"] .footer, :root[data-tema="kelam"] .footer{ background:var(--panel); } :root[data-tema="galeri"] .rsvp::before, :root[data-tema="kelam"] .rsvp::before{ display:none; } /* Nomor "Babak" itu bahasa panggung — tidak cocok di luar sirkus */ :root[data-tema="galeri"] .acara__isi h3::before, :root[data-tema="kelam"] .acara__isi h3::before{ content:none; } /* Huruf poster diganti serif biasa, jadi jangan lagi dibesarkan dan diregangkan seperti poster sirkus */ :root[data-tema="galeri"] .sampul__nama, :root[data-tema="kelam"] .sampul__nama{ text-shadow:none; letter-spacing:-.01em; text-transform:none; font-size:clamp(2.2rem,9vw,4rem); } *,*::before,*::after{ box-sizing:border-box; } /* Atribut hidden harus selalu menang. Aturan bawaan peramban [hidden]{display:none} kalah kekhususan dari aturan kelas seperti .batang{display:flex}. */ [hidden]{ display:none !important; } html{ scroll-behavior:smooth; } body{ margin:0; color:var(--ink); font-family:var(--sans); font-size:17px; line-height:1.7; -webkit-font-smoothing:antialiased; overflow-x:hidden; /* Kertas menua: warna dasar krem, ditambah dua semburat coklat tipis di sudut supaya tidak terlihat seperti bidang rata. */ background: radial-gradient(70% 50% at 12% 0%, rgba(140,90,40,.10), transparent 60%), radial-gradient(60% 45% at 88% 100%, rgba(140,90,40,.09), transparent 60%), var(--ground); } h1,h2,h3{ margin:0; line-height:1.1; text-wrap:balance; } h2,h3{ font-family:var(--serif); font-weight:700; } p{ margin:0; } a{ color:inherit; } img,canvas{ display:block; max-width:100%; } :focus-visible{ outline:3px solid var(--emas); outline-offset:3px; } .wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); } /* ------------------------------------------------------------ BAGIAN YANG DIPAKAI BERULANG ------------------------------------------------------------ */ /* Judul kecil di atas tiap bagian, diapit bintang */ .eyebrow{ font-family:var(--serif); font-size:.72rem; font-weight:700; letter-spacing:.28em; text-transform:uppercase; color:var(--merah); display:flex; align-items:center; gap:.85rem; margin-bottom:1.25rem; } .eyebrow::before{ content:"\2726"; color:var(--emas); letter-spacing:0; } .eyebrow::after{ content:""; height:2px; flex:1; max-width:90px; background:repeating-linear-gradient(90deg,var(--line) 0 6px,transparent 6px 10px); } .eyebrow--terang{ color:var(--emas); } .eyebrow--terang::after{ background:repeating-linear-gradient(90deg,rgba(247,234,210,.4) 0 6px,transparent 6px 10px); } .lede{ color:var(--muted); max-width:52ch; margin-top:1rem; } /* Tombol tiket: sudut tegas, garis dobel, dan bayangan padat seperti cetakan letterpress yang sedikit bergeser */ .btn{ display:inline-block; padding:.85rem 1.7rem; border:2px solid var(--ink); background:var(--merah); color:#F7EAD2; text-decoration:none; cursor:pointer; font-family:var(--serif); font-size:.78rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; box-shadow:4px 4px 0 var(--ink); transition:transform .15s, box-shadow .15s, background .2s; } .btn:hover{ background:var(--merah-tua); transform:translate(2px,2px); box-shadow:2px 2px 0 var(--ink); } .btn:active{ transform:translate(4px,4px); box-shadow:0 0 0 var(--ink); } .btn--garis{ background:var(--ground); color:var(--ink); } .btn--garis:hover{ background:var(--panel); } .btn--terang{ background:var(--emas); color:#2A1A12; border-color:#2A1A12; box-shadow:4px 4px 0 #1A0A06; } .btn--terang:hover{ background:#D8A445; box-shadow:2px 2px 0 #1A0A06; } .btn--garis-terang{ background:transparent; color:var(--invert-fg); border-color:var(--invert-fg); box-shadow:4px 4px 0 rgba(0,0,0,.45); } .btn--garis-terang:hover{ background:rgba(247,234,210,.12); box-shadow:2px 2px 0 rgba(0,0,0,.45); } /* Muncul perlahan saat digulir. Skrip yang menambahkan .tampil. Kalau skrip mati, aturan @media di bawah membuat semuanya langsung terlihat — halaman tidak pernah kosong. */ .reveal{ opacity:0; transform:translateY(20px); transition:opacity .7s ease, transform .7s ease; } .reveal.tampil{ opacity:1; transform:none; } @media (scripting:none){ .reveal{ opacity:1; transform:none; } } @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } .reveal{ transition:none; opacity:1; transform:none; } } /* ------------------------------------------------------------ SAMPUL Layar pertama: poster di dalam tenda bergaris. ------------------------------------------------------------ */ .sampul{ min-height:100svh; display:grid; place-items:center; position:relative; /* minmax(0,1fr), bukan kolom auto. Kolom auto melebar mengejar ukuran terbesar isinya — poster yang dibatasi 48ch membuat kolomnya ikut selebar 48ch walau layarnya lebih sempit, dan poster itu lalu terpotong tepi kanan layar ponsel. */ grid-template-columns:minmax(0,1fr); padding:clamp(4.5rem,12vh,7rem) var(--pad) clamp(4rem,10vh,6rem); text-align:center; overflow:hidden; background: repeating-linear-gradient(90deg, rgba(179,36,31,.13) 0 42px, transparent 42px 84px), radial-gradient(90% 70% at 50% 0%, rgba(200,145,47,.20), transparent 65%), var(--ground); } /* LIDAH TENDA Deretan setengah lingkaran merah yang menggantung di tepi atas. Dibuat dari satu gradasi melingkar yang diulang — tanpa gambar, jadi tetap tajam di layar serapat apa pun. */ .tenda{ position:absolute; top:0; left:0; right:0; height:clamp(28px,6vw,46px); background: radial-gradient(circle at 50% 0, var(--merah) 0 62%, transparent 63%) 0 0 / clamp(46px,9vw,74px) 100% repeat-x; filter:drop-shadow(0 3px 0 rgba(0,0,0,.18)); } /* Barisan lampu di bawah lidah tenda, berdenyut pelan. Jari-jari bolanya ditulis dalam piksel, bukan persen. Persen dihitung dari sisi terpanjang kotaknya — pada bidang selebar 74px dan setinggi 14px, hasilnya bola yang terpotong atas-bawah dan malah terlihat seperti kotak kecil. */ .tenda::after{ content:""; position:absolute; left:0; right:0; top:100%; height:14px; background: radial-gradient(circle 5px at 50% 7px, var(--emas) 0 4px, transparent 5px) 0 0 / clamp(46px,9vw,74px) 100% repeat-x; animation:lampu 2.4s ease-in-out infinite; } @keyframes lampu{ 0%,100%{ opacity:.45; } 50% { opacity:1; } } .sampul__isi{ width:100%; display:grid; justify-items:center; } /* Kertas poster: bidang krem, pinggir merah, garis dobel di dalam. Pinggir merahnya dibuat dengan border sungguhan, bukan bayangan yang melebar. Bayangan tidak ikut dihitung sebagai ukuran, jadi di ponsel ia menonjol keluar dan terpotong tepi layar. */ .poster{ position:relative; width:100%; max-width:min(48ch,100%); padding:clamp(2rem,6vw,3.25rem) clamp(1.5rem,5vw,2.75rem); background:var(--kertas); border:6px solid var(--merah); box-shadow:8px 10px 0 rgba(42,26,18,.22); } /* Garis dobel tipis di dalam pinggir merah */ .poster::before{ content:""; position:absolute; inset:7px; border:3px double var(--ink); opacity:.55; pointer-events:none; } .sampul__pembuka{ font-family:var(--serif); font-style:italic; font-size:.95rem; color:var(--muted); } .sampul__jenis{ margin-top:.75rem; font-family:var(--serif); font-weight:700; font-size:.7rem; letter-spacing:.3em; text-transform:uppercase; color:var(--merah); padding:.4rem 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); } /* Nama acara: sebesar mungkin tanpa menabrak pinggir poster. Batas atasnya sengaja tidak digenapkan ke 5-6rem — huruf poster itu lebar, dan nama sepanjang "ANTARA" sudah melewati garis bingkai di dalam sebelum sampai sana. */ .sampul__nama{ font-family:var(--poster); font-weight:700; font-size:clamp(2.3rem,10vw,4.4rem); line-height:.98; letter-spacing:0; text-transform:uppercase; overflow-wrap:break-word; margin:1.1rem 0 0; color:var(--merah); text-shadow:2px 2px 0 var(--kertas), 4px 4px 0 rgba(42,26,18,.3); } .sampul__bintang{ margin-top:.9rem; color:var(--emas); letter-spacing:.7em; font-size:.8rem; } .sampul__tagline{ font-family:var(--serif); font-size:clamp(1rem,3.2vw,1.25rem); line-height:1.55; color:var(--muted); margin-top:.75rem; } .sampul__tagline i{ color:var(--merah); font-style:italic; } .sampul__garis{ height:8px; margin:1.75rem auto; max-width:220px; background: radial-gradient(circle at 50% 50%, var(--emas) 0 30%, transparent 32%) 0 0/22px 100% repeat-x; } /* Tanggal dan jam ditulis sebagai dua baris terpisah, bukan satu baris dengan titik pemisah. Digabung, barisnya pecah di tempat yang tidak terduga di ponsel dan titiknya tertinggal menggantung di ujung baris. */ .sampul__tanggal{ font-family:var(--poster); font-size:clamp(1.1rem,4vw,1.5rem); text-transform:uppercase; letter-spacing:.03em; color:var(--ink); text-wrap:balance; } .sampul__jam{ font-family:var(--mono); font-weight:700; font-size:clamp(1rem,3.4vw,1.25rem); color:var(--merah); margin-top:.3rem; } .sampul__tempat{ font-family:var(--serif); font-size:.88rem; color:var(--muted); margin-top:.7rem; padding-top:.7rem; border-top:1px solid var(--line); text-wrap:pretty; } /* Panah kecil di bawah sampul, berdenyut pelan */ .sampul__turun{ position:absolute; left:50%; bottom:1.5rem; translate:-50% 0; width:44px; height:44px; display:grid; place-items:center; } .sampul__turun span{ width:11px; height:11px; border-right:2px solid var(--merah); border-bottom:2px solid var(--merah); rotate:45deg; animation:turun 2s ease-in-out infinite; } @keyframes turun{ 0%,100%{ transform:translateY(-3px); opacity:.45; } 50% { transform:translateY(3px); opacity:1; } } /* ------------------------------------------------------------ PITA BERJALAN Kain memanjang berisi keterangan singkat yang bergeser terus. ------------------------------------------------------------ */ .pita{ background:var(--merah); color:#F7EAD2; overflow:hidden; border-top:3px solid var(--ink); border-bottom:3px solid var(--ink); padding:.7rem 0; } .pita__jalur{ display:flex; width:max-content; animation:jalan 34s linear infinite; } .pita__set{ display:flex; align-items:center; gap:2.5rem; list-style:none; margin:0; padding:0 1.25rem; font-family:var(--serif); font-weight:700; font-size:.78rem; letter-spacing:.22em; text-transform:uppercase; white-space:nowrap; } .pita__set li{ display:flex; align-items:center; gap:2.5rem; } .pita__set li::after{ content:"\2726"; color:var(--emas); letter-spacing:0; } @keyframes jalan{ from{ transform:translateX(0); } to { transform:translateX(-50%); } /* tepat satu salinan */ } /* Pengunjung yang minta animasi dikurangi tidak perlu melihat apa pun bergerak. Pitanya tetap ada, hanya berhenti. */ @media (prefers-reduced-motion:reduce){ .pita__jalur{ animation:none; } .tenda::after{ animation:none; opacity:.9; } .sampul__turun span{ animation:none; } } /* ------------------------------------------------------------ HITUNG MUNDUR Bagian yang paling sering dilihat orang. Tiap satuan waktu dibuat seperti potongan tiket: bergerigi di sisi kiri-kanan, dengan garis putus-putus tempat tiket disobek. ------------------------------------------------------------ */ .mundur-bagian{ background:var(--invert-bg); color:var(--invert-fg); padding:clamp(2.75rem,7vw,4rem) 0 clamp(2.5rem,6vw,3.5rem); position:relative; overflow:hidden; } /* Sorot lampu panggung dari atas tengah */ .mundur-bagian::before{ content:""; position:absolute; inset:0; background:radial-gradient(60% 55% at 50% 0%, rgba(200,145,47,.22), transparent 70%); pointer-events:none; } .mundur-bagian .wrap{ position:relative; } .mundur-bagian .eyebrow{ justify-content:center; } .mundur-bagian .eyebrow::after{ display:none; } .mundur{ display:grid; gap:clamp(.5rem,2vw,1.1rem); max-width:760px; margin-inline:auto; /* minmax(0,...) supaya angka besar di dalam kotak tidak memaksa kolomnya melebar di layar sempit */ grid-template-columns:repeat(4,minmax(0,1fr)); } .mundur__kotak{ position:relative; text-align:center; padding:clamp(1rem,3.4vw,1.7rem) .4rem; background:var(--invert-fg); color:var(--invert-bg); border:2px solid var(--ink); box-shadow:5px 5px 0 rgba(0,0,0,.4); /* Gerigi tiket: dua deret lubang setengah lingkaran di sisi kiri dan kanan, dilubangi dari kotaknya sendiri. Warna lubangnya sengaja mengikuti latar gelap di belakangnya. */ --lubang:radial-gradient(circle at 0 50%, var(--invert-bg) 0 4px, transparent 5px); } .mundur__kotak::before, .mundur__kotak::after{ content:""; position:absolute; top:0; bottom:0; width:5px; background:var(--lubang) 0 0/5px 14px repeat-y; } .mundur__kotak::before{ left:-2px; } .mundur__kotak::after{ right:-2px; rotate:180deg; } .mundur__kotak b{ display:block; font-family:var(--mono); font-weight:700; font-size:clamp(1.8rem,8vw,3.4rem); line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--merah-tua); } .mundur__kotak span{ display:block; margin-top:.65rem; padding-top:.55rem; border-top:1px dashed rgba(42,26,18,.4); /* garis sobek tiket */ font-family:var(--serif); font-weight:700; font-size:.6rem; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); } /* Detik diberi warna berbeda supaya jelas ini jam yang hidup, bukan tanggal yang ditulis diam */ .mundur__kotak:last-child b{ color:var(--biru); } /* Sebelum hari pembukaan barisan ini memang kosong. Tingginya tetap dipesan sedikit supaya kotak tiket tidak melompat ke atas pada saat pesan "sedang berlangsung" muncul nanti — tapi tidak sebesar satu baris penuh, karena ruang gelap yang menganggur terlihat seperti halaman yang belum selesai. */ .mundur__pesan{ text-align:center; margin-top:1.5rem; font-family:var(--serif); font-style:italic; font-size:1.05rem; color:rgba(247,234,210,.75); min-height:1.3em; } .mundur__pesan.sedang{ color:var(--emas); font-style:normal; font-weight:700; letter-spacing:.06em; } /* ------------------------------------------------------------ SURAT UNDANGAN ------------------------------------------------------------ */ .surat{ padding:clamp(4rem,11vw,7rem) 0; } .surat__isi{ max-width:60ch; } .surat .eyebrow{ justify-content:flex-start; } .surat__sapaan{ font-family:var(--poster); font-size:1.5rem; text-transform:uppercase; margin-bottom:1.5rem; } .surat__badan{ display:grid; gap:1.4rem; font-size:1.05rem; color:var(--muted); } /* Huruf pertama dibesarkan seperti cetakan lama. Hanya di paragraf pertama, dan hanya kalau ruangnya cukup lebar. */ @media (min-width:640px){ .surat__badan p:first-child::first-letter{ float:left; font-family:var(--poster); font-size:3.6rem; line-height:.82; padding:.1rem .6rem 0 0; color:var(--merah); } } .surat__badan i{ color:var(--merah); font-style:italic; } .surat__ttd{ font-family:var(--poster); font-size:1.5rem; text-transform:uppercase; margin-top:2.5rem; padding-top:2rem; border-top:3px double var(--line); } .surat__peran{ font-family:var(--serif); font-size:.75rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--merah); margin-top:.4rem; } /* ------------------------------------------------------------ WAKTU & TEMPAT ------------------------------------------------------------ */ .detail{ background:var(--panel); padding:clamp(3.5rem,10vw,6rem) 0; border-top:3px solid var(--ink); border-bottom:3px solid var(--ink); } .detail__grid{ display:grid; gap:clamp(1.5rem,3vw,2rem); grid-template-columns:1fr; } @media (min-width:800px){ .detail__grid{ grid-template-columns:1fr 1fr; } } .kartu{ background:var(--ground); border:2px solid var(--ink); box-shadow:6px 6px 0 rgba(42,26,18,.25); padding:clamp(1.75rem,4vw,2.75rem); display:flex; flex-direction:column; } .kartu .eyebrow{ justify-content:flex-start; } .kartu h2{ font-family:var(--poster); font-weight:700; text-transform:uppercase; font-size:clamp(1.5rem,4.5vw,2.2rem); letter-spacing:.01em; } /* Jam pembukaan: angka besar, huruf mesin tik */ .kartu__besar{ font-family:var(--mono); font-weight:700; font-size:1.5rem; margin-top:.75rem; color:var(--merah); } /* Nama ruang bukan angka, jadi tidak ikut gaya jam di atas — huruf mesin tik ukuran besar membuatnya pecah dua baris dan terbaca lebih penting daripada nama tempatnya sendiri. */ .kartu__ruang{ font-family:var(--serif); font-style:italic; font-size:1.05rem; margin-top:.5rem; color:var(--muted); } .kartu__rinci{ margin:1.75rem 0 0; display:grid; gap:.9rem; } .kartu__rinci div{ display:grid; gap:.15rem; padding-bottom:.9rem; border-bottom:1px dashed var(--line); } .kartu__rinci dt{ font-family:var(--serif); font-weight:700; font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--merah); } .kartu__rinci dd{ margin:0; } .kartu__alamat{ margin-top:1.25rem; color:var(--muted); } .kartu__catatan{ margin-top:1rem; font-family:var(--serif); font-style:italic; font-size:.9rem; color:var(--muted); border-left:3px solid var(--emas); padding-left:.85rem; } /* Tombol didorong ke dasar kartu supaya dua kartu yang tingginya berbeda tetap punya tombol yang sejajar */ .kartu .btn{ align-self:flex-start; margin-top:auto; } .kartu__rinci + .btn{ margin-top:1.75rem; } .kartu__aksi{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:1.75rem; } .kartu__aksi .btn{ margin-top:0; } /* ------------------------------------------------------------ KARYA ------------------------------------------------------------ */ .karya-bagian{ padding:clamp(4rem,11vw,7rem) 0; } .karya-bagian h2{ font-family:var(--poster); font-weight:700; text-transform:uppercase; font-size:clamp(1.9rem,6vw,3.4rem); color:var(--merah); } .karya-bagian h2 i{ color:var(--biru); font-style:italic; } .karya-grid{ margin-top:clamp(2.5rem,6vw,4rem); display:grid; gap:clamp(1.75rem,4vw,3rem); grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); } .karya{ margin:0; } /* Bingkai foto bergaya poster: garis dobel dan bayangan padat */ .frame{ position:relative; overflow:hidden; background:var(--panel); border:2px solid var(--ink); box-shadow:6px 6px 0 rgba(42,26,18,.22); } .frame img, .frame canvas{ width:100%; height:100%; object-fit:cover; filter:brightness(var(--art-bright)); } /* Perbandingan sisi bingkai. Ruang gambar sudah dipesan sebelum gambarnya datang, jadi halaman tidak melompat saat memuat. */ .r-lebar{ aspect-ratio:4/3; } .r-kotak{ aspect-ratio:1/1; } .r-tegak{ aspect-ratio:3/4; } .karya figcaption{ padding-top:1.1rem; display:grid; gap:.3rem; } .karya figcaption h3{ font-family:var(--poster); font-weight:700; text-transform:uppercase; font-size:1.2rem; } .karya__seri{ font-family:var(--serif); font-weight:700; font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--merah); } .karya__medium{ font-size:.85rem; color:var(--muted); } /* ------------------------------------------------------------ RANGKAIAN ACARA Disusun seperti daftar pertunjukan di poster: nomor babak, jam, lalu namanya. ------------------------------------------------------------ */ .rangkaian{ padding-bottom:clamp(4rem,11vw,7rem); } .rangkaian h2{ font-family:var(--poster); font-weight:700; text-transform:uppercase; font-size:clamp(1.9rem,6vw,3rem); color:var(--merah); } .acara-list{ margin-top:clamp(2rem,5vw,3rem); display:grid; counter-reset:babak; } .acara{ display:grid; gap:.5rem 2.5rem; padding:1.75rem 0; border-top:1px dashed var(--line); grid-template-columns:1fr; } .acara:last-child{ border-bottom:1px dashed var(--line); } @media (min-width:720px){ .acara{ grid-template-columns:17rem 1fr; } } .acara__waktu{ display:flex; align-items:baseline; gap:.8rem; } .acara__tanggal{ font-family:var(--serif); font-weight:700; font-size:1.05rem; } .acara__jam{ font-family:var(--mono); font-weight:700; font-size:.82rem; color:#F7EAD2; background:var(--merah); border:2px solid var(--ink); padding:.05rem .5rem; } /* Nomor babak di depan judul acara, dihitung sendiri oleh CSS — jadi menambah agenda di konten.json tidak perlu menomori manual */ .acara__isi h3{ font-family:var(--poster); font-weight:700; text-transform:uppercase; font-size:1.35rem; counter-increment:babak; } /* Spasi biasa di akhir content diciutkan peramban, jadi tulisannya menempel: "Babak 1 ·PEMBUKAAN". Yang dipakai spasi tak-putus. */ .acara__isi h3::before{ content:"Babak " counter(babak) " \00b7\00a0"; color:var(--emas); font-size:.7em; } .acara__isi p{ color:var(--muted); margin-top:.45rem; max-width:52ch; } /* ------------------------------------------------------------ RSVP ------------------------------------------------------------ */ .rsvp{ background:var(--invert-bg); color:var(--invert-fg); padding:clamp(4rem,11vw,6.5rem) 0; border-top:3px solid var(--ink); position:relative; overflow:hidden; } .rsvp::before{ content:""; position:absolute; inset:0; background:repeating-linear-gradient(90deg, rgba(247,234,210,.05) 0 42px, transparent 42px 84px); pointer-events:none; } .rsvp__isi{ position:relative; max-width:56ch; } .rsvp h2{ font-family:var(--poster); font-weight:700; text-transform:uppercase; font-size:clamp(1.9rem,6vw,3rem); color:var(--emas); } .rsvp .lede{ color:rgba(247,234,210,.75); } .rsvp__aksi{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.25rem; } .rsvp__batas{ margin-top:1.9rem; font-family:var(--serif); font-weight:700; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--emas); } /* ------------------------------------------------------------ NARAHUBUNG & KAKI HALAMAN ------------------------------------------------------------ */ .kontak{ padding:clamp(3rem,8vw,4.5rem) var(--pad); } .kontak__daftar{ list-style:none; margin:0; padding:0; display:grid; gap:1.5rem; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); } .kontak__daftar li{ display:grid; gap:.35rem; } .kontak__daftar strong{ font-family:var(--serif); font-size:.64rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--merah); } .kontak__daftar a{ text-decoration:none; border-bottom:2px solid var(--emas); justify-self:start; } .kontak__daftar a:hover{ border-color:var(--merah); } /* Garis tenda tipis sebagai penutup halaman */ .footer{ border-top:3px solid var(--ink); padding:2rem var(--pad); display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center; font-size:.8rem; color:var(--muted); background:linear-gradient(var(--garis-tenda)) top/100% 10px no-repeat, var(--panel); } .footer span:first-child{ font-family:var(--poster); font-size:1.15rem; text-transform:uppercase; color:var(--ink); } /* ------------------------------------------------------------ BATANG AKSI DI PONSEL Menempel di dasar layar setelah sampul terlewat. Di layar lebar tidak perlu — tombolnya sudah kelihatan semua. ------------------------------------------------------------ */ .batang{ position:fixed; left:0; right:0; bottom:0; z-index:20; display:flex; gap:2px; background:var(--ink); border-top:3px solid var(--ink); animation:naik .3s ease; } .batang a{ flex:1; padding:1rem .5rem; text-align:center; text-decoration:none; background:var(--ground); font-family:var(--serif); font-weight:700; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; } .batang__utama{ background:var(--merah) !important; color:#F7EAD2; } @keyframes naik{ from{ translate:0 100%; } to{ translate:0 0; } } @media (min-width:800px){ .batang{ display:none; } } /* Kaki halaman diberi ruang ekstra supaya tulisan terakhir tidak tertutup batang aksi di ponsel — dan ruang di kanan supaya tidak tertimpa tombol musik yang menempel di sudut itu */ @media (max-width:799px){ .footer{ padding-bottom:5.5rem; padding-right:4.5rem; } } /* ------------------------------------------------------------ TOMBOL MUSIK Bulat, menempel di sudut kanan bawah. Dua rupa: segitiga "putar" saat diam, dan cakram yang berputar saat berbunyi — jadi keadaannya terbaca tanpa perlu tulisan apa pun. ------------------------------------------------------------ */ .musik{ position:fixed; right:1rem; bottom:1.25rem; z-index:25; width:52px; height:52px; display:grid; place-items:center; border-radius:50%; cursor:pointer; background:var(--kertas); color:var(--merah); border:2px solid var(--ink); box-shadow:3px 3px 0 var(--ink); transition:transform .15s, box-shadow .15s; } .musik:hover{ transform:translate(1px,1px); box-shadow:2px 2px 0 var(--ink); } .musik__ikon{ display:grid; place-items:center; width:22px; height:22px; } /* Segitiga putar — hanya saat musik sedang diam */ .musik__ikon::before{ content:""; margin-left:3px; border-left:13px solid currentColor; border-top:8px solid transparent; border-bottom:8px solid transparent; } .musik[aria-pressed="true"] .musik__ikon::before{ display:none; } /* Cakram berputar — hanya saat musik berbunyi */ .musik__ikon::after{ content:""; display:none; width:20px; height:20px; border-radius:50%; background: radial-gradient(circle at 50% 50%, var(--kertas) 0 3px, var(--merah) 4px 7px, var(--merah-tua) 8px 100%); border:1px solid var(--ink); } .musik[aria-pressed="true"] .musik__ikon::after{ display:block; animation:putar 2.6s linear infinite; } @keyframes putar{ to{ rotate:360deg; } } /* Di ponsel tombolnya dinaikkan supaya tidak menimpa batang aksi */ @media (max-width:799px){ .musik{ bottom:4.9rem; } } @media (prefers-reduced-motion:reduce){ .musik__ikon::after{ animation:none; } } /* ------------------------------------------------------------ HALAMAN TERSESAT (404) ------------------------------------------------------------ */ .oops{ min-height:100svh; display:grid; place-content:center; text-align:center; gap:1.25rem; padding:var(--pad); max-width:52ch; margin-inline:auto; } .oops__no{ font-family:var(--poster); font-size:clamp(3rem,14vw,6rem); color:var(--merah); line-height:1; text-shadow:3px 3px 0 var(--ground), 5px 5px 0 rgba(42,26,18,.3); } .oops h1{ font-family:var(--serif); font-weight:700; font-size:clamp(1.6rem,5vw,2.4rem); } .oops p{ color:var(--muted); } .oops .btn{ justify-self:center; text-decoration:none; }