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

This commit is contained in:
Keith Solomon
2026-07-04 13:45:05 -05:00
parent bcb2486576
commit af067fc5d0
@@ -106,3 +106,93 @@ a.contact-info__value:hover {
min-height: 18rem; 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;
}