/* ========================================================= BACKOFEN NEWSLETTER POPUP — ENGINE CSS This file is intentionally separate from the newsletter's own design CSS (which lives inside the newsletter HTML field and is rendered as-is). It only handles: overlay, positioning, viewport, close button, animation, z-index, and mobile popup behavior. ========================================================= */ :root { --bnp-z-index: 100000; } /* ----------------------------------------------------------- OVERLAY ----------------------------------------------------------- */ .bnp-overlay { position: fixed; inset: 0; z-index: var(--bnp-z-index); display: flex; align-items: flex-start; justify-content: center; background: rgba(58, 37, 24, 0.45); /* Scrollable wrapper so a tall popup + Paco never gets clipped: if the reserved top space below plus the popup's own height ever exceeds the viewport height, the visitor can scroll the overlay itself rather than anything being cut off. */ overflow-y: auto; -webkit-overflow-scrolling: touch; box-sizing: border-box; /* * Top padding here is the "safe zone" that keeps Paco fully inside * the viewport. Paco (.br-newsletter-paco) is positioned with * `position: absolute` and a negative transform so he sits above * the card's own top edge — by design, and that positioning is * NOT touched here. Instead, this popup-level gutter simply makes * sure there is enough empty space above the card for that * protrusion to render inside the screen instead of behind its * top edge. The values below intentionally mirror (with a buffer) * the newsletter's own `.br-newsletter-card` top padding at each * breakpoint, since that padding was sized to fit Paco's height. */ padding: 150px 16px 40px; } .bnp-overlay[hidden] { display: none; } .bnp-overlay.bnp-visible { opacity: 1; visibility: visible; } /* ----------------------------------------------------------- POPUP WRAPPER This wrapper is intentionally transparent: it must NOT look like a second card. Its only job is positioning + spacing. The existing .br-newsletter-card supplies the actual visible frame (background, border, radius, shadow). ----------------------------------------------------------- */ .bnp-popup { position: relative; width: 100%; max-width: 760px; /* matches .br-newsletter's own max-width */ margin: auto; background: transparent; border: 0; box-shadow: none; padding: 0; /* Never clip Paco, which relies on absolute positioning that extends above the newsletter card's own bounding box. */ overflow: visible; transform: translateY(16px); opacity: 0; transition: transform 0.25s ease, opacity 0.25s ease; } .bnp-overlay.bnp-visible .bnp-popup { transform: translateY(0); opacity: 1; } /* Respect reduced motion, and the plugin's own "disable animation" setting (applied via the .bnp-no-animation class on from popup.js). */ @media (prefers-reduced-motion: reduce) { .bnp-overlay, .bnp-popup { transition: none !important; } } .bnp-no-animation .bnp-overlay, .bnp-no-animation .bnp-popup { transition: none !important; } /* ----------------------------------------------------------- CLOSE BUTTON popup.js moves this button so it becomes a direct child of the actual `.br-newsletter-card` (which already has its own `position: relative`). That way `position: absolute; top; right` below lines up with the card's real border instead of the outer popup wrapper's padding box, and the button visually belongs to the card as required — no card CSS is modified to achieve this. Positioned top-right, clear of Paco (who sits centered) and the title/form below him. ----------------------------------------------------------- */ .bnp-close { position: absolute; top: 14px; right: 14px; z-index: 30; /* above .br-newsletter-paco's z-index: 20 by design intent, but visually it sits at the opposite corner so they never overlap */ width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: #ffffff; color: #3a2518; border: 1.5px solid rgba(58, 37, 24, 0.12); border-radius: 50%; font-size: 22px; line-height: 1; font-family: Arial, Helvetica, sans-serif; cursor: pointer; box-shadow: 0 2px 8px rgba(58, 37, 24, 0.15); transition: background 0.15s ease, transform 0.15s ease; } .bnp-close:hover { background: #fff1e6; } .bnp-close:active { transform: scale(0.94); } .bnp-close:focus-visible { outline: 2px solid #f97316; outline-offset: 2px; } /* ----------------------------------------------------------- NEWSLETTER SLOT Purely structural — no visual styling here, that all lives in the newsletter's own CSS. We only neutralize the default top/bottom margin so the popup spacing is controlled by the overlay's padding instead of being duplicated. ----------------------------------------------------------- */ .bnp-newsletter-slot { width: 100%; } .bnp-newsletter-slot .br-newsletter { margin-top: 0; margin-bottom: 0; } /* ----------------------------------------------------------- TABLET Mirrors the newsletter's own 601–1024px breakpoint, where Paco's protrusion above the card is effectively unchanged from desktop (same 205px width), so the same generous top safe-zone applies. ----------------------------------------------------------- */ @media (min-width: 601px) and (max-width: 1024px) { .bnp-overlay { padding-top: 150px; } } /* ----------------------------------------------------------- MOBILE / SMALL VIEWPORTS The newsletter's own CSS reduces Paco to 165px wide (and the card's top padding to 88px) at this breakpoint, so the popup's safe zone shrinks to match, with a buffer on top so his head always clears the viewport edge. ----------------------------------------------------------- */ @media (max-width: 600px) { .bnp-overlay { padding: 118px 10px 30px; align-items: flex-start; } .bnp-popup { max-width: 100%; } .bnp-close { top: 10px; right: 10px; width: 32px; height: 32px; font-size: 20px; } } /* ----------------------------------------------------------- VERY SMALL PHONES Matches the newsletter's own <=380px breakpoint (150px wide Paco, smaller card padding). ----------------------------------------------------------- */ @media (max-width: 380px) { .bnp-overlay { padding-top: 100px; } } /* Prevent horizontal scrolling introduced by the overlay itself. */ body.bnp-open { overflow: hidden; }