feat(contact): style Gravity Forms fields and submit button

2026-07-04 13:45:05 -05:00
parent bcb2486576
commit af067fc5d0
1 changed files with 90 additions and 0 deletions
@@ -106,3 +106,93 @@ a.contact-info__value:hover {
        min-height: 18rem;
    }
 }
+
+/* Gravity Forms field overrides (scoped to .contact-info__form) */
+
+.contact-info__form .gform_wrapper {
+    margin: 0;
+    max-width: none;
+}
+
+.contact-info__form .gfield {
+    margin-bottom: 1.25rem;
+}
+
+.contact-info__form .gfield_label {
+    color: var(--color-cwc-blue-01);
+    display: flex;
+    font-size: 0.875rem;
+    font-weight: 700;
+    justify-content: space-between;
+    letter-spacing: 0.05em;
+    line-height: 1.2;
+    margin-bottom: 0.5rem;
+    text-transform: uppercase;
+}
+
+.contact-info__form .gfield_required {
+    color: var(--color-cwc-orange-01);
+    font-weight: 700;
+    margin-left: 0.25rem;
+}
+
+.contact-info__form input[type="text"],
+.contact-info__form input[type="email"],
+.contact-info__form input[type="tel"],
+.contact-info__form input[type="url"],
+.contact-info__form textarea,
+.contact-info__form select {
+    background: color-mix(in oklch, var(--color-cwc-blue-03) 30%, white);
+    border: 1px solid var(--color-cwc-blue-03);
+    border-radius: 0.375rem;
+    color: var(--color-dark);
+    font-size: 1rem;
+    line-height: 1.5;
+    padding: 0.75rem 1rem;
+    width: 100%;
+}
+
+.contact-info__form input[type="text"]:focus,
+.contact-info__form input[type="email"]:focus,
+.contact-info__form input[type="tel"]:focus,
+.contact-info__form input[type="url"]:focus,
+.contact-info__form textarea:focus,
+.contact-info__form select:focus {
+    border-color: var(--color-cwc-blue-01);
+    outline: 2px solid var(--color-cwc-blue-01);
+    outline-offset: 2px;
+}
+
+.contact-info__form textarea {
+    min-height: 10rem;
+    resize: vertical;
+}
+
+.contact-info__form .gform_footer {
+    margin-top: 1.5rem;
+}
+
+.contact-info__form .gform_footer input[type="submit"],
+.contact-info__form .gform_footer button[type="submit"] {
+    background: var(--background-image-button-gradient);
+    border: 3px solid var(--color-secondary);
+    border-radius: 1.25rem 0.25rem 1.25rem 0.25rem;
+    color: var(--color-white);
+    cursor: pointer;
+    font-size: 1.125rem;
+    font-weight: 700;
+    padding: 0.625rem 2rem;
+    transition: background 200ms, border-color 200ms, color 200ms;
+}
+
+.contact-info__form .gform_footer input[type="submit"]:hover,
+.contact-info__form .gform_footer button[type="submit"]:hover {
+    background: var(--color-secondary);
+    border-color: var(--color-secondary);
+}
+
+.contact-info__form .validation_message {
+    color: var(--color-danger);
+    font-style: italic;
+    margin-top: 0.25rem;
+}