Poprawki w stylach, oraz przebudowa image w hero

src/components/hero/Hero.astro

@@ -1,118 +1,109 @@
 ---
-import { Image } from "astro:assets";
+import type { ImageMetadata } from 'astro';
 
-type TextPosition = "right" | "left" | "center";
+interface CTA {
+  label: string;
+  href: string;
+  primary?: boolean;
+}
 
 interface Props {
   title?: string | string[];
   subtitle?: string[];
   description?: string;
   imageUrl?: string;
-  ctas?: Array<{
+  textPosition?: "right" | "left" | "center";
-    label: string;
+  ctas?: CTA[];
-    href: string;
-    primary?: boolean;
-  }>;
-  textPosition?: TextPosition;
 }
 
 const {
   title = [],
   subtitle = [],
-  description,
+  description = "",
-  imageUrl,
+  imageUrl = "",
-  ctas = [],
+  textPosition = "right",
-  textPosition = "right" as TextPosition
+  ctas = []
 } = Astro.props;
 
-const images = import.meta.glob<{ default: ImageMetadata }>('/src/assets/hero/*.{png,jpg,jpeg,webp,avif}', {
+// Wyciągnij nazwę bazową bez rozszerzenia
-  eager: true
+const imageBase = imageUrl.replace(/\.(webp|png|jpg|jpeg)$/i, '');
-});
 
-let imageAsset: ImageMetadata | null = null;
+// Importuj wszystkie obrazki
+const images = import.meta.glob<{ default: ImageMetadata }>(
+  '/src/assets/hero/**/*.webp',
+  { eager: true }
+);
 
-if (imageUrl) {
+// Funkcja do znajdowania obrazka dla danego rozmiaru
-  const path = `/src/assets/hero/${imageUrl}`;
+function findImage(folder: string): ImageMetadata | null {
-  const mod = images[path];
+  const key = `/src/assets/hero/${folder}/${imageBase}-${folder}.webp`;
-  if (mod) {
+  return images[key]?.default || null;
-    imageAsset = mod.default;
-  }
 }
 
-const isLCP = true;
+const mobile = findImage('mobile');
+const tablet = findImage('tablet');
+const desktop = findImage('desktop');
 ---
 
 <section class={`f-hero f-hero--${textPosition}`}>
-  
+  <picture>
-  <!-- Background Image -->
+    {mobile && (
-  {imageAsset && (
+      <source 
-    <Image
+        srcset={mobile.src} 
-      src={imageAsset}
+        media="(max-width: 640px)"
-      alt="Światłowód FUZ, szybki internet w Wyszkowie"
+      />
-      class="f-hero__bg"
+    )}
-      loading="eager"
+    {tablet && (
-      fetchpriority={isLCP ? "high" : "auto"}
+      <source 
-      decoding="async"
+        srcset={tablet.src} 
-      format="webp"
+        media="(max-width: 1024px)"
-      widths={[640, 960, 1280, 1350, 1920]}
+      />
-      sizes="100vw"
+    )}
-    />
-  )}
-
-  <!-- Overlay -->
-  <div class="f-hero__overlay"></div>
-
-  <!-- Container -->
-  <div class="f-hero__container">
     
-    <!-- Content -->
+    {desktop && (
-    <div class="f-hero__content">
+      <img
-      
+        src={desktop.src}
-      <!-- Titles -->
+        alt={imageBase}
-      <div class="f-hero__titles">
+        class="f-hero-background"
-        {Array.isArray(title)
+        loading="eager"
-          ? title.map(line => (
+        fetchpriority="high"
-              <h1 class="f-hero__title">{line}</h1>
+        decoding="async"
-            ))
+      />
-          : <h1 class="f-hero__title">{title}</h1>
+    )}
-        }
+  </picture>
-      </div>
 
-      <!-- Subtitles -->
+  <div class="f-hero-overlay"></div>
-      {subtitle && Array.isArray(subtitle) && subtitle.length > 0 && (
+
-        <div class="f-hero__subtitles">
+  <div class="f-hero-container">
-          {subtitle.map((line, i) => (
+    <div class="f-hero-content">
-            <p 
+      {Array.isArray(title) ? (
-              class="f-hero__subtitle"
+        title.map(t => <h1 class="f-hero-title">{t}</h1>)
-              style={`--delay: ${i}`}
+      ) : (
-            >
+        <h1 class="f-hero-title">{title}</h1>
-              {line}
+      )}
-            </p>
+
+      {subtitle.length > 0 && (
+        <div class="f-hero-subtitles">
+          {subtitle.map((s, i) => (
+            <p class="f-hero-subtitle" style={`--delay:${i}`}>{s}</p>
           ))}
         </div>
       )}
 
-      <!-- Description -->
+      {description && <p class="f-hero-description">{description}</p>}
-      {description && (
-        <p class="f-hero__description">{description}</p>
-      )}
 
-      <!-- CTAs -->
       {ctas.length > 0 && (
-        <div class="f-hero__ctas">
+        <div class="f-hero-ctas">
-          {ctas.map((cta) => (
+          {ctas.map(cta => (
             <a 
               href={cta.href} 
-              class={cta.primary ? "btn-hero-primary" : "btn-hero-outline"}
+              class={cta.primary ? "btn btn-primary" : "btn btn-primary"}
             >
               {cta.label}
             </a>
           ))}
         </div>
       )}
-
     </div>
-
   </div>
-
 </section>

src/components/sections/SectionDefault.astro

@@ -53,7 +53,7 @@ if (section.image) {
           <div class="f-section-nav">
             <a
               href={section.button.url}
-              class="btn btn-outline"
+              class="btn btn-primary"
               title={section.button.title}
             >
               {section.button.text}

src/content/home/hero.yaml

@@ -14,12 +14,12 @@ ctas:
     href: "/internet-swiatlowodowy"
     title: "Przejdź do oferty Internetu światłowodowego"
     primary: false
-  - label: "Zobacz ofertę Internetu + Telewizja"
+  - label: "Zobacz ofertę Telewizji"
     href: "/internet-telewizja"
     title: "Przejdź do oferty Internet + Telewizja w FUZ"
     primary: false
 
-  # - label: "Sprawdź dostępność"
+  - label: "Sprawdź dostępność usługi"
-  #   href: "/mapa-zasiegu"
+    href: "/mapa-zasiegu"
-  #   title: "Sprawdź zasięg Internetu światłowodowego FUZ"
+    title: "Sprawdź zasięg Internetu światłowodowego FUZ"
-  #   primary: false
+    primary: false

src/content/internet-swiatlowodowy/hero.yaml

@@ -11,17 +11,17 @@ subtitle:
 #   Sprawdź zasięg usług i wybierz najlepsze łącze dla swojego domu.
 imageUrl: "section-fiber.webp"
 ctas:
-  - label: "Zobacz ofertę Internetu + Telewizja"
+  - label: "Zobacz ofertę Telewizji"
     href: "/internet-telewizja"
     title: "Przejdź do oferty Internet + Telewizja w FUZ"
     primary: false
 
-  - label: "Zobacz ofertę telefonu "
+  - label: "Zobacz ofertę Telefonu "
     href: "/telefon"
     primary: false
     title: "Przejdź do oferty telefonu"
 
-  - label: "Sprawdź dostępność"
+  - label: "Sprawdź dostępność usługi"
     href: "/mapa-zasiegu"
     title: "Sprawdź zasięg Internetu światłowodowego FUZ"
     primary: false  

src/content/internet-swiatlowodowy/section.yaml

@@ -12,15 +12,11 @@ sections:
 
       [Sprawdź](/mapa-zasiegu "Sprawdź zasięg naszego Internetu") na interaktywnej mapie, czy internet światłowodowy jest już dostępny pod Twoim adresem.
 
-  - title: Router WiFi 5 AC1200
+  - title: Router WiFi HL-4BX3V-F
-    image: "E5400.webp"
+    image: "HL-4BX3V-F.webp"
-    content: |
+    content: | 
-      Dwuzakresowy router WiFi 5 AC1200 zapewnia prędkość do 1200 Mb/s.
+      Nowoczesny router marki HALNy to urządzenie stworzone z myślą o wymagających użytkownikach. 
-
+      
-      Zapewnij gościom dostęp do sieci, jednocześnie utrzymując niepożądanych gości od Twojej sieci WiFi i urządzeń podłączonych do sieci przez Twoją rodzinę.
+      Znajdziesz w nim nowoczesny standard WiFi 6, porty 2,5 Gb/s oraz 1 Gb/s, wsparcie dla sieci Mesh i VoIP. Stabilność, niezawodność i pełne wykorzystanie łącza – w całym Twoim domu. 
-
+      
-      Podwójna szerokość pasma (2,4 + 5 GHz), aby uniknąć zakłóceń i zmaksymalizować przepustowość.
+      Naszym Klientom oferujemy najnowocześniejsze, sprawdzone routery HALNy, które gwarantują najlepsze osiągi.
-
-      Łatwe połączenia WiFi za pomocą przycisku (WPS), aby dodać urządzenia do swojej sieci WiFi za jednym naciśnięciem przycisku.
-
-      Szyfrowanie WPA2 i zapora SPI pomagają utrzymać bezpieczne połączenie z siecią.

src/content/internet-telewizja/hero.yaml

@@ -10,17 +10,17 @@ subtitle:
 #   Sprawdź zasięg usług i wybierz najlepsze łącze dla swojego domu.
 imageUrl: "section-tv.webp"
 ctas:
-  - label: "Zobacz ofertę internetu"
+  - label: "Zobacz ofertę Internetu"
     href: "/internet-swiatlowodowy"
     title: "Przejdź do oferty Internetu światłowodowego"
     primary: false
     
-  - label: "Zobacz ofertę telefonu"
+  - label: "Zobacz ofertę Telefonu"
     href: "/telefon"
     title: "Przejdź do oferty telefonu"
     primary: false
 
-  # - label: "Sprawdź dostępność"
+  - label: "Sprawdź dostępność usługi"
-  #   href: "/mapa-zasiegu"
+    href: "/mapa-zasiegu"
-  #   title: "Sprawdź zasięg Internetu światłowodowego FUZ"
+    title: "Sprawdź zasięg Internetu światłowodowego FUZ"
-  #   primary: false   
+    primary: false   

src/content/telefon/hero.yaml

@@ -10,17 +10,17 @@ subtitle:
 #   Dziś dla wielu to niezbędne narzędzie pełne funkcji – „bez telefonu jak bez ręki". 
 imageUrl: section-telefon.webp
 ctas:
-  - label: "Zobacz ofertę internetu"
+  - label: "Zobacz ofertę Internetu"
     href: "/internet-swiatlowodowy"
     title: "Przejdź do oferty Internetu światłowodowego"
     primary: false
 
-  - label: "Zobacz ofertę Internetu + Telewizji"
+  - label: "Zobacz ofertę Telewizji"
     href: "/internet-telewizja"
     title: "Przejdź do oferty Internet + Telewizja w FUZ"
     primary: false
 
-  # - label: "Sprawdź dostępność"
+  - label: "Sprawdź dostępność usługi "
-  #   href: "/mapa-zasiegu"
+    href: "/mapa-zasiegu"
-  #   title: "Sprawdź zasięg Internetu światłowodowego FUZ"
+    title: "Sprawdź zasięg Internetu światłowodowego FUZ"
-  #   primary: false   
+    primary: false   

src/content/telefon/page.yaml

@@ -1,5 +1,5 @@
 title:
-  - USLUGA TELEFONU
+  - USŁUGA TELEFONU
 paragraphs:
   - title:
     # content: |

src/islands/Cookie.jsx

@@ -31,7 +31,7 @@ export default function Cookie({ config }) {
 
         <p class="f-cookie-text">
           {config.text.message}
-          <a href={config.links.privacy} class="f-cookie-privacy-link" rel="noopener noreferrer">
+          <a href={config.links.privacy} rel="noopener noreferrer">
             {config.text.more}
           </a>
         </p>

src/islands/RangeForm.jsx

@@ -314,7 +314,7 @@ export default function RangeForm() {
             )}
 
             <button
-                class="btn btn-outline"
+                class="btn btn-primary"
                 disabled={loading}
             >
                 {loading ? (

src/pages/mapa-zasiegu/index.astro

@@ -156,7 +156,7 @@ const mapStyleId = "8e0a97af9476f2d3";
     </div>   
     </div>
     <div class="w-full flex justify-center mb-4">
-      <a href="/kontakt" class="btn btn-outline">Przejdź do kontaktu →</a>
+      <a href="/kontakt" class="btn btn-primary">Przejdź do kontaktu →</a>
     </div>
   </div>
 `;

src/styles/base.css

@@ -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];
 }

src/styles/buttons.css

@@ -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;

src/styles/contact.css

@@ -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 {

src/styles/cookie.css

@@ -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;

src/styles/footer.css

@@ -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];
-        }
     }
 }

src/styles/hero.css

@@ -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-background {
-.f-hero__bg {
   @apply absolute inset-0 w-full h-full object-cover z-0;
+  object-position: center center;
 }
 
-/* Overlay - Mobile (jednolity) */
+.f-hero-overlay {
-.f-hero__overlay {
+  @apply absolute inset-0 z-[1] bg-black/5;
-  @apply absolute inset-0 z-[1] bg-black/30;
 }
 
-/* Overlay - Desktop Right */
+.f-hero--right .f-hero-overlay {
-.f-hero--right .f-hero__overlay {
+  @apply md:bg-gradient-to-r;
-  @apply md:bg-gradient-to-r md:from-transparent md:via-transparent md:via-50% md:to-black/60 md:to-50%;
+  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 {
-.f-hero--left .f-hero__overlay {
+  @apply md:bg-gradient-to-l;
-  @apply md:bg-gradient-to-l md:from-transparent md:via-transparent md:via-50% md:to-black/75 md:to-50%;
+  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 {
-.f-hero--center .f-hero__overlay {
+  @apply bg-black/50;
-  @apply bg-black/60;
 }
 
-/* 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 px-6 md:px-8 py-8 md:py-1;
-  @apply grid grid-cols-1 gap-8;
+  @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 {
-.f-hero__content {
+  @apply flex flex-col gap-6 text-[--f-hero-text] mx-1;
-  @apply flex flex-col gap-6 text-[--f-hero-text] mx-8;
 }
 
-/* Titles Container */
+.f-hero-titles {
-.f-hero__titles {
   @apply space-y-2;
 }
 
-/* Title */
+.f-hero-title {
-.f-hero__title {
+  @apply text-4xl md:text-5xl lg:text-6xl text-[--f-hero-header];
-  @apply text-4xl md:text-5xl lg:text-6xl;
   @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 {
-.f-hero__ctas {
+  @apply flex flex-wrap gap-4 mt-2 justify-center;
-  @apply flex flex-wrap gap-4 mt-2;
 }
 
-/* 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];
 }

src/styles/navbar.css

@@ -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{
+.f-navbar-link {
-  @apply text-base hover:text-[--fuz-accent] transition-colors;
+  @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];
 }

src/styles/offers/offers-switches.css

@@ -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] ;
 }

src/styles/offers/offers-table.css

@@ -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 {

src/styles/theme.css

@@ -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%);
+  --link-hover-dark: hsla(45, 80%, 70%, 1);
-  --brand-100: hsl(var(--brand-hue) 100% 93%);
+  --cookie-accept-dark: hsla(120, 60%, 45%, 1);
-  --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-color: hsl(190 100% 30%); 
 }
 
 :root {
-  --f-background: var(--surface2-light);
+  /* --- Hero --- */
-  --f-text: var(--text2-light);
+  --f-hero-text: var(--text1-dark);
-  --f-text-1: var(--text1-light);
+  --f-hero-header: var(--text1-dark);
-
+  /* --- Background and Text --- */
-  --f-background-switch: var(--surface3-light);
+  --f-background: var(--surface3-light);
-  --f-text-switcher: var(--brand-dark);
+  --f-text: var(--text1-light);
-  --f-background-switcher: var(--surface4-dark);
-
   --f-header: var(--text1-light);
-  --f-header-2: var(--text1-light);
+  --f-header-items: (var(--text1-light));
-  --f-header-items: (var(--text2-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%);
+  --f-background-toast: var(--surface2-dark);
-  --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-footer-background: var(--gray-500);
+  --f-input-border: var(--surface4-light);
-  --f-footer-link-text: var(--link-color-aaa);
+  --f-autocomplete-hover-bg: var(--surface3-dark);
-
+  --f-autocomplete-hover-text: var(--text1-dark);
-  --f-link-text: var(--link-color);
+  /* --- Switchery --- */
-
+  --f-background-switch: var(--surface4-light);
-  /* 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-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);
+  --f-offers-price: var(--brand-light);
-  /* 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(--text1-dark));
-  --f-header-items: (var(--text2-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);
+  --f-background-toast: var(--surface2-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-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;
 }