fix: Mesh als Logo-Cluster (v1.5.1)
Das alte Random-Network-Mesh wirkte unbestimmt — neu als drei wiederholte Sonith-Logo-Sterne in unterschiedlichen Skalen, sodass die Marken-DNA klar durchscheint. - Jeder Cluster: zentraler gefuellter Knoten + pulsierender Ring + 5 strahlenfoermige Linien zu Aussenknoten in der originalen Logo-Anordnung (asymmetrisch nach rechts verlaengert wie im CI-Logo) - Cluster A links-mitte (Skala 6, dominant), Cluster B rechts oben (3.5), Cluster C rechts unten (2.5) — gestaffelte Tiefe - Ring atmet (scale + opacity), Core pulsiert mit Glow, Aussenknoten asynchron via inline animation-delay - Linien als gestrichelte Petrol-Bahnen mit stroke-dashoffset-Datenfluss Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -73,4 +73,4 @@ Statische Dateien direkt auf Nginx ausliefern. Kein Build-Step notwendig.
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
*Zuletzt aktualisiert: Mai 2026 — v1.5.0 (animiertes Knoten-Mesh im Hero)*
|
*Zuletzt aktualisiert: Mai 2026 — v1.5.1 (Mesh als Logo-Cluster überarbeitet)*
|
||||||
|
|||||||
+52
-17
@@ -88,45 +88,80 @@ html {
|
|||||||
0 0 48px rgba(6, 115, 145, 0.06);
|
0 0 48px rgba(6, 115, 145, 0.06);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ---- Hero Mesh: animiertes Knoten-Netz im Logo-Stil ---- */
|
/* ---- Hero Mesh: Logo-Cluster (Sonith-Stern wiederholt) ----
|
||||||
|
Greift das exakte Logo-Motiv auf: zentraler Knoten mit Ring + 5 strahlenfoermige
|
||||||
|
Linien zu Aussenknoten in der Original-Logo-Anordnung (asymmetrisch nach rechts
|
||||||
|
verlaengert). Drei Cluster mit unterschiedlicher Skala fuer Tiefe. */
|
||||||
.hero-mesh {
|
.hero-mesh {
|
||||||
opacity: 0.55;
|
opacity: 0.55;
|
||||||
mix-blend-mode: screen;
|
mix-blend-mode: screen;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mesh-lines line {
|
.logo-cluster line {
|
||||||
stroke-opacity: 0.25;
|
stroke: #067391;
|
||||||
stroke-dasharray: 4 8;
|
stroke-width: 1.6;
|
||||||
animation: line-flow 6s linear infinite;
|
stroke-linecap: round;
|
||||||
|
stroke-opacity: 0.45;
|
||||||
|
fill: none;
|
||||||
|
stroke-dasharray: 6 10;
|
||||||
|
animation: line-flow 8s linear infinite;
|
||||||
}
|
}
|
||||||
|
.cluster-b line { stroke-width: 1.2; stroke-opacity: 0.4; animation-duration: 6.5s; animation-delay: -2s; }
|
||||||
.mesh-lines line:nth-child(3n) { animation-duration: 9s; stroke-opacity: 0.18; }
|
.cluster-c line { stroke-width: 1.0; stroke-opacity: 0.35; animation-duration: 10s; animation-delay: -4s; }
|
||||||
.mesh-lines line:nth-child(3n+1) { animation-duration: 7s; animation-delay: -2s; }
|
|
||||||
.mesh-lines line:nth-child(3n+2) { animation-duration: 11s; animation-delay: -4s; stroke-opacity: 0.30; }
|
|
||||||
|
|
||||||
@keyframes line-flow {
|
@keyframes line-flow {
|
||||||
to { stroke-dashoffset: -48; }
|
to { stroke-dashoffset: -48; }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.cluster-core {
|
||||||
|
fill: #DEDC1E;
|
||||||
|
filter: drop-shadow(0 0 10px rgba(222, 220, 30, 0.7));
|
||||||
|
transform-box: fill-box;
|
||||||
|
transform-origin: center;
|
||||||
|
animation: core-pulse 3.2s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
.cluster-b .cluster-core { animation-delay: -1s; }
|
||||||
|
.cluster-c .cluster-core { animation-delay: -2s; }
|
||||||
|
|
||||||
|
@keyframes core-pulse {
|
||||||
|
0%, 100% { transform: scale(1); opacity: 0.85; }
|
||||||
|
50% { transform: scale(1.15); opacity: 1; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.cluster-ring {
|
||||||
|
fill: none;
|
||||||
|
stroke: #DEDC1E;
|
||||||
|
stroke-width: 1.6;
|
||||||
|
stroke-opacity: 0.55;
|
||||||
|
transform-box: fill-box;
|
||||||
|
transform-origin: center;
|
||||||
|
animation: ring-pulse 4s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
.cluster-b .cluster-ring { animation-delay: -1.5s; }
|
||||||
|
.cluster-c .cluster-ring { animation-delay: -2.5s; }
|
||||||
|
|
||||||
|
@keyframes ring-pulse {
|
||||||
|
0%, 100% { transform: scale(1); stroke-opacity: 0.55; }
|
||||||
|
50% { transform: scale(1.18); stroke-opacity: 0.20; }
|
||||||
|
}
|
||||||
|
|
||||||
.node {
|
.node {
|
||||||
|
fill: #DEDC1E;
|
||||||
|
filter: drop-shadow(0 0 5px rgba(222, 220, 30, 0.5));
|
||||||
transform-box: fill-box;
|
transform-box: fill-box;
|
||||||
transform-origin: center;
|
transform-origin: center;
|
||||||
animation: node-pulse 3.6s ease-in-out infinite;
|
animation: node-pulse 3.6s ease-in-out infinite;
|
||||||
filter: drop-shadow(0 0 4px rgba(222, 220, 30, 0.6));
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.node:nth-child(2n) { animation-delay: -0.8s; animation-duration: 4.2s; }
|
|
||||||
.node:nth-child(3n) { animation-delay: -1.6s; animation-duration: 5.0s; }
|
|
||||||
.node:nth-child(4n+1) { animation-delay: -2.4s; }
|
|
||||||
.node:nth-child(5n+2) { animation-delay: -3.0s; animation-duration: 4.8s; }
|
|
||||||
|
|
||||||
@keyframes node-pulse {
|
@keyframes node-pulse {
|
||||||
0%, 100% { transform: scale(1); opacity: 0.55; }
|
0%, 100% { transform: scale(1); opacity: 0.55; }
|
||||||
50% { transform: scale(1.6); opacity: 1; }
|
50% { transform: scale(1.5); opacity: 1; }
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-reduced-motion: reduce) {
|
@media (prefers-reduced-motion: reduce) {
|
||||||
.mesh-lines line,
|
.logo-cluster line,
|
||||||
|
.cluster-core,
|
||||||
|
.cluster-ring,
|
||||||
.node { animation: none !important; }
|
.node { animation: none !important; }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
+1
-1
@@ -208,7 +208,7 @@
|
|||||||
<div class="flex flex-col sm:flex-row items-center justify-between gap-4">
|
<div class="flex flex-col sm:flex-row items-center justify-between gap-4">
|
||||||
<div class="flex items-center gap-3">
|
<div class="flex items-center gap-3">
|
||||||
<p class="text-ci-gray text-sm">© 2026 sonith UG (haftungsbeschränkt)</p>
|
<p class="text-ci-gray text-sm">© 2026 sonith UG (haftungsbeschränkt)</p>
|
||||||
<span class="text-ci-gray/60 text-xs">v1.5.0</span>
|
<span class="text-ci-gray/60 text-xs">v1.5.1</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex items-center gap-6">
|
<div class="flex items-center gap-6">
|
||||||
<a href="impressum.html" class="text-ci-gray text-sm hover:text-sonith transition-colors">Impressum</a>
|
<a href="impressum.html" class="text-ci-gray text-sm hover:text-sonith transition-colors">Impressum</a>
|
||||||
|
|||||||
+1
-1
@@ -91,7 +91,7 @@
|
|||||||
<div class="flex flex-col sm:flex-row items-center justify-between gap-4">
|
<div class="flex flex-col sm:flex-row items-center justify-between gap-4">
|
||||||
<div class="flex items-center gap-3">
|
<div class="flex items-center gap-3">
|
||||||
<p class="text-ci-gray text-sm">© 2026 sonith UG (haftungsbeschränkt)</p>
|
<p class="text-ci-gray text-sm">© 2026 sonith UG (haftungsbeschränkt)</p>
|
||||||
<span class="text-ci-gray/60 text-xs">v1.5.0</span>
|
<span class="text-ci-gray/60 text-xs">v1.5.1</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex items-center gap-6">
|
<div class="flex items-center gap-6">
|
||||||
<a href="impressum.html" class="text-sonith text-sm">Impressum</a>
|
<a href="impressum.html" class="text-sonith text-sm">Impressum</a>
|
||||||
|
|||||||
+50
-37
@@ -132,45 +132,58 @@
|
|||||||
<div class="orb orb-sonith absolute top-[55%] right-[12%] w-80 h-80 rounded-full opacity-20"></div>
|
<div class="orb orb-sonith absolute top-[55%] right-[12%] w-80 h-80 rounded-full opacity-20"></div>
|
||||||
<div class="orb orb-petrol-2 absolute bottom-[12%] left-[35%] w-64 h-64 rounded-full opacity-25"></div>
|
<div class="orb orb-petrol-2 absolute bottom-[12%] left-[35%] w-64 h-64 rounded-full opacity-25"></div>
|
||||||
|
|
||||||
<!-- Animiertes Knoten-Mesh: greift das Logo-Motiv (Netzwerk-Knoten) auf
|
<!-- Logo-Cluster-Mesh: drei wiederholte Sonith-Logo-Sterne (zentraler Knoten +
|
||||||
und transportiert visuell die MSP-/Netzwerk-Kompetenz.
|
pulsierender Ring + 5 strahlenfoermige Linien zu Aussenknoten in exakter
|
||||||
Linien pulsieren mit Datenfluss-Effekt, Knoten leuchten zyklisch auf. -->
|
Logo-Anordnung, asymmetrisch nach rechts verlaengert). Vermittelt visuell
|
||||||
|
die Marken-DNA als Netzwerk-Cluster. -->
|
||||||
<svg class="hero-mesh absolute inset-0 w-full h-full pointer-events-none" viewBox="0 0 1200 800" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
|
<svg class="hero-mesh absolute inset-0 w-full h-full pointer-events-none" viewBox="0 0 1200 800" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
|
||||||
<!-- Verbindungslinien (CI-Petrol) -->
|
|
||||||
<g class="mesh-lines" stroke="#067391" stroke-width="0.9" stroke-linecap="round" fill="none">
|
<!-- Cluster A — Hauptmotiv links-mitte (Skala 6) -->
|
||||||
<line x1="180" y1="140" x2="380" y2="90"/>
|
<g class="logo-cluster cluster-a">
|
||||||
<line x1="180" y1="140" x2="140" y2="380"/>
|
<line x1="300" y1="400" x2="216" y2="292"/>
|
||||||
<line x1="180" y1="140" x2="300" y2="540"/>
|
<line x1="300" y1="400" x2="417" y2="296"/>
|
||||||
<line x1="380" y1="90" x2="620" y2="180"/>
|
<line x1="300" y1="400" x2="574" y2="396"/>
|
||||||
<line x1="620" y1="180" x2="880" y2="110"/>
|
<line x1="300" y1="400" x2="178" y2="401"/>
|
||||||
<line x1="620" y1="180" x2="520" y2="460"/>
|
<line x1="300" y1="400" x2="308" y2="489"/>
|
||||||
<line x1="880" y1="110" x2="1080" y2="280"/>
|
<circle class="cluster-ring" cx="300" cy="400" r="32"/>
|
||||||
<line x1="1080" y1="280" x2="980" y2="480"/>
|
<circle class="cluster-core" cx="300" cy="400" r="18"/>
|
||||||
<line x1="980" y1="480" x2="740" y2="540"/>
|
<circle class="node" cx="216" cy="292" r="8" style="animation-delay: -0.4s"/>
|
||||||
<line x1="740" y1="540" x2="520" y2="460"/>
|
<circle class="node" cx="417" cy="296" r="8" style="animation-delay: -1.2s"/>
|
||||||
<line x1="740" y1="540" x2="860" y2="720"/>
|
<circle class="node" cx="574" cy="396" r="8" style="animation-delay: -2.0s"/>
|
||||||
<line x1="520" y1="460" x2="300" y2="540"/>
|
<circle class="node" cx="178" cy="401" r="8" style="animation-delay: -2.8s"/>
|
||||||
<line x1="520" y1="460" x2="560" y2="700"/>
|
<circle class="node" cx="308" cy="489" r="8" style="animation-delay: -1.6s"/>
|
||||||
<line x1="300" y1="540" x2="140" y2="380"/>
|
|
||||||
<line x1="300" y1="540" x2="560" y2="700"/>
|
|
||||||
<line x1="560" y1="700" x2="860" y2="720"/>
|
|
||||||
<line x1="1080" y1="280" x2="740" y2="540"/>
|
|
||||||
</g>
|
</g>
|
||||||
|
|
||||||
<!-- Knoten (CI-Sonith-Gelb) mit asynchroner Pulse-Animation -->
|
<!-- Cluster B — Echo rechts oben (Skala 3.5) -->
|
||||||
<g class="mesh-nodes" fill="#DEDC1E">
|
<g class="logo-cluster cluster-b">
|
||||||
<circle class="node" cx="180" cy="140" r="4"/>
|
<line x1="900" y1="220" x2="851" y2="157"/>
|
||||||
<circle class="node" cx="380" cy="90" r="3"/>
|
<line x1="900" y1="220" x2="968" y2="160"/>
|
||||||
<circle class="node" cx="620" cy="180" r="5"/>
|
<line x1="900" y1="220" x2="1060" y2="218"/>
|
||||||
<circle class="node" cx="880" cy="110" r="3.5"/>
|
<line x1="900" y1="220" x2="829" y2="221"/>
|
||||||
<circle class="node" cx="1080" cy="280" r="4"/>
|
<line x1="900" y1="220" x2="905" y2="272"/>
|
||||||
<circle class="node" cx="980" cy="480" r="3"/>
|
<circle class="cluster-ring" cx="900" cy="220" r="18.5"/>
|
||||||
<circle class="node" cx="740" cy="540" r="4.5"/>
|
<circle class="cluster-core" cx="900" cy="220" r="10.5"/>
|
||||||
<circle class="node" cx="520" cy="460" r="3.5"/>
|
<circle class="node" cx="851" cy="157" r="5" style="animation-delay: -0.8s"/>
|
||||||
<circle class="node" cx="300" cy="540" r="3"/>
|
<circle class="node" cx="968" cy="160" r="5" style="animation-delay: -2.4s"/>
|
||||||
<circle class="node" cx="140" cy="380" r="4"/>
|
<circle class="node" cx="1060" cy="218" r="5" style="animation-delay: -1.0s"/>
|
||||||
<circle class="node" cx="560" cy="700" r="3"/>
|
<circle class="node" cx="829" cy="221" r="5" style="animation-delay: -3.0s"/>
|
||||||
<circle class="node" cx="860" cy="720" r="3.5"/>
|
<circle class="node" cx="905" cy="272" r="5" style="animation-delay: -1.8s"/>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- Cluster C — Echo rechts unten (Skala 2.5) -->
|
||||||
|
<g class="logo-cluster cluster-c">
|
||||||
|
<line x1="980" y1="620" x2="945" y2="575"/>
|
||||||
|
<line x1="980" y1="620" x2="1029" y2="577"/>
|
||||||
|
<line x1="980" y1="620" x2="1094" y2="619"/>
|
||||||
|
<line x1="980" y1="620" x2="929" y2="621"/>
|
||||||
|
<line x1="980" y1="620" x2="984" y2="657"/>
|
||||||
|
<circle class="cluster-ring" cx="980" cy="620" r="13"/>
|
||||||
|
<circle class="cluster-core" cx="980" cy="620" r="7.5"/>
|
||||||
|
<circle class="node" cx="945" cy="575" r="3.5" style="animation-delay: -2.2s"/>
|
||||||
|
<circle class="node" cx="1029" cy="577" r="3.5" style="animation-delay: -0.6s"/>
|
||||||
|
<circle class="node" cx="1094" cy="619" r="3.5" style="animation-delay: -1.4s"/>
|
||||||
|
<circle class="node" cx="929" cy="621" r="3.5" style="animation-delay: -2.6s"/>
|
||||||
|
<circle class="node" cx="984" cy="657" r="3.5" style="animation-delay: -3.2s"/>
|
||||||
</g>
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
|
|
||||||
@@ -512,7 +525,7 @@
|
|||||||
<div class="flex flex-col sm:flex-row items-center justify-between gap-4">
|
<div class="flex flex-col sm:flex-row items-center justify-between gap-4">
|
||||||
<div class="flex items-center gap-3">
|
<div class="flex items-center gap-3">
|
||||||
<p class="text-ci-gray text-sm">© 2026 sonith UG (haftungsbeschränkt)</p>
|
<p class="text-ci-gray text-sm">© 2026 sonith UG (haftungsbeschränkt)</p>
|
||||||
<span class="text-ci-gray/60 text-xs">v1.5.0</span>
|
<span class="text-ci-gray/60 text-xs">v1.5.1</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex items-center gap-6">
|
<div class="flex items-center gap-6">
|
||||||
<a href="impressum.html" class="text-ci-gray text-sm hover:text-sonith transition-colors">Impressum</a>
|
<a href="impressum.html" class="text-ci-gray text-sm hover:text-sonith transition-colors">Impressum</a>
|
||||||
|
|||||||
Reference in New Issue
Block a user