# INTEGRATION GUIDE - Complete Weed Control · Gritting Service redesign
## 0. File inventory
```
/cwc/includes/header.html Header + green sticky utility bar (DO NOT EDIT)
/cwc/includes/footer.html Footer (DO NOT EDIT)
/cwc/assets/cwc-shell.css Header/footer/base styles + design tokens ~9 KB
/cwc/assets/cwc-page.css Page body styles ~9 KB
/cwc/assets/cwc-header.js Menu, submenu, local-team panel ~2 KB
/cwc/assets/cwc-page.js FAQ, form validation, dataLayer, video ~3 KB
/cwc/gritting-service.html Full page, Variant A (production ready)
/cwc/gritting-service-variant-b.html Variant B hero + split-test instructions
/cwc/CMS-FIELD-MAP.md Which regions must become CMS fields
/cwc/COPY-DECK.md Final copy, microcopy, meta options
/cwc/TRACKING.md dataLayer, GTM, Google Ads, Meta Pixel
/cwc/QA-CHECKLIST.md WCAG 2.1 AA, performance, browser matrix
/cwc/AB-TEST-PLAN.md Hypotheses, KPIs, sample size, duration
/cwc/PATTERN-LIBRARY.md Component inventory + tokens for reuse
```
Total shipped weight (gzipped, excluding images): **≈ 8 KB CSS + 2 KB JS**.
Zero frameworks, zero CDN dependencies. Bootstrap, jQuery, Slick and Font
Awesome are **not** required by this page - the icons are inline SVG.
## 1. Asset list
| Asset | Source | Format | Action |
|---|---|---|---|
| `cwc-logo.svg` | existing `/assets/images/cwc-logo.svg` | SVG | reuse as-is (already optimal) |
| `accreditations.png` | existing | PNG | re-export as WebP (~70% smaller), keep PNG fallback |
| `cwc-map.svg` | existing | SVG | run through SVGO, ~30% saving |
| Hero `iStock-2164438023.jpg` | existing | JPG | export WebP @1600w + 960w + 640w, quality 72; keep JPG fallback |
| Client logos (`/logos/*.jpg`) | existing | JPG | convert to WebP, 150×56, `loading="lazy"` |
| Nav / UI icons | this package | inline SVG | already inlined; no HTTP requests |
| Gilroy / Proxima Nova | existing `/assets/fonts/*.woff2` | WOFF2 | `font-display:swap`, preload the two used weights |
**Font note:** the live site self-hosts Gilroy Heavy + Proxima Nova (WOFF2). The
package references those exact files by absolute URL, so typography is identical
- no substitution and no documented deviation.
## 2. Dropping in header & footer
**Option A - server-side includes (preferred)**
```html
...page...
```
**Option B - CMS template partials.** Paste `header.html` into the CMS "Header"
template region and `footer.html` into "Footer". Do not let the WYSIWYG editor
touch them (mark as raw/HTML block).
**Option C - no includes available.** Paste both blocks directly into the page
template. They are self-contained.
Then add, once, in ``:
```html
```
**Critical:** the `#main` id on `` must be kept - every rule in
`cwc-shell.css` is scoped to it, exactly like the live stylesheet.
## 3. Deploying the page
1. Upload `/cwc/assets/*` and `/cwc/includes/*`.
2. Create the page in the CMS from `gritting-service.html`, replacing the
header/footer blocks with your include directives.
3. Wire `{{ }}` fields per `CMS-FIELD-MAP.md`.
4. Point the form `action` at the existing enquiry endpoint and remove
`data-demo="true"` from `#cwcQuoteForm` so it posts natively.
5. Replace `GTM-XXXXXXX`, `AW-XXXXXXXXX`, `PIXEL_ID` (see `TRACKING.md`).
6. Publish to the test environment first and run the checks in §4 and §5.
## 4. Verifying header/footer parity (pixel check)
Viewports to compare against the live page:
**375×812, 414×896, 768×1024, 1024×768, 1280×800, 1440×900, 1920×1080.**
Procedure:
1. Open live page and test page side by side at each width.
2. Screenshot **only** the header + green bar, and the footer, on both.
3. Diff them:
```bash
# ImageMagick
compare -metric AE live-header-1440.png new-header-1440.png diff.png
# or Playwright
await page.locator('header').screenshot({ path: 'header.png' })
```
Target: **0 pixels difference** in logo size/position, nav item spacing,
green bar height (56 px @1440), footer padding (100 px top/bottom @desktop).
4. CSS compare tips: in DevTools check computed `background-color` of
`.tny_sticky-bar` = `rgb(18,191,107)`, `footer` = `rgb(245,247,246)`,
`.menu-link` font-size = `16.875px`, `header .logo` max-width = `250px`
at ≥1300 px, `.button` border-radius = `15px`.
5. Behaviour: submenu opens on hover (desktop) and on tap (touch), Escape
closes it, burger appears below 1100 px, sticky bar sticks to the top on
scroll, phone/email links dial and compose.
## 5. Rollback & troubleshooting
| Symptom | Cause | Fix |
|---|---|---|
| Fonts fall back to Arial | CMS blocks cross-origin font load | Copy the WOFF2 files into the CMS asset library and change the `@font-face` URLs to relative paths |
| Header looks unstyled | `id="main"` missing from `` | Restore it - all shell CSS is scoped to `#main` |
| Inline `