/* =========================================================
KARYA MANDIRI PLAT — THEME
Single theme file. Swap the CSS variables below to re-skin
the whole site (e.g. once the real logo palette is confirmed).
========================================================= */
:root {
/* --- Color tokens (placeholder palette — replace with logo colors) --- */
--color-ink: #14181c;
--color-steel-900: #1c2733;
--color-steel-800: #253544;
--color-steel-600: #3c5164;
--color-steel-100: #e7ebee;
--color-accent: #e15b0f;
--color-accent-dark: #b8480a;
--color-accent-100: #fde7d8;
--color-bg: #f3f4f5;
--color-surface: #ffffff;
--color-line: #dadfe3;
--color-muted: #5b6670;
--color-success: #1f7a3d;
--color-error: #b3261e;
/* --- Type --- */
--font-display: "Oswald", "Arial Narrow", sans-serif;
--font-body: "Work Sans", "Segoe UI", sans-serif;
/* --- Layout --- */
--container-w: 1180px;
--radius: 4px;
--shadow-sm: 0 1px 2px rgba(20, 24, 28, 0.08);
--shadow-md: 0 6px 20px rgba(20, 24, 28, 0.12);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--font-body);
color: var(--color-ink);
background: var(--color-bg);
line-height: 1.55;
-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 {
font-family: var(--font-display);
text-transform: uppercase;
letter-spacing: 0.02em;
line-height: 1.15;
margin: 0 0 0.5em;
color: var(--color-steel-900);
}
h1 { font-size: clamp(2rem, 4vw, 3.1rem); }
h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; color: var(--color-ink); }
.container {
width: 100%;
max-width: var(--container-w);
margin: 0 auto;
padding: 0 20px;
}
.section { padding: 64px 0; }
.section--tight { padding: 40px 0; }
.section--steel {
background: var(--color-steel-900);
color: #fff;
}
.section--steel h2, .section--steel h3 { color: #fff; }
.section--surface { background: var(--color-surface); }
/* Ruler / tick-mark divider — signature motif referencing a steel measuring rule */
.tick-divider {
height: 14px;
width: 100%;
background-image: repeating-linear-gradient(
90deg,
var(--color-accent) 0 2px,
transparent 2px 24px
);
background-position: center;
opacity: 0.9;
}
.tick-divider--dense {
background-image: repeating-linear-gradient(
90deg,
var(--color-line) 0 1px,
transparent 1px 12px
);
}
/* Skip link for keyboard/screen-reader users */
.skip-link {
position: absolute;
left: -9999px;
top: 0;
background: var(--color-accent);
color: #fff;
padding: 10px 16px;
z-index: 1000;
border-radius: 0 0 4px 0;
}
.skip-link:focus { left: 0; }
/* Focus visibility everywhere */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible {
outline: 3px solid var(--color-accent);
outline-offset: 2px;
}
/* =========== Header =========== */
.site-header {
position: sticky;
top: 0;
z-index: 100;
background: var(--color-steel-900);
border-bottom: 3px solid var(--color-accent);
}
.site-header__bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 14px 0;
}
.brand {
display: flex;
align-items: center;
gap: 10px;
color: #fff;
font-family: var(--font-display);
font-size: 1.15rem;
letter-spacing: 0.03em;
text-transform: uppercase;
}
/* Logo image variant — used by build.js (with-logo brand). */
.brand--with-logo {
text-transform: none;
letter-spacing: 0;
font-size: 1rem;
gap: 12px;
}
.brand__logo {
flex: none;
display: block;
height: 44px;
width: auto;
}
.brand__logo img {
display: block;
height: 100%;
width: auto;
/* Logo original (with polaroid frame + white background area).
The frame is kept intact as part of the brand identity; the white
interior remains white even on dark navbar — that's the original
brand look. */
background: transparent;
}
.brand__wordmark {
font-family: var(--font-display);
font-weight: 600;
font-size: 1.05rem;
letter-spacing: 0.01em;
color: #fff;
line-height: 1.2;
white-space: nowrap;
}
@media (max-width: 480px) {
.brand__logo { height: 36px; }
.brand__wordmark { font-size: 0.95rem; }
}
@media (max-width: 360px) {
.brand__wordmark { display: none; }
}
.brand__mark {
width: 38px;
height: 38px;
flex: none;
background: var(--color-accent);
color: #fff;
display: grid;
place-items: center;
font-weight: 700;
border-radius: 3px;
font-family: var(--font-display);
}
.brand__sub {
display: block;
font-family: var(--font-body);
text-transform: none;
font-size: 0.7rem;
color: var(--color-accent-100);
letter-spacing: 0.03em;
line-height: 1.3;
max-width: 220px;
}
.brand--with-logo .brand__sub {
font-size: 0.68rem;
color: rgba(255, 255, 255, 0.7);
max-width: 180px;
}
@media (max-width: 600px) {
.brand--with-logo .brand__sub { display: none; }
}
.main-nav { display: flex; align-items: center; gap: 4px; }
.main-nav a {
color: #dfe4e8;
padding: 10px 12px;
font-size: 0.94rem;
border-radius: var(--radius);
}
.main-nav a:hover, .main-nav a[aria-current="page"] {
color: #fff;
background: var(--color-steel-800);
}
.header-actions { display: flex; align-items: center; gap: 10px; }
.nav-toggle {
display: none;
background: transparent;
border: 1px solid var(--color-steel-600);
color: #fff;
padding: 8px 10px;
border-radius: var(--radius);
}
/* =========== Buttons =========== */
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
justify-content: center;
font-family: var(--font-display);
text-transform: uppercase;
letter-spacing: 0.03em;
font-size: 0.92rem;
padding: 12px 20px;
border-radius: var(--radius);
border: 2px solid transparent;
cursor: pointer;
transition: transform 0.12s ease, background 0.12s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--color-accent); color: #fff; }
.btn-primary:hover { background: var(--color-accent-dark); }
.btn-secondary {
background: transparent;
border-color: var(--color-steel-900);
color: var(--color-steel-900);
}
.btn-secondary:hover { background: var(--color-steel-900); color: #fff; }
.btn-on-dark {
background: transparent;
border-color: #fff;
color: #fff;
}
.btn-on-dark:hover { background: #fff; color: var(--color-steel-900); }
.btn-block { width: 100%; }
.btn-sm { padding: 8px 14px; font-size: 0.8rem; }
/* WhatsApp icon glyph, drawn with CSS (no external icon font needed) */
.wa-glyph {
width: 16px; height: 16px; 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;
}
/* Mobile sticky WhatsApp CTA */
.sticky-wa {
position: fixed;
right: 16px;
bottom: 16px;
z-index: 200;
background: #25d366;
color: #fff;
width: 56px;
height: 56px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--shadow-md);
}
.sticky-wa .wa-glyph { width: 26px; height: 26px; }
/* =========== Hero =========== */
.hero {
background: linear-gradient(150deg, var(--color-steel-900), var(--color-steel-800) 60%);
color: #fff;
padding: 72px 0 56px;
position: relative;
overflow: hidden;
}
.hero__grid {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 40px;
align-items: center;
}
.hero__eyebrow {
display: inline-block;
color: var(--color-accent-100);
background: rgba(225, 91, 15, 0.18);
border: 1px solid rgba(225, 91, 15, 0.5);
padding: 5px 12px;
border-radius: 999px;
font-size: 0.78rem;
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 16px;
}
.hero h1 { color: #fff; margin-bottom: 0.4em; }
.hero__sub { color: #cdd6dd; font-size: 1.08rem; max-width: 46ch; }
.hero__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.hero__panel {
background: var(--color-steel-800);
border: 1px solid var(--color-steel-600);
border-radius: var(--radius);
padding: 22px;
}
.hero__panel ul { margin: 0; padding: 0; list-style: none; }
.hero__panel li {
display: flex;
gap: 10px;
padding: 10px 0;
border-bottom: 1px solid var(--color-steel-600);
color: #e7ebee;
font-size: 0.94rem;
}
.hero__panel li:last-child { border-bottom: none; }
.hero__panel .tick { color: var(--color-accent); font-weight: 700; }
/* =========== Grids / Cards ===========
IMPORTANT: Two grid systems coexist because they serve different needs:
- .grid (default, flex-based): used by homepage hero, latest articles,
etc. where horizontal centring matters.
- .grid-2 / .grid-3 / .grid-4 (grid-based): used by catalog, layanan,
category listings where children must fill the full width.
The .grid-N classes override .grid to display:grid so columns actually
apply. Without the override, parent .grid stays as flex and columns
are ignored — that's the root cause of "narrow cards" on /produk/. */
.grid {
display: flex;
flex-wrap: wrap;
gap: 14px;
justify-content: center;
}
/* Override: when .grid has a numeric column class, switch to CSS Grid
so children fill equal columns. Each direct child gets 1fr. */
.grid-2,
.grid-3,
.grid-4 {
display: grid;
}
.grid-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}
.grid-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.grid-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
}
@media (max-width: 980px) {
.grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
.grid-4, .grid-3 { grid-template-columns: 1fr; }
}
.cat-card {
background: var(--color-surface);
border: 1px solid var(--color-line);
border-radius: var(--radius);
padding: 22px;
transition: border-color .12s ease, transform .12s ease;
}
/* =========== Advantage cards (Keunggulan Kami) ===========
Semua card identik ukurannya — description text di-clamp 2 baris
sehingga tidak ada card yang lebih tinggi karena teks panjang.
IMPORTANT: parent `.grid` is `display: flex`, so we override to
grid here to make the 4-column layout actually work. */
.advantage-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
align-items: stretch;
}
@media (max-width: 980px) {
.advantage-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.advantage-grid { grid-template-columns: 1fr; }
}
.advantage-card {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
gap: 12px;
padding: 24px 22px;
height: 100%;
min-height: 250px;
}
.advantage-card__icon {
width: 44px;
height: 44px;
min-width: 44px;
min-height: 44px;
display: grid;
place-items: center;
border-radius: 10px;
background: rgba(15, 72, 125, 0.08);
color: var(--color-steel-900, #0f487d);
margin-bottom: 4px;
}
.advantage-card__icon svg {
width: 24px;
height: 24px;
display: block;
}
.advantage-card h3 {
font-size: 1.05rem;
margin: 0;
line-height: 1.3;
min-height: 2.6em; /* 2-line title slot, identical for all cards */
display: flex;
align-items: flex-start;
}
.advantage-card p {
margin: 0;
font-size: 0.92rem;
line-height: 1.5;
flex: 1; /* fills remaining height so descriptions align at bottom */
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.cat-card:hover { border-color: var(--color-accent); transform: translateY(-2px); }
.cat-card__tag {
display: inline-block;
font-size: 0.72rem;
letter-spacing: 0.06em;
color: var(--color-accent-dark);
text-transform: uppercase;
margin-bottom: 8px;
}
.product-card {
background: var(--color-surface);
border: 1px solid var(--color-line);
border-radius: var(--radius);
overflow: hidden;
display: flex;
flex-direction: column;
transition: box-shadow .12s ease, transform .12s ease;
/* No fixed width — let the parent .grid-4 / .grid-3 / .grid-2 (CSS Grid
with repeat(N, minmax(0, 1fr))) drive card sizing. A fixed width
calc(25% - 10.5px) here would override the grid and cause cards to
be too narrow on wider containers. */
}
.product-card {
background: var(--color-surface);
border: 1px solid var(--color-line);
border-radius: var(--radius);
overflow: hidden;
display: flex;
flex-direction: column;
transition: box-shadow 0.12s ease, transform 0.12s ease;
}
.product-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.product-card__img {
/* Use a 16:10 (1.6:1) container — closely matches the dominant landscape
aspect ratio of source Plat photos (~1.5:1–1.7:1 for MS, Galvanis).
Image fills the container with cover (object-fit) so the photo appears
large and impactful, not shrunken with visible letterbox. */
aspect-ratio: 3 / 2;
background: var(--color-steel-50);
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
.product-card__img img {
/* Image fills the 16:10 container. object-fit:cover scales the image up
to fill the container (image appears large), with very minor edge
cropping for non-matching aspect ratios. Photo source is square or
close to container ratio, so cropping is minimal — typically only a
few pixels at the longest edge. object-position:center keeps the
visual center. */
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
display: block;
background: var(--color-steel-50);
}
/* Product card badges — stacked at top-right of image.
Stack vertically so multiple badges don't overlap.
Each badge has a distinct color: thickness (blue), size (amber), color (gray). */
.product-card__badge {
position: absolute;
right: 10px;
background: rgba(15, 72, 125, 0.92);
color: #fff;
font-family: var(--font-display);
font-size: 0.78rem;
font-weight: 600;
padding: 5px 10px;
border-radius: 4px;
letter-spacing: 0.02em;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
pointer-events: none;
white-space: nowrap;
line-height: 1.2;
}
/* Stack 3 badges vertically (top, middle, bottom-right) */
.product-card__badge--thickness {
top: 10px;
background: rgba(15, 72, 125, 0.94); /* KMP blue */
}
.product-card__badge--grid {
top: 42px;
background: rgba(132, 60, 57, 0.94); /* KMP maroon */
}
.product-card__badge--size {
top: 74px;
background: rgba(217, 119, 6, 0.94); /* amber/orange */
}
.product-card__badge--color {
top: 106px;
background: rgba(71, 85, 105, 0.94); /* slate gray */
}
/* For cards with only some badges, ensure they stay aligned to top */
.product-card__img:has(.product-card__badge--grid):not(:has(.product-card__badge--size)) .product-card__badge--grid {
top: 10px;
}
.product-card__img:has(.product-card__badge--size):not(:has(.product-card__badge--grid)):not(:has(.product-card__badge--color)) .product-card__badge--size {
top: 42px;
}
.product-card__img:has(.product-card__badge--color):not(:has(.product-card__badge--size)) .product-card__badge--color {
top: 10px;
}
/* Legacy class kept for backwards-compat */
.product-card__thickness {
position: absolute;
top: 10px;
right: 10px;
background: rgba(15, 72, 125, 0.92);
color: #fff;
font-family: var(--font-display);
font-size: 0.78rem;
font-weight: 600;
padding: 5px 10px;
border-radius: 4px;
letter-spacing: 0.02em;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
pointer-events: none;
white-space: nowrap;
}
.product-card__body { padding: 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.product-card__body > .btn {
/* Push WA button to bottom so all buttons align across cards in the
same row, regardless of how many badges/lines the card has above. */
margin-top: auto;
min-height: 38px; /* matches .btn-sm padding 8 + 14 + 2*2 border + ~text */
align-self: stretch; /* same width regardless of inner content length */
}
/* Keep all product cards the same height per row so the WA buttons line
up at the bottom edge. Image (3:2 aspect) + body + button = fixed
block; grid stretches the card row, body fills the remainder. */
.product-card {
height: 100%;
min-height: 360px;
}
.product-card__name {
/* Allow up to 2 lines max so card heights stay predictable. */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 1.3;
max-height: 2.7em; /* 2 lines × 1.3 line-height + small slack */
}
.product-card__spec {
/* Spec line stays short. */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
max-height: 2.8em;
}
.product-card__cat {
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-muted);
}
.product-card__name { margin: 0; font-size: 1.05rem; }
.product-card__spec { font-size: 0.86rem; color: var(--color-muted); margin: 0; }
.product-card__price {
font-size: 0.86rem;
color: var(--color-steel-800);
font-weight: 600;
}
.badge {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.05em;
background: var(--color-accent-100);
color: var(--color-accent-dark);
padding: 3px 10px;
border-radius: 999px;
width: fit-content;
}
.article-card {
background: var(--color-surface);
border: 1px solid var(--color-line);
border-radius: var(--radius);
overflow: hidden;
}
.article-card__img { aspect-ratio: 16/9; background: var(--color-steel-100); }
.article-card__body { padding: 18px; }
.article-card__meta { font-size: 0.78rem; color: var(--color-muted); margin-bottom: 6px; }
/* Compact article card for homepage section (Panduan Material dan Fabrikasi).
Horizontal layout: image on left, text on right. Detail page and listing
page still use default full-size card.
IMPORTANT: parent `.grid` is `display: flex`, so we override to
grid here to make the 2-column layout actually work. */
.article-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
align-items: stretch;
}
@media (max-width: 980px) {
.article-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
.article-grid { grid-template-columns: 1fr; }
}
.article-card--compact {
display: flex;
flex-direction: row;
align-items: stretch;
height: 100%;
}
.article-card--compact .article-card__img {
flex: 0 0 200px;
width: 200px;
height: auto;
aspect-ratio: auto;
max-height: none;
overflow: hidden;
}
.article-card--compact .article-card__img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.article-card--compact .article-card__body {
padding: 14px 18px;
display: flex;
flex-direction: column;
gap: 6px;
flex: 1;
min-width: 0;
}
.article-card--compact .article-card__body h3 {
font-size: 1rem;
line-height: 1.35;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.article-card--compact .article-card__excerpt {
font-size: 0.88rem;
line-height: 1.45;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.article-card--compact .article-card__more {
margin-top: auto;
font-size: 0.85rem;
padding-top: 4px;
}
@media (max-width: 720px) {
/* Mobile falls back to vertical layout */
.article-card--compact { flex-direction: column; }
.article-card--compact .article-card__img {
flex: 0 0 auto;
width: 100%;
aspect-ratio: 16/9;
max-height: 180px;
}
}
/* =========== Catalog controls =========== */
.catalog-toolbar {
display: flex;
gap: 14px;
flex-wrap: wrap;
align-items: end;
background: var(--color-surface);
border: 1px solid var(--color-line);
border-radius: var(--radius);
padding: 18px;
margin-bottom: 26px;
}
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 0.8rem; font-weight: 600; color: var(--color-steel-800); }
.field input, .field select {
padding: 10px 12px;
border: 1px solid var(--color-line);
border-radius: var(--radius);
font-family: var(--font-body);
font-size: 0.94rem;
background: #fff;
min-width: 180px;
}
.field--grow { flex: 1; min-width: 220px; }
.state-msg {
text-align: center;
padding: 48px 20px;
color: var(--color-muted);
background: var(--color-surface);
border: 1px dashed var(--color-line);
border-radius: var(--radius);
}
.state-msg strong { display: block; color: var(--color-steel-900); margin-bottom: 6px; font-family: var(--font-display); text-transform: uppercase; }
/* =========== Breadcrumb =========== */
.breadcrumb { font-size: 0.85rem; color: var(--color-muted); margin-bottom: 18px; }
.breadcrumb a:hover { color: var(--color-accent-dark); }
.breadcrumb span[aria-hidden] { margin: 0 6px; }
/* =========== Product detail =========== */
.product-detail { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 40px; }
.product-detail__img {
/* Background removed — was previously gray letterbox behind product photo.
No background needed; image renders naturally with white page background. */
background: transparent;
border-radius: var(--radius);
overflow: hidden;
}
.product-detail__img img {
width: 100%;
height: auto;
display: block;
}
.spec-table { width: 100%; border-collapse: collapse; margin: 18px 0; }
.spec-table th, .spec-table td {
text-align: left;
padding: 10px 12px;
border-bottom: 1px solid var(--color-line);
font-size: 0.94rem;
}
.spec-table th { width: 40%; color: var(--color-muted); font-weight: 600; }
.price-note {
background: var(--color-accent-100);
border: 1px solid var(--color-accent);
color: var(--color-accent-dark);
padding: 12px 14px;
border-radius: var(--radius);
font-weight: 600;
margin: 16px 0;
}
/* =========== Steps / process =========== */
.steps { counter-reset: step; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.step { position: relative; padding-top: 8px; }
.step__num {
font-family: var(--font-display);
font-size: 2rem;
color: var(--color-accent);
display: block;
}
.step__title { font-weight: 700; margin: 4px 0; color: var(--color-steel-900); }
.step__desc { color: var(--color-muted); font-size: 0.92rem; margin: 0; }
/* =========== FAQ =========== */
.faq-item {
background: var(--color-surface);
border: 1px solid var(--color-line);
border-radius: var(--radius);
margin-bottom: 10px;
overflow: hidden;
}
.faq-item summary {
cursor: pointer;
padding: 16px 18px;
font-weight: 600;
list-style: none;
display: flex;
justify-content: space-between;
gap: 12px;
color: var(--color-steel-900);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
content: "+";
color: var(--color-accent);
font-family: var(--font-display);
font-size: 1.2rem;
}
.faq-item[open] summary::after { content: "–"; }
.faq-item p { padding: 0 18px 16px; margin: 0; color: var(--color-muted); }
/* =========== Home contact section ===========
Info list on left (compact), Google Maps iframe on right at 16:9
landscape ratio. Map gets ~65% width so it feels landscape not portrait. */
.home-contact-grid {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
align-items: start;
}
.home-contact-info {
display: flex;
flex-direction: column;
}
@media (min-width: 860px) {
.home-contact-grid {
grid-template-columns: minmax(280px, 0.85fr) 2fr;
gap: 32px;
align-items: start;
}
}
/* Landscape map variant — 16:9 ratio via aspect-ratio on the iframe.
No fixed height on container: aspect-ratio drives the size cleanly.
`width: 100%; aspect-ratio: 16/9` is sufficient — the iframe renders
at exactly (width × 9/16) tall, no leftover space below. */
.map-embed--landscape {
margin-top: 0;
}
.map-embed--landscape iframe {
width: 100%;
border: 0;
display: block;
aspect-ratio: 16/9;
min-height: 280px;
}
@media (min-width: 860px) {
.map-embed--landscape iframe { min-height: 380px; }
}
/* =========== Forms (contact) =========== */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.contact-form { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius); padding: 24px; }
.form-row { margin-bottom: 16px; display: flex; flex-direction: column; gap: 6px; }
.form-row label { font-weight: 600; font-size: 0.9rem; }
.form-row input, .form-row select, .form-row textarea {
padding: 11px 12px;
border: 1px solid var(--color-line);
border-radius: var(--radius);
font-family: var(--font-body);
font-size: 0.96rem;
}
.form-row textarea { resize: vertical; min-height: 110px; }
.form-hint { font-size: 0.8rem; color: var(--color-muted); }
.form-status { margin-top: 12px; padding: 10px 12px; border-radius: var(--radius); font-size: 0.9rem; display: none; }
.form-status.is-success { display: block; background: #e9f6ed; color: var(--color-success); border: 1px solid var(--color-success); }
.form-status.is-error { display: block; background: #fbeceb; color: var(--color-error); border: 1px solid var(--color-error); }
.info-list { list-style: none; margin: 0; padding: 0; }
.info-list li { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--color-line); }
.info-list strong { display: block; color: var(--color-steel-900); }
.map-embed {
border: 1px solid var(--color-line);
border-radius: var(--radius);
overflow: hidden;
margin-top: 18px;
position: relative;
}
.map-embed iframe {
width: 100%;
height: 380px;
border: 0;
display: block;
}
@media (min-width: 720px) {
.map-embed iframe { height: 540px; }
}
/* =========== Footer =========== */
.site-footer { background: var(--color-ink); color: #c7ced3; padding: 48px 0 24px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: 32px; }
.footer-grid h4 { color: #fff; font-size: 0.95rem; margin-bottom: 14px; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: 8px; font-size: 0.92rem; }
.footer-grid a:hover { color: var(--color-accent); }
.footer-bottom {
border-top: 1px solid #2a3038;
margin-top: 32px;
padding-top: 18px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 10px;
font-size: 0.82rem;
color: #899299;
}
/* =========== 404 =========== */
.error-page { text-align: center; padding: 96px 20px; }
.error-page .code {
font-family: var(--font-display);
font-size: clamp(4rem, 12vw, 8rem);
color: var(--color-accent);
line-height: 1;
}
/* =========== Utility =========== */
.text-muted { color: var(--color-muted); }
.mt-0 { margin-top: 0; }
.center { text-align: center; }
.eyebrow {
display: inline-block;
font-size: 0.78rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-accent-dark);
margin-bottom: 10px;
font-weight: 700;
}
.section-head { max-width: 640px; margin: 0 auto 32px; text-align: center; }
.section--steel .eyebrow { color: var(--color-accent-100); }
/* =========== Responsive =========== */
@media (max-width: 980px) {
.hero__grid { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(2, 1fr); }
.steps { grid-template-columns: repeat(2, 1fr); }
.product-detail { grid-template-columns: 1fr; }
.contact-grid { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
.main-nav { display: none; }
.nav-toggle { display: inline-flex; align-items: center; gap: 6px; }
.site-header.is-open .main-nav {
display: flex;
flex-direction: column;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--color-steel-900);
padding: 10px 20px 18px;
border-bottom: 3px solid var(--color-accent);
}
.steps { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr; }
.sticky-wa { display: flex; }
.hero { padding: 48px 0 40px; }
}
@media (min-width: 721px) {
.header-actions .btn-sm-mobile-only { display: none; }
}
/* Print: keep it simple & readable */
@media print {
.site-header, .sticky-wa, .site-footer { display: none; }
}
/* ---------------------------------------------------------------- */
/* PAGE TRANSITION ANIMATIONS */
/* ---------------------------------------------------------------- */
/* Fade-in main content on load */
@keyframes pageFadeIn {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
main#main {
animation: pageFadeIn 0.45s ease-out both;
}
/* Slightly delay hero content for staged reveal */
.hero__grid > div:first-child { animation: pageFadeIn 0.6s ease-out 0.05s both; }
.hero__panel { animation: pageFadeIn 0.6s ease-out 0.18s both; }
/* Fade-in product cards / category cards on scroll */
@keyframes cardFadeIn {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
.product-card, .cat-card, .article-card, .vm-card {
animation: cardFadeIn 0.5s ease-out both;
}
.product-card:nth-child(2) { animation-delay: 0.05s; }
.product-card:nth-child(3) { animation-delay: 0.10s; }
.product-card:nth-child(4) { animation-delay: 0.15s; }
.product-card:nth-child(5) { animation-delay: 0.20s; }
.product-card:nth-child(6) { animation-delay: 0.25s; }
/* ---------- Scroll-triggered reveal (section-level) ----------
Sections are visible by default. When JS adds `.is-visible`, the entrance
animation plays (fade + slide). If JS fails to load, content stays
visible — no blank sections, no degraded UX. */
@keyframes sectionReveal {
from { opacity: 0; transform: translateY(18px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes cardReveal {
from { opacity: 0; transform: translateY(20px) scale(0.96); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
main#main > section.is-visible > .container > .section-head,
main#main > section.is-visible > .container > .grid,
main#main > section.is-visible > .container > .steps,
main#main > section.is-visible > .container > .home-contact-grid,
main#main > section.is-visible > .container > details,
main#main > section.is-visible > .container > .map-embed {
animation: sectionReveal 0.55s ease-out both;
}
/* ---------- Card reveal — staggered left-to-right ----------
Every card type that lives inside a homepage section gets a staggered
entrance: card 1 first, card 2 slightly later, etc. With 100ms
increments the wave feels deliberate (not snappy, not slow). When the
section is re-entered from below, the animation replays. */
.advantage-card,
.article-card--compact,
.product-card,
.cat-card,
.advantage-grid > *,
.article-grid > *,
.step,
details.faq-item {
animation: cardReveal 0.55s ease-out both;
}
/* Stagger via :nth-child. Works inside any container that has the card as
a direct child. 100ms per item gives a clear left-to-right wave on
grids with up to ~8 items. */
.advantage-card:nth-child(1),
.advantage-grid > *:nth-child(1),
.article-card--compact:nth-child(1),
.article-grid > *:nth-child(1) { animation-delay: 0.06s; }
.advantage-card:nth-child(2),
.advantage-grid > *:nth-child(2),
.article-card--compact:nth-child(2),
.article-grid > *:nth-child(2) { animation-delay: 0.16s; }
.advantage-card:nth-child(3),
.advantage-grid > *:nth-child(3),
.article-card--compact:nth-child(3),
.article-grid > *:nth-child(3) { animation-delay: 0.26s; }
.advantage-card:nth-child(4),
.advantage-grid > *:nth-child(4),
.article-card--compact:nth-child(4),
.article-grid > *:nth-child(4) { animation-delay: 0.36s; }
.advantage-card:nth-child(5),
.advantage-grid > *:nth-child(5),
.article-card--compact:nth-child(5),
.article-grid > *:nth-child(5) { animation-delay: 0.46s; }
.advantage-card:nth-child(6),
.advantage-grid > *:nth-child(6),
.article-card--compact:nth-child(6),
.article-grid > *:nth-child(6) { animation-delay: 0.56s; }
.advantage-card:nth-child(7),
.advantage-grid > *:nth-child(7),
.article-card--compact:nth-child(7),
.article-grid > *:nth-child(7) { animation-delay: 0.66s; }
.advantage-card:nth-child(8),
.advantage-grid > *:nth-child(8),
.article-card--compact:nth-child(8),
.article-grid > *:nth-child(8) { animation-delay: 0.76s; }
/* Steps (Alur Layanan): top-to-bottom since they stack vertically */
.step:nth-child(1) { animation-delay: 0.10s; }
.step:nth-child(2) { animation-delay: 0.22s; }
.step:nth-child(3) { animation-delay: 0.34s; }
.step:nth-child(4) { animation-delay: 0.46s; }
/* FAQ items: top-to-bottom (vertical list) */
details.faq-item:nth-child(1) { animation-delay: 0.06s; }
details.faq-item:nth-child(2) { animation-delay: 0.14s; }
details.faq-item:nth-child(3) { animation-delay: 0.22s; }
details.faq-item:nth-child(4) { animation-delay: 0.30s; }
details.faq-item:nth-child(5) { animation-delay: 0.38s; }
details.faq-item:nth-child(6) { animation-delay: 0.46s; }
details.faq-item:nth-child(7) { animation-delay: 0.54s; }
details.faq-item:nth-child(8) { animation-delay: 0.62s; }
/* Generic grid children (catalog, etc.) — staggered left-to-right */
.product-grid > *:nth-child(1),
.cat-card:nth-child(1) { animation-delay: 0.06s; }
.product-grid > *:nth-child(2),
.cat-card:nth-child(2) { animation-delay: 0.16s; }
.product-grid > *:nth-child(3),
.cat-card:nth-child(3) { animation-delay: 0.26s; }
.product-grid > *:nth-child(4),
.cat-card:nth-child(4) { animation-delay: 0.36s; }
.product-grid > *:nth-child(5),
.cat-card:nth-child(5) { animation-delay: 0.46s; }
.product-grid > *:nth-child(6),
.cat-card:nth-child(6) { animation-delay: 0.56s; }
.product-grid > *:nth-child(7),
.cat-card:nth-child(7) { animation-delay: 0.66s; }
.product-grid > *:nth-child(8),
.cat-card:nth-child(8) { animation-delay: 0.76s; }
/* Smooth link hover transitions site-wide */
a, button, .btn, .product-card, .cat-card, .article-card {
transition: transform 0.18s ease-out, box-shadow 0.18s ease-out,
color 0.18s ease-out, background-color 0.18s ease-out,
border-color 0.18s ease-out, opacity 0.18s ease-out;
}
/* Header shrinks slightly on scroll (handled via JS in main.js) */
.site-header.is-scrolled {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}
/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* ---------------------------------------------------------------- */
/* VISI & MISI STYLING (Tentang page) */
/* ---------------------------------------------------------------- */
.vm-grid {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
margin-top: 24px;
}
@media (min-width: 900px) {
.vm-grid {
grid-template-columns: 1fr 1.4fr;
}
}
.vm-card {
background: var(--color-surface);
border: 1px solid var(--color-outline-variant);
border-radius: var(--radius);
padding: 28px 32px;
position: relative;
}
.vm-card--visi {
background: linear-gradient(135deg, var(--color-surface-container-lowest) 0%, var(--color-surface-container) 100%);
border-left: 4px solid var(--color-primary);
}
.vm-card--misi {
background: linear-gradient(135deg, var(--color-surface-container-lowest) 0%, var(--color-surface-container) 100%);
border-left: 4px solid var(--color-secondary);
}
.vm-card__label {
display: inline-block;
font-family: var(--font-display);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-primary);
background: var(--color-primary-container);
padding: 6px 14px;
border-radius: 999px;
margin-bottom: 16px;
}
.vm-card--misi .vm-card__label {
color: var(--color-secondary);
background: rgba(132, 60, 57, 0.12);
}
.vm-card__quote {
font-family: var(--font-display);
font-size: 1.35rem;
line-height: 1.45;
font-weight: 500;
font-style: italic;
color: var(--color-on-surface);
margin: 0;
padding: 8px 0 0;
}
.vm-card__quote::before {
content: "\201C";
font-size: 2.5rem;
line-height: 0;
color: var(--color-primary);
margin-right: 4px;
vertical-align: -0.4em;
}
.vm-card__quote::after {
content: "\201D";
font-size: 2.5rem;
line-height: 0;
color: var(--color-primary);
margin-left: 2px;
vertical-align: -0.55em;
}
.vm-card__list {
margin: 0;
padding-left: 1.2em;
color: var(--color-on-surface);
}
.vm-card__list li {
margin-bottom: 14px;
line-height: 1.65;
padding-left: 4px;
}
.vm-card__list li::marker {
color: var(--color-secondary);
font-weight: 700;
}
.vm-card__list li:last-child { margin-bottom: 0; }
/* ============================================================ */
/* Featured Special Card — large 1-per-row hero card */
/* Used for "very special" products competitors don't carry */
/* ============================================================ */
/* NOTE: Image is pre-padded to 16:10 (1280×800) so object-fit:contain
fills the container naturally without cropping or awkward padding. */
.featured-special {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
gap: 0;
background: linear-gradient(135deg, #1c2733 0%, #2c3e50 100%);
border-radius: 12px;
overflow: hidden;
border: 2px solid var(--color-accent);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
margin: 24px 0;
color: #fff;
transition: transform 0.25s ease-out, box-shadow 0.25s ease-out;
}
.featured-special:hover {
transform: translateY(-2px);
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.32);
}
.featured-special__img {
position: relative;
display: block;
background: #ffffff;
aspect-ratio: 16 / 10;
max-height: 280px;
overflow: hidden;
}
.featured-special__img img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
background: var(--color-steel-100);
}
.featured-special__ribbon {
position: absolute;
top: 16px;
left: 16px;
background: var(--color-accent);
color: #fff;
font-family: var(--font-display);
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 8px 14px;
border-radius: 4px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
z-index: 2;
}
.featured-special__body {
padding: 20px 24px;
display: flex;
flex-direction: column;
gap: 12px;
justify-content: center;
}
.featured-special__cat {
display: inline-block;
font-size: 0.78rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #ffb86b;
font-weight: 700;
margin-bottom: 4px;
}
.featured-special__title {
font-family: var(--font-display);
font-size: 1.45rem;
font-weight: 700;
line-height: 1.15;
margin: 0;
color: #fff;
}
.featured-special__title a {
color: #fff;
text-decoration: none;
}
.featured-special__title a:hover {
color: #ffb86b;
}
.featured-special__desc {
font-size: 0.88rem;
line-height: 1.6;
color: #cdd6dd;
margin: 8px 0 12px;
}
.featured-special__specs {
display: flex;
flex-wrap: wrap;
gap: 10px 18px;
margin: 4px 0 8px;
padding: 12px 0;
border-top: 1px solid rgba(255, 255, 255, 0.15);
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.featured-special__spec {
font-size: 0.88rem;
color: #cdd6dd;
}
.featured-special__spec strong {
color: #fff;
font-weight: 600;
margin-right: 4px;
}
.featured-special__price {
font-family: var(--font-display);
font-size: 1rem;
color: #ffb86b;
margin: 4px 0 12px;
}
.featured-special__actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 8px;
}
.featured-special__actions .btn-primary {
background: var(--color-accent);
color: #fff;
}
.featured-special__actions .btn-secondary {
background: transparent;
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.4);
}
.featured-special__actions .btn-secondary:hover {
background: rgba(255, 255, 255, 0.1);
border-color: #fff;
}
/* Responsive: stack image above body on mobile */ */
@media (max-width: 720px) {
.nav-toggle { display: inline-flex; align-items: center; gap: 6px; }
.site-header.is-open .main-nav {
display: flex;
flex-direction: column;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--color-steel-900);
padding: 10px 20px 18px;
border-bottom: 3px solid var(--color-accent);
}
.steps { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr; }
.sticky-wa { display: flex; }
.hero { padding: 48px 0 40px; }
}
@media (min-width: 721px) {
.header-actions .btn-sm-mobile-only { display: none; }
}
/* Print: keep it simple & readable */
@media print {
.site-header, .sticky-wa, .site-footer { display: none; }
}
/* ---------------------------------------------------------------- */
/* PAGE TRANSITION ANIMATIONS */
/* ---------------------------------------------------------------- */
/* Fade-in main content on load */
@keyframes pageFadeIn {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
main#main {
animation: pageFadeIn 0.45s ease-out both;
}
/* Slightly delay hero content for staged reveal */
.hero__grid > div:first-child { animation: pageFadeIn 0.6s ease-out 0.05s both; }
.hero__panel { animation: pageFadeIn 0.6s ease-out 0.18s both; }
/* Fade-in product cards / category cards on scroll */
@keyframes cardFadeIn {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
.product-card, .cat-card, .article-card, .vm-card {
animation: cardFadeIn 0.5s ease-out both;
}
.product-card:nth-child(2) { animation-delay: 0.05s; }
.product-card:nth-child(3) { animation-delay: 0.10s; }
.product-card:nth-child(4) { animation-delay: 0.15s; }
.product-card:nth-child(5) { animation-delay: 0.20s; }
.product-card:nth-child(6) { animation-delay: 0.25s; }
/* ---------- Scroll-triggered reveal (section-level) ----------
Sections are visible by default. When JS adds `.is-visible`, the entrance
animation plays (fade + slide). If JS fails to load, content stays
visible — no blank sections, no degraded UX. */
@keyframes sectionReveal {
from { opacity: 0; transform: translateY(18px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes cardReveal {
from { opacity: 0; transform: translateY(20px) scale(0.96); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
main#main > section.is-visible > .container > .section-head,
main#main > section.is-visible > .container > .grid,
main#main > section.is-visible > .container > .steps,
main#main > section.is-visible > .container > .home-contact-grid,
main#main > section.is-visible > .container > details,
main#main > section.is-visible > .container > .map-embed {
animation: sectionReveal 0.55s ease-out both;
}
/* ---------- Card reveal — staggered left-to-right ----------
Every card type that lives inside a homepage section gets a staggered
entrance: card 1 first, card 2 slightly later, etc. With 100ms
increments the wave feels deliberate (not snappy, not slow). When the
section is re-entered from below, the animation replays. */
.advantage-card,
.article-card--compact,
.product-card,
.cat-card,
.advantage-grid > *,
.article-grid > *,
.step,
details.faq-item {
animation: cardReveal 0.55s ease-out both;
}
/* Stagger via :nth-child. Works inside any container that has the card as
a direct child. 100ms per item gives a clear left-to-right wave on
grids with up to ~8 items. */
.advantage-card:nth-child(1),
.advantage-grid > *:nth-child(1),
.article-card--compact:nth-child(1),
.article-grid > *:nth-child(1) { animation-delay: 0.06s; }
.advantage-card:nth-child(2),
.advantage-grid > *:nth-child(2),
.article-card--compact:nth-child(2),
.article-grid > *:nth-child(2) { animation-delay: 0.16s; }
.advantage-card:nth-child(3),
.advantage-grid > *:nth-child(3),
.article-card--compact:nth-child(3),
.article-grid > *:nth-child(3) { animation-delay: 0.26s; }
.advantage-card:nth-child(4),
.advantage-grid > *:nth-child(4),
.article-card--compact:nth-child(4),
.article-grid > *:nth-child(4) { animation-delay: 0.36s; }
.advantage-card:nth-child(5),
.advantage-grid > *:nth-child(5),
.article-card--compact:nth-child(5),
.article-grid > *:nth-child(5) { animation-delay: 0.46s; }
.advantage-card:nth-child(6),
.advantage-grid > *:nth-child(6),
.article-card--compact:nth-child(6),
.article-grid > *:nth-child(6) { animation-delay: 0.56s; }
.advantage-card:nth-child(7),
.advantage-grid > *:nth-child(7),
.article-card--compact:nth-child(7),
.article-grid > *:nth-child(7) { animation-delay: 0.66s; }
.advantage-card:nth-child(8),
.advantage-grid > *:nth-child(8),
.article-card--compact:nth-child(8),
.article-grid > *:nth-child(8) { animation-delay: 0.76s; }
/* Steps (Alur Layanan): top-to-bottom since they stack vertically */
.step:nth-child(1) { animation-delay: 0.10s; }
.step:nth-child(2) { animation-delay: 0.22s; }
.step:nth-child(3) { animation-delay: 0.34s; }
.step:nth-child(4) { animation-delay: 0.46s; }
/* FAQ items: top-to-bottom (vertical list) */
details.faq-item:nth-child(1) { animation-delay: 0.06s; }
details.faq-item:nth-child(2) { animation-delay: 0.14s; }
details.faq-item:nth-child(3) { animation-delay: 0.22s; }
details.faq-item:nth-child(4) { animation-delay: 0.30s; }
details.faq-item:nth-child(5) { animation-delay: 0.38s; }
details.faq-item:nth-child(6) { animation-delay: 0.46s; }
details.faq-item:nth-child(7) { animation-delay: 0.54s; }
details.faq-item:nth-child(8) { animation-delay: 0.62s; }
/* Generic grid children (catalog, etc.) — staggered left-to-right */
.product-grid > *:nth-child(1),
.cat-card:nth-child(1) { animation-delay: 0.06s; }
.product-grid > *:nth-child(2),
.cat-card:nth-child(2) { animation-delay: 0.16s; }
.product-grid > *:nth-child(3),
.cat-card:nth-child(3) { animation-delay: 0.26s; }
.product-grid > *:nth-child(4),
.cat-card:nth-child(4) { animation-delay: 0.36s; }
.product-grid > *:nth-child(5),
.cat-card:nth-child(5) { animation-delay: 0.46s; }
.product-grid > *:nth-child(6),
.cat-card:nth-child(6) { animation-delay: 0.56s; }
.product-grid > *:nth-child(7),
.cat-card:nth-child(7) { animation-delay: 0.66s; }
.product-grid > *:nth-child(8),
.cat-card:nth-child(8) { animation-delay: 0.76s; }
/* Smooth link hover transitions site-wide */
a, button, .btn, .product-card, .cat-card, .article-card {
transition: transform 0.18s ease-out, box-shadow 0.18s ease-out,
color 0.18s ease-out, background-color 0.18s ease-out,
border-color 0.18s ease-out, opacity 0.18s ease-out;
}
/* Header shrinks slightly on scroll (handled via JS in main.js) */
.site-header.is-scrolled {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}
/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* ---------------------------------------------------------------- */
/* VISI & MISI STYLING (Tentang page) */
/* ---------------------------------------------------------------- */
.vm-grid {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
margin-top: 24px;
}
@media (min-width: 900px) {
.vm-grid {
grid-template-columns: 1fr 1.4fr;
}
}
.vm-card {
background: var(--color-surface);
border: 1px solid var(--color-outline-variant);
border-radius: var(--radius);
padding: 28px 32px;
position: relative;
}
.vm-card--visi {
background: linear-gradient(135deg, var(--color-surface-container-lowest) 0%, var(--color-surface-container) 100%);
border-left: 4px solid var(--color-primary);
}
.vm-card--misi {
background: linear-gradient(135deg, var(--color-surface-container-lowest) 0%, var(--color-surface-container) 100%);
border-left: 4px solid var(--color-secondary);
}
.vm-card__label {
display: inline-block;
font-family: var(--font-display);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-primary);
background: var(--color-primary-container);
padding: 6px 14px;
border-radius: 999px;
margin-bottom: 16px;
}
.vm-card--misi .vm-card__label {
color: var(--color-secondary);
background: rgba(132, 60, 57, 0.12);
}
.vm-card__quote {
font-family: var(--font-display);
font-size: 1.35rem;
line-height: 1.45;
font-weight: 500;
font-style: italic;
color: var(--color-on-surface);
margin: 0;
padding: 8px 0 0;
}
.vm-card__quote::before {
content: "\201C";
font-size: 2.5rem;
line-height: 0;
color: var(--color-primary);
margin-right: 4px;
vertical-align: -0.4em;
}
.vm-card__quote::after {
content: "\201D";
font-size: 2.5rem;
line-height: 0;
color: var(--color-primary);
margin-left: 2px;
vertical-align: -0.55em;
}
.vm-card__list {
margin: 0;
padding-left: 1.2em;
color: var(--color-on-surface);
}
.vm-card__list li {
margin-bottom: 14px;
line-height: 1.65;
padding-left: 4px;
}
.vm-card__list li::marker {
color: var(--color-secondary);
font-weight: 700;
}
.vm-card__list li:last-child { margin-bottom: 0; }
/* ============================================================ */
/* Featured Special Card — large 1-per-row hero card */
/* Used for "very special" products competitors don't carry */
/* ============================================================ */
.featured-special {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
gap: 0;
background: linear-gradient(135deg, #1c2733 0%, #2c3e50 100%);
border-radius: 12px;
overflow: hidden;
border: 2px solid var(--color-accent);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
margin: 24px 0;
color: #fff;
transition: transform 0.25s ease-out, box-shadow 0.25s ease-out;
}
.featured-special:hover {
transform: translateY(-2px);
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.32);
}
.featured-special__img {
position: relative;
display: block;
background: #ffffff;
/* No fixed aspect ratio — let the image dictate the height naturally.
image is `object-fit: cover` so it fills whatever container shape
the grid produces, but max-height keeps it reasonable. */
min-height: 360px;
max-height: 520px;
overflow: hidden;
}
.featured-special__img img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
background: var(--color-steel-100);
}
.featured-special__ribbon {
position: absolute;
top: 16px;
left: 16px;
background: var(--color-accent);
color: #fff;
font-family: var(--font-display);
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 8px 14px;
border-radius: 4px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
z-index: 2;
}
.featured-special__body {
padding: 36px 40px;
display: flex;
flex-direction: column;
gap: 12px;
justify-content: center;
min-height: 360px;
}
.featured-special__cat {
display: inline-block;
font-size: 0.78rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #ffb86b;
font-weight: 700;
margin-bottom: 4px;
}
.featured-special__title {
font-family: var(--font-display);
font-size: 1.95rem;
font-weight: 700;
line-height: 1.15;
margin: 0;
color: #fff;
}
.featured-special__title a {
color: #fff;
text-decoration: none;
}
.featured-special__title a:hover {
color: #ffb86b;
}
.featured-special__desc {
font-size: 1rem;
line-height: 1.6;
color: #cdd6dd;
margin: 8px 0 12px;
}
.featured-special__specs {
display: flex;
flex-wrap: wrap;
gap: 10px 18px;
margin: 4px 0 8px;
padding: 12px 0;
border-top: 1px solid rgba(255, 255, 255, 0.15);
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.featured-special__spec {
font-size: 0.88rem;
color: #cdd6dd;
}
.featured-special__spec strong {
color: #fff;
font-weight: 600;
margin-right: 4px;
}
.featured-special__price {
font-family: var(--font-display);
font-size: 1rem;
color: #ffb86b;
margin: 4px 0 12px;
}
.featured-special__actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 8px;
}
.featured-special__actions .btn-primary {
background: var(--color-accent);
color: #fff;
}
.featured-special__actions .btn-secondary {
background: transparent;
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.4);
}
.featured-special__actions .btn-secondary:hover {
background: rgba(255, 255, 255, 0.1);
border-color: #fff;
}
/* Responsive: stack image above body on mobile */ */
/* ============ MOBILE-FRIENDLY FIXES v42 ============ */
/* Header logo padding on mobile */
@media (max-width: 720px) {
.site-header__bar {
padding: 10px 0;
gap: 8px;
}
.container.site-header__bar {
padding-left: 12px;
padding-right: 12px;
}
.brand__logo img {
max-height: 40px;
width: auto;
}
.brand__wordmark {
font-size: 0.9rem;
}
}
/* Hide WhatsApp button text on mobile, show only icon */
@media (max-width: 720px) {
.header-actions .btn-sm span:not(.wa-glyph) {
display: none;
}
.header-actions .btn-sm {
padding: 8px 12px;
font-size: 0;
}
.header-actions .btn-sm .wa-glyph {
margin: 0;
}
.header-actions .nav-toggle {
padding: 6px 10px;
font-size: 0.85rem;
}
}
/* Product card: better text handling on mobile */
@media (max-width: 720px) {
.product-card__name {
font-size: 0.85rem;
line-height: 1.3;
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: auto;
}
.product-card__spec {
font-size: 0.8rem;
}
.product-card__body {
padding: 12px;
}
}
/* Featured special: stack vertical on mobile */
@media (max-width: 720px) {
.featured-special {
grid-template-columns: 1fr !important;
margin: 16px 0;
}
.featured-special__img {
max-height: 200px;
aspect-ratio: 16 / 9;
}
.featured-special__body {
padding: 18px 20px 22px;
}
.featured-special__title {
font-size: 1.2rem;
}
.featured-special__desc {
font-size: 0.9rem;
}
.featured-special__ribbon {
top: 8px;
left: 8px;
font-size: 0.7rem;
padding: 4px 8px;
}
}
/* Catalog toolbar: stack on mobile */
@media (max-width: 720px) {
.catalog-toolbar {
flex-direction: column;
align-items: stretch;
}
.catalog-toolbar .field {
width: 100%;
}
}
/* ============ v42.1 — DESKTOP STICKY-WA + MOBILE LOGO PADDING ============ */
/* Make .sticky-wa visible on desktop too (default flex) */
.sticky-wa { display: flex !important; }
/* On mobile, slightly smaller */
@media (max-width: 720px) {
.sticky-wa { width: 52px !important; height: 52px !important; right: 12px !important; bottom: 12px !important; }
}
/* Logo container padding — fix mobile logo too close to edge */
@media (max-width: 720px) {
.container.site-header__bar,
.container.site-header.is-open {
padding-left: 16px !important;
padding-right: 12px !important;
}
.brand {
gap: 10px !important;
flex-shrink: 0;
}
.brand__logo {
margin-left: 0 !important;
}
.brand__wordmark {
line-height: 1.1 !important;
}
}
/* Make 2-column content sections stack on mobile */
@media (max-width: 720px) {
.vm-grid,
.home-contact-grid,
.contact-grid {
grid-template-columns: 1fr !important;
}
.vm-grid > *,
.home-contact-grid > *,
}
/* Footer left-padding on mobile */
@media (max-width: 720px) {
.site-footer .container {
padding-left: 16px !important;
padding-right: 16px !important;
}
}
/* ============ v42.2 — HORIZONTAL SCROLL FIX ============ */
/* Global safety: prevent horizontal scroll on any viewport */
/* Use overflow-x: clip instead of hidden to NOT break position:sticky on descendant elements */
html, body {
overflow-x: clip;
max-width: 100vw;
}
/* Allow vertical scroll for sticky behavior to work */
html, body {
overflow-y: visible;
}
/* Allow long content to wrap, not push layout */
body { word-wrap: break-word; overflow-wrap: break-word; }
/* Images, tables, iframes, embedded content should never overflow */
img, table, iframe, video, embed, object, svg, .map-embed {
max-width: 100% !important;
height: auto;
}
/* Grids/flex containers: prevent children from forcing horizontal overflow */
.grid, .grid-2, .grid-3, .grid-4, .article-grid, .catalog-toolbar,
.steps, .product-detail, .contact-grid, .footer-grid, .home-contact-grid,
.vm-grid, .advantage-grid, .breadcrumb {
min-width: 0;
max-width: 100%;
}
/* Catalog toolbar fields: stack on small viewports */
@media (max-width: 720px) {
.catalog-toolbar {
flex-wrap: wrap !important;
}
.catalog-toolbar .field,
.catalog-toolbar .field--grow {
flex: 1 1 100% !important;
min-width: 0 !important;
width: 100% !important;
margin-bottom: 8px;
}
/* Stack breadcrumb to wrap nicely */
.breadcrumb {
flex-wrap: wrap !important;
font-size: 0.85rem;
line-height: 1.4;
}
/* Allow long words to break */
.field input, .field select, .field textarea {
min-width: 0 !important;
max-width: 100%;
}
}
/* iPhone 16 viewport (393px) and smaller — extra safety */
@media (max-width: 480px) {
.container {
padding-left: 14px !important;
padding-right: 14px !important;
}
.product-card__name {
font-size: 0.8rem !important;
line-height: 1.25 !important;
}
.product-card__spec {
font-size: 0.75rem !important;
}
}
/* ============ v42.3 — MOBILE PADDING GENEROUS ============ */
/* iPhone-class viewport (≤480px) and intermediate mobile (≤720px):
increase container side padding for breathing room */
@media (max-width: 720px) {
.container {
padding-left: 20px !important;
padding-right: 20px !important;
}
.container.site-header__bar,
.container.site-header.is-open {
padding-left: 20px !important;
padding-right: 20px !important;
}
.site-footer .container {
padding-left: 20px !important;
padding-right: 20px !important;
}
.catalog-toolbar {
padding: 14px !important;
}
.product-card__body {
padding: 14px !important;
}
.article-card__body {
padding: 18px !important;
}
.breadcrumb {
padding: 4px 0 !important;
line-height: 1.5 !important;
font-size: 0.88rem;
}
/* Section-head text bigger padding */
.section-head {
padding: 0 4px;
}
.section-head h1 {
line-height: 1.25;
margin-bottom: 10px;
}
.section-head p {
line-height: 1.55;
}
}
@media (max-width: 480px) {
/* Even more breathing room on small phones (iPhone SE, etc.) */
.container {
padding-left: 18px !important;
padding-right: 18px !important;
}
.product-card__body {
padding: 12px !important;
}
.catalog-toolbar {
padding: 12px !important;
}
}
@media (max-width: 360px) {
.container {
padding-left: 14px !important;
padding-right: 14px !important;
}
}
/* ============ v42.4 — UNIFIED CONTAINER PADDING (LAST WORD) ============ */
/* This is the LAST rule in file → wins cascade. Always 20px mobile padding. */
@media (max-width: 720px) {
.container,
.container.section,
.container.site-header__bar,
.container.site-header.is-open,
.site-footer .container {
padding-left: 20px !important;
padding-right: 20px !important;
}
/* Section horizontal padding too (sometimes section overrides container) */
.section {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Sections with section--tight */
.section--tight {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Hero section padding */
.hero {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Sub containers inside main (faq-item, info-list, etc) */
.faq-item p { padding-left: 0 !important; padding-right: 0 !important; }
.info-list { padding-left: 0 !important; padding-right: 0 !important; }
}
@media (max-width: 480px) {
.container,
.container.section,
.container.site-header__bar,
.container.site-header.is-open,
.site-footer .container {
padding-left: 18px !important;
padding-right: 18px !important;
}
}
/* Global breathing room for inline sections without .container wrapper */
@media (max-width: 720px) {
.container.section {
padding-top: 24px !important;
padding-bottom: 24px !important;
}
/* Section-head: ensure consistent spacing */
.section-head {
padding-left: 0 !important;
padding-right: 0 !important;
margin-bottom: 24px !important;
}
/* Breadcrumb top padding */
.breadcrumb { margin-bottom: 16px !important; }
/* Card body extra room on small viewport */
.product-card__body { padding: 16px !important; }
.article-card__body { padding: 16px !important; }
/* Footer-bottom padding */
.footer-bottom { padding: 18px 20px !important; }
.footer-grid { padding: 18px 20px !important; }
}
/* ============ v42.6 — KONTAK ALAMAT + HEADER STICKY ============ */
/* Allow text wrap in contact info list (alamat panjang, jam operasional) */
.info-list li,
.contact-detail li,
.contact-info li,
ul li {
word-wrap: break-word;
overflow-wrap: break-word;
min-width: 0;
}
.info-list li > span,
.contact-detail li > span,
.contact-info li > span,
.text-muted {
word-wrap: break-word;
overflow-wrap: break-word;
min-width: 0;
display: inline-block;
max-width: 100%;
}
/* Ensure contact-grid stacks on small screens (override any higher-specificity) */
@media (max-width: 980px) {
.contact-grid {
grid-template-columns: 1fr !important;
}
}
@media (max-width: 720px) {
.contact-grid {
grid-template-columns: 1fr !important;
gap: 20px !important;
}
.contact-form {
padding: 18px !important;
}
}
/* Header sticky safety — guarantee stays at top */
.site-header {
position: sticky !important;
position: -webkit-sticky !important;
top: 0 !important;
z-index: 9999 !important;
width: 100% !important;
}
.site-header.is-scrolled {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}
/* Mobile: ensure header doesn't shrink too small */
@media (max-width: 720px) {
.site-header__bar {
min-height: 56px !important;
}
}
/* ============ v42.7 — CONTACT GRID BUGFIX ============ */
/* Removed default .contact-grid > * rule that was forcing full-width children. */
/* Now children only span full-width inside @media (max-width: 720px). */
@media (max-width: 720px) {
.contact-grid > *,
.home-contact-grid > *,
.vm-grid > * {
grid-column: 1 / -1 !important;
}
}
/* ============ v43.1 — FIX: .info-list li flex children wrap ============ */
.info-list li {
flex-wrap: wrap !important;
}
.info-list li > span,
.contact-detail li > span,
.contact-info li > span {
flex: 1 1 0 !important;
min-width: 0 !important;
word-break: break-word !important;
display: block !important; /* block-level di flex container, biar full width + wrap normal */
}
.info-list li > strong {
flex: 0 0 auto !important;
min-width: 80px !important; /* label width minimum, biar konsisten */
}
/* ============ v44.1 — STRONG OVERRIDE (info-list + header sticky) ============ */
.info-list li {
display: block !important;
padding: 12px 0 !important;
border-bottom: 1px solid var(--color-line) !important;
max-width: 100% !important;
overflow: hidden !important;
}
.info-list li > strong {
display: block !important;
margin-bottom: 4px !important;
color: var(--color-steel-900) !important;
}
.info-list li > span,
.text-muted {
display: block !important;
max-width: 100% !important;
overflow-wrap: break-word !important;
word-break: break-word !important;
word-wrap: break-word !important;
hyphens: auto !important;
white-space: normal !important;
width: 100% !important;
box-sizing: border-box !important;
}
.site-header {
position: -webkit-sticky !important;
position: sticky !important;
top: 0 !important;
z-index: 99999 !important;
width: 100% !important;
}
/* ============ v45.1 — STICKY HEADER FIX (overflow-x:clip + iOS Safari quirks) ============ */
/* CRITICAL FIX: overflow-x:hidden on parent BREAKS position:sticky.
Use overflow-x:clip instead — visually identical (no horizontal scroll)
but preserves sticky positioning on descendants. */
html, body {
overflow-x: clip !important;
}
/* iOS Safari sticky needs -webkit-sticky + body height context */
.site-header {
position: -webkit-sticky !important;
position: sticky !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
z-index: 99999 !important;
width: 100% !important;
display: block !important;
/* Ensure no transform/filter on any ancestor that breaks sticky */
transform: none !important;
filter: none !important;
}
/* iOS Safari body must NOT have overflow set on x-axis for sticky to work */
body {
overflow-x: clip !important;
overflow-y: visible !important;
-webkit-overflow-scrolling: touch !important;
}
/* Ensure no ancestor has overflow:auto/scroll/hidden that breaks sticky */
body, html, main {
overflow: visible !important;
}
/* Override: html can have overflow-x:clip but body must allow vertical */
html {
overflow-x: clip !important;
overflow-y: visible !important;
}
/* ============ v47.1 — TABLET/DESKTOP PROPER SEPARATION ============ */
/* Featured special: keep 2-col layout on tablet+desktop, stack on mobile */
.featured-special {
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) !important;
}
.featured-special__body {
padding: 36px 40px !important;
min-height: 360px !important;
}
/* Tablet: keep 2-col but smaller */
@media (max-width: 980px) and (min-width: 721px) {
.featured-special {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
}
.featured-special__body {
padding: 28px 32px !important;
min-height: auto !important;
}
.featured-special__title { font-size: 1.4rem !important; }
}
/* Contact grid: 2-col on desktop+tablet, 1-col on mobile */
.contact-grid {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 32px !important;
}
@media (max-width: 980px) {
.contact-grid {
grid-template-columns: 1fr 1fr !important;
gap: 24px !important;
}
}
@media (max-width: 720px) {
.contact-grid {
grid-template-columns: 1fr !important;
gap: 24px !important;
}
.contact-grid > * { grid-column: 1 / -1 !important; }
}
/* Sticky header safety (already in v45 but reinforce) */
.site-header {
position: -webkit-sticky !important;
position: sticky !important;
top: 0 !important;
z-index: 99999 !important;
}
/* ============ v47.2 — TABLET (721px-980px) BREATHING ROOM ============ */
/* Tablet (iPad Pro 13" 1032px, iPad 768px) is BETWEEN desktop and mobile.
Need extra padding + spacing rules that don't conflict with desktop/mobile. */
@media (min-width: 721px) and (max-width: 980px) {
/* Container padding for tablet — more than mobile (20px), more than desktop default */
.container,
.container.section,
.container.site-header__bar,
.container.site-header.is-open,
.site-footer .container {
padding-left: 40px !important;
padding-right: 40px !important;
}
.section,
.section--tight,
.hero {
padding-left: 0 !important;
padding-right: 0 !important;
}
.section-head {
padding-left: 0 !important;
padding-right: 0 !important;
margin-bottom: 28px !important;
}
.breadcrumb {
padding: 6px 0 !important;
line-height: 1.5 !important;
font-size: 0.92rem !important;
}
/* === PRODUCT GRID: more vertical spacing between rows === */
.grid,
.grid-2,
.grid-3,
.grid-4 {
gap: 20px !important;
}
.article-grid {
gap: 22px !important;
}
/* === PRODUCT CARD: more internal padding + spacing === */
.product-card {
border-radius: var(--radius) !important;
overflow: hidden;
}
.product-card__body {
padding: 16px !important;
gap: 10px !important;
}
.product-card__name {
font-size: 0.92rem !important;
line-height: 1.35 !important;
margin-bottom: 4px !important;
word-wrap: break-word !important;
}
.product-card__cat {
font-size: 0.72rem !important;
margin-bottom: 4px !important;
letter-spacing: 0.04em !important;
}
.product-card__spec {
font-size: 0.85rem !important;
line-height: 1.4 !important;
margin-bottom: 6px !important;
word-wrap: break-word !important;
}
.product-card__price,
.product-card__cta {
font-size: 0.82rem !important;
padding: 8px 10px !important;
margin-top: 8px !important;
line-height: 1.4 !important;
}
.product-card__cta {
width: 100% !important;
text-align: center !important;
}
/* === CATALOG TOOLBAR === */
.catalog-toolbar {
padding: 16px !important;
gap: 14px !important;
margin-bottom: 24px !important;
}
.catalog-toolbar .field {
padding: 10px !important;
}
.catalog-toolbar .field input,
.catalog-toolbar .field select {
padding: 12px 14px !important;
font-size: 0.95rem !important;
}
/* === HERO SECTION: better breathing room === */
.hero {
padding: 64px 0 56px !important;
}
.hero h1, .hero .hero__title {
line-height: 1.15 !important;
margin-bottom: 20px !important;
}
.hero p, .hero .hero__sub {
font-size: 1.1rem !important;
line-height: 1.6 !important;
margin-bottom: 24px !important;
}
.hero__actions {
gap: 14px !important;
margin-top: 8px !important;
}
/* === TWO-COLUMN CARDS on Tentang/Faq/Layanan: less cramped === */
.vm-grid,
.home-contact-grid,
.contact-grid {
gap: 32px !important;
}
.vm-grid > *,
.home-contact-grid > * {
padding: 24px !important;
}
/* === FAQ items: more breathing === */
.faq-item {
margin-bottom: 14px !important;
}
.faq-item summary {
padding: 18px 22px !important;
font-size: 1rem !important;
}
.faq-item p {
padding: 0 22px 18px !important;
line-height: 1.65 !important;
}
/* === LIST/STEPS sections === */
.steps {
gap: 18px !important;
}
/* === BUTTONS more clickable === */
.btn {
padding: 12px 22px !important;
font-size: 0.95rem !important;
}
.btn-sm {
padding: 10px 16px !important;
font-size: 0.88rem !important;
}
/* === INFO LIST (kontak/footer): more space === */
.info-list li,
.contact-detail li {
padding: 14px 0 !important;
gap: 14px !important;
}
.info-list li > strong {
flex: 0 0 120px !important;
}
.info-list li > span {
line-height: 1.55 !important;
}
/* === SECTION padding vertical === */
.section {
padding: 56px 0 !important;
}
.section--tight {
padding: 36px 0 !important;
}
/* === TEXT readability === */
body {
font-size: 16px !important;
line-height: 1.65 !important;
}
/* === Header padding === */
.site-header__bar {
padding-top: 16px !important;
padding-bottom: 16px !important;
}
/* === MAP embed in /kontak/ === */
.map-embed,
.map-embed iframe {
min-height: 320px !important;
}
/* === Footer grid more space === */
.footer-grid {
gap: 32px !important;
padding: 32px 0 !important;
}
.footer-grid > div h4 {
margin-bottom: 16px !important;
font-size: 1rem !important;
}
.footer-grid ul li {
margin-bottom: 10px !important;
line-height: 1.5 !important;
}
/* === ARTICLE CARDS in /artikel/ listing === */
.article-card {
border-radius: var(--radius) !important;
}
.article-card__body {
padding: 20px !important;
}
.article-card__meta {
font-size: 0.78rem !important;
margin-bottom: 8px !important;
}
.article-card h3 {
font-size: 1.05rem !important;
line-height: 1.35 !important;
margin-bottom: 8px !important;
}
}
/* ============ v48.1 — TABLET INCREASED PADDING (lebih generous) ============ */
@media (min-width: 721px) and (max-width: 980px) {
.container,
.container.section,
.container.site-header__bar,
.container.site-header.is-open,
.site-footer .container {
padding-left: 56px !important;
padding-right: 56px !important;
}
}
/* ============ v48.2 — TABLET-SPECIFIC PRODUCT & CONTENT SPACING ============ */
@media (min-width: 721px) and (max-width: 980px) {
.hero { padding: 72px 0 64px !important; }
.section { padding: 64px 0 !important; }
.section--tight { padding: 44px 0 !important; }
.breadcrumb {
padding: 8px 0 !important;
margin-bottom: 20px !important;
font-size: 0.95rem !important;
}
.section-head { margin-bottom: 32px !important; }
.section-head h1 {
line-height: 1.2 !important;
margin-bottom: 14px !important;
}
.section-head p {
line-height: 1.65 !important;
font-size: 1.05rem !important;
}
.grid, .grid-2, .grid-3, .grid-4 { gap: 24px !important; }
.product-card__body {
padding: 18px !important;
gap: 12px !important;
}
.product-card__name {
font-size: 0.95rem !important;
line-height: 1.4 !important;
margin-bottom: 6px !important;
}
.product-card__spec {
font-size: 0.88rem !important;
line-height: 1.45 !important;
margin-bottom: 8px !important;
}
.product-card__cat {
font-size: 0.74rem !important;
margin-bottom: 6px !important;
}
.product-card__cta {
padding: 10px 14px !important;
font-size: 0.85rem !important;
margin-top: 10px !important;
}
.catalog-toolbar {
padding: 18px !important;
gap: 16px !important;
margin-bottom: 28px !important;
}
.catalog-toolbar .field input,
.catalog-toolbar .field select {
padding: 14px 16px !important;
font-size: 0.95rem !important;
}
.btn { padding: 14px 24px !important; font-size: 0.95rem !important; }
.faq-item { margin-bottom: 16px !important; }
.faq-item summary {
padding: 20px 24px !important;
font-size: 1.02rem !important;
}
.faq-item p {
padding: 0 24px 20px !important;
line-height: 1.7 !important;
}
.vm-grid, .home-contact-grid, .contact-grid { gap: 36px !important; }
.vm-grid > * { padding: 28px !important; }
.steps { gap: 20px !important; }
.info-list li, .contact-detail li {
padding: 16px 0 !important;
gap: 16px !important;
}
.info-list li > strong { flex: 0 0 130px !important; }
.footer-grid { gap: 36px !important; padding: 36px 0 !important; }
.footer-grid > div h4 { margin-bottom: 18px !important; }
.footer-grid ul li {
margin-bottom: 12px !important;
line-height: 1.55 !important;
}
.article-card__body { padding: 22px !important; }
.article-card h3 {
font-size: 1.08rem !important;
line-height: 1.4 !important;
margin-bottom: 10px !important;
}
.map-embed, .map-embed iframe { min-height: 360px !important; }
.site-header__bar {
padding-top: 18px !important;
padding-bottom: 18px !important;
}
body { line-height: 1.7 !important; }
}