/* ================================================================= STAR BOOM BOOM - PROMOTIONAL GIVEAWAY POPUP STYLES Namespace: sbb-popup-* INSTRUCTIONS: Link this stylesheet in your website's section: ================================================================== */ /* Google Fonts Import for Popup Typography */ @import url('https://fonts.googleapis.com/css2?family=Cairo:wght@600;700;800;900&family=Outfit:wght@600;700;800;900&display=swap'); /* ── OVERLAY BACKDROP ── */ .sbb-popup-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 999999; display: flex; align-items: center; justify-content: center; padding: 16px; visibility: hidden; opacity: 0; transition: visibility 0.3s ease, opacity 0.3s ease; } .sbb-popup-overlay.sbb-popup-visible { visibility: visible; opacity: 1; } .sbb-popup-backdrop { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(8, 6, 18, 0.78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* ── MAIN POPUP CONTAINER ── */ .sbb-popup-container { position: relative; z-index: 2; width: 100%; max-width: 480px; max-height: 92vh; background: #090916; border-radius: 24px; border: 2px solid rgba(255, 215, 0, 0.65); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.9), 0 0 35px rgba(255, 170, 0, 0.45), inset 0 0 15px rgba(255, 215, 0, 0.2); display: flex; flex-direction: column; overflow: hidden; transform: scale(0.82) translateY(20px); opacity: 0; transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.35s ease; } .sbb-popup-overlay.sbb-popup-visible .sbb-popup-container { transform: scale(1) translateY(0); opacity: 1; } .sbb-popup-overlay.sbb-popup-closing .sbb-popup-container { transform: scale(0.85) translateY(15px); opacity: 0; transition: transform 0.25s ease-in, opacity 0.25s ease-in; } /* ── CLOSE BUTTON ── */ .sbb-popup-close-btn { position: absolute; top: 14px; right: 14px; z-index: 10; width: 38px; height: 38px; border-radius: 50%; background: rgba(15, 12, 28, 0.82); border: 1.5px solid rgba(255, 215, 0, 0.6); color: #ffffff; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); outline: none; } .sbb-popup-close-btn:hover { background: #e63946; border-color: #ffffff; color: #ffffff; transform: rotate(90deg) scale(1.1); box-shadow: 0 0 15px rgba(230, 57, 70, 0.8); } .sbb-popup-close-btn:focus-visible { outline: 2px solid #ffd700; outline-offset: 2px; } /* ── BANNER GRAPHIC & LINK ── */ .sbb-popup-banner-link { display: block; width: 100%; text-decoration: none; outline: none; cursor: pointer; position: relative; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .sbb-popup-image-wrapper { position: relative; width: 100%; background: #110d21; display: flex; align-items: center; justify-content: center; } .sbb-popup-banner-img { width: 100%; height: auto; max-height: 70vh; object-fit: contain; display: block; border-bottom: 1px solid rgba(255, 215, 0, 0.25); transition: transform 0.4s ease; } .sbb-popup-banner-link:hover .sbb-popup-banner-img { transform: scale(1.015); } /* Shine effect across image on load/hover */ .sbb-popup-shine { position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.25), transparent ); transform: skewX(-20deg); pointer-events: none; animation: sbbShineAnim 4s infinite 1s; } @keyframes sbbShineAnim { 0% { left: -100%; } 20% { left: 150%; } 100% { left: 150%; } } /* ── BOTTOM FLOATING CTA BAR ── */ .sbb-popup-cta-bar { padding: 14px 18px; background: linear-gradient(180deg, #0d0a1d 0%, #060410 100%); border-top: 1px solid rgba(255, 215, 0, 0.3); display: flex; justify-content: center; align-items: center; position: relative; z-index: 5; } /* ── PRIMARY CTA BUTTON ── */ .sbb-popup-cta-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 14px 24px; border-radius: 50px; background: linear-gradient(135deg, #ff9d00 0%, #e60000 50%, #b30000 100%); background-size: 200% 200%; color: #ffffff; font-family: 'Cairo', 'Outfit', sans-serif; text-decoration: none; box-shadow: 0 8px 20px rgba(230, 0, 0, 0.5), 0 0 15px rgba(255, 157, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.5); border: 1.5px solid rgba(255, 235, 150, 0.7); cursor: pointer; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); position: relative; overflow: hidden; animation: sbbPulseGlow 2.5s infinite alternate; } @keyframes sbbPulseGlow { 0% { box-shadow: 0 8px 20px rgba(230, 0, 0, 0.5), 0 0 15px rgba(255, 157, 0, 0.4); } 100% { box-shadow: 0 10px 30px rgba(230, 0, 0, 0.8), 0 0 28px rgba(255, 215, 0, 0.7); } } .sbb-popup-cta-btn:hover { transform: translateY(-2px) scale(1.02); background-position: right center; box-shadow: 0 12px 30px rgba(230, 0, 0, 0.8), 0 0 30px rgba(255, 215, 0, 0.9); } .sbb-popup-cta-btn:active { transform: translateY(1px) scale(0.99); } .sbb-popup-cta-btn:focus-visible { outline: 3px solid #ffd700; outline-offset: 3px; } /* CTA Icon */ .sbb-popup-cta-icon { display: flex; align-items: center; justify-content: center; color: #ffe600; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); } /* CTA Text */ .sbb-popup-cta-text { display: flex; flex-direction: column; align-items: center; line-height: 1.2; text-align: center; } .sbb-popup-cta-text .sbb-ar { font-size: 17px; font-weight: 900; letter-spacing: 0.2px; text-shadow: 0 2px 4px rgba(0,0,0,0.6); } .sbb-popup-cta-text .sbb-en { font-family: 'Outfit', sans-serif; font-size: 11px; font-weight: 800; letter-spacing: 1px; opacity: 0.92; text-transform: uppercase; } /* CTA Arrow */ .sbb-popup-cta-arrow { display: flex; align-items: center; justify-content: center; transition: transform 0.3s ease; } .sbb-popup-cta-btn:hover .sbb-popup-cta-arrow { transform: translateX(4px); } /* ── RESPONSIVE MEDIA QUERIES ── */ @media (max-width: 600px) { .sbb-popup-container { max-width: 94vw; border-radius: 20px; } .sbb-popup-banner-img { max-height: 65vh; } .sbb-popup-close-btn { top: 10px; right: 10px; width: 34px; height: 34px; } .sbb-popup-cta-bar { padding: 12px 14px; } .sbb-popup-cta-btn { padding: 12px 18px; } .sbb-popup-cta-text .sbb-ar { font-size: 15px; } .sbb-popup-cta-text .sbb-en { font-size: 10px; } } @media (max-width: 380px) { .sbb-popup-container { border-radius: 16px; } .sbb-popup-banner-img { max-height: 58vh; } .sbb-popup-cta-text .sbb-ar { font-size: 14px; } }