FEATURE Styling forms

resources/css/forms/forms.css

@@ -1,7 +1,90 @@
 :root {
   --form-text-color: var(--wp--preset--color--carhop-green);
   --form-border-color: var(--wp--preset--color--carhop-green);
+
+  /* --gf-ctrl-focus-bg-color: var(--wp--preset--color--carhop-green);
+  --gf-ctrl-focus-color: var(--wp--preset--color--carhop-green);
+  --gf-ctrl-focus-border-color: var(--wp--preset--color--carhop-green); */
 }
+body.front-end {
+  .gform-theme--api,
+  .gform-theme--framework {
+    input[type='submit'] {
+      --gf-ctrl-btn-bg-color-primary: transparent;
+      --gf-ctrl-btn-bg-color-primary-focus: white;
+      --gf-ctrl-btn-bg-color-primary-hover: white;
+
+      --gf-ctrl-btn-border-color-primary: white;
+
+      --gf-ctrl-btn-bg-color-primary-active: var(--wp--preset--color--carhop-green);
+      --gf-ctrl-btn-bg-color-primary-disabled: var(--wp--preset--color--carhop-green);
+      --gf-ctrl-btn-bg-color-primary-disabled-focus: var(
+        --wp--preset--color--carhop-green
+      );
+      --gf-ctrl-btn-bg-color-primary-disabled-hover: var(
+        --wp--preset--color--carhop-green
+      );
+      --gf-ctrl-btn-bg-color-primary-disabled-active: var(
+        --wp--preset--color--carhop-green
+      );
+    }
+    .gform_required_legend {
+      @apply hidden;
+    }
+    .gfield_required {
+      --gf-ctrl-label-font-size-req: 20px;
+    }
+
+    .gform_fields {
+      --gf-form-gap-x: 2rem;
+      --gf-form-gap-y: 3.4rem;
+    }
+    textarea::placeholder,
+    input::placeholder {
+      --gf-ctrl-placeholder-color: white;
+      --gf-ctrl-placeholder-color-focus: white;
+      --gf-ctrl-placeholder-color-hover: white;
+
+      color: white;
+    }
+    textarea,
+    input {
+      --gf-ctrl-bg-color: transparent;
+      --gf-ctrl-bg-color-focus: transparent !important;
+      --gf-ctrl-bg-color-hover: transparent !important;
+
+      --gf-ctrl-color: var(--wp--preset--color--carhop-green);
+      --gf-ctrl-color-focus: white;
+      --gf-ctrl-color-hover: white;
+
+      --gf-ctrl-font-size: 1.2rem;
+      --gf-ctrl-font-weight: 300;
+
+      --gf-ctrl-border-color: white;
+      --gf-ctrl-border-color-focus: white;
+      --gf-ctrl-border-color-hover: white;
+      --gf-ctrl-padding-x: 1rem;
+      --gf-ctrl-padding-y: 2rem;
+    }
+
+    .gfield_description {
+      --gf-ctrl-desc-color: white;
+      --gf-ctrl-desc-color-focus: white;
+      --gf-ctrl-desc-color-hover: white;
+    }
+
+    /* input::placeholder {
+      color: red !important;
+    } */
+  }
+
+  /* .gfield:has(input[aria-required='true']) {
+    @apply relative;
+    &:after {
+      @apply content-['*'] absolute top-3 right-3 text-red-800 text-2xl;
+      line-height: 1;
+    }
+  } */
 
   select,
   input,
@@ -10,8 +93,8 @@ textarea {
     border-color: var(--form-border-color, #f1fcf9);
     &::placeholder {
       color: var(--form-text-color);
-    @apply text-lg font-light;
+      @apply !text-lg !font-light;
-    opacity: 0.8;
+      opacity: 0.6;
     }
   }
 
@@ -36,9 +119,9 @@ input[type='submit'] {
     --form-text-color: var(--content-box-text-color);
   }
 
-label {
+  /* label {
     @apply sr-only;
-}
+  } */
 
   .nf-form-fields-required {
   }
@@ -50,3 +133,28 @@ label {
       opacity: 0.9;
     }
   }
+}
+
+.gfield {
+  @apply !relative;
+
+  --gf-ctrl-label-color-primary: white;
+
+  .gfield_label {
+    @apply !opacity-0 absolute top-1/2 left-4 text-white !text-lg !font-light;
+    transition: all 0.15s ease-out;
+  }
+}
+.gfield:has(input:focus, textarea:focus) {
+  .gfield_label {
+    @apply !opacity-100;
+
+    top: -40px;
+  }
+  --gf-ctrl-placeholder-color: transparent;
+
+  #placeholder,
+  input::placeholder {
+    @apply !opacity-0;
+  }
+}