/* ============================================================================ custom.css — site-specific overrides layered on top of the Webflow CSS. Loaded AFTER the Webflow stylesheet on every page, so rules here win. Put all hand edits here rather than modifying the (minified) Webflow CSS. ========================================================================== */ /* The booking-form wrapper lost Webflow's ".w-form" class when we detached Webflow's JS form handler (see scripts/localize.mjs). Restore its spacing. */ .form-wrap { margin: 0 0 15px; } /* --------------------------------------------------------------------------- Sticky footer / full-viewport pages. Short pages (thank-you, book, rates) used to leave the white page background showing under the dark footer. Make the body a full-height flex column so the footer always sits at the bottom of the viewport, and let the dark contact/ thank-you section grow to fill any leftover space. The body background is set its natural page background (#f5f5f5) fills any gap, which is expected. NOTE: do NOT set a background-color here — the site's page background is .body { background-color:#f5f5f5 } and transparent sections (e.g. the FAQ ".textintro") rely on it; overriding it darkens those sections. -------------------------------------------------------------------------- */ body.body { display: flex; flex-direction: column; min-height: 100vh; } /* The dark image section (contact form / thank-you) expands to fill height. */ .contactfooter { flex: 1 0 auto; } /* Making a flex column turned its sections into flex items. The hero is an EMPTY section whose image is a CSS background, and its "margin: 0 auto" centering disables flex's default stretch — so it collapsed to 0 width and the background stopped painting. Force full width (still capped by its max-width). */ .heroimage { width: 100%; } /* Footer never shrinks and is pinned to the bottom on pages with no growing section above it. */ .footer { flex-shrink: 0; margin-top: auto; } /* Book + thank-you pages: vertically center the contact section's content within its full-height section (the section is a flex row, so align-items = vertical). */ .centered-contact .contactfooter { align-items: center; } /* Thank-you page "return home" button spacing. */ .thankyou .thankyou-home { display: inline-block; margin-top: 1rem; }