[R-08] Excessive section vertical padding on mobile

[vmorps]

[R-08] Excessive Section Vertical Padding on Mobile

Severity: P2
Sprint: 3
Component: All Sections
Spec: design/specs/responsive-layout-fixes.md § R-08

---

Current Behavior

Every landing section uses padding: 6rem 0 (96px top + bottom). On mobile viewports, this creates excessive whitespace between sections, requiring significantly more scrolling.

Affected files:

• Hero.module.css — .section { padding: 6rem 0 6rem; min-height: 100vh; }
• ProblemSolution.module.css — .section { padding: 6rem 0; }
• DeveloperFirst.module.css — .section { padding: 6rem 0; }
• Standards.module.css — .section { padding: 6rem 0; }
• Community.module.css — .section { padding: 6rem 0; }
• FinalCTA.module.css — .section { padding: 6rem 0; }

Expected Behavior

On mobile, section padding reduced to 3rem 0 (48px). Hero section should also remove min-height: 100vh on mobile.

File(s) Impacted

• src/components/landing/Hero.module.css
• src/components/landing/ProblemSolution.module.css
• src/components/landing/DeveloperFirst.module.css
• src/components/landing/Standards.module.css
• src/components/landing/Community.module.css
• src/components/landing/FinalCTA.module.css

Implementation Approach

Add a mobile-first base to each component:

.section {
  padding: 3rem 0; /* mobile-first */
}

@media (min-width: 640px) {
  .section {
    padding: 4rem 0; /* tablet */
  }
}

@media (min-width: 1024px) {
  .section {
    padding: 6rem 0; /* desktop — unchanged */
  }
}

For the Hero specifically:

.section {
  min-height: auto; /* mobile: fit content naturally */
}

@media (min-width: 1024px) {
  .section {
    min-height: 100vh;   /* fallback for older browsers */
    min-height: 100svh;  /* modern browsers — excludes browser chrome */
  }
}

Note: Use 100svh (small viewport height), not 100vh. On mobile browsers, 100vh includes the area behind the URL bar/browser chrome. 100svh measures only the visible area.

Acceptance Criteria

• Sections have reduced vertical spacing on mobile
• Hero section does not force 100vh minimum on mobile
• Desktop section spacing is unchanged (6rem)
• Desktop hero uses 100svh (with 100vh fallback)
• Visual rhythm between sections feels balanced on mobile

---

Branch strategy: All responsive fixes will land on a single branch (fix/responsive-layout) with one PR against main. Commits grouped by sprint.