# 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, Commercial and **Industrial** 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`, attach the brand's **content document** (the page-by-page copy), and tell Claude which Innovare brand + service set you want (e.g. "Innovare Landscaping", "Innovare Builders"). Claude should confirm the brand's 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 in a browser 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="warehouse-construction.html"`).
- No inline `<style>` blocks and no per-page `<script>` logic — everything routes through the shared CSS/JS. (Small, purely-decorative inline `style="…"` on one-off elements is acceptable; component styling belongs in the stylesheet.)

**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:** `0488 773 232` → `tel:0488773232` (also the 24/7 emergency line for brands that offer one)
- **Email:** `info@innovarebuilders.com.au` → `mailto: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.

Phone and email must be live links everywhere they appear (`tel:` / `mailto:`), including the header utility bar, footer and contact page.

**Wordmark:** `INNOVARE` (Archivo 800, letter-spacing ~.16em) on the top line; the division name below in Hanken Grotesk (`DEMOLITIONS`, `COMMERCIAL`, `INDUSTRIAL`, `LANDSCAPING`…) at ~.6rem, letter-spacing ~.42em, muted uppercase. 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>` (with `preconnect`):
```html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<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 — only for brands with a 24/7 service */
```
Amber is the **only** accent — do not introduce new hues. If you need another shade, derive it in `oklch()` from the existing palette. Keep indigo + amber fixed as the group identity. Add `--danger` back only for brands that genuinely offer an emergency service.

Other layout tokens as-built: `--container:1240px`, `--narrow:880px`, `--pad:24px`, `--radius:4px`, `--shadow-sm/md/lg` (all indigo-tinted, never neutral gray), `--ease:cubic-bezier(.16,.84,.44,1)`.

### 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`; `.section-tight` for a shorter band `clamp(44px,5vw,72px)`.
- Radius `4px` (understated, industrial — not pill-rounded cards).
- Three shadow tiers, all tinted with indigo.
- 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`, 24×24 viewBox), 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-row` wraps a group. Arrow SVG inside slides on hover. (`.btn-danger` only for emergency brands.)
- **`.link-arrow`** — inline text link with sliding arrow.
- **Header:** `.utility-bar` (credentials + phone + hours) → `.nav-bar` (brand, `.nav-links`, mega menu, `.nav-cta`, `.nav-burger`). Mega menu = `.mega` / `.mega-grid` (**2–4 columns** of grouped service links, each `.mega-col` with an amber `h5` heading) + `.mega-foot`. Mobile = `.mobile-panel` + `.scrim` with collapsible `.mp-group` service list.
- **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` (`.pc-media`/`.pc-body`/`.pc-specs`), `.blog-grid`/`.blog-card` (`.bc-media`/`.bc-body`/`.bc-cat`), `.tm-grid`/`.tm-card` (testimonials).
- **`.feature-grid`** / `.feature` — bordered numbered grid (great for process/"how it works"; works on `.section-dark`; `.light` variant for light bg).
- **`.steps`** / `.step` — numbered vertical process list (counter-based, decimal-leading-zero).
- **`.check-list`**(`.two`) — amber-tick bullet list (CSS-masked check icon; works on dark).
- **`.chips`** / `.chip` — service-area tags / related-service links (icon + label).
- **`.spec-list`** — key/value striped rows (licences, specs).
- **`.data-table`** — full-width striped table with indigo header row; `td.num` for Archivo-bold figures. Used for cost ranges, temperature zones, spec matrices.
- **`.acc`** / `.acc-item` / `.acc-q` / `.acc-body` — FAQ accordion (single-open per group; JS-driven `max-height`; plus/minus icon). A `.data-table` can nest inside an `.acc-body-inner`.
- **`.note-block`** — soft-background hairline-bordered note (confidentiality notes, "these are indicative" caveats).
- **`.cta-band`** — dark centered closing CTA with amber radial glow.
- **Contact:** `.contact-grid`, `.contact-aside`, `.contact-card`, `.cc-row` (icon + label + value), `.form-card`, `.field`, `.form-row`, `.form-success`.
- **`.filter-row`** / `.filter-btn` — project category filters (drive with `data-target` + card `data-sector`).
- **`.ph`** — placeholder image box (diagonal-hatch, `.dark` variant, aspect helpers `.ph-hero/.ph-wide/.ph-sq/.ph-43`, plus `.pc-media`/`.bc-media`). Always give it a `.ph-icon` (inline SVG), a descriptive `.ph-label`, and a `.ph-tag` ("Photo placeholder").
- **Footer:** `.site-footer` → `.f-top` 4-col (brand+`.f-licences`, two link columns, `.f-contact`) → `.f-bar` (copyright + "Part of the Innovare Group" + secondary links).
- **`[data-reveal]`** — fade-up on scroll via IntersectionObserver (`data-delay="1|2|3"` to stagger; 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, utility bar trims), 560 (single column, chips wrap, utility bar hidden, tables shrink).

---

## 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 / the preview) — opening the raw file with `file://` will not load the includes. 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 touch, Esc/outside-click to close), mobile panel + scrim + collapsible groups, footer year (`#footYear`).
3. `initAccordions()` → single-open FAQ accordion with animated `max-height` (recalculates on resize).
4. `initFilters()` → project-grid category filtering via `data-sector` (a card can list multiple space-separated sectors).
5. `initForm()` → contact form validation (required fields via `data-required` + email regex), inline `.invalid` errors, swap to `.form-success` on submit. **No backend** — it's a static demo; wire to Formspree / a 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 preconnect+link, `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 (`.svc-grid` of sub-services/types) → *(optional)* `.steps` process → dark `.check-list` standards/compliance/where-we-work → *(optional)* `.data-table` cost ranges in a `.section-soft` with a `.note-block` caveat → FAQ `.acc` → related-services `.chips` → `.cta-band`. **Generate these from a structured data object** so they stay consistent — see §8.

**About** = page-hero → who-we-are prose → values `.svc-grid` → dark capability `.feature-grid` → group split → `.cta-band`.
**Contact** = page-hero → `.contact-grid` (details card + service-area chips + licences `.note-block` on the left, validated `.form-card` on the right) → closing `.cta-band`.
**FAQ** = page-hero → grouped `.acc` sections (General / Planning / Timelines & Costs / Technical / Working With Us), a `.data-table` may nest in a cost answer → `.cta-band`.
**Projects** = page-hero → confidentiality `.note-block` → `.filter-row` + `.project-grid` (cards carry `data-sector`; include one dashed "your project here" CTA card) → dark due-diligence band → `.cta-band`.
**Blog** = page-hero → one featured 2-col article card → `.blog-grid` (article cards; a "suggest a topic" dark card is a nice closer) → `.cta-band`. Article "read more" links point at the most relevant service page until posts are written.

---

## 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 the real precincts/suburbs the content uses (Wacol, Acacia Ridge, Darra, Eagle Farm, Brendale, Narangba, Yatala, Ormeau, Stapylton…).
- Keep licences/credentials accurate. Unknown numbers → *"to be confirmed"* placeholder, never fabricated. When the user later supplies them, replace every occurrence (footer, contact, FAQ) and make phone/email live links.
- 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, `.btn-danger` and `--danger`, and route CTAs to the contact form.

---

## 8. The data-driven service-page generator

Service pages share one template; only the copy changes. Build them by running a script (`run_script`) that holds:
- a small **inline-SVG icon set** keyed by name (`factory`, `warehouse`, `cold`, `tilt`, `steel`, `crane`, `fire`, `floor`, …), plus an arrow constant;
- a `TITLES` map (slug → display name) and a `RELICON` map (slug → icon) for breadcrumbs and related-service chips;
- a `page(s)` function that emits the full HTML from a per-service data object with this shape:
  ```
  { slug, metaTitle, metaDescription, eyebrow, h1, lead, heroIcon, heroLabel,
    intro:{heading, paras[]},
    caps:{eyebrow, heading, sub?, cards:[{icon,title,body}]},
    process?:{eyebrow, heading, steps:[{t,b}]},
    standards?:{eyebrow?, heading, intro?, items:[html…]},   // dark check-list
    costs?:{eyebrow?, heading, intro?, cols:[c1,c2], rows:[[k,v]…], note?, soft?},
    faqs:[{q,a}], faqHeading?,
    related:[slug…],
    cta:{heading, text} }
  ```
Because each `run_script` sandbox is fresh, either define the renderer and data in the **same** script, or persist the renderer to a scratch file and `eval(await readFile(...))` it at the top of each data batch. Generate services in batches of ~4 to stay within limits. This is exactly how the Industrial build produced its 12 service pages consistently.

---

## 9. 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. Get the **content document**.
2. Copy `assets/css/style.css` and `assets/js/main.js` from a prior Innovare build **unchanged** (retune only the division wordmark, mega-menu column count, and whether `--danger`/emergency band are present).
3. Write `includes/header.html` (mega menu grouped by the new service set; utility bar with live phone) + `includes/footer.html` (link columns + licences + live phone/email).
4. Build `index.html`, then `about/contact/faq/projects/blog`, then one service page per service via the §8 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 (if unknown) + photos as clearly-labelled placeholders for the user to supply. Remind the user the form needs a backend to actually send mail.

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