Fix homepage UI and button hover effects across all pages

- 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>
This commit is contained in:
Claude 2025-07-12 05:01:34 +05:30
parent e03a30a735
commit cb04153d5e
4 changed files with 22 additions and 7 deletions

View File

@ -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%);

View File

@ -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 {

View File

@ -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 {

View File

@ -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 {