/* Welcome Popup — modal overlay * z-index uses a near-max value to defeat themed sticky headers (e.g. SplexTheme). * The JS portals #welcome-popup to on init, so this element is never trapped * inside an ancestor stacking context (transform/filter/will-change ancestors). */ /* Flex column so that an optional external snooze (Layout 2) sits directly below * the modal as a vertical stack, and the whole stack stays centered in viewport. * Grid with place-items:center would split modal and snooze into separate cells. */ .wpu { position: fixed; inset: 0; z-index: 2147483646; display: flex; flex-direction: column; align-items: center; justify-content: center; isolation: isolate; } .wpu[hidden] { display: none; } .wpu__backdrop { position: absolute; inset: 0; z-index: 0; background: rgba(0,0,0,0.55); backdrop-filter: blur(4px); } .wpu__modal { position: relative; z-index: 1; width: min(640px, 90vw); max-height: 90vh; overflow: auto; background: #fff; border-radius: 12px; box-shadow: 0 24px 64px rgba(0,0,0,0.32); display: flex; flex-direction: column; } .wpu__close { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border: none; background: rgba(255,255,255,0.85); font-size: 28px; cursor: pointer; border-radius: 50%; line-height: 1; } .wpu__close:focus-visible { outline: 2px solid var(--wpu-accent, #1F3A68); outline-offset: 2px; } .wpu__banner { width: 100%; height: auto; display: block; object-fit: cover; aspect-ratio: 16/7; } .wpu__content { padding: 24px 28px 28px; text-align: center; } .wpu__header { font-size: 28px; font-weight: 700; margin: 0 0 12px; color: #1a1a1a; } .wpu__body { font-size: 15px; line-height: 1.5; color: #444; margin-bottom: 16px; } .wpu__form { display: flex; flex-direction: column; gap: 12px; } .wpu__form label { display: flex; flex-direction: column; font-size: 13px; color: #555; } .wpu__form input[type="email"], .wpu__form input[type="tel"] { padding: 10px 12px; border: 1px solid #d0d0d0; border-radius: 6px; font-size: 15px; } .wpu__honeypot { position: absolute !important; left: -9999px !important; opacity: 0 !important; } .wpu__consent { flex-direction: row !important; align-items: center; gap: 8px; } .wpu__snooze { display: flex; flex-direction: row !important; align-items: center; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid #eee; font-size: 13px; color: #777; cursor: pointer; } /* CTA button — e-commerce best practices: pill shape, comfortable padding, * depth via drop-shadow, micro-interaction on hover, brightness lift. * Sized for high tap target (≥44px height per WCAG/Apple HIG). */ .wpu__cta { display: inline-block; padding: 14px 32px; background: var(--wpu-accent, #1F3A68); color: var(--wpu-cta-text, #fff); border: none; border-radius: 999px; text-decoration: none; font-size: 16px; font-weight: 600; letter-spacing: 0.3px; text-align: center; cursor: pointer; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28), 0 2px 6px rgba(0, 0, 0, 0.18); transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease; } .wpu__cta:hover, .wpu__cta:focus-visible { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.38), 0 4px 10px rgba(0, 0, 0, 0.22); filter: brightness(1.08); color: var(--wpu-cta-text, #fff); } .wpu__cta:active { transform: translateY(0); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.32); } .wpu__code-card { background: #f6f8fa; border: 2px dashed var(--wpu-accent, #1F3A68); border-radius: 8px; padding: 16px 20px; text-align: center; margin: 12px 0 16px; } .wpu__code { font-family: Consolas, Menlo, monospace; font-size: 24px; font-weight: 700; letter-spacing: 1px; color: var(--wpu-accent, #1F3A68); } .wpu__expiry { font-size: 13px; color: #777; margin-top: 6px; } /* ───────────────────────────────────────────────────────────── * Layout variants — driven by PopupLayout enum value on the root: * .wpu--layout-0 = HeroTop (1280×560, 16:7) banner above content * .wpu--layout-1 = SideBySide ( 800×1200, 2:3) banner left, content right * .wpu--layout-2 = FullBackground (1600×1200, 4:3) banner as background * ───────────────────────────────────────────────────────────── */ /* Layout 0: HeroTop — banner full-width on top, content below. * Banner sizes to the uploaded image's INTRINSIC aspect ratio (no forced 16/7 * crop). Modal height adapts. Recommended 1280×560 (16:7) renders at 640×280; * an off-aspect upload (e.g. 1200×600) renders at 640×320 without cropping. */ .wpu--layout-0 .wpu__modal { width: min(640px, 92vw); } .wpu--layout-0 .wpu__banner { width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; object-position: center; } /* Layout 1: SideBySide — banner left at 2:3, content right. * Modal height is calc'd so banner@40%-width is exactly 2:3 (no crop on the * recommended 800×1200). aspect-ratio is avoided here because it's not strict * inside a flex row; calc(width × 0.6) is. */ .wpu--layout-1 .wpu__modal { width: min(900px, 92vw); height: calc(min(900px, 92vw) * 0.6); max-height: 85vh; flex-direction: row; align-items: stretch; } .wpu--layout-1 .wpu__banner { width: 40%; height: 100%; aspect-ratio: auto; margin: 0; object-fit: cover; object-position: center; align-self: stretch; } .wpu--layout-1 .wpu__content { flex: 1 1 60%; padding: 28px 32px; overflow-y: auto; } @media (max-width: 768px) { .wpu--layout-1 .wpu__modal { flex-direction: column; width: 92vw; height: auto; } .wpu--layout-1 .wpu__banner { width: 100%; height: auto; aspect-ratio: 16 / 9; } .wpu--layout-1 .wpu__content { padding: 20px; } } /* Layout 2: FullBackground — banner fills modal at strict 4:3, content overlays bottom. * Uses CSS Grid so banner + content share the same cell — grid is authoritative * over content's intrinsic height, so aspect-ratio: 4/3 is never overridden. * Result: an uploaded 1600×1200 (4:3) image displays without crop. */ .wpu--layout-2 .wpu__modal { display: grid; grid-template-areas: "stage"; width: min(720px, 92vw); aspect-ratio: 4 / 3; max-height: 85vh; overflow: hidden; } .wpu--layout-2 .wpu__banner, .wpu--layout-2 .wpu__content { grid-area: stage; min-width: 0; min-height: 0; } .wpu--layout-2 .wpu__banner { width: 100%; height: 100%; aspect-ratio: auto; margin: 0; object-fit: cover; object-position: center; z-index: 0; } .wpu--layout-2 .wpu__content { align-self: end; width: 100%; z-index: 1; background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.45) 60%, rgba(0,0,0,0) 100%); color: #fff; padding: 56px 28px 22px; } .wpu--layout-2 .wpu__header, .wpu--layout-2 .wpu__body { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.45); } .wpu--layout-2 .wpu__body { color: rgba(255,255,255,0.92); } .wpu--layout-2 .wpu__close { background: rgba(0,0,0,0.45); color: #fff; z-index: 2; } .wpu--layout-2 .wpu__snooze { color: rgba(255,255,255,0.85); border-top-color: rgba(255,255,255,0.2); } /* ───────────────────────────────────────────────────────────── * No-content mode: when HeaderText + BodyHtml + CtaButtonText are all empty, * the .wpu__content section is not rendered. Modal becomes banner-only. * Per-layout adjustments so the banner displays at its recommended aspect. */ .wpu--no-content.wpu--layout-0 .wpu__modal { /* banner aspect 16:7 fills entire modal */ } .wpu--no-content.wpu--layout-1 .wpu__modal { flex-direction: column; /* collapse 2-col → 1-col */ width: min(420px, 92vw); height: auto; } .wpu--no-content.wpu--layout-1 .wpu__banner { width: 100%; height: auto; aspect-ratio: 2 / 3; /* keep recommended portrait */ } .wpu--no-content.wpu--layout-2 .wpu__content { display: none; } /* External snooze (Layout 2 only) — sits below the modal on the dark backdrop. * Keeps the modal's 4:3 aspect ratio uncontaminated by extra controls. */ .wpu__snooze--external { position: relative; z-index: 1; /* sit above .wpu__backdrop */ display: flex; align-items: center; gap: 8px; margin-top: 16px; padding: 6px 12px; color: rgba(255, 255, 255, 0.92); font-size: 13px; cursor: pointer; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); } .wpu__snooze--external input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--wpu-accent, #1F3A68); } /* External code card — clean modern coupon (FullBackground + code-reveal). * Dashed border card with small inline label; no ::before header bar (avoids * border-radius corner artifacts at the top). */ .wpu__code-card--external { position: relative; z-index: 1; margin-top: 16px; background: rgba(255, 255, 255, 0.96); border: 2px dashed var(--wpu-accent, #1F3A68); border-radius: 8px; padding: 6px 20px 11px; text-align: center; box-shadow: 0 3px 14px rgba(0, 0, 0, 0.25); } .wpu__code-card--external::before { content: "PROMO CODE"; display: block; font-size: 9px; font-weight: 700; letter-spacing: 2px; color: var(--wpu-accent, #1F3A68); opacity: 0.7; margin-bottom: 3px; } .wpu__code-card--external .wpu__code { padding: 0; font-size: 20px; letter-spacing: 3px; } /* Row: code card + CTA button side-by-side below the modal */ .wpu__external-code-row { position: relative; z-index: 1; display: flex; flex-direction: row; align-items: center; gap: 12px; margin-top: 16px; width: min(720px, 92vw); } .wpu__external-code-row .wpu__code-card--external { margin-top: 0; flex: 1 1 0; min-width: 0; } .wpu__external-code-row .wpu__cta--external { margin-top: 0; flex: 1 1 0; min-width: 0; text-align: center; white-space: nowrap; } @media (max-width: 520px) { .wpu__external-code-row { flex-direction: column; width: 90vw; } .wpu__external-code-row .wpu__code-card--external { width: 100%; } } /* CTA hide helper (in case ShowCta is false but template still emits an ) */ .wpu--no-cta .wpu__cta { display: none; } /* ───────────────────────────────────────────────────────────── * CTA-only mode: HeaderText + BodyHtml empty, but CtaButtonText set. * The image is meant to carry all messaging; we just need a clean, * centered CTA button at the bottom of the modal with no gradient overlay. * Applied uniformly to all 3 layouts. */ .wpu--cta-only .wpu__content { background: none !important; /* Generous top padding so CTA doesn't touch the banner; comfortable bottom too */ padding: 28px 28px 24px !important; text-align: center; } /* HeroTop / SideBySide cta-only: snooze sits alone, the inherited separator * border-top would dangle since there is no preceding content. Remove it. */ .wpu--cta-only:not(.wpu--layout-2) .wpu__snooze { margin-top: 14px; padding-top: 0; border-top: none; justify-content: center; } .wpu--cta-only.wpu--layout-2 .wpu__content { /* Layout 2 only: content is in grid stage cell; tighter padding, * pin to bottom-center, no top breathing room needed (the image is behind). */ align-self: end; padding: 0 28px 28px !important; } /* External CTA (Layout 2 + cta-only): rendered below the modal between modal and * external snooze. Sits on the backdrop, never overlapping the banner image. * Pulse animation gently draws attention; pauses on hover; honors reduced-motion. */ .wpu__cta--external { position: relative; z-index: 1; /* sit above .wpu__backdrop */ margin-top: 20px; animation: wpu-cta-pulse 2.4s ease-in-out infinite; } @keyframes wpu-cta-pulse { 0%, 100% { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28), 0 2px 6px rgba(0, 0, 0, 0.18); } 50% { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 0 0 6px rgba(255, 255, 255, 0.16); } } .wpu__cta--external:hover { animation-play-state: paused; } @media (prefers-reduced-motion: reduce) { .wpu__cta--external { animation: none; } } @media (max-width: 768px) { .wpu__modal { width: 90vw; } .wpu__content { padding: 20px; } .wpu__header { font-size: 22px; } } @media print { .wpu { display: none !important; } }