/* =====================================================================
ISA COMMERCE CORE — BASE (reset, tipografi, layout, tombol)
Sumber: PROTOTYPE/isa-hijab/css/main.css §0–3 (visual tidak diubah).
Tambahan: pemetaan kelas block WordPress (is-style-*, wp-block-*) ke
kelas komponen prototype supaya markup editor menghasilkan tampilan sama.
===================================================================== */
/* ---------- 0. BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
margin: 0;
font-family: var(--isa-font-body);
font-size: var(--isa-text-body);
line-height: var(--isa-leading-normal);
color: var(--isa-color-text);
background: var(--isa-color-background);
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
img, picture, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
ul.isa-list, .isa-list ul { list-style: none; margin: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--isa-color-accent); outline-offset: 3px; }
[hidden] { display: none !important; }
.sr-only, .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.icon { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.icon--fill { fill: currentColor; stroke: none; }
.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 1000; padding: .75rem 1rem; background: var(--isa-color-primary); color: var(--isa-color-text-inverse); border-radius: var(--isa-radius); }
.skip-link:focus { top: 1rem; }
/* Root padding WordPress (useRootPaddingAwareAlignments): section full-bleed ditangani .has-global-padding oleh core */
.wp-site-blocks > * + * { margin-block-start: 0; }
.wp-site-blocks { display: flex; flex-direction: column; min-height: 100vh; }
.wp-site-blocks > main, .wp-site-blocks > .site-main { flex: 1 0 auto; }
/* ---------- 1. TYPOGRAPHY ---------- */
.t-display-xl, .t-display, .t-h1, .t-h2, .t-h3,
.is-style-display, .is-style-display-xl {
font-family: var(--isa-font-display);
font-weight: 500;
line-height: var(--isa-leading-tight);
color: var(--isa-color-primary);
letter-spacing: -.01em;
}
.t-display-xl, .is-style-display-xl { font-size: var(--isa-text-display-xl); }
.t-display, .is-style-display { font-size: var(--isa-text-display); }
.t-h1 { font-size: var(--isa-text-h1); }
.t-h2 { font-size: var(--isa-text-h2); }
.t-h3 { font-size: var(--isa-text-h3); }
.t-h4 { font-family: var(--isa-font-body); font-size: var(--isa-text-h4); font-weight: 600; line-height: var(--isa-leading-snug); }
.t-body-lg { font-size: var(--isa-text-body-lg); }
.t-small { font-size: var(--isa-text-small); }
.t-caption { font-size: var(--isa-text-caption); }
.t-muted, .is-style-muted { color: var(--isa-color-text-muted); }
.eyebrow, .is-style-eyebrow, .is-style-eyebrow-center {
display: inline-flex; align-items: center; gap: .75rem;
font-size: var(--isa-text-caption);
font-weight: 600;
letter-spacing: var(--isa-tracking-wider);
text-transform: uppercase;
color: var(--isa-color-accent);
margin: 0;
}
.eyebrow::before, .is-style-eyebrow::before, .is-style-eyebrow-center::before { content: ""; width: 2rem; height: 1px; background: currentColor; }
.eyebrow--center::after, .is-style-eyebrow-center::after { content: ""; width: 2rem; height: 1px; background: currentColor; }
p.is-style-eyebrow-center { justify-content: center; display: flex; }
/* ---------- 2. LAYOUT ---------- */
.container { width: 100%; max-width: var(--isa-container); margin-inline: auto; padding-inline: var(--isa-page-padding); }
.container--narrow { max-width: var(--isa-container-narrow); }
/* Group dengan kelas .container di dalam .has-global-padding: hindari padding ganda */
.has-global-padding > .container, .has-global-padding .container { padding-inline: 0; }
.section, .is-style-section, .is-style-section-alt, .is-style-section-dark { padding-block: var(--isa-section-space); }
.section--sm, .is-style-section-sm { padding-block: var(--isa-section-space-sm); }
.section--alt, .is-style-section-alt { background: var(--isa-color-surface-alt); }
.section--dark, .is-style-section-dark { background: var(--isa-color-primary); color: var(--isa-color-text-inverse); }
.section--dark :is(.t-h2, .t-h3, .t-display, h1, h2, h3), .is-style-section-dark :is(.t-h2, .t-h3, .t-display, h1, h2, h3) { color: var(--isa-color-text-inverse); }
.section__head {
display: flex; flex-direction: column; gap: .75rem;
margin-bottom: clamp(1.5rem, 3vw, 2.75rem);
}
.section__head--center { align-items: center; text-align: center; }
.section__head--center .section__desc { max-width: 42rem; }
.section__desc { color: var(--isa-color-text-muted); max-width: 36rem; }
.section__link { margin-top: .25rem; }
@media (min-width: 768px) {
.section__head--split { flex-direction: row; align-items: flex-end; justify-content: space-between; }
.section__head--split .section__link { margin: 0; }
}
/* ---------- 3. BUTTONS ---------- */
.btn, .wp-block-button__link, .wc-block-components-button, .wp-element-button {
display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
min-height: 3rem; padding: 0 1.75rem;
font-family: var(--isa-font-body);
font-size: var(--isa-text-small); font-weight: 600; line-height: 1.2;
letter-spacing: var(--isa-tracking-wide); text-transform: uppercase;
border-radius: var(--isa-radius-button);
border: 1px solid transparent;
transition: background var(--isa-motion-normal) var(--isa-ease), color var(--isa-motion-normal) var(--isa-ease), border-color var(--isa-motion-normal), transform var(--isa-motion-fast);
white-space: nowrap;
cursor: pointer;
}
.btn:active, .wp-block-button__link:active { transform: translateY(1px); }
.btn--primary, .wp-block-button__link, .wp-element-button { background: var(--isa-color-primary); color: var(--isa-color-text-inverse); }
.btn--primary:hover, .wp-block-button__link:hover, .wp-element-button:hover { background: var(--isa-color-accent); color: var(--isa-color-primary); }
.btn--gold, .is-style-gold .wp-block-button__link { background: var(--isa-color-accent); color: var(--isa-color-primary); }
.btn--gold:hover, .is-style-gold .wp-block-button__link:hover { background: var(--isa-color-text-inverse); color: var(--isa-color-primary); }
.btn--outline, .is-style-outline .wp-block-button__link { background: transparent; border-color: currentColor; color: var(--isa-color-primary); }
.btn--outline:hover, .is-style-outline .wp-block-button__link:hover { background: var(--isa-color-primary); color: var(--isa-color-text-inverse); }
.btn--outline-light, .is-style-outline-light .wp-block-button__link { background: transparent; border-color: rgba(255,255,255,.6); color: var(--isa-color-text-inverse); }
.btn--outline-light:hover, .is-style-outline-light .wp-block-button__link:hover { background: var(--isa-color-text-inverse); color: var(--isa-color-primary); }
.btn--whatsapp, .is-style-whatsapp .wp-block-button__link { background: var(--isa-color-whatsapp); color: #fff; }
.btn--whatsapp:hover, .is-style-whatsapp .wp-block-button__link:hover { background: #1DB954; color: #fff; }
/* Tombol dengan ikon WhatsApp (kelas tambahan "has-icon-whatsapp" pada Button block) — ikon via mask, tanpa SVG di konten */
.has-icon-whatsapp .wp-block-button__link::before, .btn.has-icon-whatsapp::before { content: ""; width: 1.25em; height: 1.25em; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; }
.btn--sm { min-height: 2.5rem; padding: 0 1.25rem; font-size: var(--isa-text-caption); }
.btn--block, .wp-block-button.is-block .wp-block-button__link { width: 100%; }
.link-arrow, .is-style-link-arrow .wp-block-button__link {
display: inline-flex; align-items: center; gap: .5rem;
min-height: 0; padding: 0 0 .25rem; background: transparent; border: 0; border-radius: 0;
font-size: var(--isa-text-small); font-weight: 600; letter-spacing: var(--isa-tracking-wide); text-transform: uppercase;
color: var(--isa-color-primary);
border-bottom: 1px solid var(--isa-color-accent);
transition: gap var(--isa-motion-fast), color var(--isa-motion-fast);
white-space: nowrap;
}
.link-arrow:hover, .is-style-link-arrow .wp-block-button__link:hover { gap: .9rem; color: var(--isa-color-secondary); background: transparent; }
.link-arrow::after, .is-style-link-arrow .wp-block-button__link::after { content: "→"; }
.section--dark .link-arrow, .is-style-section-dark .link-arrow, .is-style-section-dark .is-style-link-arrow .wp-block-button__link { color: var(--isa-color-text-inverse); }
.icon-btn {
display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem;
border-radius: 50%; position: relative; color: inherit;
transition: background var(--isa-motion-fast);
}
.icon-btn:hover { background: var(--isa-color-surface-alt); }
.icon-btn .badge-count {
position: absolute; top: .35rem; right: .3rem;
min-width: 1.1rem; height: 1.1rem; padding: 0 .3rem;
font-size: .65rem; font-weight: 700; line-height: 1.1rem; text-align: center;
background: var(--isa-color-accent); color: var(--isa-color-primary); border-radius: var(--isa-radius-pill);
}
/* ---------- 4. FORM DASAR (dipakai search bar, newsletter, Woo forms) ---------- */
input, select, textarea { font: inherit; color: inherit; }
.field input:not([type="checkbox"]):not([type="radio"]), .field select, .field textarea,
.wc-block-components-text-input input, .woocommerce-input-wrapper .input-text {
width: 100%; min-height: 3rem; padding: .6rem .9rem;
background: var(--isa-color-surface); border: 1px solid var(--isa-color-border); border-radius: var(--isa-radius);
transition: border-color var(--isa-motion-fast);
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--isa-color-primary); outline: none; }
/* ---------- 5. TOAST (feedback global — dipakai JS core) ---------- */
.toast {
position: fixed; left: 50%; bottom: 5.5rem; z-index: 300; transform: translate(-50%, 1rem);
padding: .8rem 1.2rem; max-width: min(92vw, 28rem);
background: var(--isa-color-primary); color: var(--isa-color-text-inverse);
border-radius: var(--isa-radius); box-shadow: var(--isa-shadow-lg);
font-size: var(--isa-text-small); opacity: 0;
transition: opacity var(--isa-motion-normal), transform var(--isa-motion-normal) var(--isa-ease);
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
/* ---------- 6. COMMERCE MODE (Settings → ISA Commerce) ---------- */
/* Mode B2C: semua elemen Partner Module disembunyikan tanpa menyisakan ruang kosong. */
body.commerce-mode-b2c .is-partner-module { display: none !important; }
/* ---------- 7. HALAMAN & EMPTY STATE (template page/single/404/index) ---------- */
.page-article > * + * { margin-block-start: var(--isa-space-5); }
.page-article .wp-block-post-title { margin-bottom: var(--isa-space-4); }
.page-article .wp-block-post-featured-image { overflow: hidden; border-radius: var(--isa-radius-card); }
.page-article .wp-block-post-content > * + * { margin-block-start: var(--isa-space-4); }
.page-article .wp-block-post-content :is(h2, h3) { margin-top: var(--isa-space-6); }
.empty-state { text-align: center; display: grid; gap: var(--isa-space-4); justify-items: center; }
.empty-state .wp-block-search { width: min(100%, 28rem); }
.empty-state .wp-block-search__inside-wrapper { border: 1px solid var(--isa-color-border); border-radius: var(--isa-radius); background: var(--isa-color-surface); padding: .25rem .25rem .25rem .9rem; }
.empty-state .wp-block-search__input { border: 0; background: transparent; min-height: 2.5rem; }
.empty-state .wp-block-search__button { min-height: 2.5rem; padding-inline: 1.1rem; }
.wp-block-query-title { margin-bottom: var(--isa-space-6); }
.wp-block-query-pagination { margin-top: var(--isa-space-7); font-size: var(--isa-text-small); }
/* ---------- Block gap WordPress di dalam baris flex/grid ---------- */
/* WordPress menandai tiap grup dengan .is-layout-flow lalu mencetak, dengan :where() sehingga
spesifisitasnya NOL:
:where(body .is-layout-flow) > * { margin-block-start: var(--wp--style--block-gap); }
Theme ini menulis hampir semua grup sebagai layout "default" (flow) di markup, lalu menatanya
ulang menjadi flex/grid lewat CSS. Kelas .is-layout-flow tetap menempel, jadi setiap anak selain
yang pertama membawa margin-atas 16px yang tidak diminta: ikon kanan header turun 16px dan tidak
lagi sebaris, baris footer melenceng, teks hero kategori tergeser, dan seterusnya.
Daftar di bawah SENGAJA hanya berisi wadah yang menata anaknya MENDATAR (flex row, atau grid
multi-kolom) dan sudah punya gap sendiri — di situ margin bawaan selalu salah. Tumpukan
vertikal seperti .hero__content, .story__body, .campaign__content dan .why-card TIDAK masuk
daftar: ketiganya memang memakai margin block gap itu sebagai jarak antar barisnya, dan
menghapusnya akan merapatkan teks. Setiap kelas di sini sudah diperiksa langsung di halaman
produksi, bukan hasil tebakan. */
:is(
.ac-card__head, .ac-quick, .ac-stats, .ac-title-row, .ac-wrap,
.catalog-hero__slide,
.announcement__inner, .cart-head__title, .cat-grid, .catalog, .co-head__title,
.drawer__cats, .drawer__head, .footer__bottom-inner, .footer__cols, .footer__group-inner,
.footer__legal, .footer__main, .header__inner, .header__left, .header__right,
.look__caption, .mega__inner, .mtoolbar, .newsletter__alt, .od-head__row,
.pd, .pd-var__head, .rv, .scroll-row, .section__head,
.section__head--split, .section__head-side, .stats, .story, .testi-summary,
.testi__author, .toolbar, .why-grid
) > * { margin-block-start: 0; margin-block-end: 0; }