65 lines
1.5 KiB
CSS
65 lines
1.5 KiB
CSS
.fuz-hero {
|
|
@apply relative overflow-hidden text-center py-32 px-6;
|
|
|
|
background: linear-gradient(
|
|
to right,
|
|
var(--fuz-hero-from),
|
|
var(--fuz-hero-to)
|
|
);
|
|
color: var(--fuz-text);
|
|
}
|
|
|
|
.fuz-hero-bg {
|
|
@apply absolute top-0 left-0 w-full h-full object-cover;
|
|
opacity: 0.3;
|
|
}
|
|
|
|
.fuz-hero-inner {
|
|
@apply relative max-w-7xl mx-auto;
|
|
color: var(--fuz-text);
|
|
}
|
|
|
|
.fuz-hero-title {
|
|
@apply text-5xl md:text-7xl font-extrabold leading-tight mb-6;
|
|
color: var(--fuz-text);
|
|
}
|
|
|
|
.fuz-hero-subtitle {
|
|
@apply text-xl md:text-4xl font-semibold mb-2 opacity-0;
|
|
color: var(--fuz-text-subtle);
|
|
|
|
/* Animacja główna */
|
|
animation-name: fade-in;
|
|
animation-duration: 0.8s;
|
|
animation-timing-function: ease-out;
|
|
animation-fill-mode: forwards;
|
|
|
|
/* Opóźnienie zależne od numeru elementu */
|
|
/* animation-delay: calc(var(--delay) * 0.3s); */
|
|
}
|
|
|
|
.fuz-hero-subline {
|
|
@apply text-xl md:text-4xl font-semibold mb-2 opacity-0;
|
|
color: var(--fuz-text-subtle);
|
|
animation: fade-in 0.3s ease-out forwards;
|
|
animation-delay: calc(var(--delay) * 0.4s);
|
|
}
|
|
|
|
.fuz-hero-description {
|
|
@apply max-w-6xl mx-auto text-lg md:text-xl my-6 leading-relaxed;
|
|
color: var(--fuz-text-subtle);
|
|
}
|
|
|
|
.fuz-hero-cta {
|
|
@apply flex justify-center items-center flex-wrap gap-4 mt-8;
|
|
}
|
|
|
|
.fuz-hero-cta .btn-primary {
|
|
background-color: var(--fuz-accent);
|
|
color: white;
|
|
}
|
|
|
|
@keyframes fade-in {
|
|
from { opacity: 0; transform: translateY(10px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
} |