Per the user's spec, the mobile menu is:
- Dark navy background, white links, 95% viewport width
- Parent items (those with child links) get an orange chevron
- Child items get an orange border; nothing else gets any border
- Bottom of menu has a Contact link styled as a button and social icons
Changes:
1. Menu CSS (styles/navigation/nav-mobile-sliding.css):
- Switch the menu background from white to bg-cwc-blue-02 (dark navy)
- Switch menu item text from black to white
- Hide the existing .menu-vdi__submenu and show the children inline under their
parent with a 2px orange border, rounded corners, and white text
- Style the existing chevron SVG inside the parent <button> with the orange
secondary color so it's visible against the navy background
- Add a .menu-vdi__footer block (Contact button + social icons) anchored to
the bottom of the menu panel, shown only when the toggle is aria-expanded
- Hide .menu-vdi__footer entirely at desktop so it doesn't leak into the
page DOM and trigger accessibility warnings
2. Menu template (views/components/nav-main.php):
- Append a .menu-vdi__footer div after the menu items containing a Contact
link to home_url('/contact/') and the existing social-media partial
- The footer renders inside <nav> but is positioned via fixed CSS to align
with the menu panel
Header/toggle button unchanged - the orange/coral rounded button design from
the original mobile-fidelity plan was already correct and is left alone.
Move the mobile hero <img> out of the .vector container (which is intentionally wider than the viewport to bleed the desktop SVG) so the mobile img anchors to .heroVector's full-width edges. Set width: 100vw, left: 0, bottom: 6.25rem so the 402-wide mobile SVG distributes the linework across the full hero at the 402 reference composition.
Capture the per-block approach, what changed in each PHP/CSS file, and the test/geometry updates needed for the new mobile-*-vector.svg files. Mirror the structure used by the prior 2026-06-27 mobile-homepage-fidelity spec.
The mobile contact linework is loading=lazy and only resolved when scrolled into view. Wait for it to finish loading before the geometry assertions read its bounding rect, matching the pattern already used for the Our Work desktop vector.
Replace the clip-path composition of the desktop SVG with a real <img> that references the artist-supplied mobile-work-vector.svg. Drop the CSS-layer trick and the ::before/::after background pieces; the new mobile SVG already covers the composition. Update the linework composition test to assert against the new <img>.
Render mobile-contact-vector.svg alongside the existing contact linework. CSS hides the desktop SVG and shows the mobile <img> at <=767px so the new 342x187 composition fills the card width. Update the geometry test to assert the new linework ratio (342/187) and the snapshot.
Add hero-vector-mobile.php that renders mobile-hero-vector.svg alongside the existing desktop hero partial. The homepage-hero.css hides the desktop SVG and shows the mobile <img> below 768px while preserving every other mobile rule.
Swap pullquote-mobile-linework.png for the artist-supplied mobile-pullquote-vector.svg at the existing pull-quote__vector--mobile slot. Update the visual snapshots to match the new artwork.
Keith Solomon