← Back to Cardinal Roofing

Tiny Mammoth · Service Template

How this roof was built.

The concept, the techniques, and the conversion engineering behind the Cardinal Roofing template — written for the curious homeowner, the developer, and the business owner deciding whether a site like this earns its keep.

01The concept

Cardinal Roofing is a website template for a fictional three-generation roofing company in Pasadena, California. The aesthetic school is "heritage trade" — the visual language of hardware-store signage, hand-stamped inspection tags, and companies that measure themselves in decades rather than quarters. Warm charcoal, cardinal red, and paper white; a heavyweight serif (Fraunces) doing the talking; a stylized cardinal perched over a roofline as the mark.

"Roofs our fathers would sign their names to" — the whole brand hangs off that one sentence. Everything else (the 1963 founding, Marisol's morning form-reading, the transferable warranty) exists to make it believable.

But this is a service template, not an art piece. The design's single job: a homeowner with a water stain on the ceiling should trust this company and find the phone number in under ten seconds. Every decorative decision defers to that.

02The techniques

The parallax roofline dividers

Section transitions use an SVG skyline of gables and chimneys — one seamless 2400px path tiled twice into a 4800px strip. Two layers (a faint "background block" of houses offset 8px lower, and a full-opacity foreground) slide horizontally at different speeds as you scroll, so the town appears to drift past between sections. The modulo keeps the offset inside one tile so the strip never runs out:

var x = (scrollY * speed) % 2400;
if (x > 0) x -= 2400;      // clamp into [-2400, 0]
track.style.transform =
  "translate3d(" + x + "px,0,0)";

Updates are gated behind requestAnimationFrame with a ticking flag, and the whole system switches off under prefers-reduced-motion — the dividers simply become static skylines.

The inspection-tag panel

The free-inspection offer is styled as a physical hang tag: a punched hole built from an inset box-shadow circle, a dashed inner rule via an ::after pseudo-element, a curved SVG string attaching it to the page, and a 1.4° rotation that eases upright on hover. Skeuomorphism used sparingly, for one element, to make the offer feel like a thing you could hold.

Art-directed photography

Both photos are treated with the palette rather than dropped in raw. The hero wears a two-part warm-charcoal scrim (a 76° diagonal gradient plus a bottom fade) so white text passes AA contrast at every point it sits. The aerial shot in the "Why Cardinal" band gets a multiply blend-mode wash so its blues sit down into the charcoal section around it.

Type and texture

Fraunces at 900 weight with tight tracking (−0.022em) does the display work; the body stays on the system sans stack for speed and neutrality. A fixed full-page SVG feTurbulence grain at 3% alpha keeps the paper background from feeling like a flat hex value.

Choreographed reveals

A single IntersectionObserver adds an .in class as elements enter the viewport; staggering comes from five delay utility classes (.d1–.d5) rather than per-element JS timers. Elements animate once, then the observer lets go of them.

03Why this converts

The prettiness is in service of a funnel. If you're a business owner evaluating this template, these are the engineered decisions:

  • The phone number appears five times — header, hero button, inspection tag, footer, and the mobile call bar — and every instance is a live tel: link. A homeowner on a phone never has to type your number.
  • Trust strip directly under the headline: star rating with review count, license number, and years in business sit above the fold, because "can I trust these people on my house" is answered before any scrolling happens.
  • A sticky mobile call bar pins "Call Now" and "Free Inspection" to the bottom of every phone screen. Most emergency roofing traffic is mobile; the primary action is always one thumb away. Body padding ensures it never covers content.
  • The offer is "free inspection," not "contact us." A concrete, zero-risk first step with a named deliverable (21 points, photos, written findings) out-converts a vague contact form — and it's the natural first step of a quote-driven trade.
  • The form asks four things. Name, phone, a dropdown, an optional message. Every additional field costs completions; everything else can be asked on the callback. The "Marisol reads them at 6:45" line answers the silent question — will anyone actually see this?
  • Locality everywhere: a 626 phone number, Fair Oaks Avenue, Bungalow Heaven and Madison Heights in the reviews, a twelve-city service chip list. For home services, "they work on my street" is the strongest trust cue there is.

Note: this is a static template, so the quote form shows a client-side "thank you" state only. In production it wires to the client's CRM (webhook or form endpoint) with the same markup.

04How it was made

Hand-coded HTML, CSS and JavaScript — no page builders, no frameworks, no off-the-shelf themes. One HTML file, one stylesheet in its head, one script at its foot. The only external requests are two Google Fonts files. Every choice, from the roofline animation to the four-field form, is engineered for conversion rather than borrowed from a template library.