/*! * "Floorplan Options" popup — 2026 design. * * The popup's markup, JS and mail pipeline are the legacy ones: the reskin kept * them deliberately (see the docblock in fragments/homes/floor-plans.php). Only * its CSS lived in the dist/ bundle that gb26 pages skip, so the popup opened * with every class unstyled. Rather than graft the old stylesheet back, this * restyles the same markup to the 2026 design. * * Everything is confined to #popup-floor / .popup-plans. That scoping is * load-bearing, not tidiness: the legacy slider inside is Swiper 4 * (.swiper-container / .swiper-slide) and the page around it runs Swiper 11 * galleries that share .swiper-slide, so unscoped rules would break the page's * own sliders. * * Contracts this must honour, all driven by resources/js/main.js: * .tab.current the visible floor * .tabs__nav li.current a the active tab * img.optional(.current) option layers stacked over img.main * .form__subtext starts hidden; revealed with slideToggle() * .form__row--checkbox.selected / .unselectable toggled per group * The mobile off-canvas drawer (.tab__entry-handle) is retired here in favour * of stacking, so the handle is hidden rather than removed from the markup. * * Palette mirrors tailwind.config.js: primary #009ADE, ink #333F48, * body #333F48, mist #F4F4F4. */ /* ---------- Panel ---------- */ .popup-plans .mfp-content { max-width: 1180px; margin: 0 auto; } /* Magnific lifts the popup out to the end of , so it leaves the `.gb26` root behind and inherits neither the theme's font nor its box model. Both have to be restated here: without the first the popup renders in the browser default serif, without the second the full-width inputs add their padding and border on top of 100% and overflow the panel. */ #popup-floor, #popup-floor *, #popup-floor *::before, #popup-floor *::after { box-sizing: border-box; } #popup-floor, #popup-floor input, #popup-floor button { font-family: 'effra', ui-sans-serif, system-ui, sans-serif; } #popup-floor { background: #fff; padding: 0 2.5rem 3rem; color: #333F48; font-size: 15px; line-height: 1.7; } /* ---------- Sticky header: floor tabs + close ---------- A plan and its options run well past a screenful, so the two controls you need — switch floor, get out — would otherwise scroll away. They ride along in a bar pinned to the top of the popup instead. Magnific scrolls .mfp-wrap, not the popup, so `position: sticky` has no scrollport of its own to stick to; it sticks against the wrapper, which is what we want. The bar is opaque so plan drawings pass behind it cleanly. */ #popup-floor .tabs__head { position: sticky; top: 0; z-index: 5; /* Cancel the panel's side padding so the bar spans the full width. */ margin: 0 -2.5rem 2.5rem; padding: 1.25rem 2.5rem; background: #fff; border-bottom: 1px solid #E3E5E7; } /* Magnific's close button, moved into the bar by main.js so it pins with it. Placed over the tab row rather than in its flow, so the tabs stay centred on the panel. */ #popup-floor .tabs__head .mfp-close { position: absolute; top: 50%; right: 1.25rem; transform: translateY(-50%); width: 44px; height: 44px; padding: 0; color: #009ADE; font-size: 40px; line-height: 44px; opacity: 1; } #popup-floor .mfp-close:hover { color: #0081BA; } /* ---------- Floor tabs ---------- */ #popup-floor .tabs__nav ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin: 0; padding: 0; list-style: none; } #popup-floor .tabs__nav li { display: flex; } #popup-floor .tabs__nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0.9rem 2.25rem; border: 1px solid #009ADE; border-radius: 9999px; color: #009ADE; background: transparent; font-family: 'effra', ui-sans-serif, system-ui, sans-serif; font-size: 12px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; text-align: center; transition: background-color .2s, color .2s; } #popup-floor .tabs__nav a:hover { background: #009ADE; color: #fff; } #popup-floor .tabs__nav li.current a { background: #009ADE; color: #fff; } /* ---------- Floor: plan image + options ---------- */ #popup-floor .tab { display: none; } #popup-floor .tab.current { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; align-items: start; } #popup-floor .tab__image { position: relative; } #popup-floor .tab__image img { display: block; width: 100%; height: auto; } /* Option layers sit exactly over the base plan and are toggled by the checkboxes; .main is the base drawing. */ #popup-floor .tab__image img.optional { display: none; position: absolute; top: 0; left: 0; } #popup-floor .tab__image img.optional.current { display: block; } /* The mobile drawer handle is retired — the columns stack instead. */ #popup-floor .tab__entry-handle { display: none; } #popup-floor .tab__entry h2 { margin: 0 0 1.5rem; color: #009ADE; font-family: 'effra', ui-sans-serif, system-ui, sans-serif; font-weight: 800; font-size: 44px; line-height: 1.05; letter-spacing: -0.01em; } #popup-floor .tab__entry h4 { margin: 0 0 0.75rem; color: #009ADE; font-family: 'effra', ui-sans-serif, system-ui, sans-serif; font-size: 13px; font-weight: 800; letter-spacing: 0.28em; text-transform: uppercase; } #popup-floor .tab__entry p { margin: 0 0 1rem; } /* ---------- Plan options (checkboxes) ---------- */ #popup-floor .form__group { margin: 0 0 2rem; padding: 0; } #popup-floor .form__row { margin: 0 0 1rem; } #popup-floor .form_controls.checkbox { display: flex; align-items: flex-start; gap: 0.75rem; } #popup-floor .form_controls.checkbox input[type="checkbox"] { flex: 0 0 auto; width: 18px; height: 18px; margin: 0.2rem 0 0; accent-color: #009ADE; cursor: pointer; } #popup-floor .form_controls.checkbox label { color: #333F48; font-size: 15px; line-height: 1.5; cursor: pointer; } #popup-floor .form__row--checkbox.selected .form_controls.checkbox label { color: #009ADE; font-weight: 700; } /* Sibling options in the same group grey out once one is chosen. */ #popup-floor .form__row--checkbox.unselectable { opacity: 0.55; } /* Revealed by slideToggle(), so it must start hidden. */ #popup-floor .form__subtext { display: none; padding: 0.5rem 0 0 1.75rem; color: #333F48; font-size: 14px; } /* ---------- "Email me this floor plan" ---------- */ /* Matches the Gravity Forms treatment on the Book an Appointment page: pill fields with a hairline border, an uppercase label above each, and a blue pill submit. Values read off that page's computed styles so the two forms agree — see .gform_wrapper in the gb26 Gravity Forms CSS. */ #popup-floor .form__submit { margin-top: 2rem; } #popup-floor .form__submit .form_controls { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; } #popup-floor .form__field { display: block; } #popup-floor .form__field label, #popup-floor .form__label { display: block; margin-bottom: 8px; color: #6B7280; font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; } #popup-floor .form__required { color: #009ADE; } #popup-floor .form__submit input[type="text"], #popup-floor .form__submit input[type="email"] { 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; } #popup-floor .form__submit input:focus { outline: none; border-color: #009ADE; box-shadow: 0 0 0 3px rgba(0, 154, 222, 0.15); } #popup-floor .form__submit .form__row { margin-bottom: 1.25rem; } /* Consent row. The checkbox is a real, visible control here — the legacy markup hid it with an inline style and left the label to do the work. */ #popup-floor .form__row.casl { margin: 1.5rem 0; } #popup-floor .casl__control { display: flex; align-items: flex-start; gap: 0.5rem; } #popup-floor .casl__control input[type="checkbox"] { flex: 0 0 auto; width: 16px; height: 16px; margin: 0.15rem 0 0; accent-color: #009ADE; cursor: pointer; } #popup-floor .casl__control label { margin: 0; color: #6B7280; font-size: 12px; font-weight: 400; letter-spacing: normal; line-height: 1.6; text-transform: none; cursor: pointer; } #popup-floor .form__actions { margin-top: 1.5rem; } #popup-floor .form__actions button { 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; } #popup-floor .form__actions button:hover { background: #0081BA; } #popup-floor .form__actions button:active { transform: scale(0.98); } /* Inline validation from the legacy validator, which marks the field itself. */ #popup-floor .form__submit input.error { border-color: #D0454A; } #popup-floor .casl__control input.error + label { color: #D0454A; } /* ---------- Elevations slider (legacy Swiper 4 markup) ---------- */ #popup-floor .slider-plans { margin-top: 3rem; padding-top: 2.5rem; border-top: 1px solid #E3E5E7; } #popup-floor .slider__clip { position: relative; overflow: hidden; } #popup-floor .slider__slides { display: flex; align-items: flex-end; } #popup-floor .slider__slide { flex-shrink: 0; width: 100%; text-align: center; } #popup-floor .slider__slide-image img { display: block; width: auto; max-width: 100%; height: auto; margin: 0 auto; } #popup-floor .slider__slide-content h6 { margin: 1rem 0 0; color: #009ADE; font-family: 'effra', ui-sans-serif, system-ui, sans-serif; font-size: 12px; font-weight: 800; letter-spacing: 0.28em; text-transform: uppercase; } #popup-floor .swiper-button-next, #popup-floor .swiper-button-prev { position: absolute; top: 50%; width: 44px; height: 44px; margin-top: -22px; border: 1px solid #D4D8DB; border-radius: 9999px; background: #fff; cursor: pointer; z-index: 2; transition: border-color .2s, background-color .2s; } #popup-floor .swiper-button-next:hover, #popup-floor .swiper-button-prev:hover { border-color: #009ADE; background: #009ADE; } #popup-floor .swiper-button-prev { left: 0; } #popup-floor .swiper-button-next { right: 0; } /* Chevrons, drawn rather than shipped as images. */ #popup-floor .swiper-button-next::after, #popup-floor .swiper-button-prev::after { content: ''; position: absolute; top: 50%; left: 50%; width: 9px; height: 9px; border-right: 2px solid #333F48; border-bottom: 2px solid #333F48; transition: border-color .2s; } #popup-floor .swiper-button-next:hover::after, #popup-floor .swiper-button-prev:hover::after { border-color: #fff; } #popup-floor .swiper-button-next::after { transform: translate(-65%, -50%) rotate(-45deg); } #popup-floor .swiper-button-prev::after { transform: translate(-35%, -50%) rotate(135deg); } #popup-floor .swiper-button-disabled { opacity: 0.35; pointer-events: none; } /* ---------- Narrow screens ---------- */ @media (max-width: 1023px) { #popup-floor { padding: 0 1.5rem 2.5rem; } #popup-floor .tabs__head { margin: 0 -1.5rem 2rem; padding: 1rem 1.5rem; } #popup-floor .tabs__head .mfp-close { right: 0.75rem; } #popup-floor .tab.current { grid-template-columns: minmax(0, 1fr); gap: 2rem; } #popup-floor .tab__image img { max-width: 520px; margin: 0 auto; } /* The base plan is centred, so the absolutely-placed option layers have to follow it rather than sit at the left edge. */ #popup-floor .tab__image img.optional { left: 50%; transform: translateX(-50%); } #popup-floor .tab__entry h2 { font-size: 34px; } } @media (max-width: 640px) { #popup-floor { padding: 0 1.125rem 2rem; } #popup-floor .tabs__head { margin: 0 -1.125rem 1.5rem; padding: 0.875rem 1.125rem; } #popup-floor .tabs__head .mfp-close { right: 0.5rem; } #popup-floor .tabs__nav a { padding: 0.8rem 1.4rem; font-size: 11px; } #popup-floor .tab__entry h2 { font-size: 28px; } /* First/last name stop sharing a row once the pills would be too narrow. */ #popup-floor .form__submit .form_controls { grid-template-columns: minmax(0, 1fr); } }