/* Gravity Forms — make forms look like the rest of the site. * * Gravity Forms 2.10 ships the "orbital" theme, which is a self-contained design * system: its own near-black text (#112337), its own slate borders (#686e77), a * 40px gap between every field, and `font-family: initial` — which means the form * does NOT inherit the page's Open Sans and falls back to the browser default. * Next to Brentwood's grey body copy the result reads as a form bolted onto the * page rather than part of it. * * Orbital is built on CSS custom properties, so this file re-points its TOKENS * instead of fighting its rules. That is why there is almost no `!important` * here: setting `--gf-ctrl-border-color` on the wrapper cascades to every control * GF renders, including field types this form doesn't use yet. Two consequences * worth knowing: a Gravity Forms update that restyles a control keeps working, * and a new field type inherits the site's look automatically. * * Colours come from Kadence's palette variables rather than hex, so a palette * change in the Customizer carries through here too. * palette3 #4b5563 headings / labels palette4 #707d8e body copy * palette1 #c8272c brand red (focus ring) * * @see inc/bw-gf-style.php for the enqueue. */ .gform_wrapper.gform-theme--framework { /* ── Spacing ────────────────────────────────────────────────────────────── * 40px between rows is the single biggest reason the form reads as loose. * It also compounds: half-width pairs (First/Last) carry a sublabel under * each input, so the visible gap was 40px PLUS the sublabel's line box. */ --gf-form-gap-y: 22px; /* was 40px — between field rows */ --gf-form-gap-x: 16px; /* unchanged — between side-by-side fields */ --gf-field-gap-y: 8px; /* was 12px — label to input, input to sublabel */ /* ── Type ──────────────────────────────────────────────────────────────── * `initial` resolves to the browser default (a serif in most engines), which * is why the form looked like a different typeface. `inherit` picks up the * theme's Open Sans from . */ --gf-font-family-base: inherit; --gf-font-family-primary: inherit; --gf-font-family-secondary: inherit; /* ── Colour ────────────────────────────────────────────────────────────── * Labels sit one step darker than body copy so they still read as labels; * sublabels and help text match body copy exactly. */ --gf-ctrl-label-color-primary: var(--global-palette3, #4b5563); --gf-ctrl-label-color-secondary: var(--global-palette4, #707d8e); --gf-ctrl-desc-color: var(--global-palette4, #707d8e); --gf-ctrl-color: var(--global-palette3, #4b5563); /* #686e77 is a slate mid-tone — heavy enough that a column of empty inputs * reads as a stack of dark rectangles. This is the same border the review * step already uses (assets/bw-gf-review.css), so the two steps match. */ --gf-ctrl-border-color: #d8dadd; --gf-ctrl-border-color-hover: #b9bcc1; --gf-ctrl-border-color-focus: var(--global-palette1, #c8272c); --gf-color-in-ctrl-dark-lighter: #d8dadd; } /* Labels and sublabels. * Weight matters as much as colour: orbital sets labels to 600, which at * near-black is what made them read as headings rather than field names. */ .gform_wrapper.gform-theme--framework .gfield_label { font-family: inherit; font-weight: 500; font-size: 15px; line-height: 1.4; color: var(--global-palette3, #4b5563); } .gform_wrapper.gform-theme--framework .gform-field-label--type-sub, .gform_wrapper.gform-theme--framework .gfield_description, .gform_wrapper.gform-theme--framework .ginput_complex label { font-family: inherit; font-weight: 400; font-size: 13px; line-height: 1.4; color: var(--global-palette4, #707d8e); } /* Inputs. Font-size 16px is deliberate and not a style choice: iOS Safari zooms * the page when a focused input is below 16px. */ .gform_wrapper.gform-theme--framework input[type="text"], .gform_wrapper.gform-theme--framework input[type="email"], .gform_wrapper.gform-theme--framework input[type="tel"], .gform_wrapper.gform-theme--framework input[type="url"], .gform_wrapper.gform-theme--framework input[type="number"], .gform_wrapper.gform-theme--framework select, .gform_wrapper.gform-theme--framework textarea { font-family: inherit; font-size: 16px; line-height: 1.5; color: var(--global-palette3, #4b5563); border-color: #d8dadd; border-radius: 4px; padding: 10px 12px; background-color: #fff; transition: border-color .15s ease, box-shadow .15s ease; } .gform_wrapper.gform-theme--framework input::placeholder, .gform_wrapper.gform-theme--framework textarea::placeholder { color: #a3abb6; opacity: 1; /* Firefox dims placeholders by default on top of the colour. */ } /* A soft brand-red ring rather than orbital's heavy focus outline. */ .gform_wrapper.gform-theme--framework input:focus, .gform_wrapper.gform-theme--framework select:focus, .gform_wrapper.gform-theme--framework textarea:focus { border-color: var(--global-palette1, #c8272c); box-shadow: 0 0 0 3px rgba(200, 39, 44, .12); outline: none; } /* The message box was ~220px tall, which dominated the form. */ .gform_wrapper.gform-theme--framework textarea { min-height: 132px; resize: vertical; } /* Trim the dead space above the button row — orbital adds its own margin on top * of the field gap, so the two stack up. */ .gform_wrapper.gform-theme--framework .gform_footer { margin-top: 8px; padding-top: 0; } /* Validation, kept in the site's red rather than orbital's own error palette. */ .gform_wrapper.gform-theme--framework .gfield_error input, .gform_wrapper.gform-theme--framework .gfield_error select, .gform_wrapper.gform-theme--framework .gfield_error textarea { border-color: var(--global-palette1, #c8272c); } .gform_wrapper.gform-theme--framework .gfield_validation_message, .gform_wrapper.gform-theme--framework .validation_message { font-family: inherit; font-size: 13px; color: var(--global-palette1, #c8272c); background: none; border: 0; padding: 4px 0 0; }