Kontakt stylizacja

src/styles/contact.css

@@ -1,68 +1,97 @@
-.fuz-contact-grid {
+@tailwind base;
+
+.f-contact-grid {
   @apply grid md:grid-cols-2 gap-10 items-start max-w-7xl mx-auto;
 }
 
-.fuz-contact-box {
+.f-contact-col-1 {
 
-  background-color: var(--f-background);
-  color: var(--f-text);
+  h1,
+  h2,
+  h3,
+  h4 {
+    @apply f-section-header;
+  }
 }
 
-.fuz-contact-description h3 {
-  @apply text-xl font-semibold mb-2;
-  color: var(--f-text);
+.f-contact-col-2 {
+  @apply bg-[var(--f-background)] text-[var(--f-text)];
+
+  h1,
+  h2,
+  h3,
+  h4 {
+    @apply f-section-header;
+  }
 }
 
-.fuz-contact-description h4 {
-  @apply text-xl font-semibold mb-1;
-  color: var(--f-text);
+.f-contact-item {
+  @apply space-y-1;
+  
+  h1,
+  h2,
+  h3,
+  h4 {
+    @apply text-2xl font-semibold text-[var(--f-text)] m-0;
+  }
+
+  p {
+    @apply text-xl mt-4 leading-relaxed text-[var(--f-text)];
+  }
+
 }
 
-.fuz-contact-description p {
-  @apply text-xl mt-4 leading-relaxed;
-  color: var(--f-text);
+.f-contact-form {
+  @apply space-y-1;
+
+  .f-contact-form-inner {
+    @apply grid grid-cols-2 gap-4
+  }
+
+  .f-rodo {
+    @apply flex items-start gap-3 text-lg text-[var(--f-text)];
+
+    a {
+      @apply text-[var(--f-link-text)];
+    }
+
+    a:hover {
+      @apply text-[var(--fuz-link-hover)];
+    }
+
+    input {
+      @apply mt-2 h-4 w-4;
+    }
+  }
+
+   button {
+      @apply btn btn-outline w-full py-3 text-lg;
+    }
 }
 
-.fuz-contact-form {
-  @apply space-y-2;
+.f-contact-map {
+  @apply w-full max-w-7xl mx-auto mt-6;
 }
 
-/* --- RODO --- */
-.fuz-rodo {
-  @apply flex items-start gap-3 text-sm;
-  color: var(--f-text);
-}
-
-/* .fuz-rodo a {
-  color: var(--fuz-accent);            
-} */
-
-.fuz-rodo a:hover {
-  color: var(--fuz-accent-hover);        /* jeśli masz globalne zmienne */
-}
-/* --- TOAST --- */
-/* --- TOAST SYSTEM (Tailwind version) --- */
-
-.fuz-toast {
+.s-toast {
   @apply fixed top-5 left-1/2 z-[9999] pointer-events-none;
   @apply opacity-0 -translate-y-3 -translate-x-1/2 transition-all duration-300 ease-out;
 }
 
-.fuz-toast.visible {
+.f-toast.visible {
   @apply opacity-100 translate-y-0;
 }
 
-.fuz-toast-msg {
+.f-toast-msg {
   @apply px-5 py-3 rounded-xl shadow-lg text-sm;
   background: var(--fuz-accent);
   color: var(--fuz-accent-text);
 }
 
-.fuz-toast-msg.success {
+.f-toast-msg.success {
   background: var(--fuz-accent);
 }
 
-.fuz-toast-msg.error {
+.f-toast-msg.error {
   @apply bg-red-500 text-white;
-}
-
+}