/* * ESCENTINO motion system — shared primitives (loaded sitewide from views/includes/header.php). * * Principles: transform/opacity only, one easing family, animations run once, and every effect * degrades to a clean static page when `prefers-reduced-motion: reduce` is set or JS is unavailable. * Reveal states are only hidden when (set by the inline script in ). */ :root { --ease-lux: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-1: 160ms; --dur-2: 260ms; --dur-3: 420ms; --dur-4: 700ms; --dur-reveal: 900ms; --reveal-y: 18px; --radius-card: 16px; --radius-lg: 22px; --radius-pill: 999px; --bone-50: #fdfbf6; --bone-100: #f8f3e9; --bone-200: #f0e8d8; --hairline: #e8dfcc; --hairline-strong: #d9c7a7; --shadow-rest: 0 12px 26px -22px rgba(53, 40, 24, 0.4); --shadow-lift: 0 26px 46px -28px rgba(53, 40, 24, 0.46); interpolate-size: allow-keywords; } @media (max-width: 639px) { :root { --reveal-y: 10px; } } /* ------------------------------------------------------------------ */ /* Scroll reveal (IntersectionObserver in js/motion.js, runs once) */ /* ------------------------------------------------------------------ */ html.motion-ok [data-reveal] { opacity: 0; transform: translate3d(0, var(--reveal-y), 0); transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); transition-delay: var(--reveal-delay, 0ms); } html.motion-ok [data-reveal="fade"] { transform: none; } html.motion-ok [data-reveal="scale"] { transform: translate3d(0, calc(var(--reveal-y) * 0.6), 0) scale(0.98); } html.motion-ok [data-reveal].is-in { opacity: 1; transform: none; } /* Masked image/panel reveal: clip opens downward while the content settles from 1.06 → 1 */ html.motion-ok [data-reveal="mask"] { opacity: 1; transform: none; clip-path: inset(0 0 100% 0 round var(--radius-lg)); transition: clip-path 1.1s var(--ease-out); transition-delay: var(--reveal-delay, 0ms); } html.motion-ok [data-reveal="mask"] > * { transform: scale(1.06); transition: transform 1.4s var(--ease-out); transition-delay: var(--reveal-delay, 0ms); } html.motion-ok [data-reveal="mask"].is-in { clip-path: inset(0 0 0 0 round var(--radius-lg)); } html.motion-ok [data-reveal="mask"].is-in > * { transform: none; } /* Staggered children: JS assigns --i. Children are wrappers, never the hover target itself. */ html.motion-ok [data-stagger] > * { opacity: 0; transform: translate3d(0, var(--reveal-y), 0); transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); transition-delay: calc(min(var(--i, 0), 8) * 70ms); } html.motion-ok [data-stagger].is-in > * { opacity: 1; transform: none; } @media print { html.motion-ok [data-reveal], html.motion-ok [data-stagger] > * { opacity: 1 !important; transform: none !important; clip-path: none !important; } } /* ------------------------------------------------------------------ */ /* Buttons & links */ /* ------------------------------------------------------------------ */ .btn-arrow { display: inline-block; flex: none; width: 1em; height: 1em; transition: transform var(--dur-2) var(--ease-lux); } .has-arrow:hover .btn-arrow, .has-arrow:focus-visible .btn-arrow, .group:hover .has-arrow .btn-arrow, .group:focus-visible .has-arrow .btn-arrow { transform: translateX(4px); } /* Editorial text link: underline slides out instead of popping */ .link-underline { background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: 0 100%; background-size: 100% 1px; padding-bottom: 2px; transition: background-size var(--dur-3) var(--ease-lux), color var(--dur-2) ease; } .link-underline:hover, .link-underline:focus-visible { background-size: 0 1px; background-position: 100% 100%; } /* Pressed feedback for every button-like control (individual `scale` property never fights transforms) */ :where(button:not(:disabled), [role="button"]):active { scale: 0.975; } :where(button, [role="button"]) { transition-property: color, background-color, border-color, box-shadow, opacity, scale; transition-duration: var(--dur-2); transition-timing-function: var(--ease-lux); } /* Consistent focus ring (zero specificity, so component styles can still refine it) */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--color-accent-dark, #8a6a3c); outline-offset: 3px; } /* Forms */ :where(input:not([type="checkbox"]):not([type="radio"]), textarea, select) { transition: border-color var(--dur-2) var(--ease-lux), box-shadow var(--dur-2) var(--ease-lux), background-color var(--dur-2) ease; } :where(input:not([type="checkbox"]):not([type="radio"]), textarea, select):focus-visible { box-shadow: 0 0 0 4px rgba(201, 166, 107, 0.22); } .js-welcome-capture-submit:not(:disabled):hover { box-shadow: 0 10px 22px -14px rgba(20, 17, 13, 0.6); } .js-welcome-capture-submit:disabled { opacity: 0.6; cursor: progress; } /* Accordions /
: animate height where supported, instant elsewhere */ details::details-content { block-size: 0; overflow: clip; transition: block-size var(--dur-3) var(--ease-lux), content-visibility var(--dur-3) allow-discrete; } details[open]::details-content { block-size: auto; } /* ------------------------------------------------------------------ */ /* Header */ /* ------------------------------------------------------------------ */ #site-header-nav.site-header { transition: box-shadow var(--dur-3) var(--ease-lux), background-color var(--dur-3) ease, border-color var(--dur-3) ease; } #site-header-nav.site-header.is-scrolled { box-shadow: 0 14px 30px -26px rgba(20, 17, 13, 0.55); border-color: var(--hairline); } @media (min-width: 1280px) { #site-header-nav.site-header.is-scrolled { background-color: rgba(255, 255, 255, 0.9); -webkit-backdrop-filter: saturate(1.15) blur(10px); backdrop-filter: saturate(1.15) blur(10px); } } .nav-link { position: relative; } .nav-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left center; transition: transform var(--dur-3) var(--ease-lux); } .nav-link:hover::after, .nav-link:focus-visible::after, .nav-link[aria-current="page"]::after { transform: scaleX(1); } .nav-link[aria-current="page"] { color: var(--color-accent-dark, #8a6a3c); } /* Dropdown panels: soft rise + fade; visibility flips after the fade so it can't be clicked while hidden */ .group > .nav-dropdown { transform: translate3d(0, 6px, 0); transition: opacity var(--dur-2) var(--ease-lux), transform var(--dur-3) var(--ease-out), visibility 0s linear var(--dur-2); } .group:hover > .nav-dropdown, .group > .nav-dropdown.opacity-100, .group:focus-within > .nav-dropdown[data-nav-simple] { transform: none; transition-delay: 0s, 0s, 0s; } .group:focus-within > .nav-dropdown[data-nav-simple] { opacity: 1; visibility: visible; pointer-events: auto; } /* Cart badge feedback */ [data-cart-badge] { transition: background-color var(--dur-3) ease, scale var(--dur-2) var(--ease-lux); } .cart-bump { animation: cartBump 700ms var(--ease-out); } .cart-icon-pulse svg { animation: cartIconNudge 700ms var(--ease-out); } @keyframes cartBump { 0% { scale: 1; box-shadow: 0 0 0 0 rgba(201, 166, 107, 0.55); } 35% { scale: 1.35; background-color: var(--color-accent-dark, #8a6a3c); } 100% { scale: 1; box-shadow: 0 0 0 9px rgba(201, 166, 107, 0); } } @keyframes cartIconNudge { 0%, 100% { transform: translateY(0); } 35% { transform: translateY(-2px); } } /* Footer links: underline slides in; social icons lift */ footer ul a, footer .footer-legal a { background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: 0 100%; background-size: 0 1px; padding-bottom: 1px; transition: color var(--dur-2) ease, background-size var(--dur-3) var(--ease-lux); } footer ul a:hover, footer ul a:focus-visible, footer .footer-legal a:hover, footer .footer-legal a:focus-visible { background-size: 100% 1px; } footer a[aria-label] svg { transition: transform var(--dur-2) var(--ease-lux); } footer a[aria-label]:hover svg, footer a[aria-label]:focus-visible svg { transform: translateY(-2px) scale(1.06); } /* ------------------------------------------------------------------ */ /* Skeleton / loading */ /* ------------------------------------------------------------------ */ @keyframes shimmer { to { transform: translateX(100%); } } .skeleton { position: relative; overflow: hidden; background: var(--bone-100); border-radius: var(--radius-card); } .skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent); animation: shimmer 1.4s var(--ease-lux) infinite; } .skeleton-line { height: 0.75rem; border-radius: 999px; background: var(--bone-200); } /* ------------------------------------------------------------------ */ /* Product card (views/includes/sample-product-card.php) */ /* ------------------------------------------------------------------ */ .pcard { position: relative; display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; background: linear-gradient(180deg, #ffffff 0%, var(--bone-50) 100%); border: 1px solid var(--hairline); border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-rest); transition: transform var(--dur-3) var(--ease-lux), box-shadow var(--dur-3) var(--ease-lux), border-color var(--dur-3) ease; } .pcard-media { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--bone-100); } /* Image-loading sweep sits under the photos, so it is only visible until they paint */ .pcard-media::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.6) 50%, transparent 70%); transform: translateX(-100%); animation: shimmer 1.6s var(--ease-lux) 2; } .pcard-img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; transform: scale(1); transition: transform var(--dur-4) var(--ease-lux), opacity var(--dur-3) ease; } .pcard-img--hover { opacity: 0; } .pcard-fallback { position: absolute; inset: 0; z-index: 1; display: none; align-items: center; justify-content: center; color: #b8ad9a; } .pcard-rank { position: absolute; top: 0.65rem; left: 0.65rem; z-index: 2; min-width: 2rem; padding: 0.2rem 0.55rem; border-radius: var(--radius-pill); background: rgba(255, 253, 249, 0.94); border: 1px solid var(--hairline); color: var(--color-accent-dark, #8a6a3c); font-family: "Playfair Display", Georgia, serif; font-size: 0.75rem; font-style: italic; line-height: 1.3; text-align: center; letter-spacing: 0.04em; } .pcard-rank--top { background: var(--color-accent, #c9a66b); border-color: var(--color-accent, #c9a66b); color: #14110d; font-weight: 600; } .pcard-body { display: flex; flex: 1; flex-direction: column; padding: 0.95rem 1rem 1.05rem; } .pcard-brand { margin: 0 0 0.25rem; font-size: 0.66rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent-dark, #8a6a3c); } .pcard-name { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.3; color: var(--color-foreground, #14110d); } .pcard-foot { margin-top: auto; padding-top: 0.75rem; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font-size: 0.8125rem; } .pcard-price { color: var(--color-muted, #6b6358); font-variant-numeric: tabular-nums; transition: color var(--dur-2) ease; } .pcard-cta { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 600; color: var(--color-foreground, #14110d); } @media (max-width: 519px) { .pcard-cta > span:not(.btn-arrow) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .pcard-cta { position: relative; justify-content: center; width: 1.85rem; height: 1.85rem; border: 1px solid var(--hairline-strong); border-radius: 999px; transition: background-color var(--dur-2) ease, border-color var(--dur-2) ease; } .pcard-cta .btn-arrow { width: 0.95rem; height: 0.95rem; } .pcard:active .pcard-cta { background: var(--color-accent, #c9a66b); border-color: var(--color-accent, #c9a66b); } } @media (min-width: 768px) { .pcard-body { padding: 1.1rem 1.2rem 1.2rem; } .pcard-name { font-size: 1.05rem; } } @media (hover: hover) and (pointer: fine) { .pcard:hover { transform: translate3d(0, -4px, 0); box-shadow: var(--shadow-lift); border-color: var(--hairline-strong); } .pcard:hover .pcard-img--main { transform: scale(1.04); } .pcard:hover .pcard-img--hover { opacity: 1; transform: scale(1.04); } .pcard[data-dual="1"]:hover .pcard-img--main { opacity: 0; } .pcard:hover .pcard-price { color: var(--color-foreground, #14110d); } } .pcard:active { scale: 0.985; } /* ------------------------------------------------------------------ */ /* Rail (drag / swipe / arrows / progress) — js/motion.js */ /* ------------------------------------------------------------------ */ .rail { --rail-gap: 0.9rem; --rail-cols: 2.25; position: relative; } @media (min-width: 640px) { .rail { --rail-gap: 1.1rem; --rail-cols: 3; } } @media (min-width: 1024px) { .rail { --rail-cols: 4; } } .rail-track { display: flex; gap: var(--rail-gap); margin: -1rem calc(-1 * var(--rail-gutter, 1rem)) -1.75rem; padding: 1rem var(--rail-gutter, 1rem) 1.75rem; list-style: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: var(--rail-gutter, 1rem); scrollbar-width: none; -webkit-overflow-scrolling: touch; cursor: grab; } .rail-track::-webkit-scrollbar { display: none; } .rail-track > * { flex: 0 0 calc((100% - (var(--rail-cols) - 1) * var(--rail-gap)) / var(--rail-cols)); min-width: 0; scroll-snap-align: start; } .rail-track.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; } .rail-track.is-dragging a { pointer-events: none; } .rail.is-static .rail-track { cursor: auto; } @media (pointer: coarse) { .rail-track { scroll-snap-type: x mandatory; } } @media (min-width: 640px) { .rail-track { --rail-gutter: 0px; } } .rail-foot { display: flex; align-items: center; gap: 1.25rem; margin-top: 2rem; } .rail-progress { position: relative; flex: 1; height: 2px; border-radius: 2px; background: var(--hairline); overflow: hidden; } .rail-progress > span { position: absolute; inset: 0 auto 0 0; width: 30%; border-radius: 2px; background: var(--color-accent-dark, #8a6a3c); transition: width var(--dur-3) ease; will-change: transform; } .rail-controls { display: none; gap: 0.5rem; } @media (min-width: 768px) { .rail-controls { display: inline-flex; } } .rail.is-static .rail-foot, .rail.is-static .rail-controls { display: none; } .rail-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 999px; border: 1px solid var(--hairline-strong); background: var(--bone-50); color: var(--color-foreground, #14110d); transition: background-color var(--dur-2) ease, color var(--dur-2) ease, border-color var(--dur-2) ease, opacity var(--dur-2) ease, scale var(--dur-2) var(--ease-lux); } .rail-btn svg { width: 1rem; height: 1rem; transition: transform var(--dur-2) var(--ease-lux); } .rail-btn:not(:disabled):hover { background: var(--color-foreground, #14110d); border-color: var(--color-foreground, #14110d); color: #fff; } .rail-btn[data-rail-prev]:not(:disabled):hover svg { transform: translateX(-2px); } .rail-btn[data-rail-next]:not(:disabled):hover svg { transform: translateX(2px); } .rail-btn:disabled { opacity: 0.35; cursor: default; } /* ------------------------------------------------------------------ */ /* Reduced motion: everything static, nothing waits on animation */ /* ------------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important; transition-duration: 0.001ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; } .pcard:hover, .pcard:hover .pcard-img { transform: none; } .nav-link::after { transition: none; } } /* ------------------------------------------------------------------ */ /* Page transitions: native cross-document fade where supported */ /* (js in header.php skips its overlay fallback in those browsers) */ /* ------------------------------------------------------------------ */ @view-transition { navigation: auto; } #site-header-nav { view-transition-name: site-header; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 200ms; animation-timing-function: ease; } @media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }