---
id: S01
parent: M016
milestone: M016
provides:
  - Consistent 42rem max-width homepage layout baseline for S06
requires:
  []
affects:
  - S06
key_files:
  - frontend/src/App.css
key_decisions:
  - Kept .search-container at 36rem and .home-hero__value-prop at 32rem for readability — only content sections widened to 42rem
patterns_established:
  - (none)
observability_surfaces:
  - none
drill_down_paths:
  - .gsd/milestones/M016/slices/S01/tasks/T01-SUMMARY.md
duration: ""
verification_result: passed
completed_at: 2026-04-03T05:32:30.936Z
blocker_discovered: false
---

# S01: Landing Page Visual Fixes

**Four CSS fixes unify homepage layout: 42rem max-width on content sections, border-image removed from featured card to restore border-radius, CTA constrained on mobile, section spacing standardized to 2rem.**

## What Happened

Single-task slice applying four surgical CSS fixes to `frontend/src/App.css`:

1. **Max-width unification (36rem → 42rem):** Applied to `.home-popular-topics__list`, `.nav-cards`, `.home-stats`, `.home-trending`, and related selectors. `.search-container` (36rem) and `.home-hero__value-prop` (32rem) intentionally kept narrower for readability.

2. **Featured card border-radius fix:** Removed `border-image` and `border-image-slice` from `.home-featured`. Per KNOWLEDGE.md, `border-image` strips `border-radius` per CSS spec — the existing `box-shadow` glow provides sufficient visual distinction.

3. **CTA button mobile sizing:** Added `max-width: 20rem; margin-left: auto; margin-right: auto;` to `.home-cta` in the 640px media query, preventing full-viewport-width stretch.

4. **Section spacing normalization:** Standardized bottom margins to 2rem on `.home-stats`, `.home-featured`, `.home-random`, `.home-trending`.

Build passes with zero errors (873ms).

## Verification

Frontend build (`npm run build`) passes with zero errors. Grep confirms: 7 instances of `max-width: 42rem` across content sections, zero `border-image` declarations remaining, `max-width: 20rem` present on `.home-cta`.

## Requirements Advanced

- R037 — All four visual fixes applied: 42rem max-width unification, border-image removal restoring featured card border-radius, CTA mobile sizing, and section spacing normalization. Build verified.

## Requirements Validated

None.

## New Requirements Surfaced

None.

## Requirements Invalidated or Re-scoped

None.

## Deviations

None.

## Known Limitations

None.

## Follow-ups

S06 (Landing Page Personality Pass) depends on this slice for baseline layout consistency.

## Files Created/Modified

- `frontend/src/App.css` — Four CSS fixes: 36rem→42rem on 5 content sections, removed border-image from .home-featured, added max-width:20rem on .home-cta mobile, normalized section margins to 2rem
