From c4193eea599c2f5c13753f6c4400f0d5eea7ab9a Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 1 Mar 2026 02:29:58 +0000
Subject: [PATCH] Fix hero text contrast with dark glass card and gradient text
 color
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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
---
 www/css/style.css | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/www/css/style.css b/www/css/style.css
index ae7b31b..8826e93 100644
--- a/www/css/style.css
+++ b/www/css/style.css
@@ -33,7 +33,7 @@
 
     /* Gradients */
     --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);
 
     /* Typography */
@@ -292,8 +292,14 @@ ul { list-style: none; }
 .hero__content {
     position: relative;
     z-index: 1;
-    max-width: 700px;
-    padding-block: 4rem;
+    max-width: 680px;
+    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 {