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

Switch color theme from blue to purple/violet

Browse Source 
- Primary: #8b5cf6 (violet), light: #a78bfa, dark: #7c3aed
- Accent: #22d3ee (cyan) for contrast
- Background tones shifted to deep purple (#0c0a1d)
- All hardcoded rgba blue values updated to violet
- Differentiates from typical blue hosting/colocation sites

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jukka Lampikoski
2026-03-09 15:54:09 +02:00
parent 74f28c932c
commit 27189f54e8
1 changed files with 18 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
style.css
View File

@@ -6,18 +6,18 @@
} }
:root { :root {
--color-bg: #0a1628; --color-bg: #0c0a1d;
--color-bg-light: #0f1f3d; --color-bg-light: #151030;
--color-bg-card: #132244; --color-bg-card: #1a1340;
--color-primary: #1a73e8; --color-primary: #8b5cf6;
--color-primary-light: #4a9af5; --color-primary-light: #a78bfa;
--color-primary-dark: #1557b0; --color-primary-dark: #7c3aed;
--color-accent: #00d4aa; --color-accent: #22d3ee;
--color-text: #e2e8f0; --color-text: #e2e8f0;
--color-text-muted: #94a3b8; --color-text-muted: #94a3b8;
--color-text-heading: #f1f5f9; --color-text-heading: #f1f5f9;
--color-border: #1e3a5f; --color-border: #2d1f5e;
--color-surface: #162a4a; --color-surface: #1e1545;
--color-white: #ffffff; --color-white: #ffffff;
--font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; --font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
--max-width: 1200px; --max-width: 1200px;
@@ -174,8 +174,8 @@ a:hover {
right: 0; right: 0;
bottom: 0; bottom: 0;
background: background:
radial-gradient(ellipse 800px 600px at 20% 50%, rgba(26, 115, 232, 0.08) 0%, transparent 70%), radial-gradient(ellipse 800px 600px at 20% 50%, rgba(139, 92, 246, 0.08) 0%, transparent 70%),
radial-gradient(ellipse 600px 400px at 80% 30%, rgba(0, 212, 170, 0.05) 0%, transparent 70%); radial-gradient(ellipse 600px 400px at 80% 30%, rgba(34, 211, 238, 0.05) 0%, transparent 70%);
pointer-events: none; pointer-events: none;
} }
@@ -287,7 +287,7 @@ a:hover {
.hero-price-card-featured { .hero-price-card-featured {
border-color: var(--color-primary); border-color: var(--color-primary);
background: rgba(26, 115, 232, 0.1); background: rgba(139, 92, 246, 0.1);
} }
.hero-price-badge { .hero-price-badge {
@@ -357,7 +357,7 @@ a:hover {
background: var(--color-primary-dark); background: var(--color-primary-dark);
color: var(--color-white); color: var(--color-white);
transform: translateY(-2px); transform: translateY(-2px);
box-shadow: 0 4px 20px rgba(26, 115, 232, 0.4); box-shadow: 0 4px 20px rgba(139, 92, 246, 0.4);
} }
.btn-secondary { .btn-secondary {
@@ -436,7 +436,7 @@ a:hover {
.service-card.featured { .service-card.featured {
border-color: var(--color-primary); border-color: var(--color-primary);
background: linear-gradient(180deg, rgba(26, 115, 232, 0.08) 0%, var(--color-bg-card) 100%); background: linear-gradient(180deg, rgba(139, 92, 246, 0.08) 0%, var(--color-bg-card) 100%);
} }
.service-badge { .service-badge {
@@ -543,7 +543,7 @@ a:hover {
.pricing-featured { .pricing-featured {
border-color: var(--color-primary); border-color: var(--color-primary);
background: linear-gradient(180deg, rgba(26, 115, 232, 0.1) 0%, var(--color-bg-card) 100%); background: linear-gradient(180deg, rgba(139, 92, 246, 0.1) 0%, var(--color-bg-card) 100%);
transform: scale(1.04); transform: scale(1.04);
} }
@@ -671,7 +671,7 @@ a:hover {
.form-group textarea:focus { .form-group textarea:focus {
outline: none; outline: none;
border-color: var(--color-primary); border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.15); box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
} }
.form-group textarea { .form-group textarea {
@@ -812,7 +812,7 @@ a:hover {
.green-badge { .green-badge {
display: inline-block; display: inline-block;
background: rgba(0, 212, 170, 0.15); background: rgba(34, 211, 238, 0.15);
color: var(--color-accent); color: var(--color-accent);
font-size: 0.85rem; font-size: 0.85rem;
font-weight: 700; font-weight: 700;
@@ -821,7 +821,7 @@ a:hover {
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.05em; letter-spacing: 0.05em;
margin-bottom: 20px; margin-bottom: 20px;
border: 1px solid rgba(0, 212, 170, 0.3); border: 1px solid rgba(34, 211, 238, 0.3);
} }
.green-energy h2 { .green-energy h2 {