/** * PP Space-Fit Calculator — front-end styles. * * Loaded only on the calculator + result pages (PP_SpaceFit_Shortcodes::enqueue_styles). * Restyle to Miranda's Figma comp (June 2026). Scoped under .pp-spacefit-calc * (wizard) and .pp-sf-result (result) so nothing bleeds onto other Gravity Forms. * * This form renders in GF *legacy* markup (.gform_legacy_markup_wrapper) with the orbital * step indicator (.gf_page_steps/.gf_step*) + a no-framework theme — a hybrid. Rules that * fight GF-legacy defaults (labels, inputs, buttons) must reach 0-3-0+ to win the cascade. * Form-ID-independent: choices are matched by input[value], not gchoice_{id} classes. * Final pixel tuning is done against the rendered dev HTML after deploy. */ /* ---- Design tokens ---- */ .pp-spacefit-calc, .pp-sf-result { --ppsf-cobalt: #1053b7; --ppsf-cobalt-bright: #1e70eb; --ppsf-fill: #f5f5f4; --ppsf-border: #d9dad9; --ppsf-text: #0e141b; --ppsf-white: #fff; --ppsf-radius: 12px; --ppsf-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-family: var(--ppsf-font); color: var(--ppsf-text); max-width: 864px; margin-left: auto; margin-right: auto; margin-bottom: 120px; /* clear the site footer */ } /* Result page spans full width — no 864px centering / L-R margin. */ .pp-sf-result { max-width: none; margin-left: 0; margin-right: 0; } /* Kill the "Next jumps left" shift. AJAX page-swaps change page height; a scrollbar that toggles between a tall step and a short one re-centers the (margin:auto) wizard by ~half a scrollbar (5–10px). `scrollbar-gutter: stable` covers Chrome/Firefox/Edge; `overflow-y: scroll` forces the track to ALWAYS render (covers Safari, which ignores scrollbar-gutter, and any "always show scrollbars" OS setting). Together the viewport's usable width is identical on every step in every browser. */ html { scrollbar-gutter: stable; overflow-y: scroll; } /* ---- Per-step header (HTML field at top of each page: "Shape", "Dimensions", …) ---- Pulled ABOVE the form card (see .gform_page_fields below) to match the comp. */ .pp-spacefit-calc .pp-sf-step-header { font-size: 28px; font-weight: 500; line-height: 1.2; margin: 0; color: var(--ppsf-text); } /* ---- Progress stepper (GF "steps" pagination) ---- GF DOM: .gf_step > span.gf_step_number + span.gf_step_label. States: gf_step_active (current), gf_step_pending, gf_step_first / gf_step_last. GF's orbital theme styles .gf_step at equal specificity and loads after us, so the layout-critical props use higher specificity + !important to win the cascade, and we replace GF's connector pseudo-element with our own line behind the circles. */ .pp-spacefit-calc .gf_page_steps { display: flex !important; align-items: flex-start; justify-content: space-between; gap: 0; border: 0 !important; /* kill GF's dotted bottom border behind the steps */ margin: 0 0 25px !important; /* clear the form card below */ padding: 0; list-style: none; } /* neutralize any GF connector/border pseudo-element on the steps container */ .pp-spacefit-calc .gf_page_steps::before, .pp-spacefit-calc .gf_page_steps::after { content: none !important; border: 0 !important; } .pp-spacefit-calc .gf_page_steps .gf_step { flex: 1 1 0 !important; display: flex !important; flex-direction: column !important; align-items: center !important; gap: 8px; position: relative; margin: 0; padding: 0; min-width: 0; opacity: 1; float: none; background: none; font-size: 14px; } /* our connector line, behind the circles; neutralize any GF ::after connector */ .pp-spacefit-calc .gf_page_steps .gf_step::after { content: none !important; } .pp-spacefit-calc .gf_page_steps .gf_step::before { content: "" !important; position: absolute; top: 15px; right: 50%; width: 100%; height: 2px; background: var(--ppsf-border); z-index: 0; } .pp-spacefit-calc .gf_page_steps .gf_step.gf_step_first::before { content: none !important; } /* Scoped as `.gform_legacy_markup_wrapper … span.gf_step_number` (0-4-1) to beat GF legacy's own `.gform_legacy_markup_wrapper .gf_step span.gf_step_number` (0-3-1), which otherwise wins on font-family (arial), font-size (1.25em) and margin-right (4px, which knocks the numeral off-center inside the circle). */ .pp-spacefit-calc .gform_legacy_markup_wrapper .gf_page_steps span.gf_step_number { position: relative; z-index: 1; flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; background: var(--ppsf-border); color: var(--ppsf-white); display: flex !important; align-items: center; justify-content: center; /* #213: step-number type matches the Elementor global typography Miranda specified. */ font-family: var(--e-global-typography-f6812e0-font-family), Sans-serif; font-weight: var(--e-global-typography-f6812e0-font-weight); font-size: var(--e-global-typography-f6812e0-font-size); line-height: var(--e-global-typography-f6812e0-line-height); border: 0; margin: 0; } /* #213: active step's blue updated to #1E70EB (--ppsf-cobalt-bright). Active/pending state is unchanged — the highlighted circle still follows the current wizard page. */ .pp-spacefit-calc .gform_legacy_markup_wrapper .gf_page_steps .gf_step_active span.gf_step_number { background: var(--ppsf-cobalt-bright); } .pp-spacefit-calc .gf_page_steps .gf_step_label { display: block !important; width: 100%; float: none; font-weight: 500; font-size: 14px; line-height: 1.3; color: var(--ppsf-text); text-align: center; } /* ---- Form container card ---- The step title ("Shape"/"Dimensions"/…) is pulled out ABOVE this box (comp), so reserve room above the card for it. */ .pp-spacefit-calc .gform_page_fields { position: relative; border: 1px solid var(--ppsf-border); padding: 48px 48px 64px; margin-top: 130px; /* clear band above the card for the pulled-out step title */ } /* Lift the step-title field out of the in-box field flow and place it above the card, left-aligned. Targets only the step-header field — page-2 diagram HTML fields have no .pp-sf-step-header, so they stay inside the box. */ .pp-spacefit-calc .gform_fields > li.gfield:has( .pp-sf-step-header ) { position: absolute; top: -54px; /* bigger gap above (stepper -> title) without crowding the card */ left: 0; width: auto; margin: 0; padding: 0; } .pp-spacefit-calc .gform_body, .pp-spacefit-calc .gform_fields { margin: 0; } /* ---- Field labels: uppercase tagline style ---- Scoped under .gform_legacy_markup_wrapper (0-3-0) so it beats GF legacy's own `label.gfield_label { font-size: inherit; font-weight: 700 }` (0-2-1). */ .pp-spacefit-calc .gform_legacy_markup_wrapper .gfield_label { font-weight: 600; font-size: 14px; letter-spacing: 2.24px; text-transform: uppercase; line-height: 1.2; color: var(--ppsf-text); margin-bottom: 8px; } .pp-spacefit-calc .gfield_required { color: #d6443c; } .pp-spacefit-calc .gfield_description { font-size: 13px; color: #5b6470; font-style: italic; } /* #215: one label spans each feet+inches pair — hide the inches field's own label (marker class pp-sf-inches, set on fields 18–24 in the form) while keeping its box so the two inputs stay vertically aligned. Scoped to the marker so it never touches Last name (#27), which is also gf_right_half. */ .pp-spacefit-calc .pp-sf-inches .gfield_label { visibility: hidden; } /* #215 follow-up: purge GF's auto range-instruction ("Please enter a number …") below every number field. It's a .gfield_description.instruction element — separate from the field description we already cleared. Scoped to .instruction so the textarea's "Optional …" description (#25) on the contact page is untouched. */ .pp-spacefit-calc .gfield_description.instruction { display: none; } /* ---- #225: validation-error state (match Miranda's comp) ---- Errored field: red label + red asterisk, red field border, red italic message below. GF 2.10 legacy marks the field
  • with .gfield_error and emits the message as .gfield_validation_message (rendered below the field — form is validation_below). No top-of-form summary banner (not in the comp). */ .pp-spacefit-calc .gform_legacy_markup_wrapper .gfield_error .gfield_label, .pp-spacefit-calc .gform_legacy_markup_wrapper .gfield_error .gfield_label .gfield_required { color: #e5001d; } .pp-spacefit-calc .gform_legacy_markup_wrapper .gfield_error input[type="text"], .pp-spacefit-calc .gform_legacy_markup_wrapper .gfield_error input[type="number"], .pp-spacefit-calc .gform_legacy_markup_wrapper .gfield_error input[type="email"], .pp-spacefit-calc .gform_legacy_markup_wrapper .gfield_error input[type="tel"], .pp-spacefit-calc .gform_legacy_markup_wrapper .gfield_error textarea, .pp-spacefit-calc .gform_legacy_markup_wrapper .gfield_error select { border: 1px solid #e5001d; } .pp-spacefit-calc .gfield_validation_message, .pp-spacefit-calc .gfield_error .validation_message { color: #e5001d; font-style: italic; font-size: 13px; background: none; border: 0; padding: 0; margin-top: 8px; } /* No top-of-form error summary banner (Miranda's comp shows field-level errors only). */ .pp-spacefit-calc .gform_validation_errors { display: none; } /* ---- Text / number / email / textarea inputs ---- */ .pp-spacefit-calc input[type="text"], .pp-spacefit-calc input[type="number"], .pp-spacefit-calc input[type="email"], .pp-spacefit-calc input[type="tel"], .pp-spacefit-calc textarea, .pp-spacefit-calc select { width: 100%; background: var(--ppsf-fill); border: 1px solid var(--ppsf-border); border-radius: 0; padding: 14px 16px; font-family: var(--ppsf-font); font-size: 16px; color: var(--ppsf-text); box-shadow: none; } /* Field height per design (58px). Single-line inputs + select only — textarea is excluded so it can still grow. GF legacy sets no height on inputs, so this wins uncontested. */ .pp-spacefit-calc input[type="text"], .pp-spacefit-calc input[type="number"], .pp-spacefit-calc input[type="email"], .pp-spacefit-calc input[type="tel"], .pp-spacefit-calc select { height: 58px; } /* #219: the native resets (e.g. `.gform_legacy_markup_wrapper.gf_browser_chrome select { padding: 2px 0 2px 3px }`, 0-2-1) that tie/beat the design padding, dropping the select's left pad to 3px so its value sits ~13px left of every other field. GF's reset is not !important and equal-specificity to a wrapper-scoped rule, so !important is used to win across all browser variants: restore parity — left 16px (matches sibling inputs), right 48px (chevron clearance), 14px top/bottom. */ .pp-spacefit-calc .gform_legacy_markup_wrapper select { padding: 14px 48px 14px 16px !important; } .pp-spacefit-calc input::placeholder, .pp-spacefit-calc textarea::placeholder { color: #8a929c; font-style: italic; } .pp-spacefit-calc input:focus, .pp-spacefit-calc textarea:focus, .pp-spacefit-calc select:focus { outline: none; border-color: var(--ppsf-cobalt); box-shadow: 0 0 0 2px rgba(16, 83, 183, 0.2); } /* feet + inches pairs (gf_left_half / gf_right_half already set in the form) */ .pp-spacefit-calc .gfield.gf_left_half, .pp-spacefit-calc .gfield.gf_right_half { margin-bottom: 1.5rem; } /* ---- Step 1: shape radios as glyph cards ---- */ .pp-spacefit-calc .gfield_radio { display: flex; flex-wrap: wrap; gap: 0; } /* Default: each choice is a full-width row (radio + label inline), so choices stack vertically. The four geometric shapes opt out below to render as fixed-width tiles. */ .pp-spacefit-calc .gfield_radio .gchoice { width: 100%; padding: 16px; display: flex; flex-direction: row; align-items: center; gap: 12px; } /* #210: the full-width "Other / irregular" row wraps directly below the shape tiles (container is gap:0), leaving no separation. Add space above it. */ .pp-spacefit-calc .gfield_radio .gchoice:has(input[value="other"]) { margin-top: 24px; } /* Shape picker only: fixed-width tiles with the glyph stacked above the label. */ .pp-spacefit-calc .gfield_radio .gchoice:has(input[value="rectangle"]), .pp-spacefit-calc .gfield_radio .gchoice:has(input[value="l_shape"]), .pp-spacefit-calc .gfield_radio .gchoice:has(input[value="t_shape"]), .pp-spacefit-calc .gfield_radio .gchoice:has(input[value="circle"]) { width: 163px; flex-direction: column-reverse; align-items: flex-start; gap: 16px; } /* glyph box above the radio+label for the four geometric shapes */ .pp-spacefit-calc .gfield_radio .gchoice:has(input[value="rectangle"])::before, .pp-spacefit-calc .gfield_radio .gchoice:has(input[value="l_shape"])::before, .pp-spacefit-calc .gfield_radio .gchoice:has(input[value="t_shape"])::before, .pp-spacefit-calc .gfield_radio .gchoice:has(input[value="circle"])::before { content: ""; display: block; width: 96px; height: 96px; background: var(--ppsf-border); background-repeat: no-repeat; background-position: center; background-size: contain; align-self: center; } .pp-spacefit-calc .gfield_radio .gchoice:has(input[value="rectangle"])::before { width: 48px; background: var(--ppsf-border); } .pp-spacefit-calc .gfield_radio .gchoice:has(input[value="circle"])::before { border-radius: 50%; } /* L-shape + T-shape glyphs: simple grey polygons via inline SVG (self-contained, no external asset) */ .pp-spacefit-calc .gfield_radio .gchoice:has(input[value="l_shape"])::before { background: none; background-image: url('data:image/svg+xml;utf8,'); } .pp-spacefit-calc .gfield_radio .gchoice:has(input[value="t_shape"])::before { background: none; background-image: url('data:image/svg+xml;utf8,'); } .pp-spacefit-calc .gfield_radio .gchoice label { font-weight: 400; font-size: 14px; color: var(--ppsf-text); margin: 0; } .pp-spacefit-calc .gfield_radio input[type="radio"] { width: 20px; height: 20px; accent-color: var(--ppsf-cobalt); } /* ---- Per-shape measurement diagram (Step 2 HTML fields; placeholder until Miranda's assets) ---- */ .pp-spacefit-calc .pp-sf-measure-diagram { text-align: center; margin-bottom: 2rem; } .pp-spacefit-calc .pp-sf-measure-diagram img { max-width: 100%; height: auto; } .pp-spacefit-calc .pp-sf-measure-diagram .pp-sf-placeholder { display: inline-flex; align-items: center; justify-content: center; width: 280px; height: 200px; background: var(--ppsf-fill); border: 1px dashed var(--ppsf-border); color: #8a929c; font-size: 13px; } .pp-spacefit-calc .pp-sf-other-msg { margin: 0.5em 0 1em; } /* ---- Buttons ---- */ .pp-spacefit-calc .gform_button, .pp-spacefit-calc .gform_next_button, .pp-spacefit-calc .gform_previous_button { font-family: var(--ppsf-font); font-weight: 600; font-size: 16px; line-height: 1.6; padding: 16px 48px; border-radius: var(--ppsf-radius); cursor: pointer; border: 4px solid var(--ppsf-cobalt); } /* primary (Next / Submit) — filled cobalt */ .pp-spacefit-calc .gform_button, .pp-spacefit-calc .gform_next_button { background: var(--ppsf-cobalt); color: var(--ppsf-white); border-color: var(--ppsf-cobalt); } /* secondary (Previous) — outline. Scoped under .gform_legacy_markup_wrapper (0-3-0) so it beats Elementor's kit rule `.elementor-kit-179939 input[type="button"]` (0-2-1), which otherwise fills the button with the global primary colour. border-color set for the same reason (Elementor forces it to the primary colour). */ .pp-spacefit-calc .gform_legacy_markup_wrapper .gform_previous_button { background: transparent; color: var(--ppsf-text); border-color: var(--ppsf-cobalt); } /* footer: Previous left, Next/Submit pinned right. flex-end keeps the primary button anchored; the AJAX spinner is taken out of flow so the button no longer jumps left when the spinner is injected after it on click. */ .pp-spacefit-calc .gform_page_footer, .pp-spacefit-calc .gform_footer { display: flex; align-items: center; justify-content: flex-end; gap: 16px; border-top: 0; padding: 2rem 0 0; position: relative; } /* GF legacy sets `.gform_legacy_markup_wrapper .gform_page_footer { border-top: 1px dotted #ccc }` (0-2-0) and loads AFTER us, so the `border-top:0` above (also 0-2-0) loses on source order. Re-scope under the legacy wrapper to reach 0-3-0 and kill the dotted rule. */ .pp-spacefit-calc .gform_legacy_markup_wrapper .gform_page_footer, .pp-spacefit-calc .gform_legacy_markup_wrapper .gform_footer { border-top: 0; } .pp-spacefit-calc .gform_previous_button { margin-right: auto; } /* AJAX loading indicators must NOT sit in the footer's flow — when inline they push the right-aligned Next button left by their own width for the whole load, then it snaps back (the "Next jumps left" effect). GF 2.5+ orbital uses `.gform-loader`; legacy is `.gform_ajax_spinner`. Take both out of flow, centered in the (already relative) footer so they never overlap the Previous/Next buttons. */ .pp-spacefit-calc .gform_ajax_spinner, .pp-spacefit-calc .gform-loader { position: absolute; left: 50%; top: 50%; transform: translate( -50%, -50% ); margin: 0; } /* * ============================ RESULT PAGE ============================ * Result layout: stacked on mobile (<768px), two columns (diagram 70% | * details 30%) on tablet and up. */ .pp-sf-result { display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: start; } @media ( min-width: 768px ) { .pp-sf-result { grid-template-columns: minmax( 0, 7fr ) minmax( 0, 3fr ); } } /* Desktop: line the result — and its page title — up with the site header/nav. The theme content column is 1140px, but the header/nav (logo, "Shop All Products") sits in the site's wider 1312px container. Both are centred in the viewport, so a 1312px-wide box with margin-left:calc(50% - 656px) lands its LEFT edge at exactly (100vw - 1312px)/2 — the nav edge — independent of the theme column's width/padding. The theme constrains .entry-title (the H1 itself, max-width:1140/margin:auto), so we target it directly. Only >=1312px; below that both stay in the 1140 column. */ @media ( min-width: 1312px ) { .pp-sf-result, body:has( .pp-sf-result ) .page-header .entry-title { width: 1312px; max-width: 1312px; margin-left: calc( 50% - 656px ); margin-right: 0; } /* Drop the theme's 10px side padding on the result title so its text edge (not just its box) lines up with the result content, which has no such padding. */ body:has( .pp-sf-result ) .page-header .entry-title { padding-inline: 0; } } /* Wizard title ("Space-Fit Estimator"): centre it over the (centred) stepper/form. */ body:has( .pp-spacefit-calc ) .page-header .entry-title { text-align: center; } /* Breathing room around the page title on both flows (Tif: 50px top / 40px bottom). */ body:has( .pp-sf-result ) .page-header .entry-title, body:has( .pp-spacefit-calc ) .page-header .entry-title { margin-top: 50px; margin-bottom: 40px; } .pp-sf-result-heading { font-size: 28px; font-weight: 500; line-height: 1.2; margin: 0 0 1.5rem; grid-column: 1 / -1; } .pp-sf-diagram { text-align: center; } .pp-sf-diagram svg { display: inline-block; width: auto; height: auto; max-width: 100%; max-height: 75vh; } .pp-sf-result-info { display: flex; flex-direction: column; gap: 2rem; } /* Stat card: count + seats grouped in a grey box, divided by a hairline (comp). */ .pp-sf-stats { background: var(--ppsf-fill); display: flex; flex-direction: column; gap: 24px; padding: 40px 32px; } /* Divider between the two stats. Border-top on seats keeps a single line in the gap and naturally disappears when there's no seats line (nothing to divide). */ .pp-sf-stats .pp-sf-seats { border-top: 1px solid var(--ppsf-border); padding-top: 24px; } .pp-sf-count, .pp-sf-seats { font-weight: 500; font-size: 20px; line-height: 1.2; letter-spacing: 0.8px; margin: 0; } /* #509 — number set larger than the label per Laura's comp (number 28 / label 20). */ .pp-sf-count .pp-sf-num, .pp-sf-seats .pp-sf-num { font-size: 28px; } .pp-sf-count .pp-sf-subnote, .pp-sf-seats .pp-sf-subnote { display: block; font-size: 14px; font-style: italic; font-weight: 400; letter-spacing: 0; line-height: 1.8; margin-top: 4px; } .pp-sf-disclaimer { font-size: 16px; line-height: 1.8; color: var(--ppsf-text); margin: 0; } .pp-sf-capped { font-size: 14px; font-style: italic; color: #5b6470; margin: 0; } /* result action buttons */ .pp-sf-actions { display: flex; flex-direction: column; gap: 1rem; } .pp-sf-actions .pp-sf-btn, .pp-sf-actions .pp-sf-pdf a { display: inline-block; text-align: center; font-weight: 600; font-size: 16px; line-height: 1.6; padding: 16px 48px; border-radius: var(--ppsf-radius); text-decoration: none; cursor: pointer; } /* High specificity (a.class within .pp-sf-result) so the theme's link color can't override it — fixes the invisible (blue-on-blue) text on the solid button. */ .pp-sf-result .pp-sf-actions a.pp-sf-btn-primary { background: var(--ppsf-cobalt); color: var(--ppsf-white); border: 4px solid var(--ppsf-cobalt); } .pp-sf-result .pp-sf-actions a.pp-sf-btn-outline, .pp-sf-result .pp-sf-actions .pp-sf-pdf a { background: transparent; color: var(--ppsf-text); border: 4px solid var(--ppsf-cobalt); } /* Download glyph trailing the PDF button label (comp). The link markup is emitted by Gravity PDF, so the icon is appended via ::after — a masked inline copy of the Figma download SVG, tinted to the button text colour. Flex+gap centres the pair. */ /* Match the solid button's width: it stretches to the actions column, but the PDF link is nested in a , so its hugged its text. Fill the span so both buttons are equal width. */ .pp-sf-result .pp-sf-actions .pp-sf-pdf a { display: flex; width: 100%; box-sizing: border-box; align-items: center; justify-content: center; gap: 10px; } .pp-sf-result .pp-sf-actions .pp-sf-pdf a::after { content: ""; flex: 0 0 28px; width: 28px; height: 28px; background-color: var(--ppsf-text); -webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center / contain; mask: url('data:image/svg+xml;utf8,') no-repeat center / contain; } /* #230: result-page action buttons are links, so — unlike the wizard's Next/Previous — they do NOT inherit the Elementor global BUTTON hover, only the weaker `.elementor-kit-179939 a:hover` (0-2-1), which just reset font-size + line-height (the height "jump") and gave no real hover state. Mirror the wizard buttons' hover behaviour here. First: hold the type (size, line-height AND weight — the kit a:hover resets all three to the lighter body typography) so the label doesn't thin or the box jump on hover. */ .pp-sf-result .pp-sf-actions a.pp-sf-btn-primary:hover, .pp-sf-result .pp-sf-actions a.pp-sf-btn-outline:hover, .pp-sf-result .pp-sf-actions .pp-sf-pdf a:hover { font-size: 16px; line-height: 1.6; font-weight: 600; } /* Primary hover = the Elementor global button hover (bg #1053B7 → #1E70EB), matching the wizard Next/Submit button. */ .pp-sf-result .pp-sf-actions a.pp-sf-btn-primary:hover { background: var(--ppsf-cobalt-bright); color: var(--ppsf-white); border-color: var(--ppsf-cobalt-bright); } /* Secondary/outline hover: fill with the blue (#1E70EB) per Miranda — white text for contrast; font-weight/size held above so only the fill changes. */ .pp-sf-result .pp-sf-actions a.pp-sf-btn-outline:hover, .pp-sf-result .pp-sf-actions .pp-sf-pdf a:hover { background: var(--ppsf-cobalt-bright); color: var(--ppsf-white); border-color: var(--ppsf-cobalt-bright); } /* PDF download glyph is a masked ::after tinted to the text colour — flip it to white on hover so it stays legible on the blue fill. */ .pp-sf-result .pp-sf-actions .pp-sf-pdf a:hover::after { background-color: var(--ppsf-white); } .pp-sf-start-over a, .pp-sf-adjust a, .pp-sf-category a { color: var(--ppsf-cobalt); font-weight: 500; font-size: 16px; text-decoration: underline; } /* Count line + category link are wrapped in .pp-sf-count-group so the link is NOT a .pp-sf-stats flex item (that container's 24px gap is what pushed it away). Inside the group they flow as normal blocks; the link sits tight under the clearance note. */ .pp-sf-count-group { display: block; } .pp-sf-category { margin-top: 6px; } .pp-sf-result-msg { font-size: 16px; line-height: 1.8; } /* Contact-only ("Other / irregular") thank-you: no diagram, so drop the 2-col grid and render a single readable column (heading + message + CTA + Start Over). */ .pp-sf-result--message { display: block; max-width: 640px; } .pp-sf-result--message .pp-sf-result-heading { margin-bottom: 1rem; } /* ---- iOS focus-zoom guard (mobile) ---- Mobile Safari auto-zooms the viewport when a focused form control's font-size is under 16px. The base rule above sets 16px at 0-1-1, which loses to GF-legacy's own input rules on some fields. Re-assert 16px at GF-legacy specificity (0-3-1) with !important so the estimator form never triggers the zoom on a phone. */ @media (max-width: 767px) { .pp-spacefit-calc .gform_legacy_markup_wrapper input[type="text"], .pp-spacefit-calc .gform_legacy_markup_wrapper input[type="number"], .pp-spacefit-calc .gform_legacy_markup_wrapper input[type="email"], .pp-spacefit-calc .gform_legacy_markup_wrapper input[type="tel"], .pp-spacefit-calc .gform_legacy_markup_wrapper select, .pp-spacefit-calc .gform_legacy_markup_wrapper textarea { font-size: 16px !important; } /* Previous/Next were unequal widths on mobile (fixed 48px side padding + "Previous" being the longer word + margin-right:auto), so they read as misaligned. Make them equal-width halves of the footer row — same width, same height, aligned. */ .pp-spacefit-calc .gform_page_footer .gform_previous_button, .pp-spacefit-calc .gform_page_footer .gform_next_button, .pp-spacefit-calc .gform_page_footer .gform_button { flex: 1 1 0; min-width: 0; margin: 0; padding-left: 8px; padding-right: 8px; text-align: center; } /* GF-legacy gives the footer submit/button a 16px bottom margin on mobile; trim to 8px. Scoped under .pp-spacefit-calc (0-4-1) to beat GF-legacy's own rule (0-2-1). */ .pp-spacefit-calc .gform_legacy_markup_wrapper .gform_footer input.button, .pp-spacefit-calc .gform_legacy_markup_wrapper .gform_footer input[type="submit"], .pp-spacefit-calc .gform_legacy_markup_wrapper .gform_page_footer input.button, .pp-spacefit-calc .gform_legacy_markup_wrapper .gform_page_footer input[type="submit"] { margin-bottom: 8px; } }