using position/transform/filter) — a fixed element only escapes z-index fights with the rest of the page when it has no such ancestor between it and the viewport. Its mere presence in the DOM means "visible": there's no .is-locked-gated display toggle here, since render_gate_block() only ever emits this markup at all when locked, and JS removes the element outright (not just hides it) on unlock. Starts `visibility: hidden` inline (see PHP) so there's no flash of it rendering in the wrong stacking position for a frame before JS relocates it. */ .ehf-gate-overlay { display: flex; align-items: center; justify-content: center; position: fixed; inset: 0; z-index: 9999; background: rgba(6, 32, 56, 0.55); /* Blur the page behind the modal via the (body-level, full-viewport) overlay itself, NOT via `filter` on

. A `filter` on an ancestor makes every `position: fixed` descendant resolve against that ancestor instead of the viewport, which breaks fixed page furniture (sticky sidebars, headers, cookie banners, back-to-top buttons) while the gate is open. backdrop-filter on the overlay blurs everything behind it without that side effect. */ -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); padding: 24px; } .ehf-gate-modal { background: #fff; width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto; border-radius: 12px; padding: 32px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); } .ehf-gate-modal-heading { margin: 0 0 8px; font-size: 22px; font-weight: 700; line-height: 1.5; } .ehf-gate-modal-intro { margin: 0 0 20px; color: #555; } .ehf-gate-modal-intro p{ line-height: 1.5; } body.ehf-gate-scroll-lock { overflow: hidden; } /* Note: the backdrop blur lives on .ehf-gate-overlay (backdrop-filter), not here as `filter: blur()` on

— see the comment on .ehf-gate-overlay above. */ /* Escape hatch inside the gate modal. Rendered hidden and only ever revealed by the gate's inline script for a visitor who already holds the completion cookie — never shown to someone who hasn't converted, since the gate is deliberately a hard gate with no dismiss control. */ .ehf-gate-close { display: none; align-items: center; justify-content: center; margin: 16px auto 0; padding: 10px 24px; border: 1px solid currentColor; border-radius: 4px; background: transparent; color: inherit; font: inherit; cursor: pointer; } .ehf-gate-close:hover, .ehf-gate-close:focus-visible { opacity: 0.75; } /* ── Inline mode (displayMode: 'inline') ────────────────────────────────── The form sits in normal page flow where the block was placed and is swapped for the content on success — no overlay, no scroll lock, nothing fixed. Additive: `display: none` on the locked content simply outranks the modal path's blur, so none of the rules above needed re-scoping. */ .ehf-gate--inline.is-locked .ehf-gate-content { display: none; } .ehf-gate-inline { background: #fff; border: 1px solid rgba(6, 32, 56, 0.12); border-radius: 12px; padding: 32px; box-shadow: 0 2px 4px rgba(6, 32, 56, 0.04), 0 16px 32px rgba(6, 32, 56, 0.07); } @media (max-width: 575px) { .ehf-gate-inline { padding: 24px 20px; } } /* Shown for the ~4s a silent sibling auto-submit may be in flight, in place of the form. Modal mode has no equivalent — its overlay just stays invisible — but inline has the content hidden too, so without this the block would be a blank gap in the middle of the page for four seconds. Hidden by default and revealed only by the gate's inline script / revealGateOverlay(), so a gate with no sibling group never shows it at all. */ .ehf-gate-inline__pending { display: none; align-items: center; justify-content: center; gap: 10px; min-height: 120px; color: #555; } .ehf-gate-inline.is-pending .ehf-gate-inline__pending { display: flex; } .ehf-gate-inline.is-pending .ehf-gate-inline__body { display: none; } .ehf-gate-inline__spinner { width: 18px; height: 18px; border: 2px solid rgba(6, 32, 56, 0.2); border-top-color: rgba(6, 32, 56, 0.7); border-radius: 50%; animation: ehf-gate-spin 0.7s linear infinite; } @keyframes ehf-gate-spin { to { transform: rotate(360deg); } } /* Respects a reduced-motion preference: the spinner is decorative, and the text beside it already says what's happening. */ @media (prefers-reduced-motion: reduce) { .ehf-gate-inline__spinner { animation: none; } } /* Editor-canvas only — these classes never appear in frontend output */ .ehf-gate-block-editor { border: 2px dashed #afcc6f; border-radius: 8px; padding: 16px; } .ehf-gate-bypass-help { font-size: 12px; font-style: italic; margin-top: 0; } .ehf-gate-bypass-row { display: flex; gap: 8px; align-items: flex-end; margin-bottom: 8px; } .ehf-gate-bypass-row > .components-base-control { flex: 1; min-width: 0; } .ehf-gate-block-editor__badge { display: inline-block; margin-bottom: 12px; padding: 4px 10px; border-radius: 20px; background: #afcc6f; color: #062038; font-size: 12px; font-weight: 700; } .ehf-spinner { display: inline-block; width: 1.5em; height: 1.5em; border: 0.2em solid currentColor; border-right-color: transparent; border-radius: 50%; animation: ehf-spin 0.75s linear infinite; vertical-align: middle; } .ehf-spinner__sr-only { border: 0 !important; clip: rect(0, 0, 0, 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; white-space: nowrap; } @keyframes ehf-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .with-error .required-text { display: block !important; color: red; margin-top: -15px; margin-bottom: 15px; font-size: 14px; } .with-error .invalid-email-text { display: none; } .with-error.is-invalid-email .required-text { display: none !important; } .with-error.is-invalid-email .invalid-email-text { display: block; color: red; margin-top: -15px; margin-bottom: 15px; } .with-error input, .with-error select, .with-error textarea { box-shadow: 0px 0px 1px 1px rgba(255, 0, 0, 0.55); } .ehf-error-message { background: #fceaea; border: 1px solid #f3b4b4; color: #8a1f1f; padding: 12px 16px; margin-bottom: 16px; border-radius: 4px; } /* Block-editor only: flags a Salesforce campaign ID that isn't a valid record id, alongside the warning help text the Inspector control swaps in. */ .ehf-field-invalid input { box-shadow: 0px 0px 1px 1px rgba(255, 0, 0, 0.55); } .ehf-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* --------------------------------------------------------------------------- HubSpot column layout — opt-in via respect_hubspot_columns / "Respect HubSpot column layout". Only emitted for field groups holding more than one field; single-field groups are unwrapped, exactly as before. Flex, not grid, and deliberately: a `display: none` flex child collapses out of the row and the remaining fields re-split the width evenly. Grid tracks are fixed, so a group of [hidden_utm_source, email] would render email at half width beside dead space. HubSpot's own embed has that hole; this doesn't. The same applies to a conditional field that starts hidden. --------------------------------------------------------------------------- */ .multi-step-form .ehf-field-group { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 1.5rem; } .multi-step-form .ehf-field-group > .form-field { flex: 1 1 0; /* Without this a long