/* * hubspot.css (First Residents Club, standalone) — HubSpot "new" form styling. * ====================================================================== * Ported from the main theme's portable form system (static/css/hubspot.css + * the Whitecap knob block in components-whitecap.css) so this standalone page * matches the theme's forms without depending on the theme's assets. * * Targets the DEVELOPER embed (`
`) — real in-page * HTML, so it's ours to style. Three layers: (1) KNOBS — semantic --hsform-* * custom properties; (2) BRIDGE — maps knobs onto HubSpot's native --hsf-* * API; (3) OVERRIDES — plain rules for what HubSpot exposes no var for. Theme * by turning knobs on a more-specific selector, never by editing the bridge. * * The form on this page sits on the black .frc-formband, so it uses the theme's * DARK treatment via the .form-section.form-section--dark wrapper in the * template. One FRC deviation from the theme: the submit stays seafoam-green * (see the "FRC — green submit" block) rather than the theme's white button. * * TOKEN DEPENDENCY: the var(--font-*/--color-*/--tracking-*) references below * resolve against the design tokens defined in this bundle's whitecap.css, * which is ed BEFORE this file in the template. That file is part of the * FRC bundle, so the page stays self-contained. (border-radius is a literal 0 — * there is no radius token.) */ /* ====================================================================== * 1 + 2. KNOBS & BRIDGE (portable core — verbatim from the theme) * ====================================================================== */ .hs-form-html { /* --- KNOBS: neutral standalone defaults (overridden below) --- */ --hsform-font: inherit; --hsform-font-size: 16px; --hsform-text-color: inherit; --hsform-row-gap: 1rem; --hsform-padding: 0; --hsform-label-color: #333333; --hsform-label-size: 0.9rem; --hsform-required-color: #828282; --hsform-field-bg: #ffffff; --hsform-field-color: #333333; --hsform-field-border: #cccccc; --hsform-field-border-focus: #333333; --hsform-field-border-width: 1px; --hsform-field-radius: 0; --hsform-field-padding: 0.5rem 1rem; --hsform-placeholder-color: #888888; --hsform-textarea-min-height: 7.5rem; --hsform-error-color: #d00000; --hsform-button-bg: #000000; --hsform-button-color: #ffffff; --hsform-button-hover-bg: #333333; --hsform-button-border: var(--hsform-button-bg); --hsform-button-font: inherit; --hsform-button-size: 1rem; --hsform-button-weight: 400; --hsform-button-radius: 0; --hsform-button-padding: 0.6rem 1.5rem; --hsform-button-transform: none; --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 (portable core) — for what HubSpot exposes no var for * ====================================================================== */ .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 { border-color: var(--hsform-field-border-focus) !important; outline: none; } .hs-form-html textarea, .hs-form-html .hsfc-TextareaInput { min-height: var(--hsform-textarea-min-height) !important; } .hs-form-html button[type="submit"], .hs-form-html input[type="submit"], .hs-form-html .hs-button, .hs-form-html .hsfc-Button { width: 100% !important; border: 2px 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; } .hs-form-html .hsfc-CheckboxFieldGroup__Options, .hs-form-html .hsfc-BooleanCheckboxFieldGroup__Options { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; gap: 0.5rem 2rem !important; } .hs-form-html .hsfc-CheckboxFieldGroup__Options > div { width: auto !important; flex-shrink: 0; } /* ====================================================================== * WHITECAP THEME — base knobs (from components-whitecap.css) * ====================================================================== * Points the portable knobs at this bundle's design tokens (whitecap.css). */ .hs-form-html { --hsform-font: var(--font-body); --hsform-font-size: var(--font-size-body); --hsform-text-color: var(--color-text-default); --hsform-label-color: var(--color-text-default); --hsform-label-size: var(--font-size-body); --hsform-required-color: var(--color-text-muted); --hsform-field-bg: var(--color-bg-page); --hsform-field-color: var(--color-text-default); --hsform-field-border: var(--color-border-form); --hsform-field-border-focus: var(--color-accent); --hsform-field-radius: 0; --hsform-field-padding: 0.75rem 1rem; /* ≈48px field height at 16px text */ --hsform-placeholder-color: var(--color-text-placeholder); --hsform-button-bg: var(--color-bg-inverse); --hsform-button-color: var(--color-text-on-dark); --hsform-button-hover-bg: var(--color-bg-inverse-hover); --hsform-button-font: var(--font-body); --hsform-button-size: var(--font-size-button); --hsform-button-weight: var(--font-weight-bold); --hsform-button-radius: 0; --hsform-button-padding: 1.125rem 1.875rem; /* ≈56px button height */ --hsform-button-transform: uppercase; --hsform-button-tracking: var(--tracking-button); } /* SHARED shape for the form-section context (from the theme's form CSS). */ .form-section .hs-form-html { --hsform-label-size: 16px; --hsform-field-bg: #ffffff; --hsform-field-color: var(--color-text-default); --hsform-field-border-focus: var(--color-bg-inverse-hover); --hsform-field-radius: 0; --hsform-field-padding: 12px 16px; --hsform-button-font: var(--font-body); --hsform-button-size: 12px; --hsform-button-weight: var(--font-weight-semibold); --hsform-button-radius: 0; --hsform-button-padding: 16px 32px; --hsform-button-transform: uppercase; --hsform-button-tracking: var(--tracking-uppercase); } /* DARK treatment — the FRC form sits on the black band. White labels/text, * white fields, #e0e0e0 borders. (Button color is re-overridden below.) */ .form-section--dark .hs-form-html { --hsform-label-color: var(--color-text-on-dark); --hsform-field-border: #e0e0e0; --hsform-text-color: var(--color-text-on-dark); --hsform-button-bg: var(--color-text-on-dark); --hsform-button-color: var(--color-text-default); --hsform-button-hover-bg: var(--color-bg-on-dark-hover); --hsform-button-border: var(--color-text-on-dark); } /* FRC — green submit. Deviation from the theme's white dark-band button: keep * the seafoam-green submit (green fill, white label, darker-green hover) that * FRC used before. Wins over the DARK block by source order; button SHAPE * (size/weight/tracking/padding from the shared block) is unchanged. */ .form-section--dark .hs-form-html { --hsform-button-bg: var(--color-accent); /* #5FA894 */ --hsform-button-color: var(--color-text-on-dark); /* #ffffff */ --hsform-button-hover-bg: #4e8e7b; /* darker green — no token */ --hsform-button-border: var(--color-accent); } /* ====================================================================== * RECAPTCHA + SUBMIT SPACING (portable core) * ====================================================================== * Hide the invisible-v2 reCAPTCHA badge WITHOUT reserving space and WITHOUT * breaking it: HubSpot renders it inline (a 256×60 in-flow box), so move it * off-screen (badge stays alive, token still mints) rather than display:none. */ .grecaptcha-badge { position: absolute !important; left: -9999px !important; } /* Collapse the reCAPTCHA row's reserved min-height (badge is off-screen above). */ .hs-form-html .hsfc-ReCaptchaV2 { min-height: 0 !important; } .hs-form-html .hsfc-Row:has(.hsfc-ReCaptchaV2) { margin: 0 !important; min-height: 0 !important; } /* Kill HubSpot's large default top margin on the submit's nav row so the button * sits flush under the last field. */ .hs-form-html .hsfc-NavigationRow { margin-top: 0 !important; } .hs-form-html .hsfc-NavigationRow__Buttons, .hs-form-html .hsfc-Button { margin-top: 0 !important; } /* ====================================================================== * FRC FORM FIXES (beyond the theme's form CSS) * ====================================================================== * This form uses checkbox AND radio groups; the theme's own forms use only * checkboxes, so its port never covered two things: */ /* 1. Checkbox/radio INPUTS as normal small square/circle controls. Without * this, HubSpot's field-input sizing stretches them into big elongated * boxes; here they're fixed 1rem native controls with a seafoam-green * check/dot (accent-color). */ .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: var(--color-accent); } /* 2. Lay radio options out inline-wrapped like the checkboxes (HubSpot stacks * them into a single column by default). The [class*="FieldGroup__Options"] * match covers every option-group container — …CheckboxFieldGroup__Options, * …RadioFieldGroup__Options, etc. — so it works regardless of the exact * HubSpot class name. (Re-affirms the checkbox rule in the core above.) */ .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; }