From 440670e8305ef1c702a8d55550b283a58a545ab6 Mon Sep 17 00:00:00 2001 From: Jukka Lampikoski Date: Mon, 9 Mar 2026 18:05:31 +0200 Subject: [PATCH] Add section illustrations and custom logo font (Space Grotesk) - Add Google Font Space Grotesk for logo, coral-colored "Turku" - Add SVG illustrations: server rack (Palvelut), wind turbines (Energia), chat bubbles (UKK), envelope/location (Yhteystiedot) - CSS positioning for illustration-left/right with responsive hiding Co-Authored-By: Claude Opus 4.6 --- index.html | 155 ++++++++++++++++++++++++++++++++++++++++++++++++-- konesali.html | 3 + style.css | 35 +++++++++++- 3 files changed, 186 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index 8f4cd71..11f64b0 100644 --- a/index.html +++ b/index.html @@ -5,6 +5,9 @@ Konesali Turku — Colocation & konesalipalvelut Turussa + + + @@ -173,7 +176,58 @@ -
+
+ +

Palvelut

Colocation-laitepaikkoja yksittäisestä palvelimesta kokokaappiin

@@ -421,7 +475,47 @@
-
+
+ +
@@ -650,7 +744,32 @@
-
+
+ +

Usein kysytyt kysymykset

Vastauksia yleisimpiin colocation-palveluita koskeviin kysymyksiin

@@ -714,7 +833,35 @@
-
+
+ +

Ota yhteyttä

Kerro tarpeistasi, niin teemme sinulle tarjouksen

diff --git a/konesali.html b/konesali.html index d3472cd..a223771 100644 --- a/konesali.html +++ b/konesali.html @@ -5,6 +5,9 @@ Konesali — Tekniset tiedot | Konesali Turku + + + diff --git a/style.css b/style.css index d60d8b4..4af89a2 100644 --- a/style.css +++ b/style.css @@ -114,9 +114,10 @@ a:hover { align-items: center; gap: 10px; color: var(--color-white); - font-size: 1.25rem; + font-family: 'Space Grotesk', var(--font-family); + font-size: 1.3rem; font-weight: 400; - letter-spacing: -0.01em; + letter-spacing: -0.02em; } .logo:hover { @@ -125,6 +126,7 @@ a:hover { .logo strong { font-weight: 700; + color: var(--color-primary-light); } .logo-icon { @@ -1351,6 +1353,31 @@ a:hover { height: 100%; } +/* === Section Illustrations === */ +.illustration-left, +.illustration-right { + position: absolute; + top: 0; + bottom: 0; + width: 220px; + pointer-events: none; + z-index: 0; +} + +.illustration-left { + left: 0; +} + +.illustration-right { + right: 0; +} + +.illustration-left svg, +.illustration-right svg { + width: 100%; + height: 100%; +} + /* === Animations === */ .fade-in { opacity: 0; @@ -1371,7 +1398,9 @@ a:hover { opacity: 0.5; } - .blueprint-decoration { + .blueprint-decoration, + .illustration-left, + .illustration-right { display: none; }