Adjust responsive spacing, typography, and nav sizes#620
Conversation
Refine layout and visual sizing for the landing and nav components. Changes include: button background set to #EBF3F8; increased hero paddings, gaps, and headline font-sizes across 960px and 600px breakpoints; bumped ctaSecondary and subtitle font-sizes/line-heights for readability; enlarged logo icon and wordmark; and increased mobile menu padding, gap, and mobile link padding/font-size to improve tap targets and legibility on small screens. Files modified: web/app/landing.module.css, web/components/site-nav.module.css.
![devin-ai-integration[bot]](https://avatars.githubusercontent.com/in/811515?s=60&v=4){kind=small}
| letter-spacing: 0.01em; | ||
| padding: 14px 28px; | ||
| background: transparent; | ||
| background: #EBF3F8; |
There was a problem hiding this comment.
🔴 Hardcoded #EBF3F8 background on .ctaSecondary breaks dark and non-Carolina themes
The .ctaSecondary background was changed from transparent to a hardcoded light blue #EBF3F8. The site supports four themes (carolina, light/moss, dark, ocean) via CSS custom properties defined in web/app/globals.css:2-144. There is no theme-specific override for .ctaSecondary in the dark theme (the only dark override in landing.module.css is for .byohWrapper at line 566). On the dark theme (--bg: #0c0f0e), this light blue button will appear glaringly out of place. It will also clash with the moss theme's warm beige palette (--bg: #F2EFE9) and the ocean theme. The previous transparent value worked correctly across all themes. This should either use a CSS variable (e.g., var(--bg-elevated)) or have per-theme overrides.
| background: #EBF3F8; | |
| background: var(--bg-elevated); |
Was this helpful? React with 👍 or 👎 to provide feedback.
1 participant
Refine layout and visual sizing for the landing and nav components. Changes include: button background set to #EBF3F8; increased hero paddings, gaps, and headline font-sizes across 960px and 600px breakpoints; bumped ctaSecondary and subtitle font-sizes/line-heights for readability; enlarged logo icon and wordmark; and increased mobile menu padding, gap, and mobile link padding/font-size to improve tap targets and legibility on small screens. Files modified: web/app/landing.module.css, web/components/site-nav.module.css.