Poprawki w stylach, oraz przebudowa image w hero
This commit is contained in:
dm
@@ -23,6 +23,31 @@ html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
/* Body */
|
||||
body {
|
||||
background-color: var(--f-background);
|
||||
color: var(--f-text);
|
||||
}
|
||||
|
||||
/* Theme Toggle */
|
||||
/* .theme-toggle-btn {
|
||||
@apply text-xl p-2 rounded-full cursor-pointer transition-colors;
|
||||
color: var(--f-text);
|
||||
} */
|
||||
|
||||
.theme-toggle-btn:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.grecaptcha-badge {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
|
||||
a {
|
||||
@apply text-[--f-link-text];
|
||||
}
|
||||
|
||||
a:hover {
|
||||
@apply text-[--f-link-text-hover];
|
||||
}
|
||||
@@ -7,24 +7,9 @@
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
@apply brightness-[0.95];
|
||||
@apply bg-[--btn-background-hover] text-[--btn-text-hover];
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
@apply border border-solid border-[--btn-outline-border] text-[--btn-outline-text] bg-[--btn-outline-background];
|
||||
}
|
||||
|
||||
.btn-outline:hover {
|
||||
@apply bg-[--btn-outline-background-hover] text-[--btn-outline-text-hover];
|
||||
}
|
||||
|
||||
.btn-ghost {
|
||||
@apply bg-transparent text-[--btn-ghost-text];
|
||||
}
|
||||
|
||||
.btn-ghost:hover {
|
||||
@apply bg-[--btn-ghost-hover-bg];
|
||||
}
|
||||
|
||||
.f-input {
|
||||
@apply w-full py-3 px-4 rounded-xl border border-[--f-input-border] bg-[--f-background] text-[--f-text] transition-all duration-200;
|
||||
|
||||
@@ -32,11 +32,11 @@
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
@apply text-2xl font-semibold text-[--f-text] m-0;
|
||||
@apply text-2xl font-semibold text-[--f-contact-item-text] m-0;
|
||||
}
|
||||
|
||||
p {
|
||||
@apply text-xl mt-4 leading-relaxed text-[--f-text];
|
||||
@apply text-xl mt-4 leading-relaxed text-[--f-link];
|
||||
}
|
||||
|
||||
}
|
||||
@@ -51,21 +51,13 @@
|
||||
.f-rodo {
|
||||
@apply flex items-start gap-3 text-lg text-[--f-text];
|
||||
|
||||
a {
|
||||
@apply text-[--f-link-text];
|
||||
}
|
||||
|
||||
a:hover {
|
||||
@apply text-[--fuz-link-hover];
|
||||
}
|
||||
|
||||
input {
|
||||
@apply mt-2 h-4 w-4;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
@apply btn btn-outline w-full py-3 text-lg;
|
||||
@apply btn btn-primary w-full py-3 text-lg;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -85,7 +77,7 @@
|
||||
}
|
||||
|
||||
.f-toast-msg {
|
||||
@apply px-5 py-3 rounded-xl shadow-lg text-lg bg-[--f-background-o] text-[--f-text];
|
||||
@apply px-5 py-3 rounded-xl shadow-lg text-lg bg-[--f-background-toast] text-[--f-text];
|
||||
}
|
||||
|
||||
.f-toast-msg.success {
|
||||
|
||||
@@ -11,10 +11,6 @@
|
||||
@apply text-base leading-snug;
|
||||
}
|
||||
|
||||
.f-cookie-privacy-link {
|
||||
@apply ml-3 text-[--f-link-text];
|
||||
}
|
||||
|
||||
.f-cookie-accept,
|
||||
.f-cookie-reject {
|
||||
@apply px-8 py-4 rounded-md text-sm font-medium transition-colors;
|
||||
|
||||
@@ -18,15 +18,7 @@
|
||||
h6 {
|
||||
@apply text-xl font-semibold text-[--f-header];
|
||||
}
|
||||
|
||||
a {
|
||||
@apply text-[--f-footer-link-text];
|
||||
}
|
||||
|
||||
a:hover {
|
||||
@apply text-[--fuz-link-hover];
|
||||
}
|
||||
|
||||
|
||||
p {
|
||||
@apply text-base;
|
||||
}
|
||||
@@ -38,9 +30,5 @@
|
||||
|
||||
.f-footer-recaptcha {
|
||||
@apply text-base;
|
||||
|
||||
a {
|
||||
@apply text-[--f-link-text];
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,161 +1,114 @@
|
||||
/* .f-hero {
|
||||
@apply relative overflow-hidden text-center py-28 px-6;
|
||||
}
|
||||
|
||||
.f-hero-bg {
|
||||
@apply absolute top-0 left-0 w-full h-full object-cover opacity-[0.6];
|
||||
}
|
||||
|
||||
.f-hero-inner {
|
||||
@apply relative max-w-7xl mx-auto text-[f-text];
|
||||
|
||||
h1 {
|
||||
@apply text-5xl md:text-6xl font-extrabold leading-tight mb-6 text-[--f-header];
|
||||
}
|
||||
|
||||
h2 {
|
||||
@apply text-xl md:text-4xl font-semibold mb-2 opacity-0 text-[--f-header-2];
|
||||
animation-name: fade-in;
|
||||
animation-duration: 0.8s;
|
||||
animation-timing-function: ease-out;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
p {
|
||||
@apply text-xl md:text-4xl font-semibold mb-2 opacity-0 text-[--f-header-items];
|
||||
animation: fade-in 0.3s ease-out forwards;
|
||||
animation-delay: calc(var(--delay) * 0.4s);
|
||||
}
|
||||
|
||||
p.description {
|
||||
@apply max-w-6xl mx-auto text-lg md:text-xl my-6 leading-snug text-[--f-text];
|
||||
}
|
||||
}
|
||||
|
||||
.f-hero-cta {
|
||||
@apply flex justify-center items-center flex-wrap gap-3 mt-8;
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
} */
|
||||
|
||||
|
||||
/* ==========================================
|
||||
HERO COMPONENT STYLES - TAILWIND
|
||||
========================================== */
|
||||
|
||||
/* Base Hero Section */
|
||||
.f-hero {
|
||||
@apply relative min-h-[500px] md:min-h-[600px] h-5/6;
|
||||
@apply relative min-h-[600px] md:min-h-[700px] lg:min-h-[700px];
|
||||
@apply flex items-center overflow-hidden;
|
||||
}
|
||||
|
||||
/* Background Image */
|
||||
.f-hero__bg {
|
||||
.f-hero-background {
|
||||
@apply absolute inset-0 w-full h-full object-cover z-0;
|
||||
object-position: center center;
|
||||
}
|
||||
|
||||
/* Overlay - Mobile (jednolity) */
|
||||
.f-hero__overlay {
|
||||
@apply absolute inset-0 z-[1] bg-black/30;
|
||||
.f-hero-overlay {
|
||||
@apply absolute inset-0 z-[1] bg-black/5;
|
||||
}
|
||||
|
||||
/* Overlay - Desktop Right */
|
||||
.f-hero--right .f-hero__overlay {
|
||||
@apply md:bg-gradient-to-r md:from-transparent md:via-transparent md:via-50% md:to-black/60 md:to-50%;
|
||||
.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%
|
||||
);
|
||||
}
|
||||
|
||||
/* Overlay - Desktop Left */
|
||||
.f-hero--left .f-hero__overlay {
|
||||
@apply md:bg-gradient-to-l md:from-transparent md:via-transparent md:via-50% md:to-black/75 md:to-50%;
|
||||
.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) 30%,
|
||||
rgba(0, 0, 0, 0.5) 60%,
|
||||
rgba(0, 0, 0, 0.75) 100%
|
||||
);
|
||||
}
|
||||
|
||||
/* Overlay - Center */
|
||||
.f-hero--center .f-hero__overlay {
|
||||
@apply bg-black/60;
|
||||
.f-hero--center .f-hero-overlay {
|
||||
@apply bg-black/50;
|
||||
}
|
||||
|
||||
/* Container - Mobile */
|
||||
.f-hero__container {
|
||||
.f-hero-container {
|
||||
@apply relative z-[2] w-full max-w-[1400px] mx-auto;
|
||||
@apply px-6 md:px-8 py-12 md:py-16;
|
||||
@apply grid grid-cols-1 gap-8;
|
||||
@apply px-6 md:px-8 py-8 md:py-1;
|
||||
@apply grid grid-cols-1 gap-4;
|
||||
}
|
||||
|
||||
/* Container - Desktop Right */
|
||||
.f-hero--right .f-hero__container {
|
||||
.f-hero--right .f-hero-container {
|
||||
@apply md:grid-cols-2;
|
||||
}
|
||||
|
||||
.f-hero--right .f-hero__content {
|
||||
.f-hero--right .f-hero-content {
|
||||
@apply md:col-start-2;
|
||||
}
|
||||
|
||||
/* Container - Desktop Left */
|
||||
.f-hero--left .f-hero__container {
|
||||
.f-hero--left .f-hero-container {
|
||||
@apply md:grid-cols-2;
|
||||
}
|
||||
|
||||
.f-hero--left .f-hero__content {
|
||||
.f-hero--left .f-hero-content {
|
||||
@apply md:col-start-1;
|
||||
}
|
||||
|
||||
/* Container - Center */
|
||||
.f-hero--center .f-hero__container {
|
||||
.f-hero--center .f-hero-container {
|
||||
@apply md:grid-cols-1 md:max-w-4xl md:text-center;
|
||||
}
|
||||
|
||||
/* Content */
|
||||
.f-hero__content {
|
||||
@apply flex flex-col gap-6 text-[--f-hero-text] mx-8;
|
||||
.f-hero-content {
|
||||
@apply flex flex-col gap-6 text-[--f-hero-text] mx-1;
|
||||
}
|
||||
|
||||
/* Titles Container */
|
||||
.f-hero__titles {
|
||||
.f-hero-titles {
|
||||
@apply space-y-2;
|
||||
}
|
||||
|
||||
/* Title */
|
||||
.f-hero__title {
|
||||
@apply text-4xl md:text-5xl lg:text-6xl;
|
||||
.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-lg;
|
||||
@apply drop-shadow-[0_2px_8px_rgba(0,0,0,0.8)];
|
||||
}
|
||||
|
||||
/* Subtitles Container */
|
||||
.f-hero__subtitles {
|
||||
.f-hero-subtitles {
|
||||
@apply space-y-4;
|
||||
}
|
||||
|
||||
/* Subtitle with Animation */
|
||||
.f-hero__subtitle {
|
||||
.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);
|
||||
}
|
||||
|
||||
/* Description */
|
||||
.f-hero__description {
|
||||
.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)];
|
||||
}
|
||||
|
||||
/* CTAs */
|
||||
.f-hero__ctas {
|
||||
@apply flex flex-wrap gap-4 mt-2;
|
||||
.f-hero-ctas {
|
||||
@apply flex flex-wrap gap-4 mt-2 justify-center;
|
||||
}
|
||||
|
||||
/* Animation Keyframes */
|
||||
.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;
|
||||
@@ -169,14 +122,4 @@
|
||||
|
||||
.animate-fade-in-up {
|
||||
animation: fade-in-up 0.6s ease-out forwards;
|
||||
}
|
||||
|
||||
.btn-hero-primary,
|
||||
.btn-hero-outline{
|
||||
@apply inline-flex items-center justify-center font-semibold rounded-lg px-6 py-3 text-base transition-all duration-200 cursor-pointer select-none;
|
||||
@apply border border-solid border-[--btn-hero-border] text-[--btn-hero-text] bg-[--btn-hero-background];
|
||||
}
|
||||
|
||||
.btn-hero-outline:hover {
|
||||
@apply bg-[--btn-outline-background-hover] text-[--btn-outline-text-hover];
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
.f-navbar {
|
||||
@apply w-full shadow-sm sticky top-0 z-50 bg-[--f-background] text-[--f-text];
|
||||
@apply w-full shadow-sm sticky top-0 z-50 bg-[--f-navbar-background] text-[--f-text];
|
||||
}
|
||||
|
||||
.f-navbar-inner {
|
||||
@@ -10,11 +10,10 @@
|
||||
@apply gap-6;
|
||||
}
|
||||
|
||||
.f-navbar-link{
|
||||
@apply text-base hover:text-[--fuz-accent] transition-colors;
|
||||
.f-navbar-link {
|
||||
@apply text-base text-[--f-navbar-link] hover:text-[--f-navbar-link-hover] transition-colors;
|
||||
}
|
||||
|
||||
|
||||
.f-mobile-toggle {
|
||||
@apply text-3xl p-2 text-[--f-text];
|
||||
}
|
||||
@@ -28,9 +27,9 @@
|
||||
}
|
||||
|
||||
.f-mobile-link {
|
||||
@apply text-lg py-2 border-b text-[--f-text] hover:text-[--fuz-accent] border-[--f-border-color];
|
||||
@apply text-lg py-2 border-b text-[--f-navbar-link] hover:text-[--f-navbar-link-hover] border-[--f-border-color];
|
||||
}
|
||||
|
||||
.f-navbar-logo{
|
||||
.f-navbar-logo {
|
||||
@apply w-[70] h-[36];
|
||||
}
|
||||
@@ -11,9 +11,9 @@
|
||||
}
|
||||
|
||||
.f-switch.active {
|
||||
@apply text-[--f-text-switcher] bg-[--f-background-switcher] ;
|
||||
@apply text-[--f-switcher-text] bg-[--f-switcher-background] ;
|
||||
}
|
||||
|
||||
.f-switch:hover {
|
||||
@apply opacity-[0.6]
|
||||
@apply text-[--f-switcher-text-hover] bg-[--f-switcher-background-hover] ;
|
||||
}
|
||||
@@ -63,7 +63,7 @@
|
||||
border-left: 2px solid var(--f-offers-popular);
|
||||
border-right: 2px solid var(--f-offers-popular);
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.f-popular-top {
|
||||
|
||||
@@ -1,22 +1,32 @@
|
||||
* {
|
||||
--brand: #0af;
|
||||
--brand: hsl(200 100% 50%);
|
||||
--brand: hsla(200 100% 50% 1);
|
||||
|
||||
--brand-hue: 200;
|
||||
--brand-saturation: 100%;
|
||||
--brand-lightness: 50%;
|
||||
|
||||
--brand-light: hsl(var(--brand-hue) var(--brand-saturation) var(--brand-lightness));
|
||||
--link-color-light: hsla(210, 100%, 40%, 1);
|
||||
--link-hover-light: hsla(165, 80%, 35%, 1);
|
||||
/* --link-background-light: hsla(0 0% 50% 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);
|
||||
|
||||
--surface-shadow-light: var(--brand-hue) 10% 20%;
|
||||
--shadow-strength-light: .02;
|
||||
--border1-light: hsl(var(--brand-hue) 5% 80%);
|
||||
|
||||
|
||||
--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%);
|
||||
@@ -24,162 +34,120 @@
|
||||
--surface2-dark: hsl(var(--brand-hue) 10% 15%);
|
||||
--surface3-dark: hsl(var(--brand-hue) 5% 20%);
|
||||
--surface4-dark: hsl(var(--brand-hue) 5% 25%);
|
||||
--surface5-dark: hsl(var(--brand-hue) 35% 25%);
|
||||
|
||||
--surface-shadow-dark: var(--brand-hue) 50% 3%;
|
||||
--shadow-strength-dark: .8;
|
||||
--border1-dark: hsl(var(--brand-hue) 40% 70%);
|
||||
|
||||
--brand-dim: hsl(var(--brand-hue) calc(var(--brand-saturation) / 1.25) calc(var(--brand-lightness) / 1.25));
|
||||
|
||||
--brand-50: hsl(var(--brand-hue) 100% 97%);
|
||||
--brand-100: hsl(var(--brand-hue) 100% 93%);
|
||||
--brand-200: hsl(var(--brand-hue) 100% 85%);
|
||||
--brand-300: hsl(var(--brand-hue) 100% 75%);
|
||||
--brand-400: hsl(var(--brand-hue) 100% 62%);
|
||||
--brand-500: hsl(var(--brand-hue) 100% 50%);
|
||||
--brand-600: hsl(var(--brand-hue) 100% 42%);
|
||||
--brand-700: hsl(var(--brand-hue) 100% 35%);
|
||||
--brand-800: hsl(var(--brand-hue) 100% 28%);
|
||||
--brand-900: hsl(var(--brand-hue) 100% 20%);
|
||||
--link-hover-dark: hsla(45, 80%, 70%, 1);
|
||||
--cookie-accept-dark: hsla(120, 60%, 45%, 1);
|
||||
|
||||
--link-color: hsl(190 100% 30%);
|
||||
}
|
||||
|
||||
:root {
|
||||
--f-background: var(--surface2-light);
|
||||
--f-text: var(--text2-light);
|
||||
--f-text-1: var(--text1-light);
|
||||
|
||||
--f-background-switch: var(--surface3-light);
|
||||
--f-text-switcher: var(--brand-dark);
|
||||
--f-background-switcher: var(--surface4-dark);
|
||||
|
||||
/* --- Hero --- */
|
||||
--f-hero-text: var(--text1-dark);
|
||||
--f-hero-header: var(--text1-dark);
|
||||
/* --- Background and Text --- */
|
||||
--f-background: var(--surface3-light);
|
||||
--f-text: var(--text1-light);
|
||||
--f-header: var(--text1-light);
|
||||
--f-header-2: var(--text1-light);
|
||||
--f-header-items: (var(--text2-light));
|
||||
--f-header-items: (var(--text1-light));
|
||||
/*--- Navbar --- */
|
||||
--f-navbar-background: var(--surface4-light);
|
||||
--f-navbar-link: var(--link-color-light);
|
||||
--f-navbar-link-hover: var(--link-hover-light);
|
||||
/*--- Footer --- */
|
||||
--f-footer-background: var(--surface4-light);
|
||||
--f-footer-link-text: var(--link-color-light);
|
||||
/* --- Linki --- */
|
||||
--f-link-text: var(--link-color-light);
|
||||
--f-link-text-hover: var(--link-hover-light);
|
||||
/* Buttons Input */
|
||||
--btn-background: var(--link-color-light);
|
||||
--btn-text: var(--surface4-light);
|
||||
--btn-background-hover: var(--surface4-light);
|
||||
--btn-text-hover: var(--link-color-light);
|
||||
|
||||
--gray-500: hsl(var(--brand-hue) 0% 97%);
|
||||
--link-color-aaa: hsl(var(--brand-hue) 100% 28%);
|
||||
/* Kontrast: ~7.1:1 - spełnia AAA */
|
||||
--link-hover-aaa: hsl(var(--brand-hue) 100% 20%);
|
||||
--f-background-toast: var(--surface2-dark);
|
||||
|
||||
--f-footer-background: var(--gray-500);
|
||||
--f-footer-link-text: var(--link-color-aaa);
|
||||
|
||||
--f-link-text: var(--link-color);
|
||||
|
||||
/* var(--brand-light); */
|
||||
--f-link-text-hover: var(--f-text2-light);
|
||||
|
||||
--btn-background: var(--surface2-light);
|
||||
--btn-text: var(--text1-light);
|
||||
|
||||
--f-background-o: var(--surface3-light);
|
||||
|
||||
--btn-outline-background: transparent;
|
||||
--btn-outline-border: var(--border1-light);
|
||||
--btn-outline-text: var(--text1-light);
|
||||
|
||||
--btn-outline-background-hover: var(--surface4-light);
|
||||
--btn-outline-text-hover: var(--brand-light);
|
||||
|
||||
--f-input-border: var(--surface1-light);
|
||||
--f-input-border: var(--surface4-light);
|
||||
--f-autocomplete-hover-bg: var(--surface3-dark);
|
||||
--f-autocomplete-hover-text: var(--text1-dark);
|
||||
/* --- Switchery --- */
|
||||
--f-background-switch: var(--surface4-light);
|
||||
|
||||
--f-switcher-background: var(--link-color-light);
|
||||
--f-switcher-text: var(--surface4-light);
|
||||
--f-switcher-background-hover: var(--surface2-light);
|
||||
--f-switcher-text-hover: var(--f-link-text-hover);
|
||||
/* --- Cookie --- */
|
||||
--f-cookie-background: var(--surface2-light);
|
||||
--f-cookie-text: var(--text1-light);
|
||||
--f-cookie-accept-background: var(--link-color-light);
|
||||
--f-cookie-accept-text: var(--surface4-light);
|
||||
--f-cookie-reject-background: var(--surface4-light);
|
||||
--f-cookie-reject-text: var(--surface1-dark);
|
||||
/* --- Offers --- */
|
||||
--f-offers-border: var(--surface4-light);
|
||||
--f-offers-price: var(--brand-700);
|
||||
/* var(--brand-light); */
|
||||
--f-offers-price: var(--brand-light);
|
||||
--f-offers-popular: var(--brand-light);
|
||||
--f-offers-popular-bg: color-mix(in srgb, var(--f-offers-popular) 22%, transparent);
|
||||
|
||||
--f-cookie-background: var(--text1-light);
|
||||
--f-cookie-text: var(--surface2-light);
|
||||
|
||||
--f-cookie-accept-background: green;
|
||||
/* --f-cookie-accept-text: */
|
||||
--f-cookie-reject-background: var(--text2-light);
|
||||
|
||||
--f-autocomplete-hover-bg: var(--surface4-light);
|
||||
--f-autocomplete-hover-text: var(--surface2-light);
|
||||
|
||||
--f-hero-text: var(--surface2-light);
|
||||
-fuz-hero-from: #3b82f6;
|
||||
/* niebieski - kolor początkowy */
|
||||
--fuz-hero-to: #8b5cf6;
|
||||
/* fioletowy - kolor końcowy */
|
||||
}
|
||||
|
||||
:root.dark {
|
||||
/* --- Hero --- */
|
||||
--f-hero-text: var(--text1-dark);
|
||||
--f-hero-header: var(--text1-dark);
|
||||
/* --- Background and Text --- */
|
||||
--f-background: var(--surface1-dark);
|
||||
--f-text: var(--text1-dark);
|
||||
--f-text-1: var(--text1-dark);
|
||||
|
||||
--f-background-switch: var(--surface2-dark);
|
||||
|
||||
--f-background-switch: var(--surface3-dark);
|
||||
--f-text-switcher: var(--brand-dark);
|
||||
--f-background-switcher: var(--text2-light);
|
||||
|
||||
--f-header: var(--text1-dark);
|
||||
--f-header-2: var(--text1-dark);
|
||||
--f-header-items: (var(--text2-dark));
|
||||
|
||||
|
||||
--f-header-items: (var(--text1-dark));
|
||||
/*--- Navbar --- */
|
||||
--f-navbar-background: var(--surface2-dark);
|
||||
--f-navbar-link: var(--brand-dark);
|
||||
--f-navbar-link-hover: var(--link-hover-dark);
|
||||
/*--- Footer --- */
|
||||
--f-footer-background: var(--surface2-dark);
|
||||
--f-footer-link-text: var(--brand-dark);
|
||||
/* --- Linki --- */
|
||||
--f-link-text: var(--brand-dark);
|
||||
--f-link-text-hover: var(--f-text2-dark);
|
||||
--f-link-text-hover: var(--link-hover-dark);
|
||||
/* Buttons Input */
|
||||
--btn-background: var(--f-link-text);
|
||||
--btn-text: var(--surface1-dark);
|
||||
--btn-background-hover: var(--surface4-dark);
|
||||
--btn-text-hover: var(--f-link-text-hover);
|
||||
|
||||
--btn-background: var(--surface4-dark);
|
||||
--btn-text: var(--text1-dark);
|
||||
|
||||
--btn-outline-background: transparent;
|
||||
--btn-outline-border: var(--border1-dark);
|
||||
--btn-outline-text: var(--text1-dark);
|
||||
|
||||
--btn-outline-background-hover: var(--surface4-dark);
|
||||
--btn-outline-text-hover: var(--brand-dark);
|
||||
|
||||
--f-background-o: var(--surface2-dark);
|
||||
--f-background-toast: var(--surface2-dark);
|
||||
|
||||
--f-input-border: var(--surface4-dark);
|
||||
--f-autocomplete-hover-bg: var(--surface3-dark);
|
||||
--f-autocomplete-hover-text: var(--text1-dark);
|
||||
|
||||
/* --- Switchery --- */
|
||||
--f-background-switch: var(--surface3-dark);
|
||||
|
||||
--f-switcher-background: var(--f-link-text);
|
||||
--f-switcher-text: var(--surface1-dark);
|
||||
|
||||
--f-switcher-background-hover: var(--surface4-dark);
|
||||
--f-switcher-text-hover: var(--f-link-text-hover);
|
||||
|
||||
/* --- Cookie --- */
|
||||
--f-cookie-background: var(--surface4-dark);
|
||||
--f-cookie-text: var(--surface2-light);
|
||||
--f-cookie-accept-background: var(--f-link-text);
|
||||
--f-cookie-accept-text: var(--surface1-dark);
|
||||
--f-cookie-reject-background: var(--surface3-dark);
|
||||
--f-cookie-reject-text: var(--f-link-text);
|
||||
|
||||
/* --- Offers --- */
|
||||
--f-offers-border: var(--surface4-dark);
|
||||
--f-offers-price: var(--brand-dark);
|
||||
--f-offers-popular: var(--brand-dark);
|
||||
--f-offers-popular-bg: color-mix(in srgb, var(--f-offers-popular) 22%, transparent);
|
||||
|
||||
--f-cookie-background: var(--text1-light);
|
||||
--f-cookie-text: var(--surface2-light);
|
||||
|
||||
--f-cookie-accept-background: green;
|
||||
/* --f-cookie-accept-text: */
|
||||
--f-cookie-reject-background: var(--text2-light);
|
||||
|
||||
--f-autocomplete-hover-bg: var(--surface3-dark);
|
||||
--f-autocomplete-hover-text: var(--text1-dark);
|
||||
|
||||
--f-footer-background: var(--surface2-dark);
|
||||
--f-footer-link-text: var(--brand-dark);
|
||||
}
|
||||
|
||||
/* Body */
|
||||
body {
|
||||
background-color: var(--f-background);
|
||||
color: var(--f-text);
|
||||
}
|
||||
|
||||
/* Links */
|
||||
a {
|
||||
color: var(--fuz-link);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--fuz-link-hover);
|
||||
}
|
||||
|
||||
/* Theme Toggle */
|
||||
.theme-toggle-btn {
|
||||
@apply text-xl p-2 rounded-full cursor-pointer transition-colors;
|
||||
color: var(--f-text);
|
||||
}
|
||||
|
||||
.theme-toggle-btn:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
Reference in New Issue
Block a user