# L8 Water Hygiene — Site Upgrade Plan

## Executive Summary

Complete site rebuild from the ground up. The current site (15 pages, Divi 5.8.1, L8-Water child theme, live at l8waterhygiene.co.uk) will be replaced with a modern dark-themed design authored in Divi 5 on the build site (l8.kaburu.co.uk, DiviFlash 1.4.14), then deployed to production. The new design mockup (`/tmp/l8water-design-v3.html`) has been validated in real HTML/CSS/JS and partially translated to Divi 5 blocks (`/tmp/l8water-v3-divi.html`, 110 lines of block markup across 7 sections with wave dividers).

---

## 1. Design System

### 1.1 Color Palette

| Token | Hex | Role |
|-------|-----|------|
| `--brand` | `#7d78ba` | Primary brand — buttons, accents, active states |
| `--brand-lt` | `#a8a4d4` | Lighter brand — badge text, icons, hover states |
| `--brand-dk` | `#4e4a8a` | Darker brand — gradients, hover backgrounds |
| `--deep` | `#1a1a2e` | Deepest background — body, hero, services |
| `--mid` | `#24243e` | Mid-tone background — stats bar, trust section |
| `--surface` | `#2e2e50` | Card surface — service cards |
| `--white` | `#f5f4fc` | Primary text — headings, body text (actually a warm off-white) |
| `--foam` | `#dddaf5` | Secondary text — subtitles, labels, muted copy |
| Footer bg | `#111124` | Footer — darkest surface |
| Button gradient | `#7d78ba → #4e4a8a` | Primary button gradient (135deg) |
| CTA band gradient | `#4e4a8a → #7d78ba → #a8a4d4` | Full CTA section gradient (120deg) |

**Design System Setup in Divi:** Create global colors via `diviops_global_color_create` for all 8 tokens. This makes future site-wide color changes instant.

### 1.2 Typography

| Role | Font Family | Weight | Size (Desktop) | Notes |
|------|------------|--------|----------------|-------|
| H1 hero | Bebas Neue | 400 | `clamp(61px, 7.5vw, 112px)` | Line-height 0.92, letter-spacing 0.04em |
| H2 section | Bebas Neue | 400 | `clamp(42px, 4vw, 64px)` | Line-height 1.0, letter-spacing 0.05em |
| H3 cards | DM Sans | 600 | 17px | |
| Body | DM Sans | 300/400 | 15-17px | Line-height 1.68-1.72 |
| Nav links | DM Sans | 500 | 14px (~0.88rem) | Uppercase, letter-spacing 0.04em |
| Section tags | DM Sans | 500 | 12px (~0.76rem) | Uppercase, letter-spacing 0.2em |
| Stat numbers | Bebas Neue | 400 | 48px (3rem) | |
| Stat labels | DM Sans | 500 | 12px | Uppercase, letter-spacing 0.1em |
| Footer | DM Sans | 400 | 13px | |

**Font loading:** Google Fonts — Bebas Neue + DM Sans (300, 400, 500, 600, 700 + italic 300). Set up as global fonts via `diviops_global_font_create`.

### 1.3 Spacing & Layout

| Context | Value | Notes |
|---------|-------|-------|
| Section padding (desktop) | 96px top/bottom, 60-80px sides | Varies by section type |
| Section padding (tablet) | 64px top/bottom, 24px sides | |
| Section padding (phone) | 48px top/bottom, 20px sides | |
| Nav padding | 16px vertical, 64px horizontal | |
| Card padding | 40px all sides | |
| Card gap | 2px (creates 2px borders between cards) | |
| Content max-width | 1300px (services), 1100px (trust) | |
| Hero max-width | 700px | |

### 1.4 Border Radius & Effects

- Border radius: 3px (buttons), 4px (badges), 2px (hero badge)
- Button hover: translateY(-2px) + opacity/color transition 0.15s
- Card hover: background shifts from `#2e2e50` to `#353560`, translateY(-3px), bottom border gradient slides in
- Nav: backdrop-filter blur(10px), border-bottom 1px rgba(125,120,186,0.15)

### 1.5 Breakpoints

**Desktop-first** (Divi 5 standard — `max-width` queries):

| Breakpoint | Width | Affects |
|-----------|-------|---------|
| Desktop | >900px | Full layout |
| Tablet | ≤900px | Nav collapses, cards go single column, stats 2×2 |
| Phone | <478px | Tightest padding, stacked everything |

CSS reference from mockup:
```css
@media(max-width:900px) {
  nav { padding: 1rem 1.5rem; }
  nav ul { display: none; }
  .hero-content { padding: 0 1.8rem; }
  .stats { grid-template-columns: repeat(2,1fr); padding: 2rem 1.5rem; }
  .services { padding: 4rem 1.5rem; }
  .cards { grid-template-columns: 1fr; }
  .trust { padding: 3rem 1.5rem; flex-direction: column; }
  .cta-band { padding: 3.5rem 1.5rem; }
  footer { padding: 2rem 1.5rem; flex-direction: column; align-items: flex-start; }
}
```

---

## 2. Page-by-Page Module Mapping

### 2.1 Home Page (the main rebuild)

The home page is the hero deliverable — everything else flows from it. The mockup has 7 distinct sections between nav and footer, plus the fixed nav itself.

#### Section 0: Fixed Navigation (Theme Builder)

| Mockup Element | Divi/DiviFlash Module | Notes |
|---------------|----------------------|-------|
| Fixed nav container | Theme Builder — Global Header template | `diviops_tb_template_create` with nav layout |
| Logo image | `divi/image` | Logo asset: 198×68px, white version for dark bg |
| Nav links (Services, Compliance, Risk Assessments, About) | `divi/menu` or `difl/advanced-menu` | Custom menu via WP Menu system |
| CTA button (Get a Quote) | `divi/button` | Background brand, white text, 3px radius |

**Critical:** The fixed nav with `backdrop-filter: blur(10px)` and semi-transparent background requires Theme Builder. This is NOT doable with per-page sections — it must be a Global Header template assigned to "All Pages."

#### Section 1: Hero

| Mockup Element | Divi/DiviFlash Module | Notes |
|---------------|----------------------|-------|
| Canvas wave animation background | `divi/code` | JS canvas for animated wave layers + bubbles. 3 wave layers, 55 bubbles, caustics. `requestAnimationFrame` loop. |
| Gradient overlay | `module.decoration.background` gradient on section | `linear-gradient(110deg, rgba(26,26,46,.88) 0%, rgba(26,26,46,.5) 55%, rgba(36,36,62,.15) 100%)` |
| Video-clipped heading text ("Pure Water. Total Compliance.") | `divi/code` + hidden video element | Canvas renders video frames masked to letterforms. Requires JS: draw video → composite 'destination-in' → fill text mask. Fallback: gradient text if video unavailable. |
| Hero badge (Legionella & Water Hygiene Specialists) | `divi/text` with inline CSS | Border, background tint, dot animation |
| Subtitle paragraph | `divi/text` | DM Sans 300 weight, 500px max-width |
| Primary CTA (Request a Survey) | `divi/button` | Brand gradient, box-shadow |
| Secondary CTA (Our Services) | `divi/button` | Transparent bg, brand border |
| Scroll hint | `divi/text` + `divi/code` for animated line | Small text + CSS-animated vertical line |
| Ripple effects | `divi/code` | Append ripple divs on click/mousemove, CSS animation |

**HTML→Divi translation matrix for Hero:**
- `background: radial-gradient(...)` on canvas → Code module JS draws it
- `linear-gradient` overlay → `module.decoration.background.desktop.value.gradient`
- `clamp(3.8rem, 7.5vw, 7rem)` heading → `content.decoration.headingFont.h1.font.desktop.value.size` = "96px" + tablet "64px" + phone "42px"
- Video text → NOT directly translatable. Requires Code module with canvas + hidden video element + JS. **Fallback acceptable for launch:** use static gradient text (no video), add video-clipped text post-launch.
- `.btn-primary` gradient → `button.decoration.background.desktop.value.gradient`
- `.hero-badge` with pseudo dot → text block with inline `<span>` for dot + CSS animation via Free-Form CSS

#### Section 2: Stats Bar

| Mockup Element | Divi/DiviFlash Module | Notes |
|---------------|----------------------|-------|
| Stats container (4 columns) | `divi/row` with grid display, 4 × `divi/column` (1_4) | |
| Stat number (1200+, 20+, 100%, 24/7) | `divi/text` — Bebas Neue 48px gradient text | Use span styling for gradient |
| Stat label | `divi/text` — DM Sans 12px uppercase | Part of same text block |
| Background | `module.decoration.background` — `#24243e` | |

#### Section 3: Wave Divider (SVG)

| Mockup Element | Divi/DiviFlash Module | Notes |
|---------------|----------------------|-------|
| SVG wave divider | `divi/code` with inline SVG | `preserveAspectRatio="none"`, 64px height. Proven in v3-divi build. |

**Three wave dividers in page:**
1. Between stats and services: top=#24243e, bottom path fill=#1a1a2e
2. Between services and trust: top=#1a1a2e, bottom path fill=#24243e
3. Between trust and CTA: top=#24243e, bottom path fill=#4e4a8a

Each is a standalone `divi/section` with zero padding containing a `divi/code` module with the SVG.

#### Section 4: Services (6 Cards)

| Mockup Element | Divi/DiviFlash Module | Notes |
|---------------|----------------------|-------|
| Section tag ("What We Do") | `divi/text` | Brand-lt color, uppercase, letter-spacing |
| H2 heading | `divi/text` | Bebas Neue, gradient on "Hygiene Services" |
| Card grid (3×2) | 2 × `divi/row` with grid, each 3 × `divi/column` (1_3) | Or single row with 6 columns and CSS grid wrap |
| Card background | Column `module.decoration.background` = `#2e2e50` | |
| Card icon (SVG) | `divi/image` with inline SVG or `divi/blurb` with icon | 6 custom SVG icons |
| Card heading (H3) | `divi/text` | DM Sans 600, 17px |
| Card body | `divi/text` | DM Sans 400, 14px, brand-foam color at 55% opacity |
| Card hover effects | Free-Form CSS on column | Bottom border gradient slide-in, background colour shift, translateY(-3px), glow circle scale |

**6 Service Cards:**
1. Legionella Risk Assessments
2. Water Treatment Programmes
3. Monitoring & Sampling
4. Showerhead & TMV Cleaning
5. Written Schemes & Logbooks
6. Training & Awareness

#### Section 5: Trust / Compliance

| Mockup Element | Divi/DiviFlash Module | Notes |
|---------------|----------------------|-------|
| 2-column layout | `divi/row` → 2 × `divi/column` (1_2) | Flexbox on desktop, stacked on mobile |
| Trust heading (H2) | `divi/text` | Bebas Neue, 45px |
| Trust paragraph | `divi/text` | DM Sans, 15px |
| Badge grid (2×2) | `divi/text` with inline HTML grid | Or 4 × `divi/blurb` in grid |
| Badge items | Inline styled divs in text block | Border, tinted bg, Bebas Neue title + DM Sans subtitle |

**4 Compliance Badges:**
1. ACOP L8 — Compliant
2. HTM 04-01 — Healthcare
3. BS 8580 — Certified
4. ISO 9001 — Quality

#### Section 6: CTA Band

| Mockup Element | Divi/DiviFlash Module | Notes |
|---------------|----------------------|-------|
| Gradient section | `module.decoration.background.desktop.value.gradient` | 120deg, stops: 0% #4e4a8a, 60% #7d78ba, 100% #a8a4d4 |
| Dot pattern overlay | `module.decoration.background` with SVG data URI | Or use Code module for the patterned overlay |
| H2 heading + subtitle | `divi/text` | Bebas Neue + DM Sans body font combo |
| White CTA button | `divi/button` | White bg, brand-dk text, 700 weight |

#### Section 7: Footer

| Mockup Element | Divi/DiviFlash Module | Notes |
|---------------|----------------------|-------|
| Footer section | Theme Builder — Global Footer template | Or per-page section if TB not available yet |
| Logo | `divi/image` | White version, CSS filter for opacity |
| Copyright | `divi/text` | DM Sans, 13px, 30% white opacity |
| Legal links | `divi/text` | Privacy Policy, Terms, Contact |

### 2.2 About Page

Map to new design system. Keep existing content, restyle:
- Hero section with Bebas Neue heading on dark bg
- Content in `divi/text` modules with DM Sans
- Stats/certifications in branded badge grid
- CTA band at bottom

### 2.3 Service Pages (6 pages)

Each follows the same template — restyle to new dark theme:
1. **ACOP L8 Legionella Risk Assessment** (page 154)
2. **L8 and Water Hygiene Monitoring Program** (page 170)
3. **Water System Installation** (page 176)
4. **Chemical Dosing Systems with Chlorine Dioxide** (page 182)
5. **Cooling Towers and Boiler Systems** (page 202)
6. **Legionella Testing** (page 10/36)

Template:
- Hero: service name in Bebas Neue, subtitle
- Content: DM Sans body, testimonials where applicable
- Sidebar: related services (use `difl/iconlist` or native `divi/sidebar`)
- CTA band at bottom
- Each service page targets a unique primary keyword

### 2.4 Supporting Pages

| Page | Approach |
|------|----------|
| **FAQ** (page 376) | Restyle with `difl/faq` for richer accordion. Add FAQ schema via RankMath. |
| **Blog** (page 39) | Stays as blog index. Restyle listing page with dark theme. |
| **News** (page 408) | Stays as news index. |
| **Other Services** (page 593) | Consolidate or keep as catch-all with card grid. |
| **Privacy Policy** (page 226) | Restyle text block. No design flourish needed. |
| **Terms of Use** (page 227) | Restyle text block. |
| **Cookie Policy** (page 9) | Restyle text block. |
| **Disclaimer** (page 225) | Restyle text block. |

---

## 3. Technical Approach: What Translates & What Doesn't

### 3.1 What Translates Directly to Divi 5

| HTML/CSS Feature | Divi 5 Equivalent |
|-----------------|-------------------|
| Solid background colours | `module.decoration.background.desktop.value.color` |
| Linear/radial gradients | `module.decoration.background.desktop.value.gradient` |
| font-family, font-size, font-weight, color | `content.decoration.headingFont.h1.font.desktop.value` (or bodyFont) |
| letter-spacing, text-transform, line-height | Same font path |
| padding, margin | `module.decoration.spacing.desktop.value.padding` / `.margin` |
| max-width | `module.decoration.sizing.desktop.value.maxWidth` |
| border-radius | `module.decoration.border.desktop.value.radius` |
| Button styling (bg, color, radius) | `button.decoration.background` / `.font` / `.border` |
| Grid layouts | `module.decoration.layout.desktop.value.display: grid` + column type |
| Flex layouts | `module.decoration.layout.desktop.value.display: flex` |

### 3.2 What Needs Workarounds

| HTML/CSS Feature | Workaround |
|-----------------|------------|
| Canvas animations (waves, bubbles, caustics) | `divi/code` module with inline JS. Must be self-contained — no external scripts. |
| Video-clipped text heading | `divi/code` module: create hidden `<video>` element, draw frames to canvas, composite with `globalCompositeOperation='destination-in'`, draw text mask. **Fallback for launch:** static gradient text. Add video text as enhancement. |
| Ripple effects on click/mousemove | `divi/code` module: event listeners on hero section, create/remove ripple `<div>` elements with CSS animation. |
| Fixed nav with backdrop-filter blur | Theme Builder Global Header template. Semi-transparent bg + `backdrop-filter: blur(10px)` via Free-Form CSS. |
| Card hover effects (pseudo-elements, transform) | Free-Form CSS on column: `::after` for bottom border gradient, `::before` for glow circle, `:hover` for background shift + translateY. |
| Wave SVG dividers | `divi/code` module with inline SVG. Already proven in `/tmp/l8water-v3-divi.html`. |
| Gradient text (brand-lt → brand-dk) | Inline `<span>` with CSS: `background: linear-gradient(...); -webkit-background-clip: text; -webkit-text-fill-color: transparent`. Add inside `innerContent` HTML. |
| Scroll hint animation | `divi/text` for "Scroll" label + `divi/code` with CSS for the animated vertical line. Or use `difl/lottie` for a Lottie scroll animation (cleaner, no custom JS). |
| Dot pattern overlay on CTA band | SVG data URI as `module.decoration.background.desktop.value.image`. Or `divi/code` with inline SVG pattern. |
| Animated pulse dot in hero badge | CSS `@keyframes pulse` via Free-Form CSS on the text module. |

### 3.3 DiviFlash Modules Recommended

| Purpose | Module | Why |
|---------|--------|-----|
| FAQ page | `difl/faq` | Richer accordion than native, better schema support |
| Service icons | `difl/svganimator` | Animated SVG icons on service cards |
| Testimonials | `difl/testimonialcarousel` | Carousel for client testimonials |
| Before/After | `difl/before-after-slider` | Show treatment results (photos) |
| Typing text | `difl/typing-text` | Animated tagline in hero (alternative to video text) |
| Advanced menu | `difl/advanced-menu` | Better nav customization than native |
| Logo/badge grid | `difl/contentcarousel` | If trust badges need carousel on mobile |
| Scroll reveal | `difl/scroll-text-reveal` | Animate section headings on scroll |

### 3.4 Build Protocol

1. **Python script generation** using `scripts/gen-divi-page.py` as template — uses `json.dumps()` to guarantee correct JSON
2. **SCP to Hetzner** → `wp post update <ID> /tmp/file.html --allow-root`
3. **Flush cache** → `wp cache flush`
4. **Verify** → `curl -sL https://l8.kaburu.co.uk/page | grep -o 'expected text'`
5. **Visual QA** → `python3 /home/kaburu/scripts/vision-check.py` with local minicpm-v:8b vision model

**Critical:** For pages with >7 blocks, write to file and push via WP-CLI (avoids MCP double-escaping of backslashes — Pitfall #10).

---

## 4. Responsive Plan

### 4.1 Breakpoint Strategy (Desktop-First)

Divi 5 uses `max-width` breakpoints. We set values at three levels:

| Level | Target | When |
|-------|--------|------|
| Desktop | All modules | Default state |
| Tablet | `module.*.tablet.value` | ≤980px |
| Phone | `module.*.phone.value` | ≤478px |

### 4.2 Per-Section Responsive Behavior

| Section | Desktop | Tablet (≤900px) | Phone (≤478px) |
|---------|---------|-----------------|----------------|
| **Nav** | Horizontal links + CTA | Hamburger menu (mobile menu toggle) | Hamburger menu |
| **Hero** | 700px max-width content, canvas full-bleed | 100% width content, reduced heading size (64px) | 100% width, heading 42px, stacked buttons |
| **Hero heading** | `clamp(61px, 7.5vw, 112px)` | 64px | 42px |
| **Stats** | 4 columns | 2×2 grid | 2×2 grid, reduced padding |
| **Services** | 3×2 card grid | 2×3 or single column | Single column |
| **Trust** | Text left, badges right | Text top, badges bottom | Full stack |
| **CTA** | Heading left, button right | Centered, heading above button | Centered, button full-width |
| **Footer** | Logo left, links right | Stacked: logo top, links bottom | Stacked with left alignment |

### 4.3 Font Scaling

| Element | Desktop (clamp) | Tablet | Phone |
|---------|-----------------|--------|-------|
| Hero h1 | `clamp(61px, 7.5vw, 112px)` | 64px | 42px |
| Section h2 | `clamp(42px, 4vw, 64px)` | 42px | 32px |
| Trust h2 | 45px | 32px | 28px |
| CTA h2 | `clamp(35px, 3.5vw, 52px)` | 36px | 28px |
| Stat numbers | 48px | 48px | 36px |
| Card h3 | 17px | 17px | 16px |
| Body | 15-17px | 15px | 14px |

### 4.4 Image/Asset Responsive Strategy

- Logo: Serve at 198×68px native, CSS `height: 44px; width: auto` on desktop, `height: 36px` on mobile
- Hero background canvas: resize via JS `resize` event listener, match container dimensions
- Service card SVGs: 44×44px viewBox, scale naturally
- Trust badges: Fixed padding, allow text to wrap naturally
- Wave dividers: `preserveAspectRatio="none"` handles all widths automatically

---

## 5. SEO Strategy

### 5.1 Keyword Architecture

**Primary keywords** (targeted on dedicated service pages):

| Page | Primary Keyword | Intent |
|------|----------------|--------|
| Home | legionella risk assessment uk | Commercial |
| Legionella Risk Assessment | acop l8 legionella risk assessment | Commercial |
| Monitoring Program | legionella monitoring programme | Commercial |
| Water System Installation | water system installation uk | Commercial |
| Chemical Dosing | chlorine dioxide water treatment | Commercial |
| Cooling Towers | cooling tower legionella testing | Commercial |
| Legionella Testing | legionella testing services | Commercial |
| Training | legionella awareness training | Commercial |

**Secondary keywords** (supporting content):
- water hygiene services uk
- legionella compliance
- htm04-01 water safety
- written scheme of control
- tmv servicing
- legionella sampling uk

### 5.2 On-Page SEO per Page

**Home Page:**
- SEO Title: `L8 Water Hygiene | Legionella Risk Assessment & Water Safety UK`
- Meta Description: `Expert ACOP L8 legionella risk assessments, water treatment programmes, and monitoring across the UK. 20+ years experience, 100% compliance record. Free consultation.`
- Focus Keyword: `legionella risk assessment uk`
- Schema: `LocalBusiness` + `Service`

**Service Pages** — each gets:
- Unique focus keyword
- SEO title with `| L8 Water Hygiene` suffix
- Meta description 140-160 chars with service + location + call to action
- `Service` schema via RankMath
- Internal links from home page service cards → service pages
- Internal links between related services

**FAQ Page:**
- Schema: `FAQPage` via RankMath (rich results eligible)
- Focus keyword: `legionella frequently asked questions`
- Each FAQ item gets structured data

**Blog:**
- `Article` schema on each post
- Topic clusters: Legionella, water treatment, compliance, industry news
- Internal linking from blog posts → service pages

### 5.3 Technical SEO

| Item | Action | Tool |
|------|--------|------|
| Sitemap | Generate XML sitemap | RankMath |
| Robots.txt | Allow search bots, block AI training scrapers (GPTBot, CCBot), allow AI search bots (PerplexityBot) | `rankmath-seo.py robots --ai-search-only` |
| Canonical URLs | Set per-page | RankMath REST API |
| OG/Twitter tags | Set per-page (title, description, image) | RankMath `updateMeta` |
| Schema markup | `LocalBusiness` (home), `Service` (service pages), `FAQPage` (FAQ), `Article` (blog) | RankMath `updateSchemas` |
| Internal linking | Audit orphans | RankMath `links/posts?is_orphan=orphan` |
| Markdown for bots | Install on production site | `wp plugin install markdown-for-agents-and-statistics --activate` |
| Core Web Vitals | Target LCP <2.5s, CLS <0.1 | LiteSpeed cache + FastPixel (deactivate during VB work) |
| SSL | Cloudflare full (strict) | Already configured |
| Redirects | 301 for any URL changes | RankMath or Cloudflare |

### 5.4 Content Strategy

1. **Service pages:** Long-form (800-1500 words), structured with H2/H3 headings, bullet points for compliance details, internal links to related services
2. **Blog:** 2-4 posts/month covering Legionella guidance updates, case studies, industry news
3. **FAQ:** 15-20 questions covering common Legionella/water hygiene concerns. Each answer 100-200 words.

### 5.5 Tracking

- **RankWatch:** Add `l8waterhygiene.co.uk` as a project, track primary keywords
- **Matomo:** Already tracking on stats.kaburu.co
- **Google Search Console:** Integrated via RankMath Pro (install Pro on live site)

---

## 6. Build Sequence

### Phase 1: Foundation (Days 1-3)

| Step | Task | Tool |
|------|------|------|
| 1.1 | Create global colours (8 tokens) | `diviops_global_color_create` × 8 |
| 1.2 | Create global fonts (Bebas Neue + DM Sans families) | `diviops_global_font_create` × 2 |
| 1.3 | Set global typography defaults (body 15px, headings Bebas Neue) | `diviops_schema_get_settings` + modify |
| 1.4 | Create Fluid Typography System | `diviops_variable_create_fluid_system` |
| 1.5 | Set up nav menu in WordPress (Services, Compliance, Risk Assessments, About, Contact) | `diviops_menu_*` |
| 1.6 | Install and activate RankMath Pro on build site | Manual zip upload |
| 1.7 | Install markdown-for-agents-and-statistics | WP-CLI |

### Phase 2: Theme Builder (Days 3-5)

| Step | Task | Tool |
|------|------|------|
| 2.1 | Create Global Header template (fixed nav, logo, menu, CTA button) | `diviops_tb_template_create` |
| 2.2 | Create Global Footer template (logo, copyright, legal links) | `diviops_tb_template_create` |
| 2.3 | Assign header/footer to All Pages | Template conditions |
| 2.4 | Test nav responsiveness (hamburger menu) | Visual QA |

### Phase 3: Home Page (Days 5-10)

| Step | Task | Tool |
|------|------|------|
| 3.1 | Generate home page blocks via Python script | `scripts/gen-divi-page.py` |
| 3.2 | Build Section 1: Hero (canvas waves, video text fallback, badge, CTAs) | Python → SCP → WP-CLI |
| 3.3 | Build Section 2: Stats Bar | Python → SCP → WP-CLI |
| 3.4 | Build Section 3: Wave Divider 1 | Python → SCP → WP-CLI |
| 3.5 | Build Section 4: Services (6 cards with SVGs) | Python → SCP → WP-CLI |
| 3.6 | Build Section 5: Wave Divider 2 | Python → SCP → WP-CLI |
| 3.7 | Build Section 6: Trust (badges grid) | Python → SCP → WP-CLI |
| 3.8 | Build Section 7: Wave Divider 3 | Python → SCP → WP-CLI |
| 3.9 | Build Section 8: CTA Band | Python → SCP → WP-CLI |
| 3.10 | Build Section 9: Footer (if not using Theme Builder footer) | Python → SCP → WP-CLI |
| 3.11 | Add Free-Form CSS for hover effects, animations | Module-level CSS |
| 3.12 | Validate: `diviops_validate_blocks` | MCP |
| 3.13 | Preview: `diviops_render_preview` | MCP |
| 3.14 | Visual QA: `vision-check.py` full-page + scroll-review | Local vision model |
| 3.15 | SEO setup for home page (meta, schema, OG) | `rankmath-seo.py full-seo` |
| 3.16 | Publish | `diviops_page_update_status` |

### Phase 4: Service Pages (Days 10-16)

For each of the 6 service pages:
| Step | Task | Tool |
|------|------|------|
| 4.x.1 | Copy content from existing page | `wp post get <ID>` |
| 4.x.2 | Build new page with dark theme blocks | Python script |
| 4.x.3 | SEO setup (keyword, meta, schema) | `rankmath-seo.py` |
| 4.x.4 | Visual QA | `vision-check.py` |
| 4.x.5 | Internal link audit | RankMath link checker |

### Phase 5: Supporting Pages (Days 16-20)

| Step | Task |
|------|------|
| 5.1 | Restyle About page |
| 5.2 | Restyle FAQ page with `difl/faq` + FAQ schema |
| 5.3 | Restyle Blog index |
| 5.4 | Restyle News page |
| 5.5 | Restyle legal pages (Privacy, Terms, Cookies, Disclaimer) |
| 5.6 | Restyle Other Services or consolidate |

### Phase 6: SEO & Polish (Days 20-24)

| Step | Task |
|------|------|
| 6.1 | Full site keyword research via RankMath + web search |
| 6.2 | Set all page meta (titles, descriptions, OG) |
| 6.3 | Set all schema markup |
| 6.4 | Internal link audit — fix orphans |
| 6.5 | Generate robots.txt (`--ai-search-only`) |
| 6.6 | Verify sitemap |
| 6.7 | Add to RankWatch tracking |
| 6.8 | Cross-browser visual QA (Chrome, Firefox, Safari) |
| 6.9 | Mobile responsive QA (all pages, all breakpoints) |
| 6.10 | PageSpeed audit — optimize assets |

### Phase 7: Deploy to Production (Days 24-26)

| Step | Task |
|------|------|
| 7.1 | Full backup of live site (files + DB) |
| 7.2 | Clone build site DB to production (or selective content migration) |
| 7.3 | Copy theme files, plugins, uploads |
| 7.4 | Update URLs (l8.kaburu.co.uk → l8waterhygiene.co.uk) |
| 7.5 | Flush all caches |
| 7.6 | Verify all pages render on live domain |
| 7.7 | Set up 301 redirects for any URL changes |
| 7.8 | Submit new sitemap to Google Search Console |
| 7.9 | Monitor rankings for 48 hours post-launch |

### Phase 8: Post-Launch (Days 26-30)

| Step | Task |
|------|------|
| 8.1 | Monitor Matomo analytics for traffic patterns |
| 8.2 | Check RankWatch rankings (daily) |
| 8.3 | Fix any visual issues caught post-launch |
| 8.4 | Enable video-clipped heading (enhancement — deferred from launch) |
| 8.5 | Add Lottie animation for scroll hint (replacement for CSS-only version) |
| 8.6 | Client review and sign-off |

---

## 7. Timeline

| Phase | Duration | Cumulative |
|-------|----------|------------|
| 1. Foundation | 3 days | Day 3 |
| 2. Theme Builder | 2 days | Day 5 |
| 3. Home Page | 5 days | Day 10 |
| 4. Service Pages (6) | 6 days | Day 16 |
| 5. Supporting Pages (8) | 4 days | Day 20 |
| 6. SEO & Polish | 4 days | Day 24 |
| 7. Deploy to Production | 2 days | Day 26 |
| 8. Post-Launch | 4 days | Day 30 |

**Total estimated timeline: 30 working days (6 weeks).**

### Milestones

| Milestone | Day | Deliverable |
|-----------|-----|-------------|
| Design system live on build site | Day 3 | Global colours + fonts + fluid typography |
| Theme Builder templates working | Day 5 | Fixed nav + footer visible on all pages |
| Home page complete | Day 10 | Full home page with all sections, validated, SEO-ready |
| All service pages built | Day 16 | 6 service pages with dark theme + SEO |
| All pages restyled | Day 20 | 15-page site fully converted |
| SEO complete | Day 24 | All meta, schema, sitemap, robots.txt, internal links |
| **LIVE** | Day 26 | Production deployment + verification |
| Signed off | Day 30 | Client review, fixes, enhancements |

---

## 8. Risk Register

| Risk | Probability | Impact | Mitigation |
|------|------------|--------|------------|
| Canvas animation performance on mobile | Medium | Medium | Use `will-change: transform`, reduce bubble count on mobile via JS, test on real devices |
| Video-clipped heading CORS issues | High | Low | Fallback to gradient text — video is an enhancement, not critical |
| Theme Builder nav conflicts with existing child theme | Low | High | Test on build site first, clone theme if needed |
| WordPress 6.x breaking Divi 5.8.x | Low | High | Pin versions, test updates on build site before production |
| SEO rankings drop during migration | Medium | High | Preserve all URLs, set up 301s, monitor RankWatch daily post-launch |
| FastPixel causes VB 500s | High | Medium | Deactivate FastPixel before any VB work, reactivate after |
| MCP double-escaping on large pages | Medium | Medium | Use file → SCP → WP-CLI pipeline for pages with >7 blocks |
| Client content changes during build | Low | Low | Freeze content on live site during Phase 4-5 |

---

## 9. Asset Checklist

| Asset | Status | Notes |
|-------|--------|-------|
| Logo (198×68px) | ✅ Exists | At `https://kaburu.co/wp-content/uploads/2026/06/L8-Logo.png` |
| Logo (white version for dark bg) | 🔧 Needed | Invert + reduce opacity via CSS or create white version |
| Hero background video (l8-water-hero.mp4) | 🔧 Needed | For video-clipped heading enhancement |
| 6 service card SVG icons | 🔧 Needed | Custom SVGs for each service |
| 4 trust badge icons | ⬜ Optional | Text-based badges work without icons |
| Hero canvas JS | ✅ Written | In v3 design mockup (`/tmp/l8water-design-v3.html`) |
| Wave divider SVGs | ✅ Written | In v3-divi build (`/tmp/l8water-v3-divi.html`) |
| Favicon | 🔧 Needed | 32×32 + 180×180 |
| OG image (1200×630) | 🔧 Needed | For social sharing previews |

---

## 10. Key Files Reference

| File | Purpose |
|------|---------|
| `/tmp/l8water-design-v3.html` | Original HTML/CSS/JS mockup — the design source of truth |
| `/tmp/l8water-content-fixed.html` | Divi 5 block translation (62 blocks, no wave dividers) |
| `/tmp/l8water-v3-divi.html` | Enhanced Divi 5 build with Code module wave dividers (110 lines) |
| `~/.hermes/skills/infrastructure/divi-5-builder/scripts/gen-divi-page.py` | Page generator template (Python + json.dumps) |
| `~/.hermes/skills/infrastructure/divi-5-builder/scripts/rankmath-seo.py` | SEO automation CLI |
| `~/.hermes/skills/infrastructure/divi-5-builder/references/l8water-deployment.md` | Previous deployment notes |
| `~/.hermes/skills/infrastructure/divi-5-builder/references/diviflash-modules.md` | 107-module DiviFlash inventory |

---

*Plan prepared: 2026-07-05. Next action: Begin Phase 1 — Design System setup on l8.kaburu.co.uk.*

---

## Custom CSS (Hero Video Overlay)

**Problem:** Divi 5 API's `customCss` path doesn't output CSS. Inline `<style>` blocks in `divi/code` modules get stripped by Divi's CSS processor. Theme mods (`custom_css`) are ignored. The `background.gradient` API path renders behind the video, not on top.

**Solution:** CSS injected via `wp_head` hook in the theme's `functions.php` (2026-07-07).

**File:** `/home/l8.kaburu.co.uk/public_html/wp-content/themes/L8-Water/functions.php`

```php
// Hero video overlay gradient — Gwen 2026-07-07
add_action('wp_head', function() {
  if (is_front_page()) {
    echo '<style>.et_pb_section_0_tb_body::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(36,36,61,0.86) 0%,rgba(31,31,53,0.86) 50%,rgba(26,26,45,0.86) 100%)}</style>';
  }
});
```

**Colors:** `#24243d` → `#1f1f35` → `#1a1a2d` at 86% opacity. The `::before` pseudo-element with `position: absolute` and `z-index: 1` renders above the `<video>` element that Divi places at z-index 0.

**Scope:** Homepage only (`is_front_page()`). The section class `.et_pb_section_0_tb_body` is Divi's compiled class for the first section in the Theme Builder body layout.