@layer base { *, *::before, *::after { box-sizing: border-box; } html { color-scheme: light; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-sans); line-height: var(--line-body); color: var(--color-ink); background: var(--color-cream); } h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 600; letter-spacing: var(--tracking-tight); line-height: var(--line-tight); margin: 0 0 var(--space-4); color: var(--color-ink); } h1 { font-size: var(--type-h1); } h2 { font-size: var(--type-h2); } h3 { font-size: var(--type-h3); } h4 { font-size: var(--type-h4); font-family: var(--font-sans); font-weight: 700; } p { margin: 0 0 var(--space-4); } a { color: var(--color-primary-deep); text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-size: 100% 1px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size var(--dur-draw) var(--ease-ink); padding-bottom: 1px; } a:hover { background-size: 100% 2px; } @media (prefers-reduced-motion: no-preference) { main a:not(:hover):not(:focus-visible), footer a:not(:hover):not(:focus-visible) { background-size: 0% 1px; } main a:hover, main a:focus-visible, footer a:hover, footer a:focus-visible { background-size: 100% 1px; } } @media (prefers-reduced-motion: reduce) { a { background-size: 100% 1px; } } a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--color-primary-deep); outline-offset: 3px; border-radius: 4px; } img, picture, video, svg { max-width: 100%; height: auto; display: block; } ul, ol { padding-inline-start: 1.5rem; margin: 0 0 var(--space-4); } /* (Phase 1 sun ::selection rule removed — superseded by Phase 4 A5 sage rule below.) */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .skip-link { position: absolute; top: 0; left: 0; transform: translateY(-120%); background: var(--color-ink); color: var(--color-cream-soft); padding: var(--space-3) var(--space-4); text-decoration: none; z-index: 1000; transition: transform var(--dur-1) var(--ease); } .skip-link:focus { transform: translateY(0); } .wrap { max-width: var(--wrap-max); margin-inline: auto; padding-inline: var(--space-6); } @media (min-width: 768px) { .wrap { padding-inline: var(--space-8); } } /* A3 — paper-grain texture (Phase 4 canggih layer). Recipe matches _brief/urbane-ethos-revamp-brief.html. Opacity is via rgba in each radial-gradient; the token sets the contribution scale. */ body { background-image: radial-gradient(circle at 12% 22%, rgba(80,72,110,calc(var(--canggih-grain-opacity) * 0.85)) 0, transparent 0.7px), radial-gradient(circle at 78% 64%, rgba(80,72,110,calc(var(--canggih-grain-opacity) * 0.85)) 0, transparent 0.7px), radial-gradient(circle at 44% 88%, rgba(80,72,110,calc(var(--canggih-grain-opacity) * 0.65)) 0, transparent 0.7px); background-size: 7px 7px, 11px 11px, 5px 5px; } /* A5 — sage ::selection. Uses color-mix to derive a soft sage from the existing palette tokens — no new color tokens introduced. */ ::selection { background: color-mix(in srgb, var(--color-primary-soft) 70%, var(--color-cream)); color: var(--color-ink); } ::selection:window-inactive { background: var(--color-line); } /* A2 cursor scaffold — explicit so cursor.js can flip to 'none' on fine-pointer devices without a layout-shift reflow. The .canggih-cursor decorative element is injected into by cursor.js (only on non-touch, non-reduced-motion devices); the OS cursor stays visible underneath. */ html { cursor: auto; } }