/* Alert 360 promo banner — dismissible top bar (free doorbell / indoor camera). Sits in normal flow above the header (pushed there via wp_body_open + JS), so it scrolls away naturally and the theme's sticky header takes over on scroll. */ .a360-promo { position: relative; z-index: 1001; box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 18px; min-height: 76px; padding: 10px 58px 10px 20px; /* right room for the close button */ background: linear-gradient(90deg, #04853e 0%, #08a64f 55%, #07b552 100%); color: #fff; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; overflow: hidden; } .a360-promo__link { display: inline-flex; align-items: center; gap: 16px; max-width: 100%; color: #fff !important; text-decoration: none !important; } .a360-promo__img { flex: 0 0 auto; height: 64px; width: auto; display: block; } .a360-promo__text { display: flex; flex-direction: column; gap: 2px; line-height: 1.15; } .a360-promo__eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.92); } .a360-promo__headline { font-size: clamp(15px, 1.5vw, 20px); font-weight: 700; letter-spacing: -0.01em; } .a360-promo__free { font-weight: 800; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 2px; } .a360-promo__star { margin-left: 1px; } /* Higher specificity + !important so this beats Elementor's global kit button styling (.elementor-kit-13 button), which was forcing a heavy dark circle. appearance:none clears the native control look too. */ .a360-promo .a360-promo__close { position: absolute; top: 50%; right: 15px; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin: 0; padding: 0; -webkit-appearance: none; appearance: none; border: 0 !important; border-radius: 50% !important; background: rgba(255, 255, 255, 0.18) !important; box-shadow: none !important; color: #fff !important; font-size: 19px; font-weight: 400; line-height: 1; cursor: pointer; opacity: 0.95; transition: background 0.2s ease, opacity 0.2s ease; } .a360-promo .a360-promo__close:hover, .a360-promo .a360-promo__close:focus-visible { background: rgba(255, 255, 255, 0.36) !important; opacity: 1; outline: none; } /* Tablet / mobile */ @media (max-width: 768px) { .a360-promo { gap: 12px; min-height: 64px; padding: 8px 42px 8px 14px; } .a360-promo__link { gap: 11px; } .a360-promo__img { height: 50px; } .a360-promo__eyebrow { font-size: 10px; letter-spacing: 0.1em; } .a360-promo__headline { font-size: 13px; line-height: 1.2; } .a360-promo .a360-promo__close { right: 10px; } } @media (max-width: 380px) { .a360-promo__img { height: 44px; } .a360-promo__headline { font-size: 12px; } } /* Fix: pin the theme's fixed mobile header to the very top on scroll. The theme adds `position: fixed` to #pxl-header-mobile (.pxl-header-mobile-fixed) past 100px of scroll but never sets `top`, so it falls back to `top: auto` (the element's static offset). This banner increases that offset, which left a gap above the navbar on mobile. Anchoring it to top:0 restores normal sticky behavior. Only the fixed state is touched, and by then the banner has already scrolled away. */ #pxl-header-elementor #pxl-header-mobile.on_sticky.pxl-header-mobile-fixed { top: 0 !important; } /* Hide the banner while the mobile menu (or any full-screen body-lock overlay) is open. The theme adds `body-overflow` to when the mobile menu opens; without this the banner's z-index keeps it on top of the menu, clipping the logo. */ body.body-overflow .a360-promo { display: none !important; }