Description
SummitRoof — Roofing Services & Exterior Contractor HTML5 Template
SummitRoof — Roofing Services & Exterior Contractor HTML5 Template is a premium, conversion-first HTML5 template built for roofing companies, exterior contractors and home-services brands. The kit is engineered to a token-faithful design system with 114 CSS custom properties, real photography-grade typography (Sora display + Inter body, both Open Font License) and a cinematic per-scene motion layer — everything you need to launch a credible roofing site that ranks, converts and feels intentional on every screen.
Design & theming
- 114 design tokens mirroring the Figma system — colors, spacing, radius, shadows and type — change once, updates everywhere
- Three-tone palette — ember (CTA orange), slate (cool neutrals), steel (link blue) — hand-tuned for AA contrast
- Light + dark mode — auto from system preference, toggle in the header, prefers-color-scheme aware, no flash on first paint
- Typography — Sora (display) + Inter (body) referenced with a system-sans fallback; drop the woff2 files into assets/fonts/ for self-hosted production
Motion & interaction
- Cinematic per-scene rhythm — every section is assigned a tempo (hero, brisk, walk, immersive, gravity, crescendo, resolution) for a directed feel rather than a pile of effects
- Word-level headline reveals, scroll-revealed service cards, weighted smooth scroll (desktop only), pointer-parallax hero (desktop only), branded loader with repeat-visitor skip
- GPU-only animation — transform and opacity only, CLS ~0 across the entire kit
- prefers-reduced-motion honored across every animation, smooth scroll and parallax
Technical details
- No framework, no build step — pure HTML, design-token CSS and vanilla JavaScript; file:// openable, drops into any host or CMS
- 11 modular JS files in assets/js/motion/ — each module is independent, remove any file to disable that feature
- 4-layer CSS — motion tokens, design tokens + components, reveal engine, premium experience layer
- Responsive — mobile, tablet and desktop layouts with no horizontal overflow; object-fit: cover on every image for clean crops at any ratio
- Accessibility — visible focus rings, keyboard-operable nav and FAQ, ARIA on accordions and dialogs, skip link, screen-reader-clean word reveals
- Performance — fetchpriority=”high” on hero, loading=”lazy” below the fold, ~15 KB motion footprint, no jQuery, no Bootstrap, no Swiper, no GSAP
