/* ============================================================= CONTACT US — css/contact-us.css ------------------------------------------------------------- PORTING-MAP §E, E1. Decision: **restyle**. Rewriting was ruled out: the page content carries LocalBusiness JSON-LD with PostalAddress, GeoCoordinates, two OpeningHoursSpecifications, two ContactPoints and an OfferCatalog of five Products. That is the site's primary local-SEO signal — INSTRUCTIONS.md §6. Restyled rather than ported: v1's file is #0073aa / #00838f / #25d366 and Poppins throughout, and its first 30 lines undo GeneratePress container widths that this theme never applies. Three things worth knowing before touching this file: 1. **The hero photo is set inline in the page content** (`Hero-contact-us-page-v1.webp` as a `background-image` on `.contact-hero`). An inline style beats any stylesheet, so the photo cannot be swapped or removed from CSS — **except with `!important`**, which does beat a plain (non-important) inline declaration. `.contact-hero` below overrides it to `assets/hero-contact-desktop.webp`, and the 680px block overrides it again to `assets/hero-contact-mobile.webp` — a 520×724 portrait crop supplied pre-framed on the WOW Supplies signage. A first (358×480) version matched the phone hero box exactly but read as low-resolution once the box grew past 480px tall to clear the H1 under the signage; this one has enough native resolution to stay sharp at that height. Both ship with the theme (git-tracked), not the media library — same pattern as `assets/hero-home.webp`. 2. **The hero scrim is now light, not dark.** v1 put white text over a navy scrim; `_mockup/WOW Supplies Contact` ramps white in from the left and keeps the copy in ink, which is also what the homepage hero does (style.css §9). One hero pattern across the site rather than two. 3. **The Ninja Forms rules are now verified.** Ninja Forms 3.15.0 was installed locally on 16 Aug 2026 and the production database already carried form 1 ("Contact Me"), so §5 was checked against real markup — it found one bug, see the needed its own rule, found once NF was installed * locally (16 Aug 2026) — until then these rules had never been seen against * real markup. * * Two NF defaults win over the shared input rule above: a fixed height that * clipped the option text to about two thirds of a line, and a grey fill that * made the State dropdown look disabled next to the white text inputs. Height * is released to auto and the fill forced, both !important because NF's own * stylesheet is equally specific and loads later. * * appearance is left alone deliberately — stripping it would take the native * dropdown arrow with it, and NF does not supply a replacement. */ .contact-form-wrap select, .contact-form-wrap select.ninja-forms-field { height: auto !important; min-height: 0 !important; line-height: var(--wows-lh-body) !important; background-color: var(--wows-white) !important; color: var(--wows-ink) !important; } /* NF's tooltip icon is a Font Awesome glyph; without FA it renders as an empty rectangle. v1 hid it, and nothing in v2 loads FA either. */ .contact-form-wrap span.nf-help, .contact-form-wrap .fa-info-circle { display: none !important; } /* ============================================== 6. RESPONSIVE ---------------------------------------------- Theme breakpoints 1040 / 900 / 680. ============================================== */ @media (max-width: 1040px) { /* The px-ramped scrim is tuned to a 1240px container; below that the copy would sit on the photo. */ .contact-hero::before { background: linear-gradient(90deg, var(--wows-white) 0px, rgba(255, 255, 255, 0.95) 420px, rgba(255, 255, 255, 0.55) 600px, rgba(255, 255, 255, 0) 820px); } } @media (max-width: 900px) { /* * Same reasoning as style.css §17's home hero: at this width there is * no horizontal room left for a side-by-side ramp, so it flips * vertical and the copy drops onto the lower part of the photo. * Contact differs from Home in one way — the hero is a background * image on the section, not an , so the height comes from * min-height and padding rather than object-position. */ .contact-hero { align-items: flex-end; min-height: 560px; } .contact-hero::before { background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.06) 20%, rgba(255, 255, 255, 0.72) 32%, rgba(255, 255, 255, 0.97) 42%, var(--wows-white) 50%); } .contact-hero-inner > * { max-width: none; } .contact-cards-grid, .contact-about-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; } /* Form over info, rather than a 0.75fr column too narrow for a map. */ .contact-tail { grid-template-columns: 1fr; max-width: 720px; } /* Stacked, the card gets the full 720px, so the clamp's vw term stops tracking anything useful — give it a flat height with a bit more room than the sidebar version had. */ .contact-map { height: 320px; } } @media (max-width: 680px) { .contact-hero { min-height: 780px; /* v3 is a 520×724 portrait crop, already framed on the signage — the v2 358×480 crop was upscaled 1.5x+ into this box and visibly blurred at the height the H1 clearance needs (see min-height history below). At 780px this scales to ~1.08x, near enough to native that it stays sharp. */ background-image: url('../assets/hero-contact-mobile.webp') !important; background-position: 50% 0%; } /* Px stops, not %, tuned to this fixed 780px height. The v3 crop puts "WOW SUPPLIES SDN. BHD." at ~310-390px natively; at this box's ~1.08x cover scale that lands at ~334-420px. The ramp holds clear past that band and only reaches near-opaque at the H1's actual top (measured: 430px), so the signage reads before the fade instead of disappearing under it. */ .contact-hero::before { background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0px, rgba(255, 255, 255, 0.06) 340px, rgba(255, 255, 255, 0.75) 390px, rgba(255, 255, 255, 0.94) 430px, var(--wows-white) 460px); } .contact-info-section { padding: var(--wows-section) 0; } .contact-about-section { padding-bottom: var(--wows-section); } .contact-tail { padding-bottom: var(--wows-section); } .contact-form-wrap { padding: var(--wows-sp-7) var(--wows-sp-6); } } /* * `cover` (set on `.contact-hero` above, inherited from the base rule) * scales by whichever axis is tighter. The 680px block above spans * 0-680px; below ~560px that's height (~1.08x, what every px stop in it is * calibrated against) and `cover` fills edge to edge with no crop artefact. * Above 560px `cover` switches to width and zooms up to 1.31x at 680px, * pushing the signage down into the scrim's opaque band — caught by Codex * review, confirmed in-browser at 661px (real viewport for a 680px iframe * once the scrollbar is subtracted). Pinning the height only in this * narrower range keeps the scale correct there; it does mean a visible * band of --wows-tint-1 either side once the image (560px wide at this * height) is narrower than the container, but that reads as a soft edge * against the photo's sky and is a smaller defect than hiding the * signage. A separate rule, not nested inside the 680px block above: * nested @media isn't supported everywhere. */ @media (min-width: 561px) and (max-width: 680px) { .contact-hero { background-size: auto 780px; } }