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