/* 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 {
/* One measure for the whole storefront. The header was capped at 1440, the
category strip at 1280, the shop grid at 1200 and the strip's background
ran full-bleed — four different left edges stacked down one page, which
is what "broken" looked like. */
--site-measure: 1440px;
--site-gutter: 2.5rem;
/* The width of the centred content column on desktop. Must stay >= the 768px
responsive breakpoint so `desktopStyles` are applied at a width they were
actually authored for. Read by .page-wrapper and the fixed bottom nav. */
--page-column: 768px;
--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