/* ============================================================ Banner with Scattered Text Popups File: assets/css/banner-with-scattered-text-popups.css Package: Pretpot Elementor Kit PRO ============================================================ */ /* ── Wrapper ───────────────────────────────────────────────── */ .pretpot-bstp-wrap { position: relative; width: 100%; } /* ── Banner ────────────────────────────────────────────────── */ .pretpot-bstp-banner { position: relative; width: 100%; overflow: hidden; background-size: cover; background-position: center; } .pretpot-bstp-overlay { position: absolute; inset: 0; pointer-events: none; z-index: 1; } /* ── Center Title ───────────────────────────────────────────── */ /* * Fixed transform so centering always works regardless of * the X/Y position slider values. Selectors only update * left/top; transform stays constant here in CSS. */ .pretpot-bstp-title { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 5; pointer-events: none; margin: 0; white-space: nowrap; } /* ── Scattered Words ────────────────────────────────────────── */ .pretpot-bstp-word { position: absolute; font-size: 11px; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(255, 255, 255, 0.75); cursor: pointer; white-space: nowrap; user-select: none; z-index: 10; transition: color 0.2s ease; line-height: 1; } .pretpot-bstp-word:hover, .pretpot-bstp-word.bstp-active { color: #ffffff; } /* ── Popup ──────────────────────────────────────────────────── */ /* * Hidden by default. JS adds .bstp-popup-visible to show. * position:absolute inside the banner so it flows with it. */ .pretpot-bstp-popup { position: absolute; width: 200px; border-radius: 10px; overflow: hidden; background: #111111; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.08); /* Hidden state */ opacity: 0; pointer-events: none; visibility: hidden; transform: scale(0.85) translateY(10px); transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.3, 0.64, 1), visibility 0.3s; z-index: 100; cursor: pointer; } /* Visible state – added by JS only */ .pretpot-bstp-popup.bstp-popup-visible { opacity: 1; pointer-events: all; visibility: visible; transform: scale(1) translateY(0); } .pretpot-bstp-popup-media { width: 100%; height: 130px; object-fit: cover; display: block; } .pretpot-bstp-popup-bar { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; } .pretpot-bstp-popup-label { font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); } .pretpot-bstp-popup-icon { font-size: 14px; color: rgba(255, 255, 255, 0.4); line-height: 1; } /* ── Lightbox (appended to by JS) ────────────────────── */ /* * Must be appended to — NOT inside the widget — so that * position:fixed is not broken by any CSS transform ancestor. */ .pretpot-bstp-lightbox { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0); z-index: 999999; align-items: center; justify-content: center; transition: background 0.3s ease; } /* JS sets display:flex first, then adds active class on next frame */ .pretpot-bstp-lightbox.bstp-lb-open { display: flex; } .pretpot-bstp-lightbox.bstp-lb-active { background: rgba(0, 0, 0, 0.85); } .pretpot-bstp-lb-inner { position: relative; width: 90vw; max-width: 560px; border-radius: 16px; overflow: hidden; background: #111; box-shadow: 0 40px 100px rgba(0, 0, 0, 0.8); transform: scale(0.8); opacity: 0; transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease; } .pretpot-bstp-lightbox.bstp-lb-active .pretpot-bstp-lb-inner { transform: scale(1); opacity: 1; } .pretpot-bstp-lb-img, .pretpot-bstp-lb-video { width: 100%; display: block; max-height: 80vh; object-fit: contain; } .pretpot-bstp-lb-close { position: absolute; top: 12px; right: 16px; background: none; border: none; font-size: 28px; line-height: 1; color: #fff; cursor: pointer; opacity: 0.7; z-index: 2; padding: 0; transition: opacity 0.2s ease; } .pretpot-bstp-lb-close:hover { opacity: 1; } /* ── Responsive ─────────────────────────────────────────────── */ @media (max-width: 767px) { .pretpot-bstp-popup { width: 150px; } .pretpot-bstp-popup-media { height: 90px; } }