/* ========================================================================== base.css - reset, page shell, typography primitives, a11y helpers ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h-mobile) + var(--safe-t) + 8px); } body { margin: 0; background: var(--off-white); color: var(--ink-text); font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--fw-regular); overflow-x: clip; /* belt + braces with the JS overflow audit */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, picture, 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; } ul, ol { margin: 0; padding: 0; list-style: none; } h1, h2, h3, h4, p { margin: 0; overflow-wrap: break-word; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: var(--fw-black); line-height: var(--lh-heading); letter-spacing: -0.015em; text-wrap: balance; } :focus-visible { outline: 3px solid var(--ie-yellow); outline-offset: 2px; border-radius: 4px; } /* ---- layout shell -------------------------------------------------------- */ .shell { width: min(100% - (var(--gutter) * 2), var(--page-max)); margin-inline: auto; } .shell--narrow { width: min(100% - (var(--gutter) * 2), var(--content-max)); margin-inline: auto; } .section { padding-block: var(--section-y); } /* Anchor targets: the header is sticky, so every linked section reserves the header's height (plus a little air) when the browser scrolls to it. The equivalent scroll-padding-top on covers smooth in-page jumps; this per-target margin also covers direct hash loads in Safari, where scroll padding is applied inconsistently. */ main > section[id] { scroll-margin-top: calc(var(--header-h-mobile) + var(--safe-t) + 10px); } .section__head { max-width: 62ch; } /* ---- shared text primitives --------------------------------------------- */ .eyebrow { display: flex; align-items: center; gap: 10px; color: var(--navy); font-size: var(--fs-eyebrow); font-weight: var(--fw-bold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; } .eyebrow__dash { display: inline-block; width: 26px; height: 3px; border-radius: 2px; background: var(--ie-yellow); flex: none; } .section__title { margin-top: 0.35em; font-size: var(--fs-h2); color: var(--ink-text); } /* v2.5 (owner brief 2026-09-25, items 3-4): a section title that opens a section on its own - no eyebrow above it, so it needs no lead-in margin. Same scale, colour and weight as every other section title on the page. v2.6 micro-fix: idle - the two titles that wore it are visually hidden now. */ .section__title--solo { margin-top: 0; } /* v2.6 (owner brief 2026-09-25, item 5): "Harga Sewa Tong" and "Perkhidmatan" carried the page's yellow accent rule in front of them, so they read as designed section headings in the same family as the coverage heading's eyebrow dash (.eyebrow__dash) rather than as plain text. The rule is a pseudo-element, so the heading's text content stayed exactly the two words. v2.6 micro-fix: both headings are visually hidden at the owner's request, so nothing wears this class and no rule is painted. Kept unchanged as the hook that restores them (with the grids' lead-in margin, components.css). */ .section__title--accent { display: flex; align-items: center; gap: 12px; } .section__title--accent::before { content: ""; flex: none; width: 26px; height: 4px; border-radius: 2px; background: var(--ie-yellow); box-shadow: 0 6px 14px -6px rgba(245, 196, 0, 0.9); } .section__lead { margin-top: 0.35em; max-width: 68ch; color: var(--navy); font-size: var(--fs-lead); line-height: 1.4; } .accent { color: var(--ie-yellow); } /* ---- accessibility ------------------------------------------------------- */ .skip-link { position: absolute; left: 50%; top: 0; transform: translate(-50%, -140%); z-index: 60; padding: 12px 20px; border-radius: 0 0 var(--r-md) var(--r-md); background: var(--ink); color: var(--white); font-weight: var(--fw-bold); transition: transform var(--dur) var(--ease); } .skip-link:focus { transform: translate(-50%, 0); } .visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }