Changelog

All notable changes to the Apex Turf landing page.

[1.0.0] — 2026-08-24

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).

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.

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.