CWC/docs/superpowers/specs/2026-06-28-mobile-vector-replacement.md

Mobile Vector Replacement

Goal

Swap the existing mobile vector sources in the homepage hero, pull quote, contact block, and our-work block for the artist-supplied static/img/mobile-*-vector.svg files. Each new SVG is drawn at the 402px mobile baseline so it doesn't need a desktop-vector clip-path trick to look right.

Approach

• Treat each block separately. Same desktop element, an additional mobile element, CSS show/hide.
• Preserve all desktop and tablet-above-767 behavior.
• Lazy-load the new <img> elements the same way the desktop sources are loaded.

Per Block

Hero

• New partial views/partials/hero-vector-mobile.php renders an <img class="hero-vector--mobile"> referencing static/img/mobile-hero-vector.svg.
• homepage-hero.php loads both partials inside the existing .heroVector .vector container.
• homepage-hero.css hides the desktop SVG and shows the mobile <img> below 768px. The existing vector positioning rules still apply to the wrapper.

Pull Quote

• pull-quote.php swaps the existing PNG source for static/img/mobile-pullquote-vector.svg at the existing .pull-quote__vector--mobile slot.
• CSS unchanged. The element already had display: none at desktop and object-fit: cover at mobile.

Contact Block

• contact-block.php adds an <img class="contact-block__linework contact-block__linework--mobile"> next to the existing SVG partial.
• contact-block.css hides the desktop SVG and shows the mobile <img> at mobile. The mobile <img> fills the card width (the new SVG is 342×187, ratio matches the card).
• The reusable contact linework ratio assertion updates from 628/282 to 342/187.
• The linework geometry assertion updates to expect y ≈ 299, height ≈ 188, width = card.width.

Our Work

• our-work.php replaces the clip-path composition (CSS --our-work-vector-image + ::before/::after background images) with a real <img> referencing static/img/mobile-work-vector.svg.
• our-work.css drops the vector-mobile-clip rules and the two ::before/::after background layers. Mobile vector is now a single image covering the block.
• The linework composition test updates to assert against the <img> (visible, has the right currentSrc) instead of the CSS background-image layers.

Verification

• npm run build then npx playwright test --reporter=line — 36/36 pass.
• The contact linework test waits for the lazy-loaded <img> to finish loading before measuring its bounding rect.
• PHPCS clean on changed files. Pre-existing lib/activation.php CRLF error is untouched.
• git diff --check clean.
• composer validate --no-check-publish passes.

Acceptance Criteria

1. Below 768px the hero, pull quote, contact block, and our-work block render the artist-supplied mobile vectors.
2. At 768px and above the original desktop SVGs (or PNG for the original pullquote) render unchanged.
3. Existing responsive geometry tests pass with the updated ratios and positions.