Build Guide

1 · The concept

Summit Plumbing & Air is a fictional combined plumbing + HVAC company, art-directed like a modern trades startup rather than a local-contractor template. The design brief in one line: premium industrial-modern — honest, confident, technical.

Three moves carry the whole identity:

• A hot/cold dual-theme thread. The company does two trades, so the design system encodes them as temperatures: water/plumbing is always blue, air/heat is always safety orange. Section accents, card badges, stat underlines, and even the two animated flow circuits alternate between the pair.
• Blueprint motifs. Thin schematic linework — pipe runs with rounded elbows, valve nodes, gauges, a faint drafting grid — used as decorative background, never as clip-art.
• Condensed display type over a quiet sans, set in all-caps like stencil markings on equipment.

2 · Palette & type

Type stack: Barlow Condensed 600/700 for display (the Barlow family was literally designed after truck and signage lettering — perfect for a trades brand), Inter for body copy, and IBM Plex Mono for kickers, labels, and anything that should read as a technical annotation.

Rule of thumb used throughout: orange is the action color (every primary CTA), blue is the trust color (licenses, plumbing, focus rings). Neither is ever decorative on the same element as the other — except in the flow-lines, where the contrast IS the story.

3 · The signature: animated schematic flow-lines

Every page carries SVG "pipe schematics" whose contents visibly flow. The trick is two stacked paths per circuit:

<svg class="schematic" viewBox="0 0 620 520">
  <!-- 1. the pipe itself: thin steel line -->
  <path class="pipe" d="M20 500 V300 Q20 284 36 284 H210 ..."/>
  <!-- 2. the medium inside it: dashed, animated -->
  <path class="flow f-blue" d="M20 500 V300 Q20 284 36 284 H210 ..."/>
</svg>

The flow layer is a dashed stroke whose stroke-dashoffset is animated forever in CSS — the dashes crawl along the path like water through a pipe:

.schematic .flow{
  stroke-dasharray: 10 26;          /* dash, gap */
  animation: flow-run 2.4s linear infinite;
}
@keyframes flow-run{ to{ stroke-dashoffset: -72; } }
/* -72 = 2 × (10 + 26), so the loop is seamless */

Two details make it feel engineered instead of gimmicky:

1. The pipes draw themselves in on scroll first. GSAP measures each .pipe with getTotalLength(), sets stroke-dasharray = dashoffset = length (the classic line-draw trick), then animates the offset to 0 inside a ScrollTrigger. Only after the pipe exists do the valve nodes pop in (back.out scale) and the flow layer fades up.
2. Water and air run at different speeds. Blue circuits animate at 2.4s, orange ones get a .slow class at 3.6s — two media, two viscosities. Tiny, subliminal, effective.

Everything respects prefers-reduced-motion: the CSS animation is disabled and GSAP reveals are skipped entirely.

4 · Multi-page structure

Three pages plus this guide, all plain HTML with no build step:

summit-air/
├── index.html            ← home: hero, trust strip, split trades, stats,
│                            why-us, testimonials, emergency CTA
├── services/index.html   ← Dept. 01 Plumbing + Dept. 02 HVAC + plans row
├── book/index.html       ← request form, urgency picker, area map, hours
├── guide/index.html      ← this page
└── assets/               ← one shared style.css + main.js + 8 JPEGs

Because services/, book/, and guide/ are folders, every shared asset is referenced with ../assets/… from those pages and assets/… from the home page. The nav marks the current page with aria-current="page", which the CSS styles the same as hover — one selector covers accessibility and state.

The header, footer, and GSAP boot script are duplicated verbatim across the four files — for a 4-page static showcase, duplication is simpler and more robust than client-side includes.

5 · Motion inventory

• Hero headline — words rise from an overflow:hidden line wrapper with a stagger (yPercent:110 → 0, power4.out).
• Scroll reveals — three utility classes (.rv, .rv-l, .rv-r) mapped to fade-up / slide-left / slide-right, each with an optional data-delay. GSAP only runs when html.js is set, so the site is fully readable with JavaScript off.
• Stat counters — data-count attributes tweened with a ScrollTrigger, with comma formatting and decimal support (the 4.9★ rating counts up through tenths).
• Flow-lines — the draw-then-flow sequence described above.
• Booking form — on submit, the body fades out and a success panel swaps in; its check-mark strokes itself using the same dashoffset trick as the pipes. One technique, three uses.
• Services ticker — a duplicated-content marquee moving translateX(-50%) on a loop.

6 · Imagery — art direction

All photography was generated with Higgsfield (Nano Banana 2), then resized and compressed with macOS sips (quality 72 JPEG, 1400–1920px wide). Each of the eight images came from a carefully art-directed brief — lighting, lens, palette, composition and mood specified per shot, with the slate-blue/safety-orange temperature system pinned in every brief and fake branding explicitly excluded — and iterated until the set read as one premium industrial campaign.

7 · Deploying to Netlify

The site is a static folder, so deployment is one drag or one command:

1. Drag-and-drop: go to app.netlify.com/drop and drop the summit-air folder. Done — folder-based URLs like /services/ work out of the box because each page is an index.html inside its folder.
2. CLI: npm i -g netlify-cli, then from inside the folder: netlify deploy --prod --dir .

No build command, no publish directory gymnastics, no redirects file needed. If you fork this, the only external dependencies are Google Fonts and the GSAP CDN — swap in local copies if you need it fully offline.

8 · Things worth stealing

• The two-layer pipe/flow SVG pattern — one geometry, drawn once, animated twice.
• Encoding a brand's two offerings as a temperature system instead of two logos.
• html.js-gated reveal styles: initial hidden states only apply when JS is present, so no-JS visitors get a complete page instead of an empty one.
• The urgency picker: three radio cards beat a dropdown for a decision customers make under stress — and the emergency option turns its focus ring orange.

← Back to the site