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

Add unique logo and illustrations

Browse Source 
- New server rack + signal waves logo (header + footer, both pages)
- Isometric server room illustration in hero background with LED animations
- Network topology decoration in "Miksi me" section
- Blueprint/rack illustration in "Tekniset tiedot" section
- CSS animations for LED blinks and data flow particles
- Responsive: illustrations hidden on mobile, reduced on tablet

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jukka Lampikoski
2026-03-09 17:09:23 +02:00
parent 2bbbbe9c03
commit 0b246ddb56
3 changed files with 335 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

210
index.html
View File

@@ -12,14 +12,24 @@
<header class="header" id="header">
<div class="container header-inner">
<a href="/" class="logo">
<svg class="logo-icon" viewBox="0 0 32 32" width="32" height="32" fill="none">
<rect x="2" y="6" width="28" height="20" rx="3" stroke="currentColor" stroke-width="2"/>
<rect x="6" y="10" width="4" height="4" rx="1" fill="currentColor"/>
<rect x="6" y="18" width="4" height="4" rx="1" fill="currentColor"/>
<rect x="14" y="10" width="4" height="4" rx="1" fill="currentColor"/>
<rect x="14" y="18" width="4" height="4" rx="1" fill="currentColor"/>
<rect x="22" y="10" width="4" height="4" rx="1" fill="currentColor"/>
<rect x="22" y="18" width="4" height="4" rx="1" fill="currentColor"/>
<svg class="logo-icon" viewBox="0 0 32 38" width="28" height="33" fill="none">
<!-- Signal waves -->
<path d="M12.5 5.5a5.5 5.5 0 017 0" stroke="#f07060" stroke-width="1.6" stroke-linecap="round"/>
<path d="M9.5 2.5a9.5 9.5 0 0113 0" stroke="#f07060" stroke-width="1.4" stroke-linecap="round" opacity="0.4"/>
<!-- Rack body -->
<rect x="5" y="10" width="22" height="26" rx="3" stroke="currentColor" stroke-width="1.5"/>
<!-- Server units -->
<rect x="9" y="14" width="14" height="4.5" rx="1.5" stroke="currentColor" stroke-width="0.8" fill="currentColor" fill-opacity="0.06"/>
<rect x="9" y="21" width="14" height="4.5" rx="1.5" stroke="currentColor" stroke-width="0.8" fill="currentColor" fill-opacity="0.06"/>
<rect x="9" y="28" width="14" height="4.5" rx="1.5" stroke="currentColor" stroke-width="0.8" fill="currentColor" fill-opacity="0.06"/>
<!-- LED indicators -->
<circle cx="12.5" cy="16.25" r="1.4" fill="#f07060"/>
<circle cx="12.5" cy="23.25" r="1.4" fill="#f07060"/>
<circle cx="12.5" cy="30.25" r="1.4" fill="#f07060"/>
<!-- Activity lines -->
<line x1="17" y1="16.25" x2="21" y2="16.25" stroke="currentColor" stroke-width="0.8" opacity="0.3"/>
<line x1="17" y1="23.25" x2="21" y2="23.25" stroke="currentColor" stroke-width="0.8" opacity="0.3"/>
<line x1="17" y1="30.25" x2="21" y2="30.25" stroke="currentColor" stroke-width="0.8" opacity="0.3"/>
</svg>
<span>Konesali<strong>Turku</strong></span>
</a>
@@ -39,6 +49,81 @@
<!-- Hero -->
<section class="hero">
<!-- Isometric server room illustration -->
<div class="hero-illustration" aria-hidden="true">
<svg viewBox="0 0 600 500" fill="none" xmlns="http://www.w3.org/2000/svg">
<!-- Floor grid -->
<g opacity="0.15" stroke="#fff" stroke-width="0.5">
<line x1="80" y1="380" x2="520" y2="380"/>
<line x1="100" y1="400" x2="540" y2="400"/>
<line x1="120" y1="420" x2="560" y2="420"/>
<line x1="140" y1="440" x2="540" y2="440"/>
<line x1="200" y1="340" x2="200" y2="460"/>
<line x1="300" y1="340" x2="300" y2="460"/>
<line x1="400" y1="340" x2="400" y2="460"/>
<line x1="500" y1="340" x2="500" y2="460"/>
</g>
<!-- Server Rack 1 (left) -->
<g transform="translate(100, 140)">
<!-- Rack body - isometric -->
<path d="M0 60 L50 30 L130 70 L80 100 Z" fill="rgba(255,255,255,0.06)" stroke="rgba(255,255,255,0.2)" stroke-width="1"/>
<path d="M0 60 L0 220 L80 260 L80 100 Z" fill="rgba(255,255,255,0.08)" stroke="rgba(255,255,255,0.18)" stroke-width="1"/>
<path d="M80 100 L130 70 L130 230 L80 260 Z" fill="rgba(255,255,255,0.04)" stroke="rgba(255,255,255,0.15)" stroke-width="1"/>
<!-- Server units - front face -->
<rect x="5" y="80" width="72" height="18" rx="1" fill="rgba(255,255,255,0.07)" stroke="rgba(255,255,255,0.15)" transform="skewY(26.5)"/>
<rect x="5" y="105" width="72" height="18" rx="1" fill="rgba(255,255,255,0.07)" stroke="rgba(255,255,255,0.15)" transform="skewY(26.5)"/>
<rect x="5" y="130" width="72" height="18" rx="1" fill="rgba(255,255,255,0.07)" stroke="rgba(255,255,255,0.15)" transform="skewY(26.5)"/>
<rect x="5" y="155" width="72" height="18" rx="1" fill="rgba(255,255,255,0.07)" stroke="rgba(255,255,255,0.15)" transform="skewY(26.5)"/>
<!-- LED indicators -->
<circle cx="15" cy="128" r="3" fill="#e85d4a" opacity="0.9" class="led-blink"/>
<circle cx="15" cy="153" r="3" fill="#e85d4a" opacity="0.7"/>
<circle cx="15" cy="178" r="3" fill="#4ade80" opacity="0.7"/>
<circle cx="15" cy="203" r="3" fill="#e85d4a" opacity="0.8" class="led-blink-slow"/>
</g>
<!-- Server Rack 2 (center, taller) -->
<g transform="translate(250, 100)">
<path d="M0 60 L50 30 L130 70 L80 100 Z" fill="rgba(255,255,255,0.06)" stroke="rgba(255,255,255,0.22)" stroke-width="1"/>
<path d="M0 60 L0 250 L80 290 L80 100 Z" fill="rgba(255,255,255,0.1)" stroke="rgba(255,255,255,0.18)" stroke-width="1"/>
<path d="M80 100 L130 70 L130 260 L80 290 Z" fill="rgba(255,255,255,0.04)" stroke="rgba(255,255,255,0.15)" stroke-width="1"/>
<!-- Server units -->
<rect x="5" y="80" width="72" height="18" rx="1" fill="rgba(255,255,255,0.07)" stroke="rgba(255,255,255,0.15)" transform="skewY(26.5)"/>
<rect x="5" y="105" width="72" height="18" rx="1" fill="rgba(255,255,255,0.07)" stroke="rgba(255,255,255,0.15)" transform="skewY(26.5)"/>
<rect x="5" y="130" width="72" height="18" rx="1" fill="rgba(255,255,255,0.09)" stroke="rgba(255,255,255,0.2)" transform="skewY(26.5)"/>
<rect x="5" y="155" width="72" height="18" rx="1" fill="rgba(255,255,255,0.07)" stroke="rgba(255,255,255,0.15)" transform="skewY(26.5)"/>
<rect x="5" y="180" width="72" height="18" rx="1" fill="rgba(255,255,255,0.07)" stroke="rgba(255,255,255,0.15)" transform="skewY(26.5)"/>
<!-- LEDs -->
<circle cx="15" cy="128" r="3" fill="#4ade80" opacity="0.8"/>
<circle cx="15" cy="153" r="3" fill="#e85d4a" opacity="0.9" class="led-blink"/>
<circle cx="15" cy="178" r="3" fill="#4ade80" opacity="0.7"/>
<circle cx="15" cy="203" r="3" fill="#e85d4a" opacity="0.7" class="led-blink-slow"/>
<circle cx="15" cy="228" r="3" fill="#4ade80" opacity="0.7"/>
</g>
<!-- Server Rack 3 (right) -->
<g transform="translate(400, 140)">
<path d="M0 60 L50 30 L130 70 L80 100 Z" fill="rgba(255,255,255,0.06)" stroke="rgba(255,255,255,0.2)" stroke-width="1"/>
<path d="M0 60 L0 210 L80 250 L80 100 Z" fill="rgba(255,255,255,0.08)" stroke="rgba(255,255,255,0.18)" stroke-width="1"/>
<path d="M80 100 L130 70 L130 220 L80 250 Z" fill="rgba(255,255,255,0.04)" stroke="rgba(255,255,255,0.15)" stroke-width="1"/>
<rect x="5" y="80" width="72" height="18" rx="1" fill="rgba(255,255,255,0.07)" stroke="rgba(255,255,255,0.15)" transform="skewY(26.5)"/>
<rect x="5" y="105" width="72" height="18" rx="1" fill="rgba(255,255,255,0.07)" stroke="rgba(255,255,255,0.15)" transform="skewY(26.5)"/>
<rect x="5" y="130" width="72" height="18" rx="1" fill="rgba(255,255,255,0.07)" stroke="rgba(255,255,255,0.15)" transform="skewY(26.5)"/>
<circle cx="15" cy="128" r="3" fill="#e85d4a" opacity="0.8" class="led-blink-slow"/>
<circle cx="15" cy="153" r="3" fill="#4ade80" opacity="0.7"/>
<circle cx="15" cy="178" r="3" fill="#e85d4a" opacity="0.7" class="led-blink"/>
</g>
<!-- Network cables connecting racks -->
<g stroke="#e85d4a" stroke-width="1.5" opacity="0.35">
<path d="M180 280 Q240 255 330 235" fill="none"/>
<path d="M330 235 Q420 255 480 275" fill="none"/>
<path d="M180 310 Q340 270 480 310" fill="none" stroke-dasharray="4 4" opacity="0.2"/>
</g>
<!-- Data flow particles -->
<circle cx="230" cy="262" r="3" fill="#e85d4a" opacity="0.8" class="data-flow"/>
<circle cx="400" cy="248" r="3" fill="#e85d4a" opacity="0.6" class="data-flow-reverse"/>
<circle cx="330" cy="285" r="2.5" fill="#e85d4a" opacity="0.5" class="data-flow"/>
<!-- Subtle glow behind center rack -->
<ellipse cx="315" cy="250" rx="100" ry="60" fill="#e85d4a" opacity="0.03"/>
</svg>
</div>
<div class="container">
<div class="hero-grid">
<div class="hero-content">
@@ -365,6 +450,33 @@
<!-- Miksi me -->
<section class="section section-dark" id="miksi">
<!-- Network topology decoration -->
<div class="section-decoration" aria-hidden="true">
<svg viewBox="0 0 800 400" fill="none">
<!-- Network nodes -->
<circle cx="100" cy="80" r="4" fill="#e85d4a" opacity="0.3"/>
<circle cx="250" cy="50" r="3" fill="#e85d4a" opacity="0.2"/>
<circle cx="400" cy="90" r="5" fill="#e85d4a" opacity="0.15"/>
<circle cx="550" cy="40" r="3" fill="#e85d4a" opacity="0.25"/>
<circle cx="700" cy="70" r="4" fill="#e85d4a" opacity="0.2"/>
<circle cx="150" cy="320" r="3" fill="#e85d4a" opacity="0.2"/>
<circle cx="350" cy="350" r="4" fill="#e85d4a" opacity="0.15"/>
<circle cx="600" cy="330" r="3" fill="#e85d4a" opacity="0.25"/>
<circle cx="750" cy="360" r="3" fill="#e85d4a" opacity="0.15"/>
<!-- Connection lines -->
<line x1="100" y1="80" x2="250" y2="50" stroke="#e85d4a" stroke-width="0.5" opacity="0.12"/>
<line x1="250" y1="50" x2="400" y2="90" stroke="#e85d4a" stroke-width="0.5" opacity="0.1"/>
<line x1="400" y1="90" x2="550" y2="40" stroke="#e85d4a" stroke-width="0.5" opacity="0.12"/>
<line x1="550" y1="40" x2="700" y2="70" stroke="#e85d4a" stroke-width="0.5" opacity="0.1"/>
<line x1="150" y1="320" x2="350" y2="350" stroke="#e85d4a" stroke-width="0.5" opacity="0.1"/>
<line x1="350" y1="350" x2="600" y2="330" stroke="#e85d4a" stroke-width="0.5" opacity="0.12"/>
<line x1="600" y1="330" x2="750" y2="360" stroke="#e85d4a" stroke-width="0.5" opacity="0.1"/>
<!-- Cross connections -->
<line x1="100" y1="80" x2="150" y2="320" stroke="#e85d4a" stroke-width="0.3" opacity="0.06" stroke-dasharray="4 8"/>
<line x1="400" y1="90" x2="350" y2="350" stroke="#e85d4a" stroke-width="0.3" opacity="0.06" stroke-dasharray="4 8"/>
<line x1="700" y1="70" x2="750" y2="360" stroke="#e85d4a" stroke-width="0.3" opacity="0.06" stroke-dasharray="4 8"/>
</svg>
</div>
<div class="container">
<h2 class="section-title">Miksi Konesali Turku?</h2>
<p class="section-subtitle">Pienen konesalin edut isoihin ketjuihin verrattuna</p>
@@ -429,7 +541,66 @@
</section>
<!-- Tekniset tiedot lyhyesti -->
<section class="section" id="tekniikka">
<section class="section section-with-illustration" id="tekniikka">
<!-- Server room blueprint illustration -->
<div class="blueprint-decoration" aria-hidden="true">
<svg viewBox="0 0 300 500" fill="none">
<!-- Blueprint grid -->
<g stroke="#e85d4a" stroke-width="0.3" opacity="0.06">
<line x1="0" y1="50" x2="300" y2="50"/>
<line x1="0" y1="100" x2="300" y2="100"/>
<line x1="0" y1="150" x2="300" y2="150"/>
<line x1="0" y1="200" x2="300" y2="200"/>
<line x1="0" y1="250" x2="300" y2="250"/>
<line x1="0" y1="300" x2="300" y2="300"/>
<line x1="0" y1="350" x2="300" y2="350"/>
<line x1="0" y1="400" x2="300" y2="400"/>
<line x1="0" y1="450" x2="300" y2="450"/>
<line x1="50" y1="0" x2="50" y2="500"/>
<line x1="100" y1="0" x2="100" y2="500"/>
<line x1="150" y1="0" x2="150" y2="500"/>
<line x1="200" y1="0" x2="200" y2="500"/>
<line x1="250" y1="0" x2="250" y2="500"/>
</g>
<!-- Rack outline 1 -->
<rect x="40" y="60" width="80" height="180" rx="4" stroke="#e85d4a" stroke-width="1" opacity="0.12"/>
<rect x="50" y="75" width="60" height="12" rx="2" stroke="#e85d4a" stroke-width="0.5" opacity="0.08"/>
<rect x="50" y="95" width="60" height="12" rx="2" stroke="#e85d4a" stroke-width="0.5" opacity="0.08"/>
<rect x="50" y="115" width="60" height="12" rx="2" stroke="#e85d4a" stroke-width="0.5" opacity="0.08"/>
<rect x="50" y="135" width="60" height="12" rx="2" stroke="#e85d4a" stroke-width="0.5" opacity="0.08"/>
<rect x="50" y="155" width="60" height="12" rx="2" stroke="#e85d4a" stroke-width="0.5" opacity="0.08"/>
<rect x="50" y="175" width="60" height="12" rx="2" stroke="#e85d4a" stroke-width="0.5" opacity="0.08"/>
<rect x="50" y="195" width="60" height="12" rx="2" stroke="#e85d4a" stroke-width="0.5" opacity="0.08"/>
<rect x="50" y="215" width="60" height="12" rx="2" stroke="#e85d4a" stroke-width="0.5" opacity="0.08"/>
<!-- LED dots -->
<circle cx="57" cy="81" r="2" fill="#e85d4a" opacity="0.15"/>
<circle cx="57" cy="101" r="2" fill="#e85d4a" opacity="0.12"/>
<circle cx="57" cy="121" r="2" fill="#e85d4a" opacity="0.18"/>
<circle cx="57" cy="141" r="2" fill="#e85d4a" opacity="0.12"/>
<circle cx="57" cy="161" r="2" fill="#e85d4a" opacity="0.15"/>
<circle cx="57" cy="181" r="2" fill="#e85d4a" opacity="0.12"/>
<circle cx="57" cy="201" r="2" fill="#e85d4a" opacity="0.18"/>
<circle cx="57" cy="221" r="2" fill="#e85d4a" opacity="0.12"/>
<!-- Rack outline 2 -->
<rect x="160" y="100" width="80" height="160" rx="4" stroke="#e85d4a" stroke-width="1" opacity="0.1"/>
<rect x="170" y="115" width="60" height="12" rx="2" stroke="#e85d4a" stroke-width="0.5" opacity="0.06"/>
<rect x="170" y="135" width="60" height="12" rx="2" stroke="#e85d4a" stroke-width="0.5" opacity="0.06"/>
<rect x="170" y="155" width="60" height="12" rx="2" stroke="#e85d4a" stroke-width="0.5" opacity="0.06"/>
<rect x="170" y="175" width="60" height="12" rx="2" stroke="#e85d4a" stroke-width="0.5" opacity="0.06"/>
<rect x="170" y="195" width="60" height="12" rx="2" stroke="#e85d4a" stroke-width="0.5" opacity="0.06"/>
<rect x="170" y="215" width="60" height="12" rx="2" stroke="#e85d4a" stroke-width="0.5" opacity="0.06"/>
<!-- Cables between racks -->
<path d="M120 140 Q140 140 140 160 Q140 180 160 180" stroke="#e85d4a" stroke-width="0.6" opacity="0.1"/>
<path d="M120 160 Q145 160 145 175 Q145 195 160 195" stroke="#e85d4a" stroke-width="0.6" opacity="0.08"/>
<!-- Cooling pipes -->
<line x1="30" y1="280" x2="250" y2="280" stroke="#e85d4a" stroke-width="1.5" opacity="0.06" stroke-linecap="round"/>
<line x1="30" y1="290" x2="250" y2="290" stroke="#e85d4a" stroke-width="1" opacity="0.04" stroke-linecap="round"/>
<!-- Dimension markers -->
<line x1="40" y1="50" x2="120" y2="50" stroke="#e85d4a" stroke-width="0.5" opacity="0.1"/>
<line x1="40" y1="47" x2="40" y2="53" stroke="#e85d4a" stroke-width="0.5" opacity="0.1"/>
<line x1="120" y1="47" x2="120" y2="53" stroke="#e85d4a" stroke-width="0.5" opacity="0.1"/>
</svg>
</div>
<div class="container">
<h2 class="section-title">Tekniset tiedot</h2>
<p class="section-subtitle">Ammattitason infrastruktuuri vaativaan käyttöön. <a href="konesali.html">Katso kaikki tekniset tiedot &rarr;</a></p>
@@ -624,14 +795,19 @@
<div class="container footer-inner">
<div class="footer-brand">
<a href="/" class="logo">
<svg class="logo-icon" viewBox="0 0 32 32" width="24" height="24" fill="none">
<rect x="2" y="6" width="28" height="20" rx="3" stroke="currentColor" stroke-width="2"/>
<rect x="6" y="10" width="4" height="4" rx="1" fill="currentColor"/>
<rect x="6" y="18" width="4" height="4" rx="1" fill="currentColor"/>
<rect x="14" y="10" width="4" height="4" rx="1" fill="currentColor"/>
<rect x="14" y="18" width="4" height="4" rx="1" fill="currentColor"/>
<rect x="22" y="10" width="4" height="4" rx="1" fill="currentColor"/>
<rect x="22" y="18" width="4" height="4" rx="1" fill="currentColor"/>
<svg class="logo-icon" viewBox="0 0 32 38" width="22" height="26" fill="none">
<path d="M12.5 5.5a5.5 5.5 0 017 0" stroke="#f07060" stroke-width="1.6" stroke-linecap="round"/>
<path d="M9.5 2.5a9.5 9.5 0 0113 0" stroke="#f07060" stroke-width="1.4" stroke-linecap="round" opacity="0.4"/>
<rect x="5" y="10" width="22" height="26" rx="3" stroke="currentColor" stroke-width="1.5"/>
<rect x="9" y="14" width="14" height="4.5" rx="1.5" stroke="currentColor" stroke-width="0.8" fill="currentColor" fill-opacity="0.06"/>
<rect x="9" y="21" width="14" height="4.5" rx="1.5" stroke="currentColor" stroke-width="0.8" fill="currentColor" fill-opacity="0.06"/>
<rect x="9" y="28" width="14" height="4.5" rx="1.5" stroke="currentColor" stroke-width="0.8" fill="currentColor" fill-opacity="0.06"/>
<circle cx="12.5" cy="16.25" r="1.4" fill="#f07060"/>
<circle cx="12.5" cy="23.25" r="1.4" fill="#f07060"/>
<circle cx="12.5" cy="30.25" r="1.4" fill="#f07060"/>
<line x1="17" y1="16.25" x2="21" y2="16.25" stroke="currentColor" stroke-width="0.8" opacity="0.3"/>
<line x1="17" y1="23.25" x2="21" y2="23.25" stroke="currentColor" stroke-width="0.8" opacity="0.3"/>
<line x1="17" y1="30.25" x2="21" y2="30.25" stroke="currentColor" stroke-width="0.8" opacity="0.3"/>
</svg>
<span>Konesali<strong>Turku</strong></span>
</a>

42
konesali.html
View File

@@ -12,14 +12,19 @@
<header class="header" id="header">
<div class="container header-inner">
<a href="/" class="logo">
<svg class="logo-icon" viewBox="0 0 32 32" width="32" height="32" fill="none">
<rect x="2" y="6" width="28" height="20" rx="3" stroke="currentColor" stroke-width="2"/>
<rect x="6" y="10" width="4" height="4" rx="1" fill="currentColor"/>
<rect x="6" y="18" width="4" height="4" rx="1" fill="currentColor"/>
<rect x="14" y="10" width="4" height="4" rx="1" fill="currentColor"/>
<rect x="14" y="18" width="4" height="4" rx="1" fill="currentColor"/>
<rect x="22" y="10" width="4" height="4" rx="1" fill="currentColor"/>
<rect x="22" y="18" width="4" height="4" rx="1" fill="currentColor"/>
<svg class="logo-icon" viewBox="0 0 32 38" width="28" height="33" fill="none">
<path d="M12.5 5.5a5.5 5.5 0 017 0" stroke="#f07060" stroke-width="1.6" stroke-linecap="round"/>
<path d="M9.5 2.5a9.5 9.5 0 0113 0" stroke="#f07060" stroke-width="1.4" stroke-linecap="round" opacity="0.4"/>
<rect x="5" y="10" width="22" height="26" rx="3" stroke="currentColor" stroke-width="1.5"/>
<rect x="9" y="14" width="14" height="4.5" rx="1.5" stroke="currentColor" stroke-width="0.8" fill="currentColor" fill-opacity="0.06"/>
<rect x="9" y="21" width="14" height="4.5" rx="1.5" stroke="currentColor" stroke-width="0.8" fill="currentColor" fill-opacity="0.06"/>
<rect x="9" y="28" width="14" height="4.5" rx="1.5" stroke="currentColor" stroke-width="0.8" fill="currentColor" fill-opacity="0.06"/>
<circle cx="12.5" cy="16.25" r="1.4" fill="#f07060"/>
<circle cx="12.5" cy="23.25" r="1.4" fill="#f07060"/>
<circle cx="12.5" cy="30.25" r="1.4" fill="#f07060"/>
<line x1="17" y1="16.25" x2="21" y2="16.25" stroke="currentColor" stroke-width="0.8" opacity="0.3"/>
<line x1="17" y1="23.25" x2="21" y2="23.25" stroke="currentColor" stroke-width="0.8" opacity="0.3"/>
<line x1="17" y1="30.25" x2="21" y2="30.25" stroke="currentColor" stroke-width="0.8" opacity="0.3"/>
</svg>
<span>Konesali<strong>Turku</strong></span>
</a>
@@ -388,14 +393,19 @@
<div class="container footer-inner">
<div class="footer-brand">
<a href="/" class="logo">
<svg class="logo-icon" viewBox="0 0 32 32" width="24" height="24" fill="none">
<rect x="2" y="6" width="28" height="20" rx="3" stroke="currentColor" stroke-width="2"/>
<rect x="6" y="10" width="4" height="4" rx="1" fill="currentColor"/>
<rect x="6" y="18" width="4" height="4" rx="1" fill="currentColor"/>
<rect x="14" y="10" width="4" height="4" rx="1" fill="currentColor"/>
<rect x="14" y="18" width="4" height="4" rx="1" fill="currentColor"/>
<rect x="22" y="10" width="4" height="4" rx="1" fill="currentColor"/>
<rect x="22" y="18" width="4" height="4" rx="1" fill="currentColor"/>
<svg class="logo-icon" viewBox="0 0 32 38" width="22" height="26" fill="none">
<path d="M12.5 5.5a5.5 5.5 0 017 0" stroke="#f07060" stroke-width="1.6" stroke-linecap="round"/>
<path d="M9.5 2.5a9.5 9.5 0 0113 0" stroke="#f07060" stroke-width="1.4" stroke-linecap="round" opacity="0.4"/>
<rect x="5" y="10" width="22" height="26" rx="3" stroke="currentColor" stroke-width="1.5"/>
<rect x="9" y="14" width="14" height="4.5" rx="1.5" stroke="currentColor" stroke-width="0.8" fill="currentColor" fill-opacity="0.06"/>
<rect x="9" y="21" width="14" height="4.5" rx="1.5" stroke="currentColor" stroke-width="0.8" fill="currentColor" fill-opacity="0.06"/>
<rect x="9" y="28" width="14" height="4.5" rx="1.5" stroke="currentColor" stroke-width="0.8" fill="currentColor" fill-opacity="0.06"/>
<circle cx="12.5" cy="16.25" r="1.4" fill="#f07060"/>
<circle cx="12.5" cy="23.25" r="1.4" fill="#f07060"/>
<circle cx="12.5" cy="30.25" r="1.4" fill="#f07060"/>
<line x1="17" y1="16.25" x2="21" y2="16.25" stroke="currentColor" stroke-width="0.8" opacity="0.3"/>
<line x1="17" y1="23.25" x2="21" y2="23.25" stroke="currentColor" stroke-width="0.8" opacity="0.3"/>
<line x1="17" y1="30.25" x2="21" y2="30.25" stroke="currentColor" stroke-width="0.8" opacity="0.3"/>
</svg>
<span>Konesali<strong>Turku</strong></span>
</a>

116
style.css
View File

@@ -1249,6 +1249,108 @@ a:hover {
color: rgba(255, 255, 255, 0.6);
}
/* === Hero Illustration === */
.hero-illustration {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
overflow: hidden;
}
.hero-illustration svg {
position: absolute;
right: -20px;
top: 50%;
transform: translateY(-50%);
width: 650px;
height: 550px;
opacity: 1;
}
/* LED blink animations */
@keyframes ledBlink {
0%, 100% { opacity: 0.8; }
50% { opacity: 0.2; }
}
@keyframes ledBlinkSlow {
0%, 100% { opacity: 0.7; }
50% { opacity: 0.15; }
}
@keyframes dataFlow {
0% { transform: translateX(0); opacity: 0.6; }
50% { opacity: 0.9; }
100% { transform: translateX(80px); opacity: 0; }
}
@keyframes dataFlowReverse {
0% { transform: translateX(0); opacity: 0.4; }
50% { opacity: 0.7; }
100% { transform: translateX(-80px); opacity: 0; }
}
.led-blink {
animation: ledBlink 2s ease-in-out infinite;
}
.led-blink-slow {
animation: ledBlinkSlow 3.5s ease-in-out infinite;
}
.data-flow {
animation: dataFlow 4s ease-in-out infinite;
}
.data-flow-reverse {
animation: dataFlowReverse 5s ease-in-out infinite;
}
/* === Section Decorations === */
.section-decoration {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
overflow: hidden;
}
.section-decoration svg {
width: 100%;
height: 100%;
}
.section-dark {
position: relative;
overflow: hidden;
}
/* === Blueprint Decoration === */
.section-with-illustration {
position: relative;
overflow: hidden;
}
.blueprint-decoration {
position: absolute;
top: 0;
right: -40px;
width: 300px;
height: 100%;
pointer-events: none;
opacity: 0.6;
}
.blueprint-decoration svg {
width: 100%;
height: 100%;
}
/* === Animations === */
.fade-in {
opacity: 0;
@@ -1263,6 +1365,16 @@ a:hover {
/* === Responsive === */
@media (max-width: 1024px) {
.hero-illustration svg {
width: 400px;
right: -100px;
opacity: 0.5;
}
.blueprint-decoration {
display: none;
}
.hero-grid {
grid-template-columns: 1fr;
gap: 40px;
@@ -1341,6 +1453,10 @@ a:hover {
transform: rotate(-45deg) translate(5px, -5px);
}
.hero-illustration {
display: none;
}
.hero {
padding: 120px 0 60px;
}