/* Theme Name: TJR v5 Theme URI: https://thejournalingroom.id/ Author: The Journaling Room Author URI: https://thejournalingroom.id/ Description: Tema blok untuk The Journaling Room. Lembar kertas krem melayang di atas foto meja kerja, display serif italic kontras tinggi, sudut membulat, dan strip warna. Port dari prototipe v5 Fieldtime. Version: 1.0.0 Requires at least: 6.5 Tested up to: 6.7 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: tjr-v5 Tags: block-theme, full-site-editing, one-column, custom-colors, custom-menu, editor-style, featured-images, block-patterns */ /* ============================================================ Isi file ini hanya hal yang tidak bisa diucapkan theme.json: posisi, animasi, grid khusus, dan efek hover. Semua warna dan jarak diambil dari preset yang digenerate theme.json, jadi tidak ada nilai hex yang ditulis dua kali. ============================================================ */ /* ===== 1. Dasar ===== */ *{box-sizing:border-box} html{scroll-behavior:smooth} @media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}} body{ margin:0; background:var(--wp--preset--color--meja) url("assets/img/latar-meja.jpg") center/cover fixed no-repeat; -webkit-font-smoothing:antialiased; } /* peredam tipis: latar meja tetap kebaca tapi tidak melawan lembar kertas */ body::before{ content:"";position:fixed;inset:0;z-index:0;pointer-events:none; background:radial-gradient(120% 90% at 50% 40%,rgb(60 48 34 / .12),rgb(46 37 26 / .38)); } img{max-width:100%;display:block} a{color:inherit} :focus-visible{outline:2px solid var(--wp--preset--color--burgundy);outline-offset:3px;border-radius:4px} /* Lembar kertas. WordPress membungkus seluruh isi template dalam .wp-site-blocks, jadi pembungkus itulah lembarnya. */ .wp-site-blocks{ position:relative;z-index:1; background:var(--wp--preset--color--kertas); max-width:var(--wp--custom--lebar-lembar); margin:16px auto; border-radius:var(--wp--custom--radius--lembar); padding:0 clamp(16px,3.2vw,48px) var(--wp--preset--spacing--jarak-4); overflow:clip; box-shadow:var(--wp--preset--shadow--lembar); } @media(max-width:720px){ .wp-site-blocks{margin:8px;border-radius:20px} } /* Lembar kertas ini kartu melayang: ada margin di keempat sisinya, sudutnya bulat, dan overflow:clip menahan apa pun di dalamnya. Bagus untuk isi halaman, celaka untuk panel menu, karena clip juga mengurung position:fixed sehingga panelnya cuma sebesar lembar, bukan sebesar layar. WordPress memasang has-modal-open di selama panel terbuka, jadi clip-nya dilepas sepanjang itu saja. Halamannya sendiri dikunci supaya yang di balik panel tidak ikut tergulir. */ html.has-modal-open{overflow:hidden} html.has-modal-open .wp-site-blocks{overflow:visible} /* ===== 2. Tipografi ===== */ /* Kelas .d dipakai untuk paragraf yang tampil sebagai teks display. Heading asli sudah diatur lewat elements.heading di theme.json. */ .d{ font-family:var(--wp--preset--font-family--display); font-style:italic;font-weight:400; color:var(--wp--preset--color--burgundy); margin:0;line-height:.98;letter-spacing:-.012em;text-wrap:balance; } .d-xxl{font-size:var(--wp--preset--font-size--display-xxl)} .d-xl{font-size:var(--wp--preset--font-size--display-xl)} .d-lg{font-size:var(--wp--preset--font-size--display-lg)} .d-md{font-size:var(--wp--preset--font-size--display-md)} .lbl{ font-size:var(--wp--preset--font-size--label);font-weight:700; letter-spacing:.22em;text-transform:uppercase; color:var(--wp--preset--color--tinta-samar);margin:0; } .lead{ font-size:var(--wp--preset--font-size--sedang);line-height:1.75; color:var(--wp--preset--color--tinta-lembut); max-width:52ch;margin:0;text-wrap:pretty; } /* ===== 3. Ikon ===== */ /* Dua jalur, sengaja. Kelas .ikon dipakai oleh SVG sprite yang dicetak functions.php, kelas .ik dipakai blok inti yang tidak bisa menampung SVG, misalnya butir daftar dan paragraf. */ .ikon{ width:14px;height:14px;flex:none;fill:none;stroke:currentColor; stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round; } [class*="ik-"]::before{ content:"";width:14px;height:14px;flex:none; background:currentColor; -webkit-mask:var(--ik) center/contain no-repeat; mask:var(--ik) center/contain no-repeat; } .ik-kalender{--ik:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.2' y='3.4' width='11.6' height='10.4' rx='1.6'/%3E%3Cpath d='M2.2 6.8h11.6M5.4 1.9v2.6M10.6 1.9v2.6'/%3E%3C/svg%3E")} .ik-jam{--ik:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='5.9'/%3E%3Cpath d='M8 4.5V8l2.5 1.7'/%3E%3C/svg%3E")} .ik-pin{--ik:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 14.4s5-4.3 5-7.7a5 5 0 0 0-10 0c0 3.4 5 7.7 5 7.7Z'/%3E%3Ccircle cx='8' cy='6.7' r='1.9'/%3E%3C/svg%3E")} .ik-orang{--ik:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='5.2' r='2.5'/%3E%3Cpath d='M3.1 13.7a4.9 4.9 0 0 1 9.8 0'/%3E%3C/svg%3E")} .ik-kotak{--ik:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.6 5.4 8 2.5l5.4 2.9v5.2L8 13.5l-5.4-2.9z'/%3E%3Cpath d='M2.6 5.4 8 8.3l5.4-2.9M8 8.3v5.2'/%3E%3C/svg%3E")} .ik-tas{--ik:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.2 5.4h7.6l.8 8.2H3.4z'/%3E%3Cpath d='M6 5.4a2 2 0 0 1 4 0'/%3E%3C/svg%3E")} .ik-foto{--ik:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.2' y='3.6' width='11.6' height='9.4' rx='1.6'/%3E%3Ccircle cx='6' cy='7' r='1.2'/%3E%3Cpath d='M2.6 12 6.4 8.6l2.3 2 2-1.7 2.6 2.4'/%3E%3C/svg%3E")} /* ===== 4. Pil, varian gaya blok tombol ===== */ .wp-block-button.is-style-pil > .wp-block-button__link, .wp-block-button.is-style-pil-isi > .wp-block-button__link, .wp-block-button.is-style-pil-rose > .wp-block-button__link{ position:relative;z-index:0; display:inline-flex;align-items:center;gap:12px; max-width:max-content; padding:12px 20px; white-space:nowrap; border:1px solid var(--wp--preset--color--tinta); border-radius:var(--wp--custom--radius--pil); font-family:var(--wp--preset--font-family--teks); font-size:var(--wp--preset--font-size--label);font-weight:700; letter-spacing:.18em;text-transform:uppercase; text-decoration:none; color:var(--wp--preset--color--tinta); background:transparent;overflow:hidden; transition:color .4s var(--wp--custom--lengkung--halus),border-color .4s; } /* sapuan yang naik dari bawah waktu kursor lewat */ .wp-block-button.is-style-pil > .wp-block-button__link::before, .wp-block-button.is-style-pil-isi > .wp-block-button__link::before, .wp-block-button.is-style-pil-rose > .wp-block-button__link::before{ content:"";position:absolute;inset:0;z-index:-1; background:var(--wp--preset--color--tinta); transform:translateY(101%); transition:transform .5s var(--wp--custom--lengkung--halus); } .wp-block-button.is-style-pil > .wp-block-button__link:hover::before, .wp-block-button.is-style-pil > .wp-block-button__link:focus-visible::before, .wp-block-button.is-style-pil-isi > .wp-block-button__link:hover::before, .wp-block-button.is-style-pil-isi > .wp-block-button__link:focus-visible::before, .wp-block-button.is-style-pil-rose > .wp-block-button__link:hover::before, .wp-block-button.is-style-pil-rose > .wp-block-button__link:focus-visible::before{ transform:translateY(0); } .wp-block-button.is-style-pil > .wp-block-button__link:hover, .wp-block-button.is-style-pil > .wp-block-button__link:focus-visible{ color:var(--wp--preset--color--kertas); } /* panah sudut kanan atas, ikut bergerak waktu hover */ .wp-block-button.is-style-pil > .wp-block-button__link::after, .wp-block-button.is-style-pil-isi > .wp-block-button__link::after, .wp-block-button.is-style-pil-rose > .wp-block-button__link::after{ content:"";width:12px;height:12px;flex:none;position:relative;z-index:1; background:currentColor; --ik:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Cpath d='M1 11L11 1M11 1H3.5M11 1V8.5'/%3E%3C/svg%3E"); -webkit-mask:var(--ik) center/contain no-repeat; mask:var(--ik) center/contain no-repeat; transition:transform .45s var(--wp--custom--lengkung--halus); } .wp-block-button.is-style-pil > .wp-block-button__link:hover::after, .wp-block-button.is-style-pil-isi > .wp-block-button__link:hover::after, .wp-block-button.is-style-pil-rose > .wp-block-button__link:hover::after{ transform:translate(4px,-4px); } /* pil isi: latar tinta, sapuannya burgundy */ .wp-block-button.is-style-pil-isi > .wp-block-button__link{ background:var(--wp--preset--color--tinta); color:var(--wp--preset--color--kertas); border-color:var(--wp--preset--color--tinta); } .wp-block-button.is-style-pil-isi > .wp-block-button__link::before{ background:var(--wp--preset--color--burgundy); } .wp-block-button.is-style-pil-isi > .wp-block-button__link:hover, .wp-block-button.is-style-pil-isi > .wp-block-button__link:focus-visible{ color:#fff;border-color:var(--wp--preset--color--burgundy); } /* pil rose: garis dan teks rose, sapuannya burgundy */ .wp-block-button.is-style-pil-rose > .wp-block-button__link{ border-color:var(--wp--preset--color--rose-tua); color:var(--wp--preset--color--rose-teks); } .wp-block-button.is-style-pil-rose > .wp-block-button__link::before{ background:var(--wp--preset--color--burgundy); } .wp-block-button.is-style-pil-rose > .wp-block-button__link:hover, .wp-block-button.is-style-pil-rose > .wp-block-button__link:focus-visible{ color:var(--wp--preset--color--kertas);border-color:var(--wp--preset--color--burgundy); } /* ===== 5. Bar atas ===== */ .bar, header.wp-block-template-part{ position:sticky;top:0;z-index:60; display:flex;align-items:center;justify-content:space-between; gap:var(--wp--preset--spacing--jarak-3); padding:clamp(24px,2.6vw,40px) 0 var(--wp--preset--spacing--jarak-3); background:linear-gradient(var(--wp--preset--color--kertas) 66%,rgb(251 247 240 / 0)); } .bar .wp-block-site-logo img, .bar .mark img{height:clamp(40px,3.6vw,52px);width:auto} /* Tombol kanan tidak boleh ikut menyusut. Kalau dibiarkan, di layar sempit dia diperas sampai teksnya pecah per suku kata dan pilnya jadi bulat. */ .bar > .wp-block-buttons, .bar .wp-block-buttons{flex:0 0 auto} .bar .wp-block-buttons .wp-block-button{flex:0 0 auto} .bar .wp-block-site-logo a{display:block;line-height:0} .bar .wp-block-navigation{ display:flex;gap:clamp(16px,2vw,32px); } .bar .wp-block-navigation .wp-block-navigation__container{ gap:clamp(16px,2vw,32px); } .bar .wp-block-navigation a{ font-size:var(--wp--preset--font-size--label);font-weight:700; letter-spacing:.2em;text-transform:uppercase; color:var(--wp--preset--color--tinta-lembut); text-decoration:none;position:relative;padding-bottom:4px; } .bar .wp-block-navigation a::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:1px; background:var(--wp--preset--color--burgundy); transform:scaleX(0);transform-origin:right; transition:transform .45s var(--wp--custom--lengkung--halus); } .bar .wp-block-navigation a:hover{color:var(--wp--preset--color--tinta)} .bar .wp-block-navigation a:hover::after{transform:scaleX(1);transform-origin:left} /* Blok Navigation bawaan menukar menu penuh dengan tombol burger di 600px. Prototipenya menukar di 900px, jadi pita 600 sampai 900 dipaksa balik ke burger. Batas bawahnya 600, sama persis dengan batas aturan inti, supaya tidak ada satu piksel pun yang lolos. Selector diberi .bar supaya menang. */ @media(max-width:900px){ .bar .wp-block-navigation:not(.is-responsive){display:none} } @media(min-width:600px) and (max-width:900px){ .bar .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open){ display:none; } .bar .wp-block-navigation__responsive-container-open:not(.always-shown){ display:flex; } } /* Menu layar kecil. Susunannya ikut prototipe: logo di kiri, lalu Hubungi kami dan Menu berdampingan di kanan. Di DOM urutannya logo, menu, tombol, jadi dua yang terakhir ditukar lewat order. Panel menunya menutup penuh. Blok Navigation bawaan memakai position:fixed inset:0, tapi lembar kertas .wp-site-blocks memakai overflow:clip dan itu mengurung elemen fixed di dalamnya, hasilnya panel setinggi 94px yang isinya harus digulir. Diubah jadi absolute terhadap .bar yang memang sticky di puncak layar. */ @media(max-width:900px){ .bar{gap:var(--wp--preset--spacing--jarak-2)} .bar > .wp-block-site-logo, .bar > .mark{order:1;margin-right:auto;flex:0 0 auto} .bar > .wp-block-buttons{order:2;flex:0 0 auto} /* position:static wajib. Blok Navigation memasang position:relative pada dirinya sendiri, dan panel di bawah ini absolute. Kalau dibiarkan, panelnya mengukur diri terhadap tombol burger yang cuma selebar 114px. */ .bar .wp-block-navigation{order:3;flex:0 0 auto;position:static} /* tombol burger dibentuk jadi pil, sebaris dengan tombol di sebelahnya */ .bar .wp-block-navigation__responsive-container-open{ display:inline-flex;align-items:center;gap:8px; padding:12px 16px;margin:0; border:1px solid var(--wp--preset--color--tinta); border-radius:var(--wp--custom--radius--pil); background:transparent;color:var(--wp--preset--color--tinta); font-family:var(--wp--preset--font-family--teks); font-size:var(--wp--preset--font-size--label);font-weight:700; letter-spacing:.18em;text-transform:uppercase;white-space:nowrap; transition:background .4s var(--wp--custom--lengkung--halus),color .4s; } .bar .wp-block-navigation__responsive-container-open::before{content:"Menu"} .bar .wp-block-navigation__responsive-container-open:hover, .bar .wp-block-navigation__responsive-container-open:focus-visible{ background:var(--wp--preset--color--tinta); color:var(--wp--preset--color--kertas); } .bar .wp-block-navigation__responsive-container-open svg{ width:16px;height:16px;fill:currentColor; } /* Menu terbuka menutup satu layar penuh, bukan kartu melayang. Ukurannya diambil dari viewport lewat position:fixed inset:0, bukan ditebak dari padding lembar. Versi sebelumnya memakai absolute dengan inset negatif seukuran padding, dan angkanya meleset di perangkat yang paddingnya jatuh di clamp yang berbeda: panelnya berhenti beberapa piksel dari tepi, lalu sudutnya ikut dibulatkan oleh lembar yang mengurungnya. Syaratnya cuma satu, clip pada lembar dilepas, dan itu diurus oleh aturan html.has-modal-open di atas. */ .bar .wp-block-navigation__responsive-container.is-menu-open{ position:fixed;inset:0; width:auto;min-width:0;height:auto;min-height:0;max-height:none; overflow:auto;z-index:90; display:flex;align-items:center; padding:clamp(72px,16vw,120px) clamp(28px,8vw,64px); background:var(--wp--preset--color--kertas); border:0;border-radius:0;box-shadow:none; } .bar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close, .bar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog{ max-width:none;width:100%;padding:0;margin:0; } .bar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content{ display:block;width:100%;padding:0; } .bar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container{ display:flex;flex-direction:column;align-items:stretch; gap:clamp(8px,1.6vw,12px); } /* di layar penuh judulnya boleh besar, pakai serif display seperti hero */ .bar .wp-block-navigation__responsive-container.is-menu-open a{ display:block;width:100%;padding:8px 0; font-family:var(--wp--preset--font-family--display); font-style:italic;font-weight:400;text-transform:none; font-size:clamp(30px,9vw,54px);line-height:1.06;letter-spacing:-.02em; color:var(--wp--preset--color--tinta);text-decoration:none;text-align:left; transition:color .3s; } .bar .wp-block-navigation__responsive-container.is-menu-open a:hover, .bar .wp-block-navigation__responsive-container.is-menu-open a:focus-visible{ color:var(--wp--preset--color--burgundy); } .bar .wp-block-navigation__responsive-container.is-menu-open a::after{content:none} /* Tautan menu selebar baris, jadi cincin fokus di sekelilingnya terbaca sebagai kotak membulat yang tertinggal, bukan sebagai penanda fokus. Yang memunculkannya bukan pengguna: begitu panel dibuka, focus trap blok Navigation langsung memindahkan fokus ke item PERTAMA, jadi kotaknya muncul di 'Tentang' tanpa ada yang menyentuhnya. Percobaan sebelumnya menaruh peredam ini di dalam @media(hover:none),(pointer:coarse), jadi tidak pernah kena pengguna mouse. Bukan kalah spesifisitas, kalah CAKUPAN. Sekarang :focus telanjang diredam di semua perangkat, dan cincinnya dikembalikan khusus untuk :focus-visible supaya navigasi keyboard tetap punya penanda yang terlihat (WCAG 2.4.7). Gayanya disamakan dengan :focus-visible global di bagian 1. */ .bar .wp-block-navigation__responsive-container.is-menu-open a:focus{ outline:none; } .bar .wp-block-navigation__responsive-container.is-menu-open a:focus-visible{ outline:2px solid var(--wp--preset--color--burgundy); outline-offset:3px;border-radius:4px; } /* Di layar sentuh tidak ada kursor yang menggantung, jadi sesudah diketuk yang tertinggal cuma warna teksnya. */ @media(hover:none),(pointer:coarse){ .bar .wp-block-navigation__responsive-container.is-menu-open a:focus, .bar .wp-block-navigation__responsive-container.is-menu-open a:active{ color:var(--wp--preset--color--burgundy); } } /* tombol tutup duduk di sudut kanan atas, sejajar tempat tombol Hubungi kami */ .bar .wp-block-navigation__responsive-container-close{ position:fixed;top:clamp(24px,5vw,40px);right:clamp(24px,6vw,56px);z-index:2; width:44px;height:44px;display:grid;place-items:center; color:var(--wp--preset--color--tinta); } .bar .wp-block-navigation__responsive-container-close svg{width:26px;height:26px} } /* Ponsel dipegang mendatar. Padding panel dan ukuran item dikunci ke LEBAR (16vw dan 9vw), jadi di layar yang lebar tapi pendek dua duanya justru membesar tepat saat ruangnya menyempit: di 844x390 isinya menjumlah 403 sementara ruang yang tersisa cuma 150, jadi dua item terakhir harus digulir. Dipisah lewat ambang TINGGI, bukan dengan mengutak atik 16vw dan 9vw, supaya potret tidak bisa ikut bergeser sama sekali. 390x844 dan 768x1024 tidak memenuhi max-height:520px, jadi keduanya tidak pernah menyentuh blok ini. Tombol tutup ikut naik ke 8 supaya tidak bertumpuk dengan item pertama: dia setinggi 44, jadi berhenti di 52, sementara isi mulai di 56. */ @media(max-width:900px) and (max-height:520px){ .bar .wp-block-navigation__responsive-container.is-menu-open{ padding:56px clamp(28px,8vw,64px) 24px; } .bar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container{ gap:4px; } .bar .wp-block-navigation__responsive-container.is-menu-open a{ font-size:40px; } .bar .wp-block-navigation__responsive-container-close{top:8px} } /* Di layar paling sempit label Menu dibuang, sisakan ikonnya saja, supaya tombol Hubungi kami tetap kebagian ruang. */ @media(max-width:480px){ .bar .wp-block-navigation__responsive-container-open{padding:12px 16px} .bar .wp-block-navigation__responsive-container-open::before{content:none} } /* ===== 6. Hero ===== */ /* Jarak bar ke judul itu jumlah TIGA nilai, bukan dua: kaki bar 24, blockGap lembar 24 (styles.spacing.blockGap = jarak-3, dicetak jadi margin-top main), lalu kepala hero. Dengan jarak-5 totalnya 112 dan terbaca menganga di desktop. jarak-2 membawanya ke 64. Layar sempit punya aturannya sendiri di bawah. */ .hero{position:relative;padding:var(--wp--preset--spacing--jarak-2) 0 0} .hero-atas{ display:flex;align-items:flex-end;justify-content:space-between; gap:var(--wp--preset--spacing--jarak-4);flex-wrap:wrap-reverse; } .hero-aksi{display:flex;gap:12px;flex-wrap:wrap;padding-bottom:8px} .hero-aksi .wp-block-button{margin:0} .hero-judul{text-align:right} .hero-judul .lbl{text-align:right;margin-bottom:16px} .hero h1,.hero .d-xxl{text-align:right;max-width:16ch;margin-left:auto} /* Susunan dua kolom cuma masuk akal kalau pil dan judul benar benar berdampingan. Di bawah 1280px judulnya sudah memakan satu baris penuh, jadi semuanya dirata kiri. Perhatikan flex:0 0 auto pada hero-judul: di mode column-reverse, flex-basis membaca tinggi, bukan lebar. */ @media(max-width:1280px){ .hero-atas{ flex-direction:column-reverse;align-items:flex-start; gap:var(--wp--preset--spacing--jarak-4);flex-wrap:nowrap; } .hero-judul{flex:0 0 auto;width:100%;text-align:left} .hero-judul .lbl{text-align:left} .hero h1,.hero .d-xxl{text-align:left;margin-left:0;max-width:22ch} .hero-aksi{padding-bottom:0} } @media(max-width:560px){ .hero h1,.hero .d-xxl{max-width:none} } /* Di layar lebar jarak besar antara bar dan judul itu ruang bernapas. Di layar sempit jadi lubang: bar dan judul sama sama rata kiri dan selebar layar, jadi yang terlihat cuma satu bidang kosong sebelum halamannya mulai. Hitungannya 16 di kaki bar, 24 dari blockGap lembar, 8 di kepala hero. */ @media(max-width:900px){ .bar, header.wp-block-template-part{padding-bottom:16px} .hero{padding-top:8px} } /* Panggung, dibangun dari blok Cover supaya fotonya bisa diganti dari editor. */ .panggung{ position:relative;margin-top:var(--wp--preset--spacing--jarak-3); border-radius:var(--wp--custom--radius--besar);overflow:hidden; aspect-ratio:16/9;min-height:0; background:var(--wp--preset--color--kertas-tua); } .panggung > .wp-block-image{ position:absolute;inset:0;z-index:0;margin:0;border-radius:0;overflow:hidden; } .panggung .wp-block-cover__image-background, .panggung > .wp-block-image img, .panggung > img{width:100%;height:100%;object-fit:cover;border-radius:0} .panggung .wp-block-cover__background{display:none} .panggung::after{ content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background: linear-gradient(96deg,rgb(19 14 9 / .88) 0%,rgb(19 14 9 / .84) 24%,rgb(19 14 9 / .66) 40%, rgb(19 14 9 / .38) 55%,rgb(19 14 9 / .14) 70%,rgb(19 14 9 / 0) 86%), linear-gradient(0deg,rgb(19 14 9 / .32),rgb(19 14 9 / 0) 46%); } .panggung > .wp-block-cover__inner-container{ position:static;width:100%;height:100%;padding:0; } .panggung-teks{ position:absolute;left:clamp(24px,3.4vw,56px);top:50%;translate:0 -50%;z-index:2; width:min(34ch,40%);color:var(--wp--preset--color--kertas); } .panggung-teks h2,.panggung-teks .d{ margin:0;font-family:var(--wp--preset--font-family--teks);font-style:normal; font-weight:500;font-size:clamp(23px,2.4vw,38px); line-height:1.2;letter-spacing:-.028em; color:var(--wp--preset--color--kertas);text-wrap:balance; } .panggung-teks p:last-child{ margin-top:16px;font-size:var(--wp--preset--font-size--kecil);line-height:1.65; color:var(--wp--preset--color--kertas); } @media(max-width:640px){ .panggung{aspect-ratio:4/5} .panggung-teks{ top:auto;bottom:clamp(16px,5vw,32px);translate:0 0; right:clamp(20px,5vw,32px);max-width:none;width:auto; } } /* Kartu sesi terdekat yang menempel di foto */ .kartu-sesi{ position:absolute;right:clamp(16px,2.4vw,32px);bottom:clamp(16px,2.4vw,32px);z-index:3; width:min(296px,74vw); background:rgb(251 247 240 / .93);backdrop-filter:blur(9px); border-radius:var(--wp--custom--radius--besar);padding:28px; border:1px solid rgb(94 29 29 / .1); box-shadow:var(--wp--preset--shadow--kartu); } .kartu-sesi .lbl{ display:flex;align-items:center;gap:8px; color:var(--wp--preset--color--kraft);letter-spacing:.16em; } .kartu-sesi h2,.kartu-sesi .kartu-sesi-judul{ font-family:var(--wp--preset--font-family--teks);font-style:normal; font-size:17px;font-weight:700;letter-spacing:-.015em; margin:16px 0 0;line-height:1.32;color:var(--wp--preset--color--tinta); } .kartu-sesi p{font-size:var(--wp--preset--font-size--mikro);color:var(--wp--preset--color--tinta-lembut)} .kartu-sesi .wp-block-buttons{margin-top:24px} .kartu-sesi .aksi > .wp-block-button__link, .kartu-sesi a.aksi{ display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%; padding:12px 16px;border:0;border-radius:var(--wp--custom--radius--kecil); background:var(--wp--preset--color--burgundy);color:var(--wp--preset--color--kertas); text-decoration:none; font-size:var(--wp--preset--font-size--label);font-weight:700; letter-spacing:.18em;text-transform:uppercase; transition:background .4s;max-width:none; } .kartu-sesi .aksi > .wp-block-button__link:hover, .kartu-sesi .aksi > .wp-block-button__link:focus-visible, .kartu-sesi a.aksi:hover,.kartu-sesi a.aksi:focus-visible{ background:var(--wp--preset--color--tinta); } /* Ikon WhatsApp digambar lewat mask, bukan SVG di markup, supaya tombolnya tetap blok Button biasa yang masih bisa disunting dari editor. */ .kartu-sesi .aksi > .wp-block-button__link::after, .kartu-sesi a.aksi::after{ content:"";width:15px;height:15px;flex:none;background:currentColor; --wa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.47 14.38c-.3-.15-1.76-.87-2.03-.97-.27-.1-.47-.15-.67.15-.2.3-.77.97-.94 1.17-.17.2-.35.22-.65.07-.3-.15-1.26-.46-2.4-1.48-.89-.79-1.49-1.77-1.66-2.07-.17-.3-.02-.46.13-.61.13-.13.3-.35.45-.52.15-.17.2-.3.3-.5.1-.2.05-.37-.02-.52-.08-.15-.67-1.61-.92-2.21-.24-.58-.49-.5-.67-.51h-.57c-.2 0-.52.07-.79.37-.27.3-1.04 1.02-1.04 2.48s1.06 2.88 1.21 3.08c.15.2 2.1 3.2 5.08 4.49.71.31 1.26.49 1.69.62.71.23 1.36.19 1.87.12.57-.09 1.76-.72 2.01-1.41.25-.7.25-1.29.17-1.42-.07-.12-.27-.2-.57-.35z'/%3E%3Cpath d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.46 1.32 4.96L2 22l5.25-1.38a9.87 9.87 0 0 0 4.79 1.22h.01c5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.14-2.9-7.01A9.82 9.82 0 0 0 12.04 2zm0 18.13h-.01a8.2 8.2 0 0 1-4.18-1.15l-.3-.18-3.11.82.83-3.04-.2-.31a8.19 8.19 0 0 1-1.26-4.36c0-4.54 3.7-8.23 8.24-8.23 2.2 0 4.27.86 5.82 2.42a8.18 8.18 0 0 1 2.41 5.82c0 4.54-3.69 8.21-8.24 8.21z'/%3E%3C/svg%3E"); -webkit-mask:var(--wa) center/contain no-repeat; mask:var(--wa) center/contain no-repeat; transition:transform .45s var(--wp--custom--lengkung--halus); } .kartu-sesi .aksi > .wp-block-button__link:hover::after, .kartu-sesi a.aksi:hover::after{transform:translateX(3px)} /* Di bawah 760px kartunya turun jadi blok biasa. Dia harus jadi saudara .panggung, bukan anaknya: .panggung punya overflow:hidden, jadi kartu yang di dalamnya hilang sama sekali begitu posisinya tidak lagi absolut. */ @media(max-width:760px){ .kartu-sesi{ position:relative;inset:auto;width:auto; margin-top:var(--wp--preset--spacing--jarak-2); backdrop-filter:none;background:var(--wp--preset--color--kertas); box-shadow:0 12px 30px rgb(36 28 20 / .12); } } /* Titik denyut di label kartu. */ .titik{ position:relative;width:8px;height:8px;border-radius:50%;flex:none; background:var(--wp--preset--color--burgundy); } .titik::after{ content:"";position:absolute;inset:0;border-radius:50%; background:var(--wp--preset--color--burgundy); } @media (prefers-reduced-motion: no-preference){ .titik::after{animation:denyut 2.4s cubic-bezier(.2,.6,.3,1) infinite} } @keyframes denyut{from{opacity:.55;scale:1}to{opacity:0;scale:2.8}} /* Kartu sesi ditempel selotip washi. Selotip washi ada di hampir semua foto dokumentasi TJR, jadi ini bahasa yang sudah mereka pakai sendiri. Fungsinya dua: menandai kartu ini sebagai sesuatu yang sengaja ditempel, dan menarik mata tanpa perlu panah atau teks tambahan. */ .kartu-sesi{rotate:-1.1deg} .kartu-sesi::before,.kartu-sesi::after{ content:"";position:absolute;z-index:4; height:clamp(19px,1.9vw,24px);border-radius:2px; box-shadow:0 2px 7px rgb(36 28 20 / .22), inset 0 0 0 1px rgb(255 255 255 / .3); } /* selotip kiri: garis miring tipis, warna rose */ .kartu-sesi::before{ width:clamp(62px,6.6vw,88px);top:-8px;left:-16px;rotate:-24deg; background: repeating-linear-gradient(58deg,rgb(255 255 255 / .34) 0 2px,rgb(255 255 255 / 0) 2px 7px), rgb(231 191 185 / .88); } /* selotip kanan: titik titik halus, warna kraft muda */ .kartu-sesi::after{ width:clamp(54px,5.8vw,76px);top:-12px;right:-12px;rotate:19deg; background: radial-gradient(rgb(255 255 255 / .42) 1px,rgb(255 255 255 / 0) 1.6px) 0 0/7px 7px, rgb(214 186 146 / .9); } @media (prefers-reduced-motion: no-preference){ .kartu-sesi{animation:apung 5.5s ease-in-out 2.6s infinite alternate} } @keyframes apung{from{translate:0 0;rotate:-1.1deg}to{translate:0 -5px;rotate:-.4deg}} @media(max-width:760px){ .kartu-sesi{rotate:-.6deg} .kartu-sesi::before{left:-8px;top:-8px} .kartu-sesi::after{right:-8px;top:-12px} } /* Daftar baris berikon di dalam kartu sesi. Jaraknya ditulis lewat .kartu-sesi .baris, bukan .baris saja. WordPress memasang sendiri margin-block-start untuk tiap anak langsung layout flow lewat .wp-block-group.is-layout-flow > * yang berbobot dua kelas, jadi .baris sendirian kalah dan margin 20px-nya dulu hilang tanpa jejak. */ .baris{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px} /* Judul acara ke baris fakta pertama diberi jeda lebih besar daripada jarak antar baris, supaya judulnya kebaca sebagai kepala, bukan baris pertama. */ .kartu-sesi .baris{margin-top:28px} .baris li,.baris > p{ display:flex;align-items:center;gap:12px;margin:0; font-size:var(--wp--preset--font-size--kecil);line-height:1.4; color:var(--wp--preset--color--tinta-lembut); } .baris li::before,.baris > p::before{color:var(--wp--preset--color--kraft)} .baris .ikon{color:var(--wp--preset--color--kraft)} /* ===== 7. Dua kolom pengantar ===== */ .duo{ display:grid;grid-template-columns:1.15fr .85fr; gap:var(--wp--preset--spacing--jarak-5);align-items:start; margin-top:var(--wp--preset--spacing--jarak-6); } .duo > *{min-width:0} .duo-kanan{ display:flex;flex-direction:column;align-items:flex-start; gap:var(--wp--preset--spacing--jarak-3);padding-top:8px; } @media(max-width:900px){ .duo{grid-template-columns:1fr;gap:var(--wp--preset--spacing--jarak-3); margin-top:var(--wp--preset--spacing--jarak-5)} } .pasangan{ position:relative; display:grid;grid-template-columns:1.32fr .68fr; gap:var(--wp--preset--spacing--jarak-2); margin-top:var(--wp--preset--spacing--jarak-4); } .pasangan > *{min-width:0} /* Cetakan polaroid cuma diselipkan di atas pasangan ini, bentuknya sendiri. Tanpa :not(), dia ikut dipaksa jadi kotak 4/3 dengan object-fit cover. */ .pasangan > figure:not(.cetakan), .pasangan > .wp-block-image:not(.cetakan){ margin:0;border-radius:var(--wp--custom--radius--besar);overflow:hidden; background:var(--wp--preset--color--kertas-tua); } .pasangan > .wp-block-image:not(.cetakan) img{ width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;border-radius:0; } .kutipan{ background:var(--wp--preset--color--rose); border-radius:var(--wp--custom--radius--besar); padding:clamp(24px,2.6vw,40px); display:flex;flex-direction:column;justify-content:flex-end;min-height:100%; } .kutipan .qm{ font-family:var(--wp--preset--font-family--display);font-style:italic; font-size:clamp(56px,5.6vw,88px);line-height:.55; color:var(--wp--preset--color--burgundy);opacity:.34; } .kutipan .d,.kutipan p{ color:var(--wp--preset--color--burgundy); margin-top:clamp(20px,2vw,32px); } @media(max-width:760px){ .pasangan{grid-template-columns:1fr} .pasangan .wp-block-image img{aspect-ratio:16/10} } /* ===== 8. Kepala seksi ===== */ .kepala{ position:relative;display:flex;align-items:flex-end;justify-content:space-between; gap:var(--wp--preset--spacing--jarak-3);flex-wrap:wrap; margin-bottom:var(--wp--preset--spacing--jarak-4); } .kepala > *{min-width:0} .kepala-tengah{ text-align:center;flex-direction:column;align-items:center;gap:12px; } .kepala-tengah .lead{margin-inline:auto;text-align:center;max-width:46ch} .seksi{margin-top:var(--wp--preset--spacing--jarak-7)} @media(max-width:900px){.seksi{margin-top:var(--wp--preset--spacing--jarak-6)}} .jarak-atas-besar{margin-top:var(--wp--preset--spacing--jarak-6)} /* ===== 9. Kartu acara ===== */ .kartu-kartu{ display:grid;grid-template-columns:repeat(3,1fr); gap:var(--wp--preset--spacing--jarak-2); } @media(max-width:900px){.kartu-kartu{grid-template-columns:1fr 1fr}} @media(max-width:600px){.kartu-kartu{grid-template-columns:1fr}} .kartu{ position:relative;display:block; border-radius:var(--wp--custom--radius--besar);overflow:hidden; text-decoration:none;color:inherit; background:var(--wp--preset--color--kertas-tua);isolation:isolate; min-width:0;margin:0;aspect-ratio:3/4; } .kartu > .wp-block-image{ position:absolute;inset:0;z-index:0;margin:0;border-radius:0;overflow:hidden; } .kartu .wp-block-cover__image-background, .kartu img{ width:100%;height:100%;object-fit:cover;border-radius:0; transition:transform .8s var(--wp--custom--lengkung--halus); } .kartu:hover .wp-block-cover__image-background, .kartu:hover img{transform:scale(1.055)} .kartu .wp-block-cover__background{display:none} .kartu > .wp-block-cover__inner-container{position:static;width:100%;height:100%;padding:0} .kartu::before{ content:"";position:absolute;inset:0 0 auto;height:44%;z-index:1;pointer-events:none; background:linear-gradient(rgb(36 28 20 / .5),transparent); } .kartu-judul{ position:absolute;left:20px;top:20px;right:20px;z-index:2; color:var(--wp--preset--color--kertas); font-family:var(--wp--preset--font-family--display);font-style:italic;font-weight:400; font-size:clamp(20px,1.8vw,26px);line-height:1.05;margin:0; text-shadow:0 2px 14px rgb(36 28 20 / .45); } .kartu-judul a{text-decoration:none;color:inherit} /* seluruh kartu jadi target klik, tapi tautannya tetap satu dan tetap kebaca */ .kartu-judul a::after{content:"";position:absolute;inset:0;z-index:4} .kaki-kartu{ position:absolute;left:0;right:0;bottom:0;z-index:3;padding:20px 20px 24px; background:var(--wp--preset--color--zaitun); color:var(--wp--preset--color--kertas-redup); transition:background .45s; } .kaki-kartu.kraft{background:var(--wp--preset--color--kraft)} .kaki-kartu.rose{background:var(--wp--preset--color--rose-tua)} /* Kartu di Query Loop dicetak dari satu cetakan yang sama, jadi warna strip kakinya tidak bisa diketik per kartu. Urutannya dipakai sebagai gantinya, supaya tiga kartu tetap zaitun, kraft, rose seperti di desain. */ .kartu-kartu > *:nth-child(2) .kaki-kartu{background:var(--wp--preset--color--kraft)} .kartu-kartu > *:nth-child(3) .kaki-kartu{background:var(--wp--preset--color--rose-tua)} .kartu-kartu > * .kartu:hover .kaki-kartu{background:var(--wp--preset--color--burgundy)} /* Acara tanpa foto. Tanpa ini kartunya jadi kotak abu tinggi yang kosong, karena rasio 3/4 tetap dipesan padahal tidak ada yang mengisinya. Kartunya dipendekkan dan scrim gelapnya dimatikan, jadi yang tersisa kertas krem dengan strip keterangan di bawah. Begitu fotonya diunggah, aturan ini berhenti berlaku dengan sendirinya. */ .kartu:not(:has(img)){aspect-ratio:auto;min-height:0;background:var(--wp--preset--color--kertas-tua)} .kartu:not(:has(img))::before{content:none} .kartu:not(:has(img)) .kaki-kartu{position:static;border-radius:0} .kartu:not(:has(img)) .kartu-judul{ position:static;padding:24px 20px 0;color:var(--wp--preset--color--tinta); text-shadow:none; } .kartu:hover .kaki-kartu{background:var(--wp--preset--color--burgundy)} .kaki-kartu .lbl{ display:flex;align-items:center;gap:8px; color:var(--wp--preset--color--kertas-redup); } .kaki-kartu .lbl::before,.kaki-kartu .mini::before{width:12px;height:12px;opacity:.85} .kaki-kartu p{ font-size:12.5px;line-height:1.6;margin-top:8px; color:var(--wp--preset--color--kertas-redup); } /* Baris kota berdiri sendiri di bawah ringkasan, bukan menempel di ekornya. Jaraknya dinaikkan dan diberi garis tipis supaya terbaca sebagai keterangan terpisah, bukan lanjutan kalimat. */ .kaki-kartu .mini{ display:flex;align-items:center;gap:8px; font-size:11px;line-height:1.5;letter-spacing:.01em; margin-top:16px;padding-top:12px; border-top:1px solid rgb(251 247 240 / .18); } /* ===== 10. Sesi terdekat, kartu besar ===== */ .sesi-terdekat{ display:grid;grid-template-columns:.82fr 1.18fr; border:1px solid var(--wp--preset--color--garis); border-radius:var(--wp--custom--radius--besar);overflow:hidden; background:var(--wp--preset--color--kertas); } .sesi-terdekat > *{min-width:0} .sesi-foto{ position:relative;min-height:100%;margin:0; background:var(--wp--preset--color--kertas-tua); } .sesi-foto > .wp-block-image{position:absolute;inset:0;margin:0;border-radius:0;overflow:hidden} .sesi-foto img{width:100%;height:100%;object-fit:cover;display:block;border-radius:0} .sesi-tag{ position:absolute;left:0;top:24px;z-index:2;padding:8px 16px; border-top-right-radius:var(--wp--custom--radius--sedang); border-bottom-right-radius:var(--wp--custom--radius--sedang); background:var(--wp--preset--color--burgundy); color:var(--wp--preset--color--kertas); font-size:var(--wp--preset--font-size--label);font-weight:700; letter-spacing:.2em;text-transform:uppercase;margin:0; } .sesi-isi{ padding:clamp(24px,3vw,48px); display:flex;flex-direction:column;align-items:flex-start;justify-content:center; gap:var(--wp--preset--spacing--jarak-2); } .sesi-isi .lead{max-width:46ch} .fakta{ display:grid;grid-template-columns:1fr 1fr; gap:16px var(--wp--preset--spacing--jarak-3); width:100%;margin:8px 0 0; padding-top:var(--wp--preset--spacing--jarak-3); border-top:1px solid var(--wp--preset--color--garis); } .fakta > *{min-width:0} .fakta .dt,.fakta dt{ display:flex;align-items:center;gap:8px;margin:0; font-size:var(--wp--preset--font-size--label);font-weight:700; letter-spacing:.2em;text-transform:uppercase; color:var(--wp--preset--color--tinta-samar); } .fakta .dt::before{width:12px;height:12px;color:var(--wp--preset--color--kraft)} .fakta .dd,.fakta dd{ margin:4px 0 0;font-size:14px;line-height:1.5; color:var(--wp--preset--color--tinta); } /* Alamat menuju Google Maps. Garis bawahnya tipis supaya tidak berteriak, tapi cukup buat menandai bahwa ini bisa diklik. */ .tempat{ color:inherit;text-decoration:none; border-bottom:1px solid var(--wp--preset--color--rose);padding-bottom:4px; transition:border-color .35s,color .35s; } .tempat:hover,.tempat:focus-visible{ color:var(--wp--preset--color--burgundy); border-color:var(--wp--preset--color--burgundy); } .slot{ width:100%;height:4px;background:var(--wp--preset--color--garis); border-radius:2px;overflow:hidden;margin-top:var(--wp--preset--spacing--jarak-3); } .slot i{display:block;height:100%;width:var(--p,0%);background:var(--wp--preset--color--burgundy);border-radius:2px} .slot-catatan{font-size:12.5px;color:var(--wp--preset--color--tinta-lembut)} @media(max-width:900px){ .sesi-terdekat{grid-template-columns:1fr} .sesi-foto{aspect-ratio:16/10;min-height:0} .fakta{grid-template-columns:1fr 1fr;gap:16px var(--wp--preset--spacing--jarak-2)} } @media(max-width:520px){.fakta{grid-template-columns:1fr}} /* ===== 11. Bento galeri ===== */ /* tinggi baris dikunci lewat tinggi kontainer, jadi foto potret tidak menarik petaknya ke bawah dan setiap strip judul kelihatan tanpa perlu scroll */ .bento{ display:grid;gap:var(--wp--preset--spacing--jarak-2); grid-template-columns:repeat(4,1fr); grid-template-rows:1fr 1fr; height:var(--wp--custom--tinggi-bento); grid-template-areas: "a a b c" "a a d d"; } .bento > *{ position:relative;border-radius:var(--wp--custom--radius--besar);overflow:hidden; background:var(--wp--preset--color--kertas-tua); min-height:0;min-width:0;margin:0; } .bento .t1{grid-area:a} .bento .t2{grid-area:b} .bento .t3{grid-area:c} .bento .t4{grid-area:d} .bento img{ width:100%;height:100%;object-fit:cover;display:block;border-radius:0; transition:transform .9s var(--wp--custom--lengkung--halus); } .bento .t1 img{object-position:center 62%} .bento > *:hover img{transform:scale(1.05)} /* strip judul, dipakai figcaption blok Image supaya bisa diedit langsung */ .bento figcaption, .bento .wp-element-caption, .strip{ position:absolute;left:0;bottom:0;z-index:2;margin:0;padding:8px 16px; border-top-right-radius:var(--wp--custom--radius--sedang); background:var(--wp--preset--color--zaitun); color:var(--wp--preset--color--kertas); font-family:var(--wp--preset--font-family--display);font-style:italic; font-size:15px;line-height:1.2;text-align:left; transition:background .45s; } .bento .strip-kraft figcaption,.bento .strip-kraft .wp-element-caption,.strip.kraft{background:var(--wp--preset--color--kraft)} .bento .strip-rose figcaption,.bento .strip-rose .wp-element-caption,.strip.rose{background:var(--wp--preset--color--rose-tua)} .bento .strip-burgundy figcaption,.bento .strip-burgundy .wp-element-caption,.strip.burgundy{background:var(--wp--preset--color--burgundy)} .bento > *:hover figcaption, .bento > *:hover .wp-element-caption{background:var(--wp--preset--color--tinta)} @media(max-width:820px){ .bento{ grid-template-columns:1fr 1fr;grid-template-rows:auto;height:auto; grid-template-areas:"a a" "b c" "d d"; } .bento .t1{aspect-ratio:4/3} .bento .t2,.bento .t3{aspect-ratio:1} .bento .t4{aspect-ratio:16/9} } /* ===== 12. Cetakan polaroid dan tumpukannya ===== */ .cetakan{ position:absolute;z-index:5;margin:0; width:var(--w,clamp(92px,9.5vw,132px)); background:var(--wp--preset--color--kertas); padding:8px 8px 28px;border-radius:var(--wp--custom--radius--cetakan); rotate:var(--rot,-7deg); box-shadow:var(--wp--preset--shadow--cetakan); transition:rotate .6s var(--wp--custom--lengkung--halus), translate .6s var(--wp--custom--lengkung--halus); } .cetakan img{ width:100%;border-radius:var(--wp--custom--radius--cetakan); aspect-ratio:1;object-fit:cover; } /* Caption cetakan ditulis tangan, Pinyon Script. Tinggi huruf kecilnya jauh di bawah Playfair, jadi ukurannya dinaikkan sekitar satu setengah kali supaya terbaca di kartu selebar seratus piksel. */ .cetakan figcaption, .cetakan .wp-element-caption{ position:absolute;left:8px;right:8px;bottom:8px;text-align:center;margin:0; font-family:var(--wp--preset--font-family--tangan);font-style:normal; font-size:17px;line-height:1.25;letter-spacing:.01em; color:var(--wp--preset--color--tinta-lembut); white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .cetakan:hover{rotate:0deg;translate:0 -8px} @media(max-width:1100px){.cetakan.selip{display:none}} /* posisi cetakan yang diselipkan di antara seksi */ .cetakan.selip-hero{left:2.2%;top:calc(100% - 96px);--rot:-8deg;--w:clamp(96px,8.4vw,124px);z-index:6} .cetakan.selip-pasangan{right:3.5%;top:-32px;--rot:7deg;--w:clamp(96px,8.6vw,130px)} .cetakan.selip-kolaborator{right:2%;bottom:-48px;--rot:7deg;--w:clamp(96px,8.2vw,120px)} .cetakan.ajakan-1{left:37%;bottom:24px;--rot:-7deg} .cetakan.ajakan-2{left:50%;bottom:104px;--rot:6deg} /* Tumpukan cetakan. Posisi tiap cetakan diatur lewat custom property biar gampang digeser, dan waktu digulir mereka membuka dari satu tumpukan. */ .tumpukan{ position:relative;height:var(--wp--custom--tinggi-tumpukan); margin-top:var(--wp--preset--spacing--jarak-3); } .tumpukan .cetakan{ left:var(--x);top:var(--y); width:var(--pw,clamp(104px,10.5vw,164px)); } /* cetakan di tumpukan lebih besar dari yang diselipkan, jadi tulisan tangannya ikut dinaikkan dan alasnya diberi ruang lebih */ .tumpukan .cetakan{padding:8px 8px 32px} .tumpukan .cetakan figcaption, .tumpukan .cetakan .wp-element-caption{font-size:20px;bottom:8px} .tumpukan .cetakan:hover{z-index:20} .tumpukan .cetakan:nth-child(1){--x:2%;--y:18%;--rot:-9deg;--fx:26vw;--fy:8%} .tumpukan .cetakan:nth-child(2){--x:15%;--y:54%;--rot:6deg;--fx:18vw;--fy:-6%} .tumpukan .cetakan:nth-child(3){--x:27%;--y:6%;--rot:4deg;--fx:12vw;--fy:12%} .tumpukan .cetakan:nth-child(4){--x:38%;--y:44%;--rot:-6deg;--fx:6vw;--fy:-8%} .tumpukan .cetakan:nth-child(5){--x:50%;--y:12%;--rot:8deg;--fx:0vw;--fy:10%} .tumpukan .cetakan:nth-child(6){--x:60%;--y:56%;--rot:-4deg;--fx:-8vw;--fy:-6%} .tumpukan .cetakan:nth-child(7){--x:71%;--y:20%;--rot:7deg;--fx:-14vw;--fy:10%} .tumpukan .cetakan:nth-child(8){--x:81%;--y:50%;--rot:-8deg;--fx:-20vw;--fy:-8%} .tumpukan .cetakan:nth-child(9){--x:88%;--y:8%;--rot:5deg;--fx:-26vw;--fy:12%} @supports (animation-timeline: view()){ @media (prefers-reduced-motion: no-preference){ .tumpukan{view-timeline-name:--pile;view-timeline-axis:block} .tumpukan .cetakan{ animation:sebar linear both;animation-timeline:--pile; animation-range:entry 12% cover 52%; } } } @keyframes sebar{ from{translate:var(--fx) var(--fy);rotate:calc(var(--rot) * .18);opacity:0;scale:.86} to{translate:0 0;rotate:var(--rot);opacity:1;scale:1} } @media(max-width:820px){ .tumpukan{ height:auto;display:grid;grid-template-columns:repeat(3,1fr); gap:var(--wp--preset--spacing--jarak-2);view-timeline-name:none; } .tumpukan .cetakan{ position:static;width:100%;--rot:0deg;rotate:0deg!important; animation:none!important;translate:none!important;scale:1!important;opacity:1!important; } } @media(max-width:520px){.tumpukan{grid-template-columns:repeat(2,1fr)}} /* ===== 13. Baris arsip ===== */ .arsip{border-top:1px solid var(--wp--preset--color--garis)} .arsip-baris{ display:grid;grid-template-columns:150px 1fr auto auto; gap:var(--wp--preset--spacing--jarak-3);align-items:center; padding:var(--wp--preset--spacing--jarak-3) 8px; border-bottom:1px solid var(--wp--preset--color--garis); text-decoration:none;color:inherit; transition:background .4s,padding-inline .4s; } .arsip-baris > *{min-width:0;margin:0} .arsip-baris:hover{background:var(--wp--preset--color--kertas-tua);padding-inline:20px} .arsip-tahun{ font-size:var(--wp--preset--font-size--label);font-weight:700; letter-spacing:.2em;text-transform:uppercase; color:var(--wp--preset--color--tinta-samar); } .arsip-baris h3,.arsip-nama{ margin:0;font-family:var(--wp--preset--font-family--teks);font-style:normal; font-weight:500;font-size:clamp(17px,1.55vw,23px); letter-spacing:-.015em;color:var(--wp--preset--color--tinta); line-height:1.3;transition:color .35s; } .arsip-baris:hover h3,.arsip-baris:hover .arsip-nama{color:var(--wp--preset--color--burgundy)} .arsip-jumlah{ display:inline-flex;align-items:center;gap:8px; font-size:var(--wp--preset--font-size--label);font-weight:700; letter-spacing:.2em;text-transform:uppercase; color:var(--wp--preset--color--tinta-samar);white-space:nowrap; } .arsip-jumlah::before{width:12px;height:12px} .arsip-buka{ display:inline-flex;align-items:center;gap:8px; font-size:var(--wp--preset--font-size--label);font-weight:700; letter-spacing:.16em;text-transform:uppercase; color:var(--wp--preset--color--burgundy);white-space:nowrap; } .arsip-buka::after{ content:"";width:12px;height:12px;flex:none;background:currentColor; --ik:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Cpath d='M1 11L11 1M11 1H3.5M11 1V8.5'/%3E%3C/svg%3E"); -webkit-mask:var(--ik) center/contain no-repeat; mask:var(--ik) center/contain no-repeat; transition:transform .45s var(--wp--custom--lengkung--halus); } .arsip-baris:hover .arsip-buka::after{transform:translate(4px,-4px)} @media(max-width:820px){ .arsip-baris{grid-template-columns:1fr auto;gap:8px 16px; padding:var(--wp--preset--spacing--jarak-3) 8px} .arsip-tahun{grid-column:1/-1;order:-1} .arsip-baris h3,.arsip-nama{grid-column:1/-1} .arsip-jumlah{order:3} } /* ===== 14. Pita kolaborator ===== */ .logos{ display:grid;grid-template-columns:repeat(6,1fr);gap:1px; background:var(--wp--preset--color--garis); border:1px solid var(--wp--preset--color--garis); border-radius:var(--wp--custom--radius--besar);overflow:hidden; } .logos > *{ background:var(--wp--preset--color--kertas); display:grid;place-items:center;min-height:120px; padding:var(--wp--preset--spacing--jarak-3) var(--wp--preset--spacing--jarak-2); transition:background .4s;margin:0;border-radius:0; } .logos > *:hover{background:var(--wp--preset--color--kertas-tua)} .logos img{ max-width:120px;max-height:48px;width:auto;height:auto;object-fit:contain; opacity:.55;transition:opacity .45s;border-radius:0; } .logos > *:hover img{opacity:1} @media(max-width:1100px){.logos{grid-template-columns:repeat(4,1fr)}} @media(max-width:640px){ .logos{grid-template-columns:repeat(2,1fr)} .logos > *{min-height:98px} } /* ===== 15. Ajakan WhatsApp ===== */ .ajakan{ position:relative;margin-top:var(--wp--preset--spacing--jarak-7); background:var(--wp--preset--color--rose-pucat); border-radius:var(--wp--custom--radius--besar);overflow:hidden; display:grid;grid-template-columns:1fr 1.1fr;align-items:center; gap:var(--wp--preset--spacing--jarak-4); padding:clamp(32px,4vw,72px); } .ajakan > *{min-width:0} /* lengkung yang jadi ciri arah ini */ .ajakan::before{ content:"";position:absolute;left:-6%;top:-28%;width:66%;height:156%; background:var(--wp--preset--color--rose);border-radius:50%;z-index:0; } .ajakan-kiri{ position:relative;z-index:2;display:flex;flex-direction:column; align-items:flex-start;gap:var(--wp--preset--spacing--jarak-3); } .ajakan-kiri .lbl{color:var(--wp--preset--color--rose-teks)} .ajakan-kiri .lead{color:#5A4C3D} .ajakan-kanan{ position:relative;z-index:1;margin:0; border-radius:var(--wp--custom--radius--sedang);overflow:hidden;aspect-ratio:4/3; } .ajakan-kanan img{width:100%;height:100%;object-fit:cover;border-radius:0} @media(max-width:900px){ .ajakan{grid-template-columns:1fr} .ajakan::before{left:-30%;top:-42%;width:150%;height:96%} .ajakan .cetakan{display:none} } /* ===== 16. Kaki halaman ===== */ .kaki, footer.wp-block-template-part{ margin-top:var(--wp--preset--spacing--jarak-6); padding-top:var(--wp--preset--spacing--jarak-4); border-top:1px solid var(--wp--preset--color--garis); display:grid;grid-template-columns:1.25fr 1fr 1fr 1fr; gap:var(--wp--preset--spacing--jarak-4); } .kaki > *{min-width:0} .kaki .wp-block-site-logo img, .kaki .mark img{height:64px;width:auto;opacity:.92} .kaki ul{ list-style:none;margin:16px 0 0;padding:0; display:flex;flex-direction:column;gap:8px; } .kaki ul a{ font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:var(--wp--preset--color--tinta-lembut);text-decoration:none; transition:color .3s; } .kaki ul a:hover{color:var(--wp--preset--color--burgundy)} .kaki-bawah{ grid-column:1/-1; margin-top:var(--wp--preset--spacing--jarak-4); padding-top:var(--wp--preset--spacing--jarak-2); border-top:1px solid var(--wp--preset--color--garis); display:flex;justify-content:space-between; gap:var(--wp--preset--spacing--jarak-2);flex-wrap:wrap; } .kaki-bawah p{ font-size:var(--wp--preset--font-size--label);font-weight:700; letter-spacing:.2em;text-transform:uppercase; color:var(--wp--preset--color--tinta-samar); } @media(max-width:900px){ .kaki{grid-template-columns:1fr 1fr;gap:var(--wp--preset--spacing--jarak-3)} .kaki > *:first-child{grid-column:1/-1} } /* ===== 17. Tombol WhatsApp mengambang ===== */ .fab{ position:fixed;right:24px;bottom:24px;z-index:90; display:flex;align-items:center;gap:0;height:56px;padding:0 20px; border-radius:var(--wp--custom--radius--pil); background:var(--wp--preset--color--burgundy); color:var(--wp--preset--color--kertas); text-decoration:none;box-shadow:var(--wp--preset--shadow--mengambang); opacity:0;visibility:hidden;translate:0 14px; transition:opacity .5s,visibility .5s, translate .5s var(--wp--custom--lengkung--halus), background .4s,gap .45s,padding .45s; } .fab.tampil{opacity:1;visibility:visible;translate:0 0} .fab svg{width:24px;height:24px;flex:none} .fab span{ max-width:0;overflow:hidden;white-space:nowrap; font-size:var(--wp--preset--font-size--label);font-weight:700; letter-spacing:.18em;text-transform:uppercase; transition:max-width .55s var(--wp--custom--lengkung--halus); } .fab:hover,.fab:focus-visible{background:var(--wp--preset--color--tinta);gap:12px} .fab:hover span,.fab:focus-visible span{max-width:150px} @media(max-width:600px){.fab{right:16px;bottom:16px;height:52px;padding:0 16px}} /* ===== 18. Pembuka halaman ===== Tanpa pustaka animasi. Timeline dipegang Web Animations API, jadi tetap bisa diatur bertahap seperti GSAP tapi tambahan bobotnya nol. Semua keadaan awal dipasang lewat kelas .intro yang cuma ada kalau JS jalan, jadi tanpa JS halaman langsung tampil utuh. */ /* Sampulnya berputar pada sumbu kiri, persis seperti membuka jurnal. Yang bikin terbaca sebagai buku bukan rotasinya, tapi dua hal kecil: bayangan yang menggelap di sampul waktu dia berputar menjauh dari cahaya, dan bayangan jatuh di halaman yang menipis sambil terbuka. */ .tirai{ position:fixed;inset:0;z-index:400;display:none;pointer-events:none; perspective:1900px;perspective-origin:2% 50%; } html.intro .tirai{display:block} /* bayangan sampul yang jatuh di halaman */ .jatuh{ position:absolute;left:0;top:0;bottom:0;width:34vw;z-index:1;opacity:0; background:linear-gradient(90deg,rgb(26 18 9 / .5),rgb(26 18 9 / .16) 38%,rgb(26 18 9 / 0)); } .sampul{ position:absolute;inset:0;transform-origin:left center; transform-style:preserve-3d;backface-visibility:hidden;z-index:3; display:grid;place-items:center;will-change:transform; background: repeating-linear-gradient(94deg,rgb(120 92 58 / .05) 0 2px,rgb(120 92 58 / 0) 2px 5px), linear-gradient(102deg,#E9DAC1 0%,#F4ECDD 30%,#EADCC4 66%,#DCC9A8 100%); box-shadow:0 0 70px rgb(28 19 9 / .34); } .sampul img{ height:clamp(74px,9.4vw,140px);width:auto;opacity:0; filter:drop-shadow(0 1px 0 rgb(255 252 246 / .6)); } /* garis emboss tipis, bikin sampulnya terasa punya ketebalan */ .sampul::before{ content:"";position:absolute;inset:clamp(16px,2.4vw,32px); border:1px solid rgb(120 92 58 / .22);border-radius:4px; } /* bayangan yang menggelap waktu sampul berputar menjauh */ .sampul::after{content:"";position:absolute;inset:0;background:#20160B;opacity:0} @media(max-width:640px){.tirai{perspective:1100px}} html.intro .bar, html.intro .hero .lbl, html.intro .hero-aksi, html.intro .panggung, html.intro .kartu-sesi, html.intro .hero > .cetakan{opacity:0} html.intro .hero h1 .kata, html.intro .hero .d-xxl .kata{display:inline-block;overflow:hidden;vertical-align:bottom} html.intro .hero h1 .kata > i, html.intro .hero .d-xxl .kata > i{display:inline-block;font-style:italic;translate:0 106%} @media (prefers-reduced-motion: reduce){ html.intro .tirai{display:none} html.intro .bar,html.intro .hero .lbl,html.intro .hero-aksi,html.intro .panggung, html.intro .kartu-sesi,html.intro .hero > .cetakan{opacity:1} html.intro .hero h1 .kata > i, html.intro .hero .d-xxl .kata > i{translate:0 0} } /* ===== 19. Gerak masuk ===== */ @keyframes naik{from{opacity:0;translate:0 24px}to{opacity:1;translate:0 0}} @supports (animation-timeline: view()){ @media (prefers-reduced-motion: no-preference){ .naik{animation:naik linear both;animation-timeline:view();animation-range:entry 4% cover 24%} } } @media (prefers-reduced-motion: reduce){ .wp-block-button__link,.kartu img,.bento img{ transition:none!important;animation:none!important; } } /* ===== 20. Halaman isi biasa ===== */ /* Halaman tunggal, hasil pencarian, arsip blog, dan 404 memakai lebar baca yang lebih sempit supaya barisnya tidak terlalu panjang. */ .isi-halaman{ max-width:760px;margin-inline:auto; padding-block:var(--wp--preset--spacing--jarak-5) var(--wp--preset--spacing--jarak-6); } .isi-halaman h1,.isi-halaman h2,.isi-halaman h3{margin-block:var(--wp--preset--spacing--jarak-3) var(--wp--preset--spacing--jarak-2)} .isi-halaman p{margin-block:0 var(--wp--preset--spacing--jarak-2);color:var(--wp--preset--color--tinta-lembut)} .isi-halaman .wp-block-post-content p{line-height:1.8} .daftar-tulisan .wp-block-post-template{ display:grid;gap:var(--wp--preset--spacing--jarak-4);list-style:none;margin:0;padding:0; } .daftar-tulisan li{ padding-bottom:var(--wp--preset--spacing--jarak-3); border-bottom:1px solid var(--wp--preset--color--garis); } .wp-block-query-pagination{ margin-top:var(--wp--preset--spacing--jarak-4); font-size:var(--wp--preset--font-size--label);font-weight:700; letter-spacing:.2em;text-transform:uppercase; } .wp-block-search__button{border-radius:var(--wp--custom--radius--pil)} .wp-block-search__input{ border:1px solid var(--wp--preset--color--garis); border-radius:var(--wp--custom--radius--kecil); padding:12px 16px;background:var(--wp--preset--color--kertas); } /* Detail acara, kolom kanan berisi ringkasan fakta */ .acara-detail{ display:grid;grid-template-columns:1.18fr .82fr; gap:var(--wp--preset--spacing--jarak-5); margin-top:var(--wp--preset--spacing--jarak-5); align-items:start; } .acara-detail > *{min-width:0} .acara-samping{ border:1px solid var(--wp--preset--color--garis); border-radius:var(--wp--custom--radius--besar); padding:var(--wp--preset--spacing--jarak-3); background:var(--wp--preset--color--kertas); position:sticky;top:120px; } @media(max-width:900px){ .acara-detail{grid-template-columns:1fr} .acara-samping{position:static} } /* ===== 21. Alias varian gaya blok ===== register_block_style() memasang kelas berawalan is-style-, jadi tiap kelas polos yang dipakai pattern diberi pasangan is-style-nya di sini. */ .wp-block-image.is-style-cetakan{ position:absolute;z-index:5;margin:0; width:var(--w,clamp(92px,9.5vw,132px)); background:var(--wp--preset--color--kertas); padding:8px 8px 28px;border-radius:var(--wp--custom--radius--cetakan); rotate:var(--rot,-7deg); box-shadow:var(--wp--preset--shadow--cetakan); transition:rotate .6s var(--wp--custom--lengkung--halus), translate .6s var(--wp--custom--lengkung--halus); } .wp-block-image.is-style-cetakan img{ width:100%;border-radius:var(--wp--custom--radius--cetakan); aspect-ratio:1;object-fit:cover; } .wp-block-image.is-style-cetakan .wp-element-caption{ position:absolute;left:8px;right:8px;bottom:8px;text-align:center;margin:0; font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .wp-block-image.is-style-cetakan:hover{rotate:0deg;translate:0 -8px} .bento .is-style-strip-zaitun .wp-element-caption{background:var(--wp--preset--color--zaitun)} .bento .is-style-strip-kraft .wp-element-caption{background:var(--wp--preset--color--kraft)} .bento .is-style-strip-rose .wp-element-caption{background:var(--wp--preset--color--rose-tua)} .bento .is-style-strip-burgundy .wp-element-caption{background:var(--wp--preset--color--burgundy)} .wp-block-group.is-style-seksi{margin-top:var(--wp--preset--spacing--jarak-7)} @media(max-width:900px){.wp-block-group.is-style-seksi{margin-top:var(--wp--preset--spacing--jarak-6)}} .wp-block-group.is-style-kepala-tengah{ text-align:center;flex-direction:column;align-items:center;gap:12px; } .wp-block-group.is-style-kepala-tengah .lead{margin-inline:auto;text-align:center;max-width:46ch} /* ===== 22. Penyeimbang jarak blok ===== Layout alir bawaan WordPress memberi margin-block-start ke setiap anak. Di kontainer yang jaraknya sudah diatur grid atau flex, margin itu dibuang. */ .hero-atas > *,.hero-aksi > *,.hero-judul > *,.duo > *,.duo-kanan > *, .pasangan > *,.kepala > *,.kepala > * > *,.kartu-kartu > *,.bento > *, .logos > *,.arsip > *,.arsip-baris > *,.fakta > *,.fakta > * > *, .ajakan > *,.ajakan-kiri > *,.kaki > *,.kaki-bawah > *,.sesi-terdekat > *, .sesi-isi > *,.tumpukan > *,.panggung > *,.panggung-teks > *, .kartu-sesi > *,.kutipan > *{ margin-block-start:0;margin-block-end:0; } /* ===== 23. Jembatan ke blok dinamis ===== Blok Post Featured Image, Post Template, dan Post Title punya markup sendiri. Bagian ini menyambungkannya ke kelas tata letak yang sudah ada di atas. */ .panggung > .wp-block-post-featured-image, .kartu > .wp-block-post-featured-image, .sesi-foto > .wp-block-post-featured-image{ position:absolute;inset:0;z-index:0;margin:0;border-radius:0;overflow:hidden; } .panggung > .wp-block-post-featured-image img, .kartu > .wp-block-post-featured-image img, .sesi-foto > .wp-block-post-featured-image img{ width:100%;height:100%;object-fit:cover;border-radius:0; } .wp-block-post-template{list-style:none;margin:0;padding:0} .wp-block-post-template.kartu-kartu > li, .arsip .wp-block-post-template > li{margin:0;min-width:0} .wp-block-post-template.kartu-kartu > li{display:block} .arsip .wp-block-post-template{border-top:1px solid var(--wp--preset--color--garis)} .arsip-baris{position:relative} /* seluruh baris jadi target klik, tautannya tetap satu */ .arsip-baris .wp-block-post-title a::after{content:"";position:absolute;inset:0;z-index:1} .arsip-baris .wp-block-post-title a{text-decoration:none;color:inherit} .arsip-buka{position:relative;z-index:2} .kaki-kartu .wp-block-post-date, .kaki-kartu .wp-block-post-terms, .kaki-kartu .wp-block-post-excerpt{margin:0} .kaki-kartu .wp-block-post-excerpt p{ font-size:12.5px;line-height:1.55;margin:4px 0 0; color:var(--wp--preset--color--kertas-redup); } .kaki-kartu .wp-block-post-excerpt__more-text{display:none} .sesi-isi .wp-block-post-title{margin:0} .sesi-isi .wp-block-post-excerpt p{margin:0} .sesi-isi .wp-block-post-excerpt__more-text{display:none} .fakta .wp-block-post-date, .fakta .wp-block-post-terms{ margin:4px 0 0;font-size:14px;line-height:1.5;font-weight:400; letter-spacing:0;text-transform:none; color:var(--wp--preset--color--tinta); } /* Panggung tanpa teks di atasnya, dipakai halaman detail acara. Gradasi gelapnya dimatikan karena tidak ada teks yang perlu dinaungi. */ .panggung-polos::after{display:none} /* Pengantar pendek di kepala seksi arsip, dibatasi supaya barisnya tidak lebih panjang dari judul di sebelahnya. */ .lead-sempit{max-width:32ch;text-wrap:pretty}