/* * Add-to-Cart success popup — storefront-artsets * Design direction: "Lavender Craft" * * Loaded globally (all pages) so it is ready before any add-to-cart action. * Kept outside of WooCommerce fragment-updated DOM nodes on purpose. * * NOTE: Storefront Customizer injects a broad * button { background-color: ; color: #fff; } * rule inline in with no !important. All button resets below use * !important + the #artsets-atc-popup scope to win specificity. * * Design tokens (inherited from style.css): * --font: 'Outfit' * --text: #1a1a1a * * Popup-specific palette: * #b44de0 — light-purple (icon circle, progress bar start) * #c40074 — hot-pink (primary CTA, loading spinner) * #f0e3ff — lavender-fill (secondary button fill) * #f3e8ff — lavender-wash (card gradient top) */ /* ── Overlay ────────────────────────────────────────────────────────────────── */ #artsets-atc-popup { position: fixed; inset: 0; z-index: 99999; background: rgba(0, 0, 0, 0.45); display: flex; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.18s ease, visibility 0.18s ease; } #artsets-atc-popup.is-open { opacity: 1; visibility: visible; pointer-events: auto; } /* ── Card ────────────────────────────────────────────────────────────────────── */ #artsets-atc-popup .atc-popup-card { background: #ffffff; background-image: linear-gradient(180deg, #f3e8ff 0%, #ffffff 88px); border-radius: 20px; width: 100%; max-width: 460px; padding: 28px; box-sizing: border-box; position: relative; box-shadow: 0 12px 48px rgba(180, 77, 224, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06); font-family: 'Outfit', sans-serif; transform: translateY(14px); transition: transform 0.2s ease; } #artsets-atc-popup.is-open .atc-popup-card { transform: translateY(0); } /* ── Close button (×) ───────────────────────────────────────────────────────── */ #artsets-atc-popup .atc-popup-close { position: absolute !important; top: 16px !important; right: 16px !important; width: 32px !important; height: 32px !important; /* Override Storefront Customizer's button { background-color } injection */ background: none !important; background-color: transparent !important; border: none !important; box-shadow: none !important; cursor: pointer !important; padding: 0 !important; color: #b0b0b0 !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 50% !important; transition: color 0.15s, background-color 0.15s; line-height: 1 !important; text-decoration: none !important; } #artsets-atc-popup .atc-popup-close:hover, #artsets-atc-popup .atc-popup-close:focus { color: #7100ba !important; background-color: #ede0f7 !important; outline: none !important; } #artsets-atc-popup .atc-popup-close svg { display: block; width: 18px; height: 18px; flex-shrink: 0; } /* ── Header: icon + title + product name ────────────────────────────────────── */ #artsets-atc-popup .atc-popup-header { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 20px; padding-right: 36px; } #artsets-atc-popup .atc-popup-icon { flex-shrink: 0; width: 48px; height: 48px; /* Lighter purple — softer than the dark #8e07bb brand colour */ background: #b44de0 !important; background-color: #b44de0 !important; border-radius: 50% !important; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(180, 77, 224, 0.28); border: none !important; } #artsets-atc-popup .atc-popup-icon svg { width: 22px; height: 22px; stroke: #ffffff; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } #artsets-atc-popup .atc-popup-title-wrap { flex: 1; min-width: 0; align-self: center; } #artsets-atc-popup .atc-popup-title-wrap h2 { font-family: 'Outfit', sans-serif !important; font-size: 1.2rem !important; font-weight: 700 !important; color: #1a1a1a !important; margin: 0 0 3px !important; line-height: 1.2 !important; padding: 0 !important; border: none !important; background: none !important; box-shadow: none !important; } #artsets-atc-popup .atc-popup-product-name { font-size: 0.875rem; color: #888; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.4; } /* ── Divider ────────────────────────────────────────────────────────────────── */ #artsets-atc-popup .atc-popup-divider { height: 1px; background: #ede0f7; margin: 0 -28px; } /* ── Shipping section ────────────────────────────────────────────────────────── */ #artsets-atc-popup .atc-popup-shipping { padding: 20px 0 6px; } #artsets-atc-popup .atc-popup-shipping-msg { font-family: 'Outfit', sans-serif; font-size: 0.9rem; color: #1a1a1a; margin: 0 0 14px; line-height: 1.5; } /* ── Progress bar ────────────────────────────────────────────────────────────── */ #artsets-atc-popup .atc-popup-bar-track { height: 8px; background: #ede0f7; border-radius: 100px; overflow: hidden; } #artsets-atc-popup .atc-popup-bar-fill { height: 100%; background: linear-gradient(90deg, #b44de0 0%, #faa8b3 100%); border-radius: 100px; width: 0%; transition: width 0.4s ease; } /* ── Actions row ────────────────────────────────────────────────────────────── */ #artsets-atc-popup .atc-popup-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 20px; } /* ────────────────────────────────────────────────────────────────────────────── * Secondary button — "Zpět do obchodu" * * Uses a soft lavender fill (#f0e3ff) instead of a ghost outline. * Ghost outlines become invisible when Storefront injects button { color: #fff } * (white text on white card). Lavender fill avoids this entirely while * still reading as "secondary" — quieter than the pink primary CTA. * * Same pill shape + padding as primary for visual pairing. * ──────────────────────────────────────────────────────────────────────────── */ #artsets-atc-popup .atc-popup-back { display: inline-flex !important; align-items: center !important; justify-content: center !important; /* Storefront override: set background explicitly */ background: #f0e3ff !important; background-color: #f0e3ff !important; border: none !important; box-shadow: none !important; padding: 12px 24px !important; border-radius: 100px !important; font-family: 'Outfit', sans-serif !important; font-size: 0.95rem !important; font-weight: 600 !important; color: #8e07bb !important; cursor: pointer !important; white-space: nowrap; flex-shrink: 0; line-height: 1.4 !important; text-decoration: none !important; transition: background-color 0.15s, color 0.15s; } #artsets-atc-popup .atc-popup-back:hover, #artsets-atc-popup .atc-popup-back:focus { background: #e5cfff !important; background-color: #e5cfff !important; color: #7100ba !important; outline: none !important; text-decoration: none !important; } /* ────────────────────────────────────────────────────────────────────────────── * Primary button — "Nákupní košík" * * Hot pink pill — higher visual weight = clear CTA hierarchy. * Same pill shape + padding as secondary for consistent height. * ──────────────────────────────────────────────────────────────────────────── */ #artsets-atc-popup .atc-popup-cart-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; background: #faa8b3 !important; background-color: #faa8b3 !important; color: #ffffff !important; font-family: 'Outfit', sans-serif !important; font-size: 0.95rem !important; font-weight: 700 !important; padding: 12px 24px !important; border-radius: 100px !important; border: none !important; text-decoration: none !important; white-space: nowrap; cursor: pointer !important; line-height: 1.4 !important; box-shadow: 0 4px 14px rgba(250, 168, 179, 0.35); transition: background-color 0.15s, box-shadow 0.15s; letter-spacing: 0.01em; } #artsets-atc-popup .atc-popup-cart-btn:hover, #artsets-atc-popup .atc-popup-cart-btn:focus { background: #e8849a !important; background-color: #e8849a !important; color: #ffffff !important; text-decoration: none !important; outline: none !important; box-shadow: 0 6px 20px rgba(250, 168, 179, 0.45); } /* ── Loading state ──────────────────────────────────────────────────────────── * .is-loading on .atc-popup-card: icon → pink spinner, content hidden. * ──────────────────────────────────────────────────────────────────────────── */ #artsets-atc-popup .atc-popup-icon__check { display: flex; align-items: center; justify-content: center; } #artsets-atc-popup .atc-popup-icon__spinner { display: none; } #artsets-atc-popup .atc-popup-card.is-loading .atc-popup-icon { background: #faa8b3 !important; background-color: #faa8b3 !important; box-shadow: 0 4px 14px rgba(250, 168, 179, 0.35); } #artsets-atc-popup .atc-popup-card.is-loading .atc-popup-icon__check { display: none; } #artsets-atc-popup .atc-popup-card.is-loading .atc-popup-icon__spinner { display: block; width: 22px; height: 22px; border: 2.5px solid rgba(255, 255, 255, 0.35); border-top-color: #ffffff; border-radius: 50%; animation: atc-spin 0.7s linear infinite; } #artsets-atc-popup .atc-popup-card.is-loading .atc-popup-divider, #artsets-atc-popup .atc-popup-card.is-loading .atc-popup-shipping, #artsets-atc-popup .atc-popup-card.is-loading .atc-popup-actions { display: none; } @keyframes atc-spin { to { transform: rotate(360deg); } } /* ── Hidden cart data element ─────────────────────────────────────────────── */ #artsets-cart-data-frag { display: none !important; } /* ── Responsive — mobile bottom-sheet ──────────────────────────────────────── * Card slides up from the bottom; rounded top corners only. * Both buttons stretch full-width, column-reversed (primary on top). * ──────────────────────────────────────────────────────────────────────────── */ @media ( max-width: 540px ) { #artsets-atc-popup { padding: 0; align-items: flex-end; } #artsets-atc-popup .atc-popup-card { border-radius: 24px 24px 0 0; max-width: 100%; padding: 24px 20px 36px; background-image: linear-gradient(180deg, #f3e8ff 0%, #ffffff 72px); } #artsets-atc-popup .atc-popup-divider { margin: 0 -20px; } #artsets-atc-popup .atc-popup-title-wrap h2 { font-size: 1.05rem !important; } #artsets-atc-popup .atc-popup-actions { flex-direction: column-reverse; align-items: stretch; } #artsets-atc-popup .atc-popup-cart-btn, #artsets-atc-popup .atc-popup-back { width: 100% !important; justify-content: center !important; } }