/* variation.css — aturan visual per varian. Semua dikunci ke atribut data-v-* di yang ditanam builder. Nilainya deterministik dari hash(seed situs + post_type + slug), jadi satu artikel selalu dapat varian yang sama di setiap rebuild. Warna TIDAK diatur di sini — itu urusan tema / Brand DNA. File ini hanya mengatur bentuk, ritme, dan tata letak. */ /* ══════════════════════════════════════════════════════════════ HERO — hubungan gambar utama dengan judul Rule 1 (instant visual match) tidak pernah dilanggar: di semua varian gambar tetap berada di layar pertama. ══════════════════════════════════════════════════════════════ */ body[data-v-hero="split"] .article-hero{ display:grid; grid-template-columns:1.15fr 1fr; gap:26px; align-items:center; } body[data-v-hero="split"] .article-hero img{ border-radius:var(--v-radius,10px); } body[data-v-hero="stacked"] .article-hero img{ width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:var(--v-radius,10px); } body[data-v-hero="stacked"] .article-meta{ display:flex; gap:14px; flex-wrap:wrap; padding:12px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); margin-top:14px; } body[data-v-hero="full"] .article-hero img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--v-radius,10px); } @media(max-width:760px){ body[data-v-hero="split"] .article-hero{ grid-template-columns:1fr; gap:16px; } } /* ══════════════════════════════════════════════════════════════ HEADING — ritme visual antar section ══════════════════════════════════════════════════════════════ */ body[data-v-head="numbered"] .post-body h2{ counter-increment:vsec; position:relative; padding-left:2.6rem; } body[data-v-head="numbered"] .post-body h2::before{ content:counter(vsec); position:absolute; left:0; top:.1em; font-size:.72em; font-weight:700; opacity:.55; font-variant-numeric:tabular-nums; } body[data-v-head="numbered"] .post-body{ counter-reset:vsec; } body[data-v-head="kicker"] .post-body h2::before{ content:""; display:block; width:38px; height:3px; background:var(--primary); margin-bottom:.5rem; border-radius:2px; } body[data-v-head="rule"] .post-body h2{ border-bottom:1px solid var(--border); padding-bottom:.4rem; } body[data-v-head="plain"] .post-body h2{ /* apa adanya */ } /* ══════════════════════════════════════════════════════════════ KARTU ROUNDUP — tata letak item ══════════════════════════════════════════════════════════════ */ body[data-v-item="top"] .rd-item{ margin:34px 0; border-radius:var(--v-radius,10px); overflow:hidden; } body[data-v-item="top"] .rd-item img{ width:100%; aspect-ratio:3/2; object-fit:cover; } /* Selang-seling kiri–kanan: ritme yang memaksa mata bergerak, memperlambat scroll (Rule 3 deep scroll). */ body[data-v-item="alt"] .rd-item{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:22px; align-items:center; margin:34px 0; } body[data-v-item="alt"] .rd-item:nth-child(even) > *:first-child{ order:2; } body[data-v-item="alt"] .rd-item img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:var(--v-radius,10px); } body[data-v-item="wide"] .rd-item{ margin:30px 0; padding-bottom:26px; border-bottom:1px solid var(--border); } body[data-v-item="wide"] .rd-item img{ width:100%; aspect-ratio:21/9; object-fit:cover; border-radius:var(--v-radius,10px); } @media(max-width:760px){ body[data-v-item="alt"] .rd-item{ grid-template-columns:1fr; gap:12px; } body[data-v-item="alt"] .rd-item:nth-child(even) > *:first-child{ order:0; } body[data-v-item="alt"] .rd-item img{ aspect-ratio:3/2; } } /* ══════════════════════════════════════════════════════════════ DAFTAR ISI turunan — hanya muncul di varian yang memilihnya ══════════════════════════════════════════════════════════════ */ .v-toc{ margin:26px 0; padding:16px 18px; border:1px solid var(--border); border-radius:var(--v-radius,10px); background:var(--cream); } .v-toc-head{ font-size:.74rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--mid); margin-bottom:9px; } .v-toc ol{ margin:0; padding-left:1.1rem; } .v-toc li{ margin:4px 0; } .v-toc a{ color:var(--dark); text-decoration:none; } .v-toc a:hover{ text-decoration:underline; } body[data-v-toc="inline"] .v-toc{ border:0; border-left:3px solid var(--primary); border-radius:0; background:transparent; padding-left:14px; } /* ══════════════════════════════════════════════════════════════ DENSITY — skala jarak, bagian dari Brand DNA situs ══════════════════════════════════════════════════════════════ */ body[data-v-density="tight"] .post-body > * + *{ margin-top:.85rem; } body[data-v-density="normal"] .post-body > * + *{ margin-top:1.15rem; } body[data-v-density="airy"] .post-body > * + *{ margin-top:1.6rem; } body[data-v-density="airy"] .post-body h2{ margin-top:2.6rem; } body[data-v-density="tight"] .post-body h2{ margin-top:1.7rem; } /* ══════════════════════════════════════════════════════════════ CARD STYLE — Brand DNA, dipakai ulang oleh blok interaktif ══════════════════════════════════════════════════════════════ */ body[data-v-card="flat"] .ix-card{ border:0; background:var(--cream); } body[data-v-card="bordered"] .ix-card{ border:1px solid var(--border); background:transparent; } body[data-v-card="shadow"] .ix-card{ border:0; background:var(--warm-white); box-shadow:0 2px 14px rgba(0,0,0,.07); } @media (prefers-reduced-motion:reduce){ .rd-item, .ix-card{ transition:none; } } /* ══════════════════════════════════════════════════════════════ MINI-RESEP bergaya RECIPE CARD (versi simple) Ukuran, jarak, dan bahasa visual diambil langsung dari recipe card di template resep: judul serif, section title dengan garis mengalir, stats strip, nomor langkah 28px bulat. Yang sengaja TIDAK ada: Jump to Recipe, Save to Pinterest, Print, rating, vote, servings control, unit toggle, step image. Semuanya interaksi milik halaman resep sungguhan — kalau roundup memilikinya juga, tidak ada alasan pembaca mengklik ke resepnya. ══════════════════════════════════════════════════════════════ */ .rd-recipe{ margin:24px 0 10px; background:var(--rc-bg,#fffcf8); border-radius:20px; overflow:hidden; box-shadow:0 10px 28px -16px rgba(30,26,23,.3), 0 2px 6px rgba(30,26,23,.05); } .rd-recipe-inner{ display:block } /* ── Stats strip: mengikuti .rc-stats-strip ── */ .rd-recipe-head{ display:grid; grid-auto-flow:column; grid-auto-columns:1fr; background:rgba(0,0,0,.06); border-bottom:1px solid rgba(0,0,0,.08); } .rd-stat{ padding:12px 8px; text-align:center; background:var(--rc-bg,#fffcf8); border-right:1px solid rgba(0,0,0,.07); } .rd-stat:last-child{ border-right:0 } .rd-stat-value{ display:block; font-size:.9rem; font-weight:600; color:var(--dark,#1e1a17); font-variant-numeric:tabular-nums; } /* ── Body: dua kolom di desktop ── */ .rd-recipe-body{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); gap:0 30px; padding:22px 26px 24px; background:#fff; align-items:start; } .rd-recipe-body > :nth-child(1){ grid-column:1; grid-row:1 } .rd-recipe-body > :nth-child(2){ grid-column:1; grid-row:2 } .rd-recipe-body > :nth-child(3){ grid-column:2; grid-row:1 } .rd-recipe-body > :nth-child(4){ grid-column:2; grid-row:2 } /* ── Section title: mengikuti .rc-section-title ── */ .rd-label{ display:flex; align-items:center; gap:10px; margin:0 0 12px; font-family:'Playfair Display', Georgia, serif; font-size:1.02rem; font-weight:700; color:var(--dark,#1e1a17); } .rd-label::after{ content:''; flex:1; height:1px; background:var(--border,#e8ddd4); } /* ── Bahan: mengikuti .rc-ingredients-list ── */ .rd-recipe ul.rd-ing{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; } .rd-recipe ul.rd-ing li{ display:flex; align-items:flex-start; gap:10px; font-size:.97rem; color:var(--mid,#5c4f44); line-height:1.55; } .rd-recipe ul.rd-ing li::before{ content:''; flex-shrink:0; width:7px; height:7px; margin-top:.5em; border-radius:50%; border:2px solid var(--rc-accent,#c4613a); } /* ── Langkah: mengikuti .rc-instructions-list + .rc-step-num ── */ .rd-recipe ol.rd-steps{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:13px; counter-reset:rdstep; } .rd-recipe ol.rd-steps li{ counter-increment:rdstep; display:flex; gap:13px; align-items:flex-start; font-size:.97rem; color:var(--mid,#5c4f44); line-height:1.65; } .rd-recipe ol.rd-steps li::before{ content:counter(rdstep); flex-shrink:0; width:28px; height:28px; border-radius:50%; background:var(--rc-accent,#c4613a); color:#fff; font-size:.74rem; font-weight:600; display:flex; align-items:center; justify-content:center; font-variant-numeric:tabular-nums; } @media(max-width:700px){ .rd-recipe{ border-radius:16px; margin:20px 0 8px } .rd-recipe-body{ grid-template-columns:1fr; gap:0; padding:18px 16px 20px; } .rd-recipe-body > :nth-child(1){ grid-column:1; grid-row:1 } .rd-recipe-body > :nth-child(2){ grid-column:1; grid-row:2 } .rd-recipe-body > :nth-child(3){ grid-column:1; grid-row:3; margin-top:22px } .rd-recipe-body > :nth-child(4){ grid-column:1; grid-row:4 } .rd-stat{ padding:10px 6px } .rd-stat-value{ font-size:.84rem } } body[data-v-card="flat"] .rd-recipe{ box-shadow:none; border:1px solid var(--border,#e8ddd4) } body[data-v-card="shadow"] .rd-recipe{ box-shadow:0 16px 38px -18px rgba(30,26,23,.36), 0 3px 8px rgba(30,26,23,.07); } /* ══════════════════════════════════════════════════════════════ RECIPE CARD artikel MF Sengaja tanpa rating, print, dan servings scaler: card ini duduk di akhir artikel sebagai ringkasan yang bisa dicetak mata, bukan sebagai pusat interaksi halaman. ══════════════════════════════════════════════════════════════ */ .mf-card, section[data-recipe="card"]{ margin:38px 0 26px; padding:26px 28px 28px; background:var(--rc-bg,#fffcf8); border-radius:20px; box-shadow:0 12px 32px -18px rgba(30,26,23,.32), 0 2px 6px rgba(30,26,23,.05); } .mf-card > h2:first-child, section[data-recipe="card"] > h2:first-child{ margin:0 0 10px; font-size:1.5rem; line-height:1.25; } .mf-card > p, section[data-recipe="card"] > p{ margin:0 0 6px } /* Baris meta (Prep/Cook/Total/Servings/Course) jadi strip mendatar. */ .mf-card > p > strong, section[data-recipe="card"] > p > strong{ color:var(--mid,#5c4f44); font-weight:600; } .mf-card h2, section[data-recipe="card"] h2{ font-size:1.12rem; margin:24px 0 10px; padding-bottom:7px; border-bottom:2px solid var(--primary,#c4613a); display:inline-block; } .mf-card h3, section[data-recipe="card"] h3{ font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; color:var(--light-mid,#9e8e82); margin:16px 0 7px; } .mf-card ul, section[data-recipe="card"] ul{ margin:0; padding-left:1.15rem } .mf-card ul li, section[data-recipe="card"] ul li{ margin:5px 0; line-height:1.5 } .mf-card ol, section[data-recipe="card"] ol{ margin:0; padding-left:1.35rem } .mf-card ol li, section[data-recipe="card"] ol li{ margin:9px 0; line-height:1.6 } @media(max-width:600px){ .mf-card, section[data-recipe="card"]{ padding:20px 17px 22px; border-radius:16px } .mf-card > h2:first-child, section[data-recipe="card"] > h2:first-child{ font-size:1.3rem } } /* ══════════════════════════════════════════════════════════════ CARD MF harus terlihat Template resep menyembunyikan card yang tertinggal di dalam body: .article-content section[data-recipe="card"]{ display:none } Itu benar untuk resep biasa (card-nya dicabut ke slot sendiri), tapi salah untuk MF yang memang menaruhnya inline di akhir artikel. Selektor di bawah lebih spesifik, jadi menang tanpa mengubah template. ══════════════════════════════════════════════════════════════ */ body[data-post-type="mf"] .article-content section[data-recipe="card"]{ display:block; } /* Grid related MF. */ .mf-related{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px; margin:14px 0 4px; } .mf-related a{ display:block; text-decoration:none; color:var(--dark,#1e1a17); font-size:.88rem; line-height:1.35; } .mf-related img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:var(--v-radius,10px); margin-bottom:7px; } .mf-related a:hover span{ text-decoration:underline } .mf-pairing{ margin:10px 0 4px; padding-left:1.15rem } .mf-pairing li{ margin:5px 0 } @media(max-width:700px){ .mf-related{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:13px } } /* Pemutar video per kategori. preload="none" + poster: videonya baru diunduh saat pembaca menekan play, jadi tidak membebani LCP. */ /* Video: satu aturan untuk landscape DAN portrait. Versi sebelumnya memakai width:100% — itu benar untuk 16:9 tapi merentang video reel 9:16 ke lebar penuh, lalu isinya di-contain di tengah dan sisanya jadi bar hitam (background:#000 di bawah). Sekarang lebarnya mengikuti dimensi asli video, dibatasi tinggi layar, lalu dipusatkan: landscape tetap selebar artikel, reel tampil tegak dan sempit. */ .mf-video{ margin:14px 0 6px; text-align:center } .mf-video video{ display:block; margin:0 auto; width:auto; height:auto; max-width:100%; max-height:78vh; border-radius:var(--v-radius,12px); background:#000; } /* Caption kredit di bawah video: satu baris kecil dengan garis pendek di depannya, mengikuti gaya caption gambar di artikel. */ .mf-video figcaption{ margin:9px auto 0; max-width:640px; font-size:.83rem; line-height:1.5; color:var(--mut,#7a6b5d); text-align:left; display:flex; gap:10px; align-items:baseline; } .mf-video figcaption::before{ content:""; flex:0 0 22px; height:1px; background:currentColor; opacity:.55; transform:translateY(-4px); } .mf-video figcaption a{ color:inherit; text-decoration:underline } @media (max-width:600px){ .mf-video video{ max-height:70vh } .mf-video figcaption{ font-size:.8rem } } /* Item listicle. Nomornya sudah menyatu di dalam teks

saat render, jadi tidak ada penomoran CSS yang bisa meleset dari isinya. / .li-item{ margin:26px 0 } .li-item > h2{ margin:0 0 10px } .li-item > p{ margin:0 } / ══ DAFTAR ISI ══ Kotak bernomor bergaya Foxiz. Nomornya kotak beraksen, bukan angka biasa — itu yang membuatnya terbaca sebagai navigasi, bukan daftar bullet biasa. / .mf-toc{ border:1px solid var(--border, #e8ddd4); border-radius:var(--v-radius, 10px); background:#fff; margin:26px 0; overflow:hidden; } .mf-toc-head{ width:100%; display:flex; align-items:center; justify-content:space-between; background:transparent; border:0; cursor:pointer; padding:14px 16px; font-family:inherit; font-size:1.02rem; font-weight:600; color:var(--dark, #1e1a17); } .mf-toc-caret{ font-size:.7rem; opacity:.5; transition:transform .2s } .mf-toc.closed .mf-toc-caret{ transform:rotate(180deg) } .mf-toc.closed .mf-toc-list{ display:none } .mf-toc-list{ list-style:none; margin:0; padding:0 16px 12px } .mf-toc-list li{ border-top:1px solid var(--border, #e8ddd4) } .mf-toc-list li:first-child{ border-top:0 } .mf-toc-list a{ display:flex; align-items:center; gap:10px; padding:11px 0; text-decoration:none; color:var(--dark, #1e1a17); font-size:.94rem; font-weight:600; line-height:1.4; } .mf-toc-list a:hover{ color:var(--terracotta, #c4613a) } .toc-n{ flex:0 0 22px; height:22px; border-radius:4px; background:var(--terracotta, #c4613a); color:#fff; font-size:.72rem; font-weight:700; display:inline-flex; align-items:center; justify-content:center; } / Heading yang dituju tidak boleh tertutup header melayang. / .article-content h2[id]{ scroll-margin-top:80px } / ══ BLOK RELATED ══ Satu kartu besar bergambar, lalu daftar bertanda plus. Tanda plus itu yang membuat daftarnya terbaca sebagai "ada lagi", bukan sebagai navigasi biasa. / .mf-more{ border:1px solid var(--border, #e8ddd4); border-radius:var(--v-radius, 10px); background:#fff; padding:18px 18px 8px; margin:30px 0; } .mf-more-head{ font-size:.82rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--dark, #1e1a17); margin-bottom:14px; } / Garis miring beraksen di kedua sisi judul, seperti Foxiz. / .mf-more-head span::before, .mf-more-head span::after{ content:"/"; color:var(--terracotta, #c4613a); margin:0 7px; font-weight:700; } .mf-more-head span::before{ margin-left:0 } .mf-more-lead{ display:flex; gap:14px; align-items:flex-start; text-decoration:none; padding-bottom:14px; } .mf-more-lead img{ flex:0 0 108px; width:108px; height:76px; object-fit:cover; border-radius:6px; } .mf-more-lead-t{ font-weight:700; font-size:1rem; line-height:1.35; color:var(--dark, #1e1a17); } .mf-more-lead:hover .mf-more-lead-t{ color:var(--terracotta, #c4613a) } .mf-more-list{ list-style:none; margin:0; padding:0 } .mf-more-list li{ border-top:1px solid var(--border, #e8ddd4) } .mf-more-list a{ display:block; padding:11px 0 11px 22px; position:relative; text-decoration:none; color:var(--mid, #5c4f44); font-size:.93rem; line-height:1.4; } .mf-more-list a::before{ content:"+"; position:absolute; left:0; top:11px; color:var(--terracotta, #c4613a); font-weight:700; } .mf-more-list a:hover{ color:var(--terracotta, #c4613a) } @media(max-width:520px){ .mf-more-lead img{ flex-basis:84px; width:84px; height:60px } .mf-more-lead-t{ font-size:.94rem } } / Jeda antar paragraf di dalam beat. Tanpa ini dua paragraf dalam satu beat menyatu jadi blok teks tanpa jeda, dan pada teks sepanjang 150 kata itu melelahkan dibaca. / .mf-beat p{ margin:0 0 1.15em } .mf-beat p:last-child{ margin-bottom:0 } .mf-beat{ margin:0 0 30px } .mf-beat img{ margin-top:14px } / Judul kartu utama dirata-tengah terhadap gambarnya. Sebelumnya align-items:flex-start membuat judul satu baris menempel di tepi atas gambar 76px, jadi terlihat seperti salah posisi. / .mf-more-lead{ align-items:center } / Tanpa gambar, kartu utama tidak perlu ruang untuk gambar. */ .mf-more.no-img .mf-more-lead{ padding-bottom:12px } .mf-more.no-img .mf-more-lead-t{ font-size:1.05rem }