/* ========================================================================== Location lead form - shared by the v1 and v2 location layouts -------------------------------------------------------------------------- Scoped to .location-page, which BOTH layouts put on , so the two render an identical form. Previously these rules lived in loc-v2.css and were scoped to .loc-v2, which the v1 pages do not carry. ========================================================================== */ /* ======================================================================= CONTACT FORM OPTION GROUPS (checkbox / radio) Added when the location form was aligned to the /contact form field set. The location pages had no checkbox or radio styling because the old form used selects only. Scoped to .location-page so no other cluster page changes. ======================================================================= */ .location-page .loc-opt-grid { display: flex; flex-wrap: wrap; gap: 10px; } .location-page .loc-opt { display: inline-flex; align-items: center; gap: 9px; padding: 11px 16px; border: 1px solid #d0d5dd; border-radius: 8px; background: #fff; font-family: Outfit, sans-serif; font-size: 15px; font-weight: 500; color: #00293a; cursor: pointer; transition: border-color .2s ease, background .2s ease, box-shadow .2s ease; line-height: 1.3; } .location-page .loc-opt:hover { border-color: #009282; background: #f6fffd; } .location-page .loc-opt input { width: 17px; height: 17px; accent-color: #009282; margin: 0; flex-shrink: 0; cursor: pointer; } /* Selected state, so a tapped answer is obvious on a phone. */ .location-page .loc-opt:has(input:checked) { border-color: #009282; background: #eafaf7; box-shadow: 0 0 0 3px rgba(0, 146, 130, .10); } .location-page .loc-opt input:focus-visible { outline: 2px solid #009282; outline-offset: 2px; } .location-page .loc-opt-otherwrap { display: inline-flex; align-items: center; gap: 8px; } /* Sits inline beside the Other chip, sized like a chip rather than a full-width field, so the answer row stays one visual line. */ .location-page .loc-opt-other { width: 210px; padding: 11px 14px; font-size: 15px; } /* Honeypot: off-screen rather than display:none, which some bots skip. */ .location-page .loc-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } @media (max-width: 560px) { .location-page .loc-opt-grid { flex-direction: column; gap: 8px; } .location-page .loc-opt { width: 100%; } .location-page .loc-opt-otherwrap { width: 100%; } .location-page .loc-opt-otherwrap .loc-opt { width: auto; flex-shrink: 0; } .location-page .loc-opt-other { width: auto; flex: 1 1 auto; min-width: 0; } } /* Required marker, inline validation and the submit-area proof block. Mirrors the /contact form's states so both forms behave the same. */ .location-page .loc-req { color: #dc3545; font-weight: 700; } .location-page .loc-form-full > .loc-form-label { display: block; margin-bottom: 12px; } .location-page .loc-field-error { color: #dc3545; font-size: 13px; margin-top: 8px; display: none; } .location-page .loc-field-error.is-visible { display: block; } .location-page .loc-form-input.is-invalid, .location-page .loc-form-textarea.is-invalid, .location-page .loc-form-select.is-invalid { border-color: #dc3545; box-shadow: 0 0 0 3px rgba(220, 53, 69, .10); } /* Checkbox/radio groups: mark the whole row of chips, not one input. */ .location-page .loc-opt-grid:has(.is-invalid) .loc-opt { border-color: #f0a5ac; } .location-page .loc-submit { display: inline-flex; align-items: center; gap: 10px; } .location-page .loc-submit[disabled] { opacity: .65; pointer-events: none; } .location-page .loc-form-proof { margin-top: 26px; display: flex; justify-content: center; } .location-page .loc-form-proof .social-proof { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: center; } .location-page .loc-form-proof .proof-copy { font-size: 14px; font-weight: 600; color: #00293a; } .location-page .loc-form-proof .stars { display: flex; gap: 2px; } .location-page .loc-form-proof .star { width: 15px; height: 15px; } .location-page .loc-form-proof .sp-divider { width: 1px; height: 28px; background: #d0d5dd; } @media (max-width: 560px) { .location-page .loc-form-proof .sp-divider { display: none; } .location-page .loc-form-proof .social-proof { gap: 10px; } } /* Phone group: the country select must read as one control with the number input, not a bordered box nested inside another bordered box. The old markup did this with an inline style attribute; it belongs here instead. The select defaults to US +1 (first option), so the number field carries no "+1" of its own and the two never contradict each other. */ .location-page .loc-phone-group { display: flex; align-items: stretch; border: 1px solid #d0d5dd; border-radius: 8px; overflow: hidden; background: #fff; } .location-page .loc-phone-group:focus-within { border-color: #009282; box-shadow: 0 0 0 3px rgba(0, 146, 130, .10); } .location-page .loc-phone-prefix { border: 0; border-right: 1px solid #d0d5dd; border-radius: 0; background: #f8fafc; color: #00293a; font-family: Outfit, sans-serif; font-size: 15px; font-weight: 600; padding: 0 30px 0 14px; outline: 0; flex: 0 0 auto; cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2364748b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; } .location-page .loc-phone-input { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; flex: 1 1 auto; min-width: 0; } /* ======================================================================= ANSWERED-QUESTION PANEL Ported from the /contact form (contact.css "question panel" block) so the two forms feel the same: a question lights up in soft teal while you are answering it (:focus-within) AND stays lit once answered, so completed questions remain visually anchored as you scroll on. Negative margin plus matching padding means the highlight expands outward without shifting the content. Desktop only, same as contact, because on a phone the panel padding costs more than the cue is worth. ======================================================================= */ @media (min-width: 768px) { .location-page .loc-lead-form > .loc-form-full, .location-page .loc-lead-form > .loc-form-row { position: relative; padding: 16px 18px; margin-left: -18px; margin-right: -18px; border-radius: 14px; background: transparent; border: 1px solid transparent; transition: background .24s ease, border-color .24s ease, box-shadow .28s ease; } .location-page .loc-lead-form > .loc-form-full:focus-within, .location-page .loc-lead-form > .loc-form-row:focus-within, .location-page .loc-lead-form > .loc-form-full:has(input:checked), .location-page .loc-lead-form > .loc-form-full:has(textarea:not(:placeholder-shown)) { background: rgba(0, 146, 130, .045); border-color: rgba(0, 146, 130, .20); box-shadow: 0 8px 24px rgba(0, 41, 58, .07); } /* Accent stripe on the question you are actively answering, so "you are here" reads differently from "already answered". */ .location-page .loc-lead-form > .loc-form-full::before { content: ''; position: absolute; top: 50%; left: -2px; width: 3px; height: 0; transform: translateY(-50%); background: linear-gradient(135deg, #008E9E 0%, #009282 100%); border-radius: 3px; opacity: 0; transition: height .28s ease, opacity .24s ease; } .location-page .loc-lead-form > .loc-form-full:focus-within::before { height: calc(100% - 24px); opacity: 1; } } /* Selected chip: match the contact form's exact tint and the filled control. */ .location-page .loc-opt:has(input:checked) { border-color: #009282; background: rgba(0, 146, 130, .06); box-shadow: none; } .location-page .loc-opt input { border: 1.8px solid #009282; border-radius: 5px; transition: transform .15s ease, background-color .15s ease, border-color .15s ease; } .location-page .loc-opt input[type="radio"] { border-radius: 50%; } .location-page .loc-opt input:hover { transform: scale(1.05); } .location-page .loc-opt input:checked { animation: loc-pop .28s ease; } @keyframes loc-pop { 0% { transform: scale(.85); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }