/** * The Gravity Forms contact form, wherever it renders. * * Extracted from contact.css so the homepage's #contact section and the * contact page style the same form identically. Before this existed the * homepage form had no theme styling at all and fell through to Gravity * Forms' own gravity-theme sheet. * * SCOPE AND SPECIFICITY — do not "simplify" these selectors. * * Gravity Forms styles itself through `.gform_wrapper.gravity-theme X`, which * is (0,3,0), and its stylesheets are enqueued AFTER the theme's. Every rule * here therefore keeps the two-class page scope it was written with * (`body .ij-gform .cform ...`); dropping one class loses the cascade * silently, and the symptom is that most of the sheet works while a handful of * properties Gravity Forms also sets do not. The scope class was renamed from * .ij-contact to .ij-gform — the structure and specificity are unchanged. * * Applied by adding class="ij-gform" to an ancestor and class="cform" to the * form's wrapper. templates/template-contact.php and templates/template-home.php * both do this; inc/assets.php enqueues this file for both. */ body .ij-gform .cform .gform_wrapper { margin: 0; } body .ij-gform .cform .gform_validation_container, body .ij-gform .cform .gfield--type-honeypot { display: none !important; } body .ij-gform .cform .gfield_label, body .ij-gform .cform .ginput_complex label, body .ij-gform .cform .gfield_radio legend, body .ij-gform .cform legend.gfield_label { display: block; font-size: 13px; font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase; color: var(--color-text); margin: 0; padding: 0; } body .ij-gform .cform .gfield--type-name > .gfield_label { display: none; } body .ij-gform .cform .ginput_complex { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } body .ij-gform .cform .ginput_complex > span { display: block; min-width: 0; } body .ij-gform .cform .gform_required_legend { display: none; } /* Required marker: one red "*" after every required label, whichever indicator ("*" or "(Required)") the form is set to print. */ body .ij-gform .cform .gfield_required { display: inline; margin-left: 4px; color: var(--color-danger); letter-spacing: 0; } body .ij-gform .cform .gfield_required > .gfield_required_asterisk, body .ij-gform .cform .gfield_required > .gfield_required_text { display: none; } body .ij-gform .cform .gfield_required::after { content: "*"; } /* The name and consent fields' own labels are hidden, so their marker goes on the First / Last sub-labels and the checkbox text instead. */ body .ij-gform .cform:not(.ij-fpage-form) .gfield--type-name.gfield_contains_required .name_first > label::after, body .ij-gform .cform:not(.ij-fpage-form) .gfield--type-name.gfield_contains_required .name_last > label::after, body .ij-gform .cform .gfield--type-consent.gfield_contains_required .gfield_consent_label::after { content: "*"; margin-left: 4px; color: var(--color-danger); letter-spacing: 0; } body .ij-gform .cform input[type="text"], body .ij-gform .cform input[type="email"], body .ij-gform .cform input[type="tel"], body .ij-gform .cform input[type="number"], body .ij-gform .cform textarea { margin-top: 8px; width: 100%; box-sizing: border-box; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--color-border-strong); background: #fff; font-family: var(--font-sans); font-size: 14px; font-weight: 500; color: var(--color-text); outline: none; transition: border-color 200ms cubic-bezier(0.4,0,0.2,1), box-shadow 200ms cubic-bezier(0.4,0,0.2,1); } body .ij-gform .cform textarea { padding: 14px; line-height: 1.6; min-height: 90px; resize: vertical; } body .ij-gform .cform input[type="text"]:focus, body .ij-gform .cform input[type="email"]:focus, body .ij-gform .cform input[type="tel"]:focus, body .ij-gform .cform textarea:focus { border-color: var(--brand-green); box-shadow: 0 0 0 3px rgba(140,198,62,0.35); } body .ij-gform .cform ::placeholder { color: #757575; opacity: 1; } /* bb-theme's Bootstrap gives every a grey bottom rule; the "I'm interested in" chips heading is one. */ body .ij-gform .cform legend { border: 0; } /* The choice chips. * * This selector is deliberately long. Gravity Forms' basic.min.css lays the * field out as a fixed grid whenever the field carries a gf_list_Ncol class * from the form editor: * * .gform_wrapper.gravity-theme .gfield.gf_list_4col .gfield_radio * { display: grid; grid-template-columns: repeat(4, 1fr); } (0,5,0) * * The obvious `body .ij-gform .cform .gfield_radio` is only (0,3,1) and loses, * so the pills were forced into four rigid columns on every page — invisible * on the wide contact form, and on the home page's ~640px column it squeezed * each chip until the labels broke a character per line. Matching GF's five * classes and adding `body` makes this (0,5,1), which wins whichever * gf_list_Ncol the field carries. */ body .ij-gform .cform .gform_wrapper.gravity-theme .gfield_radio { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; } /* A chip is as wide as its label; it must never be squeezed narrower. */ body .ij-gform .cform .gform_wrapper.gravity-theme .gfield_radio .gchoice { margin: 0; flex: 0 0 auto; max-width: 100%; } body .ij-gform .cform .gfield_radio { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; } body .ij-gform .cform .gfield_radio .gchoice { margin: 0; } body .ij-gform .cform .gfield_radio input[type="radio"] { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } body .ij-gform .cform .gfield_radio label { display: inline-block; /* Gravity Forms' theme.min.css caps every choice label: * * .gform_wrapper.gravity-theme .gfield-choice-input+label * { max-width: calc(100% - 32px); } * * The 100% resolves against .gchoice, which is itself shrink-to-fit around * this label — so the cap feeds back on itself and collapses the pill to * about 75px. "Residential" then wrapped onto two lines and "Other", with * overflow-wrap:break-word, broke one character per line. The cap has to be * lifted explicitly; a rule that merely outranks it on the other properties * leaves max-width untouched. * * nowrap is what makes a pill a pill: the flex container wraps chips onto * new rows, the chip itself never wraps mid-label. */ max-width: none; white-space: nowrap; overflow-wrap: normal; padding: 8px 16px; border-radius: 100px; border: 1px solid var(--color-border-strong); background: #fff; color: var(--color-text); font-family: var(--font-sans); font-size: 13px; font-weight: 600; letter-spacing: normal; text-transform: none; cursor: pointer; transition: background 200ms cubic-bezier(0.4,0,0.2,1), border-color 200ms cubic-bezier(0.4,0,0.2,1), color 200ms cubic-bezier(0.4,0,0.2,1); } body .ij-gform .cform .gfield_radio label:hover { border-color: var(--brand-green); } body .ij-gform .cform .gfield_radio input[type="radio"]:checked + label { background: var(--color-success-soft); border-color: var(--brand-green); color: var(--brand-green-dark); } body .ij-gform .cform .gfield_radio input[type="radio"]:focus-visible + label { box-shadow: 0 0 0 3px rgba(140,198,62,0.45); } body .ij-gform .cform .gfield--type-consent { align-self: center; } body .ij-gform .cform .gfield--type-consent .gfield_label { display: none; } body .ij-gform .cform .ginput_container_consent { display: flex; align-items: center; gap: 12px; } body .ij-gform .cform .ginput_container_consent label { font-size: 14px; font-weight: 500; letter-spacing: normal; text-transform: none; color: var(--color-text-secondary); cursor: pointer; } body .ij-gform .cform .ginput_container_consent a { font-weight: 600; } body .ij-gform .cform .ginput_container_consent a:hover { color: var(--brand-green-dark); text-decoration: underline; } body .ij-gform .cform input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--brand-green); flex: none; margin: 0; } body .ij-gform .cform .gform_footer { margin: 0; padding: 0; } body .ij-gform .cform .gfield--type-submit { align-self: center; justify-self: end; } body .ij-gform .cform input[type="submit"], body .ij-gform .cform .gform_button, body .ij-gform .cform button.gform-button { display: inline-flex; align-items: center; gap: 10px; padding: 10px 20px; border: none; border-radius: 100px; background: var(--brand-green); color: #fff; font-family: var(--font-sans); font-size: 14px; font-weight: 600; cursor: pointer; transition: background 200ms cubic-bezier(0.4,0,0.2,1); } body .ij-gform .cform input[type="submit"]:hover, body .ij-gform .cform .gform_button:hover, body .ij-gform .cform button.gform-button:hover { background: var(--brand-green-dark); color: #fff; } body .ij-gform .cform input[type="submit"]:focus-visible, body .ij-gform .cform button.gform-button:focus-visible { outline: 2px solid var(--brand-green-dark); outline-offset: 2px; } body .ij-gform .cform .gform_validation_errors { margin: 0 0 8px; padding: 14px 18px; border-radius: 12px; border: 1px solid var(--color-border-strong); background: #fff; box-shadow: none; } body .ij-gform .cform .gform_validation_errors h2, body .ij-gform .cform .gform_submission_error { font-size: 16px; font-weight: 600; margin: 0; color: var(--color-text); } body .ij-gform .cform .gfield_description.validation_message, body .ij-gform .cform .gfield_validation_message { margin-top: 8px; padding: 0; border: none; background: none; font-size: 13px; font-weight: 500; color: #b3261e; } body .ij-gform .cform .gfield_error input[type="text"], body .ij-gform .cform .gfield_error input[type="email"], body .ij-gform .cform .gfield_error input[type="tel"], body .ij-gform .cform .gfield_error textarea { border-color: #b3261e; } body .ij-gform .cform .gform_confirmation_message { padding: 24px; border-radius: 16px; background: var(--color-success-soft); color: var(--brand-green-dark); font-size: 16px; font-weight: 600; } @media (max-width: 640px) { body .ij-gform .cform .ginput_complex { grid-template-columns: minmax(0, 1fr); } body .ij-gform .cform input[type="submit"], body .ij-gform .cform button.gform-button { width: 100%; justify-content: center; } } @media (prefers-reduced-motion: reduce) { body .ij-gform .cform input, body .ij-gform .cform textarea, body .ij-gform .cform .gfield_radio label, body .ij-gform .cform input[type="submit"] { transition: none; } } /* --------------------------------------------------------------------------- Narrow columns --------------------------------------------------------------------------- The contact page gives this form a ~1170px card. The home page's #contact section gives it one half of a two-column panel, about 640px, and Gravity Forms' width classes are fractions of a 12-column grid regardless: .gform_wrapper.gravity-theme .gfield.gfield--width-quarter { grid-column: span 3; } (0,4,0) A quarter of 640px is ~150px, so the name/email/phone row overflowed its column and the intro line was clipped. Add class="cform--narrow" beside .cform wherever the form sits in a column rather than a full-width card; the fields then fall back to halves and full rows, which is what the design's own auto-fit minmax(180px, 1fr) grid produces at that width. (0,4,1) — four classes plus `body` — is what it takes to outrank the rule above. */ body .ij-gform .cform--narrow .gform_wrapper .gfield--width-quarter, body .ij-gform .cform--narrow .gform_wrapper .gfield--width-third { grid-column: span 6; } /* Name is a single composite field holding First and Last, and the form gives it width-half. Beside a half-width Email that produced one row of First | Last | Email and a lonely Phone underneath. The design puts the two name inputs on their own row and pairs Email with Phone, which is what a full-width Name field plus the half-width rule above produces. */ body .ij-gform .cform--narrow .gform_wrapper .gfield--width-half { grid-column: span 12; } /* The submit is a field of its own (gfield--type-submit) and the form gives it width-third, so it came to rest part-way along a grid row with the button floating in the middle of the card. The design puts it at the left edge with "Prefer to talk?" alongside, so it takes a row of its own and aligns start; the button keeps its own intrinsic pill width. */ body .ij-gform .cform--narrow .gform_wrapper .gfield--type-submit { grid-column: span 12; /* The field is sized to the button, not to its grid track, so it is justify-self that decides where it lands — justify-content only moves the button inside a box that was already flush right. */ justify-self: start; justify-items: start; justify-content: flex-start; } body .ij-gform .cform--narrow .gform_wrapper .gfield--width-two-thirds { grid-column: span 12; } /* Below the panel's own two-column breakpoint the form is full width again, so the fractions stop being a problem and each field takes its own row. */ @media (max-width: 700px) { body .ij-gform .cform--narrow .gform_wrapper .gfield--width-quarter, body .ij-gform .cform--narrow .gform_wrapper .gfield--width-third, body .ij-gform .cform--narrow .gform_wrapper .gfield--width-half, body .ij-gform .cform--narrow .gform_wrapper .gfield--width-two-thirds { grid-column: span 12; } } /* Gravity Forms 3 renders the submit as