CWC/docs/superpowers/specs/2026-06-27-mobile-homepage-fidelity-design.md

Mobile Homepage Fidelity Corrections

Goal

Correct the mobile homepage so the supplied section crops in notes/ are pixel-accurate at a 402px viewport and adapt proportionally from 320px through 767px. Preserve all layouts at 768px and above.

Responsive Architecture

• Scope presentation changes to @media (max-width: 767px).
• Treat 402px as the exact visual baseline.
• Scale between 320px and 767px with bounded percentages, viewport-relative dimensions, clamp(), and component container widths.
• Keep responsive rules with the component or block that owns them.
• Reuse the existing templates and WordPress content. Do not duplicate mobile markup.
• Make minimal template changes only when CSS cannot provide correct semantic ordering or accessible controls.

Component Corrections

Header

Change only the hamburger button to match the reference: shape, size, coral fill, and white line treatment. Preserve the current header height, logo treatment, padding, and spacing.

Homepage Hero

• Match the reference heading width, line breaks, left alignment, and vertical placement.
• Match the CTA dimensions, spacing, and alignment.
• Adjust the background image crop and overlay so the image remains visible behind the content.
• Scale and anchor the linework vector to the bottom composition shown in the reference.
• Position and size the location label to match the crop.

Pull Quote

• Match the reference type size, weight, line height, and centered text width.
• Match the vertical padding and overall block height.
• Scale and position the background vector independently from the text.

Image/Text Block

• Present the text before the image collage on mobile.
• Keep the Services and About CTAs side by side.
• Place the complete image collage below the text and CTAs.
• Reduce excess space between the collage and the contact block while retaining the reference breathing room.

Contact Block

• Match the reference card width, height, corner radius, and bottom coral rule.
• Preserve recognizable photo detail with the reference gradient treatment.
• Match heading width, line breaks, alignment, and CTA placement.
• Scale and anchor the linework along the lower portion of the card.

Our Work

• Match the reference content-first mobile layout and CTA row.
• Scale the decorative vector independently so its linework matches the reference density.
• Fully contain both supplied images at mobile sizes.
• Recreate their reference overlap without clipping either image.

Footer

• Match the reference mobile structure: logo and back-to-top row, two-column navigation, full-width contact text/details, social row, and centered copyright.
• Match reference widths, gaps, type scale, icon sizing, and bottom coral border.
• Continue sourcing navigation, contact information, social links, and copyright text from WordPress.

Content and Behavior

• Do not change editorial content, links, or WordPress field sources.
• Preserve existing desktop and tablet-above-767 behavior.
• Preserve the current accessible Recent Insights carousel behavior.
• Maintain keyboard navigation, focus visibility, semantic reading order, and sufficient touch targets.

Verification

• Add Playwright regression coverage at 402px for content order, CTA layout, and key component geometry.
• Check proportional behavior at 320px and 767px.
• Add assertions at 768px or wider that guard against mobile overrides leaking into desktop.
• Run the production CSS build.
• Run all configured Playwright and axe accessibility tests.
• Run PHPCS, PHP syntax checks, Prettier, Composer validation, and git diff --check.
• Capture a final 402px full-page screenshot and compare it directly with the supplied section crops.

Acceptance Criteria

1. At 402px, each listed section visually matches its corresponding crop in notes/.
2. Between 320px and 767px, content remains proportional, readable, unclipped, and operable.
3. At 768px and above, the existing layout is unchanged.
4. The image/text block uses text-first order, a side-by-side CTA row, and a complete collage below.
5. The contact and Our Work vectors and images match the intended crop and containment behavior.
6. The footer follows the reference hierarchy and alignment.
7. All configured verification commands pass without accessibility regressions.