/* Settings */ /* Global colour tokens: approved brand scales */ :root { /* Charcoal */ --vg-charcoal-50: #FBFAFA; --vg-charcoal-100: #E5E4E4; --vg-charcoal-200: #BAB8B8; --vg-charcoal-300: #8F8C8C; --vg-charcoal-400: #656161; --vg-charcoal-500: #373333; --vg-charcoal-600: #2F2B2B; --vg-charcoal-700: #272424; --vg-charcoal-800: #211E1E; --vg-charcoal-900: #1A1818; --vg-charcoal-950: #171616; /* Melon */ --vg-melon-50: #FFF4F3; --vg-melon-100: #FFE7E5; --vg-melon-200: #FFCDCA; --vg-melon-300: #FFB2AF; --vg-melon-400: #FF9594; --vg-melon-500: #FF7678; --vg-melon-600: #C95054; --vg-melon-700: #993439; --vg-melon-800: #6D1C22; --vg-melon-900: #44080E; --vg-melon-950: #300206; /* Eggshell */ --vg-eggshell-50: #FBFAF9; --vg-eggshell-100: #FAF9F6; --vg-eggshell-200: #F8F6F2; --vg-eggshell-300: #F6F3ED; --vg-eggshell-400: #F4F0E9; --vg-eggshell-500: #F1EDE4; --vg-eggshell-600: #B2AFA7; --vg-eggshell-700: #7F7C76; --vg-eggshell-800: #514F4A; --vg-eggshell-900: #292724; --vg-eggshell-950: #171613; /* Navy */ --vg-navy-50: #F4F7FA; --vg-navy-100: #DCE4EC; --vg-navy-200: #A9B7C5; --vg-navy-300: #788B9E; --vg-navy-400: #475E75; --vg-navy-500: #142E47; --vg-navy-600: #10283E; --vg-navy-700: #0F2336; --vg-navy-800: #0E1E2E; --vg-navy-900: #0D1925; --vg-navy-950: #0D1721; } :root { /* HubSpot DND layout grid */ --hsElevate--column__gap: 2.13%; --hsElevate--column__widthMultiplier: 8.333; /* Sections */ --hsElevate--contentWrapper--narrow__maxWidth: 768px ; --hsElevate--contentWrapper--medium__maxWidth: 1120px ; --hsElevate--contentWrapper--wide__maxWidth: 1216px ; --hsElevate--section--extraSmall__verticalPadding: 48px ; --hsElevate--section--small__verticalPadding: 64px ; --hsElevate--section--medium__verticalPadding: 96px ; --hsElevate--section--large__verticalPadding: 128px ; --hsElevate--section--extraLarge__verticalPadding: 192px ; /* Default section left/right padding */ --hsElevate--section--horizontalPadding: 32px ; /* Gap - default gaps that could be easily leveraged in module styles via class names */ --hsElevate--gap--extraSmall: 16px ; --hsElevate--gap--small: 24px ; --hsElevate--gap--medium: 32px ; --hsElevate--gap--large: 64px ; --hsElevate--gap--extraLarge: 96px ; /* Spacing - default spacing values */ --hsElevate--spacing--4: 4px ; --hsElevate--spacing--8: 8px ; --hsElevate--spacing--12: 12px ; --hsElevate--spacing--16: 16px ; --hsElevate--spacing--20: 20px ; --hsElevate--spacing--24: 24px ; --hsElevate--spacing--32: 32px ; --hsElevate--spacing--40: 40px ; --hsElevate--spacing--48: 48px ; --hsElevate--spacing--56: 56px ; --hsElevate--spacing--64: 64px ; --hsElevate--spacing--72: 72px ; --hsElevate--spacing--80: 80px ; --hsElevate--spacing--88: 88px ; --hsElevate--spacing--96: 96px ; --hsElevate--spacing--104: 104px ; --hsElevate--spacing--112: 112px ; --hsElevate--spacing--120: 120px ; --hsElevate--spacing--128: 128px ; --hsElevate--spacing--136: 136px ; --hsElevate--spacing--144: 144px ; --hsElevate--spacing--152: 152px ; --hsElevate--spacing--160: 160px ; --hsElevate--spacing--168: 168px ; --hsElevate--spacing--176: 176px ; --hsElevate--spacing--184: 184px ; --hsElevate--spacing--192: 192px ; /* Grids */ --default-section-padding: var(--hsElevate--section--medium__verticalPadding) var(--hsElevate--section--horizontalPadding); --default-section-margin: 0; --default-section-max-width: var(--hsElevate--contentWrapper--wide__maxWidth); --default-container-padding: 0; --default-container-margin: 0; --default-container-gap: var(--hsElevate--gap--medium); --default-container-row-gap: var(--hsElevate--gap--medium); --default-container-column-gap: var(--hsElevate--gap--medium); --default-table-padding: 0; --default-table-margin: 0; --default-table-row-gap: var(--hsElevate--gap--medium); --default-table-column-gap: var(--hsElevate--gap--medium); } /* Wider content on large screens, as on Bastion (110rem wrapper minus 2rem side padding) */ @media (min-width: 96rem) { :root { --hsElevate--contentWrapper--wide__maxWidth: 1696px; } } :root { /* Text spacing */ --hsElevate--text--extraSmall__margin: 0 0.75rem; /* 12px */ --hsElevate--text--small__margin: 0 1.25rem; /* 20px */ --hsElevate--text__margin: 0 2rem; /* 32px */ --hsElevate--text--large__margin: 0 2.5rem; /* 40px */ --hsElevate--text--extraLarge__margin: 0 4rem; /* 64px */ /* Body */ --hsElevate--baseText__fontSize: 16px ; --hsElevate--body__font: Inter ; --hsElevate--body--small__fontSize: 0.889rem ; --hsElevate--body__fontSize: 1.0rem ; --hsElevate--body--large__fontSize: 1.333rem ; --hsElevate--body--extraLarge__fontSize: 1.777rem ; --hsElevate--body__fontWeight: normal ; --hsElevate--body__fontStyle: normal ; --hsElevate--body__lineHeight: 1.55; /* Primary links */ --hsElevate--link--primary__fontColor: #FF7678 ; --hsElevate--link--primary__textDecoration: none; --hsElevate--link--primary__textDecorationColor: transparent; /* Hover state */ --hsElevate--link--primary__hover--fontColor: #FF7678 ; --hsElevate--link--primary__hover--textDecoration: underline; --hsElevate--link--primary__hover--textDecorationColor: #FF7678 ; /* Secondary links */ --hsElevate--link--secondary__fontColor: #9BC8F2 ; --hsElevate--link--secondary__textDecoration: none; --hsElevate--link--secondary__textDecorationColor: transparent; /* Hover state */ --hsElevate--link--secondary__hover--fontColor: #9BC8F2 ; --hsElevate--link--secondary__hover--textDecoration: underline; --hsElevate--link--secondary__hover--textDecorationColor: #9BC8F2 ; /* Headings */ /* Percentage change for the heading font sizes on mobile */ --hsElevate--heading__tablet-modifier: 0.8; --hsElevate--heading__lineHeight: 1.2; --hsElevate--display1__font: Inter ; --hsElevate--display1__fontSize: 4.5rem; --hsElevate--display2__font: Inter ; --hsElevate--display2__fontSize: 3rem; --hsElevate--h1__font: Inter ; --hsElevate--h1__fontSize: 3.0rem ; --hsElevate--h1__fontWeight: 500 ; --hsElevate--h1__fontStyle: normal ; --hsElevate--h2__font: Inter ; --hsElevate--h2__fontSize: 2.25rem ; --hsElevate--h2__fontWeight: 500 ; --hsElevate--h2__fontStyle: normal ; --hsElevate--h3__font: Inter ; --hsElevate--h3__fontSize: 1.875rem ; --hsElevate--h3__fontWeight: 500 ; --hsElevate--h3__fontStyle: normal ; --hsElevate--h4__font: Inter ; --hsElevate--h4__fontSize: 1.5rem ; --hsElevate--h4__fontWeight: 500 ; --hsElevate--h4__fontStyle: normal ; --hsElevate--h5__font: Inter ; --hsElevate--h5__fontSize: 1.25rem ; --hsElevate--h5__fontWeight: 500 ; --hsElevate--h5__fontStyle: normal ; --hsElevate--h6__font: Inter ; --hsElevate--h6__fontSize: 1.0rem ; --hsElevate--h6__fontWeight: 500 ; --hsElevate--h6__fontStyle: normal ; /* Quotes */ --hsElevate--quotes__font: Inter ; --hsElevate--quotes__fontColor: ; --hsElevate--quotes__fontSize: 1.0rem ; --hsElevate--quotes__fontWeight: 400 ; --hsElevate--quotes__fontStyle: normal ; /* Captions */ --hsElevate--captions__font: Inter ; --hsElevate--captions__fontSize: 0.875rem ; --hsElevate--captions__fontWeight: 400 ; --hsElevate--captions__fontStyle: normal ; --hsElevate--captions__case: uppercase ; /* Images */ --hsElevate--rteImages__margin: 2rem; /* 32px */ } :root { /* Base colors */ --hsElevate--color--base--1: #FFFFFF ; --hsElevate--color--base--2: #FAFAFA ; --hsElevate--color--base--3: #171616 ; /* Accent colors */ --hsElevate--color--accent--1: #E9F2FC ; --hsElevate--color--accent--2: #9BC8F2 ; --hsElevate--color--accent--3: #FF7678 ; } :root { /* Primary button variables */ --hsElevate--button--primary__buttonFill: filled ; /* Primary button font */ --hsElevate--button--primary__font: Inter ; /* TODO: Look into why primary_button.text.size ~ primary_button.text.size_unit is not evaluating to the correct size_unit, but can still take in px */ --hsElevate--button--primary__fontSize: 1.0rem ; --hsElevate--button--primary__fontWeight: 500 ; --hsElevate--button--primary__fontStyle: normal ; /* Primary button text color */ --hsElevate--button--primary__textColor: #FAFAFA ; --hsElevate--button--primary__hover--textColor: #FAFAFA ; /* Primary button shape */ --hsElevate--button--primary__borderRadius: 8px; /* Primary button background color */ --hsElevate--button--primary__backgroundColor: #FF7678 ; --hsElevate--button--primary__hover--backgroundColor: #211E1E ; --hsElevate--button--primary__active--backgroundColor: #030000 ; /* Primary button border */ --hsElevate--button--primary__borderThickness: 0px ; --hsElevate--button--primary__hover--borderThickness: 0px ; /* Secondary button variables */ --hsElevate--button--secondary__buttonFill: filled ; /* Secondary button font */ --hsElevate--button--secondary__font: Inter ; --hsElevate--button--secondary__fontSize: 1.0rem ; --hsElevate--button--secondary__fontWeight: 500 ; --hsElevate--button--secondary__fontStyle: normal ; /* Secondary button text color */ --hsElevate--button--secondary__textColor: #171717 ; --hsElevate--button--secondary__hover--textColor: #171717 ; /* Secondary button shape */ --hsElevate--button--secondary__borderRadius: 8px; /* Secondary button background color */ --hsElevate--button--secondary__backgroundColor: #F5F5F5 ; --hsElevate--button--secondary__hover--backgroundColor: #E5E5E5 ; /* Secondary button border */ --hsElevate--button--secondary__borderThickness: 0px ; --hsElevate--button--secondary__hover--borderThickness: 0px ; /* Tertiary button variables */ --hsElevate--button--tertiary__buttonFill: filled ; /* Tertiary button font */ --hsElevate--button--tertiary__font: Inter ; --hsElevate--button--tertiary__fontSize: 1.0rem ; --hsElevate--button--tertiary__fontWeight: 500 ; --hsElevate--button--tertiary__fontStyle: normal ; /* Tertiary button text color */ --hsElevate--button--tertiary__textColor: #171616 ; --hsElevate--button--tertiary__hover--textColor: #171616 ; /* Tertiary button shape */ --hsElevate--button--tertiary__borderRadius: 8px; /* Tertiary button background color */ --hsElevate--button--tertiary__backgroundColor: #9BC8F2 ; --hsElevate--button--tertiary__hover--backgroundColor: #E9E5FF ; /* Tertiary button border */ --hsElevate--button--tertiary__borderThickness: 0px ; --hsElevate--button--tertiary__hover--borderThickness: 0px ; --hsElevate--button--tertiary__borderColor: transparent; --hsElevate--button--tertiary__hover--borderColor: transparent; /* Accent button variables */ --hsElevate--button--accent__buttonFill: no_fill ; /* Accent button font */ --hsElevate--button--accent__font: Inter ; --hsElevate--button--accent__fontSize: 1.0rem ; --hsElevate--button--accent__fontWeight: 500 ; --hsElevate--button--accent__fontStyle: normal ; /* Accent button text color */ --hsElevate--button--accent__textColor: #9BC8F2 ; --hsElevate--button--accent__hover--textColor: #E9E5FF ; /* Accent button shape */ --hsElevate--button--accent__borderRadius: 8px; /* Accent button background color */ --hsElevate--button--accent__backgroundColor: transparent; --hsElevate--button--accent__hover--backgroundColor: transparent; /* Accent button border */ --hsElevate--button--accent__borderThickness: 2px ; --hsElevate--button--accent__hover--borderThickness: 2px ; --hsElevate--button--accent__borderColor: #9BC8F2 ; --hsElevate--button--accent__hover--borderColor: #E9E5FF ; } :root { /* Shared field tokens (shadcn/ui style). Reused by v4 (.hsfc-*), legacy (.hs-form) and site inputs. */ --vg-field-height: 40px; --vg-field-padding: 8px 12px; --vg-field-font-size: 14px; --vg-field-radius: 6px; --vg-field-border: var(--vg-charcoal-100); --vg-field-bg: #fff; --vg-field-color: var(--vg-charcoal-500); --vg-field-placeholder: var(--vg-charcoal-300); --vg-field-muted: var(--vg-charcoal-400); --vg-field-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); --vg-field-focus: var(--vg-melon-500); --vg-field-ring: 0 0 0 3px color-mix(in srgb, var(--vg-melon-500) 30%, transparent); --vg-field-error: #de2828; --vg-field-error-ring: 0 0 0 3px color-mix(in srgb, var(--vg-field-error) 25%, transparent); --vg-field-gap: 16px; --vg-field-transition: color 150ms ease, border-color 150ms ease, box-shadow 150ms ease; --vg-field-check-size: 16px; --hsElevate--formField__backgroundColor: var(--vg-field-bg); --hsElevate--formField__borderRadius: var(--vg-field-radius); --hsElevate--formField__borderThickness: 1px; --hsElevate--formField__borderColor: var(--vg-field-border); --hsElevate--formField__borderTop: 1px solid var(--vg-field-border); --hsElevate--formField__borderRight: 1px solid var(--vg-field-border); --hsElevate--formField__borderBottom: 1px solid var(--vg-field-border); --hsElevate--formField__borderLeft: 1px solid var(--vg-field-border); --hsElevate--formFieldInput__textColor: var(--vg-field-color); --hsElevate--formField__marginBottom: 20px; --hsElevate--formFieldTextArea__borderRadius: var(--vg-field-radius); --hsElevate--formFieldCheckboxRadio__size: var(--vg-field-check-size); --hsElevate--formFieldCheckboxRadio__fillColor: var(--vg-melon-500); --hsElevate--formFieldPlaceholder__textColor: var(--vg-field-placeholder); --hsElevate--formRequired__color: var(--vg-field-error); /* Form field datepicker icon */ --hsElevate--formField__datepickerIcon: url("data:image/svg+xml,%3Csvg width='24' height='29' viewBox='0 0 24 29' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_3812_12272)'%3E%3Cpath d='M8.14286 2.07136C8.14286 1.35886 7.56964 0.785645 6.85714 0.785645C6.14464 0.785645 5.57143 1.35886 5.57143 2.07136V4.21422H3.42857C1.5375 4.21422 0 5.75172 0 7.64279V8.49993V11.0714V24.7856C0 26.6767 1.5375 28.2142 3.42857 28.2142H20.5714C22.4625 28.2142 24 26.6767 24 24.7856V11.0714V8.49993V7.64279C24 5.75172 22.4625 4.21422 20.5714 4.21422H18.4286V2.07136C18.4286 1.35886 17.8554 0.785645 17.1429 0.785645C16.4304 0.785645 15.8571 1.35886 15.8571 2.07136V4.21422H8.14286V2.07136ZM2.57143 11.0714H21.4286V24.7856C21.4286 25.2571 21.0429 25.6428 20.5714 25.6428H3.42857C2.95714 25.6428 2.57143 25.2571 2.57143 24.7856V11.0714Z' fill='%2309152B'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_3812_12272'%3E%3Crect width='24' height='27.4286' fill='white' transform='translate(0 0.785645)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A"); /* Form field select icon */ --hsElevate--formField__selectIcon: url("data:image/svg+xml,%3Csvg width='24' height='25' viewBox='0 0 24 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.9407 19.5595C11.5267 20.1454 12.4782 20.1454 13.0642 19.5595L22.0642 10.5595C22.6501 9.97354 22.6501 9.02197 22.0642 8.43604C21.4782 7.8501 20.5267 7.8501 19.9407 8.43604L12.0001 16.3767L4.05947 8.44072C3.47354 7.85478 2.52197 7.85478 1.93604 8.44072C1.3501 9.02666 1.3501 9.97822 1.93604 10.5642L10.936 19.5642L10.9407 19.5595Z' fill='%2309152B'/%3E%3C/svg%3E%0A"); /* Textarea drag icon */ --hsElevate--formField__dragIcon: url("data:image/svg+xml,%3Csvg width='11' height='12' viewBox='0 0 22 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline y1='-1' x2='29.5206' y2='-1' transform='matrix(-0.666795 0.745241 -0.806754 -0.590888 19.6843 0)' stroke='%23303F59' stroke-width='2'/%3E%3Cpath d='M21.0005 9.99756L10.5005 21.9976' stroke='%23303F59' stroke-width='2'/%3E%3C/svg%3E%0A"); /* Label text */ --hsElevate--formLabel__textColor: var(--vg-charcoal-500); --hsElevate--formLabel__font: inherit; --hsElevate--formLabel__fontSize: 14px; --hsElevate--formLabel__fontWeight: 500; --hsElevate--formLabel__marginBottom: 8px; /* Help text */ --hsElevate--formHelpText__textColor: var(--vg-field-muted); /* Form container: shadcn Card */ --hsElevate--form__backgroundColor: #fff; --hsElevate--form__borderRadius: 12px; --hsElevate--form__borderThickness: 1px; --hsElevate--form__borderColor: var(--vg-charcoal-100); --hsElevate--form__padding: 32px; --hsElevate--form__shadow: var(--vg-field-shadow); /* CSS variables for new forms */ /* Global vars */ --hsf-global__font-family: var(--hsElevate--formLabel__font); --hsf-global__font-size: var(--hsElevate--formLabel__fontSize); --hsf-field-input__font-size: var(--vg-field-font-size); --hsf-global__color: var(--hsElevate--formLabel__textColor); --hsf-global-error__color: var(--hsElevate--formRequired__color); /* Form */ --hsf-background__background-color: var(--hsElevate--form__backgroundColor); --hsf-background__padding: var(--hsElevate--form__padding); --hsf-background__border-style: solid; --hsf-background__border-color: var(--hsElevate--form__borderColor); --hsf-background__border-radius: var(--hsElevate--form__borderRadius); --hsf-background__border-width: var(--hsElevate--form__borderThickness); /* Content */ --hsf-heading__font-family: var(--hsf-global__font-family); --hsf-heading__color: var(--hsf-global__color); --hsf-heading__text-shadow: none; --hsf-richtext__font-family: var(--hsf-global__font-family); --hsf-richtext__font-size: var(--hsf-global__font-size); --hsf-richtext__color: var(--hsf-global__color); /* Labels */ --hsf-field-label__font-family: var(--hsf-global__font-family); --hsf-field-label__font-size: var(--hsf-global__font-size); --hsf-field-label__color: var(--hsf-global__color); --hsf-field-label-requiredindicator__color: var(--hsf-global-error__color); --hsf-module__vertical-spacing: var(--hsElevate--formLabel__marginBottom); /* Help text */ --hsf-field-description__font-family: var(--hsf-global__font-family); --hsf-field-description__color: var(--hsElevate--formHelpText__textColor); /* Errors */ --hsf-erroralert__font-family: var(--hsElevate--formLabel__font); --hsf-erroralert__color: var(--hsf-global-error__color); /* Field footer */ --hsf-field-footer__font-family: var(--hsf-field-description__font-family); --hsf-field-footer__color: var(--hsf-field-description__color); /* Field */ --hsf-field-input__font-family: var(--hsf-global__font-family); --hsf-field-input__background-color: var(--hsElevate--formField__backgroundColor); --hsf-field-input__placeholder-color: var(--hsElevate--formFieldPlaceholder__textColor); --hsf-field-input__border-color: var(--hsElevate--formField__borderColor); --hsf-field-input__border-width: var(--hsElevate--formField__borderThickness); --hsf-field-input__border-style: solid; --hsf-field-input__border-radius: var(--hsElevate--formField__borderRadius); --hsf-field-input__padding: var(--vg-field-padding); --hsf-field-input__color: var(--hsElevate--formFieldInput__textColor); --hsf-row__vertical-spacing: var(--hsElevate--formField__marginBottom); --hsf-row__horizontal-spacing: var(--vg-field-gap); /* Textarea */ --hsf-field-textarea__font-family: var(--hsf-field-input__font-family); --hsf-field-textarea__color: var(--hsf-field-input__color); --hsf-field-textarea__background-color: var(--hsf-field-input__background-color); --hsf-field-textarea__border-color: var(--hsf-field-input__border-color); --hsf-field-textarea__border-style: var(--hsf-field-input__border-style); --hsf-field-textarea__border-radius: var(--hsElevate--formFieldTextArea__borderRadius); --hsf-field-textarea__padding: var(--hsf-field-input__padding); /* Checkbox */ --hsf-field-checkbox__padding: calc(var(--hsElevate--formFieldCheckboxRadio__size) / 2 - 1px); --hsf-field-checkbox__background-color: var(--vg-field-bg); --hsf-field-checkbox__color: var(--hsElevate--formFieldCheckboxRadio__fillColor); --hsf-field-checkbox__border-color: var(--vg-charcoal-200); --hsf-field-checkbox__border-width: 1px 1px 1px 1px; --hsf-field-checkbox__border-style: var(--hsf-field-input__border-style); /* Radio */ --hsf-field-radio__padding: calc(var(--hsElevate--formFieldCheckboxRadio__size) / 2 - 1px); --hsf-field-radio__background-color: var(--vg-field-bg); --hsf-field-radio__color: var(--hsElevate--formFieldCheckboxRadio__fillColor); --hsf-field-radio__border-color: var(--vg-charcoal-200); --hsf-field-radio__border-width: 1px 1px 1px 1px; --hsf-field-radio__border-style: var(--hsf-field-input__border-style); /* Progress bar CSS vars: - --hsf-progressbar__font-family - --hsf-progressbar__font-family - --hsf-progressbar__font-size - --hsf-progressbar__color - --hsf-progressbar__background-color - --hsf-progressbar__background - --hsf-progressbar__border-color - --hsf-progressbar__border-style - --hsf-progressbar__border-width */ /* Button */ --hsf-button__width: 100%; --hsf-button__font-family: var(--hsElevate--button--primary__font); --hsf-button__font-size: 14px; --hsf-button__font-weight: 500; --hsf-button__color: var(--hsElevate--button--primary__textColor); --hsf-button__background-color: var(--hsElevate--button--primary__backgroundColor); --hsf-button__background-image: none; --hsf-button__border-radius: var(--vg-field-radius); --hsf-button__border-width: var(--hsElevate--button--primary__borderThickness); --hsf-button__border-style: solid; --hsf-button__border-color: var(--hsElevate--button--primary__borderColor); --hsf-button__padding: 8px 16px; --hsf-button__box-shadow: none; --hsf-button--hover__color: var(--hsElevate--button--primary__hover--textColor); --hsf-button--hover__background-color: var(--hsElevate--button--primary__hover--backgroundColor); --hsf-button--hover__border-color: var(--hsElevate--button--primary__hover--borderColor); --hsf-button--focus__color: var(--hsElevate--button--primary__hover--textColor); --hsf-button--focus__background-color: var(--hsElevate--button--primary__hover--backgroundColor); --hsf-button--focus__border-color: var(--hsElevate--button--primary__hover--borderColor); } @media (max-width: 640px) { :root { --hsElevate--form__padding: 24px; --vg-field-font-size: 16px; /* avoids iOS zoom on focus */ } } :root { /* Card variant 1 */ /* Shape */ --hsElevate--card--variant1__borderRadius: 4px; --hsElevate--card--variant1__iconBorderRadius: 12px; /* Border thickness */ --hsElevate--card--variant1__borderThickness: 1px ; /* Colors */ --hsElevate--card--variant1__backgroundColor: #FFFFFF ; --hsElevate--card--variant1__borderColor: #E5E5E5 ; --hsElevate--card--variant1__textColor: #171616 ; /* Links */ --hsElevate--card--variant1--link__fontColor: #FF7678 ; --hsElevate--card--variant1--link__textDecorationColor: transparent; /* Hover state */ --hsElevate--card--variant1--link__hover--fontColor: #FF7678 ; --hsElevate--card--variant1--link__hover--textDecoration: underline; --hsElevate--card--variant1--link__hover--textDecorationColor: #FF7678 ; /* Icon colors */ --hsElevate--card--variant1__iconColor: #FF7678 ; --hsElevate--card--variant1__iconBackgroundColor: var(--vg-eggshell-500); /* Card variant 2 */ /* Shape */ --hsElevate--card--variant2__borderRadius: 4px; --hsElevate--card--variant2__iconBorderRadius: 12px; /* Border thickness */ --hsElevate--card--variant2__borderThickness: 0px ; /* Colors */ --hsElevate--card--variant2__textColor: #171616 ; /* Links */ --hsElevate--card--variant2--link__fontColor: #FF7678 ; --hsElevate--card--variant2--link__textDecorationColor: transparent; /* Hover state */ --hsElevate--card--variant2--link__hover--fontColor: #FF7678 ; --hsElevate--card--variant2--link__hover--textDecoration: underline; --hsElevate--card--variant2--link__hover--textDecorationColor: #FF7678 ; /* Icon colors */ --hsElevate--card--variant2__iconColor: #FF7678 ; --hsElevate--card--variant2__iconBackgroundColor: var(--vg-eggshell-500); /* Card variant 3 */ /* Shape */ --hsElevate--card--variant3__borderRadius: 4px; --hsElevate--card--variant3__iconBorderRadius: 12px; /* Border thickness */ --hsElevate--card--variant3__borderThickness: 0px ; /* Colors */ --hsElevate--card--variant3__backgroundColor: #211E1E ; --hsElevate--card--variant3__textColor: #FFFFFF ; /* Links */ --hsElevate--card--variant3--link__fontColor: #9BC8F2 ; --hsElevate--card--variant3--link__textDecorationColor: transparent; /* Hover state */ --hsElevate--card--variant3--link__hover--fontColor: #9BC8F2 ; --hsElevate--card--variant3--link__hover--textDecoration: underline; --hsElevate--card--variant3--link__hover--textDecorationColor: #9BC8F2 ; /* Icon colors */ --hsElevate--card--variant3__iconColor: #9BC8F2 ; --hsElevate--card--variant3__iconBackgroundColor: var(--vg-eggshell-500); /* Card variant 4 */ /* Shape */ --hsElevate--card--variant4__borderRadius: 4px; --hsElevate--card--variant4__iconBorderRadius: 12px; /* Border thickness */ --hsElevate--card--variant4__borderThickness: 0px ; /* Colors */ --hsElevate--card--variant4__backgroundColor: #1A1818 ; --hsElevate--card--variant4__textColor: #FAFAFA ; /* Links */ --hsElevate--card--variant4--link__fontColor: #9BC8F2 ; --hsElevate--card--variant4--link__textDecorationColor: transparent; /* Hover state */ --hsElevate--card--variant4--link__hover--fontColor: #9BC8F2 ; --hsElevate--card--variant4--link__hover--textDecoration: underline; --hsElevate--card--variant4--link__hover--textDecorationColor: #9BC8F2 ; /* Icon colors */ --hsElevate--card--variant4__iconColor: #9BC8F2 ; --hsElevate--card--variant4__iconBackgroundColor: var(--vg-eggshell-500); } :root { /* Light section 1 */ --hsElevate--section--lightSection--1__backgroundColor: #FFFFFF ; --hsElevate--section--lightSection--1__textColor: #171616 ; --hsElevate--section--lightSection--1__accentColor: #FF7678 ; --hsElevate--section--lightSection--1__captionColor: #525252 ; --hsElevate--section--lightSection--1--blockquote__textColor: #171616 ; --hsElevate--section--lightSection--1--blockquote__backgroundColor: #FAFAFA ; --hsElevate--section--lightSection--1--blockquote__accentColor: #FF7678 ; --hsElevate--section--lightSection--1--link__fontColor: #FF7678 ; --hsElevate--section--lightSection--1--link__textDecoration: none; --hsElevate--section--lightSection--1--link__textDecorationColor: transparent; /* Hover state */ --hsElevate--section--lightSection--1--link__hover--fontColor: #FF7678 ; --hsElevate--section--lightSection--1--link__hover--textDecoration: underline; --hsElevate--section--lightSection--1--link__hover--textDecorationColor: #FF7678 ; /* Light section 2 */ --hsElevate--section--lightSection--2__backgroundColor: #FAFAFA ; --hsElevate--section--lightSection--2__textColor: #171616 ; --hsElevate--section--lightSection--2__accentColor: #FF7678 ; --hsElevate--section--lightSection--2__captionColor: #525252 ; --hsElevate--section--lightSection--2--blockquote__textColor: #171616 ; --hsElevate--section--lightSection--2--blockquote__backgroundColor: #FAFAFA ; --hsElevate--section--lightSection--2--blockquote__accentColor: #FF7678 ; --hsElevate--section--lightSection--2--link__fontColor: #FF7678 ; --hsElevate--section--lightSection--2--link__textDecoration: none; --hsElevate--section--lightSection--2--link__textDecorationColor: transparent; /* Hover state */ --hsElevate--section--lightSection--2--link__hover--fontColor: #FF7678 ; --hsElevate--section--lightSection--2--link__hover--textDecoration: underline; --hsElevate--section--lightSection--2--link__hover--textDecorationColor: #FF7678 ; /* Light section 3 */ --hsElevate--section--lightSection--3__backgroundColor: #E9F2FC ; --hsElevate--section--lightSection--3__textColor: #171616 ; --hsElevate--section--lightSection--3__accentColor: #FF7678 ; --hsElevate--section--lightSection--3__captionColor: #525252 ; --hsElevate--section--lightSection--3--blockquote__textColor: #171616 ; --hsElevate--section--lightSection--3--blockquote__backgroundColor: #E9F2FC ; --hsElevate--section--lightSection--3--blockquote__accentColor: #FF7678 ; --hsElevate--section--lightSection--3--link__fontColor: #FF7678 ; --hsElevate--section--lightSection--3--link__textDecoration: none; --hsElevate--section--lightSection--3--link__textDecorationColor: transparent; /* Hover state */ --hsElevate--section--lightSection--3--link__hover--fontColor: #FF7678 ; --hsElevate--section--lightSection--3--link__hover--textDecoration: underline; --hsElevate--section--lightSection--3--link__hover--textDecorationColor: #FF7678 ; /* Dark section 1 */ --hsElevate--section--darkSection--1__backgroundColor: #171616 ; --hsElevate--section--darkSection--1__textColor: #FAFAFA ; --hsElevate--section--darkSection--1__accentColor: #9BC8F2 ; --hsElevate--section--darkSection--1__captionColor: #A1A1A1 ; --hsElevate--section--darkSection--1--blockquote__textColor: #FAFAFA ; --hsElevate--section--darkSection--1--blockquote__backgroundColor: #1A1818 ; --hsElevate--section--darkSection--1--blockquote__accentColor: #9BC8F2 ; --hsElevate--section--darkSection--1--link__fontColor: #9BC8F2 ; --hsElevate--section--darkSection--1--link__textDecoration: none; --hsElevate--section--darkSection--1--link__textDecorationColor: transparent; /* Hover state */ --hsElevate--section--darkSection--1--link__hover--fontColor: #9BC8F2 ; --hsElevate--section--darkSection--1--link__hover--textDecoration: underline; --hsElevate--section--darkSection--1--link__hover--textDecorationColor: #9BC8F2 ; } :root { /* Font */ --hsElevate--tag__font: Inter ; --hsElevate--tag__fontColor: ; --hsElevate--tag__fontSize: 0.875rem ; --hsElevate--tag__fontWeight: 500 ; --hsElevate--tag__fontStyle: normal ; /* Text colors */ --hsElevate--tag__textColor: #063E95 ; /* Background colors */ --hsElevate--tag__backgroundColor: #E5F0FF ; /* Shape */ /* Border thickness */ --hsElevate--tag__borderThickness: 1px ; --hsElevate--tag__borderColor: #E5F0FF ; /* Case */ --hsElevate--tag__case: none ; } :root { /* Border radius based on shape */ --hsElevate-sharp: 0; --hsElevate-rounded--extra-small: 4px; --hsElevate-rounded--small: 8px; --hsElevate-rounded: 16px; --hsElevate-rounded--large: 24px; --hsElevate-rounded--extra-large: 32px; --hsElevate-circle: 50%; } :root { --hsElevate--icon--small__size: 16px; --hsElevate--icon--medium__size: 24px; --hsElevate--icon--large__size: 32px; } /* Generic */ *, *:before, *:after { box-sizing: border-box; } /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ /* Document ========================================================================== */ /** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font size after orientation changes in iOS. */ html { line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ } /* Sections ========================================================================== */ /** * Remove the margin in all browsers. */ body { margin: 0; overflow-x: hidden; } /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; margin: 0.67em 0; } /* Grouping content ========================================================================== */ /** * Add the correct box sizing in Firefox. */ hr { box-sizing: content-box; height: 0; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /* Text-level semantics ========================================================================== */ /** * 1. Remove the bottom border in Chrome 57- * 2. Add the correct text decoration in Chrome, Edge, Opera, and Safari. */ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ -webkit-text-decoration: underline dotted; text-decoration: underline dotted; /* 2 */ } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * Add the correct font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* Forms ========================================================================== */ /** * 1. Change the font styles in all browsers. * 2. Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ } /** * Remove the inheritance of text transform in Edge and Firefox. * 1. Remove the inheritance of text transform in Firefox. */ button, select { text-transform: none; } /** * Correct the inability to style clickable types in iOS and Safari. */ button, [type='button'], [type='reset'], [type='submit'] { -webkit-appearance: button; } /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [type='button']::-moz-focus-inner, [type='reset']::-moz-focus-inner, [type='submit']::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, [type='button']:-moz-focusring, [type='reset']:-moz-focusring, [type='submit']:-moz-focusring { outline: 1px dotted ButtonText; } /** * Correct the padding in Firefox. */ fieldset { padding: 0.35em 0.75em 0.625em; } /** * Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers. */ legend { padding: 0; } /** * Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { vertical-align: baseline; } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type='number']::-webkit-inner-spin-button, [type='number']::-webkit-outer-spin-button { height: auto; } /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ [type='search'] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** * Remove the inner padding in Chrome and Safari on macOS. */ [type='search']::-webkit-search-decoration { -webkit-appearance: none; } /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Interactive ========================================================================== */ /* * Add the correct display in Edge and Firefox. */ details { display: block; } /* * Add the correct display in all browsers. */ summary { display: list-item; } /* Objects */ .dnd-section { padding: var(--hsElevate--section--medium__verticalPadding) var(--hsElevate--section--horizontalPadding); } .dnd-section > .row-fluid, .hs-elevate-content-wrapper { margin: 0 auto; max-width: var(--hsElevate--contentWrapper--wide__maxWidth); } .hs-elevate-content-wrapper { padding: 0 var(--hsElevate--section--horizontalPadding); } /* Helper Classes */ .hs-elevate-content-wrapper--sm { max-width: var(--hsElevate--contentWrapper--narrow__maxWidth); padding: 0; } .hs-elevate-content-wrapper--md { max-width: var(--hsElevate--contentWrapper--medium__maxWidth); padding: 0; } /* Padding for non DND sections */ .hs-elevate-content-padding { padding-block: var(--hsElevate--section--medium__verticalPadding); } .hs-elevate-content-padding--extra-small { padding-block: var( --hsElevate--section--extraSmall__verticalPadding); } .hs-elevate-content-padding--small { padding-block: var(--hsElevate--section--small__verticalPadding); } .hs-elevate-content-padding--large { padding-block: var(--hsElevate--section--large__verticalPadding); } .hs-elevate-content-padding--extra-large { padding-block: var(--hsElevate--section--extraLarge__verticalPadding); } .row-fluid { display: flex; flex-wrap: wrap; width: 100%; } .row-fluid .span1, .row-fluid .span2, .row-fluid .span3, .row-fluid .span4, .row-fluid .span5, .row-fluid .span6, .row-fluid .span7, .row-fluid .span8, .row-fluid .span9, .row-fluid .span10, .row-fluid .span11, .row-fluid .span12 { min-height: 1px; width: 100%; } @media (min-width: 768px) { .row-fluid { flex-wrap: nowrap; justify-content: space-between; } .row-fluid .span1 { width: calc( var(--hsElevate--column__widthMultiplier) * 1% * 1 - var(--hsElevate--column__gap) * var(--hsElevate--column__widthMultiplier) * 11 / 100 ); } .row-fluid .span2 { width: calc( var(--hsElevate--column__widthMultiplier) * 1% * 2 - var(--hsElevate--column__gap) * var(--hsElevate--column__widthMultiplier) * 10 / 100 ); } .row-fluid .span3 { width: calc( var(--hsElevate--column__widthMultiplier) * 1% * 3 - var(--hsElevate--column__gap) * var(--hsElevate--column__widthMultiplier) * 9 / 100 ); } .row-fluid .span4 { width: calc( var(--hsElevate--column__widthMultiplier) * 1% * 4 - var(--hsElevate--column__gap) * var(--hsElevate--column__widthMultiplier) * 8 / 100 ); } .row-fluid .span5 { width: calc( var(--hsElevate--column__widthMultiplier) * 1% * 5 - var(--hsElevate--column__gap) * var(--hsElevate--column__widthMultiplier) * 7 / 100 ); } .row-fluid .span6 { width: calc( var(--hsElevate--column__widthMultiplier) * 1% * 6 - var(--hsElevate--column__gap) * var(--hsElevate--column__widthMultiplier) * 6 / 100 ); } .row-fluid .span7 { width: calc( var(--hsElevate--column__widthMultiplier) * 1% * 7 - var(--hsElevate--column__gap) * var(--hsElevate--column__widthMultiplier) * 5 / 100 ); } .row-fluid .span8 { width: calc( var(--hsElevate--column__widthMultiplier) * 1% * 8 - var(--hsElevate--column__gap) * var(--hsElevate--column__widthMultiplier) * 4 / 100 ); } .row-fluid .span9 { width: calc( var(--hsElevate--column__widthMultiplier) * 1% * 9 - var(--hsElevate--column__gap) * var(--hsElevate--column__widthMultiplier) * 3 / 100 ); } .row-fluid .span10 { width: calc( var(--hsElevate--column__widthMultiplier) * 1% * 10 - var(--hsElevate--column__gap) * var(--hsElevate--column__widthMultiplier) * 2 / 100 ); } .row-fluid .span11 { width: calc( var(--hsElevate--column__widthMultiplier) * 1% * 11 - var(--hsElevate--column__gap) * var(--hsElevate--column__widthMultiplier) * 1 / 100 ); } } /* Elements */ html { font-size: var(--hsElevate--baseText__fontSize); } body { background-color: var(--hsElevate--section--lightSection--1__backgroundColor); color: var(--hsElevate--section--lightSection--1__textColor); font-family: var(--hsElevate--body__font); font-size: var(--hsElevate--body__fontSize); font-style: var(--hsElevate--body__fontStyle); font-weight: var(--hsElevate--body__fontWeight); line-height: var(--hsElevate--body__lineHeight); overflow-wrap: break-word; } html[lang^='ja'] body, html[lang^='zh'] body, html[lang^='ko'] body { line-break: strict; overflow-wrap: normal; word-break: break-all; } /* Paragraphs */ p { margin-block: var(--hsElevate--text__margin); } a:not(.hs-elevate-button, .hs-elevate-blog-listing__pagination-link, .hs-elevate-card--blog__link), a.hs-elevate-link--primary, .hs-elevate-link--primary a { color: var(--hsElevate--link--primary__fontColor); cursor: pointer; -webkit-text-decoration: var(--hsElevate--link--primary__textDecoration); text-decoration: var(--hsElevate--link--primary__textDecoration); text-decoration-color: var(--hsElevate--link--primary__textDecorationColor); } a:not(.hs-elevate-button, .hs-elevate-blog-listing__pagination-link, .hs-elevate-card--blog__link):hover, a:not(.hs-elevate-button, .hs-elevate-blog-listing__pagination-link, .hs-elevate-card--blog__link):focus, a.hs-elevate-link--primary:hover, .hs-elevate-link--primary a:hover, a.hs-elevate-link--primary:focus, .hs-elevate-link--primary a:focus { color: var(--hsElevate--link--primary__hover--fontColor); -webkit-text-decoration: var(--hsElevate--link--primary__hover--textDecoration); text-decoration: var(--hsElevate--link--primary__hover--textDecoration); text-decoration-color: var(--hsElevate--link--primary__hover--textDecorationColor); } a.hs-elevate-link--secondary, .hs-elevate-link--secondary a { color: var(--hsElevate--link--secondary__fontColor); cursor: pointer; -webkit-text-decoration: var(--hsElevate--link--secondary__textDecoration); text-decoration: var(--hsElevate--link--secondary__textDecoration); text-decoration-color: var(--hsElevate--link--secondary__textDecorationColor); } a.hs-elevate-link--secondary:hover, .hs-elevate-link--secondary a:hover a.hs-elevate-link--secondary:focus, .hs-elevate-link--secondary a:focus { color: var(--hsElevate--link--secondary__hover--fontColor); -webkit-text-decoration: var(--hsElevate--link--secondary__hover--textDecoration); text-decoration: var(--hsElevate--link--secondary__hover--textDecoration); text-decoration-color: var(--hsElevate--link--secondary__hover--textDecorationColor); } /* Rich text content links: melon accent, scoped away from nav, footer and component links */ :is(.hs_cos_wrapper_type_rich_text, .hs_cos_wrapper_type_inline_richtext_field) a:not(.hs-elevate-button, .hs-elevate-blog-listing__pagination-link, .hs-elevate-card--blog__link, .hs-elevate-link--secondary) { color: var(--vg-melon-500); } :is(.hs_cos_wrapper_type_rich_text, .hs_cos_wrapper_type_inline_richtext_field) a:not(.hs-elevate-button, .hs-elevate-blog-listing__pagination-link, .hs-elevate-card--blog__link, .hs-elevate-link--secondary):hover, :is(.hs_cos_wrapper_type_rich_text, .hs_cos_wrapper_type_inline_richtext_field) a:not(.hs-elevate-button, .hs-elevate-blog-listing__pagination-link, .hs-elevate-card--blog__link, .hs-elevate-link--secondary):focus { color: var(--vg-melon-600); } /* Headings */ h1, h2, h3, h4, h5, h6, .hs-elevate-display-1, .hs-elevate-display-2 { line-height: var(--hsElevate--heading__lineHeight); margin-block: var(--hsElevate--text__margin); } .hs-elevate-display-1 { font-family: var(--hsElevate--display1__font); font-size: calc(var(--hsElevate--display1__fontSize) * var(--hsElevate--heading__tablet-modifier)); font-style: normal; font-weight: 200; } .hs-elevate-display-2 { font-family: var(--hsElevate--display2__font); font-size: calc(var(--hsElevate--display2__fontSize) * var(--hsElevate--heading__tablet-modifier)); font-style: normal; font-weight: 200; } h1, .hs-elevate-h1 { font-family: var(--hsElevate--h1__font); font-size: calc(var(--hsElevate--h1__fontSize) * var(--hsElevate--heading__tablet-modifier)); font-style: var(--hsElevate--h1__fontStyle); font-weight: var(--hsElevate--h1__fontWeight); } h2, .hs-elevate-h2 { font-family: var(--hsElevate--h2__font); font-size: calc(var(--hsElevate--h2__fontSize) * var(--hsElevate--heading__tablet-modifier)); font-style: var(--hsElevate--h2__fontStyle); font-weight: var(--hsElevate--h2__fontWeight); } h3, .hs-elevate-h3 { font-family: var(--hsElevate--h3__font); font-size: calc(var(--hsElevate--h3__fontSize) * var(--hsElevate--heading__tablet-modifier)); font-style: var(--hsElevate--h3__fontStyle); font-weight: var(--hsElevate--h3__fontWeight); } h4, .hs-elevate-h4 { font-family: var(--hsElevate--h4__font); font-size: calc(var(--hsElevate--h4__fontSize) * var(--hsElevate--heading__tablet-modifier)); font-style: var(--hsElevate--h4__fontStyle); font-weight: var(--hsElevate--h4__fontWeight); } h5, .hs-elevate-h5 { font-family: var(--hsElevate--h5__font); font-size: calc(var(--hsElevate--h5__fontSize) * var(--hsElevate--heading__tablet-modifier)); font-style: var(--hsElevate--h5__fontStyle); font-weight: var(--hsElevate--h5__fontWeight); } h6, .hs-elevate-h6 { font-family: var(--hsElevate--h6__font); font-size: calc(var(--hsElevate--h6__fontSize) * var(--hsElevate--heading__tablet-modifier)); font-style: var(--hsElevate--h6__fontStyle); font-weight: var(--hsElevate--h6__fontWeight); } @media (min-width: 767px) { .hs-elevate-display-1 { font-size: var(--hsElevate--display1__fontSize); } .hs-elevate-display-2 { font-size: var(--hsElevate--display2__fontSize); } h1, .hs-elevate-h1 { font-size: var(--hsElevate--h1__fontSize); } h2, .hs-elevate-h2 { font-size: var(--hsElevate--h2__fontSize); } h3, .hs-elevate-h3 { font-size: var(--hsElevate--h3__fontSize); } h4, .hs-elevate-h4 { font-size: var(--hsElevate--h4__fontSize); } h5, .hs-elevate-h5 { font-size: var(--hsElevate--h5__fontSize); } h6, .hs-elevate-h6 { font-size: var(--hsElevate--h6__fontSize); } } /* Lists */ ul, ol { margin-block: var(--hsElevate--text__margin); } /* List markers (bullets and numbers) use the melon accent; lists with list-style: none have no marker */ ul li::marker, ol li::marker { color: var(--vg-melon-500); } /* Blockquotes */ blockquote { padding: var(--hsElevate--spacing--24, 24px); border-radius: var(--hsElevate-rounded--extra-small); border-left: 3px solid var(--hsElevate--blockquote__accentColor, var(--hsElevate--section--lightSection--1--blockquote__accentColor)); background-color: var(--hsElevate--blockquote__backgroundColor, var(--hsElevate--section--lightSection--1--blockquote__backgroundColor)); color: var(--hsElevate--blockquote__fontColor, var(--hsElevate--section--lightSection--1--blockquote__textColor)); font-family: var(--hsElevate--quotes__font); font-size: var(--hsElevate--quotes__fontSize); font-style: var(--hsElevate--quotes__fontStyle); font-weight: var(--hsElevate--quotes__fontWeight); margin-block: var(--hsElevate--text__margin); } :is(.hs_cos_wrapper_type_rich_text, .hs_cos_wrapper_type_inline_richtext_field) blockquote { padding: var(--hsElevate--spacing--24, 24px); border-radius: var(--hsElevate-rounded--extra-small); border-left: 3px solid var(--hsElevate--blockquote__accentColor, var(--hsElevate--section--lightSection--1--blockquote__accentColor)); background-color: var(--hsElevate--blockquote__backgroundColor, var(--hsElevate--section--lightSection--1--blockquote__backgroundColor)); color: var(--hsElevate--blockquote__fontColor, var(--hsElevate--section--lightSection--1--blockquote__textColor)); font-family: var(--hsElevate--quotes__font); font-size: var(--hsElevate--quotes__fontSize); font-style: var(--hsElevate--quotes__fontStyle); font-weight: var(--hsElevate--quotes__fontWeight); margin-block: var(--hsElevate--text__margin); } @media (max-width: 767.98px) { :is(.hs_cos_wrapper_type_rich_text, .hs_cos_wrapper_type_inline_richtext_field) blockquote { font-size: calc(var(--hsElevate--body__fontSize) + 4px); margin-inline: 0; } } /* Balanced line breaks for headings, display headers and eyebrows, site wide */ h1, h2, h3, h4, h5, h6, .hs-elevate-display-1, .hs-elevate-display-2, .hs-elevate-h1, .hs-elevate-h2, .hs-elevate-h3, .hs-elevate-h4, .hs-elevate-h5, .hs-elevate-h6, .hs-elevate-caption { text-wrap: balance; } /* Display headers: a

carrying a heading class, so the eyebrow can hold the h tag */ p.hs-elevate-h1, p.hs-elevate-h2, p.hs-elevate-h3, p.hs-elevate-h4, p.hs-elevate-h5, p.hs-elevate-h6 { line-height: var(--hsElevate--heading__lineHeight); margin-block: var(--hsElevate--text__margin); } /* Captions */ /* An eyebrow that holds the h tag keeps paragraph rhythm */ :is(h1, h2, h3, h4, h5, h6).hs-elevate-caption { line-height: var(--hsElevate--body__lineHeight); margin-block: var(--hsElevate--text__margin); } .hs-elevate-caption { color: var(--hsElevate--captions__fontColor, var(--hsElevate--section--lightSection--1--captionColor)); font-family: var(--hsElevate--captions__font); font-size: var(--hsElevate--captions__fontSize); font-style: var(--hsElevate--captions__fontStyle); font-weight: var(--hsElevate--captions__fontWeight); text-transform: var(--hsElevate--captions__case); } /* Tags */ .hs-elevate-tag { padding: 2px 8px; border-color: var(--hsElevate--tag__borderColor); border-radius: var(--hsElevate--tag__borderRadius); border-style: solid; border-width: var(--hsElevate--tag__borderThickness); background-color: var(--hsElevate--tag__backgroundColor); color: var(--hsElevate--tag__textColor); font-family: var(--hsElevate--tag__font); font-size: var(--hsElevate--tag__fontSize); font-style: var(--hsElevate--tag__fontStyle); font-weight: var(--hsElevate--tag__fontWeight); text-transform: var(--hsElevate--tag__case); } /* Images in rich text */ :is(.hs_cos_wrapper_type_rich_text, .hs_cos_wrapper_type_inline_richtext_field) img { max-width: 100%; margin-block-end: var(--hsElevate--rteImages__margin); } /* Tighter tracking on headings, matching the Bastion design system */ .hs-elevate-display-1, .hs-elevate-display-2, .hs-elevate-h1, .hs-elevate-h2, .hs-elevate-h3, .hs-elevate-h4, .hs-elevate-h5, .hs-elevate-h6 { letter-spacing: -0.025em; } /* Every CTA is clickable: links and buttons in the button container, and all button variants */ .hs-elevate-button, [class*="hs-elevate-button--"], .hs-elevate-button-container :is(a, button) { cursor: pointer; } .hs-elevate-button:is(:disabled, [aria-disabled="true"]) { cursor: not-allowed; } .hs-elevate-button:focus { outline: 2px solid #53ACFF; outline-offset: 2px; } .hs-elevate-button--primary { font-family: var(--hsElevate--button--primary__font); font-size: var(--hsElevate--button--primary__fontSize); font-weight: var(--hsElevate--button--primary__fontWeight); font-style: var(--hsElevate--button--primary__fontStyle); color: #fff; border-width: var(--hsElevate--button--primary__borderThickness); background-color: var(--vg-melon-500); border-style: solid; border-color: var(--vg-melon-500); border-radius: var(--hsElevate--button--primary__borderRadius); text-decoration: none; } .hs-elevate-button--primary:hover { color: #fff; background-color: var(--vg-melon-400); border-color: var(--vg-melon-400); border-width: var(--hsElevate--button--primary__hover--borderThickness); text-decoration: none; } .hs-elevate-button--primary:active { color: #fff; background-color: var(--vg-melon-400); border-color: var(--vg-melon-400); border-width: var(--hsElevate--button--primary__hover--borderThickness); text-decoration: none; } .hs-elevate-button--secondary { font-family: var(--hsElevate--button--secondary__font); font-size: var(--hsElevate--button--secondary__fontSize); font-weight: var(--hsElevate--button--secondary__fontWeight); font-style: var(--hsElevate--button--secondary__fontStyle); color: var(--hsElevate--button--secondary__textColor); border-width: var(--hsElevate--button--secondary__borderThickness); background-color: var(--hsElevate--button--secondary__backgroundColor); border-style: solid; border-color: var(--hsElevate--button--secondary__borderColor); border-radius: var(--hsElevate--button--secondary__borderRadius); text-decoration: none; } .hs-elevate-button--secondary:hover { color: var(--hsElevate--button--secondary__hover--textColor); background-color: var(--hsElevate--button--secondary__hover--backgroundColor); border-color: var(--hsElevate--button--secondary__hover--borderColor); border-width: var(--hsElevate--button--secondary__hover--borderThickness); text-decoration: none; } .hs-elevate-button--secondary:active { color: var(--hsElevate--button--secondary__hover--textColor); background-color: #c7c7c7 ; border-color: transparent ; border-width: var(--hsElevate--button--secondary__hover--borderThickness); text-decoration: none; } .hs-elevate-button--tertiary { font-family: var(--hsElevate--button--tertiary__font); font-size: var(--hsElevate--button--tertiary__fontSize); font-weight: var(--hsElevate--button--tertiary__fontWeight); font-style: var(--hsElevate--button--tertiary__fontStyle); color: var(--hsElevate--button--tertiary__textColor); border-width: var(--hsElevate--button--tertiary__borderThickness); background-color: var(--hsElevate--button--tertiary__backgroundColor); border-style: solid; border-color: var(--hsElevate--button--tertiary__borderColor); border-radius: var(--hsElevate--button--tertiary__borderRadius); text-decoration: none; } .hs-elevate-button--tertiary:hover { color: var(--hsElevate--button--tertiary__hover--textColor); background-color: var(--hsElevate--button--tertiary__hover--backgroundColor); border-color: var(--hsElevate--button--tertiary__hover--borderColor); border-width: var(--hsElevate--button--tertiary__hover--borderThickness); text-decoration: none; } .hs-elevate-button--tertiary:active { color: var(--hsElevate--button--tertiary__hover--textColor); background-color: #cbc7e1 ; border-color: ; border-width: var(--hsElevate--button--tertiary__hover--borderThickness); text-decoration: none; } .hs-elevate-button--accent { font-family: var(--hsElevate--button--accent__font); font-size: var(--hsElevate--button--accent__fontSize); font-weight: var(--hsElevate--button--accent__fontWeight); font-style: var(--hsElevate--button--accent__fontStyle); color: var(--hsElevate--button--accent__textColor); border-width: var(--hsElevate--button--accent__borderThickness); background-color: var(--hsElevate--button--accent__backgroundColor); border-style: solid; border-color: var(--hsElevate--button--accent__borderColor); border-radius: var(--hsElevate--button--accent__borderRadius); text-decoration: none; } .hs-elevate-button--accent:hover { color: var(--hsElevate--button--accent__hover--textColor); background-color: var(--hsElevate--button--accent__hover--backgroundColor); border-color: var(--hsElevate--button--accent__hover--borderColor); border-width: var(--hsElevate--button--accent__hover--borderThickness); text-decoration: none; } .hs-elevate-button--accent:active { color: var(--hsElevate--button--accent__hover--textColor); background-color: ; border-color: #cbc7e1 ; border-width: var(--hsElevate--button--accent__hover--borderThickness); text-decoration: none; } /* Every CTA fills melon-500 on hover, whatever the variant */ .hs-elevate-button--primary:is(:hover, :active), .hs-elevate-button--secondary:is(:hover, :active), .hs-elevate-button--tertiary:is(:hover, :active), .hs-elevate-button--accent:is(:hover, :active) { color: #fff; background-color: var(--vg-melon-500); border-color: var(--vg-melon-500); } .hs-elevate-card--variant-1 { border-color: var(--hsElevate--card--variant1__borderColor); border-radius: var(--hsElevate--card--variant1__borderRadius); border-style: solid; border-width: var(--hsElevate--card--variant1__borderThickness); background-color: var(--hsElevate--card--variant1__backgroundColor); color: var(--hsElevate--card--variant1__textColor); } .hs-elevate-card--variant-1 a:not(.hs-elevate-button, .hs-elevate-blog-listing__pagination-link, .hs-elevate-card--blog__link) { color: var(--hsElevate--card--variant1--link__fontColor); -webkit-text-decoration: var(--hsElevate--card--variant1--link__textDecoration); text-decoration: var(--hsElevate--card--variant1--link__textDecoration); text-decoration-color: var(--hsElevate--card--variant1--link__textDecorationColor); } .hs-elevate-card--variant-1 a:not(.hs-elevate-button, .hs-elevate-blog-listing__pagination-link, .hs-elevate-card--blog__link):hover, .hs-elevate-card--variant-1 a:not(.hs-elevate-button, .hs-elevate-blog-listing__pagination-link, .hs-elevate-card--blog__link):focus { color: var(--hsElevate--card--variant1--link__hover--fontColor); -webkit-text-decoration: var(--hsElevate--card--variant1--link__hover--textDecoration); text-decoration: var(--hsElevate--card--variant1--link__hover--textDecoration); text-decoration-color: var(--hsElevate--card--variant1--link__hover--textDecorationColor); } .hs-elevate-card--variant-2 { border-color: var(--hsElevate--card--variant2__borderColor); border-radius: var(--hsElevate--card--variant2__borderRadius); border-style: solid; border-width: var(--hsElevate--card--variant2__borderThickness); background-color: var(--hsElevate--card--variant2__backgroundColor); color: var(--hsElevate--card--variant2__textColor); } .hs-elevate-card--variant-2 a:not(.hs-elevate-button, .hs-elevate-blog-listing__pagination-link, .hs-elevate-card--blog__link) { color: var(--hsElevate--card--variant2--link__fontColor); -webkit-text-decoration: var(--hsElevate--card--variant2--link__textDecoration); text-decoration: var(--hsElevate--card--variant2--link__textDecoration); text-decoration-color: var(--hsElevate--card--variant2--link__textDecorationColor); } .hs-elevate-card--variant-2 a:not(.hs-elevate-button, .hs-elevate-blog-listing__pagination-link, .hs-elevate-card--blog__link):hover, .hs-elevate-card--variant-2 a:not(.hs-elevate-button, .hs-elevate-blog-listing__pagination-link, .hs-elevate-card--blog__link):focus { color: var(--hsElevate--card--variant2--link__hover--fontColor); -webkit-text-decoration: var(--hsElevate--card--variant2--link__hover--textDecoration); text-decoration: var(--hsElevate--card--variant2--link__hover--textDecoration); text-decoration-color: var(--hsElevate--card--variant2--link__hover--textDecorationColor); } .hs-elevate-card--variant-3 { border-color: var(--hsElevate--card--variant3__borderColor); border-radius: var(--hsElevate--card--variant3__borderRadius); border-style: solid; border-width: var(--hsElevate--card--variant3__borderThickness); background-color: var(--hsElevate--card--variant3__backgroundColor); color: var(--hsElevate--card--variant3__textColor); } .hs-elevate-card--variant-3 a:not(.hs-elevate-button, .hs-elevate-blog-listing__pagination-link, .hs-elevate-card--blog__link) { color: var(--hsElevate--card--variant3--link__fontColor); -webkit-text-decoration: var(--hsElevate--card--variant3--link__textDecoration); text-decoration: var(--hsElevate--card--variant3--link__textDecoration); text-decoration-color: var(--hsElevate--card--variant3--link__textDecorationColor); } .hs-elevate-card--variant-3 a:not(.hs-elevate-button, .hs-elevate-blog-listing__pagination-link, .hs-elevate-card--blog__link):hover, .hs-elevate-card--variant-3 a:not(.hs-elevate-button, .hs-elevate-blog-listing__pagination-link, .hs-elevate-card--blog__link):focus { color: var(--hsElevate--card--variant3--link__hover--fontColor); -webkit-text-decoration: var(--hsElevate--card--variant3--link__hover--textDecoration); text-decoration: var(--hsElevate--card--variant3--link__hover--textDecoration); text-decoration-color: var(--hsElevate--card--variant3--link__hover--textDecorationColor); } .hs-elevate-card--variant-4 { border-color: var(--hsElevate--card--variant4__borderColor); border-radius: var(--hsElevate--card--variant4__borderRadius); border-style: solid; border-width: var(--hsElevate--card--variant4__borderThickness); background-color: var(--hsElevate--card--variant4__backgroundColor); color: var(--hsElevate--card--variant4__textColor); } .hs-elevate-card--variant-4 a:not(.hs-elevate-button, .hs-elevate-blog-listing__pagination-link, .hs-elevate-card--blog__link) { color: var(--hsElevate--card--variant4--link__fontColor); -webkit-text-decoration: var(--hsElevate--card--variant4--link__textDecoration); text-decoration: var(--hsElevate--card--variant4--link__textDecoration); text-decoration-color: var(--hsElevate--card--variant4--link__textDecorationColor); } .hs-elevate-card--variant-4 a:not(.hs-elevate-button, .hs-elevate-blog-listing__pagination-link, .hs-elevate-card--blog__link):hover, .hs-elevate-card--variant-4 a:not(.hs-elevate-button, .hs-elevate-blog-listing__pagination-link, .hs-elevate-card--blog__link):focus { color: var(--hsElevate--card--variant4--link__hover--fontColor); -webkit-text-decoration: var(--hsElevate--card--variant4--link__hover--textDecoration); text-decoration: var(--hsElevate--card--variant4--link__hover--textDecoration); text-decoration-color: var(--hsElevate--card--variant4--link__hover--textDecorationColor); } .cs-feature { overflow: hidden; } .cs-feature .hs-elevate-details__label { font-weight: 600; } .cs-feature .cs-feature__link:hover { opacity: 0.8; } .cs-feature .cs-feature__link .cs-feature__chevron-path { fill: currentcolor; } .cs-feature .cs-feature__link:hover .cs-feature__chevron-path { opacity: 0.8; } /* Form */ .hs-form, .hs-elevate-system-form form, .hs-elevate-system-form--subscription-preferences form .email-prefs { padding: var(--hsElevate--form__padding); border-color: var(--hsElevate--form__borderColor); border-radius: var(--hsElevate--form__borderRadius); border-style: solid; border-width: var(--hsElevate--form__borderThickness); background: var(--hsElevate--form__backgroundColor); box-shadow: var(--hsElevate--form__shadow); } /* Form labels */ :is(.hs-form, .hs-elevate-system-form) label, .hs-elevate-system-form--subscription-preferences .fakelabel { display: block; color: var(--hsElevate--formLabel__textColor); font-family: var(--hsElevate--formLabel__font); font-size: var(--hsElevate--formLabel__fontSize); font-weight: var(--hsElevate--formLabel__fontWeight); margin-block-end: var(--hsElevate--formLabel__marginBottom); } /* Form fields */ .hs-form .hs-form-field { margin-block-end: var(--hsElevate--formField__marginBottom); } :is(.hs-form, .hs-elevate-system-form) input[type='text'], :is(.hs-form, .hs-elevate-system-form) input[type='email'], :is(.hs-form, .hs-elevate-system-form) input[type='password'], :is(.hs-form, .hs-elevate-system-form) input[type='tel'], :is(.hs-form, .hs-elevate-system-form) input[type='number'], :is(.hs-form, .hs-elevate-system-form, .hs-search-field) input[type='search'], :is(.hs-form, .hs-elevate-system-form) select, :is(.hs-form, .hs-elevate-system-form) textarea { width: 100% !important; height: var(--vg-field-height); border: 1px solid var(--vg-field-border); border-radius: var(--vg-field-radius); background-color: var(--vg-field-bg); box-shadow: var(--vg-field-shadow); color: var(--vg-field-color); font-size: var(--vg-field-font-size); line-height: 1.25; padding: var(--vg-field-padding); transition: var(--vg-field-transition); } /* Focus, invalid and disabled states: legacy fields and v4 inputs */ :is(.hs-form, .hs-elevate-system-form, .hs-search-field) :is(input, select, textarea):focus-visible, [data-hsfc-id='Renderer'] .hsfc-Form :is(.hsfc-TextInput, .hsfc-TextareaInput):focus { border-color: var(--vg-field-focus); box-shadow: var(--vg-field-ring); outline: none; } :is(.hs-form, .hs-elevate-system-form) :is(input, select, textarea):disabled, [data-hsfc-id='Renderer'] .hsfc-Form :is(.hsfc-TextInput, .hsfc-TextareaInput):disabled { cursor: not-allowed; opacity: 0.5; } .hs-form :is(input, select, textarea):is(.error, [aria-invalid='true']), [data-hsfc-id='Renderer'] .hsfc-Form :is(.hsfc-TextInput, .hsfc-TextareaInput)[aria-invalid='true'] { border-color: var(--vg-field-error); } .hs-form :is(input, select, textarea):is(.error, [aria-invalid='true']):focus-visible, [data-hsfc-id='Renderer'] .hsfc-Form :is(.hsfc-TextInput, .hsfc-TextareaInput)[aria-invalid='true']:focus { border-color: var(--vg-field-error); box-shadow: var(--vg-field-error-ring); } .hs-input.hs-fieldtype-intl-phone { display: flex; width: 100% !important; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 8px; /* matches column margins from form injection */ } .hs-input.hs-fieldtype-intl-phone > input { flex: 1 0 calc(70% - 8px) !important; } .hs-input.hs-fieldtype-intl-phone > select { flex: 1 0 30% !important; } @media (max-width: 600px) { .hs-input.hs-fieldtype-intl-phone { display: flex; width: 100%; flex-direction: column; gap: 8px; } .hs-input.hs-fieldtype-intl-phone > select, .hs-input.hs-fieldtype-intl-phone > input { min-width: 100%; flex: 1 1 100%; } } .hs-form-field.hs-fieldtype-file .hs-input, .hs-form fieldset { max-width: 100% !important; } /* Form fields - textarea */ .hs-form textarea { position: relative; height: auto; min-height: 80px; resize: vertical; } /* Form fields - select */ .hs-form .hs-fieldtype-select .input { position: relative; } .hs-form select { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-inline-end: 36px; } .hs-form .hs-fieldtype-select .input:after { position: absolute; top: 50%; right: 12px; width: 16px; height: 16px; background: var(--hsElevate--formField__selectIcon) center / contain no-repeat; content: ''; opacity: 0.5; pointer-events: none; transform: translateY(-50%); } /* Form fields - datepicker */ .hs-form .hs-dateinput { position: relative; } .hs-form .hs-dateinput:before { position: absolute; top: 50%; right: 12px; width: 16px; height: 16px; background: var(--hsElevate--formField__datepickerIcon) center / contain no-repeat; content: ''; opacity: 0.5; pointer-events: none; transform: translateY(-50%); } /* Form fields - placeholders */ ::-moz-placeholder { color: var(--vg-field-placeholder); opacity: 1; } ::placeholder { color: var(--vg-field-placeholder); opacity: 1; } /* Form fields - checkbox/radio */ .hs-form .inputs-list { padding: 0; margin: 0; list-style: none; } .hs-form .inputs-list li { display: block; margin-block-end: var(--hsElevate--spacing--16); } .hs-form .inputs-list li:last-of-type { margin-block-end: 0; } .hs-form .inputs-list :is(input, span) { vertical-align: middle; } :is(.hs-form, .hs-elevate-system-form) input[type='checkbox'], :is(.hs-form, .hs-elevate-system-form) input[type='radio'] { -webkit-appearance: none; -moz-appearance: none; appearance: none; display: inline-grid; height: var(--vg-field-check-size); width: var(--vg-field-check-size) !important; flex-shrink: 0; padding: 0; place-content: center; border: 1px solid var(--vg-charcoal-200); border-radius: 4px; background-color: var(--vg-field-bg); box-shadow: var(--vg-field-shadow); accent-color: var(--vg-melon-500); cursor: pointer; margin-inline-end: 8px; transition: var(--vg-field-transition); } :is(.hs-form, .hs-elevate-system-form) input[type='radio'] { border-radius: 50%; } :is(.hs-form, .hs-elevate-system-form) :is(input[type='checkbox'], input[type='radio']):checked { border-color: var(--vg-melon-500); background-color: var(--vg-melon-500); } :is(.hs-form, .hs-elevate-system-form) input[type='checkbox']:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3.5 8.5 3 3 6-7'/%3E%3C/svg%3E"); background-position: center; background-size: 100%; } :is(.hs-form, .hs-elevate-system-form) input[type='radio']:checked { background-image: radial-gradient(circle, #fff 0 25%, transparent 30%); } :is(.hs-form, .hs-elevate-system-form) :is(input[type='checkbox'], input[type='radio']):focus-visible { box-shadow: var(--vg-field-ring); outline: none; } :is(.hs-form, .hs-elevate-system-form) :is(input[type='checkbox'], input[type='radio']):disabled { cursor: not-allowed; opacity: 0.5; } /* Form help text */ .hs-form legend { /* To do: figure out where we should pull this from */ color: var(--hsElevate--formHelpText__textColor); font-size: 14px; margin-block-end: 8px; } /* Form rich text */ .hs-form .hs-richtext { color: var(--hsElevate--formLabel__textColor); } .hs-form .hs-richtext img { height: auto; max-width: 100% !important; } /* Form error messages */ .hs-form .hs-error-msg, .hs-form .hs-error-msgs, [data-hsfc-id='Renderer'] .hsfc-Form .hsfc-ErrorAlert { color: var(--vg-field-error); font-size: 14px; margin-block-start: 6px; } .hs-form .hs-error-msgs { padding: 0; list-style: none; } /* Form button */ :is(.hs-form, .hs-elevate-system-form) .hs-button, :is(.hs-form, .hs-elevate-system-form) input[type='submit'] { display: inline-block; width: 100%; border-color: var(--hsElevate--button--primary__borderColor); min-height: var(--vg-field-height); border-radius: var(--vg-field-radius); border-style: solid; border-width: var(--hsElevate--button--primary__borderThickness); background-color: var(--hsElevate--button--primary__backgroundColor); color: var(--hsElevate--button--primary__textColor); cursor: pointer; font-family: var(--hsElevate--button--primary__font); font-size: 14px; font-style: var(--hsElevate--button--primary__fontStyle); font-weight: 500; padding: 8px 16px; text-align: center; text-decoration: none; transition: var(--vg-field-transition), background-color 150ms ease; white-space: normal !important; } :is(.hs-form, .hs-elevate-system-form) .hs-button:hover, :is(.hs-form, .hs-elevate-system-form) .hs-button:focus, :is(.hs-form, .hs-elevate-system-form) input[type='submit']:hover, :is(.hs-form, .hs-elevate-system-form) input[type='submit']:focus { border-color: var(--hsElevate--button--primary__hover--borderColor); border-width: var(--hsElevate--button--primary__hover--borderThickness); background-color: var(--hsElevate--button--primary__hover--backgroundColor); color: var(--hsElevate--button--primary__hover--textColor); text-decoration: none; } /* HubSpot v4 forms (.hsfc-*): vars in settings/_forms.hubl.css cover most of the box; the rest is here */ [data-hsfc-id='Renderer'] .hsfc-Form :is(.hsfc-TextInput) { min-height: var(--vg-field-height); } [data-hsfc-id='Renderer'] .hsfc-Form :is(.hsfc-TextInput, .hsfc-TextareaInput) { box-shadow: var(--vg-field-shadow); font-size: var(--vg-field-font-size); line-height: 1.25; transition: var(--vg-field-transition); } [data-hsfc-id='Renderer'] .hsfc-Form .hsfc-TextareaInput { min-height: 80px; } [data-hsfc-id='Renderer'] .hsfc-Form .hsfc-FieldLabel { font-size: 14px; font-weight: 500; line-height: 1.25; } [data-hsfc-id='Renderer'] .hsfc-Form .hsfc-FieldLabel__RequiredIndicator { color: var(--vg-field-error); } [data-hsfc-id='Renderer'] .hsfc-Form :is(.hsfc-FieldDescription, .hsfc-FieldFooter) { font-size: 14px; } [data-hsfc-id='Renderer'] .hsfc-Form .hsfc-DropdownInput__Caret { height: 100%; } /* Swap HubSpot's triangle for a muted chevron */ [data-hsfc-id='Renderer'] .hsfc-Form .hsfc-DropdownInput__Caret > span { width: 16px; height: 16px; border: 0; background: var(--hsElevate--formField__selectIcon) center / 12px no-repeat; opacity: 0.5; } [data-hsfc-id='Renderer'] .hsfc-Form .hsfc-DropdownOptions { padding: 4px; border: 1px solid var(--vg-field-border); border-radius: var(--vg-field-radius); background: #fff; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); color: var(--vg-field-color); font-size: 14px; } [data-hsfc-id='Renderer'] .hsfc-Form .hsfc-DropdownOptions__List__ListItem { padding: 6px 8px; border-radius: 4px; cursor: pointer; } [data-hsfc-id='Renderer'] .hsfc-Form .hsfc-DropdownOptions__List__ListItem:is(:hover, :focus, [aria-selected='true']) { background: var(--vg-eggshell-100); } [data-hsfc-id='Renderer'] .hsfc-Form :is(.hsfc-CheckboxInput, .hsfc-RadioInput) { accent-color: var(--vg-melon-500); } [data-hsfc-id='Renderer'] .hsfc-Form :is(.hsfc-CheckboxInput, .hsfc-RadioInput):focus-visible { box-shadow: var(--vg-field-ring); outline: none; } [data-hsfc-id='Renderer'] .hsfc-Form .hsfc-Button { min-height: var(--vg-field-height); line-height: 1.25; } [data-hsfc-id='Renderer'] .hsfc-Form .hsfc-Button:focus-visible { box-shadow: var(--vg-field-ring); outline: none; } /* Captcha */ .grecaptcha-badge { margin-block: 0; margin-inline: auto; } /* * Bastion look for cards, buttons and captions. These mirror the updated * defaults in fields.json, which HubSpot does not re-apply to theme settings * that were saved before the defaults changed. */ :root { --vg-white: #fff; --vg-focus-ring: #53acff; /* Adobe Fonts (Typekit) kit linked in layouts/base.hubl.html; weights 100-900 */ --vg-heading-font: "malila", sans-serif; --hsElevate--display1__font: var(--vg-heading-font); --hsElevate--display2__font: var(--vg-heading-font); --hsElevate--h1__font: var(--vg-heading-font); --hsElevate--h2__font: var(--vg-heading-font); --hsElevate--h3__font: var(--vg-heading-font); --hsElevate--h4__font: var(--vg-heading-font); --hsElevate--h5__font: var(--vg-heading-font); --hsElevate--h6__font: var(--vg-heading-font); --hsElevate--h1__fontWeight: 100; --hsElevate--h2__fontWeight: 200; --hsElevate--h3__fontWeight: 200; --hsElevate--h4__fontWeight: 200; --hsElevate--h5__fontWeight: 200; --hsElevate--h6__fontWeight: 200; --hsElevate--card--variant2__backgroundColor: transparent; --hsElevate--card--variant2__borderThickness: 0px; --hsElevate--card--variant2__borderColor: transparent; --hsElevate--card--variant3__backgroundColor: var(--vg-charcoal-800); --hsElevate--card--variant3__borderThickness: 0px; --hsElevate--card--variant3__borderColor: transparent; --hsElevate--card--variant4__borderThickness: 0px; --hsElevate--card--variant4__borderColor: transparent; /* Tags: melon chips, sitewide */ --hsElevate--tag__backgroundColor: var(--vg-melon-100); --hsElevate--tag__textColor: var(--vg-melon-800); --hsElevate--tag__borderColor: var(--vg-melon-600); --hsElevate--tag__borderThickness: 1px; --hsElevate--tag__borderRadius: 8px; /* Buttons: primary is melon; secondary is solid and tertiary is outline, both charcoal on light surfaces. Dark surfaces flip them to eggshell (see .hs-elevate-button-wrapper--dark below). */ --hsElevate--button--primary__backgroundColor: var(--vg-melon-500); --hsElevate--button--primary__hover--backgroundColor: var(--vg-melon-400); --hsElevate--button--primary__textColor: #fff; --hsElevate--button--primary__hover--textColor: #fff; --hsElevate--button--primary__borderThickness: 0px; --hsElevate--button--primary__hover--borderThickness: 0px; --hsElevate--button--primary__borderColor: transparent; --hsElevate--button--primary__hover--borderColor: transparent; --hsElevate--button--secondary__backgroundColor: var(--vg-charcoal-950); --hsElevate--button--secondary__hover--backgroundColor: var(--vg-charcoal-700); --hsElevate--button--secondary__textColor: #fff; --hsElevate--button--secondary__hover--textColor: #fff; --hsElevate--button--secondary__borderThickness: 0px; --hsElevate--button--secondary__hover--borderThickness: 0px; --hsElevate--button--secondary__borderColor: transparent; --hsElevate--button--secondary__hover--borderColor: transparent; --hsElevate--button--tertiary__backgroundColor: transparent; --hsElevate--button--tertiary__hover--backgroundColor: var(--vg-charcoal-950); --hsElevate--button--tertiary__textColor: var(--vg-charcoal-950); --hsElevate--button--tertiary__hover--textColor: var(--vg-eggshell-100); --hsElevate--button--tertiary__borderThickness: 2px; --hsElevate--button--tertiary__hover--borderThickness: 2px; --hsElevate--button--tertiary__borderColor: var(--vg-charcoal-950); --hsElevate--button--tertiary__hover--borderColor: var(--vg-charcoal-950); --hsElevate--captions__fontWeight: 400; --hsElevate--captions__fontSize: 0.875rem; } /* Button module placed on a dark surface: secondary and tertiary use eggshell */ .hs-elevate-button-wrapper--dark { --hsElevate--button--secondary__backgroundColor: var(--vg-eggshell-100); --hsElevate--button--secondary__hover--backgroundColor: var(--vg-eggshell-500); --hsElevate--button--secondary__textColor: var(--vg-charcoal-950); --hsElevate--button--secondary__hover--textColor: var(--vg-charcoal-950); --hsElevate--button--tertiary__hover--backgroundColor: var(--vg-eggshell-100); --hsElevate--button--tertiary__textColor: var(--vg-eggshell-100); --hsElevate--button--tertiary__hover--textColor: var(--vg-charcoal-950); --hsElevate--button--tertiary__borderColor: var(--vg-eggshell-100); --hsElevate--button--tertiary__hover--borderColor: var(--vg-eggshell-100); } /* h1 is lighter than the other headings, including when it uses a display style */ h1, h1.hs-elevate-display-1, h1.hs-elevate-display-2 { font-weight: 100; } p.hs-elevate-display-1, p.hs-elevate-display-2 { font-weight: 200; } /* Bold inside a malila heading would resolve to 400 via bolder; keep it capped */ :is(h1, h2, h3, h4, h5, h6, .hs-elevate-display-1, .hs-elevate-display-2) :is(b, strong) { font-weight: inherit; } /* Card variant 4 is charcoal: its secondary button flips to eggshell */ .hs-elevate-card--variant-4 { --hsElevate--button--secondary__backgroundColor: var(--vg-eggshell-100); --hsElevate--button--secondary__hover--backgroundColor: var(--vg-eggshell-500); --hsElevate--button--secondary__textColor: var(--vg-charcoal-950); --hsElevate--button--secondary__hover--textColor: var(--vg-charcoal-950); } /* * House rule: text on a card never underlines, hovered or not. Covers the * theme card variants (their link underline settings are forced off) and * any card built with a "card" class. The team card contact link keeps its * resting underline. */ :root { --hsElevate--card--variant1--link__textDecoration: none; --hsElevate--card--variant1--link__hover--textDecoration: none; --hsElevate--card--variant2--link__textDecoration: none; --hsElevate--card--variant2--link__hover--textDecoration: none; --hsElevate--card--variant3--link__textDecoration: none; --hsElevate--card--variant3--link__hover--textDecoration: none; --hsElevate--card--variant4--link__textDecoration: none; --hsElevate--card--variant4--link__hover--textDecoration: none; } [class*="card"]:is(:hover, :focus-visible), [class*="card"]:is(:hover, :focus-visible) *, a[class*="card"]:is(:hover, :focus-visible), a[class*="card"]:is(:hover, :focus-visible) *, a:is(:hover, :focus-visible):has(> [class*="card"]), .hs-elevate-service-audience:is(:hover, :focus-visible), .hs-elevate-service-audience:is(:hover, :focus-visible) * { text-decoration: none !important; } /* Trust bar (lives in the site footer, so this is global, not template CSS): charcoal-950 band (same as the footer logo block) with a melon top hairline and a row of credentials. Each item has a melon index, an optional small uppercase label and a value. */ .dnd-section:has(#trust-bar) { background-color: var(--vg-charcoal-950); box-shadow: inset 0 1px 0 var(--vg-melon-500); } .vg-trust { display: grid; /* One column per credential; --vg-trust-cols is set by the section from the HubDB row count */ grid-template-columns: repeat(var(--vg-trust-cols, 4), minmax(0, 1fr)); grid-gap: 1.5rem 0; gap: 1.5rem 0; margin: 0; padding: 0; list-style: none; } .vg-trust__item { display: flex; align-items: flex-start; gap: 0.875rem; margin: 0; padding: 0 1.5rem; font-feature-settings: tabular-nums lining-nums; font-variant-numeric: tabular-nums lining-nums; } .vg-trust__item + .vg-trust__item { border-left: 1px solid rgb(255 255 255 / 0.12); } /* Reset the first item so the dividers only sit between items */ .vg-trust__item:first-child { padding-left: 0; border-left: 0; } .vg-trust__index { flex: none; color: var(--vg-melon-500); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; line-height: 1.5; } .vg-trust__body { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; } .vg-trust__label { color: var(--vg-charcoal-200); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } .vg-trust__value { color: var(--vg-eggshell-100); font-size: 1rem; font-weight: 600; line-height: 1.3; } /* Linked items: keep the value styling, turn melon on hover or focus */ .vg-trust__link { color: inherit; text-decoration: none; } .vg-trust__link:hover .vg-trust__value, .vg-trust__link:focus-visible .vg-trust__value { color: var(--vg-melon-500); } @media (max-width: 47.999rem) { .vg-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vg-trust__item:nth-child(2n + 1) { padding-left: 0; border-left: 0; } } /* Text link component: Label, or a inside a linked card. Text and arrow icon share currentColor, so both turn melon on hover or focus. */ main a.vg-text-link, .vg-text-link { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--vg-charcoal-500); font-weight: 600; text-decoration: none; transition: color 150ms ease; } .vg-text-link::after { content: ""; flex: none; width: 1em; height: 1em; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform 150ms ease; } main a.vg-text-link:is(:hover, :focus-visible), a:is(:hover, :focus-visible) > .vg-text-link { color: var(--vg-melon-500); } a.vg-text-link:is(:hover, :focus-visible)::after, a:is(:hover, :focus-visible) > .vg-text-link::after { transform: translateX(0.25rem); } .hs-elevate-review-pill { display: inline-block; margin-bottom: 0.75rem; padding: 0.25rem 0.75rem; border-radius: 999px; background: #f97316; color: #fff; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; line-height: 1.2; text-transform: uppercase; } /* Breadcrumb lines ("Audience / X", "Service / X", "Solution / X") use a monospace face */ .hs-elevate-caption.vg-breadcrumb { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; } /* Team card: button face in the marquee, expanded landscape panel in a shared dialog (assets/js/team-cards.js) */ .vg-team-card { display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: transform 0.25s ease; } .vg-team-card:hover { transform: translateY(-4px); } /* Photos are transparent PNGs: white behind the person, melon on hover */ .vg-team-card .vg-marquee__image { background: #fff; transition: background-color 0.25s ease; } .vg-team-card:hover .vg-marquee__image { background: var(--vg-melon-500); } /* No photo: VG logo on the white card. Hover turns the card melon and only the melon part of the logo inverts to white */ .vg-marquee__image--logo { box-sizing: border-box; padding: 2rem; } .vg-logo-mark { fill: var(--vg-charcoal-500); } .vg-logo-accent { fill: var(--vg-melon-500); transition: fill 0.25s ease; } .vg-team-card:hover .vg-logo-accent { fill: #fff; } .vg-team-card:focus-visible { outline: 2px solid #53ACFF; outline-offset: 4px; } .vg-team-card .vg-marquee__name, .vg-team-card .vg-marquee__role { display: block; } /* Smaller name and title on the card; the expanded panel keeps its own sizes */ .vg-team-card .vg-marquee__name { font-size: 1rem; line-height: 1.25; } .vg-team-card .vg-marquee__role { font-size: 0.6875rem; letter-spacing: 0.06em; line-height: 1rem; } .vg-team-card.is-open { visibility: hidden; } .vg-team-dialog { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: none; overflow: hidden; } .vg-team-dialog::backdrop { background: rgb(47 43 43 / 0.7); } .vg-team-panel { position: fixed; display: grid; grid-template-columns: 5fr 7fr; grid-template-rows: minmax(0, 1fr); overflow: hidden; background: var(--vg-eggshell-100); color: var(--vg-charcoal-500); } .vg-team-panel > img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .vg-team-panel > .vg-marquee__image--logo { height: 100%; aspect-ratio: auto; background: #fff; } .vg-team-copy { display: flex; flex-direction: column; gap: 1rem; min-height: 0; padding: 2.5rem 2.5rem 2rem; } .vg-team-scroll { display: flex; flex: 1; flex-direction: column; gap: 0.75rem; min-height: 0; overflow-y: auto; overscroll-behavior: contain; } .vg-team-scroll > * { flex: none; } .vg-team-scroll.is-fading { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 3rem), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 3rem), transparent); } body:has(.vg-team-dialog[open]) { overflow: hidden; } .vg-team-copy h2 { margin: 0; font-size: 2rem; font-weight: 200; letter-spacing: -0.02em; line-height: 1.1; } .vg-team-copy .vg-marquee__role { margin: 0; } .vg-team-short { margin: 0; font-size: 1rem; line-height: 1.5; } .vg-team-more { align-self: flex-start; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; } .vg-team-bio p { margin: 0 0 0.75rem; font-size: 1rem; line-height: 1.5; } .vg-team-contact { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; margin: 0; padding: 0; list-style: none; font-size: 0.9375rem; } .vg-team-contact a { color: inherit; } .vg-team-cta { align-self: flex-start; padding: 0.75rem 1.5rem; } .vg-team-close { position: absolute; top: 0.75rem; right: 0.75rem; z-index: 1; width: 2.5rem; height: 2.5rem; border: 0; border-radius: 50%; background: var(--vg-eggshell-300); color: var(--vg-charcoal-500); font-size: 1.5rem; line-height: 1; cursor: pointer; } @media (max-width: 767.98px) { .vg-team-panel { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); } /* Square photo on top, cropped from the top so faces stay in frame */ .vg-team-panel > img, .vg-team-panel > .vg-marquee__image--logo { height: auto; aspect-ratio: 1; -o-object-position: top; object-position: top; } .vg-team-copy { padding: 1.5rem; } .vg-team-copy h2 { font-size: 1.5rem; } } /* Components */ /* Navigation skipper */ .hs-elevate-header__skip { position: absolute; top: -1000px; left: -1000px; overflow: hidden; height: 1px; width: 1px; text-align: left; } .hs-elevate-header__skip:hover, .hs-elevate-header__skip:focus, .hs-elevate-header__skip:active { z-index: 2; top: 0; left: 0; overflow: visible; height: auto; width: auto; } /* TODO: Move this code to the MenuComponent styled-component code -- keeping it here to prevent conflicts with open Menu PRs TODO: Remove this file and its references from main.hubl.css */ @media (max-width: 767px) { .hs-elevate-footer .hs-elevate-menu { display: flex; flex-direction: column; align-items: center; } } /* Footer link columns use Bastion base-200, accent-300 on hover (buttons keep their own colours) */ .hs-elevate-footer .dnd-row:has(> .row-fluid > .span3) a { color: oklch(0.922 0 0) !important; transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1); } @media (hover: hover) { .hs-elevate-footer .dnd-row:has(> .row-fluid > .span3) a:hover { color: oklch(0.729 0.12 241.73) !important; } } .hs-elevate-footer img[src*="vg-logo"] { height: 3rem !important; width: auto !important; } /* * Footer background video: the video module fills the footer section and the * rows sit above it. Only ancestors of the video stay unpositioned so the video * is sized against the section. */ .hs-elevate-footer .dnd-section:has(.bastion-bg-video) { position: relative; overflow: hidden; } .hs-elevate-footer .dnd-section:has(.bastion-bg-video) .row-fluid-wrapper:not(:has(.bastion-bg-video)), .hs-elevate-footer .dnd-section:has(.bastion-bg-video) .widget-span:not(:has(.bastion-bg-video)) { position: relative; z-index: 1; } /* Intro panel: dark card with small rounded corners */ .hs-elevate-footer .dnd-row:has(> .row-fluid > .span6) { border-radius: 4px; overflow: hidden; background-color: var(--hsElevate--color--base--3); } /* Landing page footer (the one without the background video): no card or side padding on the intro panel, so the logo and lead share the left edge of the links below */ .hs-elevate-footer:not(:has(.bastion-bg-video)) .dnd-row:has(> .row-fluid > .span6) { background-color: transparent; border-radius: 0; padding-inline: 0 !important; } .hs-elevate-footer:not(:has(.bastion-bg-video)) .dnd-row:has(> .row-fluid > .span6) > .row-fluid > .span6 { margin-left: 0; } /* Link columns: small uppercase white headings, 48px below the heading, compact 14px links */ .hs-elevate-footer p strong { text-transform: uppercase; font-size: 0.75rem; line-height: 1rem; font-weight: 500; color: #fff; } .hs-elevate-footer p:has(> strong) + * { margin-top: 3rem; } .hs-elevate-footer li { font-size: 0.875rem; line-height: 1.25rem; } .hs-elevate-footer li:not(:last-child) { margin-bottom: 0.5rem; } /* Divider under the intro panel: currentColor on mobile, 15% white from 64rem */ .hs-elevate-footer .dnd-row:has(> .row-fluid > .span3) { border-top: 1px solid currentColor; margin-top: 2rem; padding-left: 0 !important; padding-right: 0 !important; } @media (min-width: 64rem) { .hs-elevate-footer .dnd-row:has(> .row-fluid > .span3) { border-top-color: rgb(255 255 255 / 0.15); } } /* Intro lead: 16px, 18px from 48rem, 20px from 64rem, weight 500 */ .hs-elevate-footer__lead { font-size: 1rem; line-height: 1.5rem; font-weight: 500; } @media (min-width: 48rem) { .hs-elevate-footer__lead { font-size: 1.125rem; line-height: 1.75rem; } } @media (min-width: 64rem) { .hs-elevate-footer__lead { font-size: 1.25rem; } } /* Legal row: divider, stacked on mobile, copyright and links split from 48rem */ .hs-elevate-footer__legal { display: flex; flex-direction: column; gap: 1rem; padding-top: 2rem; border-top: 1px solid rgb(255 255 255 / 0.1); } @media (min-width: 48rem) { .hs-elevate-footer__legal { flex-direction: row; align-items: center; justify-content: space-between; } } .hs-elevate-footer__copyright { font-size: 0.875rem; line-height: 1.25rem; color: oklch(0.87 0 0); } .hs-elevate-footer__legal-links { display: flex; flex-wrap: wrap; gap: 1rem; font-size: 0.875rem; line-height: 1.25rem; } .hs-elevate-footer__legal-links a { color: #fff !important; } @media (hover: hover) { .hs-elevate-footer__legal-links a:hover { color: oklch(0.729 0.12 241.73) !important; } } /* Plain-HTML footer body: the video fills the block and the content sits above it */ .vg-footer-main { position: relative; overflow: hidden; padding-block: 2rem; padding-inline: 1.5rem; } .vg-footer-main__inner { position: relative; z-index: 1; } .vg-footer-main__links { padding-block: 2rem; } .vg-footer-main__links a { color: oklch(0.922 0 0); } /* Shared by the plain-HTML footer; lives here so pages without home.css (search, errors) are styled too */ .vg-static { position: relative; padding-block: 4rem; } .vg-static__inner { display: block; width: 100%; max-width: var(--hsElevate--contentWrapper--wide__maxWidth, 1216px); margin-inline: auto; } .vg-static--dark { background-color: var(--hsElevate--section--darkSection--1__backgroundColor); color: var(--hsElevate--section--darkSection--1__textColor); } .vg-static--dark :is(h1, h2, h3, p, li) { color: inherit; } .vg-static--dark .hs-elevate-caption { color: var(--vg-white); } /* Buttons: the module's layout rules, since the React module CSS is not loaded here */ .vg-static .hs-elevate-button-container { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; } .vg-static .hs-elevate-button { display: inline-flex; min-width: 150px; max-width: 100%; padding: var(--hsElevate--button__padding); align-items: center; justify-content: center; text-align: center; white-space: nowrap; } /* Spacing variables are: --hsElevate--menuItem__padding --hsElevate--menuItem__margin --hsElevate--menu--topLevel__gap --hsElevate--flyoutSubMenu__top --hsElevate--flyoutSubMenu__left --hsElevate--flyoutSubMenu__right --hsElevate--flyoutSubMenu__bottom --hsElevate--firstFlyoutMenu__top --hsElevate--firstFlyoutMenu__left --hsElevate--firstFlyoutMenu__right --hsElevate--firstFlyoutMenu__bottom */ .hs-elevate-menu { display: flex; } .hs-elevate-menu, .hs-elevate-menu ul { list-style: none; } .hs-elevate-menu li { position: relative; } .hs-elevate-menu--horizontal { flex-direction: row; flex-wrap: wrap; } .hs-elevate-menu--vertical { flex-direction: column; } .hs-elevate-menu { gap: var(--hsElevate--menu--topLevel__gap, 0); } .hs-elevate-menu--desktop { margin: 0; } .hs-elevate-menu__flyout-submenu { min-width: -moz-max-content; min-width: max-content; max-width: 250px; white-space: nowrap; overflow-wrap: break-word; padding: 20px; border: 1px solid #f7f7f7; border-radius: 8px; background-color: white; } .logo-company-name { margin-block: 0; } /* Offsets margin on ul element inside default image grid */ .hs-image__grid__list { margin-block: 0; } /* Logo responsive styling */ .widget-type-logo img { height: auto; max-width: 100%; } /* Preset-specific styles */ /* Onyx preset specific styles */