The concept
HVAC is the one trade whose whole job is a duality: cool and heat. RL HVAC's actual brand colors happen to map onto it perfectly — brand blue (#1A56DB) for cool, brand red (#C81E1E) for heat — so the palette does double duty as identity and metaphor. Blue carries headings, labels, and navigation; red is reserved for CTAs and heat accents; everything sits on clean white with deep navy sections for rhythm. The two temperatures literally meet in the hero: a thermostat dial that breathes between cooling and heating, tinting the hero's accents as it goes.
Aesthetically it borrows from modern utility branding — confident wordmark, generous whitespace — but the layout is pure local-service pragmatism: the phone number is the largest interactive element on every screen size, the "24-Hour Turnaround" badge (the company's signature claim) leads the trust strip, and nothing animated ever competes with either.
Typography: Inter everywhere — tight-tracked extra-bold for display, regular weights for body. One face, pushed hard through weight and scale instead of variety.
The techniques
The temperature dial (signature moment)
A single SVG: a 240° arc with a blue-to-red gradient stroke, a needle, and a live readout. A requestAnimationFrame loop eases a value t (0 = cool, 1 = heat) along a slow 14-second sine wave; hovering or dragging across the dial overrides the target for a couple of seconds, then it drifts back to auto. The arc "fills" using pathLength="100" plus stroke-dasharray, so no arc math is needed at runtime.
current += (target - current) * 0.045; // ease toward target
needle.setAttribute("transform",
"rotate(" + (-120 + t * 240) + " 150 150)");
arc.setAttribute("stroke-dasharray", (t*100) + " 100");One CSS variable tints the whole hero
The dial writes its interpolated color to --temp on the root element. The hero's eyebrow rule, the italic phrase in the headline, the dial's mode label, and a mix-blend-mode: soft-light overlay on the photo all read the same variable — one number drives a coordinated mood shift across the fold, while the phone CTA stays locked to constant brand red. Note the interpolation endpoints are lightened versions of the brand colors, because the raw brand blue and red don't clear AA contrast on the navy hero; the pure hex values live only in the static arc gradient.
document.documentElement.style
.setProperty("--temp", "rgb(" + r + "," + g + "," + b + ")");Art-directed photography
Both photos are treated with the palette instead of used raw. The hero gets a navy gradient scrim (dark on the text side, lighter over the technician) plus the live soft-light tint; the living-room detail shot gets a fixed blue-to-red multiply gradient so it reads as brand, not stock.
Staggered scroll reveals
One IntersectionObserver watches every .rv element. When a batch enters together, each gets an incrementing transition-delay (+90ms), so cards cascade instead of thudding in at once. prefers-reduced-motion skips both the observer and the dial loop — the page renders complete and calm, dial parked at "JUST RIGHT".
The map that isn't a map
The service-area graphic is a hand-drawn SVG of Orange County's shape language: hills to the northeast, coastline sweeping the bottom, two freeway curves, a dashed coverage radius with a radial-gradient pulse, and labeled city dots. It communicates "we're local and everywhere you are" faster than an embedded map, weighs ~1KB, and never phones home.
Why this converts
The pretty parts are decoration on a conversion skeleton. Every placement below is deliberate:
- The phone number appears four times before the fold ends — header pill, giant hero button, quote-section repeat, and (on mobile) the sticky call bar. A homeowner in a 100° house never hunts for it.
- Two CTAs for two temperaments: "call now" people get a tel: button; "I hate phone calls" people get a Free Quote button that scrolls to a four-field form. Both above the fold.
- The trust strip leads with the differentiator. "24-Hour Turnaround" is RL HVAC's signature promise, so it gets the badge slot ahead of the rating and license — trust cues ordered by what's unique, not by convention.
- The sticky mobile call bar means the primary action is always one thumb-tap away on the device most emergency searches happen on. Body padding ensures it never covers content.
- The 3-step process section sells certainty, not services. "Call → diagnose at a flat rate → fixed within 24 hours" answers the real anxiety: what happens after I call?
- The form asks for four things only. Every extra field costs completions; a dispatcher can get everything else on the callback. (Static demo: the form shows a thank-you state client-side — in production it wires to the client's CRM or a lead webhook.)
- Locality is layered everywhere: a 949 number, reviews signed with real OC neighborhoods, a city-chip list, and the coverage map. Local trust is the #1 ranking factor in a homeowner's head.
How it was made
Hand-coded by Tiny Mammoth — vanilla HTML, CSS, and JavaScript, written by hand. No page builders, no frameworks, no off-the-shelf themes. Two files, two photos, one font request, engineered for conversion from the first line. This one belongs to our service-template lineup, matched to a real contractor's brand and built to hand over tomorrow.