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

View File

@@ -12,22 +12,22 @@
--bg-elevated: #222225;
--bg-hover: #2a2a2e;
/* Accent colors */
--accent-primary: #6366f1;
--accent-primary-hover: #818cf8;
--accent-secondary: #8b5cf6;
--accent-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
/* Accent colors - Green/Emerald theme */
--accent-primary: #10b981;
--accent-primary-hover: #34d399;
--accent-secondary: #059669;
--accent-gradient: linear-gradient(135deg, #10b981 0%, #059669 100%);
/* Text colors */
--text-primary: #fafafa;
--text-secondary: #a1a1aa;
--text-tertiary: #71717a;
--text-muted: #52525b;
/* Text colors - improved contrast */
--text-primary: #f9fafb;
--text-secondary: #d1d5db;
--text-tertiary: #9ca3af;
--text-muted: #6b7280;
/* Border colors */
--border-primary: #27272a;
--border-secondary: #3f3f46;
--border-accent: #6366f1;
--border-accent: #10b981;
/* Status colors */
--success: #22c55e;
@@ -41,7 +41,7 @@
--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-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 */
--transition-fast: 150ms ease;

View File

@@ -34,12 +34,12 @@
.btn-primary {
background: var(--accent-gradient);
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 {
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 {
@@ -120,7 +120,7 @@
.form-group textarea:focus {
outline: none;
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);
}

View File

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