FIX on z-index to always be on top

.prettierrc

@@ -2,5 +2,5 @@
 	"tabWidth": 2,
 	"semi": true,
 	"singleQuote": true,
-	"printWidth": 60
+	"printWidth": 90
 }

resources/css/app.css

@@ -9,7 +9,10 @@
 @import './base/typography.css';
 @import './base/filters.css';
 @import './base/links.css';
-/* @import './base/swiper.css'; */
+
+/* ########### FORMS ############ */
+@import './forms/forms.css';
+@import './forms/form_contributions.css';
 
 /* ########### COMPONENTS ############ */
 @import './components/buttons.css';

resources/css/blocks/chapter-section.css

@@ -3,6 +3,11 @@
   @apply py-32 xl:py-32 2xl:py-48 px-32;
 
   @apply max-w-screen-2xl mx-auto;
+  color: var(--content-box-text-color);
+
+  &:first-child {
+    @apply mt-0;
+  }
 
   h2 {
     @apply title-small;
@@ -14,14 +19,34 @@
     @apply flex-row-reverse;
   }
   &--has-background {
-    @apply relative py-12 xl:py-24 !my-12;
+    @apply relative py-12 xl:py-24 !mb-12;
+
+    &:not(:first-child) {
+      @apply mt-0;
     }
+
+    &:first-child {
+      margin-top: -32px !important;
+    }
+  }
+
   &__content {
     @apply max-w-3xl;
     p {
       @apply text-neutral-600 max-w-xl mb-2;
     }
   }
+  &__content p,
+  .carhop-heading p,
+  h1.wp-block-heading,
+  h2.wp-block-heading,
+  h3.wp-block-heading,
+  h4.wp-block-heading,
+  h5.wp-block-heading,
+  h6.wp-block-heading {
+    color: var(--chapter-section-text-color);
+  }
+
   &__innerblocks {
     /* @apply max-w-xl; */
     p {

resources/css/blocks/content-box.css

@@ -1,3 +1,7 @@
+:root {
+  --content-box-text-color: #136f63;
+}
+
 .content-box {
   @apply py-16;
   background-color: var(--content-box-background-color);
@@ -12,6 +16,14 @@
     color: var(--content-box-text-color);
   }
 
+  &--bg-light {
+    --content-box-text-color: var(--wp--preset--color--carhop-green);
+  }
+
+  &--bg-dark {
+    --content-box-text-color: #fff;
+  }
+
   p {
     @apply pb-8;
   }

resources/css/blocks/heading.css

@@ -1,6 +1,6 @@
 .carhop-heading {
   &__innerblocks {
-    @apply max-w-screen-2xl mx-auto px-4 flex flex-col  justify-center gap-8;
+    @apply max-w-screen-2xl mx-auto  flex flex-col  justify-center gap-8;
   }
 
   &--align-center {

resources/css/forms/form_contributions.css

@@ -0,0 +1,13 @@
+#nf-form-2-cont {
+  nf-fields-wrap {
+    @apply grid gap-4 grid-cols-2;
+  }
+
+  nf-field {
+    @apply block col-span-2;
+    &:nth-child(1),
+    &:nth-child(2) {
+      @apply col-span-2 lg:col-span-1;
+    }
+  }
+}

resources/css/forms/forms.css

@@ -0,0 +1,52 @@
+:root {
+  --form-text-color: var(--wp--preset--color--carhop-green);
+  --form-border-color: var(--wp--preset--color--carhop-green);
+}
+
+select,
+input,
+textarea {
+  @apply bg-transparent border border-primary p-4;
+  border-color: var(--form-border-color, #f1fcf9);
+  &::placeholder {
+    color: var(--form-text-color);
+    @apply text-lg font-light;
+    opacity: 0.8;
+  }
+}
+
+.nf-field-element:has(input[aria-required='true']) {
+  @apply relative;
+  &:after {
+    @apply content-['*'] absolute top-3 right-3 text-red-800 text-2xl;
+    line-height: 1;
+  }
+}
+
+input[type='submit'] {
+  @apply text-white  w-12 h-12 relative block !mx-auto;
+
+  &:hover {
+    @apply bg-carhop-green-900 border border-carhop-green-900 cursor-pointer;
+  }
+}
+
+.content-box {
+  --form-border-color: var(--content-box-text-color);
+  --form-text-color: var(--content-box-text-color);
+}
+
+label {
+  @apply sr-only;
+}
+
+.nf-form-fields-required {
+}
+
+.nf-before-form-content {
+  .nf-form-fields-required {
+    @apply text-lg pb-12;
+    color: var(--form-text-color);
+    opacity: 0.9;
+  }
+}

resources/css/layout/nav.css

@@ -2,6 +2,10 @@
   @apply w-72 h-auto;
 }
 
+header{
+  @apply relative z-50;
+}
+
 .primary-menu-container {
   @apply mx-auto  
 	bg-primary 

tailwind.config.js

@@ -31,7 +31,7 @@ module.exports = {
           tailpress.theme('settings.color.palette', theme)
         ),
         'carhop-green': {
-          50: '#f1fcf9',
+          50: getBaseColor('carhop-green-light'),
           100: '#cef9ee',
           200: '#9df2de',
           300: '#64e4c9',
@@ -70,7 +70,7 @@ module.exports = {
           950: '#2b0665',
         },
         'carhop-blue': {
-          50: '#eafeff',
+          50: getBaseColor('carhop-blue-light'),
           100: '#cbfbff',
           200: '#9ef4ff',
           300: '#5be9ff',

theme.json

@@ -19,6 +19,11 @@
           "slug": "carhop-green",
           "color": "#136f63"
         },
+        {
+          "name": "Carhop Green Light",
+          "slug": "carhop-green-light",
+          "color": "#f1fcf9"
+        },
         {
           "name": "Carhop Orange",
           "slug": "carhop-orange",
@@ -29,6 +34,11 @@
           "slug": "carhop-blue",
           "color": "#c3e0ff"
         },
+        {
+          "name": "Carhop Blue Light",
+          "slug": "carhop-blue-light",
+          "color": "#eafeff"
+        },
         {
           "name": "Carhop Purple",
           "slug": "carhop-purple",