Tiny Mammoth · Template Guide

How this site was built

A look inside the TipTop Appliance Repair template — the retro-showroom design, the conversion mechanics, and what makes this build different from a generic contractor site.

← Back to the site

The concept

TipTop Appliance Repair borrows from mid-century American appliance showrooms — the era of chrome trim, pastel enamel, and cheerful confidence that a machine could be fixed rather than replaced. The palette (robin's-egg blue, cream, warm chrome gray, cherry red) and the rounded display type read as optimistic and trustworthy without tipping into kitsch. It's a tone that fits the trade: appliance repair is a low-drama, high-trust service, and a homeowner staring at a dead fridge wants to feel like the problem is solvable, not like they've stumbled onto a discount operation.

Underneath the retro surface, every layout decision still serves one job: get a worried homeowner to the phone number or the quote form in under ten seconds.

The design hypothesis

Every appliance-repair visitor is silently running the same math: "Is this worth fixing, or should I just buy a new one?" Most templates in this space ignore that question and just list services. This one answers it head-on, in the second section of the page — the "Repair it, or replace it?" band — before the visitor even gets to the services grid. It states the $89 diagnostic fee (credited toward the repair), commits to giving honest replace-vs-repair advice, and frames the business as an advisor, not just a vendor. That's the bet: a business willing to say "sometimes we'll tell you to replace it" earns more calls than one that pretends every job is a save.

Why this one is unique

Seven Tiny Mammoth service templates share the same conversion skeleton (hero, sticky call bar, six services, process, reviews, area, form). What separates this build from the others is where it deliberately diverges on design axes:

Era & palette, not industry cliché

Most trade sites default to navy-and-orange "contractor" branding. This one pulls from 1950s appliance-showroom color and type instead — a bet that a homeowner trusts "friendly and established" over "aggressive and urgent" for a job that's rarely an emergency.

The anxiety question, answered first

Rather than burying repair-vs-replace reasoning in an FAQ, it gets a full section directly under the hero — second thing you see, before the services grid.

A ticket, not a testimonial carousel

The signature interaction visualizes the actual service process (diagnose → approve → fix) instead of a generic scroll-reveal on hero text. It builds confidence in the mechanism of the visit, not just the brand.

Scalloped dividers over hard section breaks

Curved, scalloped transitions between sections echo mid-century kitchen tile and counter edges — a small, consistent motif that reinforces the era without adding a single extra decorative asset to load.

Concrete advantage: because the differentiation lives in color, type, and one contained interaction — not in extra pages, extra scripts, or extra libraries — the page stays as fast and as simple to maintain as any of the other six templates, while looking and feeling like a distinct business.

The techniques

Scalloped section dividers with CSS masks

The curved break at the bottom of the hero is a single radial-gradient repeated as a background, then punched into the section edge with mask-image — no SVG asset, no extra HTTP request.

.scallop-row{
  background-image: radial-gradient(circle at 18px 0, transparent 18px, var(--cream) 19px);
  background-size: 36px 36px;
  background-repeat: repeat-x;
}

The service ticket: scroll-triggered checklist

An IntersectionObserver watches the ticket panel. Once it's 60% visible, each line gets a staggered setTimeout that adds a .checked class — flipping the checkbox to solid red and expanding a width transition on an absolutely-positioned "typed" span that sits over an invisible full-width placeholder (so the animation never reflows the layout). A "DONE TODAY" stamp fades in once all four lines are checked.

var lineObserver = new IntersectionObserver(function(entries){
  entries.forEach(function(entry){
    if (entry.isIntersecting) {
      var idx = Array.prototype.indexOf.call(lines, entry.target);
      setTimeout(function(){ entry.target.classList.add("checked"); }, idx * 220);
    }
  });
}, { threshold: 0.6 });

Under prefers-reduced-motion: reduce, the whole ticket is marked complete instantly — no timers, no motion, same information.

Duotone photo treatment

The multimeter/coils detail photo gets a palette-matched overlay (robin's-egg to ink, mix-blend-mode: multiply) so a plain stock-feeling photo reads as art-directed and on-brand, and a dark scrim under the hero photo's caption keeps text at AA contrast over a busy background.

Client-side quote form

The quote form validates natively (required + checkValidity()) and swaps to a thanks state entirely in the browser — this is a static demo, so nothing is actually submitted. In production this form posts to the client's CRM or a serverless form endpoint.

How it was made

This is a Tiny Mammoth template: hand-coded HTML, CSS, and JavaScript, no page builder, no CMS, no framework, no build step. Every section was written and laid out by hand and tuned specifically for this trade — the retro palette, the ticket interaction, and the copy are bespoke to appliance repair, not a reskinned generic template. The goal from line one was conversion: a homeowner with a dead fridge should be able to find the phone number, understand the price story, and trust the business, all before they've finished scrolling once.

Why this converts