Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 techadmin
|
82cea98b52 |
@@ -73,4 +73,4 @@ Statische Dateien direkt auf Nginx ausliefern. Kein Build-Step notwendig.
|
||||
|
||||
---
|
||||
|
||||
*Zuletzt aktualisiert: Mai 2026 — v1.4.0 (Adresse Würzburg, Fernwartung, lebendigere Optik)*
|
||||
*Zuletzt aktualisiert: Mai 2026 — v1.5.0 (animiertes Knoten-Mesh im Hero)*
|
||||
|
||||
@@ -88,6 +88,48 @@ html {
|
||||
0 0 48px rgba(6, 115, 145, 0.06);
|
||||
}
|
||||
|
||||
/* ---- Hero Mesh: animiertes Knoten-Netz im Logo-Stil ---- */
|
||||
.hero-mesh {
|
||||
opacity: 0.55;
|
||||
mix-blend-mode: screen;
|
||||
}
|
||||
|
||||
.mesh-lines line {
|
||||
stroke-opacity: 0.25;
|
||||
stroke-dasharray: 4 8;
|
||||
animation: line-flow 6s linear infinite;
|
||||
}
|
||||
|
||||
.mesh-lines line:nth-child(3n) { animation-duration: 9s; stroke-opacity: 0.18; }
|
||||
.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 {
|
||||
to { stroke-dashoffset: -48; }
|
||||
}
|
||||
|
||||
.node {
|
||||
transform-box: fill-box;
|
||||
transform-origin: center;
|
||||
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 {
|
||||
0%, 100% { transform: scale(1); opacity: 0.55; }
|
||||
50% { transform: scale(1.6); opacity: 1; }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.mesh-lines line,
|
||||
.node { animation: none !important; }
|
||||
}
|
||||
|
||||
/* ---- Floating Orbs (Hero) ---- */
|
||||
.orb {
|
||||
filter: blur(64px);
|
||||
|
||||
+1
-1
@@ -208,7 +208,7 @@
|
||||
<div class="flex flex-col sm:flex-row items-center justify-between gap-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<p class="text-ci-gray text-sm">© 2026 sonith UG (haftungsbeschränkt)</p>
|
||||
<span class="text-ci-gray/60 text-xs">v1.4.0</span>
|
||||
<span class="text-ci-gray/60 text-xs">v1.5.0</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-6">
|
||||
<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 items-center gap-3">
|
||||
<p class="text-ci-gray text-sm">© 2026 sonith UG (haftungsbeschränkt)</p>
|
||||
<span class="text-ci-gray/60 text-xs">v1.4.0</span>
|
||||
<span class="text-ci-gray/60 text-xs">v1.5.0</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-6">
|
||||
<a href="impressum.html" class="text-sonith text-sm">Impressum</a>
|
||||
|
||||
+46
-4
@@ -128,9 +128,51 @@
|
||||
<div class="absolute inset-0 bg-[radial-gradient(ellipse_at_bottom_left,_rgba(6,115,145,0.20)_0%,_transparent_55%)]"></div>
|
||||
|
||||
<!-- Floating Orbs: lebendige unscharfe Lichtpunkte in CI-Farben -->
|
||||
<div class="orb orb-petrol absolute top-[15%] left-[8%] w-72 h-72 rounded-full opacity-40"></div>
|
||||
<div class="orb orb-sonith absolute top-[55%] right-[12%] w-80 h-80 rounded-full opacity-25"></div>
|
||||
<div class="orb orb-petrol-2 absolute bottom-[12%] left-[35%] w-64 h-64 rounded-full opacity-30"></div>
|
||||
<div class="orb orb-petrol absolute top-[15%] left-[8%] w-72 h-72 rounded-full opacity-30"></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>
|
||||
|
||||
<!-- Animiertes Knoten-Mesh: greift das Logo-Motiv (Netzwerk-Knoten) auf
|
||||
und transportiert visuell die MSP-/Netzwerk-Kompetenz.
|
||||
Linien pulsieren mit Datenfluss-Effekt, Knoten leuchten zyklisch auf. -->
|
||||
<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">
|
||||
<line x1="180" y1="140" x2="380" y2="90"/>
|
||||
<line x1="180" y1="140" x2="140" y2="380"/>
|
||||
<line x1="180" y1="140" x2="300" y2="540"/>
|
||||
<line x1="380" y1="90" x2="620" y2="180"/>
|
||||
<line x1="620" y1="180" x2="880" y2="110"/>
|
||||
<line x1="620" y1="180" x2="520" y2="460"/>
|
||||
<line x1="880" y1="110" x2="1080" y2="280"/>
|
||||
<line x1="1080" y1="280" x2="980" y2="480"/>
|
||||
<line x1="980" y1="480" x2="740" y2="540"/>
|
||||
<line x1="740" y1="540" x2="520" y2="460"/>
|
||||
<line x1="740" y1="540" x2="860" y2="720"/>
|
||||
<line x1="520" y1="460" x2="300" y2="540"/>
|
||||
<line x1="520" y1="460" x2="560" y2="700"/>
|
||||
<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>
|
||||
|
||||
<!-- Knoten (CI-Sonith-Gelb) mit asynchroner Pulse-Animation -->
|
||||
<g class="mesh-nodes" fill="#DEDC1E">
|
||||
<circle class="node" cx="180" cy="140" r="4"/>
|
||||
<circle class="node" cx="380" cy="90" r="3"/>
|
||||
<circle class="node" cx="620" cy="180" r="5"/>
|
||||
<circle class="node" cx="880" cy="110" r="3.5"/>
|
||||
<circle class="node" cx="1080" cy="280" r="4"/>
|
||||
<circle class="node" cx="980" cy="480" r="3"/>
|
||||
<circle class="node" cx="740" cy="540" r="4.5"/>
|
||||
<circle class="node" cx="520" cy="460" r="3.5"/>
|
||||
<circle class="node" cx="300" cy="540" r="3"/>
|
||||
<circle class="node" cx="140" cy="380" r="4"/>
|
||||
<circle class="node" cx="560" cy="700" r="3"/>
|
||||
<circle class="node" cx="860" cy="720" r="3.5"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
<!-- Grid Pattern Overlay -->
|
||||
<div class="absolute inset-0 opacity-[0.03]" style="background-image: url('data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%23ffffff" fill-opacity="1"%3E%3Cpath d="M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');"></div>
|
||||
@@ -470,7 +512,7 @@
|
||||
<div class="flex flex-col sm:flex-row items-center justify-between gap-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<p class="text-ci-gray text-sm">© 2026 sonith UG (haftungsbeschränkt)</p>
|
||||
<span class="text-ci-gray/60 text-xs">v1.4.0</span>
|
||||
<span class="text-ci-gray/60 text-xs">v1.5.0</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-6">
|
||||
<a href="impressum.html" class="text-ci-gray text-sm hover:text-sonith transition-colors">Impressum</a>
|
||||
|
||||
Reference in New Issue
Block a user