/* ========================================================================== Gravity Forms, brought into the house style. Loaded only on pages that render a form. Everything here is scoped to .sg-enquiry, the form's own CSS class, so a second form added later starts from GF's defaults rather than inheriting this one's layout. The one thing to understand before editing: GF's Orbital theme sets the submit button's colour from custom properties defined on an ID-scoped selector (#gform_wrapper_1[data-form-index="0"].gform-theme). An ID beats any number of classes, so an ordinary class rule loses and the button stays GF blue no matter what you write. The way round it is `html:has(#gravity_forms_theme_framework-css)`, which inherits the specificity weight of its argument and therefore carries ID-level weight, with no !important anywhere. It must be html:has(), never body:has(). GF's stylesheet link lives in , which is not a descendant of , so body:has() matches nothing and the whole block silently does nothing. ========================================================================== */ html:has(#gravity_forms_theme_framework-css) .gform_wrapper:is(.sg-enquiry, :has(.sg-enquiry)) { /* Buttons: the same violet fill and white label as .btn-solid everywhere else on the site, so the form's action does not read as a different product from the rest of the page. */ --gf-ctrl-btn-bg-color-primary: var(--violet); --gf-ctrl-btn-bg-color-hover-primary: var(--violet-deep); --gf-ctrl-btn-bg-color-focus-primary: var(--violet-deep); --gf-ctrl-btn-color-primary: var(--paper); --gf-ctrl-btn-color-hover-primary: var(--paper); --gf-ctrl-btn-color-focus-primary: var(--paper); --gf-ctrl-btn-border-color-primary: var(--violet); --gf-ctrl-btn-border-color-hover-primary: var(--violet-deep); --gf-ctrl-btn-radius: var(--radius-pill); --gf-ctrl-btn-font-size: var(--step--1); --gf-ctrl-btn-font-weight: 600; --gf-ctrl-btn-padding-x: 1.4em; --gf-ctrl-btn-padding-y: 0.85em; /* Required for a pill. Without it GF pins a fixed control height and the pill is squashed into a rounded rectangle. */ --gf-ctrl-btn-size: auto; /* Fields, matched to the design's own inputs. */ --gf-ctrl-border-color: var(--line); --gf-ctrl-border-color-focus: var(--violet); --gf-ctrl-radius: var(--radius); --gf-ctrl-bg-color: var(--paper); --gf-ctrl-color: var(--ink); --gf-ctrl-label-color-primary: var(--ink); --gf-ctrl-label-color-secondary: var(--ink-faint); --gf-ctrl-desc-color: var(--ink-muted); } /* Field spacing. GF lays fields out in a CSS grid with a generous row-gap, so trimming field margins does nothing: the gap has to be overridden. */ html:has(#gravity_forms_theme_framework-css) .gform_wrapper:is(.sg-enquiry, :has(.sg-enquiry)) .gform_fields { grid-row-gap: var(--space-4); row-gap: var(--space-4); } /* Inputs sit tight: the label above already carries the height. The minimum is the 44px touch floor, which the design holds everywhere. */ html:has(#gravity_forms_theme_framework-css) .gform_wrapper:is(.sg-enquiry, :has(.sg-enquiry)) :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], textarea) { font-family: var(--font-text); font-size: var(--step--1); line-height: 1.3; padding: 0.5em 0.7em; min-height: 2.75rem; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); } html:has(#gravity_forms_theme_framework-css) .gform_wrapper:is(.sg-enquiry, :has(.sg-enquiry)) textarea { min-height: 6rem; } /* Labels, in the design's own type rather than GF's. */ html:has(#gravity_forms_theme_framework-css) .gform_wrapper:is(.sg-enquiry, :has(.sg-enquiry)) .gfield_label { font-family: var(--font-text); font-size: var(--step--1); font-weight: 600; color: var(--ink); margin-bottom: var(--space-1); } /* The required mark is information, not decoration: it takes the muted ink rather than GF's red, which reads as an error before anything has gone wrong. */ html:has(#gravity_forms_theme_framework-css) .gform_wrapper:is(.sg-enquiry, :has(.sg-enquiry)) .gfield_required { color: var(--ink-faint); font-weight: 400; } /* The mode switch: two radios drawn as the design's option pair. */ html:has(#gravity_forms_theme_framework-css) .gform_wrapper:is(.sg-enquiry, :has(.sg-enquiry)) .sg-modeswitch .gfield_radio { display: grid; gap: var(--space-3); } @media (min-width: 34rem) { html:has(#gravity_forms_theme_framework-css) .gform_wrapper:is(.sg-enquiry, :has(.sg-enquiry)) .sg-modeswitch .gfield_radio { grid-template-columns: repeat(2, minmax(0, 1fr)); } } html:has(#gravity_forms_theme_framework-css) .gform_wrapper:is(.sg-enquiry, :has(.sg-enquiry)) .sg-modeswitch .gchoice { display: flex; align-items: center; gap: var(--space-3); min-height: 2.75rem; padding: var(--space-2) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; } html:has(#gravity_forms_theme_framework-css) .gform_wrapper:is(.sg-enquiry, :has(.sg-enquiry)) .sg-modeswitch .gchoice:has(input:checked) { border-color: var(--violet); background: var(--paper-tint); } /* Clinic checkboxes: full-width rows, so the whole row is the press target. */ html:has(#gravity_forms_theme_framework-css) .gform_wrapper:is(.sg-enquiry, :has(.sg-enquiry)) .sg-clinics .gchoice { display: flex; align-items: center; gap: var(--space-3); min-height: 2.75rem; } html:has(#gravity_forms_theme_framework-css) .gform_wrapper:is(.sg-enquiry, :has(.sg-enquiry)) :is(.sg-clinics, .sg-modeswitch) label { font-size: var(--step--1); color: var(--ink); } /* The select. Two bugs live here and both are GF's, not ours. a) Setting a solid background wipes GF's own arrow, so a chevron is drawn back in. The focus state must set background-color, not the background shorthand, or focusing wipes the chevron again. b) GF pins the select to height:38px AND line-height:38px. With appearance:none the select clips its overflow, and any padding pushes that 38px text line out of the clipped box, so the selected value renders invisible in Chrome and Safari even though the colour is right. The box model has to be reset, not just the colour. -webkit-text-fill-color is set as well as color, because it overrides color when painting and some GF setups set it to transparent. */ html:has(#gravity_forms_theme_framework-css) .gform_wrapper:is(.sg-enquiry, :has(.sg-enquiry)) select { -webkit-appearance: none; appearance: none; height: auto; min-height: 2.75rem; line-height: 1.3; padding: 0.5em 2.4rem 0.5em 0.7em; font-family: var(--font-text); font-size: var(--step--1); color: var(--ink); -webkit-text-fill-color: var(--ink); background-color: var(--paper); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%235b4b8a' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.9rem center; background-size: 14px; border: 1px solid var(--line); border-radius: var(--radius); } html:has(#gravity_forms_theme_framework-css) .gform_wrapper:is(.sg-enquiry, :has(.sg-enquiry)) select:focus { background-color: var(--paper); border-color: var(--violet); } html:has(#gravity_forms_theme_framework-css) .gform_wrapper:is(.sg-enquiry, :has(.sg-enquiry)) select option { color: var(--ink); -webkit-text-fill-color: var(--ink); background: var(--paper); } /* Validation, in the palette rather than GF's stock red-on-pink. */ html:has(#gravity_forms_theme_framework-css) .gform_wrapper:is(.sg-enquiry, :has(.sg-enquiry)) .gfield_validation_message, html:has(#gravity_forms_theme_framework-css) .gform_wrapper:is(.sg-enquiry, :has(.sg-enquiry)) .validation_message { font-size: var(--step--2); color: #9b2226; background: none; border: 0; padding: var(--space-1) 0 0; } /* -------------------------------------------------------------------------- Direct-property fallbacks, deliberately ungated. If the framework stylesheet is ever disabled or renamed, the html:has() block above stops matching and the button would revert to GF blue. These rules keep it in the brand either way. They sit lower in the file so the variable-driven version wins while it is there. -------------------------------------------------------------------------- */ .gform_wrapper.sg-enquiry :is(.gform_button, .gform-button, .gform-theme-button, input[type="submit"]), .gform_wrapper:has(.sg-enquiry) :is(.gform_button, .gform-button, .gform-theme-button, input[type="submit"]) { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-text); font-size: var(--step--1); font-weight: 600; letter-spacing: 0.01em; padding: 0.85em 1.4em; height: auto; color: var(--paper); background: var(--violet); border: 1px solid var(--violet); border-radius: var(--radius-pill); cursor: pointer; transition: background-color var(--dur-hover) ease, border-color var(--dur-hover) ease; } @media (hover: hover) and (pointer: fine) { .gform_wrapper.sg-enquiry :is(.gform_button, .gform-button, .gform-theme-button, input[type="submit"]):hover, .gform_wrapper:has(.sg-enquiry) :is(.gform_button, .gform-button, .gform-theme-button, input[type="submit"]):hover { background: var(--violet-deep); border-color: var(--violet-deep); } }