126 lines
3.2 KiB
CSS
126 lines
3.2 KiB
CSS
@import "tailwindcss";
|
||
|
||
/* Hero Section – Hintergrund-Animation */
|
||
@keyframes gradient-shift {
|
||
0%, 100% { opacity: 1; background-position: 0% 50%; }
|
||
50% { opacity: 0.95; background-position: 100% 50%; }
|
||
}
|
||
|
||
@keyframes grid-pulse {
|
||
0%, 100% { opacity: 0.4; }
|
||
50% { opacity: 0.7; }
|
||
}
|
||
|
||
@keyframes fade-in-up {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(20px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
.animate-gradient-bg {
|
||
background: linear-gradient(135deg, rgb(250 250 250) 0%, rgb(245 245 245) 50%, rgb(250 250 250) 100%);
|
||
background-size: 200% 200%;
|
||
animation: gradient-shift 8s ease infinite;
|
||
}
|
||
|
||
.dark .animate-gradient-bg {
|
||
background: linear-gradient(135deg, rgb(23 23 23) 0%, rgb(38 38 38) 50%, rgb(23 23 23) 100%);
|
||
background-size: 200% 200%;
|
||
}
|
||
|
||
.animate-grid-pulse {
|
||
animation: grid-pulse 4s ease-in-out infinite;
|
||
}
|
||
|
||
.hero-content-in {
|
||
animation: fade-in-up 0.8s ease-out forwards;
|
||
}
|
||
|
||
.hero-content-in:nth-child(9) { animation-delay: 0.1s; opacity: 0; }
|
||
.hero-content-in:nth-child(10) { animation-delay: 0.3s; opacity: 0; }
|
||
.hero-content-in:nth-child(11) { animation-delay: 0.5s; opacity: 0; }
|
||
|
||
.hero-submit-btn {
|
||
transition: box-shadow 0.2s ease, transform 0.15s ease;
|
||
}
|
||
|
||
.hero-submit-btn:hover {
|
||
box-shadow: 0px -1px 0px 0px #FFFFFF50 inset, 0px 1px 0px 0px #FFFFFF50 inset, 0 0 20px rgba(255,255,255,0.2);
|
||
}
|
||
|
||
.dark .hero-submit-btn:hover {
|
||
box-shadow: 0px -1px 0px 0px #00000030 inset, 0px 1px 0px 0px #00000030 inset, 0 0 20px rgba(0,0,0,0.2);
|
||
}
|
||
|
||
.hero-submit-btn:active {
|
||
transform: scale(0.98);
|
||
}
|
||
|
||
/* Rand-Elemente: Scroll-Animation (Marquee) */
|
||
@keyframes marquee-scroll {
|
||
0% { transform: translateX(0%); }
|
||
100% { transform: translateX(-100%); }
|
||
}
|
||
|
||
.hero-marquee-track {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
flex-shrink: 0;
|
||
animation: marquee-scroll 25s linear infinite;
|
||
}
|
||
|
||
.hero-marquee-track:hover {
|
||
animation-play-state: paused;
|
||
}
|
||
|
||
.hero-marquee-container {
|
||
overflow: hidden;
|
||
display: flex;
|
||
position: relative;
|
||
width: 100%;
|
||
mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
|
||
-webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
|
||
}
|
||
|
||
.dark .hero-marquee-container {
|
||
mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
|
||
-webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
|
||
}
|
||
|
||
/* Rand: Testimonial-Karten – Einblend-Animation (nur opacity, Rotation bleibt per inline) */
|
||
@keyframes hero-edge-in {
|
||
from { opacity: 0; }
|
||
to { opacity: 1; }
|
||
}
|
||
|
||
.hero-edge-card {
|
||
animation: hero-edge-in 0.6s ease-out forwards;
|
||
}
|
||
|
||
.hero-edge-card:nth-child(1) { animation-delay: 0.2s; opacity: 0; }
|
||
.hero-edge-card:nth-child(2) { animation-delay: 0.35s; opacity: 0; }
|
||
.hero-edge-card:nth-child(3) { animation-delay: 0.5s; opacity: 0; }
|
||
.hero-edge-card:nth-child(4) { animation-delay: 0.4s; opacity: 0; }
|
||
.hero-edge-card:nth-child(5) { animation-delay: 0.55s; opacity: 0; }
|
||
.hero-edge-card:nth-child(6) { animation-delay: 0.7s; opacity: 0; }
|
||
|
||
@media (max-width: 1023px) {
|
||
.hero-edge-card { opacity: 0.2 !important; }
|
||
}
|
||
|
||
/* Base */
|
||
*, *::before, *::after {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
margin: 0;
|
||
-webkit-font-smoothing: antialiased;
|
||
}
|