KFG - Kids First Group

Goal: Ship a seasonal "winter camp" landing page for all four KFG nursery brands, each generated from its own Lovable design, pasted into the live site as a single WPBakery Raw HTML block rather than a full page template — keeping the blast radius to one page and avoiding any theme-file changes for Redwood/Odyssey/Willow.

Redwood, Odyssey, Willow followed an already-established pattern (scoped CSS wrapper class, prefixed layout classes to beat the theme's Bootstrap !important rules, explicit box-sizing/heading resets instead of loading Tailwind's preflight, which would leak into the rest of the theme).

RedwoodCOE needed additional work because its Lovable source design used a different lead-capture mechanism than the others:

• The source's enquiry form posted to a Supabase/Lovable Cloud table invisible to KFG — no Salesforce record, no email, nothing in the CRM. This was replaced with the site's real, already-live CF7 form (id="3440763"), matching its CSS class contract (largeform__row, largeform__input, largeform__cta) from the theme's own SCSS so existing form styling and validation JS would apply correctly.
• EWWW Image Optimizer lazy-load bug: after publishing, every on the page was being rewritten by EWWW to a tiny base64 placeholder plus a data-src attribute, with the real image swapped in only once JS ran (or not at all in some render paths). Combined with CSS aspect-ratio boxes, this made every image appear stretched/empty before JS caught up. Fixed with a page-scoped eio_disable_lazy_load / eio_disable_picture_webp / eio_do_lazyload filter trio in functions.php, gated to the camp page's slug only.
• Recurring padding bug (hit in four separate places): several section rules used a padding: Xrem 0 [Yrem] shorthand on an element that also carried a separate wrapper class setting padding-left/padding-right. Because both rules tied on CSS specificity, whichever was declared later in the stylesheet won outright — and the shorthand's implicit 0 for left/right silently zeroed the other rule's horizontal padding, making entire sections run edge-to-edge on mobile. This surfaced independently on the Hero, the parent-connection panel, the About section, and the form section before being made a general rule: always use explicit padding-top/padding-bottom instead of a shorthand on any element sharing specificity with a wrapper class.
• Container width mismatches: several sections used narrower max-width tiers than Lovable's actual compiled CSS (verified by measuring the live Lovable site's rendered DOM directly rather than guessing from Tailwind class names, since e.g. max-w-2xl does not correspond to the commonly assumed 32rem).
• CF7 styling conflicts with theme CSS, each caused by the theme's selectors winning on specificity or !important: input borders being stripped to 0 by a 3-class theme selector, the form's white "boxed" panel background being wiped by this block's own over-broad reset rule, the Submit button staying full-width on desktop because Bootstrap's .w-100 { width: 100% !important } couldn't be beaten without matching !important, and a :focus border-color rule losing to an unrelated higher-specificity fix made later in the same file (fixed by re-raising the focus rule's specificity to match).
• CF7 response/error message styling: this page doesn't load CF7's own base plugin stylesheet, so elements that rely on its default CSS (the screen-reader-only validation list, the response-output box, the loading spinner) rendered with no styling at all — visible as a duplicated plain-text error list and an invisible spinner. Reproduced the relevant parts of CF7's own CSS locally within the block's scope instead of depending on the missing stylesheet.