/* Base reset */ html { font-size: 16px; } /* ── Kalles motion language (kx-*) ────────────────────────────────────────── * Extracted from the reference theme (reference/kalles-5-2/PARITY.md) — every * duration/easing value here was read off the live theme's CSS, not guessed. * Blocks reference these tokens (node-factories.mjs, shared-sections.mjs) via * `var(--kx-*)` and `data-kx-*` attributes; this file is what actually gives * those attributes motion. See PARITY.md for the full porting spec. */ :root { --kx-dur-short: 0.1s; --kx-dur-default: 0.2s; --kx-dur-long: 0.5s; --kx-dur-extra-long: 0.6s; --kx-ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --kx-ease-zoom: cubic-bezier(0, 0, 0.44, 1.18); --kx-ease-reveal: cubic-bezier(0, 0, 0.3, 1); --kx-ease-drawer: cubic-bezier(0.645, 0.045, 0.355, 1); } /* 1. Product-card hover — the 2nd image's rest state + slow "breathing" zoom. * Rest lives here (not inline) so an unset bind.style never leaves it visible — * see the comment on `image2` in node-factories.mjs productCard. */ [data-kx-hover-img] { opacity: 0; transform: scale(1); transition: opacity var(--kx-dur-long) var(--kx-ease-standard), transform 2s var(--kx-ease-zoom); } /* 3. Mega-menu open — fade + slide-down, replayed each time the panel flips * to display:flex (a CSS animation restarts on display:none → non-none). */ @keyframes kx-menu-open { 0% { opacity: 0; transform: translateY(-1.5rem); } 100% { opacity: 1; transform: translateY(0); } } [data-kx-menu] { animation: kx-menu-open var(--kx-dur-extra-long) var(--kx-ease-reveal); } /* 4. Drawers / overlays — the engine's generic overlay (overlay-styles.ts, * `[data-nd-overlay]`) shows via `[data-open]` → display:flex, so the same * "animation restarts on display change" trick applies to panels here. */ @keyframes kx-overlay-fade { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes kx-pop-in { 0% { opacity: 0; transform: scale(0.96); } 100% { opacity: 1; transform: scale(1); } } @keyframes kx-slide-up { 0% { transform: translateY(100%); } 100% { transform: translateY(0); } } @keyframes kx-slide-in-right { 0% { transform: translateX(100%); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } } [data-nd-overlay][data-open] .nd-overlay__backdrop { animation: kx-overlay-fade var(--kx-dur-long) var(--kx-ease-standard); } [data-nd-overlay][data-open] .nd-overlay__panel { animation: kx-pop-in var(--kx-dur-long) var(--kx-ease-drawer); } [data-nd-overlay][data-nd-presentation="sheet"][data-open] .nd-overlay__panel { animation: kx-slide-up var(--kx-dur-long) var(--kx-ease-drawer); } /* Cart is a right-side, full-height drawer in Kalles — not the engine's * default bottom sheet or centered modal. Override presentation for this * specific overlay identity only; every other overlay (quick-view, etc.) * keeps the engine default. */ #cart-overlay[data-nd-overlay] { align-items: stretch; justify-content: flex-end; padding: 0; } #cart-overlay[data-nd-overlay] .nd-overlay__panel { width: min(420px, 100%); height: 100%; max-height: 100%; border-radius: 0; } #cart-overlay[data-nd-overlay][data-open] .nd-overlay__panel { animation: kx-slide-in-right var(--kx-dur-long) var(--kx-ease-drawer); } /* 5. Scroll reveal — gated behind `.kx-js` (set by an early inline script in * , before paint) so content is never stuck invisible with JS off or a * slow script load; kx-reveal.js observes `[data-kx-reveal]` and flips * `data-kx-inview` + sets `--kx-order` per element for the 75ms cascade. */ @keyframes kx-reveal-slide-in { 0% { transform: translateY(2rem); opacity: 0.01; } 100% { transform: translateY(0); opacity: 1; } } @keyframes kx-reveal-fade-in { 0% { opacity: 0.01; } 100% { opacity: 1; } } html.kx-js [data-kx-reveal]:not([data-kx-inview]) { opacity: 0.01; } html.kx-js [data-kx-reveal="slide"]:not([data-kx-inview]) { transform: translateY(2rem); } html.kx-js [data-kx-reveal="slide"][data-kx-inview] { animation: kx-reveal-slide-in var(--kx-dur-extra-long) var(--kx-ease-reveal) forwards; animation-delay: calc(var(--kx-order, 0) * 75ms); } html.kx-js [data-kx-reveal="fade"][data-kx-inview] { animation: kx-reveal-fade-in var(--kx-dur-extra-long) var(--kx-ease-reveal) forwards; animation-delay: calc(var(--kx-order, 0) * 75ms); } @media (prefers-reduced-motion: reduce) { [data-kx-hover-img], [data-kx-menu], [data-nd-overlay][data-open] .nd-overlay__backdrop, [data-nd-overlay][data-open] .nd-overlay__panel, html.kx-js [data-kx-reveal="slide"][data-kx-inview], html.kx-js [data-kx-reveal="fade"][data-kx-inview] { animation: none; transition: none; } html.kx-js [data-kx-reveal]:not([data-kx-inview]) { opacity: 1; transform: none; } } /* Interactive defaults — every