/* Gravity Forms form 3 (Little Ninjas free trial) restyle for the LP booking card. CSS only. No field, value, ID or required setting is changed by this file. GF field CSS classes to add in the form editor (Appearance > Custom CSS Class): 17 Preferred trial session kl-tiles kl-tiles--session (radio, see gf-form3-config.md) 18 Child's age kl-tiles kl-tiles--age (radio, see gf-form3-config.md) 9 Your name kl-half 13 Mobile kl-half 15 Communication preferences kl-optin Radio markup used: .gchoice > input.gfield-choice-input[type=radio] + label.gform-field-label--type-inline If 17 and 18 are still dropdowns, the tile rules do not apply and the selects get the underline style. */ /* The token block also carries .gform-theme[data-form-index] so it outranks the inline style GF prints for the form (#gform_wrapper_3[data-form-index="0"].gform-theme), which sets the default blue tokens. */ body.kluk-v2 #gform_wrapper_3, body.kluk-v2 #gform_wrapper_3.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(--kl-ln-mid); --gf-color-in-ctrl-primary-contrast: var(--kl-bg); --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_3 .gform_heading { display: none; } body.kluk-v2 #gform_wrapper_3 .gform_fields { row-gap: 16px; column-gap: 16px; } /* Labels and legends */ body.kluk-v2 #gform_wrapper_3 .gfield_label, body.kluk-v2 #gform_wrapper_3 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_3 .gfield_required { color: var(--kl-mute); font-weight: 400; margin-left: 4px; } body.kluk-v2 #gform_wrapper_3 .gfield_required .gfield_required_text, body.kluk-v2 #gform_wrapper_3 .gfield_required_asterisk { font-size: 13px; color: var(--kl-mute); font-style: normal; } body.kluk-v2 #gform_wrapper_3 .gfield_description { font-size: 13px; line-height: 1.45; color: var(--kl-mute); padding-top: 6px; } body.kluk-v2 #gform_wrapper_3 .gform_required_legend { display: none; } /* Text, phone, email inputs and any remaining selects: underline style */ body.kluk-v2 #gform_wrapper_3 input[type=text], body.kluk-v2 #gform_wrapper_3 input[type=tel], body.kluk-v2 #gform_wrapper_3 input[type=email], body.kluk-v2 #gform_wrapper_3 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_3 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_3 select option { background: var(--kl-bg2); color: var(--kl-fg); } body.kluk-v2 #gform_wrapper_3 input::placeholder { color: var(--kl-mute); opacity: 1; } body.kluk-v2 #gform_wrapper_3 input[type=text]:focus, body.kluk-v2 #gform_wrapper_3 input[type=tel]:focus, body.kluk-v2 #gform_wrapper_3 input[type=email]:focus, body.kluk-v2 #gform_wrapper_3 select:focus { border-bottom-color: var(--kl-fg); box-shadow: 0 1px 0 0 var(--kl-fg); outline: none; } body.kluk-v2 #gform_wrapper_3 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_3 .gfield.kl-half, body.kluk-v2 #gform_wrapper_3 #field_3_9, body.kluk-v2 #gform_wrapper_3 #field_3_13 { grid-column: span 6; min-width: 0; } /* ---------- tiles: fields 17 and 18 as radios ---------- */ body.kluk-v2 #gform_wrapper_3 .kl-tiles { border: 0; margin: 0; padding: 0; min-width: 0; } body.kluk-v2 #gform_wrapper_3 .kl-tiles legend.gfield_label { margin-bottom: 10px; } body.kluk-v2 #gform_wrapper_3 .kl-tiles .gfield_radio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0; padding: 0; } body.kluk-v2 #gform_wrapper_3 .kl-tiles .gchoice { position: relative; display: block; margin: 0; padding: 0; } body.kluk-v2 #gform_wrapper_3 .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_3 .kl-tiles .gchoice input[type=radio]::before { display: none; content: none; } body.kluk-v2 #gform_wrapper_3 .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_3 .kl-tiles .gchoice:hover label { border-color: var(--kl-soft); } body.kluk-v2 #gform_wrapper_3 .kl-tiles .gchoice input:checked + label { background: var(--kl-ln-grad-txt); border-color: transparent; color: var(--kl-bg); } body.kluk-v2 #gform_wrapper_3 .kl-tiles .gchoice input:focus-visible + label { outline: 2px solid var(--kl-fg); outline-offset: 3px; } /* Session tile: "MON" in Anton over "4:15pm" (spans come from the PHP display filter). */ body.kluk-v2 #gform_wrapper_3 .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_3 .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_3 .kl-tiles--session input:checked + label .kl-time { color: var(--kl-bg); } /* Age pills */ body.kluk-v2 #gform_wrapper_3 .kl-tiles--age .gchoice label { border-radius: 999px; padding: 10px 0; font-size: 16px; } /* ---------- 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_3 :is(.kl-optin, .gfield--type-consent) { border: 0; margin: 2px 0 2px; padding: 0; min-width: 0; } body.kluk-v2 #gform_wrapper_3 :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_3 :is(.kl-optin, .gfield--type-consent) :is(.gchoice, .ginput_container_consent) { display: flex; gap: 10px; align-items: flex-start; } body.kluk-v2 #gform_wrapper_3 :is(.kl-optin, .gfield--type-consent) input[type=checkbox] { flex: 0 0 auto; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--kl-ln-mid); border-color: var(--kl-edge); } body.kluk-v2 #gform_wrapper_3 :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_3 :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_3 .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_3 .gform_validation_errors .gform_submission_error, body.kluk-v2 #gform_wrapper_3 .gform_validation_errors li, body.kluk-v2 #gform_wrapper_3 .gform_validation_errors a { color: var(--kl-error); font: 500 14px/1.4 var(--kl-body); } body.kluk-v2 #gform_wrapper_3 .gform_validation_errors .gform-icon { display: none; } body.kluk-v2 #gform_wrapper_3 .gfield_error .gfield_label, body.kluk-v2 #gform_wrapper_3 .gfield_validation_message, body.kluk-v2 #gform_wrapper_3 .validation_message { color: var(--kl-error); background: none; border: 0; padding: 6px 0 0; font-size: 14px; } body.kluk-v2 #gform_wrapper_3 .gfield_error input, body.kluk-v2 #gform_wrapper_3 .gfield_error select { border-bottom-color: var(--kl-error); } body.kluk-v2 #gform_wrapper_3 .gfield_error.kl-tiles .gchoice label { border-color: var(--kl-error); } /* ---------- submit: GF input or Divi Pixel's