How this site
was put together.

The concept

ClearPass Smog Check is a fictional smog-check and emissions-testing station built for this portfolio. The brief called for something with a distinct energy from a full-service mechanic shop: quick-in-quick-out, digitally modern, and price-transparent — closer to a DMV kiosk than a grimy garage. That single idea drove almost every design decision that followed. Bright, even lighting instead of moody shadows. A rounded, geometric type system instead of an industrial condensed one. A single recurring badge motif — a checkmark inside a ring — standing in for the one thing customers actually want: a pass.

Palette & type

The palette is built from three ingredients: a fresh mint/teal that reads as "go," a deep navy that reads as trustworthy and official, and a lot of crisp white space so the page never feels cluttered — appropriate for a business whose whole value proposition is speed and clarity.

Type is a two-family system: Space Grotesk carries every headline and label — a geometric sans with just enough personality to feel a little techy without tipping into novelty. Inter handles body copy because it disappears at small sizes and holds up across the whole responsive range. A monospace face, JetBrains Mono, is reserved for kickers, stats, and anything that should read like a readout on a diagnostic screen — a small detail that reinforces "this is a precise, instrumented process," not a guess.

The signature motifs

Two animation ideas carry the "PASS" theme through the site rather than leaving it as a one-off hero flourish.

1. The self-drawing PASS badge

The circular checkmark badge that appears in the hero, the CTA bands, and the contact form's success state isn't a static icon — it's an SVG whose ring and checkmark strokes are set to their own path length and drawn in with stroke-dashoffset, animated by GSAP the moment it scrolls into view (or the instant a form submits). It's a small piece of motion, but it's the same gesture a driver is actually waiting for: watching something get confirmed as good.

2. The process track

The three-step "how it works" section on the home page uses a horizontal line that fills with a mint gradient as the section scrolls past, with each step's circular node lighting up in sequence. It's built with a single ScrollTrigger bound to the track's scroll progress, translated into a fill width (or height, on the stacked mobile layout) and a threshold check against each node's position. The effect mirrors the DMV-lane feeling the brand is going for — a literal, honest line from "you pulled in" to "you're done."

Multi-page structure

This is a real multi-page site, not a single scrolling page with anchor links — four independent HTML documents plus this guide, all sharing one stylesheet and one behavior script:

• index.html — Home: hero, how-it-works, trust strip, pricing teaser, testimonials, CTA
• services/index.html — every test type with who-needs-this framing, plus the full pricing table
• about/index.html — why the business exists, the facility, and the team
• contact/index.html — hours, address, a big click-to-call phone number, and a stubbed appointment form

Every subpage lives one folder level deep, so its asset and internal links are all relative with a leading ../ (for example ../assets/style.css, ../index.html), while the homepage refers to the same files without the prefix. The nav bar, phone number, and footer are duplicated verbatim in each file rather than templated — the tradeoff of plain HTML with no build step — so any copy change has to be applied in all five files at once.

Imagery & art direction

All photography on the site is AI-generated, art-directed to the brand rather than picked from stock. The brief was consistent across every shot: even, optimistic daylight rather than dramatic shadow; the mint/navy/white palette showing up in uniforms, floor markings, and signage; and a facility that looks engineered for throughput — open bays, drive-through lanes, screens showing results in plain readouts rather than cryptic gauges. A few shots (the exterior sign, the drive-in bay) picked up the checkmark badge organically, which is why the motif feels load-bearing rather than decorative.

Motion & responsiveness

Beyond the two signature pieces, the site uses a small, consistent set of GSAP + ScrollTrigger reveals — sections fade and lift in once, word-by-word hero cascades, and count-up stat numbers — all gated behind a prefers-reduced-motion check and a graceful no-JS fallback that simply shows the final state. Layout is fluid from a 375px phone up past 1440px using CSS clamp() for type and spacing rather than a large matrix of breakpoints, with overflow-x: clip set on both html and body so the full-bleed hero and badge elements can never introduce horizontal scroll.

Deploying it

Because this is plain HTML/CSS/JS with no build step, deployment is a drag-and-drop. The fastest path with Netlify:

1. Create a new site on Netlify and choose "Deploy manually" (or connect the containing Git repository if one exists).
2. Drag the clearpass-smog folder — the one containing this index.html at its root — onto the Netlify deploy target.
3. Netlify serves index.html at the domain root and each subfolder's index.html automatically at its clean path (/services/, /about/, /contact/, /guide/) — no redirect rules needed since every internal link already points at a real file.
4. Attach a custom domain once the client is ready to go live; until then, the auto-generated *.netlify.app preview URL is shareable as-is.

No environment variables, no server, no database — the appointment form is intentionally a front-end-only demo that shows a success state without sending data anywhere, which keeps this deployable anywhere that can serve static files.