/* Theme base styles */ /* Tools Any animations, or functions used throughout the project. Note: _macros.css needs to be imported into each stylesheet where macros are used and not included here */ /* Generic This is where reset, normalize & box-sizing styles go. */ /* ========================================================================== */ /* 1. LAYOUT #layout */ /* ========================================================================== */ :root { --container-width: 1280px; /* Spacing */ --spacing-0x: 0px; --spacing-05x: 0px; --spacing-1x: 0px; --spacing-2x: 4px; --spacing-3x: 8px; --spacing-4x: 12px; --spacing-5x: 16px; --spacing-6x: 20px; --spacing-8x: 24px; --spacing-10x: 32px; --spacing-12x: 32px; --spacing-14x: 32px; --spacing-16x: 32px; --spacing-18x: 32px; --spacing-20x: 32px; --spacing-24x: 32px; --spacing-30x: 32px; /* Dnd Spacing */ --container-padding: var(--spacing-5x); --dnd-row-gap: var(--spacing-8x); /* --first-section-padding-top: var(--spacing-12x); */ --dnd-section-bottom-margin: 48px; --dnd-section-bg-padding: var(--spacing-14x) var(--spacing-24x); /* Misc */ --scroll-margin-top: 90px; } @media (min-width: 640px) { :root { /* Dnd Spacing */ /* --first-section-padding-top: 120px; */ /* --dnd-section-bottom-margin: 80px; */ /* --dnd-section-bg-padding: 80px; */ /* Misc */ --scroll-margin-top: 100px; } } @media (min-width: 820px) { :root { /* Spacing */ --spacing-05x: 2px; --spacing-1x: 4px; --spacing-2x: 8px; --spacing-3x: 12px; --spacing-4x: 16px; --spacing-5x: 20px; --spacing-6x: 24px; --spacing-8x: 32px; --spacing-10x: 40px; --spacing-12x: 48px; --spacing-14x: 56px; --spacing-16x: 64px; --spacing-18x: 72px; --spacing-20x: 80px; --spacing-24x: 96px; --spacing-30x: 120px; /* Dnd Spacing */ --dnd-row-gap: var(--spacing-14x); } } @media (min-width: 1024px) { :root { /* Dnd Spacing */ /* --first-section-padding-top: 160px; */ --dnd-section-bottom-margin: var(--spacing-24x); /* --dnd-section-bg-padding: 120px; */ /* Misc */ --scroll-margin-top: var(--spacing-30x); } } /* ========================================================================== */ /* 2. COLORS #clrs */ /* ========================================================================== */ :root, :host { --yellow-50: #FEFBF4; --yellow-base: #EAAB2D; --dark-blue: #0D2437; --light-periwinkle: #CCCEDF; --cultured: #F6F6F9; --ceil: #98A4CC; --blue-50: #D6E9F7; --blue-base: #3393D6; --blue-600: #22628F; --white: #FFFFFF; --light-gray: #F8F9FF; --bright-gray: #E5EFF6; --dark-gray: #656D88; --background-blue: #F2F9FC; --border-base: var(--light-periwinkle); --border-dark: var(--text-base); --text-base: var(--dark-blue); --text-light: var(--dark-gray); --form-error: #D63633; --form-placeholders: var(--text-light); } /* ========================================================================== */ /* 3. TYPOGRAPHY #typo */ /*=========================================================================== */ :root { /* ========================================================================== */ /* base */ --body-font: 'Inter', sans-serif; --heading-font: 'Sora', sans-serif; /* ========================================================================== */ /* Font Sizing */ --rem-base-px: 18px; --base-line-height: 1.4; --secondary-line-height: 1.2; /* update multiplier to change responsive sizing, unless design has specific sizing */ --h1-font-size: clamp(2.03rem, calc(1.260rem + 2.158vw), 2.99rem); /* 36px - 54px */ --h2-font-size: clamp(1.80rem, calc(1.253rem + 1.543vw), 2.49rem); /* 32px - 45px */ --h3-font-size: clamp(1.60rem, calc(1.224rem + 1.062vw), 2.07rem); /* 29px - 37px */ --h4-font-size: clamp(1.42rem, calc(1.181rem + 0.684vw), 1.73rem); /* 26px - 31px */ --h5-font-size: clamp(1.27rem, calc(1.127rem + 0.391vw), 1.44rem); /* 23px - 26px */ --h6-font-size: clamp(1.13rem, calc(1.065rem + 0.169vw), 1.20rem); /* 20px - 22px */ --preheader-font-size: 0.8333rem; /* 15px */ --text-sm: 0.8333rem; /* 15px */ --text-xs: 0.6667rem; /* 12px */ } /* ========================================================================== */ /* 4. Global Styles #styles */ /*=========================================================================== */ :root { /* General */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-round: 150px; --transition: all 300ms cubic-bezier(.4,0,.2,1); } /* ========================================================================== */ /* 5. Buttons */ /* ========================================================================== */ :root { --btn-font-size: var(--rem-base-px); --btn-font-weight: 600; --btn-line-height: 1; --btn-text-decoration: none; --btn-text-decoration-color: transparent; --btn-hover-text-decoration-color: transparent; --btn-text-color: var(--text-base); --btn-width: fit-content; --btn-padding: var(--spacing-4x) var(--spacing-6x); --btn-bg-color: transparent; --btn-border-color: transparent; --btn-hover-text-color: var(--white); --btn-hover-bg-color: transparent; --btn-hover-border-color: transparent; --btn-border-radius: var(--radius-round); --btn-transition: var(--transition); @media (max-width: 820px) { --btn-width: stretch; } } /* ========================================================================== */ /* 5. FORMS #form */ /* ========================================================================== */ form, .form, form :before, .form :before, form :after, .form :after, div[data-hsfc-id=Renderer] div.hsfc-FormWrapper:not(div[data-hsfc-id=Renderer] a.hsfc-FormWrapper) { --form-font-family: var(--body-font); /* ========================================================================== */ /* Labels */ --legend-font-size: 0.9375rem; --label-font-family: var(--form-font-family); --label-font-size: 0.7778rem; --label-font-weight: 700; --label-line-height: 1; --label-color: var(--text-base); --label-margin-b: 8px; --label-error-font-size: var(--text-xs); --label-error-font-weight: 400; --label-error-line-height: 1; --label-error-color: var(--form-error); --label-error-image: url(''); /* ========================================================================== */ /* Text Input */ --input-font-size: 0.8889rem; --input-font-weight: 400; --input-line-height: 1; --input-color-text: var(--text-base); --input-color-text-placeholder: var(--form-placeholders); --input-color-required: var(--blue-base); --input-color-bg: var(--white); --input-border-width: 1px; --input-border-style: solid; --input-border-color: var(--border-dark); --input-border: var(--input-border-width) var(--input-border-style) var(--input-border-color); --input-border-radius: var(--radius-sm); --input-padding: var(--spacing-4x); --input-spacing-y: var(--spacing-6x); --input-gap: var(--spacing-4x); --input-transition: var(--transition); --input-color-outline: transparent; /* States */ --input-error-color-border: var(--form-error); --input-error-color-outline: transparent; --input-focus-color-border: var(--yellow-base); --input-disabled-color-text: var(); --input-disabled-color-border: var(); --input-disabled-color-bg: var(); --textarea-height: 113px; /* ========================================================================== */ /* Checkbox */ --checkbox-font-family: var(--form-font-family); --checkbox-font-size: var(--text-sm); --checkbox-font-weight: 400; --checkbox-line-height: 20px; --checkbox-color-text: var(--text-light); --checkbox-dimensions: 20px; --checkbox-image-dimensions: 18px; --checkbox-border-width: 1px; --checkbox-border-style: solid; --checkbox-border-color: var(--border-dark); --checkbox-border: var(--checkbox-border-width) var(--checkbox-border-style) var(--checkbox-border-color); --checkbox-border-radius: var(--radius-xs); --checkbox-color-bg: var(--white); /* States */ --checkbox-hover-image: url(); --checkbox-hover-color-border: var(--yellow-base); --checkbox-checked-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxOCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8ZyBpZD0iNDc5YTdhNjIiPgogICAgPHBhdGggaWQ9Ijc0MjE5YTlkIiBkPSJNMTMuODQyNyA2LjE1NzMzQzE0LjA1MjQgNi4zNjcxMSAxNC4wNTI0IDYuNzA2MzIgMTMuODQyNyA2LjkxMzg2TDcuOTUxMTMgMTIuODA3NkM3Ljc0MTM1IDEzLjAxNzQgNy40MDIxNCAxMy4wMTc0IDcuMTk0NiAxMi44MDc2TDQuMTU3MzMgOS43NzI2QzMuOTQ3NTYgOS41NjI4MiAzLjk0NzU2IDkuMjIzNjEgNC4xNTczMyA5LjAxNjA3QzQuMzY3MTEgOC44MDg1MyA0LjcwNjMyIDguODA2MjkgNC45MTM4NiA5LjAxNjA3TDcuNTY5NTIgMTEuNjcxN0wxMy4wODM5IDYuMTU3MzNDMTMuMjkzNyA1Ljk0NzU2IDEzLjYzMjkgNS45NDc1NiAxMy44NDA0IDYuMTU3MzNIMTMuODQyN1oiIGZpbGw9IiMwRDI0MzciPjwvcGF0aD4KICA8L2c+Cjwvc3ZnPg==); /* SVG base64 format */ --checkbox-checked-color-bg: var(--yellow-base); --checkbox-checked-color-image-bg: var(--text-base); --checkbox-checked-color-border: var(--yellow-base); --checkbox-checked-hover-color-bg: var(--yellow-base); --checkbox-checked-hover-color-border: var(--yellow-base); /* --checkbox-error-color-border: var(); --checkbox-disabled-color-text: var(); --checkbox-disabled-color-bg: var(); --checkbox-disabled-color-border: var(); --checkbox-disabled-checked-image: url(); --checkbox-disabled-checked-color-bg: var(); */ /* ========================================================================== */ /* Radio */ --radio-font-family: var(--form-font-family); --radio-font-size: var(--checkbox-font-size); --radio-font-weight: var(--checkbox-font-weight); --radio-color-text: var(--checkbox-color-text); --radio-line-height: var(--checkbox-line-height); --radio-dimensions: 20px; --radio-inner-dimensions: 14px; --radio-color-bg: var(--white); --radio-border-width: 1px; --radio-border-style: solid; --radio-border-color: var(--border-dark); --radio-border: var(--radio-border-width) var(--radio-border-style) var(--radio-border-color); --radio-border-radius: var(--radius-round); /* States */ --radio-hover-color-inner: var(--white); --radio-hover-border: 1px solid var(--yellow-base); --radio-checked-color-inner: var(--yellow-base); --radio-checked-color-bg: var(--white); --radio-checked-color-border: 1px solid var(--yellow-base); --radio-checked-hover-color-border: 1px solid var(--yellow-base); /* --radio-error-color-border: var(); --radio-disabled-color-text: var(); --radio-disabled-color-bg: var(); --radio-disabled-color-border: 1px solid var(); --radio-disabled-color-inner: var(); --radio-disabled-checked-color-bg: var(); --radio-disabled-checked-color-border: 2px solid var(); --radio-disabled-checked-color-inner: var(); */ /* ========================================================================== */ /* Select */ --select-icon: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTMiIGhlaWdodD0iNyIgdmlld0JveD0iMCAwIDEzIDciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggaWQ9IjJkZDRlYWJhIiBkPSJNMCAwLjAwNTU1MDg3TDEzIDBMNi41MDc3MyA3TDAgMC4wMDU1NTA4N1oiIGZpbGw9IiNFQUFCMkQiPjwvcGF0aD4KPC9zdmc+); /* ========================================================================== */ /* datepicker */ /* --date-input-icon: url(); --date-input-icon-height: 24px; --date-input-icon-width: 20px; --date-input-margin-right: 20px; --date-picker-font: var(--body-font); --date-picker-color: var(); --date-picker-border: none; --date-picker-border-radius: var(--radius-md); --date-picker-number-hover-color: var(); --date-picker-number-hover-bg: var(); --date-picker-number-today-color: var(); --date-picker-number-selected-color: var(); --date-picker-number-selected-bg: var(); */ } /* ========================================================================== */ /* New Form Variables */ div[data-hsfc-id=Renderer] div.hsfc-FormWrapper:not(div[data-hsfc-id=Renderer] a.hsfc-FormWrapper) { --hsf-global__font-family: var(--form-font-family); --hsf-row__horizontal-spacing: var(--input-gap); --hsf-row__vertical-spacing: var(--input-spacing-y); --hsf-module__vertical-spacing: var(--spacing-2x); --hsf-erroralert__font-family: var(--form-font-family); --hsf-erroralert__font-size: var(--label-error-font-size); --hsf-erroralert__color: var(--form-error); --hsf-richtext__color: var(--label-color); --hsf-background__background-color: none; --hsf-background__background-image: none; --hsf-background__background-size: none; --hsf-background__background-position: none; --hsf-background__background-repeat: none; --hsf-background__border-style: none; --hsf-background__border-color: transparent; --hsf-background__border-radius: 0; --hsf-background__border-width: 0; --hsf-background__padding: 0; /* --hsf-field-label__font-family: var(--label-font-family); --hsf-field-label__font-size: var(--label-font-size); */ --hsf-field-input__color: var(--input-color-text); --hsf-field-label-requiredindicator__color: var(--input-color-required); --hsf-field-input__font-size: var(--input-font-size); --hsf-field-input__background-color: var(--input-color-bg); --hsf-field-input__placeholder-color: var(--input-color-text-placeholder); --hsf-field-input__border-width: var(--input-border-width); --hsf-field-input__border-style: var(--input-border-style); --hsf-field-input__border-color: var(--input-border-color); --hsf-field-input__border-radius: var(--input-border-radius); --hsf-field-input__padding: var(--input-padding); --hsf-field-checkbox__padding: 0 !important; --hsf-field-checkbox__color: var(--checkbox-color-bg); --hsf-field-checkbox__background-color: var(--checkbox-color-bg); --hsf-field-checkbox__border-width: var(--checkbox-border-width); --hsf-field-checkbox__border-style: var(--checkbox-border-style); --hsf-field-checkbox__border-color: var(--checkbox-border-color); --hsf-field-radio__padding: 0 !important; --hsf-field-radio__border-width: var(--radio-border-width); --hsf-field-radio__border-style: var(--radio-border-style); --hsf-field-radio__border-color: var(--radio-border-color); --hsf-field-dropdown-options__border-radius: var(--radius-md); --hsf-navigationrow-buttons-single__justify-content: start; } /* ========================================================================== */ /* Form Color Variants */ .form--style-dark form, .form--style-dark form :before, .form--style-dark form :after, .form--bg-dark_blue .div[data-hsfc-id=Renderer] div.hsfc-FormWrapper:not(div[data-hsfc-id=Renderer] a.hsfc-FormWrapper) { --hsf-field-input__border-width: 2px; --hsf-field-input__border-color: var(--white); --hsf-field-checkbox__color: var(--blue-base); --hsf-field-checkbox__background-color: var(--white); --hsf-field-checkbox__border-color: var(--white); --hsf-field-radio__border-color: var(--white); } *, *: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; } /** * 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 */ 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 { /* 1 */ 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 Non-cosmetic design patterns including grid and layout classes) */ /* CSS variables */ :root { --column-gap: 0%; --column-width-multiplier: 8.333; } /* Mobile layout */ .row-fluid { display: flex; flex-wrap: wrap; width: 100%; gap: var(--dnd-row-gap); } .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%; } /* Desktop layout */ @media (min-width: 820px) { .row-fluid { flex-wrap: nowrap; justify-content: space-between; } .row-fluid .span1 { width: calc(var(--column-width-multiplier) * 1% * 1 - var(--column-gap) * (11 * var(--column-width-multiplier) / 100)); } .row-fluid .span2 { width: calc(var(--column-width-multiplier) * 1% * 2 - var(--column-gap) * (10 * var(--column-width-multiplier) / 100)); } .row-fluid .span3 { width: calc(var(--column-width-multiplier) * 1% * 3 - var(--column-gap) * (9 * var(--column-width-multiplier) / 100)); } .row-fluid .span4 { width: calc(var(--column-width-multiplier) * 1% * 4 - var(--column-gap) * (8 * var(--column-width-multiplier) / 100)); } .row-fluid .span5 { width: calc(var(--column-width-multiplier) * 1% * 5 - var(--column-gap) * (7 * var(--column-width-multiplier) / 100)); } .row-fluid .span6 { width: calc(var(--column-width-multiplier) * 1% * 6 - var(--column-gap) * (6 * var(--column-width-multiplier) / 100)); } .row-fluid .span7 { width: calc(var(--column-width-multiplier) * 1% * 7 - var(--column-gap) * (5 * var(--column-width-multiplier) / 100)); } .row-fluid .span8 { width: calc(var(--column-width-multiplier) * 1% * 8 - var(--column-gap) * (4 * var(--column-width-multiplier) / 100)); } .row-fluid .span9 { width: calc(var(--column-width-multiplier) * 1% * 9 - var(--column-gap) * (3 * var(--column-width-multiplier) / 100)); } .row-fluid .span10 { width: calc(var(--column-width-multiplier) * 1% * 10 - var(--column-gap) * (2 * var(--column-width-multiplier) / 100)); } .row-fluid .span11 { width: calc(var(--column-width-multiplier) * 1% * 11 - var(--column-gap) * (1 * var(--column-width-multiplier) / 100)); } } /* container */ .dnd-section { overflow-x: clip; margin: 0 0 var(--dnd-section-bottom-margin); } .content-wrapper, .dnd-section > .row-fluid { margin: 0 auto; padding: 0 var(--container-padding); max-width: calc(var(--container-width) + (var(--container-padding) * 2)); } .body-wrapper { width: 100%; } .dnd-section .dnd-column, .dnd-section .content-wrapper, .dnd-section[class*="body_dnd_area-row"] { padding-right: 0 !important; padding-left: 0 !important; } .dnd-section > .row-fluid:has(.module-wrapper--full-width) { max-width: 100%; padding-inline: 0; } /* set custom padding for fixed header */ .dnd-section:has([class*="section-background"]) { padding-block: var(--dnd-section-bg-padding); } .dnd-section:first-child { padding-top: var(--first-section-padding-top); } .dnd-section:last-child { margin-bottom: var(--spacing-8x); } .dnd-section:last-child:has([class*="section-background"]) { margin-bottom: 0; } @media (max-width: 820px) { /* .dnd-section .row-fluid > .dnd-column:has(+ .dnd-column) { margin-bottom: var(--dnd-section-bottom-margin); } */ .dnd-column:has(.hs-horizontal-spacer) { margin-bottom: 0 !important; } .dnd-column:has(.custom-text-wrapper) + .dnd-column:has(.custom-img-wrapper) { order: 1; .dnd-section:first-child & { order: unset; } } .dnd-column:has(+ .dnd-column .custom-img-wrapper) { order: 2; .dnd-section:first-child & { order: unset; } } } @media (min-width: 640px) { .dnd-section[class*="force-full-width-section"] .dnd-column { padding: 0; } } /* Elements Base HMTL elements are styled in this section (,

, ,

,