/* * hh-hubspot.css (Landing Page, standalone) — HubSpot "new" form styling. * ====================================================================== * Styles HubSpot's DEVELOPER embed (`
`) to match THIS * landing page's own look (UIkit / Gotham Book / #5EA893 green / #131313 dark * band) — NOT the Whitecap theme. Self-contained: literal values only (this * bundle ships no design tokens). * * Same portable system used across the site's standalone forms: (1) KNOBS — * semantic --hsform-* custom properties; (2) BRIDGE — maps the knobs onto * HubSpot's native --hsf-* variable API; (3) OVERRIDES — plain rules for what * HubSpot exposes no var for. Re-skin by changing the knob values only. * * The form sits on the dark .uk-section-secondary band, so: white fields with * #131313 text, #ccc uppercase labels, and a #131313 submit with a #5EA893 * border that fills green on hover (the old .hh-button look). Labels are shown * (styled) rather than the legacy sr-only-labels-with-placeholders approach — * more robust with the modern embed's rendering. */ /* ====================================================================== * 1 + 2. KNOBS (landing skin) & BRIDGE * ====================================================================== */ .hs-form-html { /* --- KNOBS: the landing page's own palette/type --- */ --hsform-font: 'Gotham Book', sans-serif; --hsform-font-size: 16px; --hsform-text-color: #ffffff; --hsform-row-gap: 1.25rem; --hsform-padding: 0; --hsform-label-color: #cccccc; --hsform-label-size: 14px; --hsform-required-color: #cccccc; --hsform-field-bg: #ffffff; --hsform-field-color: #131313; --hsform-field-border: transparent; --hsform-field-border-focus: #5ea893; --hsform-field-border-width: 0; --hsform-field-radius: 0; --hsform-field-padding: 16px 14px; --hsform-placeholder-color: #777777; --hsform-textarea-min-height: 150px; --hsform-error-color: #ff4d4d; --hsform-button-bg: #131313; --hsform-button-color: #ffffff; --hsform-button-hover-bg: #5ea893; --hsform-button-border: #5ea893; --hsform-button-font: 'Gotham Book', sans-serif; --hsform-button-size: 1.1rem; --hsform-button-weight: 400; --hsform-button-radius: 0; --hsform-button-padding: 12px 45px; --hsform-button-transform: uppercase; --hsform-button-tracking: normal; /* --- BRIDGE: feed the knobs into HubSpot's --hsf-* API --- */ --hsf-global__font-family: var(--hsform-font); --hsf-global__font-size: var(--hsform-font-size); --hsf-global__color: var(--hsform-text-color); --hsf-global-error__color: var(--hsform-error-color); --hsf-row__vertical-spacing: var(--hsform-row-gap); --hsf-background__padding: var(--hsform-padding); --hsf-field-label__font-family: var(--hsform-font); --hsf-field-label__font-size: var(--hsform-label-size); --hsf-field-label__color: var(--hsform-label-color); --hsf-field-label-requiredindicator__color: var(--hsform-required-color); --hsf-field-input__font-family: var(--hsform-font); --hsf-field-input__color: var(--hsform-field-color); --hsf-field-input__background-color: var(--hsform-field-bg); --hsf-field-input__placeholder-color: var(--hsform-placeholder-color); --hsf-field-input__border-color: var(--hsform-field-border); --hsf-field-input__border-width: var(--hsform-field-border-width); --hsf-field-input__border-style: solid; --hsf-field-input__border-radius: var(--hsform-field-radius); --hsf-field-input__padding: var(--hsform-field-padding); --hsf-field-textarea__font-family: var(--hsform-font); --hsf-field-textarea__color: var(--hsform-field-color); --hsf-field-textarea__background-color: var(--hsform-field-bg); --hsf-field-textarea__placeholder-color: var(--hsform-placeholder-color); --hsf-field-textarea__border-color: var(--hsform-field-border); --hsf-field-textarea__border-width: var(--hsform-field-border-width); --hsf-field-textarea__border-style: solid; --hsf-field-textarea__border-radius: var(--hsform-field-radius); --hsf-field-textarea__padding: var(--hsform-field-padding); --hsf-button__font-family: var(--hsform-button-font); --hsf-button__font-size: var(--hsform-button-size); --hsf-button__font-weight: var(--hsform-button-weight); --hsf-button__color: var(--hsform-button-color); --hsf-button__background-color: var(--hsform-button-bg); --hsf-button__border-radius: var(--hsform-button-radius); --hsf-button__padding: var(--hsform-button-padding); --hsf-button--hover__background-color: var(--hsform-button-hover-bg); --hsf-button--hover__color: var(--hsform-button-color); --hsf-button--hover__border-color: var(--hsform-button-hover-bg); --hsf-erroralert__color: var(--hsform-error-color); --hsf-richtext__font-family: var(--hsform-font); --hsf-richtext__color: var(--hsform-text-color); } /* ====================================================================== * 3. OVERRIDES — for what HubSpot exposes no var for * ====================================================================== */ /* Fields are borderless (like the old form), so show focus as a green outline. */ .hs-form-html input:hover, .hs-form-html select:hover, .hs-form-html textarea:hover, .hs-form-html .hsfc-TextareaInput:hover { box-shadow: none !important; } .hs-form-html input:focus, .hs-form-html select:focus, .hs-form-html textarea:focus, .hs-form-html .hsfc-TextareaInput:focus { outline: 2px solid var(--hsform-field-border-focus) !important; outline-offset: 0; } .hs-form-html textarea, .hs-form-html .hsfc-TextareaInput { min-height: var(--hsform-textarea-min-height) !important; } /* Uppercase labels + placeholders — the landing form's voice. */ .hs-form-html label { text-transform: uppercase; } .hs-form-html input::placeholder, .hs-form-html textarea::placeholder { text-transform: uppercase; } /* Submit: auto-width, centered, 1px green border, fills green on hover * (the old .hh-button). NOT full-width. */ .hs-form-html button[type="submit"], .hs-form-html input[type="submit"], .hs-form-html .hs-button, .hs-form-html .hsfc-Button { width: auto !important; border: 1px solid var(--hsform-button-border) !important; text-transform: var(--hsform-button-transform) !important; letter-spacing: var(--hsform-button-tracking) !important; cursor: pointer; } .hs-form-html button[type="submit"]:hover, .hs-form-html input[type="submit"]:hover, .hs-form-html .hs-button:hover, .hs-form-html .hsfc-Button:hover { border-color: var(--hsform-button-hover-bg) !important; } /* Center the submit within its nav row and kill HubSpot's large default top * margin so it sits neatly under the last field. */ .hs-form-html .hsfc-NavigationRow { margin-top: 0 !important; } .hs-form-html .hsfc-NavigationRow__Buttons { margin-top: 0 !important; justify-content: center !important; text-align: center; } /* Checkbox/radio INPUTS as normal small square/circle native controls with a * green check/dot (HubSpot's field sizing would otherwise stretch them). */ .hs-form-html input[type="checkbox"], .hs-form-html input[type="radio"] { box-sizing: border-box; flex: none !important; width: 1rem !important; height: 1rem !important; min-width: 1rem !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; -webkit-appearance: auto !important; appearance: auto !important; accent-color: #5ea893; } /* Lay checkbox/radio option groups out inline-wrapped rather than stacked. The * attribute match covers every group type regardless of the exact class name. */ .hs-form-html [class*="FieldGroup__Options"] { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; gap: 0.5rem 2rem !important; } .hs-form-html [class*="FieldGroup__Options"] > div { width: auto !important; flex-shrink: 0; } /* Hide the invisible-v2 reCAPTCHA badge off-screen (keeps the token alive) and * collapse its reserved row height. */ .grecaptcha-badge { position: absolute !important; left: -9999px !important; } .hs-form-html .hsfc-ReCaptchaV2 { min-height: 0 !important; } .hs-form-html .hsfc-Row:has(.hsfc-ReCaptchaV2) { margin: 0 !important; min-height: 0 !important; }