Switch accent color to green and improve text contrast

- Change accent colors from purple to emerald green (#10b981)
- Improve navbar text contrast (use text-primary instead of text-secondary)
- Improve footer link contrast
- Update all glow/shadow effects to match green theme
- Bump muted/tertiary text colors for better readability
This commit is contained in:
Mondo Diaz
2025-12-11 14:52:12 -06:00
parent d9d8e14e52
commit 3488dea11d
4 changed files with 24 additions and 24 deletions

View File

@@ -68,7 +68,7 @@
align-items: center; align-items: center;
gap: 8px; gap: 8px;
padding: 8px 16px; padding: 8px 16px;
color: var(--text-secondary); color: var(--text-primary);
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 500; font-weight: 500;
border-radius: var(--radius-md); border-radius: var(--radius-md);
@@ -82,11 +82,11 @@
.nav a.active { .nav a.active {
color: var(--accent-primary); color: var(--accent-primary);
background: rgba(99, 102, 241, 0.1); background: rgba(16, 185, 129, 0.1);
} }
.nav a svg { .nav a svg {
opacity: 0.7; opacity: 0.8;
} }
.nav a:hover svg, .nav a:hover svg,
@@ -95,7 +95,7 @@
} }
.nav-link-muted { .nav-link-muted {
opacity: 0.6; opacity: 0.7;
} }
/* Main content */ /* Main content */
@@ -129,7 +129,7 @@
} }
.footer-tagline { .footer-tagline {
color: var(--text-tertiary); color: var(--text-secondary);
font-size: 0.875rem; font-size: 0.875rem;
} }
@@ -139,13 +139,13 @@
} }
.footer-links a { .footer-links a {
color: var(--text-tertiary); color: var(--text-secondary);
font-size: 0.875rem; font-size: 0.875rem;
transition: color var(--transition-fast); transition: color var(--transition-fast);
} }
.footer-links a:hover { .footer-links a:hover {
color: var(--text-secondary); color: var(--text-primary);
} }
/* Responsive */ /* Responsive */

View File

@@ -12,22 +12,22 @@
--bg-elevated: #222225; --bg-elevated: #222225;
--bg-hover: #2a2a2e; --bg-hover: #2a2a2e;
/* Accent colors */ /* Accent colors - Green/Emerald theme */
--accent-primary: #6366f1; --accent-primary: #10b981;
--accent-primary-hover: #818cf8; --accent-primary-hover: #34d399;
--accent-secondary: #8b5cf6; --accent-secondary: #059669;
--accent-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); --accent-gradient: linear-gradient(135deg, #10b981 0%, #059669 100%);
/* Text colors */ /* Text colors - improved contrast */
--text-primary: #fafafa; --text-primary: #f9fafb;
--text-secondary: #a1a1aa; --text-secondary: #d1d5db;
--text-tertiary: #71717a; --text-tertiary: #9ca3af;
--text-muted: #52525b; --text-muted: #6b7280;
/* Border colors */ /* Border colors */
--border-primary: #27272a; --border-primary: #27272a;
--border-secondary: #3f3f46; --border-secondary: #3f3f46;
--border-accent: #6366f1; --border-accent: #10b981;
/* Status colors */ /* Status colors */
--success: #22c55e; --success: #22c55e;
@@ -41,7 +41,7 @@
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.4); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
--shadow-glow: 0 0 20px rgba(99, 102, 241, 0.3); --shadow-glow: 0 0 20px rgba(16, 185, 129, 0.3);
/* Transitions */ /* Transitions */
--transition-fast: 150ms ease; --transition-fast: 150ms ease;

View File

@@ -34,12 +34,12 @@
.btn-primary { .btn-primary {
background: var(--accent-gradient); background: var(--accent-gradient);
color: white; color: white;
box-shadow: var(--shadow-sm), 0 0 20px rgba(99, 102, 241, 0.2); box-shadow: var(--shadow-sm), 0 0 20px rgba(16, 185, 129, 0.2);
} }
.btn-primary:hover { .btn-primary:hover {
transform: translateY(-1px); transform: translateY(-1px);
box-shadow: var(--shadow-md), 0 0 30px rgba(99, 102, 241, 0.3); box-shadow: var(--shadow-md), 0 0 30px rgba(16, 185, 129, 0.3);
} }
.btn-primary:active { .btn-primary:active {
@@ -120,7 +120,7 @@
.form-group textarea:focus { .form-group textarea:focus {
outline: none; outline: none;
border-color: var(--accent-primary); border-color: var(--accent-primary);
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15); box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
background: var(--bg-elevated); background: var(--bg-elevated);
} }

View File

@@ -1,8 +1,8 @@
/* Upload Section */ /* Upload Section */
.upload-section { .upload-section {
margin-bottom: 32px; margin-bottom: 32px;
background: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, rgba(139, 92, 246, 0.05) 100%); background: linear-gradient(135deg, rgba(16, 185, 129, 0.05) 0%, rgba(5, 150, 105, 0.05) 100%);
border: 1px solid rgba(99, 102, 241, 0.2); border: 1px solid rgba(16, 185, 129, 0.2);
} }
.upload-section h3 { .upload-section h3 {