/* ========================================================================== LB FORMS — v2 modal for Zoho embedded forms -------------------------------------------------------------------------- Replaces the per-page Zoho lightbox that used to live in av_codeblock elements. Those code blocks broke the Advanced Layout Builder: their content is injected into an inline script on the edit screen, and the overlay they appended to document.body sat over the builder at z-index 99999999, so the editor looked like it never loaded. Pages affected: 1328, 1479, 6871, 15929, 16409, 16626. Rules: - Never put this back into a Code Block. Standing rule 4 - native ALB elements only. The trigger is an ordinary av_buttonrow_item whose link is `manually,#lb-form-`. - The modal is appended to , which is OUTSIDE `#top .lb-v2`, so it cannot inherit the --v2-* tokens. They are redeclared on .lb-form-modal. ========================================================================== */ .lb-form-modal { --v2-navy: #072C50; --v2-deep: #101820; --v2-charcoal: #1A222B; --v2-offwhite: #F5F7F9; --v2-white: #FFFFFF; --v2-bd-light: #DCE3E9; --v2-ink: #102435; --v2-ink-2: #465968; --v2-ink-3: #55677A; --v2-on-dark: #F4F2EF; --v2-orange: #EC7628; --v2-orange-dk: #C25A15; --v2-ease: cubic-bezier(0.2, 0, 0.2, 1); --v2-font: "Inter", "Noto Sans JP", "Hiragino Sans", "Yu Gothic", Arial, sans-serif; --v2-mono: "IBM Plex Mono", "Inter", monospace; position: fixed; inset: 0; z-index: 100000; display: none; align-items: center; justify-content: center; padding: 24px; font-family: var(--v2-font); } .lb-form-modal[data-open="true"] { display: flex; } /* The editor never renders this component, but belt and braces: if it is ever present in wp-admin it must not cover the screen. */ .wp-admin .lb-form-modal { display: none !important; } .lb-form-modal__dim { position: absolute; inset: 0; background: rgba(16, 24, 32, 0.78); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); animation: lb-form-fade 200ms var(--v2-ease); } .lb-form-modal__panel { position: relative; z-index: 1; display: flex; flex-direction: column; width: 100%; max-width: 680px; max-height: min(88vh, 900px); background: var(--v2-white); border: 1px solid var(--v2-bd-light); border-radius: 12px; overflow: hidden; box-shadow: 0 32px 64px rgba(7, 44, 80, 0.32); animation: lb-form-rise 240ms var(--v2-ease); } .lb-form-modal__head { flex: 0 0 auto; display: flex; align-items: flex-start; gap: 16px; padding: 24px 28px 20px; background: linear-gradient(135deg, #072c50 0%, #0c385f 52%, #101820 100%); color: var(--v2-on-dark); } .lb-form-modal__eyebrow { display: block; margin: 0 0 6px; font-family: var(--v2-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--v2-orange); } .lb-form-modal__title { margin: 0; font-size: 20px; line-height: 1.4; font-weight: 600; color: var(--v2-on-dark); } .lb-form-modal__close { flex: 0 0 auto; margin-left: auto; width: 40px; height: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 8px; background: transparent; color: var(--v2-on-dark); font-size: 20px; line-height: 1; cursor: pointer; transition: background-color 180ms var(--v2-ease), border-color 180ms var(--v2-ease); } .lb-form-modal__close:hover, .lb-form-modal__close:focus-visible { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.7); outline: none; } .lb-form-modal__body { flex: 1 1 auto; min-height: 0; background: var(--v2-offwhite); position: relative; } .lb-form-modal__frame { display: block; width: 100%; height: 100%; min-height: 520px; border: 0; background: var(--v2-offwhite); } .lb-form-modal__loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--v2-ink-3); font-size: 14px; } .lb-form-modal[data-loaded="true"] .lb-form-modal__loading { display: none; } .lb-form-modal__spinner { width: 16px; height: 16px; border: 2px solid var(--v2-bd-light); border-top-color: var(--v2-orange); border-radius: 50%; animation: lb-form-spin 700ms linear infinite; } /* Fallback link, shown only if the iframe cannot be reached. */ .lb-form-modal__fallback { padding: 14px 28px 18px; background: var(--v2-white); border-top: 1px solid var(--v2-bd-light); font-size: 13px; color: var(--v2-ink-2); } .lb-form-modal__fallback a { color: var(--v2-orange-dk); text-decoration: none; border-bottom: 2px solid rgba(194, 90, 21, 0.35); } .lb-form-modal__fallback a:hover { border-bottom-color: #a8480f; } html.lb-form-locked, html.lb-form-locked body { overflow: hidden; } @keyframes lb-form-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes lb-form-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } @keyframes lb-form-spin { to { transform: rotate(360deg); } } @media (max-width: 767px) { .lb-form-modal { padding: 0; } .lb-form-modal__panel { max-width: none; max-height: 100vh; height: 100vh; border-radius: 0; border: 0; } .lb-form-modal__head { padding: 18px 20px 16px; } .lb-form-modal__title { font-size: 17px; } .lb-form-modal__frame { min-height: 0; } } @media (prefers-reduced-motion: reduce) { .lb-form-modal__dim, .lb-form-modal__panel { animation-duration: 0.01ms; } .lb-form-modal__spinner { animation-duration: 2s; } }