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

Porządkowanie css, i usuwanie radiowego

Browse Source
This commit is contained in:
dm
2025-11-25 09:52:02 +01:00
parent 0bcc1aeefc
commit 665b787c5c
22 changed files with 202 additions and 198 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/styles/hero.css
View File

@@ -1,4 +1,4 @@
.fuz-hero {
.f-hero {
@apply relative overflow-hidden text-center py-32 px-6;
background: linear-gradient(
@@ -6,58 +6,44 @@
var(--fuz-hero-from),
var(--fuz-hero-to)
);
color: var(--fuz-text);
color: var(--f-text);
}
.fuz-hero-bg {
@apply absolute top-0 left-0 w-full h-full object-cover;
opacity: 0.3;
.f-hero-bg {
@apply absolute top-0 left-0 w-full h-full object-cover opacity-[0.7];
}
.fuz-hero-inner {
@apply relative max-w-7xl mx-auto;
color: var(--fuz-text);
.f-hero-inner {
@apply relative max-w-7xl mx-auto text-[var(--f-text)];
}
.fuz-hero-title {
@apply text-5xl md:text-7xl font-extrabold leading-tight mb-6;
color: var(--fuz-text);
.f-hero-header {
@apply text-5xl md:text-6xl font-extrabold leading-tight mb-6 text-[var(--f-header)];
}
.fuz-hero-subtitle {
@apply text-xl md:text-4xl font-semibold mb-2 opacity-0;
color: var(--fuz-text-subtle);
/* Animacja główna */
.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;
/* 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);
.f-hero-header-items {
@apply text-xl md:text-4xl font-semibold mb-2 opacity-0 text-[var(--f-header-items)];
/* color: var(--f-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);
.f-hero-description {
@apply max-w-6xl mx-auto text-lg md:text-xl my-6 leading-snug text-[var(--f-text)];
}
.fuz-hero-cta {
@apply flex justify-center items-center flex-wrap gap-4 mt-8;
.f-hero-cta {
@apply flex justify-center items-center flex-wrap gap-3 mt-8;
}
.fuz-hero-cta .btn-primary {
background-color: var(--fuz-accent);
color: white;
}
@keyframes fade-in {
from { opacity: 0; transform: translateY(10px); }