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