/*! * "Email Me This Floor Plan" popup — 2026 design. * * This is NOT the "Floorplan Options" popup that GBG-138 fixed. Quick * possessions render fragments/homes/floor-plans-2.php, which uses a different * trigger (.btn-floorplan-popup) opening a different panel * (.section-floorplan--popup, from fragments/homes/floor-plan-form.php) with a * Gravity Form inside. GBG-138 restored Magnific's chrome site-wide, so this * one now opens as a real overlay — but every rule it wrote is scoped to * #popup-floor, so this panel's contents were still bare. * * "Bare" here is worse than plain: the form is Gravity Forms *legacy* markup * with no GF stylesheet on the page, and the rules that hide GF's plumbing — * .gform_validation_container (the honeypot), .gfield_visibility_hidden — live * in main.css under `.gb26 .gb26-form`. This markup carries neither hook, and * Magnific moves the panel to the end of anyway, so it leaves `.gb26` * behind. The result was a "Name" honeypot plus download_url / home_name / * Community pre-filled text inputs shown to the visitor. * * Everything below is confined to .section-floorplan--popup for the same * reason floorplan-popup.css confines itself to #popup-floor: the legacy class * names here (.register, .shell, .section) are generic and still live on * non-reskinned pages. * * Palette mirrors tailwind.config.js: primary #009ADE, ink #333F48, * body #333F48, mist #F4F4F4. */ /* ---------- Panel ---------- */ /* Magnific lifts the panel out to the end of , so it inherits neither the theme font nor its box model — both have to be restated, exactly as in floorplan-popup.css. Without the second, the full-width pill inputs add their padding and border on top of 100% and overflow the column. */ .section-floorplan--popup, .section-floorplan--popup *, .section-floorplan--popup *::before, .section-floorplan--popup *::after { box-sizing: border-box; } .section-floorplan--popup, .section-floorplan--popup input, .section-floorplan--popup button { font-family: 'effra', ui-sans-serif, system-ui, sans-serif; } .section-floorplan--popup { position: relative; width: 100%; max-width: 1100px; margin: 0 auto; background: #fff; color: #333F48; font-size: 15px; line-height: 1.7; } /* Magnific appends its close button inside the panel for inline popups (closeBtnInside defaults on), so the panel needs headroom for it. */ .section-floorplan--popup .mfp-close { top: 0; right: 0; width: 56px; height: 56px; padding: 0; color: #009ADE; font-size: 40px; line-height: 56px; opacity: 1; } .section-floorplan--popup .mfp-close:hover { color: #0081BA; } /* .shell is the legacy container; its width and gutters come from the panel. */ .section-floorplan--popup .shell { max-width: 100%; margin: 0; padding: 0; } .section-floorplan--popup .register__container { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; align-items: start; padding: 4rem 3.5rem; } /* ---------- Copy column ---------- */ .section-floorplan--popup .register__title { margin: 0 0 1.25rem; color: #009ADE; font-family: 'effra', ui-sans-serif, system-ui, sans-serif; font-weight: 800; font-size: 45px; line-height: 1.05; letter-spacing: -0.01em; } .section-floorplan--popup .register__entry p { margin: 0 0 1rem; color: #333F48; line-height: 1.7; } .section-floorplan--popup .register__entry p:last-child { margin-bottom: 0; } .section-floorplan--popup .register__aside-inner { max-width: 100%; } /* ---------- Gravity Form (legacy markup, no GF stylesheet on gb26 pages) ---------- */ /* GF's plumbing. main.css hides these under `.gb26 .gb26-form`, a hook this markup does not carry — without the repeat they render as real, visible, pre-filled fields. .admin-hidden-markup is GF's "this field is hidden" editor note, which ships to the front end too. */ .section-floorplan--popup .gform_validation_container, .section-floorplan--popup .gfield_visibility_hidden, .section-floorplan--popup .gform_hidden, .section-floorplan--popup .admin-hidden-markup, .section-floorplan--popup input[type="hidden"] { display: none !important; } /* The name field's sub-labels rely on this; block-library supplies it, but the panel must not depend on another plugin's stylesheet to stay legible. */ .section-floorplan--popup .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .section-floorplan--popup .gform_fields { display: grid; gap: 1.25rem; margin: 0; padding: 0; list-style: none; } .section-floorplan--popup .gfield_label { display: block; margin-bottom: 8px; color: #6B7280; font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; } .section-floorplan--popup .gfield_required { color: #009ADE; } /* First/last name share a row. */ .section-floorplan--popup .ginput_complex { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; } .section-floorplan--popup .ginput_complex > span { display: block; } .section-floorplan--popup input[type="text"], .section-floorplan--popup input[type="email"], .section-floorplan--popup input[type="tel"] { width: 100%; padding: 13.6px 22.4px; border: 1px solid #D5DBE1; border-radius: 9999px; background: #fff; color: #333F48; font-size: 15px; line-height: 1.4; } .section-floorplan--popup input::placeholder { color: #9AA4AE; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; } .section-floorplan--popup input:focus { outline: none; border-color: #009ADE; box-shadow: 0 0 0 3px rgba(0, 154, 222, 0.15); } .section-floorplan--popup .gform_footer { margin-top: 1.5rem; } .section-floorplan--popup .gform_button, .section-floorplan--popup input[type="submit"] { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 14.4px 38.4px; border: 0; border-radius: 9999px; background: #009ADE; color: #fff; font-family: 'effra', ui-sans-serif, system-ui, sans-serif; font-size: 12px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer; transition: background-color .2s; } .section-floorplan--popup .gform_button:hover, .section-floorplan--popup input[type="submit"]:hover { background: #0081BA; } .section-floorplan--popup .gform_button:active, .section-floorplan--popup input[type="submit"]:active { transform: scale(0.98); } /* GF's ajax spinner is injected next to the submit button. */ .section-floorplan--popup .gform_ajax_spinner { width: 24px; height: 24px; margin-left: 0.75rem; vertical-align: middle; } .section-floorplan--popup .gform_validation_errors, .section-floorplan--popup .validation_message, .section-floorplan--popup .gfield_description.validation_message { margin-top: 0.4rem; color: #B91C1C; font-size: 13px; line-height: 1.5; } .section-floorplan--popup .gfield_error input { border-color: #B91C1C; } /* The ajax confirmation replaces the whole form in place. */ .section-floorplan--popup .gform_confirmation_message { padding: 1.5rem 0; color: #333F48; font-size: 17px; line-height: 1.6; } /* ---------- Narrow screens ---------- */ @media (max-width: 1023px) { .section-floorplan--popup .register__container { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; padding: 3.5rem 2rem 3rem; } .section-floorplan--popup .register__title { font-size: 34px; } } @media (max-width: 640px) { .section-floorplan--popup .register__container { padding: 3.25rem 1.25rem 2.5rem; } .section-floorplan--popup .register__title { font-size: 28px; } /* First/last name stop sharing a row once the pills would be too narrow. */ .section-floorplan--popup .ginput_complex { grid-template-columns: minmax(0, 1fr); } }