/* Block: Contact Form (acf/contact-form) — Page/Contact. Figma 595:1617 / 595:1618. Two cards, top-aligned, 379px / 833px, gap 185. WPForms shortcode styled to match. Feedback f2w-20261006-114541: left card exact height/positions, WPForms #137 spacing + 2-col grid (Layout fields were removed from the form — grid is now built with CSS, not WPForms columns), field sizing/typography, checkbox/privacy link, disclaimer, submit button. Right card (#F5F7F6 / title) untouched. HDR-01 fix B: the two cards had hard pixel widths (379 + gap 185 + 833 = 1397px, plus the section's own side padding) with no fallback — below ~1440px that is wider than the viewport and caused a horizontal scroll (seen at 1100). ≥1440 keeps the exact Figma flex layout; 1024–1439 switches to a CSS-grid 2-col with a fluid gap; ≤1023 stacks to one column (Details first, same DOM order as desktop). HDR-02 fix: at the 1024–1439 tier the Details card's fixed 50px padding + minmax(300px,…) column left too little room — the email link touched/overran the card's right edge at 1100 (worse at 1024). padding-inline is now fluid (clamp, exact 50px at ≥1440) and the minmax floor raised to 346px (measured email width) so icon+email stay on one line with ≥24px clearance; overflow-wrap:anywhere added to the email/phone links as a safety net. */ /* FIX-01 / R2: 120px was unconditional, so it stayed fixed at every width while the shared --wa-section-py already shrinks to 72px (≤1024) / 56px (≤768) for the rest of the theme — huge hero→card gap on mobile (AUD-02 R2). Scoped to ≥1024 only; ≤1023 now falls through to the shared global.css token like every other section. */ @media (min-width: 1024px) { .wa-section.wa-contact { --wa-section-py: 120px; } } /* ≤1023 — one column, Details then form (default/base rules the wider tiers override below). */ .wa-contact__grid { display: flex; flex-direction: column; gap: 24px; } .wa-contact__details, .wa-contact__form-card { width: 100%; max-width: 100%; flex: 1 1 auto; box-sizing: border-box; } /* 1024–1439 — two columns, fluid gap, no fixed pixel widths so nothing overflows. HDR-02 fix: at 1100 (and worse at 1024, minmax 300px) the Details card's fixed 50px left padding left too little room and the email "connect@nomadicaconnect.com" (240px, icon+gap+text measured live) touched/overran the card's right edge. 300px of column width minus 2×50px padding = 200px of inner space, less than the 240px email needs. minmax raised to 346px = ceil(2 × worst-case fluid padding @1024 (32.768px) + 240px email + small buffer) so icon+email always fit one line with ≥24px to spare. */ @media (min-width: 1024px) { .wa-contact__grid { display: grid; grid-template-columns: minmax(346px, 379fr) 833fr; align-items: start; gap: clamp(32px, 6vw, 185px); } .wa-contact__details, .wa-contact__form-card { width: auto; max-width: none; } } /* ≥1440 — exact Figma: fixed 379 / 185 / 833. */ @media (min-width: 1440px) { .wa-contact__grid { display: flex; flex-direction: row; align-items: flex-start; gap: 185px; } .wa-contact__details { flex: 0 0 379px; width: 379px; } .wa-contact__form-card { flex: 1 1 833px; max-width: 833px; } } /* Left card — Contact Details (navy) ------------------------------------ */ .wa-contact__details { box-sizing: border-box; min-height: 230px; background: var(--wa-dark); border-radius: 5px; padding: 32px 50px; display: flex; flex-direction: column; gap: 10px; overflow: visible; } /* ≥1024 the card keeps the Figma's exact 230px (both grid and flex tiers). */ @media (min-width: 1024px) { .wa-contact__details { height: 230px; } } /* HDR-02 fix: these two rules MUST stay below the base `.wa-contact__details { padding: 32px 50px; }` above — same selector/specificity, so source order decides and a rule placed earlier (as the first attempt was, inside the 1024/1440 grid blocks near the top of the file) gets silently reset by this later shorthand. padding-inline fluid at 1024–1439 (clamp lands exactly on 50px at 1440, pinned explicitly below) keeps the email's right clearance ≥24px once combined with the 346px column minmax; padding-block stays the Figma 32px throughout, untouched by this fix. */ @media (min-width: 1024px) { .wa-contact__details { padding-inline: clamp(28px, 3.2vw, 50px); } } @media (min-width: 1440px) { .wa-contact__details { padding-inline: 50px; } } /* FIX-01 / R5: base rule above (32px 50px) was never reset ≤1023, card padding stayed way over the ≤24px-per-side audit rule (AUD-02 R5) and left too little room for the email line (R4). */ @media (max-width: 1023px) { .wa-contact__details { padding: var(--wa-card-pad); } } .wa-contact__details-title { margin: 0; height: 36px; display: flex; align-items: center; font-size: 30px; line-height: 1.1; font-weight: 700; letter-spacing: 1.32px; color: #fff; } .wa-contact__line { display: inline-flex; align-items: center; gap: 4px; height: 28px; font-size: 18px; line-height: 18px; font-weight: 400; color: #fff; text-decoration: none; } .wa-contact__line--email { height: 57px; align-items: flex-start; } /* HDR-02 safety net only — must not trigger at any of the 12 QA widths (verified: it doesn't, the minmax/padding fix above keeps both links on one line throughout). */ .wa-contact__line--email, .wa-contact__line--phone { overflow-wrap: anywhere; } /* FIX-01 / R4: ≤1023 the card is single column with much more width available than the old 1024–1439 fluid tier this 57px height was tuned for, and the email now always fits one line (confirmed live at 375/390/414/768 — getClientRects().length === 1) — the fixed height was just leftover blank space under the link, not an actual second line. align-items back to center once height is auto. Font-size clamp (min 14px, audit's own floor) only kicks in at the narrowest widths as an extra safety margin, not because wrapping was observed there either. */ @media (max-width: 1023px) { .wa-contact__line--email { height: auto; align-items: center; } } @media (max-width: 480px) { .wa-contact__line--email, .wa-contact__line--phone { flex-wrap: nowrap; white-space: nowrap; font-size: clamp(14px, 3.6vw, 18px); } } .wa-contact__line:hover { color: var(--wa-accent); } .wa-contact__icon { color: var(--wa-accent); flex: 0 0 auto; } .wa-contact__icon--phone { transform: rotate(19.6deg); } .wa-contact__social { display: flex; align-items: flex-start; height: 15px; gap: 12px; margin: 0; padding: 0; list-style: none; } .wa-contact__social a { display: grid; place-items: center; width: 24px; height: 24px; margin: -2px; color: #fff; } .wa-contact__social a:hover { color: var(--wa-accent); } /* Right card — Request a Quote (WPForms) --------------------------------- */ .wa-contact__form-card { box-sizing: border-box; background: var(--wp--preset--color--gray-96, #f5f7f6); border-radius: 5px; padding: 40px; } .wa-contact__form-title { margin: 0 0 24px; font-size: 36px; line-height: 1.1; font-weight: 700; letter-spacing: 1.32px; text-transform: uppercase; color: var(--wa-dark); } /* WPForms — visual reset to match Figma (no visible labels, boxed inputs). DOM verified live on staging (form 137, feedback f2w-20261006-114541): the Layout field is gone, fields are a flat list (Name, Company, Email, Phone, Select, Textarea, GDPR checkbox) — the 2-column layout below is built with CSS grid, not WPForms columns. WPForms' own anti-spam adds TWO decoy text fields (ids rotate per request, e.g. field_1/field_2) interleaved anywhere in the DOM; WPForms hides each one itself via a per-request inline