/* ==========================================================================
Gravity Forms — submit button
Replaces the plugin's generic button with the theme's: square, navy, the
uppercase Inter voice at a wide, quiet tracking, and the long arrow the
text links use. On hover an orange fill sweeps in from the left while the
arrow slides forward.
Gravity Forms usually renders submit as an .
Covers both markups: the legacy one, and the "Orbital" theme (2.7+), whose
own button is driven by --gf-ctrl-btn-* variables - those are pointed at
the theme's values too, so anything Orbital draws that these rules miss
still comes out in the right colours.
========================================================================== */
.gform_wrapper {
/* The button, as variables so a scheme can turn it over. */
--o-gf-btn-bg: var(--o-navy);
--o-gf-btn-fg: var(--o-white);
--o-gf-btn-sweep: var(--o-orange);
--o-gf-btn-fg-hover: var(--o-white);
--o-gf-btn-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 12' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 6h23M19 1l5 5-5 5'/%3E%3C/svg%3E");
--o-gf-btn-arrow-hover: var(--o-gf-btn-arrow);
/* "Previous": outlined in the text colour, filling on hover. */
--o-gf-btn2-fg: var(--o-navy);
--o-gf-btn2-bg-hover: var(--o-navy);
--o-gf-btn2-fg-hover: var(--o-white);
/* Orbital's own button variables, pointed at ours. */
--gf-ctrl-btn-bg-color-primary: var(--o-navy);
--gf-ctrl-btn-bg-color-hover-primary: var(--o-orange);
--gf-ctrl-btn-bg-color-focus-primary: var(--o-orange);
--gf-ctrl-btn-color-primary: var(--o-white);
--gf-ctrl-btn-border-color-primary: transparent;
--gf-ctrl-btn-radius: 0;
--gf-ctrl-btn-font-family: var(--o-font-ui);
--gf-ctrl-btn-font-weight: 500;
--gf-ctrl-btn-text-transform: uppercase;
--gf-ctrl-btn-shadow: none;
}
/*
* On navy the navy button would vanish: it goes orange, and the sweep is
* white with the label turning navy under it.
*/
.o-scheme-dark .gform_wrapper {
--o-gf-btn-bg: var(--o-orange);
--o-gf-btn-sweep: var(--o-white);
--o-gf-btn-fg-hover: var(--o-navy);
--o-gf-btn-arrow-hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 12' fill='none' stroke='%231d305b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 6h23M19 1l5 5-5 5'/%3E%3C/svg%3E");
--o-gf-btn2-fg: var(--o-white);
--o-gf-btn2-bg-hover: var(--o-white);
--o-gf-btn2-fg-hover: var(--o-navy);
--gf-ctrl-btn-bg-color-primary: var(--o-orange);
--gf-ctrl-btn-bg-color-hover-primary: var(--o-white);
--gf-ctrl-btn-color-primary: var(--o-white);
}
/* On the orange band, navy with a white sweep. */
.o-scheme-orange .gform_wrapper {
--o-gf-btn2-fg: var(--o-white);
--o-gf-btn2-bg-hover: var(--o-white);
--o-gf-btn2-fg-hover: var(--o-navy);
--o-gf-btn-bg: var(--o-navy);
--o-gf-btn-sweep: var(--o-white);
--o-gf-btn-fg-hover: var(--o-navy);
--o-gf-btn-arrow-hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 12' fill='none' stroke='%231d305b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 6h23M19 1l5 5-5 5'/%3E%3C/svg%3E");
}
/*
* Doubled .gform_wrapper and the body prefix out-rank the plugin's own
* stylesheets (legacy and Orbital) without resorting to !important.
*/
body .gform_wrapper.gform_wrapper :is(.gform_footer, .gform_page_footer) :is(input[type="submit"], button[type="submit"], .gform_button, .gform_next_button) {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: auto;
min-height: 3.5rem; /* 56 */
margin: 0;
padding: 1.125rem 4.25rem 1.125rem 2.25rem; /* Room on the right for the arrow. */
border: 0;
border-radius: 0;
background:
var(--o-gf-btn-arrow) no-repeat right 2.25rem center / 1.625rem 0.75rem,
linear-gradient(var(--o-gf-btn-sweep), var(--o-gf-btn-sweep)) no-repeat left center / 0% 100%,
var(--o-gf-btn-bg);
box-shadow: none;
color: var(--o-gf-btn-fg);
font-family: var(--o-font-ui);
font-size: 0.9375rem; /* 15 */
font-weight: var(--o-fw-medium);
line-height: 1.2;
letter-spacing: 0.16em;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
transition:
background-size 520ms cubic-bezier(0.65, 0, 0.35, 1),
background-position 320ms cubic-bezier(0.4, 0, 0.2, 1),
color 260ms cubic-bezier(0.4, 0, 0.2, 1) 120ms,
transform 120ms ease;
}
body .gform_wrapper.gform_wrapper :is(.gform_footer, .gform_page_footer) :is(input[type="submit"], button[type="submit"], .gform_button, .gform_next_button):is(:hover, :focus-visible) {
background:
var(--o-gf-btn-arrow-hover) no-repeat right 1.875rem center / 1.625rem 0.75rem,
linear-gradient(var(--o-gf-btn-sweep), var(--o-gf-btn-sweep)) no-repeat left center / 100% 100%,
var(--o-gf-btn-bg);
color: var(--o-gf-btn-fg-hover);
}
body .gform_wrapper.gform_wrapper :is(.gform_footer, .gform_page_footer) :is(input[type="submit"], button[type="submit"], .gform_button, .gform_next_button):active {
transform: translateY(1px);
}
body .gform_wrapper.gform_wrapper :is(.gform_footer, .gform_page_footer) :is(input[type="submit"], button[type="submit"], .gform_button, .gform_next_button):focus-visible {
outline: 2px solid var(--o-focus);
outline-offset: 3px;
}
/* While Gravity Forms submits over AJAX it disables the button. */
body .gform_wrapper.gform_wrapper :is(.gform_footer, .gform_page_footer) :is(input[type="submit"], button[type="submit"], .gform_button, .gform_next_button):disabled {
cursor: progress;
opacity: 0.7;
}
/*
* "Previous" on multi-page forms: the same shape and type, outlined in the
* text colour and filling on hover - the quiet partner to the solid button.
*/
body .gform_wrapper.gform_wrapper .gform_page_footer :is(.gform_previous_button, input[type="button"].gform_previous_button) {
min-height: 3.5rem; /* Border included, so it stands level with the solid button. */
margin: 0 0.75rem 0 0;
padding: 1rem 2.25rem;
border: 1.5px solid currentColor;
border-radius: 0;
background: transparent;
box-shadow: none;
color: var(--o-gf-btn2-fg);
font-family: var(--o-font-ui);
font-size: 0.9375rem;
font-weight: var(--o-fw-medium);
line-height: 1.2;
letter-spacing: 0.16em;
text-transform: uppercase;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
transition: background-color var(--o-transition), color var(--o-transition), border-color var(--o-transition);
}
body .gform_wrapper.gform_wrapper .gform_page_footer :is(.gform_previous_button, input[type="button"].gform_previous_button):is(:hover, :focus-visible) {
border-color: var(--o-gf-btn2-bg-hover);
background-color: var(--o-gf-btn2-bg-hover);
color: var(--o-gf-btn2-fg-hover);
}
/* The AJAX spinner sits beside the button; give it room and centre it. */
body .gform_wrapper.gform_wrapper :is(.gform_footer, .gform_page_footer) .gform_ajax_spinner {
margin-inline-start: 1rem;
vertical-align: middle;
}
/* Phones: a full-width button is the easier target. */
@media (max-width: 599px) {
body .gform_wrapper.gform_wrapper :is(.gform_footer, .gform_page_footer) :is(input[type="submit"], button[type="submit"], .gform_button, .gform_next_button) {
width: 100%;
}
}
@media (prefers-reduced-motion: reduce) {
body .gform_wrapper.gform_wrapper :is(.gform_footer, .gform_page_footer) :is(input[type="submit"], button[type="submit"], .gform_button, .gform_next_button) {
transition: none;
}
}
/* ==========================================================================
Inline signup - .o-signup
A one-field Gravity Form drawn as the "Stay in the Loop" comp (179:578)
draws its signup: a white email field with a solid button butted against
its right edge, 64px tall (48 in the compact footer version). Rendered by
ovation_get_signup_form() in inc/gravity-forms.php, which wraps the plugin's
own output - so everything here is scoped to .o-signup and leaves every
other form on the site alone.
The words are the form's: set the email field's placeholder and the submit
button's text in the form editor. The label stays in the markup for screen
readers and is hidden visually.
Selectors carry `body .o-signup .gform_wrapper.gform_wrapper` so they out-
rank both the plugin's stylesheets and the button rules above.
========================================================================== */
.o-signup {
--o-signup-h: 4rem; /* 64 */
--o-signup-font: 1.0625rem; /* 17 */
--o-signup-pad: 1.5rem;
--o-signup-btn-pad: 2.5rem;
--o-signup-edge: transparent;
width: min(100%, 40rem); /* The comp's 460 field + 180 button. */
}
.o-signup--compact {
--o-signup-h: 3rem; /* 48 */
--o-signup-font: 1rem;
--o-signup-pad: 1.125rem;
--o-signup-btn-pad: 1.75rem;
width: 100%;
}
/* A white field on a white band needs an edge to be seen. */
.o-scheme-light .o-signup {
--o-signup-edge: var(--o-rule-cool);
}
/* The comp's orange button, wherever the signup sits... */
.o-signup .gform_wrapper {
--o-gf-btn-bg: var(--o-orange);
--o-gf-btn-sweep: var(--o-navy);
--o-gf-btn-fg-hover: var(--o-white);
--gf-ctrl-btn-bg-color-primary: var(--o-orange);
--gf-ctrl-btn-bg-color-hover-primary: var(--o-navy);
}
/* ...except on the orange band, where it would vanish: navy, sweeping white. */
.o-scheme-orange .o-signup .gform_wrapper {
--o-gf-btn-bg: var(--o-navy);
--o-gf-btn-sweep: var(--o-white);
--o-gf-btn-fg-hover: var(--o-navy);
--gf-ctrl-btn-bg-color-primary: var(--o-navy);
--gf-ctrl-btn-bg-color-hover-primary: var(--o-white);
}
/* On navy, the sweep turns white so the hover still shows. */
.o-scheme-dark .o-signup .gform_wrapper {
--o-gf-btn-sweep: var(--o-white);
--o-gf-btn-fg-hover: var(--o-navy);
}
body .o-signup .gform_wrapper.gform_wrapper {
margin: 0;
padding: 0;
}
/* Field and button on one row. */
body .o-signup .gform_wrapper.gform_wrapper form {
display: flex;
align-items: flex-start;
}
body .o-signup .gform_wrapper.gform_wrapper .gform_body {
flex: 1 1 auto;
min-width: 0;
}
body .o-signup .gform_wrapper.gform_wrapper .gform_fields {
display: block;
margin: 0;
padding: 0;
}
body .o-signup .gform_wrapper.gform_wrapper .gfield {
margin: 0;
padding: 0;
}
/* Title, description, "* indicates required fields": the band says it all. */
body .o-signup .gform_wrapper.gform_wrapper :is(.gform_heading, .gform_required_legend, .gfield_description:not(.validation_message)) {
display: none;
}
/*
* The label, and the summary GF prints above a form that failed validation,
* stay for screen readers - GF moves focus to the summary - but take no room.
*/
body .o-signup .gform_wrapper.gform_wrapper :is(.gfield > .gfield_label, .gform_validation_errors) {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
body .o-signup .gform_wrapper.gform_wrapper .gfield :is(input[type="email"], input[type="text"]) {
display: block;
width: 100%;
height: var(--o-signup-h);
margin: 0;
padding: 0 var(--o-signup-pad);
border: 1.5px solid var(--o-signup-edge);
border-right: 0;
border-radius: 0;
background-color: var(--o-white);
box-shadow: none;
color: var(--o-ink);
font-family: var(--o-font-body);
font-size: var(--o-signup-font);
line-height: 1.2;
}
body .o-signup .gform_wrapper.gform_wrapper .gfield :is(input[type="email"], input[type="text"])::placeholder {
color: var(--o-ink-mist);
opacity: 1;
}
/* Inset, so the ring is not clipped by the button beside it. */
body .o-signup .gform_wrapper.gform_wrapper .gfield :is(input[type="email"], input[type="text"]):focus {
outline: 2px solid var(--o-orange);
outline-offset: -2px;
}
body .o-signup .gform_wrapper.gform_wrapper .gfield_error :is(input[type="email"], input[type="text"]) {
outline: 2px solid var(--o-orange);
outline-offset: -2px;
}
/* The field's own error sits under the row, in the band's text colour. */
body .o-signup .gform_wrapper.gform_wrapper .gfield .validation_message {
margin: 0.5rem 0 0;
padding: 0;
border: 0;
background: none;
color: inherit;
font-family: var(--o-font-body);
font-size: var(--o-fs-small);
font-weight: var(--o-fw-medium);
}
body .o-signup .gform_wrapper.gform_wrapper :is(.gform_footer, .gform_page_footer) {
flex: 0 0 auto;
display: flex;
margin: 0;
padding: 0;
}
/*
* The shared button, reshaped: the row's height, no arrow (the comp has
* none), and the comp's 16px label. The sweep still runs on hover.
*/
body .o-signup .gform_wrapper.gform_wrapper :is(.gform_footer, .gform_page_footer) :is(input[type="submit"], button[type="submit"], .gform_button) {
height: var(--o-signup-h);
min-height: 0;
padding: 0 var(--o-signup-btn-pad);
background:
linear-gradient(var(--o-gf-btn-sweep), var(--o-gf-btn-sweep)) no-repeat left center / 0% 100%,
var(--o-gf-btn-bg);
font-size: 1rem;
letter-spacing: 0.0625em; /* 1px at 16 */
}
body .o-signup .gform_wrapper.gform_wrapper :is(.gform_footer, .gform_page_footer) :is(input[type="submit"], button[type="submit"], .gform_button):is(:hover, :focus-visible) {
background:
linear-gradient(var(--o-gf-btn-sweep), var(--o-gf-btn-sweep)) no-repeat left center / 100% 100%,
var(--o-gf-btn-bg);
}
body .o-signup .gform_wrapper.gform_wrapper :is(.gform_footer, .gform_page_footer) :is(input[type="submit"], button[type="submit"], .gform_button):focus-visible {
outline-offset: 2px;
}
/* The disabled button already says "working"; the spinner would push the row. */
body .o-signup .gform_wrapper.gform_wrapper .gform_ajax_spinner {
display: none;
}
/* After submitting, the thank-you replaces the row. */
.o-signup .gform_confirmation_message {
color: inherit;
font-family: var(--o-font-body);
font-size: var(--o-fs-body-lg);
line-height: 1.5;
}
/* Phones: field over button, both full width. */
@media (max-width: 599px) {
body .o-signup .gform_wrapper.gform_wrapper form {
flex-direction: column;
align-items: stretch;
}
body .o-signup .gform_wrapper.gform_wrapper .gfield :is(input[type="email"], input[type="text"]) {
border-right: 1.5px solid var(--o-signup-edge);
}
body .o-signup .gform_wrapper.gform_wrapper :is(.gform_footer, .gform_page_footer) :is(input[type="submit"], button[type="submit"], .gform_button) {
width: 100%;
}
}