/* ========================================================================== Popup CTA — storefront rendering Shared by the live popup (includes/popup-cta-include.php) and the admin preview (views/admin/cta-popup.php) so what you preview is exactly what visitors get. Add new layouts here alongside an entry in functions/ecommerce/popup-cta-designs.php. NOTE ON SPECIFICITY Pages re-link Bootstrap from inside , which puts Bootstrap LATER in the cascade than this file. Single-class rules here would lose every tie against .card, .card-body and .btn, so every selector that collides with a Bootstrap class is prefixed with .popup-overlay to outrank it. ========================================================================== */ .popup-overlay { position: fixed; inset: 0; background-color: rgba(12, 14, 20, 0.65); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: flex; justify-content: center; align-items: center; padding: 20px; z-index: 1000; animation: popupOverlayIn 0.25s ease both; } /* NOTE ON SPECIFICITY This stylesheet is injected into at runtime, but the page also re-links Bootstrap from inside — which puts Bootstrap LATER in the cascade. So single-class rules here lose every tie against .card, .card-body and .btn. Every selector that collides with a Bootstrap class is therefore prefixed with .popup-overlay to outrank it. */ .popup-overlay .popup-content { position: relative; width: 100%; max-width: 480px; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; border: none; border-radius: 16px; background-color: var(--color-white); background-image: linear-gradient(var(--color-primary), var(--color-secondary)); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); animation: popupContentIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) both; } .popup-overlay .popup-content:focus { outline: none; } /* ============================ DESIGN: SPLIT ============================ Image beside the message. Also the fallback for spin wheel popups, which carry no design class. */ .popup-overlay .popup-content.has-media { max-width: 860px; } @media (min-width: 768px) { .popup-overlay.popup-design-split .popup-content.has-media { flex-direction: row; } .popup-overlay.popup-design-split .popup-content.has-media .popup-media { flex: 0 0 46%; } .popup-overlay.popup-design-split .popup-content.has-media .popup-media img { height: 100%; max-height: none; } .popup-overlay.popup-design-split .popup-content.has-media .popup-cta-card-body { flex: 1 1 auto; } } /* =========================== DESIGN: STACKED =========================== Image across the top, copy underneath. This is the base column layout, so it only needs a narrower card and a taller image allowance. */ .popup-overlay.popup-design-stacked .popup-content { max-width: 520px; } .popup-overlay.popup-design-stacked .popup-media img { max-height: 40vh; } /* ========================== DESIGN: SPOTLIGHT ========================== Copy sits on top of a full-bleed image, over a dark fade. */ .popup-overlay.popup-design-spotlight .popup-content { max-width: 560px; min-height: 420px; display: block; } .popup-overlay.popup-design-spotlight .popup-media { position: absolute; inset: 0; background: #000; } .popup-overlay.popup-design-spotlight .popup-media img { width: 100%; height: 100%; max-height: none; object-fit: cover; } .popup-overlay.popup-design-spotlight .popup-cta-card-body { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; min-height: 420px; background: linear-gradient(to top, rgba(0, 0, 0, 0.88) 20%, rgba(0, 0, 0, 0.55) 55%, rgba(0, 0, 0, 0.15) 100%); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); } /* ============================ DESIGN: MINIMAL ========================== Text only — the image is not rendered at all. */ .popup-overlay.popup-design-minimal .popup-content { max-width: 420px; } .popup-overlay.popup-design-minimal .popup-cta-card-body { text-align: center; padding: 34px 28px 32px; } .popup-overlay.popup-design-minimal .cta-popup-divider { margin-left: auto; margin-right: auto; } /* ===================== PASSIVE DESIGNS: CORNER + BAR =================== These sit alongside the page instead of over it: no dimming, and clicks pass straight through everywhere except the popup itself. */ .popup-overlay.is-passive { background-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; pointer-events: none; padding: 0; } .popup-overlay.is-passive .popup-content { pointer-events: auto; } /* ============================ DESIGN: CORNER =========================== */ .popup-overlay.popup-design-corner { align-items: flex-end; justify-content: flex-end; padding: 18px; } .popup-overlay.popup-design-corner .popup-content { max-width: 340px; animation: popupCornerIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) both; } .popup-overlay.popup-design-corner .popup-cta-card-body { padding: 22px 20px 22px; } .popup-overlay.popup-design-corner .cta-popup-title { font-size: 1.1rem; } .popup-overlay.popup-design-corner .cta-popup-content { font-size: 0.875rem; margin-bottom: 1rem; } .popup-overlay.popup-design-corner .popup-button { padding: 10px 20px; font-size: 0.9rem; } .popup-overlay.popup-design-corner .close-popup { width: 30px; height: 30px; top: 8px; right: 8px; } .popup-overlay.popup-design-corner .close-popup .close-popup-icon { width: 13px; height: 13px; } .popup-overlay.popup-design-corner .popup-cta-card-body > .cta-popup-title:first-child { padding-right: 30px; } /* ============================= DESIGN: BAR ============================= */ .popup-overlay.popup-design-bar { align-items: flex-end; justify-content: center; } .popup-overlay.popup-design-bar .popup-content { max-width: 100%; width: 100%; border-radius: 0; animation: popupBarIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) both; } .popup-overlay.popup-design-bar .popup-cta-card-body { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; padding: 16px 58px 16px 24px; } .popup-overlay.popup-design-bar .cta-popup-title { font-size: 1.05rem; margin-bottom: 0; flex: 0 1 auto; } /* The accent rule and long copy would break the single-line rhythm */ .popup-overlay.popup-design-bar .cta-popup-divider { display: none; } .popup-overlay.popup-design-bar .cta-popup-content { font-size: 0.9rem; margin-bottom: 0; flex: 1 1 240px; } .popup-overlay.popup-design-bar .popup-button { margin-top: 0; flex: 0 0 auto; width: auto; padding: 11px 24px; } .popup-overlay.popup-design-bar .close-popup { top: 50%; right: 14px; transform: translateY(-50%); width: 32px; height: 32px; } .popup-overlay.popup-design-bar .close-popup .close-popup-icon { width: 14px; height: 14px; } .popup-overlay.popup-design-bar .close-popup:hover { transform: translateY(-50%) scale(1.06); } /* The bar lays its title out inline, so it needs no extra clearance */ .popup-overlay.popup-design-bar .popup-cta-card-body > .cta-popup-title:first-child { padding-right: 0; } @media (max-width: 767.98px) { .popup-overlay.popup-design-bar .popup-cta-card-body { flex-direction: column; align-items: flex-start; padding: 18px 50px 18px 20px; } .popup-overlay.popup-design-corner { justify-content: center; } .popup-overlay.popup-design-corner .popup-content { max-width: 100%; } } .popup-overlay .popup-media { flex: 0 0 auto; overflow: hidden; background: rgba(0, 0, 0, 0.35); } /* contain, not cover: these images are usually finished posters with text baked in, and cropping one cuts off the offer. Stacked layout scales the image down to fit rather than clipping it. */ .popup-overlay .popup-media img { display: block; width: 100%; height: auto; max-height: 34vh; object-fit: contain; object-position: center; } .popup-overlay .popup-content.spin-wheel-popup { max-width: 900px; width: 95%; min-height: 500px; } .popup-overlay .popup-cta-card { border: none; overflow: hidden; } .popup-overlay .popup-cta-card-body { padding: 28px 26px 30px; background: linear-gradient(var(--color-primary), var(--color-secondary)); color: var(--color-white); overflow-y: auto; min-height: 0; } .popup-overlay .popup-cta-card-body::-webkit-scrollbar { width: 8px; } .popup-overlay .popup-cta-card-body::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.3); border-radius: 4px; } .popup-overlay .cta-popup-title { color: var(--color-white); font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.85rem); font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; margin-bottom: 0.6rem; } .popup-overlay .cta-popup-divider { width: 56px; height: 3px; border: none; border-radius: 3px; opacity: 1; background-color: var(--color-white); margin: 0 0 1rem; } .popup-overlay .cta-popup-content { color: var(--color-white); font-size: 0.975rem; line-height: 1.6; opacity: 0.95; margin-bottom: 1.5rem; } .popup-overlay .popup-cta-card-body .form-control { border: none; border-radius: 100px; padding: 12px 18px; } /* The icon is an SVG, not a `×` glyph — a glyph's optical centre moves with the font, so it never sat squarely in the circle. Sizing the SVG keeps the cross dead-centre at every design's button size. */ .popup-overlay .close-popup { position: absolute; top: 12px; right: 12px; z-index: 3; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; padding: 0; font-size: 0; line-height: 0; border: none; border-radius: 50%; background: rgba(0, 0, 0, 0.45); color: var(--color-white); cursor: pointer; transition: background-color 0.15s ease, transform 0.15s ease; } .popup-overlay .close-popup .close-popup-icon { display: block; width: 16px; height: 16px; } .popup-overlay .close-popup:hover { background: rgba(0, 0, 0, 0.7); transform: scale(1.06); } .popup-overlay .close-popup:focus-visible { outline: 2px solid var(--color-white); outline-offset: 2px; } /* Keep the headline clear of the button rather than letting long titles run underneath it. */ .popup-overlay .popup-cta-card-body > .cta-popup-title:first-child { padding-right: 40px; } /* Outranks Bootstrap's .btn (which otherwise repaints this button transparent, leaving it invisible against the gradient) */ .popup-overlay .popup-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 4px; padding: 13px 26px; border-radius: 100px; border: 2px solid var(--color-white); background-color: var(--color-white); color: var(--color-secondary); font-weight: 700; font-size: 1rem; line-height: 1.3; text-decoration: none; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25); transition: transform 0.15s ease, box-shadow 0.15s ease; } /* :hover needs the extra class to beat Bootstrap's .btn:hover */ .popup-overlay .popup-button:hover, .popup-overlay .popup-button:focus, .popup-overlay .popup-button:active { color: var(--color-secondary); background-color: var(--color-white); border-color: var(--color-white); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.32); } @media (max-width: 575.98px) { .popup-overlay { padding: 12px; } .popup-overlay .popup-cta-card-body { padding: 22px 20px 24px; } } @keyframes popupOverlayIn { from { opacity: 0; } to { opacity: 1; } } @keyframes popupContentIn { from { opacity: 0; transform: translateY(16px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes popupCornerIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @keyframes popupBarIn { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .popup-overlay, .popup-content { animation: none; } }