# 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

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

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

### 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):

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)

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

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

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

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)

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

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

#### Section 6: CTA Band

#### Section 7: Footer

### 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

—

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

### 3.1 What Translates Directly to Divi 5

### 3.2 What Needs Workarounds

### 3.3 DiviFlash Modules Recommended

### 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:

### 4.2 Per-Section Responsive Behavior

### 4.3 Font Scaling

### 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):

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

### 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)

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

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

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

For each of the 6 service pages:

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

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

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

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

—

## 7. Timeline

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

### Milestones

—

## 8. Risk Register

—

## 9. Asset Checklist

—

## 10. Key Files Reference

—

*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.