Poprawki w stylach oraz zmienne środowiskowe dla smtp

src/styles/base.css

@@ -5,6 +5,8 @@
 @import "./buttons.css";
 @import "./sections.css";
 @import "./markdown.css";
+@import "./footer.css";
+@import "./cookie.css";
 
 .grecaptcha-badge {
   display: none !important;

src/styles/cookie.css

@@ -1,50 +1,48 @@
-#cookie-banner {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  transform: translateY(100%);
-  transition: transform 0.4s ease;
-  /* z-index: 9999; */
+@layer components {
+  #cookie-banner {
+    @apply fixed bottom-0 left-0 w-full translate-y-full transition-transform duration-500 ease-in-out;
+    background: var(--fuz-bg-invert);
+    color: var(--fuz-text-invert);
+    border-top: 1px solid rgba(0, 0, 0, 0.1);
+  }
 
- background: var(--fuz-bg-invert);
-  color: var(--fuz-text-invert);
-  border-top: 1px solid rgba(0,0,0,0.1);
-}
+  .f-cookie-panel-inner {
+    @apply max-w-4xl mx-auto flex flex-col md:flex-row items-start 
+    md:items-center justify-between gap-4 px-6 py-6;
+  }
 
-.cookie-panel-inner {
-  padding: 1rem 1.5rem;
-}
+  .f-cookie-text{
+    @apply text-base leading-snug;
+  }
 
-.cookie-privacy-link {
-  color: var(--fuz-link);
-  text-decoration: underline;
-}
+  .f-cookie-privacy-link {
+    @apply ml-3;
+    color: var(--btn-outline-invert);
+  }
 
-.cookie-privacy-link:hover {
-  color: var(--fuz-link-hover);
-}
+  .f-cookie-accept,
+  .f-cookie-reject {
+    @apply px-4 py-2 rounded-md text-sm font-medium transition-colors;
+  }
 
-.cookie-accept,
-.cookie-reject {
-  @apply px-4 py-2 rounded-md text-sm font-medium;
-}
+   .f-cookie-accept {
+    background: var(--btn-bg-invert);
+    color: var(--btn-text-invert);
+  }
 
-.cookie-accept {
- background: var(--btn-bg-invert);
-  color: var(--btn-text-invert);
-}
+  .f-cookie-accept:hover {
+    background: var(--fuz-accent-hover);
+  }
 
-.cookie-accept:hover {
-  background: var(--fuz-accent-hover);
-}
+  .f-cookie-reject {
+    @apply border;
+    border-color: var(--btn-outline-invert);
+    color: var(--btn-outline-invert);
+    background: transparent;
+  }
 
-.cookie-reject {
- background: transparent;
-  border: 1px solid var(--btn-outline-invert);
-  color: var(--btn-outline-invert);
-}
+  .f-cookie-reject:hover {
+    background: var(--btn-outline-bg-invert);
+  }
 
-.cookie-reject:hover {
-   background: var(--btn-outline-bg-invert);
-}
+}

src/styles/footer.css

@@ -1,26 +1,31 @@
-.fuz-footer-title {
-    @apply text-xl font-semibold;
+@layer components {
+    .f-footer {
+        @apply mt-0 border-t border-[var(--fuz-border)] bg-[var(--fuz-bg)] text-[var(--fuz-text)] pt-2;
+    }
+
+    .f-footer-inner {
+       @apply max-w-7xl mx-auto px-6 grid md:grid-cols-3 gap-12;
+    }
+
+    .f-footer-col {
+        @apply max-w-sm pt-4;
+    }
+
+    .f-footer-col-title {
+        @apply text-xl font-semibold;
+
+    }
+
+    .f-footer-col-text {
+        @apply text-base;
+    }
+
+    .f-footer-copyright {
+        @apply text-center py-4 text-base text-[var(--fuz-text)];
+        /* text-center py-0 text-sm */
+    }
+
+     .f-footer-recaptcha {
+        @apply text-base;
+    }
 }
-
-.fuz-footer-text {
-    @apply text-base;
-}
-
-/* Linki */
-/* .fuz-footer-link {
-    color: var(--fuz-text);
-    text-decoration: none;
-    transition: opacity 0.2s ease;
-}
-
-.fuz-footer-link:hover {
-    opacity: 0.7;
-} */
-
-.footer-col {
-    @apply max-w-sm pt-4;
-}
-
-.footer-inner {
-    @apply w-full px-6 max-w-screen-2xl mx-auto flex flex-col gap-10 md:flex-row md:justify-between md:items-start;
-}

src/styles/theme.css

@@ -29,6 +29,7 @@
 
   --btn-ghost-text: var(--fuz-text);
   --btn-ghost-hover-bg: rgba(0, 0, 0, 0.05);
+  --fuz-border: rgb(229, 231, 235);
 }
 
 :root.dark {
@@ -61,6 +62,8 @@
 
   --btn-ghost-text: var(--fuz-text);
   --btn-ghost-hover-bg: rgba(255,255,255,0.08);
+
+  --fuz-border: rgb(229, 231, 235);
 }
 
 /* Body */