/* base.css: shared structural reset (identity-neutral). Each identity file (novuskey.css / nibhaus.css) supplies its own palette + type + components. */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *,*::before,*::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* Scroll-reveal is progressive enhancement: content is visible by default. The hidden/animated start state only applies once the first-party script adds .js-anim to , and only when the visitor has not asked to reduce motion. No-JS and reduced-motion visitors see everything at once. */ .js-anim .reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; } .js-anim .reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js-anim .reveal { opacity: 1; transform: none; transition: none; } } body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg, video { max-width: 100%; height: auto; display: block; } a { color: inherit; } h1, h2, h3, h4 { line-height: 1.12; margin: 0; text-wrap: balance; } p, ul, ol, figure { margin: 0; } main { flex: 1 0 auto; } .container { width: 100%; max-width: 1100px; margin-inline: auto; padding-inline: clamp(20px, 5vw, 32px); } .wrap-narrow { max-width: 720px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } :focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 2px; } .skip-link { position: absolute; left: 8px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 6px; font-size: 14px; font-weight: 600; text-decoration: none; transition: top .15s ease; background: var(--nk-surface, var(--nb-surface, #fff)); color: var(--nk-text, var(--nb-text, #10151d)); box-shadow: var(--nk-shadow, var(--nb-shadow, 0 2px 8px rgba(0,0,0,.2))); } .skip-link:focus { top: 8px; } /* Theme toggle — one control on both sites. Colors resolve through each site's own tokens (--nk-* on NovusKey, --nb-* on Nibhaus) via the fallback chain. The sun/moon swap mirrors the same prefers-color-scheme-then-data-theme pattern the rest of the site uses, so with JS absent the icon still matches the rendered theme; only the click-to-override needs the script. */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; margin-left: auto; flex-shrink: 0; border: 1px solid var(--nk-border, var(--nb-border, currentColor)); border-radius: 999px; background: var(--nk-surface, var(--nb-surface, transparent)); color: var(--nk-text, var(--nb-text, inherit)); cursor: pointer; font: inherit; } .theme-toggle:hover { color: var(--nk-accent, var(--nb-ink, currentColor)); } .theme-toggle svg { width: 18px; height: 18px; } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } @media (prefers-color-scheme: dark) { .theme-toggle .icon-sun { display: block; } .theme-toggle .icon-moon { display: none; } } :root[data-theme="light"] .theme-toggle .icon-sun { display: none; } :root[data-theme="light"] .theme-toggle .icon-moon { display: block; } :root[data-theme="dark"] .theme-toggle .icon-sun { display: block; } :root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }