jason/alwisp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix hero text contrast with dark glass card and gradient text color

Browse Source 
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
This commit is contained in:
Claude
2026-03-01 02:29:58 +00:00
parent 58c37a81a2
commit c4193eea59
1 changed files with 9 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
www/css/style.css
View File

@@ -33,7 +33,7 @@
/* Gradients */ /* Gradients */
--grad-hero: linear-gradient(135deg, #0d1b3e 0%, #1565c0 60%, #00bcd4 100%); --grad-hero: linear-gradient(135deg, #0d1b3e 0%, #1565c0 60%, #00bcd4 100%);
--grad-text: linear-gradient(90deg, #00bcd4, #1565c0); --grad-text: linear-gradient(90deg, #f57c00, #00bcd4);
--grad-cta: linear-gradient(135deg, #1565c0, #00bcd4); --grad-cta: linear-gradient(135deg, #1565c0, #00bcd4);
/* Typography */ /* Typography */
@@ -292,8 +292,14 @@ ul { list-style: none; }
.hero__content { .hero__content {
position: relative; position: relative;
z-index: 1; z-index: 1;
max-width: 700px; max-width: 680px;
padding-block: 4rem; padding: 3rem 3.5rem;
background: rgba(8, 14, 38, 0.72);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,.1);
border-radius: var(--r-lg);
margin-block: 4rem;
} }
.hero__eyebrow { .hero__eyebrow {