Css- poprawka formatowania wyszukiwania kanałów i poprawiony układ kontakt

src/pages/kontakt/index.astro

@@ -21,7 +21,12 @@ type ContactData = {
     phone: { placeholder: string };
     subject: { placeholder: string };
     message: { placeholder: string; rows: number };
-    rodo: { label: string; policyLink: string; policyTitle: string; policyText: string };
+    rodo: {
+      label: string;
+      policyLink: string;
+      policyTitle: string;
+      policyText: string;
+    };
     submit: { label: string; title: string };
     successMessage: string;
     errorMessage: string;
@@ -37,14 +42,17 @@ const form = data.form;
 
 <DefaultLayout seo={seo}>
   <section class="f-section">
-    <div class="f-section-grid md:grid-cols-2 gap-10 items-start">
+    <div class="f-contact-grid">
+      {/* row 1: tytuły */}
+      <h1 class="f-section-title m-0">{data.title}</h1>
+      <h1 class="f-section-title m-0">{data.contactFormTitle}</h1>
+
+      {/* row 2: treść */}
       <div class="f-contact-item">
-        <h1 class="f-section-title">{data.title}</h1>
         <Markdown text={data.description} />
       </div>
 
       <div id="form">
-        <h1 class="f-section-title">{data.contactFormTitle}</h1>
        
         <form id="contactForm" class="f-contact-form">
           <div class="f-contact-form-inner">

src/styles/addons.css

@@ -397,9 +397,14 @@
 }
 
 .f-note-acc-body {
-  @apply text-sm opacity-80 leading-relaxed ml-5;
+  display: none;
 }
 
+/* widoczne tylko gdy details jest otwarty */
+.f-note-acc[open] .f-note-acc-body {
+  display: block;
+  @apply text-sm opacity-80 leading-relaxed ml-5;
+}
 .f-note-acc-p {
   @apply mb-1 last:mb-0;
 }

src/styles/contact.css

@@ -1,23 +1,26 @@
-/* @tailwind base; */
+.f-contact-grid {
+  @apply mx-auto grid max-w-7xl gap-10;
+  @apply md:grid-cols-2;
+  @apply items-start;
+}
+
 
 .f-contact-item {
-
   h3,
   h4 {
-    @apply text-2xl font-semibold text-[--f-contact-item-text] m-0;
+    @apply m-0 text-2xl font-semibold text-[--f-contact-item-text];
   }
 
   p:first-of-type {
     @apply py-3 text-3xl;
   }
-
 }
 
 .f-contact-form {
   @apply space-y-1;
 
   .f-contact-form-inner {
-    @apply grid grid-cols-2 gap-4
+    @apply grid grid-cols-2;
   }
 
   .f-rodo {
@@ -29,23 +32,24 @@
   }
 }
 
+
 .f-contact-map {
-  @apply w-full max-w-7xl mx-auto mt-6;
+  @apply mx-auto mt-6 w-full max-w-7xl;
 }
 
+
 .f-toast {
   @apply fixed left-1/2 z-[999999] pointer-events-none;
   top: calc(var(--nav-height, 80px) + 20px);
-
-  @apply opacity-0 -translate-y-3 -translate-x-1/2 transition-all duration-300 ease-out;
+  @apply -translate-x-1/2 -translate-y-3 opacity-0 transition-all duration-300 ease-out;
 }
 
 .f-toast.visible {
-  @apply opacity-100 translate-y-0;
+  @apply translate-y-0 opacity-100;
 }
 
 .f-toast-msg {
-  @apply px-5 py-3 rounded-xl shadow-lg text-lg bg-[--f-background-toast] text-[--f-text];
+  @apply rounded-xl bg-[--f-background-toast] px-5 py-3 text-lg text-[--f-text] shadow-lg;
 }
 
 .f-toast-msg.success {

src/styles/jambox-search.css

@@ -1,5 +1,5 @@
   .f-chsearch {
-    @apply mt-6;
+   
   }
 
   .f-chsearch__top {

src/styles/sections.css

@@ -18,7 +18,7 @@
 }
 
 .f-section-grid {
-  @apply grid items-center gap-5 max-w-7xl mx-auto mt-8;
+  @apply grid items-center gap-5 max-w-7xl mx-auto;
 }
 
 .f-section-grid-single {