/** * Custom Animations Override * Matches the Concept Shopify theme animation style * Version: 1.0.115 * * Baseline: v1.0.5 (the last stable version the user installed) * Changes on top of v1.0.5: * 1. Fixed orphan closing brace that broke CSS parsing * 2. Added `opacity: 1 !important` + `transform: none !important` * overrides on menu containers — required because Glozin's native * CSS uses transform:scale(0)+opacity:0 without transitions, which * made the close animation invisible (element snapped to scale(0) * before clip-path could animate). * 3. Added Concept-style staggered item animations inside mega menu * (translateX fade-in per-column with delay chain). */ /* ========================================================================== CSS Custom Properties ========================================================================== */ /* ========================================================================== SCROLLBAR GUTTER — prevent layout shift when overlays open The parent theme does `body { overflow: hidden }` whenever a modal / off-canvas / popover opens, which makes the page's scrollbar disappear and the content jumps right to fill the freed space. The theme tries to compensate with `body { padding-right: }` but the two styles aren't perfectly in sync and you see a visible hop on each open. Concept (and other modern themes) avoid this by permanently reserving the scrollbar space. `scrollbar-gutter: stable` on `` does exactly that: the gutter is always reserved, so `overflow: hidden` on `` no longer frees any space and there's nothing to jump into. We then neutralize the parent's `padding-right` compensation (inline style on `` set by jQuery) with an `!important` override — `scrollbar-gutter: stable` already accounts for the scrollbar, so the extra padding would cause an inverse shift. On macOS / iOS overlay scrollbars `scrollbar-gutter` has no visual effect (the scrollbar doesn't take layout space there anyway), so this is safe cross-platform. ========================================================================== */ html { /* Keep the scrollbar gutter reserved so opening an overlay doesn't cause a layout jump. We deliberately do NOT customise scrollbar thumb/track colors here — the user preferred the browser default. */ scrollbar-gutter: stable; /* Paint the gutter white so opening an overlay no longer shows an abrupt black→white flip in the reserved scrollbar strip. What was happening: when a modal/minicart opens, the parent theme sets `body { overflow: hidden }`, which hides the dark scrollbar. The 15px gutter then exposes the canvas root color (transparent falls back to UA canvas, which on dark-mode systems shows as black). With bg = white, the dark scrollbar overlays on top of white when visible; when it's hidden, white still shows. A short transition smooths any future bg changes. */ background-color: #ffffff; transition: background-color 0.30s var(--ios-backdrop-ease, cubic-bezier(0.7, 0, 0.2, 1)); } body.modal-opened, body.offcanvas-opened, body.popover-opened, body.search-modal-form { padding-right: 0 !important; padding-inline-end: 0 !important; } :root { --concept-ease-primary: cubic-bezier(0.3, 1, 0.3, 1); --concept-ease-fast: cubic-bezier(0.7, 0, 0.3, 1); --concept-ease-smooth: cubic-bezier(0.7, 0, 0.2, 1); --concept-ease-bounce: cubic-bezier(0.075, 0.82, 0.165, 1); --concept-ease-out: cubic-bezier(0.19, 1, 0.22, 1); --concept-duration-primary: 0.5s; --concept-duration-fast: 0.3s; --concept-duration-slow: 0.6s; /* Drawer animation — split into open/close for sequential switching */ --drawer-ease: cubic-bezier(0.65, 0, 0.35, 1); --drawer-close-duration: 0.30s; --drawer-open-duration: 0.45s; /* Open waits until the close finishes → sequential feel when switching menus */ --drawer-open-delay: 0.30s; /* Legacy alias (kept so any leftover reference still resolves) */ --drawer-duration: 0.30s; /* Reveal animation (scroll-in effect). Tuned to match Concept's product-grid entrance: a short rise with a soft easing curve, staggered per-sibling via `--gz-reveal-delay` set by custom-reveal.js. */ --gz-reveal-duration: 0.56s; --gz-reveal-ease: cubic-bezier(0.3, 1, 0.3, 1); --gz-reveal-rise: 16px; } /* Page-load fade-from-black disabled. The PHP hook that injected #gz-page-fade has been removed; this defensive rule prevents the overlay from showing if stale cached markup exists during rollout. */ #gz-page-fade { display: none !important; } /* Android Chrome shows a blue tap flash on links/buttons by default. iOS Safari does not, so remove the tap highlight globally while preserving normal focus-visible outlines for keyboard users. */ html body a, html body button, html body [role="button"], html body input[type="button"], html body input[type="submit"], html body .gz-button, html body .button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; } /* ========================================================================== REVEAL ANIMATION — scroll-in (Concept-style) Elements tagged `.gz-reveal` by custom-reveal.js start hidden (opacity:0 + translateY(var(--gz-reveal-rise))) and fade + rise into place when they enter the viewport (class `.is-in-view` added by the IntersectionObserver). Stagger between siblings is driven by the `--gz-reveal-delay` CSS variable JS sets on each element. Safety net — `.gz-reduced-motion` on (set by the same JS when the user has `prefers-reduced-motion: reduce` OR the browser lacks IntersectionObserver) bypasses the hidden base state so content renders immediately. ========================================================================== */ .gz-reveal { opacity: 0; transform: translate3d(0, var(--gz-reveal-rise), 0); transition: opacity var(--gz-reveal-duration) var(--gz-reveal-ease), transform var(--gz-reveal-duration) var(--gz-reveal-ease); transition-delay: var(--gz-reveal-delay, 0ms); will-change: opacity, transform; } .gz-reveal.is-in-view { opacity: 1; transform: translate3d(0, 0, 0); } /* Reduced-motion / no-IO fallback: show content immediately, no opacity fade, no translate. Covers users who opted out of motion and browsers too old for IntersectionObserver. */ .gz-reduced-motion .gz-reveal, .gz-reduced-motion .gz-reveal.is-in-view { opacity: 1 !important; transform: none !important; transition: none !important; } /* ========================================================================== 1. HEADER MENU HOVER ANIMATION — Concept duplicate-label pill Concept uses two labels: the visible text and a duplicate dark pill that rises from below while the original label fades/scales upward. Glozin gives us the label in `data-title`, so the duplicate is created with a pseudo element instead of changing the menu markup. ========================================================================== */ @media (min-width: 1025px) { .primary-navigation .nav-menu > li > a { position: relative; overflow: hidden; z-index: 1; display: inline-flex; align-items: center; min-height: 42px; border-radius: 999px; padding: 0 20px !important; line-height: 1; color: var(--gz-header-color, #171717) !important; transition: color var(--concept-duration-primary) var(--concept-ease-primary), transform var(--concept-duration-primary) var(--concept-ease-primary); } .primary-navigation .nav-menu > li > a::after { content: attr(data-title); position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; padding: 0 20px; color: var(--gz-color-light, #ffffff); background-color: var(--gz-color-dark, #1a1a1a); border-radius: 999px; white-space: nowrap; transform: translate3d(0, 100%, 0) scale(0.6); transform-origin: center bottom; transition: transform var(--concept-duration-primary) var(--concept-ease-primary); pointer-events: none; } /* Remove dropdown caret arrows */ .primary-navigation .nav-menu > li > a::before, .primary-navigation .nav-menu > li.menu-item-has-children > a::before { display: none !important; } .primary-navigation .nav-menu > li > a > .glozin-svg-icon.caret, .primary-navigation .nav-menu > li > a > .menu-item-icon.caret { display: none !important; } .primary-navigation .nav-menu > li.menu-item-has-children > a { padding-inline-end: 20px !important; } .primary-navigation .nav-menu > li:hover > a { color: transparent !important; transform: translateY(-1px); } .primary-navigation .nav-menu > li:hover > a::after { transform: translate3d(0, 0, 0) scale(1); } .primary-navigation .nav-menu > li:hover > a .glozin-svg-icon:not(.caret), .primary-navigation .nav-menu > li:hover > a .menu-item-icon:not(.caret) { color: var(--gz-color-light, #ffffff); transition: color var(--concept-duration-primary) var(--concept-ease-primary); } .primary-navigation .nav-menu > li > a:not([data-title])::after, .primary-navigation .nav-menu > li > a[data-title='']::after { content: none; } } /* ========================================================================== 2. MEGA MENU / DROPDOWN — drawer reveal with symmetric open/close + Concept-style staggered item animations CRITICAL: We MUST override Glozin's native transform:scale(0) and opacity:0 with !important — otherwise the element snaps invisible on close before clip-path can animate. ========================================================================== */ @media (min-width: 1025px) { /* ============================================= PAGE BACKDROP — gradient dim (Concept-style): darker near the header (top), lighter at bottom. Matches Concept's linear-gradient(to top, rgba(23,23,23,0.10) 40%, rgba(23,23,23,0.50) 80%) ============================================= */ body::after { content: ''; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient( to top, rgba(23, 23, 23, 0.10) 40%, rgba(23, 23, 23, 0.50) 80% ); opacity: 0; visibility: hidden; pointer-events: none; z-index: 10; transition: opacity var(--drawer-duration) var(--drawer-ease), visibility 0s linear var(--drawer-duration); } body:has(.primary-navigation .nav-menu > li.menu-item-has-children:hover)::after, body:has(.primary-navigation .nav-menu > li.menu-item-mega:hover)::after { opacity: 1; visibility: visible; transition: opacity var(--drawer-duration) var(--drawer-ease), visibility 0s linear 0s; } .site-header, .site-header__desktop { position: relative; z-index: 11; } /* ============================================= MEGA MENU + SUB-MENU OUTER — drawer reveal Override Glozin's scale(0) / opacity:0 completely. IMPORTANT: also lock `top: 100%` with !important. Glozin's native CSS sets `top: calc(100% + 20px)` as the default and transitions `top` over 0.3s. Without this override the menu visibly "drops 20px" during the close animation. ============================================= */ /* ============================================= ALL SUB-MENUS (regular + mega) — Concept drawer reveal. The panel reveals downward with a rounded clipping mask while the native Glozin scale(0) hiding is neutralized. Pure CSS, no JS needed. ============================================= */ .primary-navigation .nav-menu li > ul.sub-menu, .primary-navigation .menu-item-mega .mega-menu { /* Force Glozin's hide props to "always open" */ opacity: 1 !important; top: 100% !important; visibility: hidden; pointer-events: none; clip-path: inset(0 0 100% 0 round 0 0 20px 20px); -webkit-clip-path: inset(0 0 100% 0 round 0 0 20px 20px); transform: translate3d(0, -8px, 0) !important; transform-origin: top center; will-change: clip-path, transform; overflow: hidden; border-radius: 0 0 20px 20px !important; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.10); transition: clip-path var(--drawer-close-duration) var(--drawer-ease), -webkit-clip-path var(--drawer-close-duration) var(--drawer-ease), transform var(--drawer-close-duration) var(--drawer-ease), visibility 0s linear var(--drawer-close-duration) !important; } .primary-navigation .nav-menu li:hover > ul.sub-menu, .primary-navigation .menu-item-mega:hover .mega-menu { opacity: 1 !important; transform: translate3d(0, 0, 0) !important; top: 100% !important; visibility: visible; pointer-events: auto; clip-path: inset(0 0 0 0 round 0 0 20px 20px); -webkit-clip-path: inset(0 0 0 0 round 0 0 20px 20px); transition: clip-path var(--drawer-open-duration) var(--drawer-ease) var(--drawer-open-delay), -webkit-clip-path var(--drawer-open-duration) var(--drawer-ease) var(--drawer-open-delay), transform var(--drawer-open-duration) var(--drawer-ease) var(--drawer-open-delay), visibility 0s linear var(--drawer-open-delay) !important; } .primary-navigation .nav-menu > li > ul.sub-menu:not(.mega-menu) { min-width: 250px; width: max-content; padding: 24px 0 32px; margin-inline-start: -32px; background: var(--gz-color-light, #ffffff); border: 0; border-radius: 20px !important; clip-path: inset(0 0 100% 0 round 20px); -webkit-clip-path: inset(0 0 100% 0 round 20px); } .primary-navigation .nav-menu > li:hover > ul.sub-menu:not(.mega-menu) { clip-path: inset(0 0 0 0 round 20px); -webkit-clip-path: inset(0 0 0 0 round 20px); } .primary-navigation .nav-menu > li > ul.sub-menu:not(.mega-menu) a { padding: 7px 32px; } .primary-navigation .menu-item-mega .mega-menu { background: var(--gz-color-light, #ffffff); } /* Glozin uses fixed-width mega menus for small dropdown-like menus such as Home, Pages, and some Shop menus. Treat those like Concept's rounded dropdown card, while leaving true full-width mega menus with bottom-only rounding. */ .primary-navigation .menu-item-mega .mega-menu:not(:has(> .mega-menu-container.full-width)) { border-radius: 20px !important; clip-path: inset(0 0 100% 0 round 20px); -webkit-clip-path: inset(0 0 100% 0 round 20px); } .primary-navigation .menu-item-mega:hover .mega-menu:not(:has(> .mega-menu-container.full-width)) { clip-path: inset(0 0 0 0 round 20px); -webkit-clip-path: inset(0 0 0 0 round 20px); } .primary-navigation .menu-item-mega .mega-menu:not(:has(> .mega-menu-container.full-width)) > .mega-menu-container { border-radius: 20px !important; overflow: hidden; } /* ============================================= MEGA MENU INNER ITEMS — Concept-style stagger Items fade in + slide from the inline direction as the drawer opens ============================================= */ .primary-navigation .menu-item-mega .mega-menu .mega-menu__column > li { opacity: 0; transform: translateX(25%); transition: transform 1.0s var(--concept-ease-bounce), opacity 0.9s var(--concept-ease-out); transition-delay: 0s; } .primary-navigation .menu-item-mega:hover .mega-menu .mega-menu__column > li { opacity: 1; transform: translateX(0); transition: transform 0.7s var(--concept-ease-bounce), opacity 0.7s var(--concept-ease-out); } /* Column stagger — aligned with Concept's .3s/.4s/.5s item cadence. */ .primary-navigation .menu-item-mega:hover .mega-menu .mega-menu__row > .mega-menu__column:nth-child(1) > li { transition-delay: 0.32s; } .primary-navigation .menu-item-mega:hover .mega-menu .mega-menu__row > .mega-menu__column:nth-child(2) > li { transition-delay: 0.42s; } .primary-navigation .menu-item-mega:hover .mega-menu .mega-menu__row > .mega-menu__column:nth-child(3) > li { transition-delay: 0.52s; } .primary-navigation .menu-item-mega:hover .mega-menu .mega-menu__row > .mega-menu__column:nth-child(4) > li { transition-delay: 0.62s; } /* Banner in the last column (if any) */ .primary-navigation .menu-item-mega .mega-menu .mega-menu__column > li:has(.menu-widget-banner) { transform: translate3d(0, 12px, 0); transition: transform 0.55s var(--drawer-ease), opacity 0.45s var(--drawer-ease); } .primary-navigation .menu-item-mega:hover .mega-menu .mega-menu__column > li:has(.menu-widget-banner) { transform: translate3d(0, 0, 0); transition: transform 0.75s var(--concept-ease-bounce) 0.36s, opacity 0.65s var(--concept-ease-out) 0.36s; } .primary-navigation .menu-item-mega .mega-menu .menu-widget-banner { opacity: 0; transform: translate3d(0, 10px, 0) scale(0.985); transform-origin: center center; transition: transform 0.55s var(--drawer-ease), opacity 0.45s var(--drawer-ease); will-change: transform, opacity; } .primary-navigation .menu-item-mega:hover .mega-menu .menu-widget-banner { opacity: 1; transform: translate3d(0, 0, 0) scale(1); transition: transform 0.75s var(--concept-ease-bounce) 0.42s, opacity 0.65s var(--concept-ease-out) 0.42s; } /* Reset stagger on close so items fade out quickly together */ .primary-navigation .menu-item-mega:not(:hover) .mega-menu .mega-menu__column > li:not(:has(.menu-widget-banner)), .primary-navigation .menu-item-mega:not(:hover) .mega-menu .mega-menu__row > .mega-menu__column > li:not(:has(.menu-widget-banner)) { transition-delay: 0s; transition-duration: 0.2s; } /* ============================================= REGULAR SUB-MENU ITEMS — subtle stagger fade ============================================= */ .primary-navigation .nav-menu li > ul.sub-menu:not(.mega-menu) > li { opacity: 0; transform: translateX(20%); transition: transform 1.0s var(--concept-ease-bounce), opacity 1.0s var(--concept-ease-out); } .primary-navigation .nav-menu li:hover > ul.sub-menu:not(.mega-menu) > li { opacity: 1; transform: translateX(0); transition: transform 0.6s var(--concept-ease-bounce), opacity 0.6s var(--concept-ease-out); } .primary-navigation .nav-menu li:hover > ul.sub-menu:not(.mega-menu) > li:nth-child(1) { transition-delay: 0.30s; } .primary-navigation .nav-menu li:hover > ul.sub-menu:not(.mega-menu) > li:nth-child(2) { transition-delay: 0.40s; } .primary-navigation .nav-menu li:hover > ul.sub-menu:not(.mega-menu) > li:nth-child(3) { transition-delay: 0.50s; } .primary-navigation .nav-menu li:hover > ul.sub-menu:not(.mega-menu) > li:nth-child(4) { transition-delay: 0.60s; } .primary-navigation .nav-menu li:hover > ul.sub-menu:not(.mega-menu) > li:nth-child(5) { transition-delay: 0.70s; } .primary-navigation .nav-menu li:hover > ul.sub-menu:not(.mega-menu) > li:nth-child(6) { transition-delay: 0.80s; } .primary-navigation .nav-menu li:hover > ul.sub-menu:not(.mega-menu) > li:nth-child(7) { transition-delay: 0.90s; } .primary-navigation .nav-menu li:hover > ul.sub-menu:not(.mega-menu) > li:nth-child(8) { transition-delay: 1.00s; } .primary-navigation .nav-menu li:not(:hover) > ul.sub-menu:not(.mega-menu) > li { transition-delay: 0s; transition-duration: 0.2s; } } /* ========================================================================== 3. QUICK VIEW MODAL ANIMATION — Refined zoom + fade with staggered reveal ========================================================================== */ @keyframes zoomInCenter { 0% { transform: translate(-50%, -50%) scale(0.92); opacity: 0; } 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; } } @keyframes zoomOutCenter { 0% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(0.92); opacity: 0; } } .modal__backdrop { transition: opacity 0.8s var(--concept-ease-smooth), visibility 0.8s var(--concept-ease-smooth); } @media (min-width: 768px) { .modal--open:not(.loading) { animation: fadeIn 0.5s var(--concept-ease-smooth) forwards; } .modal--open:not(.loading) .modal__container { animation: zoomInCenter 0.5s var(--concept-ease-smooth) forwards; transition: transform var(--concept-duration-slow) var(--concept-ease-smooth); } .modal--closing .modal__container { animation: zoomOutCenter 0.4s var(--concept-ease-smooth) forwards; transition: transform var(--concept-duration-slow) var(--concept-ease-smooth); } } .quick-view-modal .modal__content--quickview { opacity: 0; transition: opacity var(--concept-duration-primary) var(--concept-ease-primary) 0.25s, visibility var(--concept-duration-primary) var(--concept-ease-primary) 0.25s; } .quick-view-modal.modal--open:not(.loading) .modal__content--quickview { opacity: 1; } .quick-view-modal.modal--closing .modal__content--quickview { opacity: 1; } .quick-view-modal .modal__button-close { opacity: 1; transition: transform 0.3s ease; } .quick-view-modal.modal--opening .modal__button-close, .quick-view-modal.modal--open:not(.loading) .modal__button-close, .quick-view-modal.modal--closing .modal__button-close { opacity: 1; } /* Quick-view fit fixes (v1.0.90): keep the close button on a solid white circle, let the desktop modal end with the image/content, and remove the mobile side gutters around the product carousel. */ .quick-view-modal .modal__wrapper--quickview, .quick-view-modal .modal__content--quickview { overflow: hidden !important; } .quick-view-modal div.product .product-gallery-summary { margin-bottom: 0 !important; } html body #quick-view-modal .modal__button-close.gz-mc-style-close, html body .quick-view-modal .modal__button-close.gz-mc-style-close { background-color: #ffffff !important; border-color: rgba(0, 0, 0, 0.10) !important; --gz-button-bg-color: #ffffff !important; --gz-button-bg-color-hover: #ffffff !important; } html body #quick-view-modal .modal__button-close.gz-mc-style-close:hover, html body .quick-view-modal .modal__button-close.gz-mc-style-close:hover { background-color: #ffffff !important; } #quick-view-modal .product-featured-icons--single-product, #quick-view-modal .product-featured-icons--mobile, #quick-view-modal .wcboost-wishlist-button, #quick-view-modal .wcboost-products-compare-button, .quick-view-modal .product-featured-icons--single-product, .quick-view-modal .product-featured-icons--mobile, .quick-view-modal .wcboost-wishlist-button, .quick-view-modal .wcboost-products-compare-button { display: none !important; } @media (min-width: 768px) { .quick-view-modal .modal__content--quickview, .quick-view-modal .modal__product, .quick-view-modal div.product.product-quickview, .quick-view-modal div.product .product-gallery-summary { min-height: 0 !important; } .quick-view-modal div.product .product-gallery-summary { gap: 0 !important; align-items: stretch !important; } .quick-view-modal div.product .woocommerce-product-gallery { flex: 0 0 50% !important; max-width: 50% !important; align-self: stretch !important; margin: 0 !important; overflow: hidden !important; background-color: #f6f6f6 !important; } .quick-view-modal div.product .entry-summary { padding-top: 30px !important; padding-bottom: 30px !important; } } @media (max-width: 767px) { .quick-view-modal .modal__container--quickview { padding-inline-start: 0 !important; padding-inline-end: 0 !important; height: min(70dvh, calc(100dvh - env(safe-area-inset-top, 0px) - 12px)) !important; max-height: min(70dvh, calc(100dvh - env(safe-area-inset-top, 0px) - 12px)) !important; min-height: 64dvh !important; overflow: hidden !important; max-width: 100% !important; } .quick-view-modal .modal__wrapper--quickview { border-radius: 15px 15px 0 0 !important; display: flex !important; flex-direction: column !important; height: 100% !important; max-height: 100% !important; overflow-x: hidden !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .quick-view-modal .modal__content--quickview { flex: 1 1 auto !important; min-height: 0 !important; overflow-x: hidden !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .quick-view-modal .modal__product, .quick-view-modal div.product.product-quickview, .quick-view-modal div.product .product-gallery-summary { min-height: 0 !important; overflow: visible !important; } .quick-view-modal div.product .woocommerce-product-gallery { width: 100vw !important; max-width: 100vw !important; margin-inline-start: 50% !important; transform: translateX(-50%) !important; padding: 0 !important; } .quick-view-modal div.product .woocommerce-product-gallery__wrapper, .quick-view-modal div.product .woocommerce-product-gallery__image, .quick-view-modal div.product .woocommerce-product-gallery__image a { border-radius: 0 !important; } .quick-view-modal div.product .entry-summary { padding-bottom: calc(30px + env(safe-area-inset-bottom, 0px)) !important; } } .animation-slide.modal--open:not(.loading) .modal__container, .animation-slide.modal--closing .modal__container { transition: transform var(--concept-duration-slow) var(--concept-ease-smooth); } @media (max-width: 767px) { .modal--open:not(.loading) .modal__container { transition: transform 0.5s var(--concept-ease-smooth) 0.1s; } .modal--closing .modal__container { transition: transform 0.4s var(--concept-ease-smooth); } } /* ========================================================================== 4. PRODUCT CARD — Show/hide animations on card hover ========================================================================== */ @media screen and (pointer: fine) { ul.products li.product .product-card-animation { opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity var(--concept-duration-primary) var(--concept-ease-primary), visibility var(--concept-duration-primary) var(--concept-ease-primary), transform var(--concept-duration-primary) var(--concept-ease-primary); } ul.products li.product .product-card-animation.product-card-animation--bottom { transform: translateY(10px); } ul.products li.product .product-inner:hover .product-card-animation { opacity: 1; visibility: visible; transform: translateY(0); } ul.products li.product .product-inner:hover .product-card-animation.product-card-animation--bottom { transform: translateY(0); } .product-featured-icons--primary > *:nth-child(1) { transition-delay: 0s; } .product-featured-icons--primary > *:nth-child(2) { transition-delay: 0.04s; } .product-featured-icons--primary > *:nth-child(3) { transition-delay: 0.08s; } .product-featured-icons--primary > *:nth-child(4) { transition-delay: 0.12s; } .product-featured-icons--second { transition: opacity var(--concept-duration-primary) var(--concept-ease-primary), visibility var(--concept-duration-primary) var(--concept-ease-primary), transform var(--concept-duration-primary) var(--concept-ease-primary) !important; } ul.products li.product .product-thumbnail .product-thumbnails--fadein img { transition: transform 0.8s var(--concept-ease-primary), opacity 0.5s var(--concept-ease-primary); } ul.products li.product .product-inner:hover .product-thumbnail .product-thumbnails--fadein img { transform: scale(1.05); } ul.products li.product .product-thumbnails--fadein-image { transition: opacity var(--concept-duration-primary) var(--concept-ease-primary); } ul.products.product-card-wishlist-always-show li.product .product-featured-icons--primary > *:not(.wcboost-wishlist-button) { opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity var(--concept-duration-primary) var(--concept-ease-primary), visibility var(--concept-duration-primary) var(--concept-ease-primary), transform var(--concept-duration-primary) var(--concept-ease-primary); } ul.products.product-card-wishlist-always-show li.product .product-inner:hover .product-featured-icons--primary > *:not(.wcboost-wishlist-button) { opacity: 1; visibility: visible; transform: translateY(0); } ul.products li.product .product-inner .glozin-badges-sale__countdown { transition: opacity var(--concept-duration-fast) var(--concept-ease-fast), visibility var(--concept-duration-fast) var(--concept-ease-fast), transform var(--concept-duration-fast) var(--concept-ease-fast); } } @media screen and (pointer: coarse) { ul.products li.product .product-card-animation { transition: none; } } /* ========================================================================== 5. CONCEPT-STYLE BUTTON FILL HOVER — JavaScript-driven ========================================================================== */ .btn-fill { display: block; position: absolute; width: 150%; height: 200%; top: -50%; left: -25%; border-radius: 50%; pointer-events: none; /* `z-index: -1` keeps the fill behind text nodes inside the button; `isolation: isolate` on `.concept-hover-btn` pins it so it can't escape below the button's own background. */ z-index: -1; will-change: transform; /* Default — fill parked below the button. `:hover` / `:active` slide it up to 0 (centered, covering the button). Driven by the transition declared on `.concept-hover-btn .btn-fill` below. */ transform: translate3d(0, 76%, 0); transition: transform 0.6s cubic-bezier(0.3, 1, 0.3, 1); } /* CSS-only hover fill — mirrors the minicart X-button's `:hover`-driven slide that the user likes. Works on desktop hover AND on mobile tap (mobile browsers hold `:hover` state on tap until another tap elsewhere, same as the X-button). `:active` is included so the animation starts on press (not just on hover-landing), which on touch feels immediate instead of lagging behind finger release. */ .concept-hover-btn:hover .btn-fill, .concept-hover-btn:active .btn-fill, .concept-hover-btn:focus-visible .btn-fill { transform: translate3d(0, 0%, 0); } .btn-fill ~ *, .btn-fill ~ .glozin-svg-icon, .btn-fill ~ .add-to-cart__text, .btn-fill ~ span { position: relative; z-index: 1; } .concept-hover-btn { position: relative; overflow: hidden; /* Create a stacking context so the fill's z-index: -1 is scoped to the button and doesn't drop behind the button's own background/border. */ isolation: isolate; } @media (pointer: fine) { /* Transition color faster (was 0.5s + 0.1s delay — too long to wait before the text becomes readable against the incoming fill). */ .concept-hover-btn { transition: color 0.18s linear; } } .concept-hover-btn:hover, .concept-hover-btn:active { background-color: var(--gz-button-bg-color) !important; border-color: var(--gz-button-border-color) !important; /* NOTE: `color` is deliberately NOT reset here. The old rule used `color: var(--gz-button-color) !important` which tied with the `.concept-hover-active` color rule below on specificity (both 0,2,0) and, in practice, won the cascade — leaving the text invisible on the white fill. Letting `.concept-hover-active` drive the color directly (and JS sets an inline color as a safety net, see custom-hover-buttons.js) keeps the text readable against the fill. */ } .concept-hover-btn::before, .concept-hover-btn::after { display: none !important; } .concept-hover-btn--secondary .btn-fill { background-color: var(--gz-color-dark, #171717); } .concept-hover-btn--primary .btn-fill { background-color: #ffffff; } /* Text color flip on hover. Covers the CSS-only path (`:hover`, `:active`) for mobile tap + desktop hover, and the legacy `.concept-hover-active` class (no longer added by JS but kept for safety in case any third-party code triggers it). */ .concept-hover-btn--secondary:hover, .concept-hover-btn--secondary:active, .concept-hover-btn--secondary:focus-visible, .concept-hover-btn--secondary.concept-hover-active, .concept-hover-btn--secondary:hover *, .concept-hover-btn--secondary:active *, .concept-hover-btn--secondary:focus-visible *, .concept-hover-btn--secondary.concept-hover-active * { color: var(--gz-color-light, #ffffff) !important; -webkit-text-fill-color: var(--gz-color-light, #ffffff) !important; } .concept-hover-btn--primary:hover, .concept-hover-btn--primary:active, .concept-hover-btn--primary:focus-visible, .concept-hover-btn--primary.concept-hover-active, .concept-hover-btn--primary:hover *, .concept-hover-btn--primary:active *, .concept-hover-btn--primary:focus-visible *, .concept-hover-btn--primary.concept-hover-active * { color: var(--gz-color-dark, #171717) !important; -webkit-text-fill-color: var(--gz-color-dark, #171717) !important; } .gz-buy-now-button.concept-hover-btn--primary:hover, .gz-buy-now-button.concept-hover-btn--primary:active, .gz-buy-now-button.concept-hover-btn--primary:focus-visible, .gz-buy-now-button.concept-hover-btn--primary.concept-hover-active { color: var(--gz-color-primary, #c41230) !important; -webkit-text-fill-color: var(--gz-color-primary, #c41230) !important; } /* ----- Hover text colors — maximum-specificity overrides --------------- THE REAL BUG (fixed in this revision): the previous selectors used `body .single-product …` with a SPACE between `body` and `.single-product`. That means "`body`'s descendant with class `.single-product`" — but `.single-product` is on the BODY element itself, not a descendant, so the whole selector never matched and these rules were silently dead. The correct selector is `body.single-product` (no space — same element). Same trap avoided below for all class-on-body matches. JS in `custom-hover-buttons.js` ALSO sets `color` and `-webkit-text-fill-color` inline with `!important` on mouseenter — belt and suspenders. `-webkit-text-fill-color` is included because Safari (and Chromium-on-Mac for form controls) uses it as the text paint color and it beats plain `color` when both are set. */ /* PRIMARY buttons (white fill → BLACK text): • Single-product "Add to cart" • Minicart "Checkout" • Sticky add-to-cart These rules do NOT require the JS-added `.concept-hover-btn` class, so they work even if the hover-fill JS fails to initialise the button. */ html body.single-product div.product button.single_add_to_cart_button:hover, html body.single-product div.product button.single_add_to_cart_button:hover *, html body .cart-panel .woocommerce-mini-cart__buttons a.button.checkout:hover, html body .cart-panel .woocommerce-mini-cart__buttons a.button.checkout:hover *, html body #glozin-sticky-add-to-cart .single_add_to_cart_button:hover, html body #glozin-sticky-add-to-cart .single_add_to_cart_button:hover *, html body .glozin-sticky-add-to-cart .single_add_to_cart_button:hover, html body .glozin-sticky-add-to-cart .single_add_to_cart_button:hover * { color: #000000 !important; -webkit-text-fill-color: #000000 !important; } /* SECONDARY buttons (dark fill → WHITE text): • Minicart "View cart" (any minicart button that is NOT the checkout) */ html body .cart-panel .woocommerce-mini-cart__buttons a.button:not(.checkout):hover, html body .cart-panel .woocommerce-mini-cart__buttons a.button:not(.checkout):hover * { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* Minicart footer buttons layout — fill needs to sit under the text. */ .cart-panel .woocommerce-mini-cart__buttons a.button.concept-hover-btn { position: relative; overflow: hidden; isolation: isolate; } /* ========================================================================== 6. PRODUCT TITLE LINK HOVER ========================================================================== */ ul.products li.product .woocommerce-loop-product__title a { transition: color var(--concept-duration-primary) var(--concept-ease-primary); } /* ========================================================================== 7. MODAL CLOSE BUTTON ========================================================================== */ .modal__button-close .glozin-svg-icon { transition: transform var(--concept-duration-primary) var(--concept-ease-primary); } .modal__button-close:hover .glozin-svg-icon { transform: rotate(90deg); } /* ========================================================================== 8. iOS-STYLE DRAWERS — cart, mobile menu, account/login Replaces the abrupt black backdrop and stiff slide with: • soft CSS-animated dim + backdrop-filter blur (iOS sheet feel) • iOS system ease curve on the drawer container Applies to all `.offscreen-panel` drawers (cart-panel, hamburger-panel, account-panel) and to `.login-modal` (opened by the mobile bottom-nav "Account" button). NOTE ON !important: the parent theme uses jQuery `.fadeIn()/.fadeOut()` on `.panel__backdrop`, which sets inline `display` + `opacity` styles. We beat those inline styles with `!important` so the backdrop becomes a pure CSS transition (opacity + backdrop-filter together), not a jQuery opacity tween on top of a solid-black box. ========================================================================== */ /* -------- Tokens (v2 — Concept-theme calibrated) -------- Concept Shopify theme uses: --animation-primary: .5s cubic-bezier(.3, 1, .3, 1) .drawer .overlay → transition: .8s cubic-bezier(.7,0,.2,1) .drawer .drawer__inner → transition: .6s cubic-bezier(.7,0,.2,1) We match those curves/durations, then layer a gradual backdrop-filter blur on top for the "iOS-like" depth effect. */ :root { /* Concept's drawer slide curve — silky, strong ease-out. */ --ios-drawer-ease: cubic-bezier(0.7, 0, 0.2, 1); /* Slower curve for the backdrop — the dim/blur should breathe in, not snap. Matches Concept's 0.8s overlay transition. */ --ios-backdrop-ease: cubic-bezier(0.7, 0, 0.2, 1); --ios-drawer-open-duration: 0.62s; --ios-drawer-close-duration: 0.52s; --ios-backdrop-open-duration: 0.80s; --ios-backdrop-close-duration: 0.65s; /* Gradient dim values (Concept uses a gradient rather than a flat fill — stronger dim on the far side, lighter near the drawer edge, giving a sense of depth). We lower the "near" stop further so the blur does the heavy lifting without the scene going muddy. */ --ios-backdrop-dim-near: rgba(17, 17, 17, 0.12); --ios-backdrop-dim-far: rgba(17, 17, 17, 0.42); /* Blur builds gradually via transition; these are the end states. */ --ios-backdrop-blur: 16px; --ios-backdrop-saturate: 170%; } /* ---------- Shared panel backdrop (cart / mobile menu / account) ---------- The parent theme fades these with jQuery (inline opacity + display styles). We use `!important` to beat those inline styles so the backdrop becomes a pure CSS transition — opacity, background, AND backdrop-filter animating together over the same 0.8s curve → gradual, synced dim + blur. */ /* IMPORTANT: `!important` on opacity/backdrop-filter is REQUIRED here. The parent theme runs jQuery `.fadeIn()/.fadeOut()` on the backdrop element directly — that tweens inline opacity 1↔0 over 400ms, and a non-`!important` rule loses to inline styles in the cascade. With `!important` we hold opacity at 0 (closed) / 1 (open) regardless of what jQuery writes inline, so the CSS transitions on the SAME properties become the visible animation. WHITE-SPIKE FIX: the gradient dim is painted via `background-image` on the BASE rule (not gated behind `--open`). Why it matters: `background-image` can't be transitioned in CSS, so when a rule with a gradient gets un-selected, the gradient vanishes INSTANTLY. The previous revision had the gradient only on `.--open`, so closing the drawer removed the dim at tick 0, then opacity + blur faded over 650ms — you saw the page "un-dim" immediately, then blur fade after, a visible "white spike". Keeping the gradient on the base rule means the dim is always painted; opacity alone controls its visibility, and opacity animates smoothly both directions. Matches how the quick-view backdrop already works. */ .offscreen-panel .panel__backdrop { display: block !important; background-color: transparent !important; opacity: 0 !important; visibility: hidden; -webkit-backdrop-filter: blur(0px) saturate(100%); backdrop-filter: blur(0px) saturate(100%); transition: opacity var(--ios-backdrop-open-duration) var(--ios-backdrop-ease), -webkit-backdrop-filter var(--ios-backdrop-open-duration) var(--ios-backdrop-ease), backdrop-filter var(--ios-backdrop-open-duration) var(--ios-backdrop-ease), visibility 0s linear var(--ios-backdrop-open-duration); will-change: opacity, backdrop-filter; } /* Gradient dim lives on the BASE (class-independent) rule so it stays painted through the entire close animation and fades with opacity rather than disappearing instantly on class-removal. Direction rules for .panel__container drawers (cart, account, mobile menu): `.--side-right` stays on the right (parent's `.panel__container { transform: translateX(100%) }` base), and `.--side-left` gets flipped to the left by the parent's `.offscreen-panel--side-left .panel__container { translateX(-100%) }` override. So: • drawer on RIGHT → far from drawer = LEFT → gradient `to left` (strongest dim at the left edge of the page behind the drawer) • drawer on LEFT → far from drawer = RIGHT → gradient `to right` (Filter panel's `.sidebar__container` is a DIFFERENT case — it uses `--side-right` but the parent CSS flips it to slide from the left. That's handled separately on `.sidebar__backdrop` further below.) */ .offscreen-panel.offscreen-panel--side-right .panel__backdrop { background-image: linear-gradient( to left, var(--ios-backdrop-dim-near) 30%, var(--ios-backdrop-dim-far) 85% ) !important; } .offscreen-panel.offscreen-panel--side-left .panel__backdrop { background-image: linear-gradient( to right, var(--ios-backdrop-dim-near) 30%, var(--ios-backdrop-dim-far) 85% ) !important; } .offscreen-panel--open .panel__backdrop { /* Open-state targets, also `!important` so they beat jQuery's inline opacity tween (which would otherwise make the backdrop snap to a partial value mid-animation). */ opacity: 1 !important; visibility: visible; -webkit-backdrop-filter: blur(var(--ios-backdrop-blur)) saturate(var(--ios-backdrop-saturate)); backdrop-filter: blur(var(--ios-backdrop-blur)) saturate(var(--ios-backdrop-saturate)); transition: opacity var(--ios-backdrop-open-duration) var(--ios-backdrop-ease), background-color var(--ios-backdrop-open-duration) var(--ios-backdrop-ease), -webkit-backdrop-filter var(--ios-backdrop-open-duration) var(--ios-backdrop-ease), backdrop-filter var(--ios-backdrop-open-duration) var(--ios-backdrop-ease), visibility 0s linear 0s; } /* ---------- Shared panel container (the drawer itself) ------------------- */ /* Container slide. The drop shadow is gated to the OPEN state only — leaving it on the closed-rest container made an 80px-wide shadow halo bleed back into the page from the right (cart/account/search) and from the left (mobile menu), showing as faint pink/grey gradients along the page edges even when nothing was open. We fade the shadow in/out together with the slide. Duration: symmetric 0.62s open AND close (not the 0.52s close var). User asked for matched speeds — the previous asymmetric close felt rushed next to the 0.62s open. */ .offscreen-panel .panel__container { transition: transform var(--ios-drawer-open-duration) var(--ios-drawer-ease), box-shadow var(--ios-drawer-open-duration) var(--ios-drawer-ease) !important; box-shadow: 0 0 0 rgba(0, 0, 0, 0); will-change: transform; } .offscreen-panel--open .panel__container { transition: transform var(--ios-drawer-open-duration) var(--ios-drawer-ease), box-shadow var(--ios-drawer-open-duration) var(--ios-drawer-ease) !important; box-shadow: -24px 0 80px rgba(0, 0, 0, 0.10); } .offscreen-panel--side-left.offscreen-panel--open .panel__container { box-shadow: 24px 0 80px rgba(0, 0, 0, 0.10); } /* ---------- Login modal + Search modal — drawer-styled overlays ---------- Both are driven by `custom-modal-drawers.js` (Web Animations API) for reliable open/close animations on container AND backdrop. The parent theme's `glozin.openModal/closeModal` flips `display:none ↔ block` and tweens inline `opacity` with `$.fadeIn(1000)/fadeOut(400)` — so pure CSS transitions are unreliable here (no painted "from" state on open, and a cancelled keyframe animation leaves no style delta for a close transition to catch). CSS below provides: • The gradient dim + rest states (blur 0 ↔ 16px) that JS animates toward • `opacity: 1 !important` on the modal element so jQuery's opacity fade doesn't cross-fade the backdrop and container together • Container rest transforms so the drawer is offscreen when closed, even if JS fails to load. */ /* (1) Beat the jQuery fadeIn/fadeOut tween on the modal element. CRITICAL: do NOT put `!important` on `transform` on any container below — `!important` author declarations beat WAAPI animations in the CSS cascade, so a keyframe animation would run but its values would be ignored on the element. Keep transforms non-important; boost specificity via compound selectors if they need to beat parent theme rules. */ .login-modal.modal--opening, .login-modal.modal--open, .login-modal.modal--closing, .search-modal.modal--opening, .search-modal.modal--open, .search-modal.modal--closing, .quick-view-modal.modal--opening, .quick-view-modal.modal--open, .quick-view-modal.modal--closing, .product-ask-question-modal.modal--opening, .product-ask-question-modal.modal--open, .product-ask-question-modal.modal--closing, .product-share-modal.modal--opening, .product-share-modal.modal--open, .product-share-modal.modal--closing { opacity: 1 !important; } /* ---------- Backdrop — gradient dim rest states + blur target ---------- JS (WAAPI) drives opacity + backdrop-filter for reliable animation on open (CSS transitions can't animate display:none → block reliably). The CSS declarations below act as the rest state AND as a fallback if JS fails to load. No `!important` on backdrop-filter/opacity so WAAPI wins during animation. */ .login-modal .modal__backdrop, .login-modal.modal .modal__backdrop, .search-modal .modal__backdrop, .search-modal.modal .modal__backdrop, .quick-view-modal .modal__backdrop, .quick-view-modal.modal .modal__backdrop, .product-ask-question-modal .modal__backdrop, .product-ask-question-modal.modal .modal__backdrop, .product-share-modal .modal__backdrop, .product-share-modal.modal .modal__backdrop { background-color: transparent !important; opacity: 0; -webkit-backdrop-filter: blur(0px) saturate(100%); backdrop-filter: blur(0px) saturate(100%); will-change: opacity, backdrop-filter; } /* Login modal slides up from bottom → top-biased dim */ .login-modal .modal__backdrop, .login-modal.modal .modal__backdrop { background-image: linear-gradient( to top, var(--ios-backdrop-dim-near) 30%, var(--ios-backdrop-dim-far) 85% ) !important; } /* Search modal direction varies by viewport — gradient follows it. */ @media (min-width: 1200px) { /* Desktop: slides down from top → bottom-biased dim */ .search-modal .modal__backdrop, .search-modal.modal .modal__backdrop { background-image: linear-gradient( to bottom, var(--ios-backdrop-dim-near) 30%, var(--ios-backdrop-dim-far) 85% ) !important; } } @media (max-width: 1199px) { /* Mobile/tablet: slides in from right → left-biased dim (matches minicart) */ .search-modal .modal__backdrop, .search-modal.modal .modal__backdrop { background-image: linear-gradient( to left, var(--ios-backdrop-dim-near) 30%, var(--ios-backdrop-dim-far) 85% ) !important; } } /* Quick-view modal: centered/bottom-sheet — use a radial/top-biased fill */ .quick-view-modal .modal__backdrop, .quick-view-modal.modal .modal__backdrop, .product-ask-question-modal .modal__backdrop, .product-ask-question-modal.modal .modal__backdrop, .product-share-modal .modal__backdrop, .product-share-modal.modal .modal__backdrop { background-image: radial-gradient( ellipse at center, var(--ios-backdrop-dim-near) 20%, var(--ios-backdrop-dim-far) 100% ) !important; } /* Fallback CSS rest states for when JS hasn't fired yet. IMPORTANT: `quick-view-modal` is EXCLUDED from this rule because its WAAPI animation is event-driven (`glozin_product_quick_view_loaded`) and runs a frame after the class lands. Having a CSS end-state here would snap the backdrop to full blur the instant the class is added, and you'd see a jarring "site goes blurry immediately" before the modal slid in. For quick-view, WAAPI is the sole controller of the backdrop — if JS fails, the backdrop stays invisible (acceptable fallback vs. the snap). */ .login-modal.modal--open:not(.loading) .modal__backdrop, .login-modal.modal--opening .modal__backdrop, .search-modal.modal--open:not(.loading) .modal__backdrop, .search-modal.modal--opening .modal__backdrop, .product-ask-question-modal.modal--open:not(.loading) .modal__backdrop, .product-ask-question-modal.modal--opening .modal__backdrop, .product-share-modal.modal--open:not(.loading) .modal__backdrop, .product-share-modal.modal--opening .modal__backdrop { opacity: 1; -webkit-backdrop-filter: blur(var(--ios-backdrop-blur)) saturate(var(--ios-backdrop-saturate)); backdrop-filter: blur(var(--ios-backdrop-blur)) saturate(var(--ios-backdrop-saturate)); } .login-modal.modal--closing .modal__backdrop, .search-modal.modal--closing .modal__backdrop, .quick-view-modal.modal--closing .modal__backdrop, .product-ask-question-modal.modal--closing .modal__backdrop, .product-share-modal.modal--closing .modal__backdrop { opacity: 0; -webkit-backdrop-filter: blur(0px) saturate(100%); backdrop-filter: blur(0px) saturate(100%); /* Parent rule `.modal--closing .modal__backdrop { transition: none }` kills the close fallback; re-enable it. */ transition: opacity var(--ios-backdrop-open-duration) var(--ios-backdrop-ease), -webkit-backdrop-filter var(--ios-backdrop-open-duration) var(--ios-backdrop-ease), backdrop-filter var(--ios-backdrop-open-duration) var(--ios-backdrop-ease) !important; } /* ---------- Container rest states (NO `!important` on transform) ---------- JS drives the slide via WAAPI. We purposely leave parent's transforms to define the base direction (mobile=right for search, bottom for login/ quick-view; desktop=top for search, centered for login/quick-view). */ /* Login modal: desktop fade-scale via CSS keyframes. Mobile slide is pure WAAPI (the parent theme's default translateY(100%) base already sits the drawer offscreen below). */ @media (max-width: 767px) { .login-modal .modal__container { will-change: transform; box-shadow: 0 -24px 80px rgba(0, 0, 0, 0.10); } } @media (min-width: 768px) { .login-modal.modal--open:not(.loading) .modal__container { animation: iosModalIn var(--ios-drawer-open-duration) var(--ios-drawer-ease) forwards !important; } .login-modal.modal--closing .modal__container { animation: iosModalOut var(--ios-drawer-close-duration) var(--ios-drawer-ease) forwards !important; } } /* Search modal: parent handles the base direction per-viewport already (translateX(100%) <1200px, translateY(-120%) ≥1200px) — we just add a tasteful shadow. Transitions are ignored because WAAPI runs. */ .search-modal .modal__container { will-change: transform; } @media (max-width: 1199px) { .search-modal .modal__container { box-shadow: -24px 0 80px rgba(0, 0, 0, 0.10); } } @media (min-width: 1200px) { .search-modal .modal__container { box-shadow: 0 24px 80px rgba(0, 0, 0, 0.10); } } /* Quick-view modal: parent's default on desktop is zoomInCenter (0.35s ease); replace with the softer iOS fade-scale. Mobile uses dedicated slide-up/slide-down KEYFRAME animations instead of WAAPI because quick-view's open is gated behind an AJAX round trip — the modal goes from `display:none → block` in the same tick a bunch of other state settles, and WAAPI timing against that was unreliable. CSS keyframe animations start correctly on `display:none → block` (unlike CSS transitions), and using two distinct keyframe names (Up for open, Down for close) means neither cancels the other's fill state. */ .quick-view-modal .modal__container { will-change: transform; } .product-ask-question-modal .modal__container, .product-share-modal .modal__container { will-change: transform; } .product-ask-question-modal .modal__wrapper, .product-share-modal .modal__wrapper { background: #ffffff !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border: 0 !important; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.14) !important; } .product-ask-question-modal .wpcf7-form .wpcf7-submit, .product-ask-question-modal button[type="submit"], .product-ask-question-modal input[type="submit"] { min-height: 50px !important; border-radius: 30px !important; padding: 0 28px !important; background: #111111 !important; border-color: #111111 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1 !important; text-transform: none !important; letter-spacing: 0 !important; box-shadow: none !important; position: relative !important; overflow: hidden !important; transition: background-color 0.32s cubic-bezier(0.7, 0, 0.3, 1), color 0.32s cubic-bezier(0.7, 0, 0.3, 1), transform 0.38s cubic-bezier(0.22, 1, 0.36, 1) !important; } .product-ask-question-modal button[type="submit"].concept-hover-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; isolation: isolate !important; gap: 8px !important; } .product-ask-question-modal button[type="submit"].concept-hover-btn .btn-fill { display: block !important; background-color: #ffffff !important; z-index: 0 !important; opacity: 1 !important; visibility: visible !important; transform: translate3d(0, 76%, 0) !important; transition: transform 0.6s cubic-bezier(0.3, 1, 0.3, 1) !important; } .product-ask-question-modal button[type="submit"].concept-hover-btn:hover .btn-fill, .product-ask-question-modal button[type="submit"].concept-hover-btn:active .btn-fill, .product-ask-question-modal button[type="submit"].concept-hover-btn:focus-visible .btn-fill { transform: translate3d(0, 0, 0) !important; } .product-ask-question-modal button[type="submit"].concept-hover-btn > *:not(.btn-fill) { position: relative !important; z-index: 1 !important; } .product-ask-question-modal button[type="submit"].concept-hover-btn:hover, .product-ask-question-modal button[type="submit"].concept-hover-btn:active, .product-ask-question-modal button[type="submit"].concept-hover-btn:focus-visible { color: #111111 !important; -webkit-text-fill-color: #111111 !important; transform: translate3d(0, -1px, 0); } .product-ask-question-modal button[type="submit"].concept-hover-btn:hover *:not(.btn-fill), .product-ask-question-modal button[type="submit"].concept-hover-btn:active *:not(.btn-fill), .product-ask-question-modal button[type="submit"].concept-hover-btn:focus-visible *:not(.btn-fill) { color: #111111 !important; -webkit-text-fill-color: #111111 !important; } /* Mobile quick-view: animations driven by JS (Web Animations API) in custom-modal-drawers.js, triggered on the `glozin_product_quick_view_loaded` event. CSS keyframes here proved unreliable because the modal arrives at `display:block` via jQuery.fadeIn in the same tick as the class changes after an AJAX round-trip — some browsers don't restart an animation whose `animation-name` was set while the element was still `display:none`. WAAPI + an explicit event hook gives us deterministic timing. */ @media (min-width: 768px) { .quick-view-modal.modal--open:not(.loading) .modal__container { animation: iosModalIn var(--ios-drawer-open-duration) var(--ios-drawer-ease) forwards !important; } .quick-view-modal.modal--closing .modal__container { animation: iosModalOut var(--ios-drawer-close-duration) var(--ios-drawer-ease) forwards !important; } .product-ask-question-modal.modal--open:not(.loading) .modal__container, .product-share-modal.modal--open:not(.loading) .modal__container { animation: iosModalIn var(--ios-drawer-open-duration) var(--ios-drawer-ease) forwards !important; } .product-ask-question-modal.modal--closing .modal__container, .product-share-modal.modal--closing .modal__container { animation: iosModalOut var(--ios-drawer-close-duration) var(--ios-drawer-ease) forwards !important; } } @keyframes iosSheetSlideUp { from { transform: translateY(100%); } to { transform: translateY(0); } } @keyframes iosSheetSlideDown { from { transform: translateY(0); } to { transform: translateY(100%); } } @keyframes iosBackdropFadeIn { from { opacity: 0; -webkit-backdrop-filter: blur(0px) saturate(100%); backdrop-filter: blur(0px) saturate(100%); } to { opacity: 1; -webkit-backdrop-filter: blur(var(--ios-backdrop-blur)) saturate(var(--ios-backdrop-saturate)); backdrop-filter: blur(var(--ios-backdrop-blur)) saturate(var(--ios-backdrop-saturate)); } } @keyframes iosBackdropFadeOut { from { opacity: 1; -webkit-backdrop-filter: blur(var(--ios-backdrop-blur)) saturate(var(--ios-backdrop-saturate)); backdrop-filter: blur(var(--ios-backdrop-blur)) saturate(var(--ios-backdrop-saturate)); } to { opacity: 0; -webkit-backdrop-filter: blur(0px) saturate(100%); backdrop-filter: blur(0px) saturate(100%); } } @keyframes iosModalIn { 0% { transform: translate(-50%, -46%) scale(0.94); opacity: 0; } 60% { opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; } } @keyframes iosModalOut { 0% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 100% { transform: translate(-50%, -47%) scale(0.97); opacity: 0; } } /* ---------- Respect reduced-motion preferences ---------- */ @media (prefers-reduced-motion: reduce) { .offscreen-panel .panel__backdrop, .offscreen-panel--open .panel__backdrop, .offscreen-panel .panel__container, .offscreen-panel--open .panel__container, .login-modal .modal__backdrop, .login-modal .modal__container, .search-modal .modal__backdrop, .search-modal .modal__container, .quick-view-modal .modal__backdrop, .quick-view-modal .modal__container, .product-ask-question-modal .modal__backdrop, .product-ask-question-modal .modal__container, .product-share-modal .modal__backdrop, .product-share-modal .modal__container, .offscreen-panel--side-right .sidebar__backdrop, .offscreen-panel--side-left .sidebar__backdrop, .offscreen-panel--side-right .sidebar__container, .offscreen-panel--side-left .sidebar__container, .popover .popover__backdrop, .popover .popover__container { transition-duration: 0.01s !important; animation-duration: 0.01s !important; } } /* ========================================================================== 9. iOS-STYLE DRAWERS — filter sidebar + popovers (sort-by, cart note, cart discount, cart estimate) These use DIFFERENT class conventions than `.offscreen-panel`: • Filter sidebar (shop page mobile): root: `