# Changelog

All notable changes to the Apex Turf landing page.

## [1.0.0] — 2026-08-24

### Added
- Initial build of the `dist/` landing page (`index.html`, `css/styles.css`, `js/main.js`) from the three
  reference mockups in `website-ideas/` and the copy/structure in `pdfs/`.
- Full-bleed diagonal split hero: fixed Residential/Landscaping pane (lion) + auto-rotating Sport Turf pane
  cycling Pádel (shark) → Football (panther) → Golf (eagle), with manual tabs and pause-on-hover/focus.
- Sticky header with scroll-spy nav highlighting and mobile hamburger menu.
- Value pillars section, 4-card specialties quick-nav grid, and four alternating-layout detail sections
  (Landscaping / Pádel / Football / Golf).
- About/trust section (Installers First, Apex Guarantee cards).
- Visual gallery/showcase strip.
- Front-end-only quote request form with client-side validation and success state.
- Footer with contact info, quick links, and social icons.
- Scroll-reveal animations, smooth-scroll-with-offset, back-to-top button.
- Copied and web-optimized image assets from `animals/` and `logos/` into `dist/assets/images/`
  (JPEG re-compression + logo resizing to cut total image weight roughly in half).

### Fixed (found via automated visual/interaction testing during the build)
- **Hero right pane not filling its full height.** The rotating Pádel/Football/Golf pane was sized to its
  text content instead of the full pane (an absolutely-positioned image nested inside a flex-aligned
  container without an explicit fill), so the background photo appeared as a small floating box instead of
  full-bleed like the reference mockups. Fixed by making the scene layers fill the pane via `inset: 0` and
  moving the pane's padding onto the scene layer itself.
- **Scroll-reveal content could get stuck invisible.** The fade-in-on-scroll effect relied solely on
  `IntersectionObserver` firing; if it didn't (or fired late), content stayed at `opacity: 0` forever.
  Added a try/catch fallback, a 2.5s force-reveal safety timeout, and a `<noscript>` rule so content is
  never permanently hidden regardless of JS timing or availability.
- **Horizontal overflow on narrow viewports (CSS Grid "blowout").** Every `grid-template-columns` track in
  the stylesheet used bare `Nfr` values. A bare `fr` track's implicit `auto` minimum can grow past the
  container's padded content box, which caused the contact section (and, latently, every other grid on the
  page) to overflow its container and clip text at narrow widths. Fixed by wrapping every fractional track
  in `minmax(0, …fr)` across the whole stylesheet (hero split, pillar/specialty/showcase/footer grids,
  detail/about/contact grids, the quote form's two-column row) rather than patching only the section where
  it was first observed.

### Known placeholders (see `README.md` → "What still needs wiring up before going live")
- Contact form has no backend/submission endpoint yet.
- Phone, email, address, and social links are placeholders (none were supplied).
- Gallery section reuses the four specialty photos in lieu of real installation photography.