# CLAUDE.md — Innovare Group Website Build Kit

Permanent project instructions for building an **Innovare Group** brand website. Read this fully before editing anything. This is a portable, reusable blueprint distilled from the Innovare Demolitions and Innovare Commercial builds — follow it so every Innovare Group site shares one architecture, one design language, and one set of business facts.

> **How to use this file:** Start a new project, attach this `CLAUDE.md`, and tell Claude which Innovare brand + service set you want (e.g. "Innovare Landscaping", "Innovare Builders"). Claude should ask you for the brand's specific service list and any facts that differ from the group defaults below, then build the site exactly to the patterns here.

---

## 1. What we build

A **multi-page static marketing website** — plain HTML, one CSS file, one JS file. No framework, no build step, no bundler, no npm. It must open by double-clicking `index.html` and deploy to **cPanel shared hosting** by uploading the folder as-is.

**Non-negotiable rules:**
- Pure static: only `.html`, `.css`, `.js`, fonts via Google Fonts CDN, and image assets.
- Pages live **flat in the project root** (`index.html`, `about.html`, `contact.html`, `service-name.html`…).
- **One** stylesheet: `assets/css/style.css`. **One** script: `assets/js/main.js`.
- Header and footer are **shared includes** fetched at runtime (see §5), so nav/footer are edited in one place.
- Every internal link is a relative URL ending in `.html` (e.g. `href="asbestos-removal.html"`).
- No inline `<style>` blocks and no per-page `<script>` logic — everything routes through the shared CSS/JS.

**Folder structure:**
```
/
├── index.html
├── about.html
├── contact.html
├── faq.html
├── projects.html
├── blog.html
├── <service-1>.html … <service-n>.html
├── includes/
│   ├── header.html
│   └── footer.html
└── assets/
    ├── css/style.css
    └── js/main.js
```

---

## 2. Brand facts (Innovare Group defaults)

The group is a family of licensed construction / property-services businesses under a **single owner-operator**, operating across **Brisbane, Gold Coast and South East Queensland**. Same contact details across all brands unless told otherwise:

- **Phone (also 24/7 emergency):** `0488 773 232` → `tel:0488773232`
- **Email:** `info@innovarebuilders.com.au`
- **Office:** `29/97 Creek St, Brisbane City QLD 4000`
- **Hours:** Mon–Fri, 7:00am – 5:00pm
- **QBCC Licence:** `15514239`
- **NSW Builder Licence:** `474965C`
- Brand-specific licences (e.g. a demolition or asbestos licence) — **ask the user**; if not supplied, render as the literal text *"to be confirmed"*, never invent a number.

**Wordmark:** `INNOVARE` (Archivo 800, letter-spacing ~.16em) on the top line; the division name below in Hanken Grotesk (`DEMOLITIONS`, `COMMERCIAL`, `LANDSCAPING`…) at ~9.5px, letter-spacing ~.42em, muted. Logo mark = two vertical bars, one indigo (`--ink`) + one amber (`--amber`).

Footer always notes **"Part of the Innovare Group."**

---

## 3. Design system

### Fonts
Google Fonts, loaded in every page `<head>`:
```html
<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800&family=Hanken+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
```
- **Archivo** → all headings + numeric/stat display (weights 700–800, tight letter-spacing).
- **Hanken Grotesk** → body, labels, eyebrows, nav.

### Color tokens (CSS `:root`, never use raw hex in markup)
```css
--ink:        #17146E;  /* brand indigo — headings, logo, dark buttons, icons */
--ink-deep:   #0E0C3D;  /* darkest indigo — utility bar, hero, footer, dark sections */
--ink-2:      #2A2685;  /* secondary indigo — hovers, links, focus rings */
--amber:      #EBA53C;  /* THE accent — CTAs, eyebrow rule, hover bars */
--amber-dark: #D4912E;  /* amber hover / eyebrow text */
--paper:      #ffffff;
--soft:       #F4F3EF;  /* warm off-white band (.section-soft) */
--tint:       #EDECF5;  /* light indigo tint — icon chips, placeholders */
--line:       #E2E0EC;  /* hairline borders */
--text:       #2A2740;  /* body text */
--muted:      #6B6880;  /* secondary text */
--danger:     #C0392B;  /* emergency red — used sparingly */
```
Amber is the **only** accent — do not introduce new hues. If you need another shade, derive it in `oklch()` from the existing palette. For a non-demolition brand you may retune the emergency red out if there's no emergency service, but keep indigo + amber fixed as the group identity.

### Type scale
- `h1` clamp(2.5rem, 5.2vw, 4.1rem), 800, letter-spacing -.025em
- `h2` clamp(1.85rem, 3.4vw, 2.85rem), 800
- `h3` clamp(1.25rem, 1.8vw, 1.55rem), 700
- `.lead` clamp(1.05rem, 1.5vw, 1.28rem)
- Body 17px / line-height 1.7

### Spacing / shape
- Container `max-width:1240px`; narrow reading column `880px`; pad `24px`.
- Sections `padding: clamp(60px,8vw,112px) 0`.
- Radius `4px` (understated, industrial — not pill-rounded cards).
- Three shadow tiers `--shadow-sm/md/lg`, all tinted with indigo, never neutral gray.
- Motion easing: `cubic-bezier(.16,.84,.44,1)`.

### Design ethos
Confident, licensed, trustworthy — **not** flashy. Generous white space, hairline borders, indigo/amber restraint. Avoid AI-slop tropes: no rainbow gradients, no emoji, no left-border-accent rounded callout cards, no Inter/Roboto. Icons are inline stroked SVG (1.6 stroke, `currentColor`), never icon fonts or emoji. Imagery uses labelled `.ph` placeholders until the user supplies real photos.

---

## 4. Component library (all defined in `assets/css/style.css`)

Reuse these — do not invent new component classes without need:

- **`.eyebrow`** — uppercase amber kicker with a 26px amber rule before it. `.light` for dark bg, `.center` to center.
- **`.section-head`** (`.center`) — eyebrow + h2 + muted intro paragraph.
- **Buttons:** `.btn` + `.btn-primary` (amber), `.btn-dark` (indigo), `.btn-ghost`, `.btn-light`, `.btn-outline-light` (on dark), `.btn-danger` (emergency). Arrow SVG inside slides on hover.
- **`.link-arrow`** — inline text link with sliding arrow.
- **Header:** `.utility-bar` (credentials + emergency line) → `.nav-bar` (brand, `.nav-links`, mega menu, `.nav-cta`, `.nav-burger`). Mega menu = `.mega` / `.mega-grid` (4 columns of grouped service links) + `.mega-foot`. Mobile = `.mobile-panel` + `.scrim`.
- **Hero:** `.hero` (homepage, 2-col with `.trust` stat row) and `.page-hero` (interior; add `.with-media` for a 2-col hero with placeholder). `.crumb` breadcrumb inside.
- **`.trust-strip`** — centered row of credential items with `.ts-sep` dividers.
- **Cards:** `.svc-grid`(`.two`) of `.svc-card` (icon chip + h3 + copy + `.more` link; amber top-rule on hover). `.project-grid`/`.project-card`, `.blog-grid`/`.blog-card`, `.tm-grid`/`.tm-card` (testimonials).
- **`.feature-grid`** / `.feature` — bordered numbered grid (great for process/"how it works", works on `.section-dark`).
- **`.steps`** / `.step` — numbered vertical process list (counter-based).
- **`.check-list`**(`.two`) — amber-tick bullet list.
- **`.chips`** / `.chip` — service-area tags / related-service links.
- **`.spec-list`** — key/value striped rows (licences, specs).
- **`.acc`** / `.acc-item` / `.acc-q` / `.acc-body` — FAQ accordion (single-open per group; JS-driven).
- **`.emergency-band`** — red full-width callout with phone number (only for brands with an emergency service).
- **`.cta-band`** — dark centered closing CTA with amber radial glow.
- **Contact:** `.contact-grid`, `.contact-card`(`.emergency`), `.cc-row`, `.form-card`, `.field`, `.form-row`, `.form-success`, `.steps`.
- **`.filter-row`** / `.filter-btn` — project category filters.
- **`.ph`** — placeholder image box (diagonal-hatch, `.dark` variant, aspect helpers `.ph-hero/.ph-wide/.ph-sq/.ph-43`, `.pc-media`, `.bc-media`). Always give it a descriptive `.ph-label` + "Photo placeholder" `.ph-tag`.
- **Footer:** `.site-footer` → `.f-top` 4-col (brand+licences, two link columns, `.f-contact`) → `.f-bar` (copyright + secondary links).
- **`[data-reveal]`** — fade-up on scroll via IntersectionObserver (fails open if unsupported / reduced-motion).

**Responsive breakpoints:** 1024 (heros + grids collapse to 1–2 col, hero media moves above copy), 860 (nav → burger, splits stack), 560 (single column, chips wrap, emergency band stacks).

---

## 5. The includes mechanism (`assets/js/main.js`)

Header/footer are injected at runtime so they live in one file each.

**In every page**, place these where the header and footer go:
```html
<div data-include="header"></div>
...
<div data-include="footer"></div>
```
`main.js` fetches `includes/header.html` / `includes/footer.html`, replaces the placeholder node with the fetched markup, and *then* wires up nav behavior. Because it uses `fetch`, pages must be viewed over `http(s)` (cPanel, or a local server) — this is expected and fine for deployment.

**`main.js` responsibilities (single IIFE, `'use strict'`, ES5-safe, no libraries):**
1. `loadIncludes()` → fetch + inject header/footer, return a Promise.
2. After includes resolve: `initNav()` → mega-menu (hover on desktop, click on mobile, Esc/outside-click to close), mobile panel + scrim, footer year (`#footYear`).
3. `initAccordions()` → single-open FAQ accordion with animated `max-height`.
4. `initFilters()` → project-grid category filtering via `data-sector`.
5. `initForm()` → contact form validation (required + email regex), inline `.invalid` errors, swap to `.form-success` on submit (no backend — it's a static demo; wire to a real handler/Formspree/cPanel mail script at deploy).
6. `initReveal()` → IntersectionObserver for `[data-reveal]`.

**Active nav state:** each `<body>` sets `data-page="home|about|services|projects|blog|faq|contact"`; CSS highlights the matching nav item. All service pages use `data-page="services"`.

---

## 6. Page templates & patterns

**Every page** = `<!DOCTYPE html>` → `<head>` (charset, viewport, title, meta description, Google Fonts, `assets/css/style.css`) → `<body data-page="…">` → `<div data-include="header">` → `<main>…</main>` → `<div data-include="footer">` → `<script src="assets/js/main.js" defer>`.

**SEO:** unique `<title>` (`Primary Keyword | Brand`) and `<meta name="description">` per page. Use the content doc's supplied meta titles/descriptions verbatim when provided.

**Homepage** = hero (with `.trust` stats) → `.trust-strip` → why-choose split (`.check-list two`) → services `.svc-grid` → dark "how it works" `.feature-grid` → [emergency band if applicable] → service-area split with `.chips` → testimonials `.tm-grid` → `.cta-band`.

**Service page** (the workhorse — one per service) = `page-hero.with-media` → intro prose (`.container-narrow.prose`) → `.section-soft` cards (2–3 `.svc-card` describing sub-services/types) → `.steps` process → dark `.check-list two` (compliance / cost factors / who we help) → FAQ `.acc` on `.section-soft` → related-services `.chips` → `.cta-band`. Generate these from a structured data object so they stay consistent (see the Demolitions build's `run_script` generator as the reference implementation).

**About** = page-hero → who-we-are prose → licences `.spec-list` → team split → dark safety `.check-list` → group prose → FAQ → cta.
**Contact** = page-hero → `.contact-grid` (emergency card + details card + licences card on the left, validated `.form-card` on the right) → "what to include" `.check-list` → FAQ.
**FAQ** = page-hero → one big `.acc` → cta.
**Projects** = page-hero → `.filter-row` + `.project-grid` (cards carry `data-sector`) → dark documented-outcomes `.acc` → cta.
**Blog** = page-hero → `.blog-grid` (6 article cards linking to relevant service pages) → cta.

---

## 7. Content rules

- Write **real, specific copy** from the supplied content document — never lorem ipsum or padding. If a section would be filler, cut it.
- Localize to SEQ: name real suburbs (Annerley, Wynnum, Coorparoo, Southport, Nerang…) where the content does.
- Keep licences/credentials accurate. Unknown numbers → *"to be confirmed"* placeholder, never fabricated.
- Testimonials: mark clearly as representative unless the user supplies real, consented quotes.
- Emergency emphasis only for brands that genuinely offer 24/7 response; otherwise drop the `.emergency-band`, the utility-bar emergency line, and `.btn-danger`.

---

## 8. Workflow for a new Innovare brand site

1. Confirm with the user: **which brand**, the **exact service list** (→ mega-menu groups + one page each), any **facts that differ** from §2, whether there's an **emergency service**, and whether they'll supply photos.
2. Copy `assets/css/style.css` and `assets/js/main.js` from a prior Innovare build **unchanged** (retune only the emergency red / division wordmark if needed).
3. Write `includes/header.html` (mega menu grouped by the new service set) + `includes/footer.html` (link columns + licences).
4. Build `index.html`, then `about/contact/faq/projects/blog`, then one service page per service (data-driven generator).
5. Verify: includes load, mega menu + mobile panel + accordions + form + filters work, no console errors, responsive at 1024/860/560.
6. Leave licence numbers + photos as clearly-labelled placeholders for the user to supply.

Keep the architecture identical across brands — the whole point is a consistent, maintainable Innovare Group web presence.
