/* ========================================================================== Layout shell — Pixelzenic website v3 Layer layout bersama untuk halaman yang memakai sistem kolom tunggal: home dan about. Diaktifkan lewat class `page--shell` di . Sebelumnya semua aturan di file ini tinggal di css/home.css dengan scope .page-home, jadi cuma home yang kebagian. Isinya dipindah apa adanya ke sini — yang berubah hanya selectornya — supaya about memakai sumber yang sama persis, bukan salinan yang lama-lama drift. Dua lapis: 1. .shell — container konten, max 1360px, transparan 2. .sec__col — kolom tunggal 780px, dipakai hampir semua section (Layer .hero-bg — field glyph animasi ASCII di belakang hero — sudah dihapus total Sep 2026 bareng js/ascii-bg.js. Hero sekarang polos, standarnya index.html/index2.html: nol canvas di hero.) Aturan khas per halaman (warna, tipografi hero, kartu section) tetap di home.css / sections.css, tidak dipindah ke sini. ========================================================================== */ .page--shell { /* Hero container: 900px, padding dalam 60px kiri-kanan -> kolom konten 780px, sama persis dengan .sec__col di section-section bawahnya. */ /* Lebar kartu diturunkan dari kolom: 780 + 2x60 = 900px di viewport 1600, dan ikut menyusut sendiri di layar sempit sehingga kolom hero selalu sejajar dengan .sec__col di section bawahnya. */ --hero-shell: min(calc(var(--col) + 2 * var(--hero-pad)), 100%); --hero-pad: 60px; --hero-top: 160px; --hero-gap-logo: 50px; --shell-max: 1360px; --col: 780px; --sec-pad-top: 160px; --col-gutter: 0px; position: relative; background: var(--c-surface); } /* --- 1. Shell + kolom ---------------------------------------------------- */ .page--shell .shell { position: relative; z-index: 1; /* flow-root menahan margin negatif .hero (lihat bawah) supaya tidak collapse keluar ke . */ display: flow-root; max-width: var(--shell-max); margin-inline: auto; background: transparent; } /* Lebar kolom = 780px selama masih muat, kalau tidak menyusut mengikuti layar dengan sisa gutter --col-gutter di kiri-kanan. Satu aturan untuk semua breakpoint; yang berubah di media query cuma --col-gutter. */ .page--shell .sec__col { width: min(var(--col), 100% - var(--col-gutter) * 2); margin-inline: auto; } .page--shell .sec { padding-top: var(--sec-pad-top); } /* Eyebrow (14px) -> heading = 20px, heading -> konten = 40px. Diambil dari selisih y di artboard, sama untuk semua section. */ .page--shell .sec__head { margin-bottom: 40px; } .page--shell .sec__head .eyebrow { margin-bottom: 20px; } .page--shell .sec__head--tight { margin-bottom: 0; } /* --- 2. Header ----------------------------------------------------------- */ /* Yang berubah cuma posisi dan lebar. Seluruh behavior warna — .site-header--scrolled (frosted + padding menyusut), .site-header--on-dark (teks putih), crossfade dua logo — tetap datang dari sections.css dan js/main.js, tidak disentuh. */ /* Bar-nya full width viewport, isinya tetap di kolom 780px yang di-center, jadi logo sejajar dengan konten di bawahnya. Flush di puncak halaman, padding-top 100px sama persis dengan index.html (page-home2) — dulu didorong ke bawah lewat margin-top supaya nongol 60px di bawah tepi kartu hero yang punya latar sendiri; sejak hero-bg dihapus, hero polos putih sama seperti body, jadi margin-top itu cuma nyisain celah kosong yang kelihatan beda dari index.html. Kompensasinya dipindah ke padding-top .page--shell .hero di bawah, biar posisi konten hero tidak ikut bergeser. */ .page--shell .site-header { position: sticky; top: 0; z-index: var(--z-header); display: block; /* Bar melebar full-bleed sampai tepi viewport (keluar dari .shell 1360px), tapi isinya tetap ikut kolom 780px yang di-center — jadi posisi logo dan tombol hamburger tidak bergeser sedikit pun. */ width: 100vw; margin-inline: calc(50% - 50vw); padding-inline: 0; padding-top: 100px; } /* Panel nav di-anchor 16px di atas tombol, jadi tepi atasnya menyembul ke area frame yang ber-z-index 200. Selama panel terbuka header dinaikkan ke atas frame supaya tepi panel tidak terpotong; begitu ditutup, header turun lagi dan frame kembali jadi lapisan paling atas. */ .page--shell .site-header:has([data-nav-toggle][aria-expanded="true"]) { z-index: 300; } /* Spesifisitas .page--shell .site-header (0,2,0) mengalahkan .site-header--scrolled (0,1,0) di sections.css, jadi padding versi scrolled wajib ditulis ulang. Physical longhand (bukan padding-block) — dicampur sama padding-top di rule atas bikin transition CSS-nya macet di nilai lama (bug yang sama persis sudah ditemukan & diperbaiki di home2.css pagi ini). */ .page--shell .site-header--scrolled { padding-top: var(--header-pad-y-sm); padding-bottom: var(--header-pad-y-sm); } .page--shell .site-header__row { width: min(var(--col), 100% - var(--col-gutter) * 2); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; } /* --- 3. Hero ------------------------------------------------------------- */ /* Kartu putih hero, mengalir biasa persis di bawah header. Top 100px sama dengan index.html; bottom 100px untuk jarak ke section berikutnya. */ .page--shell .hero { position: relative; width: var(--hero-shell); margin-inline: auto; padding-top: 100px; padding-bottom: 100px; padding-inline: var(--hero-pad); background: #ffffff; } /* Kolomnya mengisi penuh container; centering sudah diurus .hero sendiri. */ .page--shell .hero .sec__col { width: 100%; } /* Garis orange full-bleed persis di bawah hero, sesuai spek Figma (node 186:777, halaman About) — pola full-bleed sama dengan .page-home2 .problem di home2.css. */ .page--shell .hero + .sec { border-top: 1px solid var(--c-accent-orange); width: 100vw; margin-left: calc(50% - 50vw); } /* ========================================================================== Responsive ========================================================================== */ @media (max-width: 1280px) { .page--shell { --sec-pad-top: 120px; } } @media (max-width: 1024px) { .page--shell { --col-gutter: 40px; --hero-pad: 40px; --hero-top: 100px; } } @media (max-width: 768px) { .page--shell { --sec-pad-top: 80px; --hero-top: 60px; } } @media (max-width: 520px) { .page--shell { --col-gutter: 20px; --hero-pad: 20px; } }