From cb04153d5ef9988162252fbdfc3248f04cf2af28 Mon Sep 17 00:00:00 2001
From: Claude <claude@anthropic.com>
Date: Sat, 12 Jul 2025 05:01:34 +0530
Subject: [PATCH] Fix homepage UI and button hover effects across all pages
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add missing CSS gradient variables to fix white/invisible text sections
- Add --text-light, --badge-purple, --badge-orange variables
- Fix button hover effects to use brightness filter instead of solid colors
- Apply consistent hover behavior across homepage, marketplace, and wallet pages
- Improve visual hierarchy with subtle section gradients

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 static/css/base.css              | 15 +++++++++++++++
 static/css/homepage.css          |  6 +++---
 static/css/marketplace.css       |  4 ++--
 templates/core/wallet_topup.html |  4 ++--
 4 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/static/css/base.css b/static/css/base.css
index e21d163..105378b 100644
--- a/static/css/base.css
+++ b/static/css/base.css
@@ -16,6 +16,7 @@
     /* Neutral Colors */
     --text-primary: #1f2937;
     --text-secondary: #6b7280;
+    --text-light: #6b7280;
     --text-muted: #9ca3af;
     --border-light: #e5e7eb;    /* For subtle dividers */
     --border-medium: #9ca3af;   /* For form elements and visible borders */
@@ -30,6 +31,20 @@
     --gradient-success: linear-gradient(135deg, var(--success-green) 0%, var(--success-dark) 100%);
     --gradient-hero: linear-gradient(135deg, #f6f8ff 0%, #e8f0fe 50%, #f0f7ff 100%);
     
+    /* Section Gradients */
+    --primary-gradient: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-dark) 100%);
+    --company-gradient: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
+    --visual-gradient: linear-gradient(135deg, var(--primary-blue) 0%, #6366f1 100%);
+    --services-gradient: linear-gradient(135deg, #fefefe 0%, #f0f9ff 100%);
+    --clients-gradient: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+    --founder-gradient: linear-gradient(135deg, var(--primary-blue) 0%, #4f46e5 100%);
+    --contact-gradient: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
+    --text-gradient: linear-gradient(135deg, var(--primary-blue) 0%, #6366f1 100%);
+    
+    /* Badge Colors */
+    --badge-purple: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
+    --badge-orange: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
+    
     /* Professional Avatar Gradients (Limited Set) */
     --gradient-blue: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-dark) 100%);
     --gradient-green: linear-gradient(135deg, var(--success-green) 0%, var(--success-dark) 100%);
diff --git a/static/css/homepage.css b/static/css/homepage.css
index f042fed..0c01518 100644
--- a/static/css/homepage.css
+++ b/static/css/homepage.css
@@ -105,8 +105,8 @@
 
 .btn-primary:hover {
     transform: translateY(-2px);
-    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3);
-    background: var(--primary-dark);
+    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.4);
+    filter: brightness(1.1);
 }
 
 .btn-primary:active {
@@ -136,7 +136,7 @@
     transform: translateY(-2px);
     box-shadow: 0 8px 20px rgba(59, 130, 246, 0.15);
     border-color: var(--primary-blue);
-    background: var(--background-page);
+    background: rgba(59, 130, 246, 0.05);
 }
 
 .btn-secondary:active {
diff --git a/static/css/marketplace.css b/static/css/marketplace.css
index 00f457b..99a8dae 100644
--- a/static/css/marketplace.css
+++ b/static/css/marketplace.css
@@ -271,8 +271,8 @@ body {
 
 .use-button:hover {
     transform: translateY(-2px);
-    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.3);
-    background: var(--primary-dark);
+    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
+    filter: brightness(1.1);
 }
 
 .use-button:active {
diff --git a/templates/core/wallet_topup.html b/templates/core/wallet_topup.html
index a622bcc..8a98b6d 100644
--- a/templates/core/wallet_topup.html
+++ b/templates/core/wallet_topup.html
@@ -231,8 +231,8 @@
     
     .topup-btn:hover:not(:disabled) {
         transform: translateY(-2px);
-        box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
-        background: var(--primary-dark);
+        box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
+        filter: brightness(1.1);
     }
     
     .topup-btn:disabled {