diff --git a/views/blocks/contact-info/contact-info.css b/views/blocks/contact-info/contact-info.css index 603a453..d58b613 100644 --- a/views/blocks/contact-info/contact-info.css +++ b/views/blocks/contact-info/contact-info.css @@ -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; +}