/* ----------------------------------------------------------------------------- * Hymentor Commerce — shared enhancement layer. * 1. Scroll-reveal choreography (paired with commerce-reveal.js). * 2. A confident, conversion-oriented primary-CTA baseline. * 3. A global prefers-reduced-motion safety net for all commerce widgets. * Brand-aware: everything resolves through the site's global color tokens. * -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- * 1. Scroll reveal — only active once JS adds `.e-reveal-on` to , so the * content is never hidden when JS is unavailable. * ------------------------------------------------------------------------ */ .e-reveal-on .e-reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); will-change: opacity, transform; } .e-reveal-on .e-reveal.is-revealed { opacity: 1; transform: none; } /* Gentle stagger for grouped items (wishlist grid, gallery grid). */ .e-reveal-on .e-wishlist .e-reveal:nth-child(2) { transition-delay: 0.06s; } .e-reveal-on .e-wishlist .e-reveal:nth-child(3) { transition-delay: 0.12s; } .e-reveal-on .e-wishlist .e-reveal:nth-child(4) { transition-delay: 0.18s; } .e-reveal-on .e-product-gallery-flat .e-reveal:nth-child(2) { transition-delay: 0.06s; } .e-reveal-on .e-product-gallery-flat .e-reveal:nth-child(3) { transition-delay: 0.12s; } /* -------------------------------------------------------------------------- * 2. Confident CTA baseline. * Opt-in utility: add `.e-cta-confident` on the widget wrapper (presets use * it). Makes the primary action larger, rounder and more tappable — the * Apple/luxury "quiet chrome, loud CTA" balance that lifts conversion. * ------------------------------------------------------------------------ */ .e-cta-confident .e-product-bundle__add, .e-cta-confident .e-wishlist__add-to-cart .button, .e-cta-confident .e-product-filter__apply { font-size: 0.95em; letter-spacing: 0.02em; text-transform: none; padding: 1.05em 2.4em; border-radius: 999px; font-weight: 600; box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--e-global-color-accent, var(--e-global-color-primary, #000)) 60%, transparent); } /* A subtle press feedback shared by confident CTAs. */ .e-cta-confident .e-product-bundle__add:active, .e-cta-confident .e-product-filter__apply:active { transform: translateY(1px) scale(0.99); } /* -------------------------------------------------------------------------- * 3. Add-to-cart / wishlist confirmation pulse. * Reassuring tick of motion the moment an action succeeds. * ------------------------------------------------------------------------ */ @keyframes e-commerce-confirm { 0% { transform: scale(1); } 35% { transform: scale(1.05); } 100% { transform: scale(1); } } .e-product-bundle.is-added .e-product-bundle__add, .e-wishlist-button.is-just-added { animation: e-commerce-confirm 0.45s cubic-bezier(0.4, 0, 0.2, 1); } /* -------------------------------------------------------------------------- * 4. Reduced-motion safety net for every commerce widget. * ------------------------------------------------------------------------ */ @media ( prefers-reduced-motion: reduce ) { .e-reveal-on .e-reveal { opacity: 1 !important; transform: none !important; transition: none !important; } .e-wishlist__item, .e-wishlist__item:hover, .e-wishlist__image img, .e-wishlist__item:hover .e-wishlist__image img, .e-wishlist-button, .e-swatch, .e-product-bundle__image img, .e-product-bundle__item:hover .e-product-bundle__image img, .e-product-bundle__add, .e-product-gallery-flat__item img, .e-product-filter__results ul.products, .e-cta-confident .e-product-bundle__add:active, .e-cta-confident .e-product-filter__apply:active { transition: none !important; animation: none !important; transform: none !important; } }