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

Stylizacja hero, zmiany w InternetAddonsModal

Browse Source
This commit is contained in:
dm
2025-12-16 07:16:47 +01:00
parent 6c91584fe1
commit 116a915cac
11 changed files with 488 additions and 944 deletions
Download Patch File Download Diff File Expand all files Collapse all files

254
src/styles/hero.css
View File

@@ -1,125 +1,135 @@
.f-hero {
@apply relative min-h-[600px] md:min-h-[700px] lg:min-h-[700px];
@apply flex items-center overflow-hidden;
}
.f-hero-background {
@apply absolute inset-0 w-full h-full object-cover z-0;
object-position: center center;
}
.f-hero-overlay {
@apply absolute inset-0 z-[1] bg-black/5;
}
.f-hero--right .f-hero-overlay {
@apply md:bg-gradient-to-r;
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 {
@apply md:bg-gradient-to-l;
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;
}
.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 {
@apply md:grid-cols-2;
}
.f-hero--right .f-hero-content {
@apply md:col-start-2;
}
.f-hero--left .f-hero-container {
@apply md:grid-cols-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 flex flex-col gap-6 text-[--f-hero-text] mx-1;
}
.f-hero-titles {
@apply space-y-2;
}
.f-hero-title {
@apply text-4xl md:text-5xl lg:text-6xl text-[--f-hero-header];
@apply font-bold leading-tight m-0;
@apply drop-shadow-[0_2px_8px_rgba(0,0,0,0.8)];
}
.f-hero-subtitles {
@apply space-y-4;
}
.f-hero-subtitle {
@apply text-lg md:text-xl lg:text-2xl pl-9;
@apply leading-relaxed m-0;
@apply opacity-0 animate-fade-in-up;
@apply drop-shadow-[0_1px_4px_rgba(0,0,0,0.8)];
animation-delay: calc(var(--delay, 0) * 150ms);
}
.f-hero-description {
@apply text-base md:text-lg leading-relaxed;
@apply opacity-90 max-w-2xl m-0;
@apply drop-shadow-[0_1px_4px_rgba(0,0,0,0.8)];
}
.f-hero-ctas {
@apply flex flex-wrap gap-4 mt-2 justify-center;
}
.f-hero-ctas a {
@apply w-full md:w-auto md:min-w-[280px] md:flex-1 md:max-w-[400px] justify-center;
}
@keyframes fade-in-up {
from {
opacity: 0;
transform: translateY(20px);
@layer components {
.f-hero {
@apply relative flex items-center overflow-hidden;
@apply min-h-[600px] md:min-h-[700px] lg:min-h-[700px];
}
to {
opacity: 1;
transform: translateY(0);
.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);
}
}
}
.animate-fade-in-up {
animation: fade-in-up 0.6s ease-out forwards;
}

4
src/styles/modal.css
View File

@@ -102,7 +102,7 @@
@apply flex flex-col gap-2;
}
/* BAZA: checkbox | main | price */
/* BAZA: checkbox | main | price */
.f-addon-item {
@apply grid items-start gap-3 px-3 py-2;
border-bottom: 1px solid rgba(148, 163, 184, 0.4);
@@ -110,7 +110,9 @@
grid-template-columns: auto 1fr auto;
/* border-color: rgba(148, 163, 184, 0.5); */
background: var(--f-background);
@apply cursor-pointer;
}
.f-addon-item * { @apply cursor-pointer; }
.f-addon-item:last-child {
border-bottom: none;

6
src/styles/offers-table.css
View File

@@ -36,7 +36,7 @@
}
.f-card-name {
@apply text-xl font-semibold;
@apply text-3xl font-semibold;
}
.f-card-price {
@@ -57,11 +57,11 @@
}
.f-card-label {
@apply text-sm font-medium opacity-80;
@apply text-base font-medium opacity-80;
}
.f-card-value {
@apply text-sm font-semibold text-right;
@apply text-base font-semibold text-right;
}
.f-card-value.yes {

34
src/styles/theme.css
View File

@@ -10,22 +10,16 @@
--link-color-light: hsla(210, 100%, 40%, 1);
--link-hover-light: hsla(165, 80%, 25%, 1);
--text1-light: hsl(var(--brand-hue) var(--brand-saturation) 10%);
--text2-light: hsl(var(--brand-hue) 30% 30%);
--text3-light: hsl(var(--brand-hue) 15% 85%);
/*
--surface1-light: hsl(var(--brand-hue) 25% 90%);
--surface2-light: hsl(var(--brand-hue) 20% 99%);
--surface3-light: hsl(var(--brand-hue) 20% 92%);
--surface4-light: hsl(var(--brand-hue) 20% 85%);
--surface5-light: hsla(217, 70%, 26%, 1);
*/
--text1-light: hsla(200, 100%, 10%, 1);
--text2-light: hsla(200, 30%, 30%, 1);
--text3-light: hsla(200, 15%, 85%, 1);
--surface1-light: hsla(200, 25%, 90%, 1);
--surface2-light: hsla(200, 20%, 99%, 1);
--surface3-light: hsla(200, 20%, 92%, 1);
--surface4-light: hsla(200, 20%, 85%, 1);
--surface5-light: hsla(217, 70%, 26%, 1);
--surface6-light: hsla(200, 5%, 75%, 1);
--surface-shadow-light: var(--brand-hue) 10% 20%;
@@ -34,8 +28,10 @@
--brand-dark: hsl(var(--brand-hue) calc(var(--brand-saturation) / 0.2) calc(var(--brand-lightness) / 1.5));
--text1-dark: hsl(var(--brand-hue) 15% 85%);
--text2-dark: hsl(var(--brand-hue) 5% 65%);
--text1-dark: hsla(200, 15%, 85%, 1);
--text2-dark: hsla(200, 5%, 65%, 1);
--text3-dark: hsla(200, 5%, 100%, 1);
--surface1-dark: hsla(200, 10%, 10%, 1);
--surface2-dark: hsla(200, 10%, 15%, 1);
@@ -60,16 +56,16 @@
}
:root {
/* --- Hero --- */
--f-hero-text: var(--text1-dark);
--f-hero-header: var(--text1-dark);
--f-hero-text: var(--text3-dark);
--f-hero-header: var(--text3-dark);
/* --- Background and Text --- */
--f-background: var(--surface3-light);
--f-text: var(--text1-light);
--f-header: var(--text1-light);
--f-header-items: (var(--text1-light));
/*--- Navbar --- */
--f-navbar-background: var(--surface4-light);
--f-navbar-background: var(--surface6-light);
--f-navbar-link: var(--link-color-light);
--f-navbar-link-hover: var(--link-hover-light);
/*--- Footer --- */
@@ -121,9 +117,9 @@
}
:root.dark {
/* --- Hero --- */
--f-hero-text: var(--text1-dark);
--f-hero-header: var(--text1-dark);
--f-hero-text: var(--text3-dark);
--f-hero-header: var(--text3-dark);
/* --- Background and Text --- */
--f-background: var(--surface1-dark);
--f-text: var(--text1-dark);