/* * Palet ini TIDAK menyimpan warna sendiri. Setiap warna dibaca dari variabel * Brand Kit tema induk (nusa-lbo), yang dicetak ke setiap halaman dari * nilai yang diedit pemilik situs di Dashboard -> Brand Kit: * * :root{--brand-50:R G B;...;--brand-900:R G B;--amber-50:...;--amber-700:...; * --ink:R G B;--muted:R G B;--wa:R G B;} * * Nilainya berformat RGB dipisah spasi (bukan hex), sehingga dipakai lewat * rgb(var(--brand-600)) atau, dengan transparansi, rgb(var(--ink) / .82). * * Token lokal di bawah ini sengaja diberi awalan "ga-" supaya namanya TIDAK * PERNAH sama dengan nama variabel Brand Kit (brand-50..900, amber-50..700, * ink, muted, wa). Sebuah custom property tidak bisa merujuk dirinya sendiri — * "--ink: rgb(var(--ink))" adalah siklus dan diam-diam resolve ke kosong. * Proyek sebelumnya (pusat-konveksi-jogja) menulis warna tetap di sini, jadi * mengganti warna dari dashboard tidak berpengaruh ke halaman. Di sini, * mengganti warna di Brand Kit langsung mengubah seluruh halaman tanpa rebuild. */ :root{ --ga-ink: rgb(var(--ink)); --ga-ink-2: rgb(var(--ink) / .82); --ga-muted: rgb(var(--muted)); --ga-muted-2: rgb(var(--muted) / .72); --ga-line: rgb(var(--brand-200)); --ga-line-soft: rgb(var(--brand-100)); --ga-paper-2: rgb(var(--brand-50)); --ga-brand-soft: rgb(var(--brand-100)); --ga-brand: rgb(var(--brand-500)); --ga-brand-600: rgb(var(--brand-600)); --ga-brand-400: rgb(var(--brand-400)); --ga-green: rgb(var(--wa)); --ga-paper: #FFFDF9; /* putih hangat untuk kertas, bukan warna merek */ --ga-tan: rgb(var(--brand-300)); /* Dua satu-satunya tempat nama huruf boleh disebut di seluruh tema. Ganti huruf situs = ubah dua baris ini. Lihat BLUEPRINT.md K-4. */ --ga-font-head: "Fraunces", Georgia, serif; --ga-font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; /* Non-warna: dari mockup, tidak berasal dari Brand Kit, dibiarkan apa adanya. */ --r-sm:10px; --r:18px; --r-lg:26px; --r-pill:999px; --shadow-soft:0 1px 2px rgba(43,26,16,.05), 0 8px 24px rgba(43,26,16,.07); --shadow-float:0 2px 4px rgba(43,26,16,.06), 0 18px 48px rgba(43,26,16,.14); --container:1320px; --pad:40px; --section:96px; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{ margin:0; background:var(--ga-paper); color:var(--ga-ink); font-family:var(--ga-font-body); font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased; } /* Warna judul ditulis eksplisit. Tema induk (nusa.css) memasang warna indigo tetap pada h1-h4, dan pewarisan dari body kalah dari selektor elemen itu. Dicatat di DEBT.md sebagai cacat tema induk yang perlu diperbaiki di hulu. */ h1,h2,h3,h4{font-family:var(--ga-font-head);color:var(--ga-ink);margin:0;letter-spacing:-.015em;line-height:1.14} /* Sisa warna tetap milik tema induk yang harus ikut palet Get Apron. */ ::selection{background:var(--ga-brand);color:#fff} .prose a,.prose strong{color:var(--ga-brand-600)} p{margin:0} img{display:block;max-width:100%;height:auto} a{color:inherit} :where(a,button,input,summary):focus-visible{outline:2px solid var(--ga-brand);outline-offset:3px;border-radius:6px} .wrap{max-width:var(--container);margin:0 auto;padding:0 var(--pad)} .section{padding:var(--section) 0;scroll-margin-top:92px} .section--paper2{background:var(--ga-paper-2)} /* Dipakai untuk seksi ajakan bertindak di ujung halaman. Jarak atas dibiarkan penuh supaya kotak CTA punya ruang napas yang sama dengan jarak ke footer di bawahnya — kotak yang menempel ke panel di atasnya terbaca sebagai bagian dari panel itu, bukan penutup halaman. Jarak bawah dinolkan karena footer sudah membawa jaraknya sendiri; tanpa ini jarak bawah jadi dua kali lipat jarak atas. */ .section--tight{padding-top:var(--section);padding-bottom:0} /* ---------- Placeholder foto (ganti dengan foto asli Get Apron) ---------- */ .ph{ position:relative;overflow:hidden;background: repeating-linear-gradient(135deg,#EFE2CE 0 12px,#E9DAC2 12px 24px); display:grid;place-items:center;color:var(--ga-muted-2); } .ph::after{ content:attr(data-label); font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600; text-align:center;padding:0 12px; } .ph--dark{background:repeating-linear-gradient(135deg,#3A2416 0 12px,#321F13 12px 24px);color:rgba(255,255,255,.45)} /* Foto asli (img) yang menggantikan .ph: latar bergaris yang sama tampil di balik foto sampai file aslinya ada, dan tetap terlihat kalau fotonya patah. */ .hero__media img,.trust__row img,.card-prod img,.gal img,.split>div>img, .cards-mat img,.positions img,.glass-band__bg{ background:repeating-linear-gradient(135deg,var(--ga-brand-soft) 0 12px,var(--ga-tan) 12px 24px); } /* ---------- Cegah grid/flex item melebar dari lebar konten anaknya ---------- */ .hero__grid>*,.hero__facts>*,.trust__row>*,.split>*,.benefits>*,.cards-5>*,.segs>*, .gal>*,.cards-mat>*,.positions>*,.tiers>*,.glass-stats>*,.glass-feats>*, .steps>*,.values>*,.quotes>*,.foot>*,.btn-row>*{min-width:0} /* ---------- Hover kartu ---------- */ .step,.card-prod,.mat,.gal figure,.quote,.seg,.pos,.tier,.value{ transition:border-color .18s ease-out,box-shadow .18s ease-out,transform .18s ease-out; } .step:hover,.card-prod:hover,.mat:hover,.gal figure:hover,.quote:hover,.seg:hover,.pos:hover,.tier:hover,.value:hover{ border-color:var(--ga-brand); box-shadow:var(--shadow-soft); transform:translateY(-2px); } .glass-stat,.glass-feat{transition:border-color .18s ease-out,background-color .18s ease-out,transform .18s ease-out} .glass-stat:hover,.glass-feat:hover{ border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.16);transform:translateY(-2px); } /* ---------- Penanda section ---------- */ .eyebrow{ display:flex;align-items:center;gap:10px; font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase; color:var(--ga-brand-600);margin-bottom:18px; } .eyebrow__num{ font-family:var(--ga-font-head);font-size:12px;font-weight:800; color:var(--ga-ink);background:var(--ga-brand-soft); border-radius:var(--r-pill);padding:4px 10px;letter-spacing:.06em; font-variant-numeric:tabular-nums; } .eyebrow__line{flex:1;height:1px;background:var(--ga-line);min-width:24px} .h-sec{font-size:clamp(28px,3.9vw,44px);font-weight:700} .h-sec em{font-style:normal;color:var(--ga-brand)} .lead{margin-top:16px;color:var(--ga-muted);max-width:62ch} .center{text-align:center} .center .eyebrow{justify-content:center} .center .lead{margin-left:auto;margin-right:auto} /* ---------- Tombol ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:9px; height:50px;padding:0 26px;border-radius:var(--r-pill); font-size:15px;font-weight:600; text-decoration:none;border:1px solid transparent;cursor:pointer; transition:background-color .18s ease-out,color .18s ease-out,border-color .18s ease-out,transform .18s ease-out; } .btn svg{flex-shrink:0} .btn--primary{background:var(--ga-ink);color:#fff} .btn--primary:hover{background:var(--ga-brand-600);transform:translateY(-1px)} .btn--gold{background:var(--ga-brand);color:#fff} .btn--gold:hover{background:var(--ga-brand-600);transform:translateY(-1px)} .btn--outline{background:transparent;color:var(--ga-ink);border-color:var(--ga-line)} .btn--outline:hover{border-color:var(--ga-ink);background:var(--ga-paper-2)} .btn--ghost-light{background:rgba(255,255,255,.10);color:#fff;border-color:rgba(255,255,255,.26)} .btn--ghost-light:hover{background:rgba(255,255,255,.18)} .btn--light{background:#fff;color:var(--ga-ink)} .btn--light:hover{background:var(--ga-brand-soft)} .btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px} /* ---------- Topbar + Header ---------- */ .topbar{background:var(--ga-ink);color:rgba(255,255,255,.70);font-size:13px} .topbar .wrap{display:flex;gap:24px;align-items:center;height:40px} .topbar span{display:flex;align-items:center;gap:7px;white-space:nowrap} .topbar__spacer{flex:1} .topbar a{color:#fff;text-decoration:none;font-weight:600} .topbar a:hover{color:var(--ga-brand-400)} .site-header{ position:sticky;top:0;z-index:50;background:rgba(255,253,249,.92); backdrop-filter:blur(12px);border-bottom:1px solid var(--ga-line); } .site-header .wrap{display:flex;align-items:center;gap:28px;height:76px} .brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex-shrink:0} .brand__mark{ width:42px;height:42px;border-radius:50%;flex-shrink:0; background:radial-gradient(circle at 50% 50%, var(--ga-brand-400) 0 26%, var(--ga-brand) 26% 52%, var(--ga-ink) 52% 62%, var(--ga-brand-soft) 62% 100%); border:2px solid var(--ga-brand); } .brand b{font-family:var(--ga-font-head);font-size:17px;font-weight:800;line-height:1.1;display:block;letter-spacing:-.01em} .brand small{display:block;font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--ga-muted-2);font-weight:600} .nav{display:flex;gap:2px;align-items:center} .nav a{ text-decoration:none;font-size:14.5px;font-weight:500;color:var(--ga-ink-2); padding:9px 13px;border-radius:var(--r-sm); transition:color .16s ease-out,background-color .16s ease-out; } .nav a:hover{color:var(--ga-brand-600);background:var(--ga-brand-soft)} .nav a[aria-current="page"]{color:var(--ga-ink);font-weight:600} .header__end{margin-left:auto;display:flex;align-items:center;gap:12px} .burger{display:none;width:44px;height:44px;border-radius:var(--r-sm);border:1px solid var(--ga-line);background:var(--ga-paper);align-items:center;justify-content:center} /* ---------- Hero ---------- */ .hero{ padding:76px 0 88px; background: radial-gradient(880px 420px at 86% -12%, var(--ga-brand-soft), transparent 68%), var(--ga-paper); } .hero__grid{display:grid;grid-template-columns:1.04fr .96fr;gap:56px;align-items:center} .hero h1{font-size:clamp(34px,4.3vw,54px);font-weight:700} .hero h1 em{font-style:normal;color:var(--ga-brand)} .hero__lead{margin-top:20px;font-size:17.5px;color:var(--ga-muted);max-width:52ch} .hero__facts{display:grid;grid-template-columns:repeat(3,1fr);margin-top:40px;border-top:1px solid var(--ga-line)} .hero__fact{padding:20px 20px 0 0} .hero__fact + .hero__fact{border-left:1px solid var(--ga-line);padding-left:24px} .hero__fact b{display:block;font-family:var(--ga-font-head);font-size:28px;font-weight:800;font-variant-numeric:tabular-nums} .hero__fact span{font-size:13px;color:var(--ga-muted)} .hero__media{position:relative} .hero__media .ph,.hero__media img{width:100%;height:540px;border-radius:var(--r-lg);object-fit:cover} .spec-card{ position:absolute;left:-28px;bottom:36px;width:302px; background:var(--ga-paper);border:1px solid var(--ga-line);border-radius:var(--r); box-shadow:var(--shadow-float);padding:20px 22px; } .spec-card__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px} .spec-card__head span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ga-muted-2);font-weight:600} .spec-card__dot{width:8px;height:8px;border-radius:50%;background:var(--ga-green);box-shadow:0 0 0 4px rgb(var(--wa) / .16)} .spec-row{display:flex;justify-content:space-between;gap:16px;font-size:13px;padding:7px 0;border-top:1px dashed var(--ga-line)} .spec-row:first-of-type{border-top:0} .spec-row dt{color:var(--ga-muted);margin:0} .spec-row dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums} /* ---------- Strip trust ---------- */ .trust{border-top:1px solid var(--ga-line);border-bottom:1px solid var(--ga-line);background:var(--ga-paper-2)} .trust .wrap{padding-top:32px;padding-bottom:32px} .trust p{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ga-muted-2);font-weight:600;margin-bottom:22px} .trust__row{display:grid;grid-template-columns:repeat(6,1fr);gap:24px;align-items:center} .trust__row .ph,.trust__row img{width:100%;height:44px;border-radius:8px;object-fit:contain} /* ---------- Split ---------- */ .split{display:grid;grid-template-columns:400px 1fr;gap:64px;align-items:start} .split__head{position:sticky;top:104px} .split__head .h-sec{font-size:clamp(26px,2.7vw,34px)} .split>div>img{width:100%;object-fit:cover} /* ---------- Quick benefits ---------- */ .benefits{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid var(--ga-line)} .benefit{display:grid;grid-template-columns:32px 1fr;gap:14px;padding:22px 24px 22px 0;border-bottom:1px solid var(--ga-line)} .benefit:nth-child(odd){border-right:1px solid var(--ga-line);padding-right:24px} .benefit__ic{ width:32px;height:32px;border-radius:9px;display:grid;place-items:center; background:var(--ga-brand-soft);color:var(--ga-brand-600);margin-top:2px; } .benefit h3{font-size:16.5px;font-weight:700;margin-bottom:5px;font-family:var(--ga-font-body);letter-spacing:0} .benefit p{font-size:14.5px;color:var(--ga-muted)} /* ---------- Produk ---------- */ .cards-5{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:44px} .card-prod{border:1px solid var(--ga-line);border-radius:var(--r);overflow:hidden;background:var(--ga-paper);display:flex;flex-direction:column;text-decoration:none} .card-prod .ph,.card-prod img{width:100%;height:170px;object-fit:cover} .card-prod__body{padding:16px 18px 20px;display:flex;flex-direction:column;flex:1;gap:6px} .card-prod h3{font-size:15.5px;font-weight:700;font-family:var(--ga-font-body);letter-spacing:0} .card-prod p{font-size:13.5px;color:var(--ga-muted)} /* ---------- Segmen bisnis ---------- */ .segs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px} .seg{ border:1px solid var(--ga-line);border-radius:var(--r);background:var(--ga-paper); padding:24px 22px;display:flex;gap:16px;align-items:flex-start; } .seg__ic{width:44px;height:44px;border-radius:12px;flex-shrink:0;display:grid;place-items:center;background:var(--ga-brand-soft);color:var(--ga-brand-600)} .seg h3{font-size:16.5px;font-weight:700;margin-bottom:5px;font-family:var(--ga-font-body);letter-spacing:0} .seg p{font-size:14px;color:var(--ga-muted)} /* ---------- Galeri portfolio ---------- */ .gal{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:44px} .gal figure{margin:0;border-radius:var(--r);overflow:hidden;border:1px solid var(--ga-line);background:var(--ga-paper)} .gal .ph,.gal img{width:100%;height:230px;object-fit:cover} .gal figcaption{padding:14px 16px} .gal b{display:block;font-size:14.5px;font-weight:700} .gal span{font-size:12.5px;color:var(--ga-muted)} .gal .wide{grid-column:span 2} /* ---------- Custom branding ---------- */ .chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px} .chip{ font-size:13.5px;font-weight:500;color:var(--ga-ink-2);background:var(--ga-paper); border:1px solid var(--ga-line);border-radius:var(--r-pill);padding:8px 16px; transition:border-color .16s ease-out,color .16s ease-out; } .chip:hover{border-color:var(--ga-brand);color:var(--ga-brand-600)} /* ---------- Bahan ---------- */ .cards-mat{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:44px} .mat{border:1px solid var(--ga-line);border-radius:var(--r);background:var(--ga-paper);padding:18px;display:flex;flex-direction:column;gap:13px} .mat .ph,.mat img{width:100%;height:148px;border-radius:12px;object-fit:cover} .mat b{font-size:16px;font-weight:700} .mat > p{font-size:13.5px;color:var(--ga-muted)} .mat dl{margin:0;display:grid;gap:6px;border-top:1px dashed var(--ga-line);padding-top:12px} .mat dl div{display:flex;justify-content:space-between;gap:12px;font-size:12.5px} .mat dt{margin:0;color:var(--ga-muted-2)} .mat dd{margin:0;font-weight:600;color:var(--ga-ink-2)} .tag{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--ga-brand-600);background:var(--ga-brand-soft);border-radius:var(--r-pill);padding:4px 10px;align-self:flex-start} /* ---------- Posisi staff ---------- */ .positions{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:44px} .pos{border:1px solid var(--ga-line);border-radius:var(--r);background:var(--ga-paper);overflow:hidden;display:flex;flex-direction:column} .pos .ph,.pos img{width:100%;height:150px;object-fit:cover} .pos__body{padding:18px 20px 22px} .pos h3{font-size:16px;font-weight:700;margin-bottom:6px;font-family:var(--ga-font-body);letter-spacing:0} .pos p{font-size:13.5px;color:var(--ga-muted)} .pos ul{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:5px} .pos li{font-size:12.5px;color:var(--ga-ink-2);padding-left:16px;position:relative} .pos li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--ga-brand-400)} /* ---------- Harga ---------- */ .tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:44px} .tier{border:1px solid var(--ga-line);border-radius:var(--r);background:var(--ga-paper);padding:26px 24px;display:flex;flex-direction:column;gap:12px} .tier--hi{border-color:var(--ga-brand);background:linear-gradient(180deg,var(--ga-brand-soft),var(--ga-paper) 62%)} .tier__qty{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--ga-brand-600)} .tier b{font-family:var(--ga-font-head);font-size:28px;font-weight:800;line-height:1.1} .tier b small{display:block;font-family:var(--ga-font-body);font-size:12px;font-weight:500;color:var(--ga-muted);letter-spacing:0;margin-bottom:4px} .tier p{font-size:13.5px;color:var(--ga-muted)} .tier ul{list-style:none;margin:0;padding:0;display:grid;gap:7px;border-top:1px dashed var(--ga-line);padding-top:14px;margin-top:auto} .tier li{font-size:13px;color:var(--ga-ink-2);padding-left:18px;position:relative} .tier li::before{content:"";position:absolute;left:0;top:7px;width:7px;height:7px;border-radius:2px;background:var(--ga-brand-400)} .price-note{ margin-top:28px;border:1px dashed var(--ga-line);border-radius:var(--r);background:var(--ga-paper); padding:22px 24px;display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center; } .price-note b{display:block;font-size:15px;margin-bottom:4px;font-family:var(--ga-font-body);font-weight:700} .price-note p{font-size:14px;color:var(--ga-muted)} .price-note__ic{width:44px;height:44px;border-radius:12px;background:var(--ga-brand-soft);color:var(--ga-brand-600);display:grid;place-items:center} /* ---------- Band bulk order ---------- */ .glass-band{position:relative;isolation:isolate;overflow:hidden;color:#fff;padding:108px 0} .glass-band__bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover} .glass-band::after{ content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(180deg,rgb(var(--ink) / .90),rgb(var(--brand-600) / .72) 48%,rgb(var(--ink) / .93)); } .glass-band__head{text-align:center;max-width:58ch;margin:0 auto 46px} .glass-band__head .eyebrow{justify-content:center;color:#fff} .glass-band__head .eyebrow__num{background:rgba(255,255,255,.16);color:#fff} .glass-band__head .eyebrow__line{display:none} .glass-band h2{font-size:clamp(28px,3.6vw,44px);font-weight:700} .glass-band__head p{margin-top:16px;color:rgba(255,255,255,.82)} .glass{ background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22); border-radius:var(--r);backdrop-filter:blur(14px) saturate(120%); -webkit-backdrop-filter:blur(14px) saturate(120%); } .glass-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .glass-stat{padding:26px 22px;text-align:center} .glass-stat b{display:block;font-family:var(--ga-font-head);font-size:clamp(32px,3.2vw,44px);font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums} .glass-stat strong{display:block;font-size:14.5px;font-weight:700;margin-top:10px} .glass-stat span{display:block;font-size:13px;color:rgba(255,255,255,.72);margin-top:4px} .glass-feats{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:18px} .glass-feat{display:flex;gap:18px;align-items:flex-start;padding:24px 26px} .glass-feat__icon{width:48px;height:48px;border-radius:14px;flex-shrink:0;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.24);display:grid;place-items:center} .glass-feat h3{font-size:17px;font-weight:700;margin-bottom:6px;font-family:var(--ga-font-body);letter-spacing:0} .glass-feat p{font-size:14.5px;color:rgba(255,255,255,.78)} .glass-band .btn-row{justify-content:center;margin-top:34px} /* ---------- Langkah pemesanan ---------- */ .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px} .step{background:var(--ga-paper);border:1px solid var(--ga-line);border-radius:var(--r);padding:26px 24px} .step__n{ display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px; border-radius:var(--r-pill);background:var(--ga-brand-soft);color:var(--ga-brand-600); font-family:var(--ga-font-head);font-weight:800;font-size:14px; font-variant-numeric:tabular-nums;margin-bottom:16px; } .step h3{font-size:17px;font-weight:700;margin-bottom:8px;font-family:var(--ga-font-body);letter-spacing:0} .step p{font-size:14px;color:var(--ga-muted)} /* ---------- Why / value ---------- */ .values{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px} .value{border:1px solid var(--ga-line);border-radius:var(--r);background:var(--ga-paper);padding:26px 24px} .value__ic{width:44px;height:44px;border-radius:12px;background:var(--ga-brand-soft);color:var(--ga-brand-600);display:grid;place-items:center;margin-bottom:16px} .value h3{font-size:16.5px;font-weight:700;margin-bottom:7px;font-family:var(--ga-font-body);letter-spacing:0} .value p{font-size:14px;color:var(--ga-muted)} /* ---------- Testimoni ---------- */ .quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px} .quote{border:1px solid var(--ga-line);border-radius:var(--r);background:var(--ga-paper);padding:26px 24px;display:flex;flex-direction:column;gap:16px} .quote__mark{font-family:var(--ga-font-head);font-size:34px;font-weight:800;color:var(--ga-brand);line-height:1} .quote p{font-size:15px;color:var(--ga-ink-2)} .quote footer{margin-top:auto;border-top:1px solid var(--ga-line-soft);padding-top:16px;border-left:2px solid var(--ga-brand);padding-left:14px} .quote footer b{display:block;font-size:14px} .quote footer span{font-size:12.5px;color:var(--ga-muted)} /* ---------- FAQ ---------- */ .faq{margin-top:44px;max-width:900px;margin-left:auto;margin-right:auto;border-top:1px solid var(--ga-line)} .faq details{border-bottom:1px solid var(--ga-line)} .faq summary{ list-style:none;cursor:pointer;padding:20px 44px 20px 0;position:relative; font-size:16.5px;font-weight:600;color:var(--ga-ink); } .faq summary::-webkit-details-marker{display:none} .faq summary::after{ content:"";position:absolute;right:8px;top:50%;width:11px;height:11px; border-right:2px solid var(--ga-brand);border-bottom:2px solid var(--ga-brand); transform:translateY(-70%) rotate(45deg);transition:transform .2s ease-out; } .faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)} .faq p{padding:0 44px 22px 0;color:var(--ga-muted);font-size:15px;max-width:72ch} /* ---------- CTA akhir ---------- */ .cta{ border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--ga-line); background:linear-gradient(180deg,var(--ga-brand-soft),var(--ga-paper)); padding:56px 48px;display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center; } .cta h2{font-size:clamp(26px,3.3vw,38px);font-weight:700;max-width:18ch} .cta p{margin-top:14px;color:var(--ga-muted);max-width:48ch} .cta__side{display:flex;flex-direction:column;gap:12px} .cta__micro{margin-top:14px;font-size:13px;color:var(--ga-muted-2);text-align:center} /* ---------- Footer ---------- */ .site-footer{background:var(--ga-ink);color:rgba(255,255,255,.70);margin-top:var(--section)} .site-footer .wrap{padding-top:64px;padding-bottom:28px} .foot{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.3fr;gap:40px} .foot h4{color:#fff;font-size:13px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:18px;font-family:var(--ga-font-body);font-weight:700} .foot ul{list-style:none;margin:0;padding:0;display:grid;gap:10px} .foot a{text-decoration:none;font-size:14.5px} .foot a:hover{color:var(--ga-brand-400)} .foot__brand b{display:block;color:#fff;font-family:var(--ga-font-head);font-size:19px;font-weight:800;margin-bottom:10px} .foot__brand p{font-size:14.5px;max-width:36ch} .foot__social{display:flex;gap:10px;margin-top:20px} .foot__social a{ width:40px;height:40px;border-radius:11px;display:grid;place-items:center; border:1px solid rgba(255,255,255,.16);color:rgba(255,255,255,.8); transition:border-color .16s,color .16s,background-color .16s; } .foot__social a:hover{border-color:var(--ga-brand-400);color:var(--ga-brand-400);background:rgba(255,255,255,.05)} .foot address{font-style:normal;font-size:14.5px;line-height:1.75} .foot__bottom{margin-top:48px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:13px} .foot__legal{display:flex;gap:18px;flex-wrap:wrap} .foot__legal a{text-decoration:none} /* ---------- Responsif ---------- */ @media (max-width:1180px){ .cards-5{grid-template-columns:repeat(3,1fr)} .positions,.cards-mat,.tiers{grid-template-columns:repeat(2,1fr)} } @media (max-width:1080px){ :root{--section:72px;--pad:28px} .hero__grid{grid-template-columns:1fr;gap:40px} .hero__media .ph,.hero__media img{height:420px} .spec-card{left:16px;bottom:16px;width:min(302px,calc(100% - 32px))} .split{grid-template-columns:1fr;gap:32px} .split__head{position:static} .benefits{grid-template-columns:1fr} .benefit:nth-child(odd){border-right:0;padding-right:0} .segs,.steps,.values,.quotes,.gal{grid-template-columns:repeat(2,1fr)} .glass-stats{grid-template-columns:repeat(2,1fr)} .glass-band{padding:80px 0} .foot{grid-template-columns:1fr 1fr} .trust__row{grid-template-columns:repeat(3,1fr)} .nav{display:none} .burger{display:inline-flex} .cta{grid-template-columns:1fr;padding:40px 28px} .topbar span:not(.topbar__phone):not(.topbar__spacer){display:none} } @media (max-width:820px){ .header__end .btn{display:none} } @media (max-width:640px){ :root{--pad:16px;--section:56px} .brand small{display:none} .hero{padding:40px 0 56px} .hero__facts{grid-template-columns:1fr;border-top:0} .hero__fact{border-top:1px solid var(--ga-line);padding:16px 0 0} .hero__fact + .hero__fact{border-left:0;padding-left:0} .cards-5,.segs,.steps,.values,.quotes,.gal,.positions,.cards-mat,.tiers, .glass-stats,.glass-feats,.foot,.trust__row{grid-template-columns:1fr} .glass-band{padding:56px 0} .gal .wide{grid-column:span 1} .btn-row .btn{width:100%} .price-note{grid-template-columns:1fr} } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.01ms;animation-iteration-count:1} .step,.card-prod,.mat,.gal figure,.quote,.seg,.pos,.tier,.value, .glass-stat,.glass-feat,.chip,.getapron-floating-wa{transition-duration:.01ms} } /* ====================================================================== Bagian di bawah ini TIDAK ada di mockup/index.html. Dipertahankan dari berkas lama (aset khusus WordPress: tombol WA melayang, integrasi menu mobile/admin bar, kartu artikel gelap, dan formulir kontak) dan disambungkan ke token --ga-* yang sama supaya tetap ikut berubah kalau Brand Kit berubah. ====================================================================== */ /* ---------- Tombol WA melayang ---------- */ .getapron-floating-wa{ position:fixed;right:24px;bottom:24px;z-index:60; width:56px;height:56px;border-radius:var(--r-pill); display:grid;place-items:center;background:var(--ga-green);color:#fff; box-shadow:var(--shadow-float);text-decoration:none; transition:transform 160ms ease-out,box-shadow 160ms ease-out; } .getapron-floating-wa:hover,.getapron-floating-wa:focus{color:#fff;transform:scale(1.05);box-shadow:var(--shadow-float)} .getapron-floating-wa:focus-visible{outline:3px solid var(--ga-brand-400);outline-offset:3px} @media (max-width:600px){ .getapron-floating-wa{right:16px;bottom:16px} } /* ---------- Penyesuaian WordPress ---------- */ .nav{list-style:none;margin:0;padding:0} .nav li{margin:0} .foot__social{display:flex;gap:10px;margin-top:18px} #nwMobileMenu{border-top:1px solid var(--ga-line);background:rgba(255,255,255,.98);backdrop-filter:blur(12px)} #nwMobileMenu .nav{display:grid;gap:4px;padding:12px 0 18px} #nwMobileMenu .nav a{display:block} @media (min-width:783px){ body.admin-bar .site-header{top:32px} } @media (min-width:601px) and (max-width:782px){ body.admin-bar .site-header{top:46px} } .getapron-main{max-width:none;width:100%} /* Kartu gelap di dalam daftar tahap (ditandai lewat style="--ink:..." di HTML halaman): judulnya juga harus putih. Penanda ini hanya dipakai sebagai selector, bukan sebagai sumber warna. */ .step[style*="--ink"] h1,.step[style*="--ink"] h2,.step[style*="--ink"] h3,.step[style*="--ink"] h4{color:#fff} /* ---------- Formulir ---------- */ /* Ditambahkan setelah halaman Kontak dibangun: kolom isian tampil tanpa garis sama sekali sehingga tidak terlihat sebagai kolom. Gayanya mengikuti kartu: garis rambut, sudut membulat, fokus warna merek. */ .quote form p{margin:0 0 18px} .quote form p:last-child{margin-bottom:0} .quote form label{ display:block;margin-bottom:7px; font-family:var(--ga-font-body);font-size:13.5px;font-weight:600;color:var(--ga-ink); } .quote form label + br{display:none} .quote form input[type="text"], .quote form input[type="tel"], .quote form input[type="email"], .quote form select, .quote form textarea{ width:100%; font-family:inherit;font-size:15px;color:var(--ga-ink); background:var(--ga-paper); border:1px solid var(--ga-line);border-radius:var(--r-sm); padding:0 14px; transition:border-color .16s ease-out,box-shadow .16s ease-out; } .quote form input[type="text"], .quote form input[type="tel"], .quote form input[type="email"], .quote form select{height:46px} .quote form textarea{padding:12px 14px;min-height:140px;line-height:1.6;resize:vertical} /* Panah bawaan peramban dibiarkan: tanpa itu kolom ini tidak terbaca sebagai pilihan. */ .quote form select{cursor:pointer} .quote form input::placeholder, .quote form textarea::placeholder{color:var(--ga-muted-2)} .quote form input:hover, .quote form select:hover, .quote form textarea:hover{border-color:var(--ga-muted-2)} .quote form input:focus, .quote form select:focus, .quote form textarea:focus{ outline:none;border-color:var(--ga-brand); box-shadow:0 0 0 3px rgb(var(--brand-500) / .14); } .quote form button[type="submit"]{margin-top:4px} /* Tombol di dalam badan artikel: gaya prosa tema induk menggarisbawahi semua tautan, termasuk yang sebenarnya tombol. */ .prose .btn,.nwh-prose .btn{text-decoration:none} /* ============================================================================ Banner judul halaman dalam (Produk, Portfolio, Cara Pesan, Bulk Order, Tentang, Kontak). Beranda memakai .hero, bukan ini. Ditulis arsitek sebagai komponen bersama supaya keenam halaman memakai satu bentuk yang sama, bukan enam versi yang mirip-mirip. ========================================================================== */ .page-hero{position:relative;isolation:isolate;overflow:hidden;color:#fff} .page-hero img,.page-hero .ph{ position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover; } .page-hero::after{ content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(180deg,rgb(var(--ink) / .88),rgb(var(--brand-800) / .70) 55%,rgb(var(--ink) / .92)); } .page-hero .wrap{padding-top:96px;padding-bottom:96px;max-width:var(--container)} .page-hero__inner{max-width:62ch} .page-hero .eyebrow{color:#fff} .page-hero .eyebrow__num{background:rgb(255 255 255 / .16);color:#fff} .page-hero .eyebrow__line{background:rgb(255 255 255 / .22)} .page-hero h1{font-size:clamp(32px,4vw,50px);font-weight:700;color:#fff} .page-hero h1 em{font-style:normal;color:var(--ga-brand-400)} .page-hero__lead{margin-top:18px;font-size:17px;color:rgb(255 255 255 / .82);max-width:56ch} .page-hero .btn-row{margin-top:26px} /* Jejak remah: menunjukkan posisi halaman tanpa menambah menu kedua. */ .crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13px;color:rgb(255 255 255 / .62);margin-bottom:16px} .crumbs a{text-decoration:none;color:rgb(255 255 255 / .82)} .crumbs a:hover{color:var(--ga-brand-400)} .crumbs span[aria-hidden]{color:rgb(255 255 255 / .38)} @media (max-width:1080px){ .page-hero .wrap{padding-top:72px;padding-bottom:72px} } @media (max-width:640px){ .page-hero .wrap{padding-top:48px;padding-bottom:48px} } /* ============================================================================ Halaman artikel tunggal. Templat artikel semula memakai kelas utilitas Tailwind milik tema induk. Berkas Tailwind itu dikompilasi untuk proyek lain, jadi kelas seperti grid-cols-[260px_minmax(0,70ch)] tidak pernah ada di dalamnya: daftar isi berjajar mendatar dan badan artikel kehilangan batas lebar baca. Ditulis ulang di sini memakai token proyek. Tema anak sekarang tidak bergantung pada Tailwind sama sekali. ========================================================================== */ .getapron-article--toc{display:grid;grid-template-columns:260px minmax(0,72ch);gap:56px;justify-content:center} .getapron-prose{max-width:72ch;margin-inline:auto;min-width:0} .getapron-toc__inner{position:sticky;top:112px} .toc{display:flex;flex-direction:column;gap:2px;font-size:14px} .toc a{ display:block;padding:7px 0 7px 14px;text-decoration:none;line-height:1.45; color:var(--ga-muted);border-left:2px solid var(--ga-line); transition:color .16s ease-out,border-color .16s ease-out; } .toc a:hover{color:var(--ga-ink)} .toc a.active{color:var(--ga-brand-600);border-left-color:var(--ga-brand);font-weight:600} /* Bar kemajuan baca di tepi atas layar. */ .getapron-readbar{ position:fixed;top:0;left:0;height:3px;z-index:60; background:var(--ga-brand);transition:width .1s linear; } @media (max-width:1080px){ .getapron-article--toc{grid-template-columns:1fr;gap:0} .getapron-toc{display:none} } /* ============================================================================ Kartu artikel: dipakai arsip artikel (home.php) dan hasil pencarian. Mockup beranda yang disetujui tidak memuat seksi artikel, jadi gaya kartunya ikut hilang saat berkas gaya disusun ulang dari mockup itu. Akibatnya daftar artikel tampil sebagai teks polos tanpa kartu. Ditulis ulang di sini memakai bahasa visual yang sama dengan kartu lain di situs. ========================================================================== */ .posts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px} .post{ border:1px solid var(--ga-line);border-radius:var(--r);background:var(--ga-paper); padding:26px 24px;display:flex;flex-direction:column;gap:12px;text-decoration:none; transition:border-color .18s ease-out,box-shadow .18s ease-out,transform .18s ease-out; } .post:hover{border-color:var(--ga-brand);box-shadow:var(--shadow-soft);transform:translateY(-2px)} .post img{width:calc(100% + 48px);height:190px;object-fit:cover;margin:-26px -24px 4px} .post__meta{ display:flex;gap:10px;align-items:center;flex-wrap:wrap; font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600; color:var(--ga-brand-600); } .post__meta time{color:var(--ga-muted-2);letter-spacing:.04em;text-transform:none;font-weight:500} .post h2{font-size:18px;font-weight:700;line-height:1.3;color:var(--ga-ink)} .post p{font-size:14.5px;color:var(--ga-muted)} .post__more{margin-top:auto;font-size:14px;font-weight:600;color:var(--ga-ink);padding-top:10px} .post:hover .post__more{color:var(--ga-brand-600)} /* Navigasi halaman daftar artikel. */ .pagination{margin-top:44px} .pagination .nav-links{display:flex;flex-wrap:wrap;gap:8px;align-items:center} .pagination .page-numbers{ display:inline-flex;align-items:center;justify-content:center; min-width:44px;height:44px;padding:0 14px;border-radius:var(--r-sm); border:1px solid var(--ga-line);background:var(--ga-paper); font-size:14px;font-weight:600;color:var(--ga-ink-2);text-decoration:none; transition:border-color .16s ease-out,color .16s ease-out,background-color .16s ease-out; } .pagination .page-numbers:hover{border-color:var(--ga-brand);color:var(--ga-brand-600)} .pagination .page-numbers.current{background:var(--ga-ink);border-color:var(--ga-ink);color:#fff} .pagination .page-numbers.dots{border-color:transparent;background:transparent} .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} @media (max-width:1080px){ .posts{grid-template-columns:repeat(2,1fr)} } @media (max-width:640px){ .posts{grid-template-columns:1fr} } /* ============================================================================ Efek muncul saat digulir. Keadaan transparan di bawah ini HANYA berlaku setelah getapron.js menempelkan kelas .ga-reveal. Tanpa JavaScript kelas itu tidak pernah ada, jadi halaman tampil utuh apa adanya — isi situs tidak boleh bergantung pada animasi. ========================================================================== */ .ga-reveal{ opacity:0; transform:translateY(22px); transition:opacity .62s cubic-bezier(.22,.61,.36,1) var(--ga-reveal-delay,0ms), transform .62s cubic-bezier(.22,.61,.36,1) var(--ga-reveal-delay,0ms); will-change:opacity,transform; } .ga-reveal--tampil{opacity:1;transform:none;will-change:auto} /* Kartu kaca di atas foto gelap: ikut bergerak naik sedikit lebih jauh supaya gerakannya terbaca di latar yang kontrasnya rendah. */ .glass-stats>.ga-reveal,.glass-feats>.ga-reveal{transform:translateY(28px)} .glass-stats>.ga-reveal--tampil,.glass-feats>.ga-reveal--tampil{transform:none} @media (prefers-reduced-motion:reduce){ .ga-reveal{opacity:1;transform:none;transition:none} } /* Gambar utama artikel: melebar penuh mengikuti kolom, bukan menempel kiri dengan sisa ruang di kanan saat lebar aslinya lebih kecil dari wadahnya. */ .getapron-featured img{width:100%;height:auto;border-radius:var(--r-lg)}