Design-Optimierung: Konsistentes Token-System, professionellere Animationen, Navy+Gold Farbschema
- CSS Custom Properties konsolidiert: Neues Token-System mit Navy/Gold Logo-Farben, Spacing-Grid (8px), Border-Radius und Z-Index Skala - Unprofessionelle Animationen entfernt: Glitch, Neon, Morph, Orbit, Ripple - PulseGlow und Shimmer dezenter gemacht (Gold-Akzente) - Typografie: Inter als Hauptschrift, Bebas Neue nur für Hero-Titel - Section-Konsistenz: Hero/Products auf Navy (#0A1832), Footer auf Navy-Dark - Gold-Akzente in Products (Hover-Border, Feature-Bullets, Learn-More Button) - Footer-Links mit Gold-Hover - Card-Hover-Effekte subtiler (translateY -4px statt -10px + scale) - Cookie-Consent auf globale Tokens umgestellt - Mobile: Navy-BG, Gold-Hover statt Cyan Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Dieser Commit ist enthalten in:
Claude Code
@@ -15,21 +15,6 @@
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
/* Premium Glow Effects */
|
||||
.glow-blue {
|
||||
box-shadow:
|
||||
0 0 20px rgba(15, 114, 181, 0.5),
|
||||
0 0 40px rgba(15, 114, 181, 0.3),
|
||||
0 0 60px rgba(15, 114, 181, 0.1);
|
||||
}
|
||||
|
||||
.text-glow {
|
||||
text-shadow:
|
||||
0 0 10px rgba(15, 114, 181, 0.8),
|
||||
0 0 20px rgba(15, 114, 181, 0.6),
|
||||
0 0 30px rgba(15, 114, 181, 0.4);
|
||||
}
|
||||
|
||||
/* Smooth Fade In Animations */
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
@@ -91,23 +76,22 @@
|
||||
animation: float 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Pulse Glow Animation */
|
||||
/* Pulse Glow Animation - Dezent */
|
||||
@keyframes pulseGlow {
|
||||
0%, 100% {
|
||||
box-shadow:
|
||||
0 0 5px rgba(15, 114, 181, 0.5),
|
||||
0 0 10px rgba(15, 114, 181, 0.3);
|
||||
box-shadow:
|
||||
0 0 5px rgba(10, 24, 50, 0.2),
|
||||
0 0 10px rgba(10, 24, 50, 0.1);
|
||||
}
|
||||
50% {
|
||||
box-shadow:
|
||||
0 0 20px rgba(15, 114, 181, 0.8),
|
||||
0 0 30px rgba(15, 114, 181, 0.5),
|
||||
0 0 40px rgba(15, 114, 181, 0.3);
|
||||
box-shadow:
|
||||
0 0 10px rgba(10, 24, 50, 0.3),
|
||||
0 0 20px rgba(10, 24, 50, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
.pulse-glow {
|
||||
animation: pulseGlow 2s ease-in-out infinite;
|
||||
animation: pulseGlow 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Gradient Animation */
|
||||
@@ -120,10 +104,10 @@
|
||||
.gradient-animated {
|
||||
background: linear-gradient(
|
||||
-45deg,
|
||||
#0f72b5,
|
||||
#00406e,
|
||||
#0f72b5,
|
||||
#1e90ff
|
||||
var(--color-navy),
|
||||
var(--color-navy-light),
|
||||
var(--color-navy),
|
||||
var(--color-blue)
|
||||
);
|
||||
background-size: 400% 400%;
|
||||
animation: gradientShift 15s ease infinite;
|
||||
@@ -143,49 +127,14 @@
|
||||
animation: textReveal 1.5s cubic-bezier(0.77, 0, 0.175, 1) forwards;
|
||||
}
|
||||
|
||||
/* Typewriter Effect */
|
||||
@keyframes typewriter {
|
||||
from { width: 0; }
|
||||
to { width: 100%; }
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
50% { border-color: transparent; }
|
||||
}
|
||||
|
||||
.typewriter {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
border-right: 3px solid #0f72b5;
|
||||
animation:
|
||||
typewriter 3s steps(40) forwards,
|
||||
blink 0.75s step-end infinite;
|
||||
}
|
||||
|
||||
/* Morphing Blob Background */
|
||||
@keyframes morph {
|
||||
0% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
|
||||
50% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
|
||||
100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
|
||||
}
|
||||
|
||||
.blob {
|
||||
background: linear-gradient(45deg, #0f72b5, #00406e);
|
||||
animation: morph 8s ease-in-out infinite;
|
||||
filter: blur(40px);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* Card Hover Effects */
|
||||
/* Card Hover Effects - Subtil */
|
||||
.card-hover-lift {
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.card-hover-lift:hover {
|
||||
transform: translateY(-10px) scale(1.02);
|
||||
box-shadow:
|
||||
0 20px 40px rgba(0, 0, 0, 0.15),
|
||||
0 0 20px rgba(15, 114, 181, 0.3);
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 12px 24px rgba(10, 24, 50, 0.12);
|
||||
}
|
||||
|
||||
/* Magnetic Button Effect */
|
||||
@@ -229,50 +178,6 @@
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* Glitch Effect */
|
||||
@keyframes glitch {
|
||||
0%, 100% {
|
||||
text-shadow:
|
||||
0.05em 0 0 rgba(255, 0, 0, 0.75),
|
||||
-0.05em -0.025em 0 rgba(0, 255, 0, 0.75),
|
||||
0.025em 0.05em 0 rgba(0, 0, 255, 0.75);
|
||||
}
|
||||
14% {
|
||||
text-shadow:
|
||||
0.05em 0 0 rgba(255, 0, 0, 0.75),
|
||||
-0.05em -0.025em 0 rgba(0, 255, 0, 0.75),
|
||||
0.025em 0.05em 0 rgba(0, 0, 255, 0.75);
|
||||
}
|
||||
15% {
|
||||
text-shadow:
|
||||
-0.05em -0.025em 0 rgba(255, 0, 0, 0.75),
|
||||
0.025em 0.025em 0 rgba(0, 255, 0, 0.75),
|
||||
-0.05em -0.05em 0 rgba(0, 0, 255, 0.75);
|
||||
}
|
||||
49% {
|
||||
text-shadow:
|
||||
-0.05em -0.025em 0 rgba(255, 0, 0, 0.75),
|
||||
0.025em 0.025em 0 rgba(0, 255, 0, 0.75),
|
||||
-0.05em -0.05em 0 rgba(0, 0, 255, 0.75);
|
||||
}
|
||||
50% {
|
||||
text-shadow:
|
||||
0.025em 0.05em 0 rgba(255, 0, 0, 0.75),
|
||||
0.05em 0 0 rgba(0, 255, 0, 0.75),
|
||||
0 -0.05em 0 rgba(0, 0, 255, 0.75);
|
||||
}
|
||||
99% {
|
||||
text-shadow:
|
||||
0.025em 0.05em 0 rgba(255, 0, 0, 0.75),
|
||||
0.05em 0 0 rgba(0, 255, 0, 0.75),
|
||||
0 -0.05em 0 rgba(0, 0, 255, 0.75);
|
||||
}
|
||||
}
|
||||
|
||||
.glitch {
|
||||
animation: glitch 1s linear infinite;
|
||||
}
|
||||
|
||||
/* Smooth Scroll Indicator */
|
||||
@keyframes scrollDown {
|
||||
0% {
|
||||
@@ -295,7 +200,7 @@
|
||||
animation: scrollDown 2s infinite;
|
||||
}
|
||||
|
||||
/* Loading Shimmer */
|
||||
/* Loading Shimmer - Für Gold-Akzente */
|
||||
@keyframes shimmer {
|
||||
0% {
|
||||
background-position: -1000px 0;
|
||||
@@ -308,64 +213,10 @@
|
||||
.shimmer {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(255, 255, 255, 0) 0%,
|
||||
rgba(255, 255, 255, 0.3) 50%,
|
||||
rgba(255, 255, 255, 0) 100%
|
||||
rgba(200, 168, 81, 0) 0%,
|
||||
rgba(200, 168, 81, 0.2) 50%,
|
||||
rgba(200, 168, 81, 0) 100%
|
||||
);
|
||||
background-size: 1000px 100%;
|
||||
animation: shimmer 2s infinite;
|
||||
animation: shimmer 3s infinite;
|
||||
}
|
||||
|
||||
/* Orbit Animation */
|
||||
@keyframes orbit {
|
||||
from { transform: rotate(0deg) translateX(100px) rotate(0deg); }
|
||||
to { transform: rotate(360deg) translateX(100px) rotate(-360deg); }
|
||||
}
|
||||
|
||||
.orbit {
|
||||
animation: orbit 20s linear infinite;
|
||||
}
|
||||
|
||||
/* Perspective Tilt */
|
||||
.tilt-card {
|
||||
transform-style: preserve-3d;
|
||||
transition: transform 0.5s;
|
||||
}
|
||||
|
||||
.tilt-card:hover {
|
||||
transform: perspective(1000px) rotateX(10deg) rotateY(-10deg) scale(1.05);
|
||||
}
|
||||
|
||||
/* Neon Glow Text */
|
||||
.neon-text {
|
||||
color: #fff;
|
||||
text-shadow:
|
||||
0 0 7px #fff,
|
||||
0 0 10px #fff,
|
||||
0 0 21px #fff,
|
||||
0 0 42px #0f72b5,
|
||||
0 0 82px #0f72b5,
|
||||
0 0 92px #0f72b5,
|
||||
0 0 102px #0f72b5,
|
||||
0 0 151px #0f72b5;
|
||||
}
|
||||
|
||||
/* Water Ripple Effect */
|
||||
@keyframes ripple {
|
||||
0% {
|
||||
transform: scale(0);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: scale(4);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.ripple::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
border: 1px solid #0f72b5;
|
||||
border-radius: 50%;
|
||||
animation: ripple 1s ease-out;
|
||||
}
|
||||
In neuem Issue referenzieren
Einen Benutzer sperren