/*========================= FORM BLOCK =========================*/ .block-form .header { margin-bottom: var(--space-5); max-width: 60ch; } .block-form .header .top-title { display: block; margin-bottom: var(--space-2); } .block-form .form-placeholder { padding: var(--space-4); border: 1px dashed currentColor; opacity: 0.6; } /* ----------------------------------------------- Gravity Forms — field grid ----------------------------------------------- */ .block-form .gform_wrapper.gravity-theme .gform_fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4) var(--space-4); list-style: none; margin: 0; padding: 0; } /* GF basic.min.css forces all .gfield to 1/-1; override for half-width fields */ .block-form .gform_wrapper.gravity-theme .gfield.ghalf, .block-form .gform_wrapper.gravity-theme .gfield.gfield--width-half { grid-column: span 1 !important; } /* Non-half fields span full width. Include .gravity-theme in selector for specificity (0,5,0) to beat GF's .gform_wrapper.gravity-theme .gfield.gfield--width-full (0,4,0). */ .block-form .gform_wrapper.gravity-theme .gfield:not(.ghalf):not(.gfield--width-half), .block-form .gform_wrapper.gravity-theme .gfield.gfield--width-full, .block-form .gform_wrapper.gravity-theme .gfield.gfield--type-textarea, .block-form .gform_wrapper.gravity-theme .gfield.gfield--type-consent, .block-form .gform_wrapper.gravity-theme .gfield.gfield--type-checkbox { grid-column: 1 / -1; } /* Hidden / honeypot fields take no space */ .block-form .gform_wrapper .gfield--type-hidden, .block-form .gform_wrapper .gfield--type-honeypot, .block-form .gform_wrapper .gform_validation_container { display: none !important; } /* ----------------------------------------------- Form heading ----------------------------------------------- */ .block-form .gform_wrapper .gform_heading { display: none; } /* ----------------------------------------------- Labels ----------------------------------------------- */ .block-form .gform_wrapper.gravity-theme .gfield_label, .block-form .gform_wrapper.gravity-theme .gfield_label_before_complex { display: block; font-size: inherit; font-weight: 700; margin-bottom: 0.8rem; } .block-form .gform_wrapper.gravity-theme .gfield_required { color: #000; } /* ----------------------------------------------- Override GF's .medium width constraint ----------------------------------------------- */ .block-form .gform_wrapper.gravity-theme .gfield input.medium, .block-form .gform_wrapper.gravity-theme .gfield select.medium { width: 100%; } /* ----------------------------------------------- Inputs / select / textarea ----------------------------------------------- */ .block-form .gform_wrapper.gravity-theme .gfield input:not([type="radio"], [type="checkbox"], [type="submit"], [type="hidden"], [type="button"]), .block-form .gform_wrapper.gravity-theme .gfield select, .block-form .gform_wrapper.gravity-theme .gfield textarea { background-color: #f6f6f8; border: 2px solid #e9e9e7; border-radius: 0; color: inherit; font-family: inherit; font-size: inherit; height: auto; line-height: 1.6; padding: 15px 20px; transition: border 0.3s cubic-bezier(0.4, 0, 0, 1); width: 100%; } .block-form .gform_wrapper.gravity-theme .gfield input:not([type="radio"], [type="checkbox"], [type="submit"], [type="hidden"], [type="button"]):hover, .block-form .gform_wrapper.gravity-theme .gfield select:hover, .block-form .gform_wrapper.gravity-theme .gfield textarea:hover { border-color: #a7a7a9; } .block-form .gform_wrapper.gravity-theme .gfield input:not([type="radio"], [type="checkbox"], [type="submit"], [type="hidden"], [type="button"]):focus, .block-form .gform_wrapper.gravity-theme .gfield input:not([type="radio"], [type="checkbox"], [type="submit"], [type="hidden"], [type="button"]):focus-visible, .block-form .gform_wrapper.gravity-theme .gfield select:focus, .block-form .gform_wrapper.gravity-theme .gfield select:focus-visible, .block-form .gform_wrapper.gravity-theme .gfield textarea:focus, .block-form .gform_wrapper.gravity-theme .gfield textarea:focus-visible { border: 2px solid #ff6e33; box-shadow: none; outline: none; } .block-form .gform_wrapper.gravity-theme .gfield input::placeholder, .block-form .gform_wrapper.gravity-theme .gfield textarea::placeholder { color: #69696a; } /* ----------------------------------------------- Select — custom chevron arrow ----------------------------------------------- */ .block-form .gform_wrapper.gravity-theme .gfield select { -moz-appearance: none; appearance: none; cursor: pointer; padding-right: 48px; } .block-form .gform_wrapper .ginput_container_select { position: relative; } .block-form .gform_wrapper .ginput_container_select::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10' fill='%23282829'%3E%3Cpath transform='translate(16 0) rotate(90)' d='M.586 2.343 2 .93 9.071 8 2 15.071.586 13.657 6.243 8 .586 2.343z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: contain; content: ""; display: block; height: 8px; pointer-events: none; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); width: 13px; } /* ----------------------------------------------- Error states ----------------------------------------------- */ /* Hide top summary box and per-field messages */ .block-form .gform_wrapper .gform_validation_errors, .block-form .gform_wrapper .validation_message, .block-form .gform_wrapper .gfield_validation_message { display: none !important; } /* Top validation errors summary box */ .block-form .gform_wrapper.gravity-theme .gform_validation_errors { background: rgba(238, 0, 4, 0.05); border: 2px solid #ee0004; border-radius: 10px; box-shadow: none; padding: 20px 20px 20px 24px; margin-bottom: 24px; } .block-form .gform_wrapper.gravity-theme .gform_validation_errors > h2 { color: #ee0004; font-size: 16px; font-weight: 700; margin-bottom: 8px; } .block-form .gform_wrapper.gravity-theme .gform_validation_errors > ol a { color: #ee0004; font-size: inherit; text-decoration: underline; } .block-form .gform_wrapper.gravity-theme .gform_validation_errors > ol li { color: #ee0004; font-size: inherit; } /* Error field container */ .block-form .gform_wrapper.gravity-theme .gfield_error { background: transparent; border: none; padding: 0; } /* Error labels */ .block-form .gform_wrapper.gravity-theme .gfield_error .gfield_label, .block-form .gform_wrapper.gravity-theme .gfield_error legend { color: #ee0004; } /* Error inputs / select / textarea */ .block-form .gform_wrapper .gfield_error input:not([type="radio"], [type="checkbox"], [type="submit"], [type="hidden"], [type="button"]), .block-form .gform_wrapper .gfield_error select, .block-form .gform_wrapper .gfield_error textarea, .block-form .gform_wrapper.gravity-theme .gfield_error [aria-invalid="true"] { border: 2px solid #ee0004 !important; } /* Error validation message (per field) */ .block-form .gform_wrapper .validation_message, .block-form .gform_wrapper .gfield_validation_message { color: #ee0004; font-size: 14px; font-weight: 600; margin-top: 0.5rem; background: transparent; border: none; padding: 0; } /* Error state for radio/checkbox card items */ .block-form .gform_wrapper .gfield_error .gchoice { border-color: #ee0004; } /* ----------------------------------------------- Field description ----------------------------------------------- */ .block-form .gform_wrapper.gravity-theme .gfield_description, .block-form .gform_wrapper.gravity-theme .description { font-size: 18px; line-height: 1.3; padding-top: 0; margin-top: 20px; } .block-form .gform_wrapper.gravity-theme .gfield_description a, .block-form .gform_wrapper.gravity-theme .description a { font-weight: 700; text-decoration: underline; } /* ----------------------------------------------- Checkbox — card-style items ----------------------------------------------- */ .block-form .gform_wrapper .gfield_checkbox, .block-form .gform_wrapper .gfield_checkbox ul { list-style: none; margin: 0; padding: 0; } .block-form .gform_wrapper .gfield_radio:not(.radio-custom .gfield_radio) { display: flex; flex-direction: column; gap: var(--space-3); } .block-form .gform_wrapper .gchoice { align-items: center; background: transparent; border: 2px solid #e9e9e7; border-radius: 0; display: flex; flex-direction: row; padding: 16px 20px 16px 64px; position: relative; transition: border 0.3s cubic-bezier(0.4, 0, 0, 1), background 0.3s cubic-bezier(0.4, 0, 0, 1); } .block-form .gform_wrapper .gchoice:hover { border-color: #a7a7a9; } .block-form .gform_wrapper .gchoice:has(input:checked) { background: rgba(255, 110, 51, 0.06); border-color: #ff6e33; border-radius: 10px; } /* Hide native checkbox */ .block-form .gform_wrapper .gchoice input[type="checkbox"] { cursor: pointer; height: 100%; inset: 0; margin: 0; min-width: auto; opacity: 0; position: absolute; width: 100%; } /* Label */ .block-form .gform_wrapper.gravity-theme .gfield_checkbox .gchoice label, .block-form .gform_wrapper.gravity-theme .gfield_radio .gchoice label { cursor: pointer; display: block; font-size: inherit; font-weight: 700; margin: 0; position: static; } /* Custom checkbox box (::after = the square) */ .block-form .gform_wrapper .gchoice label::after { background-color: #fff; border: 2px solid #a7a7a9; border-radius: 0; content: ""; display: block; height: 2.4rem; left: 2rem; position: absolute; top: 50%; transform: translateY(-50%); transition: border 0.3s cubic-bezier(0.4, 0, 0, 1), background 0.2s cubic-bezier(0.4, 0, 0, 1); width: 2.4rem; } /* Checkmark tick (::before = the tick inside the box) */ .block-form .gform_wrapper .gchoice label::before { border-bottom: 2px solid #fff; border-right: 2px solid #fff; content: ""; height: 1.3rem; left: 2.85rem; opacity: 0; position: absolute; top: calc(50% - 0.2rem); transform: translateY(-50%) rotate(45deg); transition: opacity 0.3s cubic-bezier(0.4, 0, 0, 1); width: 0.75rem; z-index: 1; } /* Checked: orange filled box + visible tick */ .block-form .gform_wrapper .gchoice input:checked + label::after { background-color: #ff6e33; border-color: #ff6e33; } .block-form .gform_wrapper .gchoice input:checked + label::before { opacity: 1; } /* ----------------------------------------------- Submit footer ----------------------------------------------- */ .block-form .gform_wrapper .gform_footer, .block-form .gform_wrapper .gform-footer { display: flex; justify-content: flex-end; grid-column: 1 / -1; margin-top: var(--space-5); } /* CF7 submit paragraph */ .wpcf7 p:has([type="submit"]) { margin-top: var(--space-5); } /* ----------------------------------------------- Submit button — orange pill ----------------------------------------------- */ .block-form .gform_wrapper .gform_footer input[type="submit"], .block-form .gform_wrapper .gform_footer .gform_button, .block-form .gform_wrapper .gform_footer button, .block-form .gform_wrapper .gform-footer input[type="submit"], .block-form .gform_wrapper .gform-footer .gform_button, .block-form .gform_wrapper .gform-footer button { align-items: center !important; background: #ff6e33 !important; border: 2px solid #ff6e33 !important; border-radius: 100px !important; box-shadow: none !important; color: #282829 !important; cursor: pointer !important; display: inline-flex !important; font-size: 1.8rem !important; font-weight: 600 !important; line-height: 1.3 !important; padding: 0.86em 1.8em !important; position: relative !important; text-align: center !important; transition: background-color 0.3s cubic-bezier(0.4, 0, 0, 1) !important; vertical-align: top !important; } .block-form .gform_wrapper .gform_footer input[type="submit"]:hover, .block-form .gform_wrapper .gform_footer .gform_button:hover, .block-form .gform_wrapper .gform_footer button:hover, .block-form .gform_wrapper .gform-footer input[type="submit"]:hover, .block-form .gform_wrapper .gform-footer .gform_button:hover, .block-form .gform_wrapper .gform-footer button:hover { background: #fff !important; color: #282829 !important; } .block-form .gform_wrapper .gform_footer input[type="submit"]:focus-visible, .block-form .gform_wrapper .gform_footer .gform_button:focus-visible, .block-form .gform_wrapper .gform_footer button:focus-visible, .block-form .gform_wrapper .gform-footer input[type="submit"]:focus-visible, .block-form .gform_wrapper .gform-footer .gform_button:focus-visible, .block-form .gform_wrapper .gform-footer button:focus-visible { outline: 2px solid #ff6e33 !important; outline-offset: 2px !important; text-decoration: underline !important; } /* ----------------------------------------------- Mobile ----------------------------------------------- */ @media only screen and (max-width: 767.98px) { .block-form .gform_wrapper.gravity-theme .gform_fields { grid-template-columns: 1fr; } } /* ----------------------------------------------- Card variant — white box centered on page ----------------------------------------------- */ section.block-form.is-card .container { max-width: 930px; background: #fff; border: 1px solid #e9e9e7; border-radius: 20px; box-shadow: 2px 4px 6px 2px rgba(0, 0, 0, 0.4); padding: 60px 70px; } section.block-form.is-card .header { max-width: none; text-align: center; /* center the top-title + title */ margin-bottom: var(--space-6); } section.block-form.is-card .header .top-title { margin-bottom: var(--space-2); } section.block-form.is-card .header .top-title::after { background-color: #f8a087; margin-left: auto; /* centered underline under the centered top-title */ margin-right: auto; } section.block-form.is-card .header .top-title.top-title--color-n-black::after { background-color: #282829; } section.block-form.is-card .header .top-title.top-title--color-p::after { background-color: var(--color-p); } section.block-form.is-card .header .top-title.top-title--accent-peach::after { background-color: var(--accent-peach); } section.block-form.is-card .header .top-title.top-title--accent-green::after { background-color: var(--accent-green); } section.block-form.is-card .header .top-title.top-title--accent-pink::after { background-color: var(--accent-pink); } section.block-form.is-card .header .top-title.top-title--accent-light-blue::after { background-color: var(--accent-light-blue); } section.block-form.is-card .header .copy { font-weight: 700; max-width: none; text-align: left; /* content stays left-aligned */ } @media only screen and (max-width: 991.98px) { section.block-form.is-card .container { padding: 50px 40px; } } @media only screen and (max-width: 767.98px) { section.block-form.is-card .container { padding: 40px 24px; margin-top: 30px; margin-bottom: 30px; } .block-form .gform_wrapper.gravity-theme .gform_fields { gap: var(--space-3) var(--space-5); } } /* ----------------------------------------------- Split variant — heading + graphic (left), form (right). Mirrors live's two-column form sections. No card box; sits on the section background, form fields keep their normal styling + grid. ----------------------------------------------- */ section.block-form.is-split .form-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7); align-items: stretch; } section.block-form.is-split .form-split__left { display: flex; flex-direction: column; } section.block-form.is-split .header { max-width: none; margin-bottom: var(--space-4); } section.block-form.is-split .header .top-title { margin-bottom: var(--space-3); } /* Graphic split (e.g. community-ed Speaker EOI): plain eyebrow, no underline — matches live there. */ section.block-form.is-split .form-split:not(.form-split--photo) .header .top-title::after { display: none; } /* Photo split (e.g. NDIS): eyebrow keeps the standard accent underline like every other top-title. */ section.block-form.is-split .form-split--photo .header .top-title::after { display: block; } section.block-form.is-split .form-split--photo .header .top-title.top-title--color-n-black::after { background-color: #282829; } section.block-form.is-split .form-split--photo .header .top-title.top-title--color-p::after { background-color: var(--color-p); } section.block-form.is-split .form-split--photo .header .top-title.top-title--accent-peach::after { background-color: var(--accent-peach); } section.block-form.is-split .form-split--photo .header .top-title.top-title--accent-green::after { background-color: var(--accent-green); } section.block-form.is-split .form-split--photo .header .top-title.top-title--accent-pink::after { background-color: var(--accent-pink); } section.block-form.is-split .form-split--photo .header .top-title.top-title--accent-light-blue::after { background-color: var(--accent-light-blue); } section.block-form.is-split .header .copy { font-weight: 700; } section.block-form.is-split .form-split__graphic { color: var(--color-n-black); margin-top: auto; /* push to the bottom of the (stretched) left column */ /* width: 380px; */ max-width: 500px; } section.block-form.is-split .form-split__graphic svg { display: block; width: 100%; height: auto; } /* ----------------------------------------------- Photo split — heading + form in one column, photo in the other. (live NDIS "Contact us for NDIS support" pattern) ----------------------------------------------- */ section.block-form.is-split .form-split--photo { display: grid; grid-template-columns: 1fr 1fr; /* 50 / 50 */ gap: var(--space-7); align-items: center; /* square photo keeps its 1:1 height, vertically centred beside the form */ } section.block-form.is-split .form-split--photo .form-split__form { order: 0; } section.block-form.is-split .form-split--photo .form-split__media { order: 1; } /* Switch = photo on the left, form on the right. */ section.block-form.is-split .form-split--photo.form-split--switch .form-split__form { order: 1; } section.block-form.is-split .form-split--photo.form-split--switch .form-split__media { order: 0; } /* The theme's global `.background-image` is position:absolute; inset:0 — so the media column must be a positioned, sized box for the photo to fill IT (not escape to the section). align-items:stretch makes this column as tall as the form. */ section.block-form.is-split .form-split--photo .form-split__media { position: relative; aspect-ratio: 1 / 1; /* square photo */ } section.block-form.is-split .form-split--photo .form-split__image { position: absolute; inset: 0; border-radius: var(--radius, 10px); overflow: hidden; } section.block-form.is-split .form-split--photo .form-split__image img.background-image { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; } @media only screen and (max-width: 767.98px) { section.block-form.is-split .form-split { grid-template-columns: 1fr; gap: var(--space-5); } section.block-form.is-split .form-split__graphic { display: none; } section.block-form.is-split .form-split--photo { grid-template-columns: 1fr; gap: var(--space-5); } /* stack: form first, photo after, regardless of switch */ section.block-form.is-split .form-split--photo .form-split__form, section.block-form.is-split .form-split--photo.form-split--switch .form-split__form { order: 0; } section.block-form.is-split .form-split--photo .form-split__media, section.block-form.is-split .form-split--photo.form-split--switch .form-split__media { order: 1; } } /* =============================================================== WPForms — mirror the CF7 field styling for live parity (grey borderless inputs, pill-box choices, orange submit pill). =============================================================== */ .block-form .wpforms-container .wpforms-field { padding: 0 !important; margin-bottom: 32px !important; } .block-form .wpforms-container .wpforms-field-label { font-size: 20px !important; font-weight: 700 !important; color: #282829 !important; margin: 0 0 8px !important; display: block !important; } .block-form .wpforms-container .wpforms-field-sublabel, .block-form .wpforms-container .wpforms-field-description { font-size: 16px !important; font-weight: 400 !important; color: #69696a !important; } .block-form .wpforms-container .wpforms-required-label { color: #ff6e33 !important; } /* Text inputs / select / textarea */ .block-form .wpforms-container input[type="text"], .block-form .wpforms-container input[type="email"], .block-form .wpforms-container input[type="tel"], .block-form .wpforms-container input[type="url"], .block-form .wpforms-container input[type="number"], .block-form .wpforms-container input[type="password"], .block-form .wpforms-container select, .block-form .wpforms-container textarea { background-color: #f6f6f8 !important; border: 2px solid #e9e9e7 !important; border-radius: 0 !important; width: 100% !important; max-width: 100% !important; /* WPForms caps inputs at max-width:60% */ height: auto !important; /* WPForms sets an explicit height:43px */ min-height: 66px !important; padding: 15px 20px !important; font-size: 20px !important; line-height: 1.6 !important; color: #282829 !important; box-shadow: none !important; } .block-form .wpforms-container textarea { min-height: 14rem !important; height: 14rem !important; } .block-form .wpforms-container input::placeholder, .block-form .wpforms-container textarea::placeholder { color: #69696a !important; } .block-form .wpforms-container input:hover, .block-form .wpforms-container select:hover, .block-form .wpforms-container textarea:hover { border-color: #a7a7a9 !important; } .block-form .wpforms-container input:focus, .block-form .wpforms-container select:focus, .block-form .wpforms-container textarea:focus { border-color: #ff6e33 !important; box-shadow: none !important; outline: none !important; } /* Checkbox / radio options as grey pill boxes, two-up */ .block-form .wpforms-field-checkbox ul, .block-form .wpforms-field-radio ul { list-style: none !important; margin: 0 !important; padding: 0 !important; display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 20px !important; } /* Each option = a grey pill box with a centred indicator + label. */ .block-form .wpforms-field-checkbox ul li, .block-form .wpforms-field-radio ul li { position: relative !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; /* indicator + label aligned left */ float: none !important; width: auto !important; background: #f6f6f8 !important; border: 2px solid #e9e9e7 !important; border-radius: 10px !important; min-height: 90px !important; padding: 15px 20px 15px 32px !important; margin: 0 !important; transition: border-color 0.2s ease, background 0.2s ease !important; } .block-form .wpforms-field-checkbox ul li:hover, .block-form .wpforms-field-radio ul li:hover { border-color: #a7a7a9 !important; } /* native input covers the whole box, invisible */ .block-form .wpforms-field-checkbox ul li input, .block-form .wpforms-field-radio ul li input { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; margin: 0 !important; opacity: 0 !important; cursor: pointer !important; z-index: 2 !important; } .block-form .wpforms-field-checkbox ul li label, .block-form .wpforms-field-radio ul li label { display: inline-flex !important; align-items: center !important; gap: 12px !important; /* live: 12px between indicator + text */ font-weight: 700 !important; font-size: 20px !important; /* live: 20px bold */ line-height: 1.3 !important; color: #282829 !important; margin: 0 !important; } /* Indicator = a flex item beside the text: white 27px square (checkbox) / circle (radio); fills orange with a white tick / dot when checked. */ .block-form .wpforms-field-checkbox ul li label::before, .block-form .wpforms-field-radio ul li label::before { content: "" !important; flex-shrink: 0 !important; width: 27px !important; height: 27px !important; background: #fff !important; border: 2px solid #a7a7a9 !important; transition: background 0.3s cubic-bezier(0.4, 0, 0, 1), border-color 0.3s cubic-bezier(0.4, 0, 0, 1) !important; } .block-form .wpforms-field-checkbox ul li label::before { border-radius: 0 !important; } .block-form .wpforms-field-radio ul li label::before { border-radius: 50% !important; } .block-form .wpforms-field-checkbox ul li input:checked + label::before { border-color: #ff6e33 !important; background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTEiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTUgMTEgMCA1LjcyMmwxLjQxLTEuNDg5TDUgOC4wMTMgMTIuNTkgMCAxNCAxLjQ5OSA1IDExWiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==") 50% center no-repeat #ff6e33 !important; } .block-form .wpforms-field-radio ul li input:checked + label::before { border-color: #ff6e33 !important; background: radial-gradient(#ff6e33 0 45%, #fff 52%) !important; } .block-form .wpforms-field-checkbox ul li:has(input:checked), .block-form .wpforms-field-radio ul li:has(input:checked) { background: #fff5f3 !important; border-color: #ff6e33 !important; } /* Submit — orange pill, right-aligned, with arrow */ .block-form .wpforms-submit-container { text-align: right !important; margin-top: 24px !important; width: auto !important; float: none !important; } .block-form button.wpforms-submit { /* Double-wide gradient: white left half, orange right half. background-position: 100% shows the orange half at rest. */ background-color: #ff6e33 !important; background-image: linear-gradient(to right, #fff 50%, #ff6e33 50%) !important; background-size: 200% 100% !important; background-position: 100% 0 !important; color: #282829 !important; border: 2px solid #ff6e33 !important; box-shadow: none !important; border-radius: 100px !important; padding: 0.86em 1.8em !important; font-size: 1.8rem !important; font-weight: 600 !important; line-height: 1.3 !important; display: inline-flex !important; align-items: center !important; gap: 10px !important; cursor: pointer !important; width: auto !important; height: auto !important; overflow: hidden !important; position: relative !important; transition: background-position 0.3s cubic-bezier(0.4, 0, 0, 1) !important; } .block-form button.wpforms-submit:hover { /* Slide gradient left → reveals white half */ background-position: 0% 0 !important; color: #282829 !important; } .block-form button.wpforms-submit::after { content: "" !important; width: 17px !important; height: 17px !important; flex-shrink: 0 !important; background-color: currentColor !important; /* arrow follows the (black) text colour */ -webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTkgMTkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTkuNS41NzYgNy45MTQgMi4xNjMgMTQuMTkgOC40NUguNXYyLjI1aDEzLjY5MWwtNi4yNzcgNi4yOUw5LjUgMTguNTc1bDktOS05LTl6IiBmaWxsPSIjZmZmIi8+PC9zdmc+") no-repeat center / contain !important; mask: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTkgMTkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTkuNS41NzYgNy45MTQgMi4xNjMgMTQuMTkgOC40NUguNXYyLjI1aDEzLjY5MWwtNi4yNzcgNi4yOUw5LjUgMTguNTc1bDktOS05LTl6IiBmaWxsPSIjZmZmIi8+PC9zdmc+") no-repeat center / contain !important; } @media only screen and (max-width: 767.98px) { .block-form .wpforms-field-checkbox ul, .block-form .wpforms-field-radio ul { grid-template-columns: 1fr !important; } } /* ----------------------------------------------- YES / NO radio — pill boxes (match live) Scoped to .radio-custom so checkbox styling is untouched. ----------------------------------------------- */ .block-form .gform_wrapper .radio-custom .gfield_radio { display: flex; flex-flow: row wrap; /* gap: 30px; */ margin: 0; padding: 0; list-style: none; row-gap: 30px; } .block-form .gform_wrapper .radio-custom .gfield_radio .gchoice { flex: 0 1 calc(50% - 4px); margin: 0 8px 0 0; padding: 0; border: 0; background: transparent; border-radius: 0; position: relative; } .block-form .gform_wrapper .radio-custom .gfield_radio .gchoice:nth-child(even) { margin-right: 0; } /* never let the checkbox container highlight bleed through on radios */ .block-form .gform_wrapper .radio-custom .gfield_radio .gchoice:has(input:checked) { background: transparent; border: 0; } /* hide native radio */ .block-form .gform_wrapper .radio-custom .gfield_radio .gchoice input[type="radio"] { position: absolute; left: -9999px; width: auto; height: auto; inset: auto auto auto -9999px; opacity: 0; } /* the box = the label */ .block-form .gform_wrapper.gravity-theme .radio-custom .gfield_radio .gchoice label { align-items: center; background: #f6f6f8; border: 2px solid #e9e9e7; border-radius: 10px; cursor: pointer; display: flex; flex-direction: row; font-size: 20px; font-weight: 700; margin: 0; min-height: 90px; padding: 15px 20px 15px 75px; position: relative; transition: background 0.3s cubic-bezier(0.4, 0, 0, 1), border 0.3s cubic-bezier(0.4, 0, 0, 1); width: 100%; } .block-form .gform_wrapper.gravity-theme .radio-custom .gfield_radio .gchoice label:hover { border-color: #000; } /* circle outline (::before) — always visible (base checkbox rule sets opacity:0) */ .block-form .gform_wrapper .radio-custom .gfield_radio .gchoice label::before { background-color: #fff; border: 2px solid #a7a7a9; border-radius: 50%; content: ""; height: 27px; width: 27px; left: 25px; opacity: 1; position: absolute; top: 50%; transform: translateY(-50%); transition: border 0.3s cubic-bezier(0.4, 0, 0, 1); } /* orange dot (::after) — z-index above the white circle (::before has z-index:1) */ .block-form .gform_wrapper .radio-custom .gfield_radio .gchoice label::after { background-color: #ff6e33; border: 0; border-radius: 50%; content: ""; height: 17px; width: 17px; left: 30px; opacity: 0; position: absolute; top: 50%; transform: translateY(-50%) scale(0); transition: opacity 0.3s cubic-bezier(0.4, 0, 0, 1), transform 0.3s cubic-bezier(0.4, 0, 0, 1); z-index: 2; } /* checked state — selector mirrors the base label rule's specificity so it wins */ .block-form .gform_wrapper.gravity-theme .radio-custom .gfield_radio .gchoice input:checked + label { background-color: #fff5f3; border-color: #ff6e33; } .block-form .gform_wrapper .radio-custom .gfield_radio .gchoice input:checked + label::before { border-color: #ff6e33; } .block-form .gform_wrapper .radio-custom .gfield_radio .gchoice input:checked + label::after { opacity: 1; transform: translateY(-50%) scale(1); } .block-form .gform_wrapper.gravity-theme .radio-custom .gfield_radio .gchoice input:checked + label:hover { border-color: #a7a7a9; } /* ----------------------------------------------- Collapsible sections (accordion) — match live ----------------------------------------------- */ .block-form .gform_wrapper .gsection.collapsible-sections-field { grid-column: 1 / -1; background-color: #f5f5f4; border: 1px solid #e2dedd; cursor: pointer; margin: 24px 0 0; padding: 16px 20px; position: relative; -webkit-user-select: none; user-select: none; } .block-form .gform_wrapper .gsection.collapsible-sections-field:first-of-type { margin-top: 0; } .block-form .gform_wrapper .collapsible-sections-field .gsection_title { margin: 0; padding-right: 30px; position: relative; font-size: 28px; font-weight: 600; line-height: 1.3; color: #282829; } /* chevron drawn with borders (no icon font dependency) */ .block-form .gform_wrapper .collapsible-sections-field .gsection_title::after { content: ""; position: absolute; right: 6px; top: 50%; width: 11px; height: 11px; border-right: 2px solid #282829; border-bottom: 2px solid #282829; transform: translateY(-70%) rotate(45deg); transition: transform 0.3s cubic-bezier(0.4, 0, 0, 1); } .block-form .gform_wrapper .collapsible-sections-field.collapsible-sections-open .gsection_title::after { transform: translateY(-30%) rotate(-135deg); } /* body wrapper holds the section's fields; re-create the form grid inside */ .block-form .gform_wrapper .collapsible-sections-collapsible-body { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 30px 40px; border: 1px solid #e9e9e7; border-top: 0; padding: 24px 20px; margin: 0; } .block-form .gform_wrapper .collapsible-sections-collapsible-body .gsection_description { grid-column: 1 / -1; margin: 0; } .block-form .gform_wrapper .collapsible-sections-field:not(.collapsible-sections-open) + .collapsible-sections-collapsible-body { display: none; } @media only screen and (max-width: 767.98px) { .block-form .gform_wrapper .collapsible-sections-collapsible-body { grid-template-columns: 1fr; gap: var(--space-3) var(--space-5); } } /* =============================================== Contact Form 7 — global styles matching live =============================================== */ /* ----------------------------------------------- Hide CF7 generated br / empty paragraphs ----------------------------------------------- */ .wpcf7 br, .wpcf7 p:empty, .wpcf7 label + br { display: none; } /* ----------------------------------------------- Form control wrap ----------------------------------------------- */ .wpcf7-form-control-wrap { display: block; position: relative; } /* ----------------------------------------------- Inputs / select / textarea ----------------------------------------------- */ .wpcf7 input, .wpcf7 select, .wpcf7 textarea { background-color: #f6f6f8; border: 2px solid #e9e9e7; border-radius: 0; width: 100%; } .wpcf7 input[type="checkbox"], .wpcf7 input[type="radio"] { border: 0; width: auto; } .wpcf7 input[type="file"] { padding: 1.2rem; } .wpcf7 input::placeholder, .wpcf7 select::placeholder, .wpcf7 textarea::placeholder { color: #69696a; } .wpcf7 input:hover, .wpcf7 select:hover, .wpcf7 textarea:hover { border-color: #a7a7a9; } .wpcf7 input:focus, .wpcf7 select:focus, .wpcf7 textarea:focus { border: 2px solid #ff6e33; box-shadow: none; outline: none; } .wpcf7 input.wpcf7-not-valid, .wpcf7 select.wpcf7-not-valid, .wpcf7 textarea.wpcf7-not-valid { border-color: #ee0004; } .wpcf7 textarea { display: block; height: 14rem; max-width: 100%; min-height: 14rem; min-width: 100%; padding: 2rem; } /* ----------------------------------------------- Validation tip + response output ----------------------------------------------- */ .wpcf7 span.wpcf7-not-valid-tip { color: #ee0004; font-size: 1.6rem; margin-top: 0.5rem; display: block; } .wpcf7-response-output { margin: 3rem 0 !important; padding: 2rem !important; font-size: 2rem; /* live: 20px */ } /* Live keeps CF7's default border colours (amber invalid / leaf-green sent) over the theme's tinted backgrounds — match exactly. */ .wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output { background-color: rgba(238, 0, 4, 0.05); border-color: #ffb900; } .wpcf7 form.sent .wpcf7-response-output { background-color: rgba(1, 180, 131, 0.05); border-color: #46b450; } /* ----------------------------------------------- Screen reader response (visually hidden) ----------------------------------------------- */ .wpcf7 .screen-reader-response { position: absolute; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; width: 1px; margin: -1px; padding: 0; border: 0; } .wpcf7 .screen-reader-response p { display: block; } .wpcf7 .hidden-fields-container { display: none; } /* ----------------------------------------------- Radio / checkbox list items ----------------------------------------------- */ .wpcf7-list-item { display: block; position: relative; margin-left: 0; margin-right: 1.6rem; } .wpcf7-list-item input { left: -9999px; opacity: 0; position: absolute; } /* The label = the styled pill box */ .wpcf7-list-item-label { align-items: center; background: #f6f6f8; border: 2px solid #e9e9e7; border-radius: 1rem; cursor: pointer; display: flex; flex-direction: row; font-weight: 700; min-height: 9rem; padding: 15px 20px 15px 7.5rem; position: relative; transition: background 0.3s cubic-bezier(0.4, 0, 0, 1), border 0.3s cubic-bezier(0.4, 0, 0, 1); width: 100%; } .wpcf7-list-item:hover .wpcf7-list-item-label { border-color: #a7a7a9; } .wpcf7-list-item input:focus + .wpcf7-list-item-label { border: 2px solid #282829; } /* Circle outline (::before) */ .wpcf7-list-item-label::before { background-color: #fff; border: 2px solid #a7a7a9; border-radius: 50%; content: ""; height: 2.7rem; left: 2.5rem; position: absolute; top: calc(50% - 1.4rem); transition: border 0.3s cubic-bezier(0.4, 0, 0, 1); width: 2.7rem; } /* Orange dot / check (::after) */ .wpcf7-list-item-label::after { background-color: #ff6e33; border-radius: 50%; content: ""; height: 1.7rem; left: 3rem; opacity: 0; position: absolute; top: calc(50% - 0.9rem); transform: scale(0); transition: opacity 0.3s cubic-bezier(0.4, 0, 0, 1), transform 0.3s cubic-bezier(0.4, 0, 0, 1); width: 1.7rem; } /* Checked states */ .wpcf7-list-item input:checked + .wpcf7-list-item-label { background-color: #fff5f3; border: 2px solid #ff6e33; } .wpcf7-list-item input:checked + .wpcf7-list-item-label::before { border-color: #ff6e33; } .wpcf7-list-item input:checked + .wpcf7-list-item-label::after { opacity: 1; transform: scale(1); } .wpcf7-list-item input:checked + .wpcf7-list-item-label:hover { border-color: #a7a7a9; } /* Checkbox: square box + tick SVG instead of circle dot */ .wpcf7-checkbox .wpcf7-list-item-label::before, .wpcf7-acceptance .wpcf7-list-item-label::before { border-radius: 0; height: 2.7rem; left: 2.5rem; top: calc(50% - 1.4rem); width: 2.7rem; } .wpcf7-checkbox .wpcf7-list-item-label::after, .wpcf7-acceptance .wpcf7-list-item-label::after { border-radius: 0; height: 2.7rem; left: 2.5rem; top: calc(50% - 1.4rem); width: 2.7rem; background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTEiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTUgMTEgMCA1LjcyMmwxLjQxLTEuNDg5TDUgOC4wMTMgMTIuNTkgMCAxNCAxLjQ5OSA1IDExWiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==") 50% center no-repeat #ff6e33; } /* ----------------------------------------------- Grid layout variant for radio groups ----------------------------------------------- */ .wpcf7-radio.grid-layout { display: grid; grid-template-columns: 1fr; gap: 0 3.2rem; } .wpcf7-radio.grid-layout .wpcf7-list-item { margin: 0; } .wpcf7-radio.grid-layout .wpcf7-list-item input:focus + .wpcf7-list-item-label { border-color: #ff6e33; } /* ----------------------------------------------- Acceptance (single checkbox) — no margin ----------------------------------------------- */ .wpcf7-acceptance .wpcf7-list-item { margin-right: 0 !important; } /* ----------------------------------------------- Spinner ----------------------------------------------- */ .wpcf7-spinner { visibility: hidden; display: inline-block; background-color: #23282d; opacity: 0.75; width: 24px; height: 24px; border-radius: 100%; padding: 0; margin: 0 24px; position: relative; } form.submitting .wpcf7-spinner { visibility: visible; } .wpcf7-spinner::before { content: ""; position: absolute; background-color: #fbfbfc; top: 4px; left: 4px; width: 6px; height: 6px; border-radius: 100%; transform-origin: 8px 8px; animation: spin 1000ms linear infinite; } /* =============================================================== CF7 MULTI-STEP FORM — layout, grid, progress + navigation Mirrors the live qld.guidedogs.com.au volunteer form. =============================================================== */ /* --- Step visibility: only the active step (and shown rows) display --- */ .wpcf7-form .form__step, .wpcf7-form .hidden-form-field { display: none; } .wpcf7-form .form__step.is-visible { display: block; } .wpcf7-form .row.is-visible { display: flex; } /* --- Dynamic conditional sections (data-js-trigger) --- Higher specificity so .hidden-form-field beats `.wpcf7 .row{display:flex}`. JS toggles .is-visible based on the trigger dropdown's value. */ .block-form .wpcf7 .hidden-form-field { display: none; } .block-form .wpcf7 .hidden-form-field.is-visible { display: block; } .block-form .wpcf7 .row.hidden-form-field.is-visible { display: flex; } /* --- 16-column grid used inside the form (matches live) --- */ .wpcf7 .row { display: flex; flex-wrap: wrap; margin-left: -16px; margin-right: -16px; } .wpcf7 [class*="col-xs-"], .wpcf7 [class*="col-sm-"], .wpcf7 [class*="col-md-"] { width: 100%; padding-left: 16px; padding-right: 16px; } /* xs (all widths) — 16-column grid */ .wpcf7 .col-xs-1 { flex: 0 0 6.25%; max-width: 6.25%; } .wpcf7 .col-xs-2 { flex: 0 0 12.5%; max-width: 12.5%; } .wpcf7 .col-xs-3 { flex: 0 0 18.75%; max-width: 18.75%; } .wpcf7 .col-xs-4 { flex: 0 0 25%; max-width: 25%; } .wpcf7 .col-xs-5 { flex: 0 0 31.25%; max-width: 31.25%; } .wpcf7 .col-xs-6 { flex: 0 0 37.5%; max-width: 37.5%; } .wpcf7 .col-xs-7 { flex: 0 0 43.75%; max-width: 43.75%; } .wpcf7 .col-xs-8 { flex: 0 0 50%; max-width: 50%; } .wpcf7 .col-xs-9 { flex: 0 0 56.25%; max-width: 56.25%; } .wpcf7 .col-xs-10 { flex: 0 0 62.5%; max-width: 62.5%; } .wpcf7 .col-xs-11 { flex: 0 0 68.75%; max-width: 68.75%; } .wpcf7 .col-xs-12 { flex: 0 0 75%; max-width: 75%; } .wpcf7 .col-xs-13 { flex: 0 0 81.25%; max-width: 81.25%; } .wpcf7 .col-xs-14 { flex: 0 0 87.5%; max-width: 87.5%; } .wpcf7 .col-xs-15 { flex: 0 0 93.75%; max-width: 93.75%; } .wpcf7 .col-xs-16 { flex: 0 0 100%; max-width: 100%; } /* sm (>=768px) — 16-column grid */ @media (min-width: 768px) { .wpcf7 .col-sm-1 { flex: 0 0 6.25%; max-width: 6.25%; } .wpcf7 .col-sm-2 { flex: 0 0 12.5%; max-width: 12.5%; } .wpcf7 .col-sm-3 { flex: 0 0 18.75%; max-width: 18.75%; } .wpcf7 .col-sm-4 { flex: 0 0 25%; max-width: 25%; } .wpcf7 .col-sm-5 { flex: 0 0 31.25%; max-width: 31.25%; } .wpcf7 .col-sm-6 { flex: 0 0 37.5%; max-width: 37.5%; } .wpcf7 .col-sm-7 { flex: 0 0 43.75%; max-width: 43.75%; } .wpcf7 .col-sm-8 { flex: 0 0 50%; max-width: 50%; } .wpcf7 .col-sm-9 { flex: 0 0 56.25%; max-width: 56.25%; } .wpcf7 .col-sm-10 { flex: 0 0 62.5%; max-width: 62.5%; } .wpcf7 .col-sm-11 { flex: 0 0 68.75%; max-width: 68.75%; } .wpcf7 .col-sm-12 { flex: 0 0 75%; max-width: 75%; } .wpcf7 .col-sm-13 { flex: 0 0 81.25%; max-width: 81.25%; } .wpcf7 .col-sm-14 { flex: 0 0 87.5%; max-width: 87.5%; } .wpcf7 .col-sm-15 { flex: 0 0 93.75%; max-width: 93.75%; } .wpcf7 .col-sm-16 { flex: 0 0 100%; max-width: 100%; } } /* md (>=768px) — 16-column grid (some live CF7 forms use col-md-* instead of col-sm-*) */ @media (min-width: 768px) { .wpcf7 .col-md-1 { flex: 0 0 6.25%; max-width: 6.25%; } .wpcf7 .col-md-2 { flex: 0 0 12.5%; max-width: 12.5%; } .wpcf7 .col-md-3 { flex: 0 0 18.75%; max-width: 18.75%; } .wpcf7 .col-md-4 { flex: 0 0 25%; max-width: 25%; } .wpcf7 .col-md-5 { flex: 0 0 31.25%; max-width: 31.25%; } .wpcf7 .col-md-6 { flex: 0 0 37.5%; max-width: 37.5%; } .wpcf7 .col-md-7 { flex: 0 0 43.75%; max-width: 43.75%; } .wpcf7 .col-md-8 { flex: 0 0 50%; max-width: 50%; } .wpcf7 .col-md-9 { flex: 0 0 56.25%; max-width: 56.25%; } .wpcf7 .col-md-10 { flex: 0 0 62.5%; max-width: 62.5%; } .wpcf7 .col-md-11 { flex: 0 0 68.75%; max-width: 68.75%; } .wpcf7 .col-md-12 { flex: 0 0 75%; max-width: 75%; } .wpcf7 .col-md-13 { flex: 0 0 81.25%; max-width: 81.25%; } .wpcf7 .col-md-14 { flex: 0 0 87.5%; max-width: 87.5%; } .wpcf7 .col-md-15 { flex: 0 0 93.75%; max-width: 93.75%; } .wpcf7 .col-md-16 { flex: 0 0 100%; max-width: 100%; } } /* --- Field rows + labels --- */ .wpcf7 .form__row { margin-bottom: 32px; } .wpcf7 .form__row > label { display: block; font-size: 20px; font-weight: 700; margin-bottom: 8px; color: #282829; } .wpcf7 .required { color: #282829; } .wpcf7 .required-notice { font-size: 20px; margin: 32px 0; color: #282829; } .wpcf7 .explanatory-text { font-size: 20px; color: #282829; margin-bottom: 0; } /* --- Inputs / selects: live sizing (padding -> 66px tall) --- */ .wpcf7 input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]), .wpcf7 select { padding: 15px 20px; font-size: 20px; line-height: 1.6; } /* --- Select: hide native arrow, add custom chevron via .dropdown wrap --- */ .wpcf7 .dropdown { display: block; position: relative; } .wpcf7 .dropdown select { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-right: 48px; } .wpcf7 .dropdown::after { content: ""; position: absolute; right: 28px; top: 33px; margin-top: -4px; width: 8px; height: 8px; border-left: 2px solid #000; border-bottom: 2px solid #000; transform: rotate(-45deg); pointer-events: none; } /* --- Step headings --- */ .wpcf7 .form__step h3 { margin-bottom: 32px; } .wpcf7 .form__step h4 { margin-top: 0; margin-bottom: 32px; } /* --- Invalid field highlight (set by step validation) --- */ .wpcf7 .form__error, .wpcf7 input.form__error, .wpcf7 select.form__error, .wpcf7 textarea.form__error { border-color: #ee0004 !important; } /* --- Progress indicator --- */ .wpcf7 .progress-indicator { margin-bottom: 40px; } .wpcf7 .progress-indicator__bar { height: 8px; background-color: #a7a7a9; overflow: hidden; } .wpcf7 .progress-indicator__bar__fill { height: 100%; width: 0; background-color: #01b483; transition: width 0.3s cubic-bezier(0.4, 0, 0, 1); } .wpcf7 .progress-indicator__message { font-weight: 700; margin-top: 10px; text-align: center; font-size: 20px; } /* --- Step navigation actions --- */ .wpcf7 .multistep-form-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px 20px; } .wpcf7 .u-text-right { text-align: right; } /* --- Spacing utilities used by the form markup --- */ .wpcf7 .u-m-bx1 { margin-bottom: 8px; } .wpcf7 .u-m-bx5 { margin-bottom: 40px; } .wpcf7 .u-m-tx5 { margin-top: 80px; } /* --- Visually-hidden helper (progress sr text) --- */ .wpcf7 .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ----------------------------------------------- CF7 submit button (.c-btn) — keep label above the orange ::before sweep so the text is visible at rest. Mirrors live: span/icon position:relative; z-index:2. ----------------------------------------------- */ .block-form .wpcf7 .form__actions { display: flex; justify-content: flex-end; } .block-form .wpcf7 .c-btn { position: relative; font-size: 20px; padding: 20px 36px; } /* Some CF7 forms submit via a plain rather than an /