(0.25.0):
dilebur supaya foto tetap jadi sel grid. */ .kj-c .kj-l-gallery > p { display: contents; } .kj-c .kj-l-fig { margin: var(--kj-space-5) 0 0; } .kj-c .kj-l-fig img { width: 100%; } .kj-c .kj-l-fig--sm { max-width: 420px; } /* Kartu layanan (hub) */ .kj-c .kj-l-cards { display: grid; gap: var(--kj-space-3); } .kj-c .kj-l-card { display: flex; flex-direction: column; gap: var(--kj-space-2); padding: var(--kj-space-4); background: var(--kj-surface); border: 1px solid var(--kj-line); border-top: var(--kj-border-accent) solid var(--kj-ink); } .kj-c .kj-l-prose .kj-l-card h3 { margin: 0; font-size: 20px; } .kj-c .kj-l-card p { margin: 0; font-size: 16px; line-height: 1.6; } .kj-c .kj-l-card p:last-child { margin-top: auto; padding-top: var(--kj-space-2); font-weight: 600; } .kj-c .kj-l-card a::after { content: " →"; } /* Paket PM */ .kj-c .kj-l-pkgs { display: grid; gap: var(--kj-space-3); counter-reset: none; } .kj-c .kj-l-pkg { display: flex; flex-direction: column; gap: var(--kj-space-3); padding: var(--kj-space-5) var(--kj-space-4); background: var(--kj-surface); border: 1px solid var(--kj-line); border-left: var(--kj-border-accent) solid var(--kj-red); } .kj-c .kj-l-prose .kj-l-pkg h2 { margin: 0; font-size: 22px; } .kj-c .kj-l-pkg p, .kj-c .kj-l-pkg ul { margin: 0; font-size: 16px; } .kj-c .kj-l-pkg .kj-l-scope { margin: 0 0 calc(-1 * var(--kj-space-1)); } .kj-c .kj-l-pkg .kj-l-scope + ul { margin-top: 0; } /* Daftar unit (rental) */ .kj-c .kj-l-prose ul.kj-l-units { list-style: none; padding: 0; display: grid; gap: var(--kj-space-2); } .kj-c .kj-l-units li { margin: 0; padding: var(--kj-space-3) var(--kj-space-4); background: var(--kj-surface); border: 1px solid var(--kj-line); font-size: 16px; } /* 0.18.1: hanya judul kotak (strong pertama) sebaris sendiri; strong lain di kalimat tetap sebaris (Air Dryer, Air Tank). Kotak berfoto: teks kiri, foto 1:1 kanan, semua kotak sama lebar kolom fotonya. */ .kj-c .kj-l-units li > strong:first-child, .kj-c .kj-l-unit__txt > strong:first-child { display: block; margin-bottom: 2px; } .kj-c .kj-l-units li:has(> img, > p > img) { display: grid; grid-template-columns: minmax(0, 1fr) 104px; align-items: center; gap: var(--kj-space-3); padding-right: var(--kj-space-3); } .kj-c .kj-l-units li > p:has(> img) { margin: 0; } .kj-c .kj-l-units li > img, .kj-c .kj-l-units li > p > img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; margin: 0; background: var(--kj-bg); } /* FAQ */ .kj-c .kj-l-faq { border-top: 1px solid var(--kj-line-strong); } .kj-c .kj-l-faq details { border-bottom: 1px solid var(--kj-line-strong); } .kj-c .kj-l-faq summary { position: relative; display: block; min-height: var(--kj-tap); padding: 14px 40px 14px 0; font-weight: 600; cursor: pointer; list-style: none; } .kj-c .kj-l-faq summary::-webkit-details-marker { display: none; } .kj-c .kj-l-faq summary::after { content: "+"; position: absolute; right: 8px; top: 10px; font: 400 24px/1 var(--kj-font-mono); color: var(--kj-red-strong); } .kj-c .kj-l-faq details[open] summary::after { content: "−"; } .kj-c .kj-l-faq summary:focus-visible { outline: 3px solid var(--kj-red); outline-offset: 2px; } .kj-c .kj-l-faq details > :not(summary) { margin: 0 0 var(--kj-space-3); font-size: 16px; } .kj-c .kj-l-faq details > :last-child { margin-bottom: var(--kj-space-4); } /* Samping */ .kj-l-side { display: flex; flex-direction: column; gap: var(--kj-space-4); align-self: start; } .kj-l-nav ul { list-style: none; margin: var(--kj-space-2) 0 0; padding: 0; background: var(--kj-surface); border: 1px solid var(--kj-line); } .kj-l-nav li { margin: 0; border-top: 1px solid var(--kj-line); } .kj-l-nav li:first-child { border-top: 0; } .kj-c .kj-l-nav a { display: flex; flex-direction: column; gap: 2px; padding: var(--kj-space-3) var(--kj-space-4); color: var(--kj-ink); text-decoration: none; } .kj-c .kj-l-nav a:hover { background: var(--kj-bg); color: var(--kj-ink); } .kj-c .kj-l-nav a[aria-current] { box-shadow: inset var(--kj-border-accent) 0 0 var(--kj-red); } .kj-l-nav strong { font-weight: 600; } .kj-l-nav a span { font-size: 14px; line-height: 1.4; color: var(--kj-muted); } .kj-l-box { display: flex; flex-direction: column; gap: var(--kj-space-2); padding: var(--kj-space-5) var(--kj-space-4); background: var(--kj-surface); border: 1px solid var(--kj-line); border-top: var(--kj-border-accent) solid var(--kj-red); } .kj-l-num { font: 400 26px/1.1 var(--kj-font-mono); color: var(--kj-ink); } .kj-l-box p { font-size: 15px; color: var(--kj-muted); } .kj-l-box .kj-btn { margin-top: var(--kj-space-2); } /* Area layanan */ .kj-l-area { margin-top: var(--kj-space-7); padding: var(--kj-space-7) 0; background: var(--kj-surface); border-top: 1px solid var(--kj-line); } .kj-l-area .kj-c-wrap { display: flex; flex-direction: column; gap: var(--kj-space-4); } .kj-l-area__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--kj-space-2) var(--kj-space-4); } .kj-c .kj-l-area__head a { font-weight: 600; white-space: nowrap; } .kj-c .kj-l-area .kj-cities a { color: var(--kj-ink); } .kj-c .kj-l-area .kj-cities a:hover { color: var(--kj-red-strong); } @media (min-width: 600px) { .kj-l-hero-btns { flex-direction: row; flex-wrap: wrap; } .kj-c .kj-l-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kj-c .kj-l-gallery { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--kj-space-3); } .kj-c .kj-l-units li:has(> img, > p > img) { grid-template-columns: minmax(0, 1fr) 150px; gap: var(--kj-space-4); } } @media (min-width: 1024px) { .kj-l-grid { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--kj-space-8); padding-top: var(--kj-space-8); padding-bottom: var(--kj-space-8); } .kj-l-side { position: sticky; top: var(--kj-space-5); } .kj-c .kj-l-pkgs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kj-l-area { padding: var(--kj-space-8) 0; } }