136 lines
2.8 KiB
CSS
136 lines
2.8 KiB
CSS
/* @layer components { */
|
|
.f-hero {
|
|
@apply relative flex items-center overflow-hidden;
|
|
@apply min-h-[600px] md:min-h-[700px] lg:min-h-[700px];
|
|
}
|
|
|
|
.f-hero-background {
|
|
@apply absolute inset-0 z-0 w-full h-full object-cover;
|
|
object-position: center top;
|
|
}
|
|
|
|
.f-hero-overlay {
|
|
@apply absolute inset-0 z-[1] bg-black/5;
|
|
}
|
|
|
|
.f-hero--right .f-hero-overlay {
|
|
background-image: linear-gradient(
|
|
to right,
|
|
rgba(0, 0, 0, 0) 0%,
|
|
rgba(0, 0, 0, 0.1) 15%,
|
|
rgba(0, 0, 0, 0.1) 30%,
|
|
rgba(0, 0, 0, 0.5) 45%,
|
|
rgba(0, 0, 0, 0.5) 55%,
|
|
rgba(0, 0, 0, 0.5) 65%,
|
|
rgba(0, 0, 0, 0.5) 75%,
|
|
rgba(0, 0, 0, 0.75) 100%
|
|
);
|
|
}
|
|
|
|
.f-hero--left .f-hero-overlay {
|
|
background-image: linear-gradient(
|
|
to left,
|
|
rgba(0, 0, 0, 0) 0%,
|
|
rgba(0, 0, 0, 0.1) 50%,
|
|
rgba(0, 0, 0, 0.5) 60%,
|
|
rgba(0, 0, 0, 0.75) 100%
|
|
);
|
|
}
|
|
|
|
.f-hero--center .f-hero-overlay {
|
|
@apply bg-black/50;
|
|
background-image: none;
|
|
}
|
|
|
|
.f-hero-container {
|
|
@apply relative z-[2] w-full max-w-[1400px] mx-auto;
|
|
@apply px-6 md:px-8 py-8 md:py-1;
|
|
@apply grid grid-cols-1 gap-4;
|
|
}
|
|
|
|
.f-hero--right .f-hero-container,
|
|
.f-hero--left .f-hero-container {
|
|
@apply md:grid-cols-2;
|
|
}
|
|
|
|
.f-hero--right .f-hero-content {
|
|
@apply md:col-start-2;
|
|
}
|
|
|
|
.f-hero--left .f-hero-content {
|
|
@apply md:col-start-1;
|
|
}
|
|
|
|
.f-hero--center .f-hero-container {
|
|
@apply md:grid-cols-1 md:max-w-4xl md:text-center;
|
|
}
|
|
|
|
|
|
.f-hero-content {
|
|
@apply mx-1 flex flex-col gap-6;
|
|
@apply text-[--f-hero-text];
|
|
}
|
|
|
|
.f-hero-title {
|
|
@apply m-0 font-bold leading-tight;
|
|
@apply text-4xl md:text-6xl lg:text-7xl text-center;
|
|
@apply text-[--f-hero-header];
|
|
@apply drop-shadow-[0_2px_8px_rgba(0,0,0,0.8)];
|
|
}
|
|
|
|
.f-hero-subtitles {
|
|
@apply space-y-4;
|
|
}
|
|
|
|
.f-hero-subtitle {
|
|
@apply m-0 leading-relaxed;
|
|
@apply text-xl md:text-2xl lg:text-3xl;
|
|
@apply pl-9 opacity-0;
|
|
@apply drop-shadow-[0_1px_4px_rgba(0,0,0,0.8)];
|
|
animation: fade-in-up 0.6s ease-out forwards;
|
|
animation-delay: calc(var(--delay, 0) * 150ms);
|
|
}
|
|
|
|
.f-hero--center .f-hero-subtitle {
|
|
@apply pl-0;
|
|
}
|
|
|
|
.f-hero-description {
|
|
@apply m-0 max-w-2xl opacity-90;
|
|
@apply text-base md:text-lg leading-relaxed;
|
|
@apply drop-shadow-[0_1px_4px_rgba(0,0,0,0.8)];
|
|
}
|
|
|
|
.f-hero-ctas {
|
|
@apply mt-2 flex flex-wrap gap-4;
|
|
}
|
|
|
|
.f-hero--left .f-hero-ctas {
|
|
@apply justify-start;
|
|
}
|
|
|
|
.f-hero--right .f-hero-ctas {
|
|
@apply justify-end;
|
|
}
|
|
|
|
.f-hero--center .f-hero-ctas {
|
|
@apply justify-center;
|
|
}
|
|
|
|
.f-hero-ctas a {
|
|
@apply w-full justify-center;
|
|
@apply md:w-auto md:min-w-[280px] md:flex-1 md:max-w-[400px];
|
|
}
|
|
|
|
@keyframes fade-in-up {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
/* } */
|