/* ===== GRAVITY FORMS - THEME STYLES
Gravity Forms' own CSS is disabled (markup.php). Fields carry the theme's
.form-row / .input-txt classes, so most styling comes from dist/css; this
file only covers GF-specific structure. Plain CSS so it doesn't depend on
each site's Sass build.
================================================================================ */
.ww-form .gform_fields {
display: grid;
grid-template-columns: repeat(12, 1fr);
column-gap: 10px;
margin: 0;
padding: 0;
}
.ww-form .gfield {
grid-column: span 12;
min-width: 0;
text-align: left;
}
@media (min-width: 640px) {
.ww-form .gfield--width-half {
grid-column: span 6;
}
.ww-form .gfield--width-third {
grid-column: span 4;
}
}
/* Expandable forms (theme JS animates max-height) - keep the grid from
stretching the first row */
.ww-form .gform_fields.expandable-fields {
align-content: start;
}
/* Hidden + honeypot fields. The heading only holds an empty required legend
(titles are never shown), whose margins can collapse into the layout. */
.ww-form_wrapper .gform_heading,
.ww-form .gfield--type-hidden,
.ww-form .gform_hidden,
.ww-form .gform_validation_container,
.ww-form .ww-hide,
.gform_wrapper .gform_validation_container {
display: none !important;
}
.ww-form .gfield_required {
color: inherit;
}
.ww-form .ginput_container {
position: relative;
}
/* Section headings (survey / warranty / sash): the
keeps the theme's own
heading styles, as the legacy did */
/* The legacy templates'
spacer lines: one line of the form text each
(1lh; the px value is the desktop line, for browsers without lh) - see
ww_gf_section() and the sash product groups in forms.php */
.ww-form .gfield.ww-br-1 {
margin-top: 25.6px;
margin-top: 1lh;
}
.ww-form .gfield.ww-br-2 {
margin-top: 51.2px;
margin-top: 2lh;
}
/* Static labels: radios, checkboxes, selects with a question as their label */
.ww-form fieldset.gfield {
border: 0;
margin: 0 0 10px;
padding: 0;
}
.ww-form .label-static .gfield_label:not(.label),
.ww-form .label-static legend:not(.label),
.ww-form fieldset.gfield legend:not(.label) {
position: static;
display: block;
font: 500 14px/1.4 'Montserrat', Helvetica, Arial, sans-serif;
margin-bottom: 8px;
pointer-events: auto;
}
.ww-form .gfield_checkbox:not(.checkboxes):not(.form-check-group-inline) label {
position: static;
display: inline;
pointer-events: auto;
line-height: 1.4;
}
.ww-form .gfield_checkbox:not(.checkboxes):not(.form-check-group-inline) {
display: flex;
flex-wrap: wrap;
gap: 6px 20px;
}
.ww-form .gfield_checkbox .gchoice {
display: flex;
align-items: center;
gap: 6px;
}
.ww-form .gfield--type-select .gfield_label {
z-index: 3;
}
.ww-form .gfield_label .gfield_required_asterisk {
margin-left: 0;
}
/* Radios use the theme's .form-check markup, and their question the legacy
label.label +
(markup.php); the legend is kept for screen readers only */
.ww-form legend.ww-sr-only {
position: absolute !important;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
margin: 0;
padding: 0;
}
/* Some legacy labels had a space before the asterisk ("Purchase Order # *") */
.ww-form .ww-req-space .gfield_label > .gfield_required::before {
content: " ";
}
/* Hidden-label fields (consent / newsletter / sash type) */
.ww-form .hidden_label > .gfield_label,
.ww-form .hidden_label > legend {
position: absolute !important;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
}
/* Validation */
.ww-form .gfield_error .input-txt,
.ww-form .gfield_error .selector span {
border-color: #eb0000;
}
.ww-form .gfield_validation_message,
.ww-form .validation_message {
color: #eb0000;
font: 500 12px/1.1 'Montserrat', Helvetica, Arial, sans-serif;
padding: 6px 2px 0;
}
.gform_wrapper .gform_validation_errors {
color: #eb0000;
font: 500 14px/1.3 'Montserrat', Helvetica, Arial, sans-serif;
margin-bottom: 15px;
}
.gform_wrapper .gform_validation_errors h2 {
font-size: 14px;
margin: 0;
}
/* Submit row - same as the legacy .submit-row (no top margin; the last
.form-row's 10px bottom margin is the gap) */
.ww-form .gform_footer,
.ww-form .gform_page_footer {
display: flex;
gap: 10px;
margin-top: 0;
}
.ww-form .gform_footer button,
.ww-form .gform_page_footer button,
.ww-form .gform_page_footer input[type="button"],
.ww-form .gform_page_footer input[type="submit"] {
width: 100%;
min-width: auto !important;
padding: 13px;
}
.ww-form .gform_ajax_spinner,
.ww-form .gform-loader {
display: none;
}
/* Stepped LP: GF page steps in place of the legacy .steps-nav */
.ww-form .gf_page_steps {
display: flex;
justify-content: center;
gap: 10px;
margin-bottom: 20px;
}
.ww-form .gf_step {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border: 2px solid #1875df;
border-radius: 50%;
color: #1875df;
font-weight: 700;
}
.ww-form .gf_step_active,
.ww-form .gf_step_completed {
background: #1875df;
color: #fff;
}
.ww-form .gf_step_label,
.ww-form .gf_step_clear {
display: none;
}
.ww-form .gf_step_number {
font-size: 14px;
}
/* Confirmation text (if a form is ever set to a message instead of the theme redirect) */
.gform_confirmation_message {
padding: 20px 0;
}
/* ===== PLACEMENT WRAPPERS
The templates' Gravity Forms branches swap the outer