# CLAUDE.md — Innovare Commercial Website

Permanent project instructions. Read this fully before editing anything. Every rule here is derived from the existing codebase — follow it so the site stays consistent across sessions.

---

## 1. Project Overview

**What this is:** A 20-page marketing website for **Innovare Commercial**, a licensed commercial fitout and construction company serving Brisbane, the Gold Coast and South East Queensland. The commercial division of the Innovare Group.

**Primary goals (in priority order):**
1. Trust & credibility (licensing, compliance, EEAT)
2. Showcasing project work
3. Lead generation / enquiries
4. SEO-friendly content depth

**Tech stack:** Pure static HTML + CSS + vanilla JavaScript. **No framework, no build step, no PHP** (PHP may be added later only for the contact-form mail handler). Designed to deploy to **cPanel shared hosting** by uploading the files as-is.

**Critical hosting note:** The global header and footer are injected at runtime via `fetch()` of files in `includes/`. This means the site **must be served over HTTP(S)** (which cPanel does automatically). Opening a page directly from disk as `file://` will fail to load the header/footer due to the browser's fetch/CORS rules. Always test through a served preview, never a raw file open.

**Business facts (use verbatim — do not paraphrase or invent new ones):**
- Phone: **0488 773 232** (tel link: `tel:0488773232`)
- Email: **info@innovarebuilders.com.au**
- Office: **29/97 Creek St, Brisbane City QLD 4000**
- Licences: **QBCC Contractor Licence 15514239** and **NSW Builder Licence 474965C**
- Brand name on-site: **Innovare Commercial** (the project file is named "Innovare Builders website" but the brand shown to users is always "Innovare Commercial")
- Office hours: Mon–Fri, 7:00am – 5:00pm

---

## 2. Design Philosophy

- **Trust-first, premium, restrained.** This is a licensed builder's site — it must read as credible and established, not flashy. No AI-slop tropes: no rainbow gradients, no emoji, no rounded-corner-plus-left-border-accent cards, no decorative SVG illustrations of people/buildings.
- **Compliance and licensing are surfaced everywhere** as trust signals (top utility bar, footer, contact page, about page).
- **Content depth is a feature**, not a liability — pages are long, structured and genuinely informative for SEO and EEAT. Do not strip out content to "tidy up."
- **Sharp, architectural feel:** small border radius (4px), thin lines, deep indigo + warm amber, generous whitespace, confident large headings.
- **Inline-SVG icons only** — line-style, 1.5–1.8 stroke weight, `currentColor`. Never icon fonts, never emoji.

---

## 3. Brand Guidelines

- Logo is a CSS construct (no image file): two stacked rectangles — `.mark .b1` (indigo) and `.mark .b2` (amber) — next to a two-line wordmark: **INNOVARE** (Archivo 800, letter-spacing .16em) over **COMMERCIAL** (Hanken Grotesk 600, letter-spacing .42em, muted). Reuse the existing `.brand` markup; don't redraw it.
- Tone of voice: professional, direct, practical, honest. Plain Australian English (e.g. "fitout", "make good", "shopfitting", "practical completion"). Mentions specific suburbs (Brisbane CBD, Fortitude Valley, Chermside, Southport, Robina, etc.) for local SEO.
- Always reference real standards by name (NCC/BCA, AS 1428, FSANZ, QBCC, Queensland Health, NQF) — never vague "industry standards."

---

## 4. Color System

Defined as CSS custom properties in `:root` in `assets/css/style.css`. **Always use the token, never a raw hex in page markup.** Look up the token here before using `var(--*)`:

| Token | Value | Use |
|---|---|---|
| `--ink` | `#17146E` | **Primary brand indigo.** Headings, logo, primary dark buttons, icons. The client's mandated brand color. |
| `--ink-deep` | `#0E0C3D` | Darkest indigo. Utility bar, hero backgrounds, footer, dark sections. |
| `--ink-2` | `#2A2685` | Secondary indigo. Hovers, links, focus rings. |
| `--amber` | `#EBA53C` | **Accent / action.** Primary CTA buttons, eyebrow rules, accent dots, hover bars. |
| `--amber-dark` | `#D4912E` | Amber hover state, eyebrow text. |
| `--paper` | `#ffffff` | Default page background. |
| `--soft` | `#F4F3EF` | Warm off-white band — alternating section background (`.section-soft`). |
| `--tint` | `#EDECF5` | Light indigo tint — icon chips, placeholder fills, `.section-tint`. |
| `--line` | `#E2E0EC` | Default border / divider color. |
| `--text` | `#2A2740` | Body text. |
| `--muted` | `#6B6880` | Secondary/supporting text. |

**Rules:**
- Brand indigo `#17146E` is the client's specified color — it is `--ink` and must not be altered.
- Amber is the only accent. Do not introduce a third accent hue.
- On dark sections, text is `#fff` / `rgba(255,255,255,.72)` / `rgba(255,255,255,.6)`; the eyebrow uses `.eyebrow.light` (amber).
- If you genuinely need a new shade, derive it in `oklch` from the existing palette — never invent an unrelated color.

---

## 5. Typography Scale

**Fonts (Google Fonts, loaded in every page `<head>`):**
- **Archivo** (500/600/700/800) — headings, logo, numbers, accordion questions. Set via `font-family:'Archivo'`.
- **Hanken Grotesk** (400/500/600/700) — body, UI, buttons, nav. The `body` default.

Never substitute Inter/Roboto/Arial. Both families must be present in the `<head>` font `<link>` of any new page.

**Scale (from `style.css`, all fluid via `clamp()`):**
| Class/El | Size | Weight | Notes |
|---|---|---|---|
| `h1`, `.h1` | `clamp(2.5rem, 5.2vw, 4.1rem)` | 800 | letter-spacing -.025em |
| `h2`, `.h2` | `clamp(1.85rem, 3.4vw, 2.85rem)` | 800 | letter-spacing -.02em |
| `h3`, `.h3` | `clamp(1.25rem, 1.8vw, 1.55rem)` | 700 | |
| `.lead` | `clamp(1.05rem, 1.5vw, 1.28rem)` | 400 | line-height 1.6 |
| body | `17px` (16px under 560px) | 400 | line-height 1.7 |
| `.eyebrow` | `12.5px` | 700 | uppercase, letter-spacing .16em, amber, with leading rule. Add `.light` on dark bg, `.center` to center. |

Headings are `--ink` by default and `#fff` inside `.section-dark`/`.hero`/`.cta-band`. Use `text-wrap: pretty` where helpful.

---

## 6. Spacing System

- Layout max width: `--maxw: 1240px` via `.container`; narrow text columns use `.container-narrow` (880px). Horizontal padding: `--pad: 24px`.
- Vertical section rhythm: `section { padding: clamp(60px, 8vw, 112px) 0; }`. Don't hand-set section vertical padding — use the `<section>` element.
- Border radius: `--radius: 4px` everywhere (cards, buttons, inputs, placeholders). Pills/chips use `100px`. Keep corners sharp — do not increase the radius.
- Grid/flex gaps are explicit (commonly 14–26px for cards, 40–60px for split layouts). **Always lay out groups with flex/grid + `gap`** — never rely on inline-block whitespace or per-element margins.
- Shadows: `--shadow-sm`, `--shadow-md`, `--shadow-lg` (all soft, indigo-tinted, large negative spread). Use `--shadow-md` for card hover lift.
- Standard easing: `--ease: cubic-bezier(.16,.84,.44,1)`.

---

## 7. Component Library

All components are CSS classes in `assets/css/style.css`. Reuse them; do not reinvent. Key components:

- **Buttons:** `.btn` + one of `.btn-primary` (amber), `.btn-dark` (indigo), `.btn-ghost` (outline), `.btn-light` (white, for dark bg), `.btn-outline-light` (outline on dark). Most include an inline arrow SVG that slides on hover. `.link-arrow` is the inline text link with sliding arrow.
- **Header:** `.site-header` = `.utility-bar` (licences + contact) + `.nav-bar` (logo, `.nav-links`, CTA, burger) + `.mega` services dropdown + `.mobile-panel`. Lives in `includes/header.html`. Edit there, never per-page.
- **Footer:** `.site-footer` with `.f-top` (4-col: brand+licences, services, company, contact) + `.f-bar`. Lives in `includes/footer.html`.
- **Hero:** `.hero` (homepage, 2-col with `.trust` stats) and `.page-hero` (interior pages; add `.with-media` for the 2-col image variant). Includes `.crumb` breadcrumb.
- **Trust strip:** `.trust-strip` with `.ts-item` + `.ts-sep`.
- **Service cards:** `.svc-grid` (3-col) of `.svc-card` (icon chip `.ico`, h3, p, `.more` link). Top amber bar animates in on hover. For non-link cards add `style="cursor:default"`.
- **Feature grid:** `.feature-grid` of `.feature` (numbered `.num`, h3, p) — hairline-divided cells. Used for "why choose us" / process.
- **Check lists:** `ul.check-list` (`.two` for 2-col) with inline circled-check SVG per `<li>`.
- **Chips:** `.chips` wrapper of `.chip`.
- **Spec list:** `.spec-list` of `.row` (`.k` label / `.v` value) — key/value tables for materials & finishes.
- **CTA band:** `.cta-band` (indigo, amber radial glow) — heading + actions. Closes most pages.
- **Accordion (FAQ):** `.acc` > `.acc-item` > `.acc-q` button (with `.acc-icon` plus-sign that rotates to ×) + `.acc-body` > `.acc-inner`. JS toggles `.open` and animates `max-height`. Single-open per `.acc` group.
- **Project grid + filters:** `.filter-row` of `.filter-btn[data-filter]` controlling `.project-grid` of `.project-card[data-sector]`. JS shows/hides via `.hide`.
- **Blog:** `.blog-grid` of `.blog-card` (`.bc-media`, `.bc-cat`, h3, p, `.more`).
- **Testimonials:** `.tm-grid` of `.tm-card` (`.quote-mark`, `.sector`, blockquote, `.author` with `.av` initials).
- **Contact:** `.contact-grid` (details + form), `.contact-card`, `.form-card`, `.field`/`.form-row`, `.steps`/`.step` process list.
- **Placeholders:** `.ph` (diagonal-hatch fill) + a shape modifier `.ph-hero`/`.ph-wide`/`.ph-sq`/`.ph-43`/`.pc-media`/`.bc-media`, containing `.ph-inner` (icon + `.ph-label` + `.ph-tag`). `.ph.dark` for dark sections. **This is how all imagery is represented until the client supplies photos.**

---

## 8. UI Patterns

- **Page skeleton (every page):**
  ```html
  <body data-page="PAGEKEY">
  <div data-include="header"></div>
  <main> …sections… </main>
  <div data-include="footer"></div>
  <script src="assets/js/main.js" defer></script>
  ```
- `data-page` values drive the active nav state: `home`, `about`, `services` (all 13 service pages), `projects`, `testimonials`, `blog`, `faq`, `contact`.
- **Section rhythm:** alternate white and `.section-soft`, punctuated by one `.section-dark` block and a closing `.cta-band`. Use 1–2 background colors max per page; don't checker every section.
- **Eyebrow → H2 → supporting copy** is the standard section-head pattern (`.section-head`, add `.center` to center it).
- Every interior/service page ends with a `.cta-band`. Most service pages follow: `page-hero.with-media` → intro prose → `.svc-grid` of spaces → `.section-dark` compliance split → optional `.spec-list` → FAQ accordion → CTA band.
- Use `data-screen-label` / clear section structure so content is navigable.

---

## 9. Responsive Breakpoints

Defined in `style.css`. Match these exactly — don't introduce new breakpoints casually:
- **1024px:** hero & page-hero collapse to 1 col (media moves above); 3-col grids → 2-col; mega menu → 2-col.
- **860px:** desktop `.nav-links` hidden, `.nav-burger` shown (mobile panel takes over); splits → 1 col; contact grid → 1 col; footer → 2 col.
- **560px:** body 16px; all card grids → 1 col; form rows → 1 col; spec rows stack; footer → 1 col.

Mobile menu is a full-screen `.mobile-panel` slid in from the right. Hit targets ≥ 44px. The site is mobile-first in spirit; always sanity-check the 3 breakpoints after layout changes.

---

## 10. Animation Guidelines

- **Scroll reveal:** add `data-reveal` to an element; `main.js` uses an `IntersectionObserver` to add `.in` (fade up 22px → 0). Falls back to visible if no IO support. Use sparingly on content blocks, not on every element.
- **Hover transitions:** ~.15–.25s with `--ease`. Cards lift `translateY(-3px)` + `--shadow-md`; buttons lift `translateY(-1px)`; arrows slide `translateX(3–4px)`; svc-card top bar `scaleX(0→1)`.
- **Accordion:** `max-height` transition .3s; icon rotates 45° (plus → ×).
- **Mega menu:** opacity/visibility/translateY .22s; opens on hover (desktop ≥861px) and click.
- Keep motion subtle and functional. No autoplay, no parallax, no looping background animation. Respect that this is a corporate/trust context.

---

## 11. Accessibility Requirements

- Semantic HTML: `<header> <nav> <main> <section> <article> <footer>`, real `<button>` for interactive controls, `<h1>` once per page then logical heading order.
- `aria-label` on icon-only controls (burger, close, nav). `aria-expanded` maintained on the services toggle. `role="tablist"`/filter buttons labelled.
- All interactive elements keyboard-operable; `Escape` closes the mega menu. Focus states use a visible indigo ring (`box-shadow:0 0 0 3px rgba(42,38,133,.1)` on inputs).
- Color contrast: body `--text` on white and white on `--ink-deep` both pass AA. Keep amber for large/bold or non-text-critical elements (it's a mid-tone).
- Form fields have associated `<label>`s, `required` attributes, and inline `.err-msg` error text (not color-only).
- Images: when the client's real photos replace placeholders, every `<img>` needs a descriptive `alt`. Placeholders carry visible text labels meanwhile.

---

## 12. SEO Standards

- Every page has a **unique** `<title>` and `<meta name="description">` in its own `<head>` (the head is intentionally per-page, not globalised, precisely so SEO meta can differ). Titles follow `Primary Keyword Location | Innovare Commercial`.
- Local SEO: name suburbs and regions in body copy; reference QLD/NSW, Brisbane, Gold Coast, SEQ.
- One `<h1>` per page; descriptive `<h2>`/`<h3>` with real keywords; meaningful internal links between related services (e.g. office ↔ flooring ↔ strip-out).
- Content depth and genuine FAQ answers support EEAT — keep them.
- Keep semantic structure clean; preserve descriptive link text (avoid "click here").
- Future: consider JSON-LD (`LocalBusiness`, `FAQPage`) — not yet implemented; add per-page in `<head>` if requested.

---

## 13. HTML / CSS / JavaScript Coding Standards

**HTML**
- Canonical HTML5: close every non-void element, double-quote all attributes, don't self-close non-void elements.
- 2-space indentation. Lowercase tags/attributes.
- Use the existing component classes; don't add inline styles except for small one-off layout nudges already seen in the code (e.g. `style="cursor:default"`, spacing tweaks). Prefer a class if the pattern repeats.

**CSS**
- All styling lives in the single global `assets/css/style.css`. **Do not** add `<style>` blocks to pages or create new stylesheets.
- Use the `:root` tokens. Organise new rules under the existing commented section banners. Mobile adjustments go in the existing `@media` blocks (1024 / 860 / 560).
- BEM-ish flat class names already in use (`.svc-card`, `.tm-card .author .av`). Match the established naming, keep specificity low.

**JavaScript**
- All behavior lives in the single global `assets/js/main.js`, IIFE, `'use strict'`, vanilla ES5-compatible style (the file deliberately uses `var`, `function`, `Array.prototype.forEach` patterns — match it). No libraries, no modules, no build.
- The `boot()` sequence: `loadIncludes()` then `initNav()`, plus `initAccordions/Filters/Form/Reveal`. New global behaviors get their own `initX()` and a call in `boot()`.
- Feature-detect and fail safe (as `initReveal` does). Never throw on pages where a component is absent (guard with early `return` if the element isn't found).
- `<script>` is loaded with `defer` at end of `<body>`.

---

## 14. File Organization

```
/                       ← all 20 HTML pages live in the ROOT (flat, no page subfolders)
  index.html            ← homepage (data-page="home")
  about.html
  contact.html
  projects.html
  testimonials.html
  blog.html
  faq.html
  office-fitouts.html … commercial-refurbishment.html   ← 13 service pages (data-page="services")
includes/
  header.html           ← global header (utility bar, nav, mega menu, mobile panel)
  footer.html           ← global footer
assets/
  css/style.css         ← single global stylesheet (the entire design system)
  js/main.js            ← single global script
uploads/                ← source content doc + extracted text (reference only; not shipped)
support.js              ← DC runtime artifact; ignore, do not edit or rely on
```

**Hard rules:**
- Pages stay **flat in the root** — never move them into folders (internal links are all root-relative bare filenames like `office-fitouts.html`).
- Header/footer are edited **only** in `includes/` — changing them updates every page at once.
- One CSS file, one JS file. Don't fragment them.

---

## 15. Naming Conventions

- **Page files:** lowercase, hyphenated, descriptive, keyword-led: `medical-centre-fitouts.html`, `strip-out-make-good.html`. New service pages follow `{service}-fitouts.html` or `{service}.html`.
- **CSS classes:** lowercase, hyphenated, component-prefixed (`.svc-card`, `.pc-media`, `.tm-card`, `.acc-q`). Modifiers are separate classes (`.section-soft`, `.btn-primary`, `.ph-wide`, `.eyebrow.light`).
- **Data attributes:** `data-page`, `data-include`, `data-filter`, `data-sector`, `data-reveal`.
- **IDs:** camelCase for JS hooks (`#servicesToggle`, `#megaMenu`, `#mobilePanel`, `#enquiryForm`, `#formSuccess`, `#footYear`).

---

## 16. Performance Requirements

- Keep it static and light: no libraries/frameworks. Total JS is one small file.
- Fonts: preconnect to Google Fonts (already in each head) and request only the weights used.
- Use the `.ph` placeholder system until real images arrive; when adding real images, compress them, set explicit `width`/`height` (or aspect-ratio wrappers already exist), use `loading="lazy"` below the fold, and prefer modern formats (WebP/AVIF).
- CSS is one render-blocking file by design (acceptable for this size). Don't inline large style blocks per page.
- No layout-thrash JS; the IntersectionObserver pattern is the model to follow.

---

## 17. Rules for Modifying Existing Code

- **Make the smallest change that satisfies the request.** Don't redesign, re-space, recolor, or "improve" things you weren't asked to touch.
- Header/footer/nav change → edit `includes/header.html` or `includes/footer.html` **once**, never page-by-page.
- Global style change → edit `assets/css/style.css` tokens/classes; it cascades everywhere.
- Global behavior change → edit `assets/js/main.js`.
- Per-page content change → edit only that page's `<main>` (and its `<head>` meta if SEO-relevant).
- Preserve `data-page`, the include divs, the font links, and the script tag on every page.
- Never hard-code a color hex when a token exists. Never introduce a new font. Never change the 4px radius or the indigo/amber palette without explicit instruction.
- Keep business facts (phone, email, address, licence numbers) identical across all pages — if one changes, change all (header, footer, contact, about, relevant CTAs).

---

## 18. Rules for Creating New Pages

1. Copy an existing analogous page as the starting point (a service page from `office-fitouts.html`; a content page from `about.html`).
2. Set a unique `<title>` + `<meta description>`, keep both font `<link>`s and the stylesheet link.
3. Set `<body data-page="…">` to the correct nav key (`services` for any fitout/construction service page).
4. Keep the skeleton: `data-include="header"` → `<main>` → `data-include="footer"` → `main.js` script.
5. Build `<main>` from existing components/sections; end with a `.cta-band`.
6. If it's a new **service**, add its link to the mega menu **and** the mobile panel in `includes/header.html`, and to the footer services list in `includes/footer.html` if appropriate.
7. Use `.ph` placeholders for any imagery, with a clear `.ph-label` describing the intended photo.
8. Cross-link to 2–3 related pages with `.link-arrow`.
9. Re-test the 3 breakpoints and the nav active state.

---

## 19. Common Reusable Components (quick copy reference)

- **Eyebrow:** `<span class="eyebrow">Label</span>` (add `.light` on dark, `.center` to center).
- **Section head:** `<div class="section-head"><span class="eyebrow">…</span><h2>…</h2><p>…</p></div>`.
- **Primary CTA:** `<a class="btn btn-primary" href="contact.html">Label <svg …arrow…></svg></a>`.
- **Inline arrow link:** `<a class="link-arrow" href="…">Label <svg …></svg></a>`.
- **Service card, split, feature grid, check list, spec list, accordion item, CTA band, placeholder** — copy the exact markup from `office-fitouts.html` / `index.html` / `faq.html`; class hooks are listed in §7.
- **Circled-check SVG** and **plus SVG** (accordion) and **right-arrow SVG** are repeated inline throughout — copy from any built page rather than redrawing.

---

## 20. Do's and Don'ts

**Do**
- Use the design tokens and existing components.
- Keep pages flat in the root with bare-filename links.
- Edit header/footer once in `includes/`.
- Keep content depth, real standards references, and licence/EEAT signals.
- Use `.ph` placeholders with descriptive labels for imagery.
- Lay out with flex/grid + `gap`.
- Test the 3 breakpoints and nav active state after changes.

**Don't**
- Don't add a framework, build step, CSS file, or `<style>`/`<script>` block in a page.
- Don't invent colors, fonts, or a larger border radius.
- Don't use emoji or decorative SVG illustrations.
- Don't move pages into subfolders or use absolute/site-root paths.
- Don't duplicate the header/footer into pages.
- Don't paraphrase or alter the business facts or licence numbers.
- Don't strip SEO content to "clean up."
- Don't open pages as `file://` and conclude the header is broken — serve over HTTP.

---

## 21. Quality Checklist (run before completing any task)

- [ ] Page served over HTTP renders header + footer (includes resolved).
- [ ] `<body data-page="…">` correct → right nav item shows active state.
- [ ] Unique `<title>` + `<meta description>`; both font links + stylesheet + `main.js` present.
- [ ] Only design tokens used for color; no stray hex; no new fonts; radius still 4px.
- [ ] Layout uses existing components/classes; new patterns added to `style.css`, not inline/per-page.
- [ ] Responsive: checked at ~1280, ~900, ~520px — no overflow, grids collapse correctly, mobile menu works.
- [ ] Interactive bits work: mega menu (hover+click+Esc), mobile panel, accordions, project filters, contact-form validation + success state.
- [ ] Imagery uses `.ph` placeholders with clear labels (or real images have `alt` + lazy-load).
- [ ] Internal links are correct bare filenames; related-page cross-links present.
- [ ] Business facts (phone/email/address/licences) consistent with every other page.
- [ ] No console errors.
- [ ] Accessibility: headings ordered, icon buttons labelled, keyboard + focus states intact.

---

## 22. Known Pending / Future Work

- **Contact form** (`#enquiryForm`) currently validates and shows a client-side success state only — it does **not** send. To go live on cPanel, add a `contact.php` mail handler and point the form `action`/`method` at it (cPanel supports PHP natively). Keep the existing validation UX.
- **Real photography** replaces all `.ph` placeholders when supplied by the client; preserve aspect ratios and add `alt` text.
- **Project gallery** content is representative; swap in real case studies/images as projects complete.
- **Testimonials** are representative placeholders pending real client consent — replace with attributed quotes.
- Optional: add JSON-LD structured data (`LocalBusiness`, `FAQPage`) per page for richer SEO.
