jukka/storagebox.fi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Switch to subdued blue/teal color scheme

Browse Source 
Replace vibrant purple/orange with calmer blue (#3b82f6) and
teal (#06b6d4) palette. Reduced glow effects and gradient intensity.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jukka Lampikoski
2026-03-10 03:04:56 +02:00
parent 79da66e202
commit dee2a87de1
1 changed files with 20 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
style.css
View File

@@ -6,19 +6,19 @@
}
:root {
--primary: #6366f1;
--primary-dark: #4f46e5;
--secondary: #8b5cf6;
--accent: #f59e0b;
--accent-light: #fbbf24;
--dark: #0f172a;
--dark-light: #1e293b;
--dark-card: #1a2332;
--text: #e2e8f0;
--text-muted: #94a3b8;
--white: #ffffff;
--border: rgba(255, 255, 255, 0.1);
--glow: rgba(99, 102, 241, 0.3);
--primary: #3b82f6;
--primary-dark: #2563eb;
--secondary: #06b6d4;
--accent: #3b82f6;
--accent-light: #60a5fa;
--dark: #0c1220;
--dark-light: #151d2e;
--dark-card: #131b2a;
--text: #d1d5db;
--text-muted: #7b8794;
--white: #f0f2f5;
--border: rgba(255, 255, 255, 0.07);
--glow: rgba(59, 130, 246, 0.2);
--radius: 12px;
--radius-lg: 20px;
}
@@ -49,7 +49,7 @@ a {
/* === Gradient Text === */
.gradient-text {
background: linear-gradient(135deg, var(--primary), var(--secondary), var(--accent));
background: linear-gradient(135deg, var(--primary), var(--secondary));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
@@ -149,9 +149,8 @@ a {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 80% 60% at 50% 0%, rgba(99, 102, 241, 0.25), transparent),
radial-gradient(ellipse 60% 50% at 80% 20%, rgba(139, 92, 246, 0.2), transparent),
radial-gradient(ellipse 40% 40% at 20% 60%, rgba(245, 158, 11, 0.1), transparent);
radial-gradient(ellipse 80% 60% at 50% 0%, rgba(59, 130, 246, 0.12), transparent),
radial-gradient(ellipse 60% 50% at 80% 20%, rgba(6, 182, 212, 0.08), transparent);
z-index: 0;
}
@@ -349,8 +348,8 @@ a {
}
.pricing-card.popular {
border-color: var(--accent);
background: linear-gradient(180deg, rgba(245, 158, 11, 0.08) 0%, var(--dark-card) 40%);
border-color: var(--primary);
background: linear-gradient(180deg, rgba(59, 130, 246, 0.06) 0%, var(--dark-card) 40%);
transform: scale(1.04);
z-index: 1;
}
@@ -364,8 +363,8 @@ a {
top: -12px;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(135deg, var(--accent), var(--accent-light));
color: var(--dark);
background: linear-gradient(135deg, var(--primary), var(--secondary));
color: var(--white);
font-size: 0.75rem;
font-weight: 700;
padding: 4px 20px;