/* * Caiser AJAX Cart — storefront CSS. * * Extracted from staleks-b2c/themes/caiser/assets/css/caiser.css * (TASK-170, v1.0.0). * * Brand colors / animation duration come from CSS custom properties on * :root (set by the theme). Sensible fallbacks are inlined so the * module ships standalone when installed on a theme that doesn't * define them. * * --caiser-cart-pulse-color success ring (default: #e5159b) * --caiser-cart-shake-color error icon tint (default: #c0392b) * --caiser-cart-anim-duration unused for now (pulse/shake durations * live inline below so they can be * tuned per-animation) */ /* Cart badge as alert-bubble (production parity). Anchors absolutely to the cart wrapper so the count doesn't push the icon out of its slot when the cart fills up. */ #_desktop_cart, #_mobile_cart, #_desktop_cart .blockcart, #_mobile_cart .blockcart, #_desktop_cart .blockcart .header, #_mobile_cart .blockcart .header { position: relative; } /* Classic flips bg + text colors when the cart-preview has the .active modifier (cyan bg, white text). Keep the header chrome static. NOTE: classic's selectors are #header .header-nav .cart-preview.active* (specificity 1,3,x). We can't add .header-nav (desktop cart lives in .header-top, not .header-nav). Instead we compound .blockcart and .cart-preview — both classes are on the same element — to match classic's specificity, and win by source order. */ #header .blockcart.cart-preview.active { background: transparent; } #header .blockcart.cart-preview.active a:hover, #header .blockcart.cart-preview.active a, #header .blockcart.cart-preview.active i { color: var(--caiser-header-text); } /* Kill classic's .blockcart .header { margin-top: .125rem } that was pushing the cart icon 2px down out of the 50px nav baseline. */ #header .blockcart .header { margin-top: 0; } #header #_desktop_cart .cart-products-count, #header #_mobile_cart .cart-products-count { position: absolute; top: -10px; right: -12px; left: auto; min-width: 19px; height: 19px; padding: 0 4px; background: var(--caiser-cart-pulse-color, #e5159b); color: #fff; font-size: 12px; font-weight: 600; line-height: 19px; text-align: center; border-radius: 50%; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); transform-origin: center; } /* Bubble pulse — triggered by caiserajaxcart.js after add-to-cart so the user sees feedback now that we suppress the blockcart modal. */ @keyframes caiser-bubble-pulse { 0% { transform: scale(1); } 35% { transform: scale(1.5); box-shadow: 0 0 0 6px rgba(229, 21, 155, 0.25); } 100% { transform: scale(1); box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); } } .cart-products-count.caiser-bubble-pulse { animation: caiser-bubble-pulse 0.6s ease-out; } /* Cart shake — fired by caiserajaxcart.js when add-to-cart fails so the user sees a clear "no, that didn't go in" cue, distinct from the success pulse. Tints toward red to reinforce the error semantics. */ @keyframes caiser-cart-shake { 0%, 100% { transform: translateX(0); } 15%, 55% { transform: translateX(-4px); } 30%, 70% { transform: translateX(4px); } 85% { transform: translateX(-2px); } } #header #_desktop_cart.caiser-cart-shake, #header #_mobile_cart.caiser-cart-shake { animation: caiser-cart-shake 0.45s ease-in-out; } #header #_desktop_cart.caiser-cart-shake .material-icons, #header #_mobile_cart.caiser-cart-shake .material-icons { color: var(--caiser-cart-shake-color, #c0392b) !important; transition: color 0.2s; } /* Fly-to-cart clone: a thumbnail of the product is appended to and animated from its source position toward the cart icon. caiserajaxcart.js sets initial left/top/width/height inline, then mutates them to the destination — the transition does the rest. */ .caiser-fly-to-cart { position: fixed; z-index: 99999; pointer-events: none; border-radius: 50%; object-fit: cover; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25); transition: left 0.7s cubic-bezier(0.5, -0.05, 0.5, 1.05), top 0.7s cubic-bezier(0.5, -0.05, 0.5, 1.05), width 0.7s ease-in, height 0.7s ease-in, opacity 0.7s ease-in, transform 0.7s ease-in; } /* Desktop: drop the "Cart" text label next to the icon — keep just the icon + count bubble (parity with mobile). The label is a sibling of the icon and bubble. */ #header #_desktop_cart .blockcart .header .hidden-sm-down { display: none; } /* Mobile: cart sits at the viewport edge, so the bubble's negative right offset would clip outside the viewport. Pull it inside. */ @media (max-width: 767px) { #header .header-nav #_mobile_cart { margin-right: 16px; } #header .header-nav #_mobile_cart .cart-products-count { right: -8px; } } /* ─── Toast (Phase 5, v1.1.0) ─────────────────────────────────────── * Floating "Aggiunto al carrello" notification shown on a successful * add when drawer is off and toasts are enabled. Stack container is * appended to by caiserajaxcart.js; toasts are added/removed as * children. Position is driven by the [data-position] attribute on the * stack (operator setting CAISER_AJAXCART_TOAST_POSITION). * * Brand color comes from --caiser-cart-pulse-color (set by the theme, * fallback inlined). z-index above all PS chrome (header is ~1000-ish). */ .caiser-ajaxcart-toast-stack { position: fixed; z-index: 99998; /* one below fly-clone (99999) so a fly anim arrives on top of any lingering toast */ display: flex; flex-direction: column; gap: 8px; pointer-events: none; /* stack itself is non-interactive; individual toasts re-enable below */ /* Default = top-right (matches default config). data-position attrs override below. */ top: 80px; right: 20px; bottom: auto; left: auto; } .caiser-ajaxcart-toast-stack[data-position="top-right"] { top: 80px; right: 20px; bottom: auto; left: auto; align-items: flex-end; } .caiser-ajaxcart-toast-stack[data-position="bottom-right"] { top: auto; right: 20px; bottom: 20px; left: auto; align-items: flex-end; /* Reverse the visual stack so newest toast appears at the bottom-most edge (closest to the corner). flex-direction reversal keeps the append order in DOM but flips the painted order. */ flex-direction: column-reverse; } .caiser-ajaxcart-toast-stack[data-position="center"] { top: 80px; right: auto; bottom: auto; left: 50%; transform: translateX(-50%); align-items: center; } .caiser-ajaxcart-toast { pointer-events: auto; /* re-enable: the user can click "Vai al carrello" */ display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; background: #fff; color: #222; border-radius: 6px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15); font-size: 14px; line-height: 1.2; /* Off-screen starting state for slide-in. transform-origin matters for the center position so the slide-down feels symmetric. */ opacity: 0; transform: translateY(-10px); transition: opacity 200ms ease-out, transform 200ms ease-out; max-width: 320px; } /* When the stack is anchored to the bottom, slide IN from below so the motion feels natural for the position. */ .caiser-ajaxcart-toast-stack[data-position="bottom-right"] .caiser-ajaxcart-toast { transform: translateY(10px); } .caiser-ajaxcart-toast.caiser-ajaxcart-toast-visible { opacity: 1; transform: translateY(0); } .caiser-ajaxcart-toast-icon { display: inline-block; width: 22px; height: 22px; border-radius: 50%; background: var(--caiser-cart-pulse-color, #e5159b); color: #fff; font-size: 14px; font-weight: bold; line-height: 22px; text-align: center; flex: 0 0 22px; } .caiser-ajaxcart-toast-msg { flex: 1 1 auto; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .caiser-ajaxcart-toast-link { flex: 0 0 auto; margin-left: 4px; padding: 4px 8px; font-size: 13px; font-weight: 600; color: var(--caiser-cart-pulse-color, #e5159b); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; } .caiser-ajaxcart-toast-link:hover, .caiser-ajaxcart-toast-link:focus { color: var(--caiser-cart-pulse-color, #e5159b); text-decoration: none; outline: 2px solid var(--caiser-cart-pulse-color, #e5159b); outline-offset: 1px; border-radius: 2px; } /* Mobile: keep the toast away from the device-edge gutter. */ @media (max-width: 767px) { .caiser-ajaxcart-toast-stack[data-position="top-right"], .caiser-ajaxcart-toast-stack[data-position="bottom-right"] { right: 8px; left: 8px; align-items: stretch; } .caiser-ajaxcart-toast-stack[data-position="center"] { left: 8px; right: 8px; transform: none; align-items: stretch; } .caiser-ajaxcart-toast { max-width: none; } } /* ─── Drawer (TASK-187 v1.3.0) ────────────────────────────────────── * * Layered structure: * .caiser-drawer-root full-viewport overlay container * .caiser-drawer-backdrop dark overlay behind drawer (click to close) * .caiser-drawer the actual sliding panel * .caiser-drawer-header * .caiser-drawer-shipping free-shipping progress bar (caisercartrules) * .caiser-drawer-items line item list * .caiser-drawer-footer subtotal + CTAs * * Open/close state controlled by attribute mutation from JS: * .caiser-drawer-root[hidden] closed (display:none, no paint) * .caiser-drawer-root[aria-hidden="false"] open (fully visible, transitioned in) * .caiser-drawer-root.caiser-drawer-opening intermediate (transition in progress) * * Compact vs full variant: .caiser-drawer-root[data-variant="full"] shows * the qty +/-, remove buttons, and subtotal row. Compact hides them via * [data-full-only] / [data-compact-only] attribute selectors. */ .caiser-drawer-root { position: fixed; inset: 0; z-index: 1050; pointer-events: none; /* Browser respects the `hidden` attr — both this and JS-managed `aria-hidden="false"` are required to fully show the drawer. */ } .caiser-drawer-root[aria-hidden="false"] { pointer-events: auto; } .caiser-drawer-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.4); opacity: 0; transition: opacity 250ms ease-out; } .caiser-drawer-root[aria-hidden="false"] .caiser-drawer-backdrop { opacity: 1; } .caiser-drawer { position: absolute; top: 0; right: 0; height: 90vh; width: 100%; max-width: 420px; background: #fff; display: flex; flex-direction: column; box-shadow: -8px 0 32px rgba(0, 0, 0, 0.15); transform: translateX(100%); transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1); will-change: transform; } .caiser-drawer-root[aria-hidden="false"] .caiser-drawer { transform: translateX(0); } /* Handle: visible only on mobile bottom-sheet for swipe-down-to-dismiss affordance. Hidden on desktop (handle = empty pill bar at top). */ .caiser-drawer-handle { display: none; } .caiser-drawer-header { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid #eee; flex-shrink: 0; /* No justify-content: close sits next to title on desktop (avoids the iubenda banner overlap at top-right). Mobile shifts close back to the right via @media override below. */ } .caiser-drawer-title { margin: 0; font-size: 18px; font-weight: 600; color: #222; } .caiser-drawer-close { background: none; border: none; font-size: 28px; line-height: 1; color: #666; cursor: pointer; padding: 0 4px; transition: color 150ms; } .caiser-drawer-close:hover { color: #000; } /* Free-shipping bar */ .caiser-drawer-shipping { padding: 12px 20px; border-bottom: 1px solid #eee; flex-shrink: 0; background: #fafafa; } .caiser-drawer-shipping-msg { font-size: 13px; color: #555; margin-bottom: 8px; } .caiser-drawer-shipping-progress { height: 4px; background: #e5e5e5; border-radius: 2px; overflow: hidden; } .caiser-drawer-shipping-progress-fill { height: 100%; width: 0; background: linear-gradient(90deg, #ff6b9d, #c44579); transition: width 400ms ease-out; } /* Line items */ .caiser-drawer-items { flex: 1 1 auto; overflow-y: auto; padding: 8px 0; /* Empty-state copy via JS read of data-empty-label. Placeholder text while populating handled by JS, not CSS pseudo, so screen readers see the actual content. */ } .caiser-drawer-items:empty::after { content: attr(data-empty-label); display: block; padding: 40px 20px; text-align: center; color: #999; font-size: 14px; } .caiser-drawer-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 20px; border-bottom: 1px solid #f5f5f5; } .caiser-drawer-item:last-child { border-bottom: none; } .caiser-drawer-item-image { flex-shrink: 0; width: 64px; height: 64px; display: block; border-radius: 4px; overflow: hidden; background: #f5f5f5; } .caiser-drawer-item-image img { width: 100%; height: 100%; object-fit: cover; display: block; } .caiser-drawer-item-body { flex: 1 1 auto; min-width: 0; } .caiser-drawer-item-name { display: block; font-size: 14px; font-weight: 500; color: #222; text-decoration: none; line-height: 1.3; margin-bottom: 4px; /* Two-line truncation for long product names */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .caiser-drawer-item-name:hover { color: #c44579; } .caiser-drawer-item-variant { font-size: 12px; color: #888; margin-bottom: 6px; } .caiser-drawer-item-controls { display: flex; align-items: center; gap: 12px; } .caiser-drawer-item-qty { display: flex; align-items: center; gap: 0; border: 1px solid #ddd; border-radius: 4px; overflow: hidden; } .caiser-drawer-item-qty button { background: none; border: none; width: 28px; height: 28px; font-size: 16px; line-height: 1; color: #444; cursor: pointer; transition: background 100ms; } .caiser-drawer-item-qty button:hover { background: #f5f5f5; } .caiser-drawer-item-qty button:disabled { opacity: 0.4; cursor: not-allowed; } .caiser-drawer-item-qty-value { min-width: 28px; text-align: center; font-size: 14px; font-weight: 500; } .caiser-drawer-item-qty-compact { font-size: 13px; color: #666; } .caiser-drawer-item-remove { background: none; border: none; font-size: 18px; line-height: 1; color: #999; cursor: pointer; padding: 4px 8px; margin-left: auto; transition: color 150ms; } .caiser-drawer-item-remove:hover { color: #d33; } .caiser-drawer-item-price { flex-shrink: 0; font-size: 14px; font-weight: 600; color: #222; text-align: right; min-width: 70px; } /* Variant visibility — single source of truth for which controls show. data-variant set by JS on .caiser-drawer-root at open. */ .caiser-drawer-root[data-variant="compact"] [data-full-only] { display: none !important; } .caiser-drawer-root[data-variant="full"] [data-compact-only] { display: none !important; } /* Footer + CTAs */ .caiser-drawer-footer { border-top: 1px solid #eee; padding: 16px 20px; flex-shrink: 0; background: #fff; } .caiser-drawer-subtotal { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; font-size: 15px; } .caiser-drawer-subtotal-label { color: #555; } .caiser-drawer-subtotal-value { font-weight: 600; font-size: 18px; color: #222; } .caiser-drawer-cta-checkout { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 14px 20px; background: #c44579; color: #fff; font-size: 16px; font-weight: 600; text-decoration: none; text-align: center; border-radius: 6px; transition: background 150ms; } .caiser-drawer-cta-checkout:hover { background: #a83965; color: #fff; text-decoration: none; } .caiser-drawer-cta-arrow { font-size: 18px; line-height: 1; } .caiser-drawer-cta-cart { display: block; text-align: center; margin-top: 10px; font-size: 14px; color: #666; text-decoration: underline; } .caiser-drawer-cta-cart:hover { color: #222; } /* ─── Mobile bottom-sheet (<768px) ───────────────────────────────── * Drawer slides up from bottom, takes ~70% of viewport height. Sticky * footer (CTAs always visible while line items scroll). Handle bar at * top for swipe-down-to-dismiss affordance (JS implements the gesture). */ @media (max-width: 767px) { .caiser-drawer { top: auto; right: 0; bottom: 0; height: 70vh; max-width: 100%; width: 100%; border-top-left-radius: 12px; border-top-right-radius: 12px; transform: translateY(100%); box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.18); } .caiser-drawer-root[aria-hidden="false"] .caiser-drawer { transform: translateY(0); } .caiser-drawer-handle { display: block; width: 40px; height: 4px; background: #ddd; border-radius: 2px; margin: 8px auto 0; flex-shrink: 0; } /* Swipe gesture intercept — disable native touch scroll on the handle area so JS swipe handlers don't fight the browser. */ .caiser-drawer-handle, .caiser-drawer-header { touch-action: none; } /* Mobile: push the close button back to the right edge (matches iOS sheet conventions). Desktop keeps it next to the title. */ .caiser-drawer-close { margin-left: auto; } } /* ─── Compact popup (TASK-187 v1.3.0 design revision) ─────────────── * * Square card top-right (Amazon-style "Added to cart" confirmation). * Bigger than toast (includes image + name + qty + CTA) but smaller * than the full drawer. Auto-dismisses after 6s OR persists until the * user closes it via the X button. */ .caiser-popup-root { position: fixed; top: 80px; right: 16px; z-index: 1040; pointer-events: none; } .caiser-popup-root[aria-hidden="false"] { pointer-events: auto; } .caiser-popup-card { width: 320px; background: #fff; border-radius: 8px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18); padding: 16px; position: relative; transform: translateY(-16px); opacity: 0; transition: transform 220ms ease-out, opacity 220ms ease-out; } .caiser-popup-root[aria-hidden="false"] .caiser-popup-card { transform: translateY(0); opacity: 1; } .caiser-popup-close { position: absolute; top: 8px; right: 8px; background: none; border: none; font-size: 22px; line-height: 1; color: #888; cursor: pointer; padding: 4px; transition: color 150ms; } .caiser-popup-close:hover { color: #222; } .caiser-popup-header { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: #2d8c4a; margin-bottom: 12px; } .caiser-popup-icon { display: inline-block; width: 20px; height: 20px; background: #2d8c4a; color: #fff; border-radius: 50%; text-align: center; font-size: 13px; line-height: 20px; } .caiser-popup-body { display: flex; gap: 12px; margin-bottom: 14px; } .caiser-popup-image { flex-shrink: 0; width: 64px; height: 64px; border-radius: 4px; overflow: hidden; background: #f5f5f5; display: block; } .caiser-popup-image img { width: 100%; height: 100%; object-fit: cover; display: block; } .caiser-popup-info { flex: 1 1 auto; min-width: 0; } .caiser-popup-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; color: #222; text-decoration: none; line-height: 1.3; margin-bottom: 4px; } .caiser-popup-name:hover { color: #c44579; } .caiser-popup-qty { font-size: 13px; color: #777; } .caiser-popup-price { font-size: 13px; font-weight: 600; color: #222; margin-top: 2px; } .caiser-popup-shipping { padding: 10px 12px; margin-bottom: 12px; background: #fafafa; border-radius: 5px; } .caiser-popup-shipping-msg { font-size: 12px; color: #555; margin-bottom: 6px; } .caiser-popup-shipping-progress { height: 3px; background: #e5e5e5; border-radius: 2px; overflow: hidden; } .caiser-popup-shipping-progress-fill { height: 100%; width: 0; background: linear-gradient(90deg, #ff6b9d, #c44579); transition: width 400ms ease-out; } .caiser-popup-cta-checkout { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 10px 16px; background: #c44579; color: #fff; font-size: 14px; font-weight: 600; text-decoration: none; text-align: center; border-radius: 5px; transition: background 150ms; } .caiser-popup-cta-checkout:hover { background: #a83965; color: #fff; text-decoration: none; } .caiser-popup-cta-cart { display: block; text-align: center; margin-top: 8px; font-size: 13px; color: #666; text-decoration: underline; } .caiser-popup-cta-cart:hover { color: #222; } @media (max-width: 480px) { .caiser-popup-root { top: 16px; right: 8px; left: 8px; } .caiser-popup-card { width: auto; max-width: 100%; } }