About This Template
A premium, framework-free HTML/CSS/vanilla-JS template for air conditioning, heating, and climate service companies. Frosted glass cards, sky-blue gradient washes, a warm amber accent, and an interactive temperature slider — a design that feels as cool and calm as a gentle breeze.
ZEPHYR is part of the uiuxlabz collection — a set of premium, framework-free HTML templates designed from each subject to feel genuinely unique. Open the folder, edit the text and tokens, and you have a production-ready website for an AC & climate care business.
Key Features
- ✓Interactive temperature slider — drag 60–90°F to tint the hero ice-cool ↔ sunset-warm (vanilla JS, degrades gracefully)
- ✓Frosted-glass UI — `backdrop-filter` glass cards, chips, and form on a sky-gradient ground
- ✓Readiness top bar — pulsing "Ready today" badge with 24/7 comfort-line phone
- ✓Count-up stats strip — Fraunces numerals animate from 0 on scroll
- ✓Service grid — 6 cards with icon tiles, descriptions, and topic tags
- ✓"How it works" steps — numbered 3-step process cards
- ✓Feature split — diagnostic promise with icon checklist
- ✓3-tier pricing — featured tier with ice accent + badge
- ✓Testimonials — star ratings with initial avatars
- ✓FAQ accordion — expanding items with +/- toggle
- ✓CTA band — dual-action (schedule + call)
- ✓Contact form — service type + equipment type + urgency selects, inline validation, no `alert()`
- ✓Scroll reveals — IntersectionObserver with staggered delays (`.d1`…`.d4`)
- ✓Count-up animation — stats count from 0 to target on scroll
- ✓Active nav — auto-highlight via `location.pathname`
- ✓Footer year — `[data-year]` auto-fills current year
- ✓Reduced motion — `@media (prefers-reduced-motion)` disables all animation
- ✓Original imagery — 14 source images from AirCon (`assets/img/`): `about-1/2/3/4.jpg`, `carousel-1/2.jpg`, `feature.jpg`, `service-1/2/3/4/5/6.jpg`, `icon-01..10-{light,primary}.png`