: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: 1296px ; --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); } :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: Roboto Slab ; --hsElevate--body--small__fontSize: 1.000125rem ; --hsElevate--body__fontSize: 1.125rem ; --hsElevate--body--large__fontSize: 1.499625rem ; --hsElevate--body--extraLarge__fontSize: 1.9991249999999998rem ; --hsElevate--body__fontWeight: normal ; --hsElevate--body__fontStyle: normal ; --hsElevate--body__lineHeight: 1.55; /* Primary links */ --hsElevate--link--primary__fontColor: #2D4DFF ; --hsElevate--link--primary__textDecoration: none; --hsElevate--link--primary__textDecorationColor: transparent; /* Hover state */ --hsElevate--link--primary__hover--fontColor: #2D4DFF ; --hsElevate--link--primary__hover--textDecoration: underline; --hsElevate--link--primary__hover--textDecorationColor: #2D4DFF ; /* Secondary links */ --hsElevate--link--secondary__fontColor: #F7F8FC ; --hsElevate--link--secondary__textDecoration: none; --hsElevate--link--secondary__textDecorationColor: transparent; /* Hover state */ --hsElevate--link--secondary__hover--fontColor: #F7F8FC ; --hsElevate--link--secondary__hover--textDecoration: underline; --hsElevate--link--secondary__hover--textDecorationColor: #F7F8FC ; /* Headings */ /* Percentage change for the heading font sizes on mobile */ --hsElevate--heading__tablet-modifier: 0.8; --hsElevate--heading__lineHeight: 1.2; --hsElevate--display1__font: Roboto Slab ; --hsElevate--display1__fontSize: 6.313rem; --hsElevate--display2__font: Roboto Slab ; --hsElevate--display2__fontSize: 4.75rem; --hsElevate--h1__font: Roboto Slab ; --hsElevate--h1__fontSize: 3.5625rem ; --hsElevate--h1__fontWeight: 500 ; --hsElevate--h1__fontStyle: normal ; --hsElevate--h2__font: Roboto Slab ; --hsElevate--h2__fontSize: 2.6875rem ; --hsElevate--h2__fontWeight: 600 ; --hsElevate--h2__fontStyle: normal ; --hsElevate--h3__font: Roboto Slab ; --hsElevate--h3__fontSize: 2.0rem ; --hsElevate--h3__fontWeight: 600 ; --hsElevate--h3__fontStyle: normal ; --hsElevate--h4__font: Roboto Slab ; --hsElevate--h4__fontSize: 1.5rem ; --hsElevate--h4__fontWeight: 600 ; --hsElevate--h4__fontStyle: normal ; --hsElevate--h5__font: Roboto Slab ; --hsElevate--h5__fontSize: 1.25rem ; --hsElevate--h5__fontWeight: 600 ; --hsElevate--h5__fontStyle: normal ; --hsElevate--h6__font: Roboto Slab ; --hsElevate--h6__fontSize: 1.0rem ; --hsElevate--h6__fontWeight: 600 ; --hsElevate--h6__fontStyle: normal ; /* Quotes */ --hsElevate--quotes__font: Roboto Slab ; --hsElevate--quotes__fontColor: ; --hsElevate--quotes__fontSize: 1.125rem ; --hsElevate--quotes__fontWeight: 400 ; --hsElevate--quotes__fontStyle: normal ; /* Captions */ --hsElevate--captions__font: Roboto Slab ; --hsElevate--captions__fontSize: 0.75rem ; --hsElevate--captions__fontWeight: 800 ; --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: #EEEEEE ; --hsElevate--color--base--3: #242938 ; /* Accent colors */ --hsElevate--color--accent--1: #F5F5F5 ; --hsElevate--color--accent--2: #F7F8FC ; --hsElevate--color--accent--3: #2D4DFF ; } :root { /* Primary button variables */ --hsElevate--button--primary__buttonFill: filled ; /* Primary button font */ --hsElevate--button--primary__font: Roboto Slab ; /* 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: #EEEEEE ; --hsElevate--button--primary__hover--textColor: #EEEEEE ; /* Primary button shape */ --hsElevate--button--primary__borderRadius: 50px; /* Primary button background color */ --hsElevate--button--primary__backgroundColor: #2D4DFF ; --hsElevate--button--primary__hover--backgroundColor: #3959FF ; --hsElevate--button--primary__active--backgroundColor: #1b3be1 ; /* Primary button border */ --hsElevate--button--primary__borderThickness: 0px ; --hsElevate--button--primary__hover--borderThickness: 0px ; --hsElevate--button--primary__borderColor: transparent; --hsElevate--button--primary__hover--borderColor: transparent; /* Secondary button variables */ --hsElevate--button--secondary__buttonFill: no_fill ; /* Secondary button font */ --hsElevate--button--secondary__font: Roboto Slab ; --hsElevate--button--secondary__fontSize: 1.0rem ; --hsElevate--button--secondary__fontWeight: 500 ; --hsElevate--button--secondary__fontStyle: normal ; /* Secondary button text color */ --hsElevate--button--secondary__textColor: #2D4DFF ; --hsElevate--button--secondary__hover--textColor: #6854E8 ; /* Secondary button shape */ --hsElevate--button--secondary__borderRadius: 50px; /* Secondary button background color */ --hsElevate--button--secondary__backgroundColor: transparent; --hsElevate--button--secondary__hover--backgroundColor: transparent; /* Secondary button border */ --hsElevate--button--secondary__borderThickness: 2px ; --hsElevate--button--secondary__hover--borderThickness: 2px ; --hsElevate--button--secondary__borderColor: #2D4DFF ; --hsElevate--button--secondary__hover--borderColor: #3959FF ; /* Tertiary button variables */ --hsElevate--button--tertiary__buttonFill: filled ; /* Tertiary button font */ --hsElevate--button--tertiary__font: Roboto Slab ; --hsElevate--button--tertiary__fontSize: 1.0rem ; --hsElevate--button--tertiary__fontWeight: 500 ; --hsElevate--button--tertiary__fontStyle: normal ; /* Tertiary button text color */ --hsElevate--button--tertiary__textColor: #242938 ; --hsElevate--button--tertiary__hover--textColor: #242938 ; /* Tertiary button shape */ --hsElevate--button--tertiary__borderRadius: 50px; /* Tertiary button background color */ --hsElevate--button--tertiary__backgroundColor: #F7F8FC ; --hsElevate--button--tertiary__hover--backgroundColor: #FFFFFF ; /* 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: Roboto Slab ; --hsElevate--button--accent__fontSize: 1.0rem ; --hsElevate--button--accent__fontWeight: 500 ; --hsElevate--button--accent__fontStyle: normal ; /* Accent button text color */ --hsElevate--button--accent__textColor: #F7F8FC ; --hsElevate--button--accent__hover--textColor: #FFFFFF ; /* Accent button shape */ --hsElevate--button--accent__borderRadius: 50px; /* 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: #F7F8FC ; --hsElevate--button--accent__hover--borderColor: #FFFFFF ; } :root { /* Form field background color */ --hsElevate--formField__backgroundColor: #EEEEEE ; /* Form field shape */ --hsElevate--formField__borderRadius: 50px; /* Form field border -- multiple fields to properly handle field visibility for both fill and no fill */ /* Proper usage of variables to achieve "All" or "Bottom" will be within CSS */ --hsElevate--formField__borderThickness: 1px ; --hsElevate--formField__borderTop: 1px solid #D3DAE4 ; --hsElevate--formField__borderRight: 1px solid #D3DAE4 ; --hsElevate--formField__borderLeft: 1px solid #D3DAE4 ; --hsElevate--formField__borderBottom: 1px solid #D3DAE4 ; --hsElevate--formField__borderColor: #D3DAE4 ; /* Form field text color */ --hsElevate--formFieldInput__textColor: #242938 ; /* Form field spacing */ --hsElevate--formField__marginBottom: var(--hsElevate--spacing--32); /* Form textarea border radius */ --hsElevate--formFieldTextArea__borderRadius: calc(var(--hsElevate--formField__borderRadius) * 0.5); /* Form field checkbox/radio */ --hsElevate--formFieldCheckboxRadio__size: 24px; --hsElevate--formFieldCheckboxRadio__fillColor: #000000; /* Form field placeholder */ --hsElevate--formFieldPlaceholder__textColor: #7d8ca5 ; /* Form required field color */ --hsElevate--formRequired__color: #de2828; /* 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: #242938 ; --hsElevate--formLabel__font: Roboto Slab ; --hsElevate--formLabel__fontSize: 1.125rem ; --hsElevate--formLabel__fontWeight: 500 ; --hsElevate--formLabel__marginBottom: var(--hsElevate--spacing--8); /* Help text */ --hsElevate--formHelpText__textColor: #647390; /* Form background color */ --hsElevate--form__backgroundColor: #F5F5F5 ; /* Form shape */ --hsElevate--form__borderRadius: 24px; /* Form border */ --hsElevate--form__borderThickness: 1px ; --hsElevate--form__borderColor: #D3DAE4 ; /* Form spacing */ --hsElevate--form__padding: var(--hsElevate--spacing--48); /* CSS variables for new forms */ /* Global vars */ --hsf-global__font-family: var(--hsElevate--formLabel__font); --hsf-global__font-size: var(--hsElevate--formLabel__fontSize); --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__color); --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(--hsElevate--spacing--20) var(--hsElevate--spacing--32); --hsf-field-input__color: var(--hsElevate--formFieldInput__textColor); --hsf-row__vertical-spacing: var(--hsElevate--formField__marginBottom); --hsf-row__horizontal-spacing: var(--hsElevate--spacing--32); /* 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); --hsf-field-checkbox__background-color: #fff; --hsf-field-checkbox__color: var(--hsElevate--formFieldCheckboxRadio__fillColor); --hsf-field-checkbox__border-color: var(--hsf-field-input__border-color); --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); --hsf-field-radio__background-color: #fff; --hsf-field-radio__color: var(--hsElevate--formFieldCheckboxRadio__fillColor); --hsf-field-radio__border-color: var(--hsf-field-input__border-color); --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: var(--hsElevate--button--primary__fontSize); --hsf-button__font-weight: var(--hsElevate--button--primary__fontWeight); --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(--hsElevate--button--primary__borderRadius); --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: var(--hsElevate--spacing--20) var(--hsElevate--spacing--24); --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); } :root { /* Card variant 1 */ /* Shape */ --hsElevate--card--variant1__borderRadius: 16px; --hsElevate--card--variant1__iconBorderRadius: 12px; /* Border thickness */ --hsElevate--card--variant1__borderThickness: 1px ; /* Colors */ --hsElevate--card--variant1__backgroundColor: #FFFFFF ; --hsElevate--card--variant1__borderColor: #D3DAE4 ; --hsElevate--card--variant1__textColor: #242938 ; /* Links */ --hsElevate--card--variant1--link__fontColor: #2D4DFF ; --hsElevate--card--variant1--link__textDecoration: none; --hsElevate--card--variant1--link__textDecorationColor: transparent; /* Hover state */ --hsElevate--card--variant1--link__hover--fontColor: #2D4DFF ; --hsElevate--card--variant1--link__hover--textDecoration: underline; --hsElevate--card--variant1--link__hover--textDecorationColor: #2D4DFF ; /* Icon colors */ --hsElevate--card--variant1__iconColor: #2D4DFF ; --hsElevate--card--variant1__iconBackgroundColor: #F7F8FC ; /* Card variant 2 */ /* Shape */ --hsElevate--card--variant2__borderRadius: 16px; --hsElevate--card--variant2__iconBorderRadius: 12px; /* Border thickness */ --hsElevate--card--variant2__borderThickness: 1px ; /* Colors */ --hsElevate--card--variant2__backgroundColor: #EEEEEE ; --hsElevate--card--variant2__borderColor: #D3DAE4 ; --hsElevate--card--variant2__textColor: #242938 ; /* Links */ --hsElevate--card--variant2--link__fontColor: #2D4DFF ; --hsElevate--card--variant2--link__textDecoration: none; --hsElevate--card--variant2--link__textDecorationColor: transparent; /* Hover state */ --hsElevate--card--variant2--link__hover--fontColor: #2D4DFF ; --hsElevate--card--variant2--link__hover--textDecoration: underline; --hsElevate--card--variant2--link__hover--textDecorationColor: #2D4DFF ; /* Icon colors */ --hsElevate--card--variant2__iconColor: #2D4DFF ; --hsElevate--card--variant2__iconBackgroundColor: #D3DAE4 ; /* Card variant 3 */ /* Shape */ --hsElevate--card--variant3__borderRadius: 16px; --hsElevate--card--variant3__iconBorderRadius: 12px; /* Border thickness */ --hsElevate--card--variant3__borderThickness: 1px ; /* Colors */ --hsElevate--card--variant3__backgroundColor: #242938 ; --hsElevate--card--variant3__borderColor: #303F59 ; --hsElevate--card--variant3__textColor: #EEEEEE ; /* Links */ --hsElevate--card--variant3--link__fontColor: #F7F8FC ; --hsElevate--card--variant3--link__textDecoration: none; --hsElevate--card--variant3--link__textDecorationColor: transparent; /* Hover state */ --hsElevate--card--variant3--link__hover--fontColor: #F7F8FC ; --hsElevate--card--variant3--link__hover--textDecoration: underline; --hsElevate--card--variant3--link__hover--textDecorationColor: #F7F8FC ; /* Icon colors */ --hsElevate--card--variant3__iconColor: #F7F8FC ; --hsElevate--card--variant3__iconBackgroundColor: #303F59 ; /* Card variant 4 */ /* Shape */ --hsElevate--card--variant4__borderRadius: 16px; --hsElevate--card--variant4__iconBorderRadius: 12px; /* Border thickness */ --hsElevate--card--variant4__borderThickness: 1px ; /* Colors */ --hsElevate--card--variant4__backgroundColor: #18233B ; --hsElevate--card--variant4__borderColor: #303F59 ; --hsElevate--card--variant4__textColor: #EEEEEE ; /* Links */ --hsElevate--card--variant4--link__fontColor: #F7F8FC ; --hsElevate--card--variant4--link__textDecoration: none; --hsElevate--card--variant4--link__textDecorationColor: transparent; /* Hover state */ --hsElevate--card--variant4--link__hover--fontColor: #F7F8FC ; --hsElevate--card--variant4--link__hover--textDecoration: underline; --hsElevate--card--variant4--link__hover--textDecorationColor: #F7F8FC ; /* Icon colors */ --hsElevate--card--variant4__iconColor: #F7F8FC ; --hsElevate--card--variant4__iconBackgroundColor: #303F59 ; } :root { /* Light section 1 */ --hsElevate--section--lightSection--1__backgroundColor: #FFFFFF ; --hsElevate--section--lightSection--1__textColor: #242938 ; --hsElevate--section--lightSection--1__accentColor: #2D4DFF ; --hsElevate--section--lightSection--1__captionColor: #647390 ; --hsElevate--section--lightSection--1--blockquote__textColor: #242938 ; --hsElevate--section--lightSection--1--blockquote__backgroundColor: #EEEEEE ; --hsElevate--section--lightSection--1--blockquote__accentColor: #2D4DFF ; --hsElevate--section--lightSection--1--link__fontColor: #2D4DFF ; --hsElevate--section--lightSection--1--link__textDecoration: none; --hsElevate--section--lightSection--1--link__textDecorationColor: transparent; /* Hover state */ --hsElevate--section--lightSection--1--link__hover--fontColor: #2D4DFF ; --hsElevate--section--lightSection--1--link__hover--textDecoration: underline; --hsElevate--section--lightSection--1--link__hover--textDecorationColor: #2D4DFF ; /* Light section 2 */ --hsElevate--section--lightSection--2__backgroundColor: #EEEEEE ; --hsElevate--section--lightSection--2__textColor: #242938 ; --hsElevate--section--lightSection--2__accentColor: #2D4DFF ; --hsElevate--section--lightSection--2__captionColor: #647390 ; --hsElevate--section--lightSection--2--blockquote__textColor: #242938 ; --hsElevate--section--lightSection--2--blockquote__backgroundColor: #EEEEEE ; --hsElevate--section--lightSection--2--blockquote__accentColor: #2D4DFF ; --hsElevate--section--lightSection--2--link__fontColor: #2D4DFF ; --hsElevate--section--lightSection--2--link__textDecoration: none; --hsElevate--section--lightSection--2--link__textDecorationColor: transparent; /* Hover state */ --hsElevate--section--lightSection--2--link__hover--fontColor: #2D4DFF ; --hsElevate--section--lightSection--2--link__hover--textDecoration: underline; --hsElevate--section--lightSection--2--link__hover--textDecorationColor: #2D4DFF ; /* Light section 3 */ --hsElevate--section--lightSection--3__backgroundColor: #F5F5F5 ; --hsElevate--section--lightSection--3__textColor: #242938 ; --hsElevate--section--lightSection--3__accentColor: #2D4DFF ; --hsElevate--section--lightSection--3__captionColor: #4D6080 ; --hsElevate--section--lightSection--3--blockquote__textColor: #242938 ; --hsElevate--section--lightSection--3--blockquote__backgroundColor: #F5F5F5 ; --hsElevate--section--lightSection--3--blockquote__accentColor: #2D4DFF ; --hsElevate--section--lightSection--3--link__fontColor: #2D4DFF ; --hsElevate--section--lightSection--3--link__textDecoration: none; --hsElevate--section--lightSection--3--link__textDecorationColor: transparent; /* Hover state */ --hsElevate--section--lightSection--3--link__hover--fontColor: #2D4DFF ; --hsElevate--section--lightSection--3--link__hover--textDecoration: underline; --hsElevate--section--lightSection--3--link__hover--textDecorationColor: #2D4DFF ; /* Dark section 1 */ --hsElevate--section--darkSection--1__backgroundColor: #242938 ; --hsElevate--section--darkSection--1__textColor: #EEEEEE ; --hsElevate--section--darkSection--1__accentColor: #F7F8FC ; --hsElevate--section--darkSection--1__captionColor: #7D8CA5 ; --hsElevate--section--darkSection--1--blockquote__textColor: #EEEEEE ; --hsElevate--section--darkSection--1--blockquote__backgroundColor: #18233B ; --hsElevate--section--darkSection--1--blockquote__accentColor: #F7F8FC ; --hsElevate--section--darkSection--1--link__fontColor: #F7F8FC ; --hsElevate--section--darkSection--1--link__textDecoration: none; --hsElevate--section--darkSection--1--link__textDecorationColor: transparent; /* Hover state */ --hsElevate--section--darkSection--1--link__hover--fontColor: #F7F8FC ; --hsElevate--section--darkSection--1--link__hover--textDecoration: underline; --hsElevate--section--darkSection--1--link__hover--textDecorationColor: #F7F8FC ; } :root { /* Font */ --hsElevate--tag__font: Roboto Slab ; --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 */ --hsElevate--tag__borderRadius: 50px; /* 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); } /* 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: 400; } .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: 400; } 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); } /* 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; } } /* Captions */ .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); } .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: var(--hsElevate--button--primary__textColor); border-width: var(--hsElevate--button--primary__borderThickness); background-color: var(--hsElevate--button--primary__backgroundColor); border-style: solid; border-color: var(--hsElevate--button--primary__borderColor); border-radius: var(--hsElevate--button--primary__borderRadius); text-decoration: none; } .hs-elevate-button--primary:hover { color: var(--hsElevate--button--primary__hover--textColor); background-color: var(--hsElevate--button--primary__hover--backgroundColor); border-color: var(--hsElevate--button--primary__hover--borderColor); border-width: var(--hsElevate--button--primary__hover--borderThickness); text-decoration: none; } .hs-elevate-button--primary:active { color: var(--hsElevate--button--primary__hover--textColor); background-color: #1b3be1 ; /* border-color: ; */ 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: transparent ; border-color: #1b3be1 ; 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: #e1e1e1 ; /* 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: #e1e1e1 ; border-width: var(--hsElevate--button--accent__hover--borderThickness); text-decoration: none; } .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); } /* 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); } /* 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) input[type='search'], :is(.hs-form, .hs-elevate-system-form) select, :is(.hs-form, .hs-elevate-system-form) textarea { width: 100% !important; border-radius: var(--hsElevate--formField__borderRadius); border-top: var(--hsElevate--formField__borderTop); border-right: var(--hsElevate--formField__borderRight); border-bottom: var(--hsElevate--formField__borderBottom); border-left: var(--hsElevate--formField__borderLeft); background-color: var(--hsElevate--formField__backgroundColor); color: var(--hsElevate--formFieldInput__textColor); padding-block: var(--hsElevate--spacing--20); padding-inline: var(--hsElevate--spacing--32); } .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 fieldset { max-width: 100% !important; } /* Form fields - textarea */ .hs-form textarea { position: relative; height: 160px; border-radius: var(--hsElevate--formFieldTextArea__borderRadius); } .hs-form textarea::-webkit-resizer { display: none; } .hs-form .hs_multi_line_field .input { position: relative; } .hs-form .hs_multi_line_field .input:after { position: absolute; right: var(--hsElevate--spacing--8); bottom: var(--hsElevate--spacing--8); content: var(--hsElevate--formField__dragIcon); pointer-events: none; } /* Form fields - select */ .hs-form .hs-fieldtype-select .input { position: relative; } .hs-form select { -webkit-appearance: none; -moz-appearance: none; appearance: none; } .hs-form .hs-fieldtype-select .input:after { position: absolute; top: 50%; right: var(--hsElevate--spacing--32); content: var(--hsElevate--formField__selectIcon); 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: var(--hsElevate--spacing--32); content: var(--hsElevate--formField__datepickerIcon); pointer-events: none; transform: translateY(-50%); } /* Form fields - placeholders */ ::-moz-placeholder { color: var(--hsElevate--formFieldPlaceholder__textColor); } ::placeholder { color: var(--hsElevate--formFieldPlaceholder__textColor); } /* 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'] { height: var(--hsElevate--formFieldCheckboxRadio__size); width: var(--hsElevate--formFieldCheckboxRadio__size) !important; accent-color: var(--hsElevate--formFieldCheckboxRadio__fillColor); cursor: pointer; margin-inline-end: var(--hsElevate--spacing--12); } /* Form help text */ .hs-form legend { /* To do: figure out where we should pull this from */ color: var(--hsElevate--formHelpText__textColor); margin-block-end: var(--hsElevate--spacing--8); } /* 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-input.error { border-color: var(--hsElevate--formRequired__color); } .hs-form .hs-error-msg, .hs-form .hs-error-msgs { color: var(--hsElevate--formRequired__color); margin-block-start: var(--hsElevate--spacing--4); } /* 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); border-radius: var(--hsElevate--button--primary__borderRadius); 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: var(--hsElevate--button--primary__fontSize); font-style: var(--hsElevate--button--primary__fontStyle); font-weight: var(--hsElevate--button--primary__fontWeight); padding-block: var(--hsElevate--spacing--20); padding-inline: var(--hsElevate--spacing--24); text-align: center; text-decoration: none; transition: all 0.15s linear; 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; } /* Captcha */ .grecaptcha-badge { margin-block: 0; margin-inline: auto; } /* 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; } } .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 */ #hs_cos_wrapper_footer-module-5 hr { border:0 none; border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:rgba(48,63,89,1.0); margin-left:auto; margin-right:auto; margin-top:10px; margin-bottom:10px; width:100%; } @font-face { font-family: "Roboto Slab"; font-weight: 100; font-style: normal; font-display: swap; src: url("/_hcms/googlefonts/Roboto_Slab/100.woff2") format("woff2"), url("/_hcms/googlefonts/Roboto_Slab/100.woff") format("woff"); } @font-face { font-family: "Roboto Slab"; font-weight: 400; font-style: normal; font-display: swap; src: url("/_hcms/googlefonts/Roboto_Slab/regular.woff2") format("woff2"), url("/_hcms/googlefonts/Roboto_Slab/regular.woff") format("woff"); } @font-face { font-family: "Roboto Slab"; font-weight: 500; font-style: normal; font-display: swap; src: url("/_hcms/googlefonts/Roboto_Slab/500.woff2") format("woff2"), url("/_hcms/googlefonts/Roboto_Slab/500.woff") format("woff"); } @font-face { font-family: "Roboto Slab"; font-weight: 600; font-style: normal; font-display: swap; src: url("/_hcms/googlefonts/Roboto_Slab/600.woff2") format("woff2"), url("/_hcms/googlefonts/Roboto_Slab/600.woff") format("woff"); } @font-face { font-family: "Roboto Slab"; font-weight: 800; font-style: normal; font-display: swap; src: url("/_hcms/googlefonts/Roboto_Slab/800.woff2") format("woff2"), url("/_hcms/googlefonts/Roboto_Slab/800.woff") format("woff"); } @font-face { font-family: "Roboto Slab"; font-weight: 700; font-style: normal; font-display: swap; src: url("/_hcms/googlefonts/Roboto_Slab/700.woff2") format("woff2"), url("/_hcms/googlefonts/Roboto_Slab/700.woff") format("woff"); } @font-face { font-family: "Roboto Slab"; font-weight: 400; font-style: normal; font-display: swap; src: url("/_hcms/googlefonts/Roboto_Slab/regular.woff2") format("woff2"), url("/_hcms/googlefonts/Roboto_Slab/regular.woff") format("woff"); } @font-face { font-family: "Inter"; font-weight: 400; font-style: normal; font-display: swap; src: url("/_hcms/googlefonts/Inter/regular.woff2") format("woff2"), url("/_hcms/googlefonts/Inter/regular.woff") format("woff"); } @font-face { font-family: "Inter"; font-weight: 500; font-style: normal; font-display: swap; src: url("/_hcms/googlefonts/Inter/500.woff2") format("woff2"), url("/_hcms/googlefonts/Inter/500.woff") format("woff"); } @font-face { font-family: "Inter"; font-weight: 600; font-style: normal; font-display: swap; src: url("/_hcms/googlefonts/Inter/600.woff2") format("woff2"), url("/_hcms/googlefonts/Inter/600.woff") format("woff"); } @font-face { font-family: "Inter"; font-weight: 800; font-style: normal; font-display: swap; src: url("/_hcms/googlefonts/Inter/800.woff2") format("woff2"), url("/_hcms/googlefonts/Inter/800.woff") format("woff"); } @font-face { font-family: "Inter"; font-weight: 600; font-style: italic; font-display: swap; src: url("/_hcms/googlefonts/Inter/600italic.woff2") format("woff2"), url("/_hcms/googlefonts/Inter/600italic.woff") format("woff"); } @font-face { font-family: "Inter"; font-weight: 700; font-style: normal; font-display: swap; src: url("/_hcms/googlefonts/Inter/700.woff2") format("woff2"), url("/_hcms/googlefonts/Inter/700.woff") format("woff"); } @font-face { font-family: "Inter"; font-weight: 400; font-style: italic; font-display: swap; src: url("/_hcms/googlefonts/Inter/italic.woff2") format("woff2"), url("/_hcms/googlefonts/Inter/italic.woff") format("woff"); } @font-face { font-family: "Inter"; font-weight: 400; font-style: normal; font-display: swap; src: url("/_hcms/googlefonts/Inter/regular.woff2") format("woff2"), url("/_hcms/googlefonts/Inter/regular.woff") format("woff"); }