/* ========================================================== Analyzer promo — corner slide-in popup. Deliberately small and dismissible, not a full-screen overlay — see the comment at the top of analyzer-promo-popup.js for why (Google's intrusive-interstitial penalty targets exactly the full-screen version of this pattern on mobile). ========================================================== */ /* This card sits entirely outside the theme's ".fl" wrapper, which is where ".fl *{box-sizing:border-box}" resets every element sitewide — so nothing here inherits that reset by default. Applied broadly rather than just on the outer card, since the same content-box vs border-box mismatch would otherwise affect the close button and any other fixed-size children too. */ .ncv2-analyzer-popup, .ncv2-analyzer-popup * { box-sizing: border-box; } .ncv2-analyzer-popup { position: fixed; right: 20px; bottom: 20px; z-index: 9999; width: min(320px, calc(100vw - 40px)); background: var(--pine-900, #0E2E1F); color: #F7FAF0; border-radius: 18px; padding: 22px 20px 20px; box-shadow: 0 20px 50px -12px rgba(10, 35, 24, 0.45); /* Slide up + fade in, rather than just appearing — an instant pop-in reads as jarring; a brief slide reads as intentional. */ opacity: 0; transform: translateY(24px); transition: opacity 0.32s ease, transform 0.32s ease; pointer-events: none; } .ncv2-analyzer-popup.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .ncv2-ap-close { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; border: none; background: rgba(247, 250, 240, 0.1); color: rgba(247, 250, 240, 0.8); border-radius: 50%; font-size: 13px; cursor: pointer; display: grid; place-items: center; transition: background 0.15s; } .ncv2-ap-close:hover { background: rgba(247, 250, 240, 0.2); } .ncv2-ap-icon { width: 44px; height: 44px; border-radius: 13px; background: rgba(183, 227, 74, 0.18); border: 1px solid rgba(183, 227, 74, 0.35); display: grid; place-items: center; font-size: 1.4rem; margin-bottom: 12px; } .ncv2-analyzer-popup h4 { font-size: 1.02rem; font-weight: 700; margin: 0 0 8px; padding-right: 20px; /* keep clear of the close button */ line-height: 1.3; } .ncv2-analyzer-popup p { font-size: 0.86rem; color: rgba(247, 250, 240, 0.75); margin: 0 0 16px; line-height: 1.5; } .ncv2-ap-cta { width: 100%; justify-content: center; display: flex; align-items: center; gap: 0.5em; border: none; cursor: pointer; font-family: inherit; /* Written out fully rather than relying on the theme's .btn/.btn-lime classes — those are scoped as ".fl .btn-lime", requiring a ".fl" ancestor, and this card is appended directly to , outside any ".fl" wrapper. Reusing those classes here would silently render an unstyled button. */ background: #B7E34A; color: #0A2318; font-weight: 600; font-size: 0.92rem; padding: 0.85em 1.2em; border-radius: 999px; transition: transform 0.15s, box-shadow 0.15s; } .ncv2-ap-cta:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -8px rgba(183, 227, 74, 0.55); } /* On small screens, sit full-width just above the bottom edge rather than as a narrow floating card — a 320px-capped card centered with margins on a 375px phone leaves awkward slivers on each side. */ @media (max-width: 480px) { .ncv2-analyzer-popup { left: 12px; right: 12px; bottom: 12px; width: auto; } }