/* ==========================================================================
Gravity Forms — brand submit button
The canonical "Accent (submit)" button from the design system, applied to
every Gravity Form (bar/enquiry-form, bar/contact-panel and any standalone
gravityforms/form block) so there is one source of truth.
Gravity Forms ships its own themed CSS (.gform_wrapper.gravity-theme …) that
sets the button's background, padding and border-radius with high specificity
and loads after the theme, so the brand values are forced with !important.
That is deliberate — without it GF wins and the signature 20 8 20 8 corner is
flattened to a plain rounded rectangle.
Markup GF renders:
========================================================================== */
.gform_wrapper .gform_footer input[type="submit"],
.gform_wrapper .gform_footer input.gform_button,
.gform_wrapper .gform_footer button.gform_button,
.gform_wrapper input.gform_button,
.gform_wrapper button.gform_button,
.gform_wrapper .gform-theme-button--primary,
.gform_wrapper .gform_page_footer input[type="submit"] {
display: block;
width: 100% !important;
background-color: var(--wp--preset--color--accent-soft, #bbdee7) !important;
color: var(--wp--preset--color--primary, #104246) !important;
border: none !important;
border-radius: var(--bar-radius-button, 20px 8px 20px 8px) !important;
/* Match bar/button Accent exactly: same padding, type, no default shadow.
* !important on typography too — GF's orbital theme sets font-size/line-height
* with !important, which otherwise keeps the button smaller. */
padding: 10px 24px !important;
font-family: var(--wp--preset--font-family--body) !important;
font-weight: 500 !important;
font-size: clamp(17px, 4vw, 20px) !important;
line-height: 1.5 !important;
cursor: pointer;
transition:
background-color 0.18s ease,
color 0.18s ease,
box-shadow 0.18s ease,
transform 0.18s ease;
}
/* Hover / focus — accent fill, white text, subtle lift (matches bar/button) */
.gform_wrapper .gform_footer input[type="submit"]:hover,
.gform_wrapper .gform_footer input[type="submit"]:focus-visible,
.gform_wrapper .gform_footer input.gform_button:hover,
.gform_wrapper .gform_footer button.gform_button:hover,
.gform_wrapper input.gform_button:hover,
.gform_wrapper button.gform_button:hover,
.gform_wrapper .gform-theme-button--primary:hover {
background-color: var(--wp--preset--color--accent, #1097a6) !important;
color: #ffffff !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
transform: translateY(-1px);
}
.gform_wrapper .gform_footer input[type="submit"]:focus-visible,
.gform_wrapper input.gform_button:focus-visible,
.gform_wrapper button.gform_button:focus-visible {
outline: 3px solid var(--wp--preset--color--accent, #1097a6);
outline-offset: 3px;
}
/* Match bar/button: no lift under reduced-motion */
@media (prefers-reduced-motion: reduce) {
.gform_wrapper input.gform_button,
.gform_wrapper button.gform_button,
.gform_wrapper .gform_footer input[type="submit"] {
transition: background-color 0.18s ease, color 0.18s ease;
}
.gform_wrapper input.gform_button:hover,
.gform_wrapper button.gform_button:hover,
.gform_wrapper .gform_footer input[type="submit"]:hover {
transform: none;
box-shadow: none;
}
}
/* ==========================================================================
Control height — 54px for single-line fields
Applies to text-like inputs and selects only. Textareas keep their own
(taller) height, and checkboxes/radios/buttons are excluded so they aren't
stretched. `min-height` beats GF's `block-size` (--gf-ctrl-size) without
having to fight it, and still lets a field grow if its content needs to.
========================================================================== */
.gform_wrapper
input:not([type="submit"]):not([type="button"]):not([type="reset"]):not(
[type="checkbox"]
):not([type="radio"]):not([type="file"]):not([type="hidden"]),
.gform_wrapper select:not([multiple]) {
min-height: 54px;
}
/* ==========================================================================
Selects — brand chevron
Gravity Forms swaps the select's background-image on :hover, :focus and
:disabled (--gf-ctrl-select-icon-hover et al) but does NOT re-declare
background-repeat/size in those rules. Any `background` *shorthand* on a
select therefore resets repeat to `repeat` and size to `auto`, and GF's
swapped-in icon (an SVG with no intrinsic size) tiles into a zigzag on
hover. So: only ever set background longhands here, and pin the chevron
across every state so GF can never swap it out.
========================================================================== */
.gform_wrapper select:not([multiple]),
.gform_wrapper select:not([multiple]):hover,
.gform_wrapper select:not([multiple]):focus,
.gform_wrapper select:not([multiple]):disabled {
appearance: none;
background-color: #ffffff !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8' fill='none' stroke='%23104246' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='1 1 7 7 13 1'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: right 16px center !important;
background-size: 14px 8px !important;
padding-right: 44px !important;
/* The closed select renders its selected/placeholder text with
* -webkit-text-fill-color in Blink/WebKit — that beats `color`, so both are
* pinned. Without the fill-color the text paints transparent and the field
* looks empty even though an option is selected. */
color: #104246 !important;
-webkit-text-fill-color: #104246 !important;
opacity: 1 !important;
font-size: 16px;
line-height: 1.5;
text-indent: 0;
}
/* The placeholder is GF's first