/* Gravity Forms form 2 (Ladies Only free trial) restyle for the Ladies LP booking card. Same system as gf-form3-tiles.css, with the Ladies pink (tokens from ladies.css) on the checked tile and opt-in. CSS only. No field, value, ID or required setting is changed by this file. Current form 2 (staging, read 30 Oct 2026): 17 Preferred trial session (select), 9 Your name, 13 Mobile Number, 11 Email (required), 15 Communication Preferences (consent, optional). Field 17 stays a select until Mike approves the radio conversion; the tile rules below only apply once field 17 is a radio field with the class: 17 Preferred trial session kl-tiles kl-tiles--session (radio, see gf-form2-config.md) Optional classes (the field IDs are matched as well, so these are not required): 9 kl-half, 13 kl-half, 15 kl-optin If 17 is still a dropdown, it gets the underline select style. */ /* The token block also carries .gform-theme[data-form-index] so it outranks the inline style GF prints for the form (#gform_wrapper_2[data-form-index="0"].gform-theme), which sets the default blue tokens. */ body.kluk-v2 #gform_wrapper_2, body.kluk-v2 #gform_wrapper_2.gform-theme[data-form-index] { /* Orbital theme tokens */ --gf-color-primary: var(--kl-red); --gf-color-primary-rgb: 216, 50, 31; --gf-color-primary-contrast: #fff; --gf-color-in-ctrl: transparent; --gf-color-in-ctrl-contrast: var(--kl-fg); --gf-color-in-ctrl-dark: var(--kl-edge); --gf-color-out-ctrl-dark: var(--kl-fg); --gf-color-out-ctrl-light: var(--kl-edge); --gf-color-danger: var(--kl-error); --gf-ctrl-bg-color: transparent; --gf-ctrl-bg-color-hover: transparent; --gf-ctrl-bg-color-focus: transparent; --gf-ctrl-border-color: var(--kl-edge); --gf-ctrl-color: var(--kl-fg); --gf-ctrl-label-color-primary: var(--kl-fg); --gf-ctrl-label-color-secondary: var(--kl-mute); --gf-ctrl-desc-color: var(--kl-mute); --gf-ctrl-placeholder-color: var(--kl-mute); --gf-ctrl-font-family: var(--kl-body); --gf-ctrl-label-font-family-primary: var(--kl-body); --gf-color-in-ctrl-primary: var(--lo); --gf-color-in-ctrl-primary-contrast: #fff; --gf-color-in-ctrl-light: var(--kl-edge); --gf-color-in-ctrl-dark-lighter: var(--kl-mute); --gf-color-secondary-contrast: var(--kl-fg); --gf-color-out-ctrl-dark-darker: var(--kl-fg); --gf-color-out-ctrl-dark-lighter: var(--kl-mute); --gf-form-gap-y: 16px; --gf-form-gap-x: 16px; margin: 0; font-family: var(--kl-body); color: var(--kl-fg); } body.kluk-v2 #gform_wrapper_2 .gform_heading { display: none; } body.kluk-v2 #gform_wrapper_2 .gform_fields { row-gap: 16px; column-gap: 16px; } /* Labels and legends */ body.kluk-v2 #gform_wrapper_2 .gfield_label, body.kluk-v2 #gform_wrapper_2 legend.gfield_label { display: block; font: 600 15px/1.35 var(--kl-body); color: var(--kl-fg); margin: 0 0 6px; padding: 0; text-transform: none; letter-spacing: 0; } body.kluk-v2 #gform_wrapper_2 .gfield_required { color: var(--kl-mute); font-weight: 400; margin-left: 4px; } body.kluk-v2 #gform_wrapper_2 .gfield_required .gfield_required_text, body.kluk-v2 #gform_wrapper_2 .gfield_required_asterisk { font-size: 13px; color: var(--kl-mute); font-style: normal; } body.kluk-v2 #gform_wrapper_2 .gfield_description { font-size: 13px; line-height: 1.45; color: var(--kl-mute); padding-top: 6px; } body.kluk-v2 #gform_wrapper_2 .gform_required_legend { display: none; } /* Text, phone, email inputs and any remaining selects: underline style */ body.kluk-v2 #gform_wrapper_2 input[type=text], body.kluk-v2 #gform_wrapper_2 input[type=tel], body.kluk-v2 #gform_wrapper_2 input[type=email], body.kluk-v2 #gform_wrapper_2 select { width: 100%; min-height: 44px; background: transparent; border: 0; border-bottom: 1px solid var(--kl-edge); border-radius: 0; box-shadow: none; color: var(--kl-fg); font: 400 18px/1.3 var(--kl-body); padding: 10px 0; outline: none; } body.kluk-v2 #gform_wrapper_2 select { background-image: linear-gradient(45deg, transparent 50%, var(--kl-soft) 50%), linear-gradient(135deg, var(--kl-soft) 50%, transparent 50%); background-position: calc(100% - 12px) 55%, calc(100% - 6px) 55%; background-size: 6px 6px; background-repeat: no-repeat; -webkit-appearance: none; appearance: none; padding-right: 24px; } body.kluk-v2 #gform_wrapper_2 select option { background: var(--kl-bg2); color: var(--kl-fg); } body.kluk-v2 #gform_wrapper_2 input::placeholder { color: var(--kl-mute); opacity: 1; } body.kluk-v2 #gform_wrapper_2 input[type=text]:focus, body.kluk-v2 #gform_wrapper_2 input[type=tel]:focus, body.kluk-v2 #gform_wrapper_2 input[type=email]:focus, body.kluk-v2 #gform_wrapper_2 select:focus { border-bottom-color: var(--kl-fg); box-shadow: 0 1px 0 0 var(--kl-fg); outline: none; } body.kluk-v2 #gform_wrapper_2 input:-webkit-autofill { -webkit-text-fill-color: var(--kl-fg); box-shadow: 0 0 0 1000px var(--kl-bg2) inset; transition: background-color 9999s; } /* Half-width pair (name + mobile). GF's own "half" layout also works. Field IDs are matched too, so the pair works before the kl-half classes are added in the form editor. */ body.kluk-v2 #gform_wrapper_2 .gfield.kl-half, body.kluk-v2 #gform_wrapper_2 #field_2_9, body.kluk-v2 #gform_wrapper_2 #field_2_13 { grid-column: span 6; min-width: 0; } /* ---------- tiles: field 17 as radios ---------- */ body.kluk-v2 #gform_wrapper_2 .kl-tiles { border: 0; margin: 0; padding: 0; min-width: 0; } body.kluk-v2 #gform_wrapper_2 .kl-tiles legend.gfield_label { margin-bottom: 10px; } body.kluk-v2 #gform_wrapper_2 .kl-tiles .gfield_radio { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0; padding: 0; } body.kluk-v2 #gform_wrapper_2 .kl-tiles .gchoice { position: relative; display: block; margin: 0; padding: 0; } body.kluk-v2 #gform_wrapper_2 .kl-tiles .gchoice input[type=radio] { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0; -webkit-appearance: none; appearance: none; border: 0; background: none; box-shadow: none; } body.kluk-v2 #gform_wrapper_2 .kl-tiles .gchoice input[type=radio]::before { display: none; content: none; } body.kluk-v2 #gform_wrapper_2 .kl-tiles .gchoice label { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 44px; max-width: none; margin: 0; padding: 11px 4px; text-align: center; border: 1px solid var(--kl-edge); border-radius: 14px; color: var(--kl-fg); font: 600 15px/1.15 var(--kl-body); cursor: pointer; transition: background-color .2s, border-color .2s, color .2s; } body.kluk-v2 #gform_wrapper_2 .kl-tiles .gchoice:hover label { border-color: var(--kl-soft); } body.kluk-v2 #gform_wrapper_2 .kl-tiles .gchoice input:checked + label { background: var(--lo); border-color: var(--lo); color: #fff; } body.kluk-v2 #gform_wrapper_2 .kl-tiles .gchoice input:focus-visible + label { outline: 2px solid var(--kl-fg); outline-offset: 3px; } /* Session tile: "MON" in Anton over "7:20pm" (spans come from the PHP display filter). */ body.kluk-v2 #gform_wrapper_2 .kl-tiles--session .kl-day { display: block; font: 400 22px/1 var(--kl-display); text-transform: uppercase; letter-spacing: .02em; } body.kluk-v2 #gform_wrapper_2 .kl-tiles--session .kl-time { display: block; font-size: 14px; font-weight: 400; color: var(--kl-soft); margin-top: 2px; } body.kluk-v2 #gform_wrapper_2 .kl-tiles--session input:checked + label .kl-time { color: #fff; } /* "Any listed session works" (empty value) spans the full row under the four day tiles. */ body.kluk-v2 #gform_wrapper_2 .kl-tiles--session .gchoice:has(input[value=""]), body.kluk-v2 #gform_wrapper_2 .kl-tiles--session .gchoice.kl-any { grid-column: 1 / -1; } body.kluk-v2 #gform_wrapper_2 .kl-tiles--session .gchoice:has(input[value=""]) label { padding: 10px 4px; font-size: 15px; } /* ---------- consent (field 15): small, muted, unticked, optional ---------- Matches GF's consent field type as well as kl-optin, so it works before the class is added. */ body.kluk-v2 #gform_wrapper_2 :is(.kl-optin, .gfield--type-consent) { border: 0; margin: 2px 0 2px; padding: 0; min-width: 0; } body.kluk-v2 #gform_wrapper_2 :is(.kl-optin, .gfield--type-consent) legend.gfield_label { font-size: 13px; font-weight: 600; color: var(--kl-soft); margin-bottom: 6px; } body.kluk-v2 #gform_wrapper_2 :is(.kl-optin, .gfield--type-consent) :is(.gchoice, .ginput_container_consent) { display: flex; gap: 10px; align-items: flex-start; } body.kluk-v2 #gform_wrapper_2 :is(.kl-optin, .gfield--type-consent) input[type=checkbox] { flex: 0 0 auto; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--lo); border-color: var(--kl-edge); } body.kluk-v2 #gform_wrapper_2 :is(.kl-optin, .gfield--type-consent) label { font: 400 13px/1.45 var(--kl-body); color: var(--kl-mute); max-width: none; } body.kluk-v2 #gform_wrapper_2 :is(.kl-optin, .gfield--type-consent) .gfield_description { padding: 6px 0 0 30px; border: 0; background: none; max-height: none; overflow: visible; margin: 0; } /* ---------- validation ---------- */ body.kluk-v2 #gform_wrapper_2 .gform_validation_errors { background: rgba(255,138,122,.08); border: 1px solid var(--kl-error); border-radius: 14px; box-shadow: none; padding: 12px 14px; margin: 0 0 16px; } body.kluk-v2 #gform_wrapper_2 .gform_validation_errors .gform_submission_error, body.kluk-v2 #gform_wrapper_2 .gform_validation_errors li, body.kluk-v2 #gform_wrapper_2 .gform_validation_errors a { color: var(--kl-error); font: 500 14px/1.4 var(--kl-body); } body.kluk-v2 #gform_wrapper_2 .gform_validation_errors .gform-icon { display: none; } body.kluk-v2 #gform_wrapper_2 .gfield_error .gfield_label, body.kluk-v2 #gform_wrapper_2 .gfield_validation_message, body.kluk-v2 #gform_wrapper_2 .validation_message { color: var(--kl-error); background: none; border: 0; padding: 6px 0 0; font-size: 14px; } body.kluk-v2 #gform_wrapper_2 .gfield_error input, body.kluk-v2 #gform_wrapper_2 .gfield_error select { border-bottom-color: var(--kl-error); } body.kluk-v2 #gform_wrapper_2 .gfield_error.kl-tiles .gchoice label { border-color: var(--kl-error); } /* ---------- submit: GF input or Divi Pixel's