/* * Lumini — flyin minicart drawer. * * The drawer *mechanism*: off-canvas positioning, slide transform, scrim, open * state, the scrolling body, and the body-scroll lock. Cosmetic styling (header * bar, rows, steppers, buttons) lives as Tailwind utilities in the markup — * woocommerce/cart/mini-cart.php and template-parts/cart/cart-drawer.php. * * Standalone module, enqueued separately by inc/cart.php (handle * lumini-cart-drawer) — NOT bundled into main.css. Hand-authored plain CSS (no * build step), like header-nav.css / ghiduri.css, relying on the design tokens * main.css exposes on :root so colours track the system by name. Global, because * the basket trigger lives in the global header. */ /* ------------------------------------------------------------------- Overlay */ .lumini-cart-root { position: fixed; inset: 0; z-index: 60; /* above the sticky header (z-50) */ visibility: hidden; pointer-events: none; /* Delay hiding until the slide-out finishes so the exit animates. */ transition: visibility 0s linear 0.35s; } .lumini-cart-root.is-open { visibility: visible; pointer-events: auto; transition-delay: 0s; } .lumini-cart-scrim { position: absolute; inset: 0; background: rgba(10, 10, 10, 0.45); backdrop-filter: blur(2px); opacity: 0; transition: opacity 0.35s var(--ease-cinema, cubic-bezier(0.2, 0.7, 0.2, 1)); } .lumini-cart-root.is-open .lumini-cart-scrim { opacity: 1; } /* --------------------------------------------------------------------- Panel */ .lumini-cart-drawer { position: absolute; top: 0; right: 0; bottom: 0; width: min(92vw, 420px); display: flex; flex-direction: column; background: var(--color-bg, #ffffff); box-shadow: -24px 0 60px -20px rgba(10, 10, 10, 0.35); transform: translateX(100%); transition: transform 0.35s var(--ease-cinema, cubic-bezier(0.2, 0.7, 0.2, 1)); will-change: transform; outline: none; } .lumini-cart-root.is-open .lumini-cart-drawer { transform: translateX(0); } /* ---------------------------------------------------------------------- Body */ /* The WooCommerce fragment wrapper: fills the space between the header bar and * is itself a column so the item list scrolls while the footer stays put. */ .lumini-cart-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; } .lumini-cart-items { flex: 1 1 auto; min-height: 0; margin: 0; padding-top: 0; padding-bottom: 0; list-style: none; overflow-y: auto; overscroll-behavior: contain; } /* ------------------------------------------------------------ State + helpers */ /* Header count badge — present but hidden when the cart is empty, so the * fragment selector exists for 0↔N refreshes. */ .lumini-cart-count--empty { display: none; } /* Applied to while the drawer is open. */ .lumini-no-scroll { overflow: hidden; } @media (prefers-reduced-motion: reduce) { .lumini-cart-root, .lumini-cart-scrim, .lumini-cart-drawer { transition: none; } } /* ---------------------------------------------------------- Loading / busy */ /* * Loading states that double as double-click guards across the cart surfaces: * the two add-to-cart buttons (.lumini-atc), the mini-cart remove × and the * quantity steppers. A busy control hides its label/icon, shows a centred * spinner in its own text colour, and sets `pointer-events: none` so a second * click can't land while the first request is in flight. Lives here because * this module is enqueued globally (the basket trigger is in the global header), * so it reaches the shop, single-product and drawer surfaces alike. */ @keyframes lumini-spin { to { transform: rotate( 360deg ); } } /* * Add-to-cart buttons. WooCommerce's add-to-cart.js adds `.loading` * synchronously on click — before its AJAX — so on the shop card the * `pointer-events: none` below blocks a double-click for free; the * single-product script (product-add-to-cart.js) toggles the same class. The * button is already a positioned ancestor (shop card is absolute; the * single-product button carries a `relative` utility), so the ::after centres. */ .lumini-atc.loading { pointer-events: none; } .lumini-atc.loading > * { visibility: hidden; } .lumini-atc.loading::after { content: ""; position: absolute; top: 50%; left: 50%; width: 1.15em; height: 1.15em; margin: -0.575em 0 0 -0.575em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: lumini-spin 0.6s linear infinite; } /* * Mini-cart remove ×. WooCommerce performs the removal but blocks a * `.woocommerce-mini-cart-item` row — a class our bespoke markup doesn't use — * so no state lands from WC; cart-drawer.js adds `.loading` on click. The row is * swapped out by the fragment repaint on success, which clears it. */ .lumini-cart-items .remove_from_cart_button { position: relative; } .lumini-cart-items .remove_from_cart_button.loading { pointer-events: none; } .lumini-cart-items .remove_from_cart_button.loading > * { visibility: hidden; } .lumini-cart-items .remove_from_cart_button.loading::after { content: ""; position: absolute; top: 50%; left: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: lumini-spin 0.6s linear infinite; } /* * Quantity stepper — blocked while a set-qty request is in flight, dimming and * disabling both +/− at once. The optimistic value stays visible; the stepper is * replaced by the fragment repaint once the cart settles. */ .lumini-qty.is-busy { pointer-events: none; opacity: 0.5; } @media (prefers-reduced-motion: reduce) { .lumini-atc.loading::after, .lumini-cart-items .remove_from_cart_button.loading::after { animation-duration: 1.4s; } }