FEATURE Introducing the forms styles

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;
+  }
+}