/* Modern minimal reset, scoped to .lusi (the homepage class). Keeps the rest of the site (wp-admin, other pages) untouched. */ html { scroll-behavior: smooth; scroll-padding-top: 64px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* View Transitions API — smooth root cross-fade for the theme toggle. Browsers without support fall back to immediate swap. */ @supports (view-transition-name: root) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; } ::view-transition-old(root) { z-index: 0; } ::view-transition-new(root) { z-index: 1; } } .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; } .lusi *, .lusi *::before, .lusi *::after { box-sizing: border-box; } .lusi { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: var(--ls-body); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: 100%; font-synthesis: none; transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); } .lusi h1, .lusi h2, .lusi h3, .lusi h4, .lusi h5, .lusi h6, .lusi p, .lusi figure, .lusi blockquote, .lusi ol, .lusi ul { margin: 0; } .lusi ol, .lusi ul { padding: 0; list-style: none; } .lusi img, .lusi picture, .lusi video, .lusi canvas, .lusi svg { display: block; max-width: 100%; height: auto; } .lusi input, .lusi button, .lusi textarea, .lusi select { font: inherit; color: inherit; } .lusi button { background: none; border: 0; cursor: pointer; padding: 0; } .lusi a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; } .lusi a:hover { text-decoration: none; } .lusi:has(:focus-visible) :focus-visible, .lusi :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } /* skip-link */ .lusi-skip { position: absolute; top: -100px; left: 16px; z-index: var(--z-skip); padding: 12px 18px; background: var(--text); color: var(--bg); border-radius: var(--r-pill); font-size: var(--fs-small); font-weight: var(--fw-medium); transition: top var(--dur-fast) var(--ease-out); } .lusi-skip:focus { top: 12px; } /* pre-paint observed elements stay invisible until JS adds .is-in */ .lusi [data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); will-change: opacity, transform; } .lusi [data-reveal].is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .lusi [data-reveal] { opacity: 1; transform: none; transition: none; } } /* selection */ .lusi ::selection { background: var(--accent); color: var(--accent-on); }