/* v1.0.0 - 6/24/25 */ /* HubSpot Form Styling - PerformYard Override */ .hbspt-form { opacity: 0; } .input { margin-right: 0px !important; } .hbspt-form fieldset { margin-left: auto !important; margin-right: auto !important; width: 100% !important; } /* Two-column layout for first/last name */ .hbspt-form fieldset.form-columns-2 { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 1rem !important; align-items: start !important; } /* One-column layout for portrait/mobile */ @media (max-width: 767px) { .hbspt-form fieldset.form-columns-2 { grid-template-columns: 1fr !important; } .hs-form-wrapper { width: 100% !important; } } .hbspt-form fieldset.form-columns-2 .hs-form-field { margin-bottom: 0 !important; width: 100% !important; } .hbspt-form fieldset.form-columns-1 { display: block !important; } .hbspt-form fieldset.form-columns-1 .hs-form-field { margin-bottom: 0 !important; } /* UNIFIED LABEL STYLING - applies to ALL labels */ .hbspt-form label, .hbspt-form .hs-form-field label { display: block !important; font-weight: 600 !important; font-size: 0.875rem !important; color: #2d3748 !important; margin-bottom: 0.5rem !important; line-height: 1.25 !important; } /* Error message styling */ .hbspt-form .hs-error-msgs, .hbspt-form .hs-error-msgs.inputs-list, .hbspt-form ul.hs-error-msgs, .hbspt-form ul.no-list.hs-error-msgs { list-style: none !important; padding-left: 0 !important; margin-left: 0 !important; padding: 0 !important; margin: 0.5rem 0 0 0 !important; } .hbspt-form .hs-error-msgs li, .hbspt-form .hs-error-msgs.inputs-list li { list-style: none !important; padding-left: 0 !important; margin-left: 0 !important; padding: 0 !important; margin: 0 !important; } .hbspt-form .hs-error-msg, .hbspt-form .hs-error-msgs .hs-error-msg { color: #e53e3e !important; font-size: 0.75rem !important; font-weight: 400 !important; line-height: 1.3 !important; margin: 0 !important; padding: 0 !important; display: block !important; } /* Fix input wrapper padding */ .hbspt-form .input, .hbspt-form .input.input-wrapper { padding-right: 0 !important; width: 100% !important; } .hbspt-form .hs-input { width: 100% !important; } /* Hide hidden fieldsets */ .hbspt-form fieldset:has(div[style*="display: none"]), .hbspt-form fieldset:has(input[type="hidden"]) { display: none !important; height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } /* Fallback for browsers without :has() support */ .hbspt-form .hs_ga_client_id, .hbspt-form .hs-ga_client_id, .hbspt-form .hs_device_type, .hbspt-form .hs-device_type, .hbspt-form .hs_ga_source_first, .hbspt-form .hs-ga_source_first, .hbspt-form .hs_ga_source_last, .hbspt-form .hs-ga_source_last, .hbspt-form .hs_test_variation, .hbspt-form .hs-test_variation, .hbspt-form .hs_marketing_ids, .hbspt-form .hs-marketing_ids, .hbspt-form .hs_gclid, .hbspt-form .hs-gclid, .hbspt-form .hs_paid_conversion_id, .hbspt-form .hs-paid_conversion_id, .hbspt-form .hs_user_agent, .hbspt-form .hs-user_agent, .hbspt-form .hs_content_landing_page, .hbspt-form .hs-content_landing_page { display: none !important; height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } /* Conditional field spacing */ .hbspt-form .hs-dependent-field { display: flex !important; flex-direction: column !important; gap: 1rem !important; margin-bottom: 1rem !important; } .hbspt-form .hs-dependent-field .input { padding-right: 0 !important; width: 100% !important; } .hs-button { margin-left: auto !important; margin-right: auto !important; } /* 1. Nuke the native arrow everywhere */ .hs-form select { -webkit-appearance: none; /* Chrome/Safari */ -moz-appearance: none; /* Firefox */ appearance: none; /* Everything else */ background-color: #fff; /* keep your field bg */ padding-right: 2.5rem; /* room for the new arrow */ position: relative; } /* IE / old Edge: hide the arrow block */ .hs-form select::-ms-expand { display: none; } /* 2. Drop in your own arrow (SVG = crisp, easy to color) */ .hs-form select { background-image: url('data:image/svg+xml;utf8,\ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 6">\ <path fill="none" stroke="%23000" stroke-width="1.5" d="M1 1l4 4 4-4"/>\ </svg>'); background-repeat: no-repeat; background-position: right 1rem center; /* << move this to taste */ background-size: 10px 6px; } /* ZeroBounce Adjustment */ .loaderContainer { display: none !important }