/* * Additions to the original WordPress theme styles (app.css is kept as a verbatim copy). */ /* --- Cart loader --- * Shown while a cart request (add, quantity change, remove) is in flight. * The Buy Button SDK re-renders #cart's contents and classes, so the state lives on * and the overlay + spinner are pseudo-elements, which survive those re-renders. */ #cart::before, #cart::after { content: ''; position: absolute; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s, visibility .2s; z-index: 10; } /* Overlay: covers the items and checkout button (blocks checkout mid-update), leaves the header + close button usable */ #cart::before { top: 4.25rem; right: 0; bottom: 0; left: 0; background-color: rgba(0, 0, 0, .75); } /* Spinner */ #cart::after { top: 50%; left: 50%; width: 3rem; height: 3rem; margin: -1.5rem 0 0 -1.5rem; border: 3px solid #f55069; border-top-color: #07ddb1; border-radius: 50%; animation: cart-spin .8s linear infinite; } .is-cart-loading #cart::before, .is-cart-loading #cart::after { opacity: 1; visibility: visible; pointer-events: auto; } /* Header toggle: dim the item count while it's about to change */ .header_cartToggle_wrap .shopify-buy__cart-toggle__count { transition: opacity .2s; } .is-cart-loading .header_cartToggle_wrap .shopify-buy__cart-toggle__count { animation: cart-pulse 1s ease-in-out infinite; } @keyframes cart-spin { to { transform: rotate(360deg); } } @keyframes cart-pulse { 50% { opacity: .3; } } @media (prefers-reduced-motion: reduce) { #cart::after { animation: cart-pulse 1.5s ease-in-out infinite; } } /* --- Backend disabled notice (target of the WordPress admin redirects) --- */ .notice_section { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem 1rem; text-align: center; background-color: #080808; color: #fff; border-top: 2px solid #f55069; } .notice_logo { margin-bottom: 2rem; } .notice_copy { max-width: 28rem; padding-bottom: 2rem; } .notice_link { color: #f55069; text-decoration: underline; } .notice_link:hover { color: #07ddb1; }