dm/fuz-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Hero stylizacja

Browse Source
This commit is contained in:
dm
2025-11-25 12:34:57 +01:00
parent 6b1dad3bb1
commit d3040f4917
2 changed files with 32 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
src/styles/hero.css
View File

@@ -1,11 +1,9 @@
.f-hero {
@apply relative overflow-hidden text-center py-32 px-6;
background: linear-gradient(
to right,
var(--fuz-hero-from),
var(--fuz-hero-to)
);
background: linear-gradient(to right,
var(--fuz-hero-from),
var(--fuz-hero-to));
color: var(--f-text);
}
@@ -15,28 +13,28 @@
.f-hero-inner {
@apply relative max-w-7xl mx-auto text-[var(--f-text)];
}
.f-hero-header {
@apply text-5xl md:text-6xl font-extrabold leading-tight mb-6 text-[var(--f-header)];
}
h1 {
@apply text-5xl md:text-6xl font-extrabold leading-tight mb-6 text-[var(--f-header)];
}
.f-hero-header-2 {
@apply text-xl md:text-4xl font-semibold mb-2 opacity-0 text-[var(--f-header-2)];
animation-name: fade-in;
animation-duration: 0.8s;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
}
h2 {
@apply text-xl md:text-4xl font-semibold mb-2 opacity-0 text-[var(--f-header-2)];
animation-name: fade-in;
animation-duration: 0.8s;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
}
.f-hero-header-items {
p {
@apply text-xl md:text-4xl font-semibold mb-2 opacity-0 text-[var(--f-header-items)];
animation: fade-in 0.3s ease-out forwards;
animation-delay: calc(var(--delay) * 0.4s);
}
}
.f-hero-description {
@apply max-w-6xl mx-auto text-lg md:text-xl my-6 leading-snug text-[var(--f-text)];
p.description {
@apply max-w-6xl mx-auto text-lg md:text-xl my-6 leading-snug text-[var(--f-text)];
}
}
.f-hero-cta {
@@ -44,6 +42,13 @@
}
@keyframes fade-in {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}