/* ============================================================================ funnel.css — sticker + popup styles for the 2-Step Lead Capture Funnel ============================================================================ - Every class is prefixed "lcf-" so nothing collides with the host site. - NO brand colors live here. funnel.js writes the colors from funnel-config.js onto the page as CSS variables (--lcf-*); everything below reads those variables with a neutral fallback. - Mobile-first. Respects iOS/Android safe areas so the sticker never covers nav bars or system UI. ========================================================================== */ /* --------------------------------------------------------------------------- MODE A VIEW SWITCHING (standalone single-file funnel) funnel.js sets data-lcf-view="welcome" or "original" on SYNCHRONOUSLY in , before first paint — so the correct view renders with zero flash of the wrong one. Default (no JS): the original view shows, the welcome view stays hidden. --------------------------------------------------------------------------- */ [data-lcf-view-welcome] { display: none; } html[data-lcf-view="welcome"] [data-lcf-view-welcome] { display: block; } html[data-lcf-view="welcome"] [data-lcf-view-original] { display: none; } /* --------------------------------------------------------------------------- OFFER STICKER — bottom-right sticky-note pill Compact pill, floats above all content, never a big box. --------------------------------------------------------------------------- */ .lcf-sticker { position: fixed; right: calc(12px + env(safe-area-inset-right, 0px)); bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 2147482998; /* below the popup overlay, above the site */ max-width: min(78vw, 300px); padding: 10px 14px; border: 0; border-radius: 14px 14px 4px 14px; /* sticky-note corner */ background: var(--lcf-sticker-bg, #ffd84d); color: var(--lcf-sticker-text, #232323); font: 600 14px/1.25 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; text-align: left; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22); cursor: pointer; -webkit-tap-highlight-color: transparent; animation: lcf-enter 0.35s ease-out, lcf-pulse 1.4s ease-in-out 1.2s 1; /* one entrance + ONE pulse */ } .lcf-sticker:active { transform: scale(0.97); } /* Hidden states — funnel.js toggles these classes. --hidden : temporary (popup open, or an input is focused so the pill never covers form fields / the keyboard area on mobile) --dead : permanent removal state before the node is deleted */ .lcf-sticker--hidden { display: none; } .lcf-sticker--dead { display: none; } /* --------------------------------------------------------------------------- POPUPS — welcome + exit share the same shell --------------------------------------------------------------------------- */ .lcf-overlay { position: fixed; inset: 0; z-index: 2147483000; display: flex; align-items: center; justify-content: center; padding: 16px; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); background: var(--lcf-overlay, rgba(10, 16, 26, 0.55)); } .lcf-popup { position: relative; width: 100%; max-width: 420px; max-height: 88vh; overflow-y: auto; padding: 26px 22px 22px; border-radius: 14px; background: var(--lcf-popup-bg, #ffffff); color: var(--lcf-popup-text, #232323); font: 400 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.30); animation: lcf-enter 0.28s ease-out; } .lcf-popup h2 { margin: 0 0 8px; font-size: 22px; line-height: 1.2; color: var(--lcf-primary, #16283f); } .lcf-popup .lcf-offer { margin: 0 0 12px; font-size: 16px; font-weight: 600; } /* Countdown (welcome popup only) — shows REMAINING master-clock time */ .lcf-countdown { margin: 0 0 14px; font-size: 14px; } .lcf-countdown .lcf-clock { display: inline-block; min-width: 3.2em; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--lcf-accent, #0e7a5f); } .lcf-countdown .lcf-footnote { display: block; margin-top: 4px; font-size: 12.5px; opacity: 0.75; } /* Form bits */ .lcf-popup form { margin: 0; } .lcf-popup .lcf-field { width: 100%; box-sizing: border-box; padding: 12px; margin: 0 0 10px; border: 1px solid rgba(0, 0, 0, 0.25); border-radius: 8px; font-size: 16px; /* 16px stops iOS zoom-on-focus */ background: #fff; color: inherit; } .lcf-popup .lcf-btn { width: 100%; padding: 13px; border: 0; border-radius: 8px; background: var(--lcf-primary, #16283f); color: #fff; font-size: 16px; font-weight: 700; cursor: pointer; } .lcf-popup .lcf-btn:active { transform: scale(0.99); } .lcf-error { display: none; margin: -4px 0 10px; font-size: 13px; color: #b3261e; } .lcf-error--show { display: block; } /* Success state — promo code + one usage line */ .lcf-success { text-align: center; } .lcf-code { display: inline-block; margin: 10px 0; padding: 10px 18px; border: 2px dashed var(--lcf-accent, #0e7a5f); border-radius: 8px; font-size: 22px; font-weight: 800; letter-spacing: 0.06em; color: var(--lcf-accent, #0e7a5f); user-select: all; /* one tap selects the whole code */ } .lcf-use-line { font-size: 14px; opacity: 0.85; margin: 4px 0 0; } /* Close X — the ONLY way the welcome popup closes (besides clock-zero) */ .lcf-close { position: absolute; top: 8px; right: 8px; width: 38px; height: 38px; /* comfortable tap target */ border: 0; border-radius: 50%; background: transparent; color: inherit; font-size: 22px; line-height: 1; cursor: pointer; opacity: 0.6; } .lcf-close:hover, .lcf-close:focus { opacity: 1; } /* --------------------------------------------------------------------------- ANIMATIONS — one entrance + one gentle pulse, then everything sits calm --------------------------------------------------------------------------- */ @keyframes lcf-enter { from { opacity: 0; transform: translateY(14px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes lcf-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } /* Respect users who turn animations off (accessibility) */ @media (prefers-reduced-motion: reduce) { .lcf-sticker, .lcf-popup { animation: none; } } /* Slightly larger popup text on bigger screens */ @media (min-width: 560px) { .lcf-popup { padding: 30px 28px 26px; } .lcf-popup h2 { font-size: 24px; } }