Previous card attempt used padding: 3rem 3.5rem which overrode the
container's padding-inline and shrank the text area from 652px to 568px,
making the heading clip worse and the card look too narrow to read.
Two fixes:
- max-width: 780px + padding: 3rem 2.5rem gives 730px text area,
comfortably containing the heading at any viewport size
- heading clamp changed from (2.4rem, 6vw, 4rem) to (2.2rem, 4.5vw, 3.25rem)
so the max rendered size stays well within the card width
https://claude.ai/code/session_015wpwmheufcxkBuXivrSHhd
The hero gradient (navy→blue→teal) used the same colors as the gradient
text (teal→blue), making the heading dissolve into the background.
Two fixes:
- hero__content now has a dark semi-transparent card (rgba 72% opacity)
with blur backdrop, keeping the animated gradient background visible
around it while text sits on a dark, readable surface
- --grad-text changed from teal→blue to orange→teal so the gradient
heading contrasts against the card and visually pops
https://claude.ai/code/session_015wpwmheufcxkBuXivrSHhd