resets this — it sits just under the hero. */ margin: 48px 0 22px; } main > .section-title:first-child { margin-top: 8px; } /* ---------- 10. Info band (split colour panel) ---------- */ .info-band { margin-top: 24px; /* Dark blue on the left, light panel on the right (split at 45%). */ background: linear-gradient( 90deg, var(--c-blue-deep) 0, var(--c-blue) 45%, var(--c-panel) 45%, var(--c-panel) 100% ); border-radius: var(--radius); min-height: 124px; display: grid; grid-template-columns: 45% 55%; overflow: hidden; box-shadow: var(--shadow-soft); } .info-band h2 { margin: 0; color: var(--c-white); font-size: var(--fs-heading); line-height: 1.1; padding: 32px 32px 10px; text-transform: uppercase; } .info-band p { margin: 0; padding: 34px 32px; color: var(--c-blue-deep); font-size: var(--fs-lead); font-weight: var(--fw-extrabold); line-height: 1.55; } .info-band a { color: var(--c-blue-bright); font-weight: var(--fw-black); text-decoration: underline; } /* ---------- 11. Gallery (recent work) ---------- */ .recent { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); margin-top: 24px; } .recent img { display: block; width: 100%; height: 190px; object-fit: cover; border-radius: 7px; box-shadow: var(--shadow-soft); } /* ---------- 11b. Brand logos ---------- */ .brands { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap); margin-top: 24px; } /* Each logo sits centred on its own white tile, capped in height so the differently-shaped brand marks line up to a consistent size. */ .brand { flex: 0 1 calc((100% - 2 * var(--gap)) / 3); background: var(--c-white); border-radius: var(--radius); box-shadow: var(--shadow-soft); display: flex; align-items: center; justify-content: center; padding: 22px 24px; min-height: 116px; } .brand img { max-width: 100%; max-height: 46px; width: auto; height: auto; } /* Waterco is a stacked (two-line) mark, so the shared 46px height cap left it looking small next to the wide wordmarks — give it a taller cap to match. */ .brand img.logo-waterco { max-height: 72px; } /* ---------- 12. Footer ---------- */ footer { background: var(--c-navy); color: var(--c-white); margin-top: 24px; padding: 30px 38px; display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 24px; font-size: var(--fs-body); } .footer-logo { font-size: var(--fs-logo); font-weight: var(--fw-black); color: var(--c-white); line-height: 0.85; } .footer-title { font-weight: var(--fw-black); margin-bottom: 9px; } footer a, footer p { display: block; margin: 5px 0; color: var(--c-footer-link); } /* ---------- 12b. Quote form ---------- */ .quote-intro { max-width: 720px; margin: 0 auto 22px; text-align: center; color: var(--c-text-muted); font-size: var(--fs-text); line-height: 1.6; } .quote-form { max-width: 720px; margin: 0 auto; background: var(--c-white); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: 28px; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .field { display: flex; flex-direction: column; } /* Fields that should span the full width of the form */ .field.full { grid-column: 1 / -1; } .field label { font-size: var(--fs-small); font-weight: var(--fw-extrabold); color: var(--c-blue-deep); text-transform: uppercase; letter-spacing: 0.3px; margin-bottom: 6px; } .req { color: var(--c-blue-bright); } .field input, .field select, .field textarea { width: 100%; font-family: var(--font-base); font-size: var(--fs-text); color: var(--c-navy); background: var(--c-white); padding: 12px 14px; border: 1px solid #cdd9ea; border-radius: var(--radius-sm); } .field textarea { min-height: 130px; resize: vertical; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--c-blue-bright); box-shadow: 0 0 0 3px rgba(11, 99, 199, 0.15); } /* Submit button — full-width version of .btn */ .btn-block { display: block; width: 100%; margin-top: 22px; border: 0; cursor: pointer; text-align: center; } .form-note { max-width: 720px; margin: 14px auto 0; text-align: center; font-size: var(--fs-small); color: var(--c-text-muted); } .form-note a { color: var(--c-blue-bright); font-weight: var(--fw-black); } /* ---------- 13. Responsive layout ---------- */ /* Tablet and below */ @media (max-width: 850px) { main { padding: 22px 18px 40px; } .section-title { margin: 34px 0 18px; } .header { /* Keep a single fixed-height bar: logo on the left, hamburger on the right. The sticky header is the containing block for the dropdown. */ gap: 15px; padding: 0 15px; } .nav-toggle { display: flex; } /* The standalone header CTA gives way to the in-menu one on mobile. */ .header > .quote { display: none; } /* Nav collapses into a full-width panel that drops below the header. */ .nav { position: absolute; top: 100%; left: 0; right: 0; display: none; flex-direction: column; align-items: stretch; gap: 0; background: var(--c-white); border-top: 1px solid #e3ebf6; box-shadow: var(--shadow-header); padding: 6px 0; } .nav.open { display: flex; } .nav a { /* Full-width tappable rows; drop the forced two-line labels. */ padding: 14px 22px; text-align: left; white-space: normal; border-bottom: 0; font-size: var(--fs-body); } .nav a.active { border-bottom: 0; background: var(--c-panel); } .nav .quote-mobile { display: block; margin: 8px 22px 6px; text-align: center; background: var(--c-blue); color: var(--c-white); border-radius: var(--radius-xs); padding: 13px 18px; font-size: var(--fs-nav); font-weight: var(--fw-black); } .hero h1 { font-size: 32px; } .home-grid, .services, .recent { grid-template-columns: 1fr 1fr; } .info-band { grid-template-columns: 1fr; background: var(--c-blue-deep); } .info-band p { background: var(--c-panel); } .topbar { padding: 0 15px; } .hero { /* Tablet: text column is still width-capped, so all heroes share a constant height here too — lock them level just above the tallest. */ min-height: 400px; padding: 35px 20px; } footer { grid-template-columns: 1fr 1fr; } } /* Large phones — shrink the top bar so phone and email fit on one line */ @media (max-width: 620px) { .topbar { font-size: var(--fs-nav); padding: 0 14px; } } /* Phones — stack everything into a single column */ @media (max-width: 560px) { .home-grid, .services, .recent, footer, .form-grid { grid-template-columns: 1fr; } .buttons { flex-direction: column; } .brand { flex-basis: calc((100% - var(--gap)) / 2); } } /* ============================================================ 14. Per-page images Each page uses two background images: --hero = the wide banner behind the page heading --tile = the small image strip on the service cards Gallery photos are real tags in the HTML (so they can lazy-load and carry alt text), not CSS backgrounds. The files below are web-optimised copies generated from the untouched originals in Fortbubble/original-images/ by the script Fortbubble/optimize-images.ps1 — edit and re-run that script rather than re-saving these by hand. ============================================================ */ .page-home { --hero: url("images/hero-home.jpg"); --tile: url("images/pool-backyard.jpg"); } .page-quote { --hero: url("images/hero-quote.jpg"); --tile: url("images/pool-backyard.jpg"); } .page-servicing { --hero: url("images/hero-servicing.jpg"); --tile: url("images/pool-infinity-spa.jpg"); } .page-installation { --hero: url("images/hero-installation.jpg"); --tile: url("images/pool-sunset-firebowls.jpg"); } .page-renovations { --hero: url("images/hero-renovations.jpg"); --tile: url("images/renovation-resurface.jpg"); } .page-landscaping { --hero: url("images/hero-landscaping.jpg"); --tile: url("images/pool-sunken-lounge.jpg"); } .page-heating { --hero: url("images/hero-heating.jpg"); --tile: url("images/pool-night-villa.jpg"); }