/* Settings */ /* * Static CSS variable defaults for local development. * * The local dev server cannot process HubL, so CSS variables set via * HubL theme expressions in .hubl.css files are never resolved. * This file provides hardcoded fallbacks matching fields.json defaults. * * On the CMS, the HubL-generated :root declarations come AFTER this file * and override these values with the actual theme settings. * * Keep this file in sync with fields.json defaults when changing theme settings. */ :root { /* ======================================== COLORS ======================================== */ /* Semantic Color Roles */ --hsElevate--color-role--primary: #342775; --hsElevate--color-role--secondary: #FFB600; --hsElevate--color-role--accent1: #4B48B7; --hsElevate--color-role--accent2: #A69EEF; --hsElevate--color-role--lightBackground: #F1F1F8; --hsElevate--color-role--lightBackgroundAlt: #E5E5F2; --hsElevate--color-role--darkBackground: #10001F; --hsElevate--color-role--darkBackgroundAlt: #18003A; --hsElevate--color-role--lightText: #FFFFFF; --hsElevate--color-role--darkText: #10001F; --hsElevate--color-role--border: #4B48B7; /* Light mode (inherits from color roles) */ --hsElevate--color--light--background: #FFFFFF; --hsElevate--color--light--foreground: #000000; /* Dark mode (inherits from color roles) */ --hsElevate--color--dark--background: #000000; --hsElevate--color--dark--foreground: #FFFFFF; /* Theme colors (inherits from color roles) */ --hsElevate--color--theme--primary: #2563EB; --hsElevate--color--theme--secondary: #60A5FA; --hsElevate--color--theme--accent: #7C3AED; --hsElevate--color--theme--surface: #F5F5F5; /* Status */ --hsElevate--color--status--success: #65C728; --hsElevate--color--status--error: #E31A1A; /* ======================================== SECTION COLORS (fallbacks for local dev — HubL _section-colors sets these on CMS) ======================================== */ /* Light section 1 */ --hsElevate--section--lightSection--1__backgroundColor: #F1F1F8; --hsElevate--section--lightSection--1__textColor: #10001F; --hsElevate--section--lightSection--1__headingColor: #10001F; --hsElevate--section--lightSection--1__bodyColor: #10001F; --hsElevate--section--lightSection--1__accentColor: #342775; --hsElevate--section--lightSection--1__captionColor: #10001F; /* Dark section 1 */ --hsElevate--section--darkSection--1__backgroundColor: #10001F; --hsElevate--section--darkSection--1__textColor: #FFFFFF; --hsElevate--section--darkSection--1__headingColor: #FFFFFF; --hsElevate--section--darkSection--1__bodyColor: #FFFFFF; --hsElevate--section--darkSection--1__accentColor: #FFB600; --hsElevate--section--darkSection--1__captionColor: #FFFFFF; /* ======================================== BODY COLOR MODE (defaults to light) ======================================== */ --hsElevate--body__backgroundColor: #FFFFFF; --hsElevate--body__textColor: #525252; --hsElevate--body__headingColor: #000000; /* ======================================== TYPOGRAPHY ======================================== */ /* Typography colors */ --hsElevate--typography__headings-color: #000000; --hsElevate--typography__body-color: #525252; --hsElevate--typography__headings-color--dark: #FFFFFF; --hsElevate--typography__body-color--dark: #FFFFFF; /* Body - Desktop defaults * Body LG = 18px/29px, Body MD = 16px/26px, Body SM = 14px/20px */ --hsElevate--baseText__fontSize: 16px; --hsElevate--body__font: "DM Sans", sans-serif; --hsElevate--body--small__fontSize: 0.875rem; --hsElevate--body--small__lineHeight: 20px; --hsElevate--body--medium__fontSize: 1rem; --hsElevate--body--medium__lineHeight: 26px; --hsElevate--body__fontSize: 1.125rem; --hsElevate--body--large__fontSize: 1.125rem; --hsElevate--body--large__lineHeight: 29px; --hsElevate--body__fontWeight: 400; --hsElevate--body__fontStyle: normal; --hsElevate--body__lineHeight: 29px; /* Display - Desktop */ --hsElevate--display__font: "DM Sans", sans-serif; --hsElevate--display__fontSize: 4.5rem; /* 72px */ --hsElevate--display__fontWeight: 400; --hsElevate--display__fontStyle: normal; --hsElevate--display__lineHeight: 72px; --hsElevate--display__letterSpacing: 0em; --hsElevate--display__marginBottom: 32px; /* Headings - Desktop */ --hsElevate--h1__font: "DM Sans", sans-serif; --hsElevate--h1__fontSize: 3rem; --hsElevate--h1__fontWeight: 400; --hsElevate--h1__fontStyle: normal; --hsElevate--h1__lineHeight: 56px; --hsElevate--h1__letterSpacing: -0.02em; --hsElevate--h2__font: "DM Sans", sans-serif; --hsElevate--h2__fontSize: 2.25rem; --hsElevate--h2__fontWeight: 400; --hsElevate--h2__fontStyle: normal; --hsElevate--h2__lineHeight: 44px; --hsElevate--h2__letterSpacing: -0.02em; --hsElevate--h3__font: "DM Sans", sans-serif; --hsElevate--h3__fontSize: 1.75rem; --hsElevate--h3__fontWeight: 400; --hsElevate--h3__fontStyle: normal; --hsElevate--h3__lineHeight: 36px; --hsElevate--h3__letterSpacing: -0.01em; --hsElevate--h4__font: "DM Sans", sans-serif; --hsElevate--h4__fontSize: 1.375rem; --hsElevate--h4__fontWeight: 400; --hsElevate--h4__fontStyle: normal; --hsElevate--h4__lineHeight: 30px; --hsElevate--h4__letterSpacing: 0em; --hsElevate--h5__font: "DM Sans", sans-serif; --hsElevate--h5__fontSize: 1.125rem; --hsElevate--h5__fontWeight: 400; --hsElevate--h5__fontStyle: normal; --hsElevate--h5__lineHeight: 26px; --hsElevate--h5__letterSpacing: 0em; --hsElevate--h6__font: "DM Sans", sans-serif; --hsElevate--h6__fontSize: 1rem; --hsElevate--h6__fontWeight: 400; --hsElevate--h6__fontStyle: normal; --hsElevate--h6__lineHeight: 24px; --hsElevate--h6__letterSpacing: 0em; /* Heading Margin Bottom - Desktop */ --hsElevate--h1__marginBottom: 32px; --hsElevate--h2__marginBottom: 28px; --hsElevate--h3__marginBottom: 24px; --hsElevate--h4__marginBottom: 20px; --hsElevate--h5__marginBottom: 16px; --hsElevate--h6__marginBottom: 12px; /* Heading tablet modifier */ /* Links - Primary */ --hsElevate--link--primary__fontColor: #2B7FFF; --hsElevate--link--primary__textDecorationColor: #2B7FFF; --hsElevate--link--primary__hover--fontColor: #2B7FFF; --hsElevate--link--primary__hover--textDecorationColor: #2B7FFF; /* Links - Secondary */ --hsElevate--link--secondary__fontColor: #000000; --hsElevate--link--secondary__hover--fontColor: #2B7FFF; --hsElevate--link--secondary__hover--textDecorationColor: #2B7FFF; /* Navigation - Main Links */ --hsElevate--navigation__font: "DM Sans", sans-serif; --hsElevate--navigation__fontSize--mobile: 0.8125rem; --hsElevate--navigation__fontWeight--mobile: 500; --hsElevate--navigation__fontStyle--mobile: normal; --hsElevate--navigation__fontSize--sm: 0.8125rem; --hsElevate--navigation__fontWeight--sm: 500; --hsElevate--navigation__fontStyle--sm: normal; --hsElevate--navigation__fontSize--md: 0.875rem; --hsElevate--navigation__fontWeight--md: 500; --hsElevate--navigation__fontStyle--md: normal; --hsElevate--navigation__fontSize--lg: 0.875rem; --hsElevate--navigation__fontWeight--lg: 500; --hsElevate--navigation__fontStyle--lg: normal; --hsElevate--navigation__fontSize--xl: 0.9375rem; --hsElevate--navigation__fontWeight--xl: 500; --hsElevate--navigation__fontStyle--xl: normal; --hsElevate--navigation__fontSize--2xl: 0.9375rem; --hsElevate--navigation__fontWeight--2xl: 500; --hsElevate--navigation__fontStyle--2xl: normal; /* Navigation - Dropdown Links */ --hsElevate--navigationDropdown__font: "DM Sans", sans-serif; --hsElevate--navigationDropdown__fontSize--mobile: 0.8125rem; --hsElevate--navigationDropdown__fontWeight--mobile: 400; --hsElevate--navigationDropdown__fontStyle--mobile: normal; --hsElevate--navigationDropdown__fontSize--sm: 0.8125rem; --hsElevate--navigationDropdown__fontWeight--sm: 400; --hsElevate--navigationDropdown__fontStyle--sm: normal; --hsElevate--navigationDropdown__fontSize--md: 0.875rem; --hsElevate--navigationDropdown__fontWeight--md: 400; --hsElevate--navigationDropdown__fontStyle--md: normal; --hsElevate--navigationDropdown__fontSize--lg: 0.875rem; --hsElevate--navigationDropdown__fontWeight--lg: 400; --hsElevate--navigationDropdown__fontStyle--lg: normal; --hsElevate--navigationDropdown__fontSize--xl: 0.9375rem; --hsElevate--navigationDropdown__fontWeight--xl: 400; --hsElevate--navigationDropdown__fontStyle--xl: normal; --hsElevate--navigationDropdown__fontSize--2xl: 0.9375rem; --hsElevate--navigationDropdown__fontWeight--2xl: 400; --hsElevate--navigationDropdown__fontStyle--2xl: normal; /* Navigation - Link Spacing (default) */ /* Quotes */ --hsElevate--quotes__font: "DM Sans", sans-serif; --hsElevate--quotes__fontColor: #000000; --hsElevate--quotes__fontSize: 1.25rem; --hsElevate--quotes__fontWeight: 400; --hsElevate--quotes__fontStyle: italic; /* Captions */ --hsElevate--captions__font: "DM Sans", sans-serif; --hsElevate--captions__fontSize: 0.75rem; --hsElevate--captions__fontWeight: 400; --hsElevate--captions__fontStyle: normal; --hsElevate--captions__case: uppercase; /* Eyebrow - Desktop */ --hsElevate--eyebrow__fontSize: 1rem; /* 16px */ --hsElevate--eyebrow__lineHeight: 22px; --hsElevate--eyebrow__fontWeight: 500; --hsElevate--eyebrow__letterSpacing: 0.05em; --hsElevate--eyebrow__textTransform: uppercase; --hsElevate--eyebrow__marginBottom: 12px; /* Eyebrow colors */ --hsElevate--eyebrow__color--light: #10001f; --hsElevate--eyebrow__color--dark: #a69eef; --hsElevate--eyebrow__color: #10001f; /* Body LG margin - Desktop */ --hsElevate--body--large__marginBottom: 0; /* Body MD margin - Desktop */ --hsElevate--body--medium__marginBottom: 16px; /* Body SM margin - Desktop */ --hsElevate--body--small__marginBottom: 12px; /* Label L - Desktop */ --hsElevate--label--large__fontSize: 1.0625rem; /* 17px */ --hsElevate--label--large__lineHeight: 24px; --hsElevate--label--large__marginBottom: 8px; /* Label M - Desktop */ --hsElevate--label--medium__fontSize: 0.9375rem; /* 15px */ --hsElevate--label--medium__lineHeight: 21px; --hsElevate--label--medium__marginBottom: 6px; /* Label S - Desktop */ --hsElevate--label--small__fontSize: 0.875rem; /* 14px */ --hsElevate--label--small__lineHeight: 20px; --hsElevate--label--small__marginBottom: 4px; /* Stat - Desktop */ --hsElevate--stat__fontSize: 8rem; /* 128px */ --hsElevate--stat__lineHeight: 128px; --hsElevate--stat__fontWeight: 200; --hsElevate--stat__fontStyle: normal; --hsElevate--stat__letterSpacing: 0em; --hsElevate--stat__marginBottom: 8px; /* Stat colors */ --hsElevate--stat__color--light: #A69EEF; --hsElevate--stat__color--dark: #a69eef; /* CTA - Desktop */ --hsElevate--cta__fontSize: 1.25rem; /* 20px */ --hsElevate--cta__lineHeight: 28px; --hsElevate--cta__fontWeight: 600; --hsElevate--cta__fontStyle: normal; --hsElevate--cta__letterSpacing: 0.01em; --hsElevate--cta__textTransform: uppercase; --hsElevate--cta__marginBottom: 12px; /* Tag - Desktop */ --hsElevate--tag__fontSize: 0.75rem; /* 12px */ --hsElevate--tag__lineHeight: 16px; --hsElevate--tag__fontWeight: 500; --hsElevate--tag__fontStyle: normal; --hsElevate--tag__letterSpacing: 0.05em; --hsElevate--tag__textTransform: uppercase; --hsElevate--tag__marginBottom: 4px; /* Foundational Border Radius Scale */ --hsElevate--radius--extra-small: 2px; --hsElevate--radius--small: 4px; --hsElevate--radius--medium: 6px; --hsElevate--radius--large: 6px; /* Images */ /* ======================================== BUTTON SIZING ======================================== */ --hsElevate--button__height: 48px; --hsElevate--button__paddingHorizontal: 24px; /* ======================================== BUTTON VARIANTS ======================================== */ /* Primary button — filled, dark-blue bg, white text */ --hsElevate--button--primary__buttonFill: filled; --hsElevate--button--primary__fontFamily: "DM Sans", sans-serif; --hsElevate--button--primary__fontSize: 1rem; --hsElevate--button--primary__fontWeight: 500; --hsElevate--button--primary__textColor: #FFFFFF; --hsElevate--button--primary__hover--textColor: #090C2F; --hsElevate--button--primary__borderRadius: var(--hsElevate--radius--small); --hsElevate--button--primary__backgroundColor: #090C2F; --hsElevate--button--primary__hover--backgroundColor: #BCD6F1; --hsElevate--button--primary__borderThickness: 0px; --hsElevate--button--primary__hover--borderThickness: 0px; /* Secondary button — filled, light-blue bg, dark-blue text */ --hsElevate--button--secondary__buttonFill: filled; --hsElevate--button--secondary__fontFamily: "DM Sans", sans-serif; --hsElevate--button--secondary__fontSize: 1rem; --hsElevate--button--secondary__fontWeight: 500; --hsElevate--button--secondary__textColor: #090C2F; --hsElevate--button--secondary__hover--textColor: #090C2F; --hsElevate--button--secondary__borderRadius: var(--hsElevate--radius--small); --hsElevate--button--secondary__backgroundColor: #BCD6F1; --hsElevate--button--secondary__hover--backgroundColor: #BCD6F1; --hsElevate--button--secondary__borderThickness: 0px; --hsElevate--button--secondary__hover--borderThickness: 0px; /* Primary outline button — no fill, dark-blue border + text */ --hsElevate--button--primary-outline__buttonFill: no_fill; --hsElevate--button--primary-outline__fontFamily: "DM Sans", sans-serif; --hsElevate--button--primary-outline__fontSize: 1rem; --hsElevate--button--primary-outline__fontWeight: 500; --hsElevate--button--primary-outline__textColor: #090C2F; --hsElevate--button--primary-outline__hover--textColor: #FFFFFF; --hsElevate--button--primary-outline__borderRadius: var(--hsElevate--radius--small); --hsElevate--button--primary-outline__hover--backgroundColor: #090C2F; --hsElevate--button--primary-outline__borderThickness: 2px; --hsElevate--button--primary-outline__hover--borderThickness: 2px; --hsElevate--button--primary-outline__borderColor: #090C2F; --hsElevate--button--primary-outline__hover--borderColor: #090C2F; /* Secondary outline button — no fill, light-blue border + text */ --hsElevate--button--secondary-outline__buttonFill: no_fill; --hsElevate--button--secondary-outline__fontFamily: "DM Sans", sans-serif; --hsElevate--button--secondary-outline__fontSize: 1rem; --hsElevate--button--secondary-outline__fontWeight: 500; --hsElevate--button--secondary-outline__textColor: #BCD6F1; --hsElevate--button--secondary-outline__hover--textColor: #090C2F; --hsElevate--button--secondary-outline__borderRadius: var(--hsElevate--radius--small); --hsElevate--button--secondary-outline__hover--backgroundColor: #BCD6F1; --hsElevate--button--secondary-outline__borderThickness: 2px; --hsElevate--button--secondary-outline__hover--borderThickness: 2px; --hsElevate--button--secondary-outline__borderColor: #BCD6F1; --hsElevate--button--secondary-outline__hover--borderColor: #BCD6F1; /* Dark primary button — filled white bg, dark-blue text (for dark backgrounds) */ --hsElevate--button--dark-primary__buttonFill: filled; --hsElevate--button--dark-primary__fontFamily: "DM Sans", sans-serif; --hsElevate--button--dark-primary__fontSize: 1rem; --hsElevate--button--dark-primary__fontWeight: 500; --hsElevate--button--dark-primary__textColor: #090C2F; --hsElevate--button--dark-primary__hover--textColor: #090C2F; --hsElevate--button--dark-primary__borderRadius: var(--hsElevate--radius--small); --hsElevate--button--dark-primary__backgroundColor: #FFFFFF; --hsElevate--button--dark-primary__hover--backgroundColor: #BCD6F1; --hsElevate--button--dark-primary__borderThickness: 0px; --hsElevate--button--dark-primary__hover--borderThickness: 0px; /* Dark primary outline button — no fill, white border + text (for dark backgrounds) */ --hsElevate--button--dark-primary-outline__buttonFill: no_fill; --hsElevate--button--dark-primary-outline__fontFamily: "DM Sans", sans-serif; --hsElevate--button--dark-primary-outline__fontSize: 1rem; --hsElevate--button--dark-primary-outline__fontWeight: 500; --hsElevate--button--dark-primary-outline__textColor: #FFFFFF; --hsElevate--button--dark-primary-outline__hover--textColor: #090C2F; --hsElevate--button--dark-primary-outline__borderRadius: var(--hsElevate--radius--small); --hsElevate--button--dark-primary-outline__hover--backgroundColor: #FFFFFF; --hsElevate--button--dark-primary-outline__borderThickness: 2px; --hsElevate--button--dark-primary-outline__hover--borderThickness: 2px; --hsElevate--button--dark-primary-outline__borderColor: #FFFFFF; --hsElevate--button--dark-primary-outline__hover--borderColor: #FFFFFF; /* Link button — font defaults (body_sm) */ --hsElevate--button--link__fontFamily: "DM Sans", sans-serif; --hsElevate--button--link__fontSize: 0.875rem; --hsElevate--button--link__fontWeight: 400; /* Dark link button — font defaults (body_sm) */ --hsElevate--button--dark-link__fontFamily: "DM Sans", sans-serif; --hsElevate--button--dark-link__fontSize: 0.875rem; --hsElevate--button--dark-link__fontWeight: 400; /* Surface button — filled #FAFAFA bg, dark text, no border (surface/muted style) */ --hsElevate--button--surface__backgroundColor: #FAFAFA; --hsElevate--button--surface__hover--backgroundColor: #F0F0F0; --hsElevate--button--surface__active--backgroundColor: #E8E8E8; --hsElevate--button--surface__textColor: #090C2F; --hsElevate--button--surface__hover--textColor: #090C2F; --hsElevate--button--surface__active--textColor: #090C2F; --hsElevate--button--surface__borderThickness: 0px; --hsElevate--button--surface__hover--borderThickness: 0px; --hsElevate--button--surface__active--borderThickness: 0px; --hsElevate--button--surface__borderColor: transparent; --hsElevate--button--surface__hover--borderColor: transparent; --hsElevate--button--surface__active--borderColor: transparent; --hsElevate--button--surface__borderRadius: 50px; /* ======================================== ICONS ======================================== */ /* Icon sizes - Desktop */ --hsElevate--icon--display__size: 56px; --hsElevate--icon--display__padding: 18px; --hsElevate--icon--display__margin: 22px; --hsElevate--icon--display__borderRadius: 18px; --hsElevate--icon--heading1__size: 48px; --hsElevate--icon--heading1__padding: 16px; --hsElevate--icon--heading1__margin: 20px; --hsElevate--icon--heading1__borderRadius: 16px; --hsElevate--icon--heading2__size: 40px; --hsElevate--icon--heading2__padding: 14px; --hsElevate--icon--heading2__margin: 18px; --hsElevate--icon--heading2__borderRadius: 14px; --hsElevate--icon--heading3__size: 32px; --hsElevate--icon--heading3__padding: 12px; --hsElevate--icon--heading3__margin: 16px; --hsElevate--icon--heading3__borderRadius: 12px; --hsElevate--icon--heading4__size: 24px; --hsElevate--icon--heading4__padding: 10px; --hsElevate--icon--heading4__margin: 14px; --hsElevate--icon--heading4__borderRadius: 10px; --hsElevate--icon--heading5__size: 20px; --hsElevate--icon--heading5__padding: 8px; --hsElevate--icon--heading5__margin: 12px; --hsElevate--icon--heading5__borderRadius: 8px; --hsElevate--icon--heading6__size: 16px; --hsElevate--icon--heading6__padding: 6px; --hsElevate--icon--heading6__margin: 10px; --hsElevate--icon--heading6__borderRadius: 6px; /* Icon sizes - Eyebrow & Body text - Desktop */ --hsElevate--icon--eyebrow__size: 20px; --hsElevate--icon--eyebrow__padding: 10px; --hsElevate--icon--eyebrow__margin: 8px; --hsElevate--icon--eyebrow__borderRadius: 10px; --hsElevate--icon--bodyLg__size: 18px; --hsElevate--icon--bodyLg__padding: 6px; --hsElevate--icon--bodyLg__margin: 10px; --hsElevate--icon--bodyLg__borderRadius: 8px; --hsElevate--icon--bodyMd__size: 16px; --hsElevate--icon--bodyMd__padding: 4px; --hsElevate--icon--bodyMd__margin: 8px; --hsElevate--icon--bodyMd__borderRadius: 6px; --hsElevate--icon--bodySm__size: 14px; --hsElevate--icon--bodySm__padding: 4px; --hsElevate--icon--bodySm__margin: 8px; --hsElevate--icon--bodySm__borderRadius: 6px; /* Icon sizes - List text - Desktop */ --hsElevate--icon--listLg__size: 18px; --hsElevate--icon--listLg__padding: 6px; --hsElevate--icon--listLg__margin: 10px; --hsElevate--icon--listLg__borderRadius: 8px; --hsElevate--icon--listMd__size: 16px; --hsElevate--icon--listMd__padding: 4px; --hsElevate--icon--listMd__margin: 8px; --hsElevate--icon--listMd__borderRadius: 6px; --hsElevate--icon--listSm__size: 14px; --hsElevate--icon--listSm__padding: 4px; --hsElevate--icon--listSm__margin: 8px; --hsElevate--icon--listSm__borderRadius: 6px; /* Material Symbols fill (default: outlined) */ /* Icon style — Primary (primary bg, light text icon) */ --hsElevate--icon--primary__color: #FFFFFF; --hsElevate--icon--primary__backgroundColor: #2563EB; /* Icon style — Primary Light (secondary bg, dark text icon) */ --hsElevate--icon--primaryLight__color: #000000; --hsElevate--icon--primaryLight__backgroundColor: #60A5FA; /* Icon style — Secondary (accent 1 bg, light text icon) */ --hsElevate--icon--secondary__color: #FFFFFF; --hsElevate--icon--secondary__backgroundColor: #7C3AED; /* Icon style — Surface (light bg, dark text icon) */ --hsElevate--icon--surface__color: #000000; --hsElevate--icon--surface__backgroundColor: #FFFFFF; /* Icon style — Highlight (accent 2 bg, dark text icon) */ --hsElevate--icon--highlight__color: #000000; --hsElevate--icon--highlight__backgroundColor: #A78BFA; /* ======================================== LAYOUT ======================================== */ /* Content gap tokens — fixed pixel gaps for content-gap-* utilities */ --hsElevate--contentWrapper--narrow__maxWidth: 768px; --hsElevate--contentWrapper--compact__maxWidth: 830px; --hsElevate--contentWrapper--medium__maxWidth: 1120px; --hsElevate--contentWrapper--wide__maxWidth: 1680px; --hsElevate--contentWrapper--full__maxWidth: 1920px; /* Module content max widths (breakpoint-aligned) - defaults */ --hsElevate--contentMaxWidth--sm: 640px; --hsElevate--contentMaxWidth--sm-md: 704px; --hsElevate--contentMaxWidth--md: 768px; --hsElevate--contentMaxWidth--md-lg: 896px; --hsElevate--contentMaxWidth--lg: 1024px; --hsElevate--contentMaxWidth--lg-xl: 1152px; --hsElevate--contentMaxWidth--xl: 1280px; --hsElevate--contentMaxWidth--xl-2xl: 1408px; --hsElevate--contentMaxWidth--2xl: 1536px; /* Button min widths - defaults */ --hsElevate--buttonMinWidth--small: 200px; --hsElevate--buttonMinWidth--medium: 248px; --hsElevate--buttonMinWidth--large: 292px; /* Section vertical padding - desktop defaults */ --hsElevate--section--extraSmall__verticalPadding: 72px; --hsElevate--section--small__verticalPadding: 80px; --hsElevate--section--medium__verticalPadding: 96px; --hsElevate--section--large__verticalPadding: 112px; --hsElevate--section--extraLarge__verticalPadding: 128px; /* Section horizontal padding (gutter) - desktop default */ --hsElevate--section--horizontalPadding: 120px; /* Spacer gap scale - desktop defaults */ --hsElevate--spacer--xs: 12px; --hsElevate--spacer--sm: 24px; --hsElevate--spacer--md: 32px; --hsElevate--spacer--lg: 48px; --hsElevate--spacer--xl: 72px; --hsElevate--gap--extraSmall: 16px; --hsElevate--gap--small: 24px; --hsElevate--gap--medium: 32px; --hsElevate--gap--large: 64px; --hsElevate--gap--extraLarge: 96px; --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; /* Row Gaps - Desktop defaults (tablet: 16/20/32, mobile: 12/16/24) */ --hsElevate--rowGap--small: 16px; --hsElevate--rowGap--medium: 24px; --hsElevate--rowGap--large: 40px; /* Grids */ --default-section-padding: var(--hsElevate--section--medium__verticalPadding) var(--hsElevate--section--horizontalPadding); /* Text spacing */ } /* Tablet overrides (768px to 1024px) */ @media (max-width: 1024px) { :root { /* Section vertical padding - tablet */ --hsElevate--section--extraSmall__verticalPadding: 36px; --hsElevate--section--small__verticalPadding: 72px; --hsElevate--section--medium__verticalPadding: 48px; --hsElevate--section--large__verticalPadding: 80px; --hsElevate--section--extraLarge__verticalPadding: 96px; /* Section horizontal padding (gutter) - tablet */ --hsElevate--section--horizontalPadding: 24px; /* Spacer gap scale - tablet */ --hsElevate--spacer--xs: 8px; --hsElevate--spacer--sm: 16px; --hsElevate--spacer--md: 24px; --hsElevate--spacer--lg: 32px; --hsElevate--spacer--xl: 48px; /* Row Gaps - tablet */ --hsElevate--rowGap--small: 16px; --hsElevate--rowGap--medium: 20px; --hsElevate--rowGap--large: 32px; /* Content gap tokens — tablet */ --hsElevate--contentGap--sm: 16px; --hsElevate--contentGap--md: 32px; --hsElevate--contentGap--lg: 60px; /* Body - Tablet: LG 18/29, MD 14/22, SM 12/17 */ --hsElevate--body--small__fontSize: 0.75rem; --hsElevate--body--small__lineHeight: 17px; --hsElevate--body--medium__fontSize: 0.875rem; --hsElevate--body--medium__lineHeight: 22px; --hsElevate--body__fontSize: 1.125rem; --hsElevate--body--large__fontSize: 1.125rem; --hsElevate--body--large__lineHeight: 29px; --hsElevate--body__lineHeight: 29px; /* Display - Tablet */ --hsElevate--display__fontSize: 4.5rem; /* 72px */ --hsElevate--display__lineHeight: 72px; --hsElevate--display__marginBottom: 28px; /* Eyebrow - Tablet */ --hsElevate--eyebrow__fontSize: 0.875rem; /* 14px */ --hsElevate--eyebrow__lineHeight: 20px; --hsElevate--eyebrow__fontWeight: 500; --hsElevate--eyebrow__letterSpacing: 0.05em; --hsElevate--eyebrow__marginBottom: 10px; /* Body LG margin - Tablet */ --hsElevate--body--large__marginBottom: 0; /* Body MD margin - Tablet */ --hsElevate--body--medium__marginBottom: 14px; /* Body SM margin - Tablet */ --hsElevate--body--small__marginBottom: 10px; /* Label L - Tablet */ --hsElevate--label--large__fontSize: 1rem; /* 16px */ --hsElevate--label--large__lineHeight: 22px; --hsElevate--label--large__marginBottom: 6px; /* Label M - Tablet */ --hsElevate--label--medium__lineHeight: 21px; --hsElevate--label--medium__marginBottom: 6px; /* Label S - Tablet */ --hsElevate--label--small__fontSize: 0.75rem; /* 12px */ --hsElevate--label--small__lineHeight: 17px; --hsElevate--label--small__marginBottom: 4px; /* Stat - Tablet */ --hsElevate--stat__fontSize: 7rem; /* 112px */ --hsElevate--stat__lineHeight: 112px; --hsElevate--stat__fontWeight: 200; --hsElevate--stat__fontStyle: normal; --hsElevate--stat__letterSpacing: 0em; --hsElevate--stat__marginBottom: 6px; /* CTA - Tablet */ --hsElevate--cta__fontSize: 1.125rem; /* 18px */ --hsElevate--cta__lineHeight: 26px; --hsElevate--cta__fontWeight: 600; --hsElevate--cta__fontStyle: normal; --hsElevate--cta__letterSpacing: 0.01em; --hsElevate--cta__marginBottom: 10px; /* Tag - Tablet */ --hsElevate--tag__fontSize: 0.6875rem; /* 11px */ --hsElevate--tag__lineHeight: 15px; --hsElevate--tag__fontWeight: 500; --hsElevate--tag__fontStyle: normal; --hsElevate--tag__letterSpacing: 0.05em; --hsElevate--tag__marginBottom: 4px; } } /* Mobile overrides (below 768px) */ @media (max-width: 47.999rem) { :root { /* Section vertical padding - mobile */ --hsElevate--section--extraSmall__verticalPadding: 36px; --hsElevate--section--small__verticalPadding: 72px; --hsElevate--section--medium__verticalPadding: 48px; --hsElevate--section--large__verticalPadding: 80px; --hsElevate--section--extraLarge__verticalPadding: 96px; /* Section horizontal padding (gutter) - mobile */ --hsElevate--section--horizontalPadding: 24px; /* Spacer gap scale - mobile */ --hsElevate--spacer--xs: 8px; --hsElevate--spacer--sm: 16px; --hsElevate--spacer--md: 24px; --hsElevate--spacer--lg: 32px; --hsElevate--spacer--xl: 48px; /* Row Gaps - mobile */ --hsElevate--rowGap--small: 12px; --hsElevate--rowGap--medium: 16px; --hsElevate--rowGap--large: 24px; /* Content gap tokens — mobile */ --hsElevate--contentGap--sm: 16px; --hsElevate--contentGap--md: 24px; --hsElevate--contentGap--lg: 32px; /* Body - Mobile: LG 16/25, MD 14/22, SM 12/17 */ --hsElevate--body--small__fontSize: 0.75rem; --hsElevate--body--small__lineHeight: 17px; --hsElevate--body--medium__fontSize: 0.875rem; --hsElevate--body--medium__lineHeight: 22px; --hsElevate--body__fontSize: 1rem; --hsElevate--body--large__fontSize: 1rem; --hsElevate--body--large__lineHeight: 25px; --hsElevate--body__lineHeight: 25px; /* Display - Mobile */ --hsElevate--display__fontSize: 4rem; /* 64px */ --hsElevate--display__lineHeight: 64px; --hsElevate--display__marginBottom: 24px; /* Eyebrow - Mobile */ --hsElevate--eyebrow__fontSize: 0.875rem; /* 14px */ --hsElevate--eyebrow__lineHeight: 20px; --hsElevate--eyebrow__fontWeight: 500; --hsElevate--eyebrow__letterSpacing: 0.05em; --hsElevate--eyebrow__marginBottom: 8px; /* Body LG margin - Mobile */ --hsElevate--body--large__marginBottom: 0; /* Body MD margin - Mobile */ --hsElevate--body--medium__marginBottom: 12px; /* Body SM margin - Mobile */ --hsElevate--body--small__marginBottom: 8px; /* Label L - Mobile */ --hsElevate--label--large__marginBottom: 6px; /* Label M - Mobile */ --hsElevate--label--medium__fontSize: 0.875rem; /* 14px */ --hsElevate--label--medium__lineHeight: 20px; --hsElevate--label--medium__marginBottom: 4px; /* Label S - Mobile */ --hsElevate--label--small__fontSize: 0.75rem; /* 12px */ --hsElevate--label--small__lineHeight: 17px; --hsElevate--label--small__marginBottom: 4px; /* Stat - Mobile */ --hsElevate--stat__fontSize: 6rem; /* 96px */ --hsElevate--stat__lineHeight: 96px; --hsElevate--stat__fontWeight: 200; --hsElevate--stat__fontStyle: normal; --hsElevate--stat__letterSpacing: 0em; --hsElevate--stat__marginBottom: 4px; /* CTA - Mobile */ --hsElevate--cta__fontSize: 1rem; /* 16px */ --hsElevate--cta__lineHeight: 24px; --hsElevate--cta__fontWeight: 600; --hsElevate--cta__fontStyle: normal; --hsElevate--cta__letterSpacing: 0.01em; --hsElevate--cta__marginBottom: 8px; /* Tag - Mobile */ --hsElevate--tag__fontSize: 0.6875rem; /* 11px */ --hsElevate--tag__lineHeight: 15px; --hsElevate--tag__fontWeight: 500; --hsElevate--tag__fontStyle: normal; --hsElevate--tag__letterSpacing: 0.05em; --hsElevate--tag__marginBottom: 4px; } } /* Foundational border-radius scale from theme settings */ :root { --hsElevate--radius--extra-small: 2px; --hsElevate--radius--small: 4px; --hsElevate--radius--medium: 6px; --hsElevate--radius--large: 6px; } /** * Responsive Breakpoints * * Aligned with Tailwind CSS v4 standards for future compatibility. * Uses rem units for better accessibility (1rem = 16px based on html font-size). * Mobile-first approach with modern CSS range syntax. * * Breakpoint Reference: * - sm: 640px (40rem) - Small tablets, large phones (landscape) * - md: 768px (48rem) - Tablets * - lg: 1024px (64rem) - Laptops, small desktops * - xl: 1280px (80rem) - Desktops * - 2xl: 1536px (96rem) - Large desktops, 4K screens */ :root { /* Breakpoint values in rem (preferred - use these) */ --hsElevate--breakpoint--sm: 40rem; /* 640px */ --hsElevate--breakpoint--md: 48rem; /* 768px */ --hsElevate--breakpoint--lg: 64rem; /* 1024px */ --hsElevate--breakpoint--xl: 80rem; /* 1280px */ --hsElevate--breakpoint--2xl: 96rem; /* 1536px */ /* Legacy pixel values (for reference only - prefer rem above) */ --hsElevate--breakpoint--sm-px: 640px; --hsElevate--breakpoint--md-px: 768px; --hsElevate--breakpoint--lg-px: 1024px; --hsElevate--breakpoint--xl-px: 1280px; --hsElevate--breakpoint--2xl-px: 1536px; } /* Usage Examples: Mobile-first (min-width): @media (width >= 48rem) { // Styles for md and up (tablets and larger) } Desktop-first (max-width): @media (width < 48rem) { // Styles below md (mobile only) } Breakpoint range: @media (width >= 48rem) and (width < 64rem) { // Styles for md only (tablets only) } Using CSS variables (not widely supported in media queries yet): @media (width >= var(--hsElevate--breakpoint--md)) { // May not work in all browsers } Best Practice: Use the rem values directly in media queries for maximum compatibility: @media (width >= 48rem) { ... } */ :root { /* Row Gaps - Desktop (default) */ --hsElevate--rowGap--small: 16px ; --hsElevate--rowGap--medium: 24px ; --hsElevate--rowGap--large: 40px ; /* HubSpot DND layout grid */ --hsElevate--column__gap: 2.13%; --hsElevate--column__widthMultiplier: 8.333; /* Content gap tokens — fixed pixel gaps for content-gap-* utilities */ --hsElevate--contentGap--sm: 24px; --hsElevate--contentGap--md: 48px; --hsElevate--contentGap--lg: 80px; /* Sections - Content max widths from theme settings */ --hsElevate--contentWrapper--narrow__maxWidth: 768px ; --hsElevate--contentWrapper--compact__maxWidth: 830px ; --hsElevate--contentWrapper--medium__maxWidth: 1120px ; --hsElevate--contentWrapper--wide__maxWidth: 1680px ; --hsElevate--contentWrapper--full__maxWidth: 1920px ; /* Module content max widths (breakpoint-aligned) from theme settings */ --hsElevate--contentMaxWidth--sm: 640px ; --hsElevate--contentMaxWidth--sm-md: 704px ; --hsElevate--contentMaxWidth--md: 768px ; --hsElevate--contentMaxWidth--md-lg: 896px ; --hsElevate--contentMaxWidth--lg: 1024px ; --hsElevate--contentMaxWidth--lg-xl: 1152px ; --hsElevate--contentMaxWidth--xl: 1280px ; --hsElevate--contentMaxWidth--xl-2xl: 1408px ; --hsElevate--contentMaxWidth--2xl: 1536px ; /* Button min widths from theme settings */ --hsElevate--buttonMinWidth--small: 200px ; --hsElevate--buttonMinWidth--medium: 248px ; --hsElevate--buttonMinWidth--large: 292px ; /* Section vertical padding - from theme settings (desktop) */ --hsElevate--section--extraSmall__verticalPadding: 72px ; --hsElevate--section--small__verticalPadding: 80px ; --hsElevate--section--medium__verticalPadding: 96px ; --hsElevate--section--large__verticalPadding: 112px ; --hsElevate--section--extraLarge__verticalPadding: 128px ; /* Section horizontal padding (gutter) - from theme settings (desktop) */ --hsElevate--section--horizontalPadding: 120px ; /* Spacer gap scale - from theme settings (desktop) */ --hsElevate--spacer--xs: 12px ; --hsElevate--spacer--sm: 24px ; --hsElevate--spacer--md: 32px ; --hsElevate--spacer--lg: 48px ; --hsElevate--spacer--xl: 72px ; /* 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--extraLarge__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); } /* Tablet overrides (768px to 1024px) */ @media (max-width: 1024px) { :root { /* Row Gaps */ --hsElevate--rowGap--small: 16px ; --hsElevate--rowGap--medium: 20px ; --hsElevate--rowGap--large: 32px ; /* Section vertical padding */ --hsElevate--section--extraSmall__verticalPadding: 36px ; --hsElevate--section--small__verticalPadding: 72px ; --hsElevate--section--medium__verticalPadding: 48px ; --hsElevate--section--large__verticalPadding: 80px ; --hsElevate--section--extraLarge__verticalPadding: 96px ; /* Section horizontal padding (gutter) */ --hsElevate--section--horizontalPadding: 24px ; /* Spacer gap scale */ --hsElevate--spacer--xs: 8px ; --hsElevate--spacer--sm: 16px ; --hsElevate--spacer--md: 24px ; --hsElevate--spacer--lg: 32px ; --hsElevate--spacer--xl: 48px ; /* Content gap tokens — tablet */ --hsElevate--contentGap--sm: 16px; --hsElevate--contentGap--md: 32px; --hsElevate--contentGap--lg: 60px; } } /* Mobile overrides (below 768px) */ @media (max-width: 47.999rem) { :root { /* Row Gaps */ --hsElevate--rowGap--small: 12px ; --hsElevate--rowGap--medium: 16px ; --hsElevate--rowGap--large: 24px ; /* Section vertical padding */ --hsElevate--section--extraSmall__verticalPadding: 36px ; --hsElevate--section--small__verticalPadding: 72px ; --hsElevate--section--medium__verticalPadding: 48px ; --hsElevate--section--large__verticalPadding: 80px ; --hsElevate--section--extraLarge__verticalPadding: 96px ; /* Section horizontal padding (gutter) */ --hsElevate--section--horizontalPadding: 24px ; /* Spacer gap scale */ --hsElevate--spacer--xs: 8px ; --hsElevate--spacer--sm: 16px ; --hsElevate--spacer--md: 24px ; --hsElevate--spacer--lg: 32px ; --hsElevate--spacer--xl: 48px ; /* Content gap tokens — mobile */ --hsElevate--contentGap--sm: 16px; --hsElevate--contentGap--md: 24px; --hsElevate--contentGap--lg: 32px; } } /* Section padding pixel utilities — Desktop (default) */ .dnd-section.section-pt-0 { padding-top: 0px; } .dnd-section.section-pb-0 { padding-bottom: 0px; } .dnd-section.section-pt-36 { padding-top: 36px; } .dnd-section.section-pb-36 { padding-bottom: 36px; } .dnd-section.section-pt-48 { padding-top: 48px; } .dnd-section.section-pb-48 { padding-bottom: 48px; } .dnd-section.section-pt-72 { padding-top: 72px; } .dnd-section.section-pb-72 { padding-bottom: 72px; } .dnd-section.section-pt-80 { padding-top: 80px; } .dnd-section.section-pb-80 { padding-bottom: 80px; } .dnd-section.section-pt-96 { padding-top: 96px; } .dnd-section.section-pb-96 { padding-bottom: 96px; } .dnd-section.section-pt-112 { padding-top: 112px; } .dnd-section.section-pb-112 { padding-bottom: 112px; } .dnd-section.section-pt-128 { padding-top: 128px; } .dnd-section.section-pb-128 { padding-bottom: 128px; } /* Section padding pixel utilities — Tablet (≤1024px) */ @media (max-width: 1024px) { .dnd-section.section-pt-tablet-0 { padding-top: 0px; } .dnd-section.section-pb-tablet-0 { padding-bottom: 0px; } .dnd-section.section-pt-tablet-36 { padding-top: 36px; } .dnd-section.section-pb-tablet-36 { padding-bottom: 36px; } .dnd-section.section-pt-tablet-48 { padding-top: 48px; } .dnd-section.section-pb-tablet-48 { padding-bottom: 48px; } .dnd-section.section-pt-tablet-72 { padding-top: 72px; } .dnd-section.section-pb-tablet-72 { padding-bottom: 72px; } .dnd-section.section-pt-tablet-80 { padding-top: 80px; } .dnd-section.section-pb-tablet-80 { padding-bottom: 80px; } .dnd-section.section-pt-tablet-96 { padding-top: 96px; } .dnd-section.section-pb-tablet-96 { padding-bottom: 96px; } .dnd-section.section-pt-tablet-112 { padding-top: 112px; } .dnd-section.section-pb-tablet-112 { padding-bottom: 112px; } .dnd-section.section-pt-tablet-128 { padding-top: 128px; } .dnd-section.section-pb-tablet-128 { padding-bottom: 128px; } } /* Section padding pixel utilities — Mobile (<768px) */ @media (max-width: 47.999rem) { .dnd-section.section-pt-mobile-0 { padding-top: 0px; } .dnd-section.section-pb-mobile-0 { padding-bottom: 0px; } .dnd-section.section-pt-mobile-36 { padding-top: 36px; } .dnd-section.section-pb-mobile-36 { padding-bottom: 36px; } .dnd-section.section-pt-mobile-48 { padding-top: 48px; } .dnd-section.section-pb-mobile-48 { padding-bottom: 48px; } .dnd-section.section-pt-mobile-72 { padding-top: 72px; } .dnd-section.section-pb-mobile-72 { padding-bottom: 72px; } .dnd-section.section-pt-mobile-80 { padding-top: 80px; } .dnd-section.section-pb-mobile-80 { padding-bottom: 80px; } .dnd-section.section-pt-mobile-96 { padding-top: 96px; } .dnd-section.section-pb-mobile-96 { padding-bottom: 96px; } .dnd-section.section-pt-mobile-112 { padding-top: 112px; } .dnd-section.section-pb-mobile-112 { padding-bottom: 112px; } .dnd-section.section-pt-mobile-128 { padding-top: 128px; } .dnd-section.section-pb-mobile-128 { padding-bottom: 128px; } } /* Content gap pixel utilities — Desktop (≥768px) */ @media (min-width: 48rem) { .dnd-section.content-gap-0 > .row-fluid { gap: 0px; justify-content: initial; } .dnd-section.content-gap-0 > .row-fluid > [class*="span"] { width: auto; } .dnd-section.content-gap-2 > .row-fluid { gap: 2px; justify-content: initial; } .dnd-section.content-gap-2 > .row-fluid > [class*="span"] { width: auto; } .dnd-section.content-gap-4 > .row-fluid { gap: 4px; justify-content: initial; } .dnd-section.content-gap-4 > .row-fluid > [class*="span"] { width: auto; } .dnd-section.content-gap-6 > .row-fluid { gap: 6px; justify-content: initial; } .dnd-section.content-gap-6 > .row-fluid > [class*="span"] { width: auto; } .dnd-section.content-gap-8 > .row-fluid { gap: 8px; justify-content: initial; } .dnd-section.content-gap-8 > .row-fluid > [class*="span"] { width: auto; } .dnd-section.content-gap-10 > .row-fluid { gap: 10px; justify-content: initial; } .dnd-section.content-gap-10 > .row-fluid > [class*="span"] { width: auto; } .dnd-section.content-gap-12 > .row-fluid { gap: 12px; justify-content: initial; } .dnd-section.content-gap-12 > .row-fluid > [class*="span"] { width: auto; } .dnd-section.content-gap-16 > .row-fluid { gap: 16px; justify-content: initial; } .dnd-section.content-gap-16 > .row-fluid > [class*="span"] { width: auto; } .dnd-section.content-gap-24 > .row-fluid { gap: 24px; justify-content: initial; } .dnd-section.content-gap-24 > .row-fluid > [class*="span"] { width: auto; } .dnd-section.content-gap-32 > .row-fluid { gap: 32px; justify-content: initial; } .dnd-section.content-gap-32 > .row-fluid > [class*="span"] { width: auto; } .dnd-section.content-gap-36 > .row-fluid { gap: 36px; justify-content: initial; } .dnd-section.content-gap-36 > .row-fluid > [class*="span"] { width: auto; } .dnd-section.content-gap-48 > .row-fluid { gap: 48px; justify-content: initial; } .dnd-section.content-gap-48 > .row-fluid > [class*="span"] { width: auto; } .dnd-section.content-gap-56 > .row-fluid { gap: 56px; justify-content: initial; } .dnd-section.content-gap-56 > .row-fluid > [class*="span"] { width: auto; } .dnd-section.content-gap-72 > .row-fluid { gap: 72px; justify-content: initial; } .dnd-section.content-gap-72 > .row-fluid > [class*="span"] { width: auto; } .dnd-section.content-gap-80 > .row-fluid { gap: 80px; justify-content: initial; } .dnd-section.content-gap-80 > .row-fluid > [class*="span"] { width: auto; } .dnd-section.content-gap-96 > .row-fluid { gap: 96px; justify-content: initial; } .dnd-section.content-gap-96 > .row-fluid > [class*="span"] { width: auto; } } /* Content gap pixel utilities — Mobile (<768px) stacked layouts */ @media (max-width: 47.999rem) { .dnd-section.content-gap-0.stack-mobile > .row-fluid { row-gap: 0px; } .dnd-section.content-gap-0.stack-tablet > .row-fluid { row-gap: 0px; } .dnd-section.content-gap-2.stack-mobile > .row-fluid { row-gap: 2px; } .dnd-section.content-gap-2.stack-tablet > .row-fluid { row-gap: 2px; } .dnd-section.content-gap-4.stack-mobile > .row-fluid { row-gap: 4px; } .dnd-section.content-gap-4.stack-tablet > .row-fluid { row-gap: 4px; } .dnd-section.content-gap-6.stack-mobile > .row-fluid { row-gap: 6px; } .dnd-section.content-gap-6.stack-tablet > .row-fluid { row-gap: 6px; } .dnd-section.content-gap-8.stack-mobile > .row-fluid { row-gap: 6px; } .dnd-section.content-gap-8.stack-tablet > .row-fluid { row-gap: 6px; } .dnd-section.content-gap-10.stack-mobile > .row-fluid { row-gap: 10px; } .dnd-section.content-gap-10.stack-tablet > .row-fluid { row-gap: 10px; } .dnd-section.content-gap-12.stack-mobile > .row-fluid { row-gap: 8px; } .dnd-section.content-gap-12.stack-tablet > .row-fluid { row-gap: 8px; } .dnd-section.content-gap-16.stack-mobile > .row-fluid { row-gap: 12px; } .dnd-section.content-gap-16.stack-tablet > .row-fluid { row-gap: 12px; } .dnd-section.content-gap-24.stack-mobile > .row-fluid { row-gap: 16px; } .dnd-section.content-gap-24.stack-tablet > .row-fluid { row-gap: 16px; } .dnd-section.content-gap-32.stack-mobile > .row-fluid { row-gap: 24px; } .dnd-section.content-gap-32.stack-tablet > .row-fluid { row-gap: 24px; } .dnd-section.content-gap-36.stack-mobile > .row-fluid { row-gap: 36px; } .dnd-section.content-gap-36.stack-tablet > .row-fluid { row-gap: 36px; } .dnd-section.content-gap-48.stack-mobile > .row-fluid { row-gap: 32px; } .dnd-section.content-gap-48.stack-tablet > .row-fluid { row-gap: 32px; } .dnd-section.content-gap-56.stack-mobile > .row-fluid { row-gap: 56px; } .dnd-section.content-gap-56.stack-tablet > .row-fluid { row-gap: 56px; } .dnd-section.content-gap-72.stack-mobile > .row-fluid { row-gap: 48px; } .dnd-section.content-gap-72.stack-tablet > .row-fluid { row-gap: 48px; } .dnd-section.content-gap-80.stack-mobile > .row-fluid { row-gap: 48px; } .dnd-section.content-gap-80.stack-tablet > .row-fluid { row-gap: 48px; } .dnd-section.content-gap-96.stack-mobile > .row-fluid { row-gap: 80px; } .dnd-section.content-gap-96.stack-tablet > .row-fluid { row-gap: 80px; } } :root { /* Master Typography Colors */ --hsElevate--typography__headings-color: #000000 ; --hsElevate--typography__body-color: #525252 ; /* Dark Section Master Typography Colors */ --hsElevate--typography__headings-color--dark: #FFFFFF ; --hsElevate--typography__body-color--dark: #FFFFFF ; /* 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 - Desktop (default, > 1024px) * Body sizes are sourced from the Body fields in fields.json: * Body LG = group_body_lg (body_font_1) * Body MD = group_body_md (body_md) * Body SM = group_body_sm (body_sm) */ --hsElevate--baseText__fontSize: 16px ; --hsElevate--body__font: "DM Sans", sans-serif; --hsElevate--body--small__fontSize: 1.0rem ; --hsElevate--body--small__lineHeight: 24px ; --hsElevate--body--small__marginBottom: 12px ; --hsElevate--body--medium__fontSize: 1.25rem ; --hsElevate--body--medium__lineHeight: 30px ; --hsElevate--body--medium__marginBottom: 16px ; --hsElevate--body__fontSize: 1.25rem ; --hsElevate--body--large__fontSize: 1.25rem ; --hsElevate--body--large__lineHeight: 30px ; --hsElevate--body__fontWeight: normal ; --hsElevate--body__fontStyle: normal ; --hsElevate--body__lineHeight: 30px ; /* Primary links */ --hsElevate--link--primary__fontColor: #342775 ; --hsElevate--link--primary__textDecoration: none; --hsElevate--link--primary__textDecorationColor: transparent; /* Hover state */ --hsElevate--link--primary__hover--fontColor: #342775 ; --hsElevate--link--primary__hover--textDecoration: underline; --hsElevate--link--primary__hover--textDecorationColor: #342775 ; /* Secondary links */ --hsElevate--link--secondary__fontColor: #342775 ; --hsElevate--link--secondary__textDecoration: none; --hsElevate--link--secondary__textDecorationColor: transparent; /* Hover state */ --hsElevate--link--secondary__hover--fontColor: #342775 ; --hsElevate--link--secondary__hover--textDecoration: underline; --hsElevate--link--secondary__hover--textDecorationColor: #342775 ; /* Headings */ /* Percentage change for the heading font sizes on mobile */ --hsElevate--heading__tablet-modifier: 0.8; --hsElevate--display__lineHeight: 72px ; --hsElevate--h1__lineHeight: 62px ; --hsElevate--h2__lineHeight: 52px ; --hsElevate--h3__lineHeight: 40px ; --hsElevate--h4__lineHeight: 30px ; --hsElevate--h5__lineHeight: 18px ; --hsElevate--h6__lineHeight: 18px ; --hsElevate--display__letterSpacing: 0em ; --hsElevate--h1__letterSpacing: 0em ; --hsElevate--h2__letterSpacing: 0em ; --hsElevate--h3__letterSpacing: 0em ; --hsElevate--h4__letterSpacing: 0em ; --hsElevate--h5__letterSpacing: 0em ; --hsElevate--h6__letterSpacing: 0em ; --hsElevate--display__marginBottom: 32px ; --hsElevate--h1__marginBottom: 32px ; --hsElevate--h2__marginBottom: 28px ; --hsElevate--h3__marginBottom: 24px ; --hsElevate--h4__marginBottom: 20px ; --hsElevate--h5__marginBottom: 16px ; --hsElevate--h6__marginBottom: 12px ; /* Display - Desktop (default, > 1024px) */ --hsElevate--display__font: "Inter", sans-serif; --hsElevate--display__fontSize: 4.5rem ; --hsElevate--display__fontWeight: 400 ; --hsElevate--display__fontStyle: normal ; /* H1 - Desktop (default, > 1024px) */ --hsElevate--h1__font: "DM Sans", sans-serif; --hsElevate--h1__fontSize: 3.75rem ; --hsElevate--h1__fontWeight: 200 ; --hsElevate--h1__fontStyle: normal ; /* H2 - Desktop (default, > 1024px) */ --hsElevate--h2__font: "DM Sans", sans-serif; --hsElevate--h2__fontSize: 2.75rem ; --hsElevate--h2__fontWeight: 200 ; --hsElevate--h2__fontStyle: normal ; /* H3 - Desktop (default, > 1024px) */ --hsElevate--h3__font: "DM Sans", sans-serif; --hsElevate--h3__fontSize: 1.875rem ; --hsElevate--h3__fontWeight: 500 ; --hsElevate--h3__fontStyle: normal ; /* H4 - Desktop (default, > 1024px) */ --hsElevate--h4__font: "DM Sans", sans-serif; --hsElevate--h4__fontSize: 1.5rem ; --hsElevate--h4__fontWeight: 500 ; --hsElevate--h4__fontStyle: normal ; /* H5 - Desktop (default, > 1024px) */ --hsElevate--h5__font: "DM Sans", sans-serif; --hsElevate--h5__fontSize: 1.0rem ; --hsElevate--h5__fontWeight: 700 ; --hsElevate--h5__fontStyle: normal ; /* H6 - Desktop (default, > 1024px) */ --hsElevate--h6__font: "DM Sans", sans-serif; --hsElevate--h6__fontSize: 1.0rem ; --hsElevate--h6__fontWeight: 700 ; --hsElevate--h6__fontStyle: normal ; /* Navigation - Main Links */ --hsElevate--navigation__font: "Inter", sans-serif; --hsElevate--navigation__fontSize--mobile: 0.8125rem ; --hsElevate--navigation__fontWeight--mobile: normal ; --hsElevate--navigation__fontStyle--mobile: normal ; --hsElevate--navigation__fontSize--sm: 0.8125rem ; --hsElevate--navigation__fontWeight--sm: normal ; --hsElevate--navigation__fontStyle--sm: normal ; --hsElevate--navigation__fontSize--md: 0.875rem ; --hsElevate--navigation__fontWeight--md: normal ; --hsElevate--navigation__fontStyle--md: normal ; --hsElevate--navigation__fontSize--lg: 0.875rem ; --hsElevate--navigation__fontWeight--lg: normal ; --hsElevate--navigation__fontStyle--lg: normal ; --hsElevate--navigation__fontSize--xl: 0.9375rem ; --hsElevate--navigation__fontWeight--xl: normal ; --hsElevate--navigation__fontStyle--xl: normal ; --hsElevate--navigation__fontSize--2xl: 0.9375rem ; --hsElevate--navigation__fontWeight--2xl: normal ; --hsElevate--navigation__fontStyle--2xl: normal ; /* Navigation - Dropdown Links */ --hsElevate--navigationDropdown__font: "Inter", sans-serif; --hsElevate--navigationDropdown__fontSize--mobile: 0.8125rem ; --hsElevate--navigationDropdown__fontWeight--mobile: normal ; --hsElevate--navigationDropdown__fontStyle--mobile: normal ; --hsElevate--navigationDropdown__fontSize--sm: 0.8125rem ; --hsElevate--navigationDropdown__fontWeight--sm: normal ; --hsElevate--navigationDropdown__fontStyle--sm: normal ; --hsElevate--navigationDropdown__fontSize--md: 0.875rem ; --hsElevate--navigationDropdown__fontWeight--md: normal ; --hsElevate--navigationDropdown__fontStyle--md: normal ; --hsElevate--navigationDropdown__fontSize--lg: 0.875rem ; --hsElevate--navigationDropdown__fontWeight--lg: normal ; --hsElevate--navigationDropdown__fontStyle--lg: normal ; --hsElevate--navigationDropdown__fontSize--xl: 0.9375rem ; --hsElevate--navigationDropdown__fontWeight--xl: normal ; --hsElevate--navigationDropdown__fontStyle--xl: normal ; --hsElevate--navigationDropdown__fontSize--2xl: 0.9375rem ; --hsElevate--navigationDropdown__fontWeight--2xl: normal ; --hsElevate--navigationDropdown__fontStyle--2xl: normal ; /* Navigation - Link Spacing * * IMPORTANT: See docs/navigation-spacing.md for local development quirks * * Local dev quirk: The local dev server reads from the portal's saved setting, * NOT from fields.json default. If you see the wrong spacing locally, change it * in CMS Theme Settings or temporarily comment out other spacing blocks. * * PostCSS deduplication: Each spacing option MUST have unique values for every * variable. If two options share the same value (e.g., both have xl: 16px), * PostCSS will remove one as a duplicate, breaking local development. */ /* Default: Balanced spacing (smaller than original) */ --hsElevate--navigation__gap--mobile: 6px; --hsElevate--navigation__gap--md: 8px; --hsElevate--navigation__gap--lg: 12px; --hsElevate--navigation__gap--xl: 16px; --hsElevate--navigation__paddingBlock--mobile: 6px; --hsElevate--navigation__paddingBlock--lg: 8px; --hsElevate--navigation__paddingInline--mobile: 6px; --hsElevate--navigation__paddingInline--md: 6px; --hsElevate--navigation__paddingInline--lg: 8px; --hsElevate--navigation__paddingInline--xl: 10px; /* Quotes */ --hsElevate--quotes__font: "Inter", sans-serif; --hsElevate--quotes__fontColor: ; --hsElevate--quotes__fontSize: 0.0rem ; --hsElevate--quotes__fontWeight: normal ; --hsElevate--quotes__fontStyle: normal ; /* Captions */ --hsElevate--captions__font: "DM Sans", sans-serif; --hsElevate--captions__fontSize: 0.75rem ; --hsElevate--captions__fontWeight: 400 ; --hsElevate--captions__fontStyle: normal ; --hsElevate--captions__case: uppercase ; /* Eyebrow - Desktop (default, > 1024px) */ --hsElevate--eyebrow__fontSize: 1.125rem ; --hsElevate--eyebrow__lineHeight: 20px ; --hsElevate--eyebrow__fontWeight: 700 ; --hsElevate--eyebrow__letterSpacing: 0.05em ; --hsElevate--eyebrow__textTransform: uppercase ; --hsElevate--eyebrow__marginBottom: 12px ; /* Eyebrow colors (light/dark section variants) */ --hsElevate--eyebrow__color--light: #10001f ; --hsElevate--eyebrow__color--dark: #a69eef ; /* Label L - Desktop (default, > 1024px) */ --hsElevate--label--large__fontSize: 1.0625rem ; --hsElevate--label--large__lineHeight: 24px ; --hsElevate--label--large__marginBottom: 8px ; /* Label M - Desktop (default, > 1024px) */ --hsElevate--label--medium__fontSize: 0.9375rem ; --hsElevate--label--medium__lineHeight: 21px ; --hsElevate--label--medium__marginBottom: 6px ; /* Label S - Desktop (default, > 1024px) */ --hsElevate--label--small__fontSize: 0.875rem ; --hsElevate--label--small__lineHeight: 20px ; --hsElevate--label--small__marginBottom: 4px ; /* Stat - Desktop (default, > 1024px) */ --hsElevate--stat__fontSize: 8.0rem ; --hsElevate--stat__lineHeight: 128px ; --hsElevate--stat__fontWeight: 200 ; --hsElevate--stat__fontStyle: normal ; --hsElevate--stat__letterSpacing: 0em ; --hsElevate--stat__marginBottom: 8px ; /* Stat colors (light/dark section variants) */ --hsElevate--stat__color--light: #A69EEF ; --hsElevate--stat__color--dark: #a69eef ; /* CTA - Desktop (default, > 1024px) */ --hsElevate--cta__fontSize: 0.875rem ; --hsElevate--cta__lineHeight: 14px ; --hsElevate--cta__fontWeight: 700 ; --hsElevate--cta__fontStyle: normal ; --hsElevate--cta__letterSpacing: 0.01em ; --hsElevate--cta__textTransform: uppercase ; --hsElevate--cta__marginBottom: 12px ; /* Tag - Desktop (default, > 1024px) */ --hsElevate--tag__fontSize: 0.625rem ; --hsElevate--tag__lineHeight: 10px ; --hsElevate--tag__fontWeight: 700 ; --hsElevate--tag__fontStyle: normal ; --hsElevate--tag__letterSpacing: 0.05em ; --hsElevate--tag__textTransform: uppercase ; --hsElevate--tag__marginBottom: 4px ; /* Images */ --hsElevate--rteImages__margin: 2rem; /* 32px */ } /* Tablet Breakpoint - 768px to 1024px */ @media (max-width: 1024px) { :root { /* Display - Tablet */ --hsElevate--display__fontSize: 4.5rem ; --hsElevate--display__fontWeight: 400 ; --hsElevate--display__fontStyle: normal ; /* H1 - Tablet */ --hsElevate--h1__fontSize: 3.75rem ; --hsElevate--h1__fontWeight: 200 ; --hsElevate--h1__fontStyle: normal ; /* H2 - Tablet */ --hsElevate--h2__fontSize: 2.75rem ; --hsElevate--h2__fontWeight: 200 ; --hsElevate--h2__fontStyle: normal ; /* H3 - Tablet */ --hsElevate--h3__fontSize: 1.875rem ; --hsElevate--h3__fontWeight: 500 ; --hsElevate--h3__fontStyle: normal ; /* H4 - Tablet */ --hsElevate--h4__fontSize: 1.5rem ; --hsElevate--h4__fontWeight: 500 ; --hsElevate--h4__fontStyle: normal ; /* H5 - Tablet */ --hsElevate--h5__fontSize: 1.0rem ; --hsElevate--h5__fontWeight: 700 ; --hsElevate--h5__fontStyle: normal ; /* H6 - Tablet */ --hsElevate--h6__fontSize: 1.0rem ; --hsElevate--h6__fontWeight: 700 ; --hsElevate--h6__fontStyle: normal ; /* Line Heights - Tablet */ --hsElevate--display__lineHeight: 72px ; --hsElevate--h1__lineHeight: 62px ; --hsElevate--h2__lineHeight: 52px ; --hsElevate--h3__lineHeight: 40px ; --hsElevate--h4__lineHeight: 30px ; --hsElevate--h5__lineHeight: 18px ; --hsElevate--h6__lineHeight: 18px ; /* Letter Spacing - Tablet */ --hsElevate--display__letterSpacing: 0em ; --hsElevate--h1__letterSpacing: 0em ; --hsElevate--h2__letterSpacing: 0em ; --hsElevate--h3__letterSpacing: 0em ; --hsElevate--h4__letterSpacing: 0em ; --hsElevate--h5__letterSpacing: 0em ; --hsElevate--h6__letterSpacing: 0em ; /* Margin Bottom - Tablet */ --hsElevate--display__marginBottom: 28px ; --hsElevate--h1__marginBottom: 28px ; --hsElevate--h2__marginBottom: 24px ; --hsElevate--h3__marginBottom: 20px ; --hsElevate--h4__marginBottom: 16px ; --hsElevate--h5__marginBottom: 12px ; --hsElevate--h6__marginBottom: 8px ; /* Body - Tablet */ --hsElevate--body--small__fontSize: 1.0rem ; --hsElevate--body--small__lineHeight: 24px ; --hsElevate--body--small__marginBottom: 10px ; --hsElevate--body--medium__fontSize: 1.25rem ; --hsElevate--body--medium__lineHeight: 30px ; --hsElevate--body--medium__marginBottom: 14px ; --hsElevate--body__fontSize: 1.25rem ; --hsElevate--body--large__fontSize: 1.25rem ; --hsElevate--body--large__lineHeight: 30px ; --hsElevate--body--large__marginBottom: px ; --hsElevate--body__lineHeight: 30px ; /* Eyebrow - Tablet */ --hsElevate--eyebrow__fontSize: 1.125rem ; --hsElevate--eyebrow__lineHeight: 20px ; --hsElevate--eyebrow__fontWeight: 700 ; --hsElevate--eyebrow__letterSpacing: 0.05em ; --hsElevate--eyebrow__marginBottom: 10px ; /* Label L - Tablet */ --hsElevate--label--large__fontSize: 1.0rem ; --hsElevate--label--large__lineHeight: 22px ; --hsElevate--label--large__marginBottom: 6px ; /* Label M - Tablet */ --hsElevate--label--medium__fontSize: 0.9375rem ; --hsElevate--label--medium__lineHeight: 21px ; --hsElevate--label--medium__marginBottom: 6px ; /* Label S - Tablet */ --hsElevate--label--small__fontSize: 0.75rem ; --hsElevate--label--small__lineHeight: 17px ; --hsElevate--label--small__marginBottom: 4px ; /* Stat - Tablet */ --hsElevate--stat__fontSize: 8.0rem ; --hsElevate--stat__lineHeight: 128px ; --hsElevate--stat__fontWeight: 200 ; --hsElevate--stat__fontStyle: normal ; --hsElevate--stat__letterSpacing: 0em ; --hsElevate--stat__marginBottom: 6px ; /* CTA - Tablet */ --hsElevate--cta__fontSize: 0.875rem ; --hsElevate--cta__lineHeight: 14px ; --hsElevate--cta__fontWeight: 700 ; --hsElevate--cta__fontStyle: normal ; --hsElevate--cta__letterSpacing: 0.01em ; --hsElevate--cta__marginBottom: 10px ; /* Tag - Tablet */ --hsElevate--tag__fontSize: 0.625rem ; --hsElevate--tag__lineHeight: 10px ; --hsElevate--tag__fontWeight: 700 ; --hsElevate--tag__fontStyle: normal ; --hsElevate--tag__letterSpacing: 0.05em ; --hsElevate--tag__marginBottom: 4px ; } } /* Mobile Breakpoint - < 768px */ @media (max-width: 768px) { :root { /* Display - Mobile */ --hsElevate--display__fontSize: 4.0rem ; --hsElevate--display__fontWeight: 400 ; --hsElevate--display__fontStyle: normal ; /* H1 - Mobile */ --hsElevate--h1__fontSize: 3.25rem ; --hsElevate--h1__fontWeight: 200 ; --hsElevate--h1__fontStyle: normal ; /* H2 - Mobile */ --hsElevate--h2__fontSize: 2.0rem ; --hsElevate--h2__fontWeight: 200 ; --hsElevate--h2__fontStyle: normal ; /* H3 - Mobile */ --hsElevate--h3__fontSize: 1.5rem ; --hsElevate--h3__fontWeight: 500 ; --hsElevate--h3__fontStyle: normal ; /* H4 - Mobile */ --hsElevate--h4__fontSize: 1.25rem ; --hsElevate--h4__fontWeight: 500 ; --hsElevate--h4__fontStyle: normal ; /* H5 - Mobile */ --hsElevate--h5__fontSize: 1.0rem ; --hsElevate--h5__fontWeight: 700 ; --hsElevate--h5__fontStyle: normal ; /* H6 - Mobile */ --hsElevate--h6__fontSize: 1.0rem ; --hsElevate--h6__fontWeight: 700 ; --hsElevate--h6__fontStyle: normal ; /* Line Heights - Mobile */ --hsElevate--display__lineHeight: 64px ; --hsElevate--h1__lineHeight: 54px ; --hsElevate--h2__lineHeight: 38px ; --hsElevate--h3__lineHeight: 32px ; --hsElevate--h4__lineHeight: 26px ; --hsElevate--h5__lineHeight: 18px ; --hsElevate--h6__lineHeight: 18px ; /* Letter Spacing - Mobile */ --hsElevate--display__letterSpacing: 0em ; --hsElevate--h1__letterSpacing: 0em ; --hsElevate--h2__letterSpacing: 0em ; --hsElevate--h3__letterSpacing: 0em ; --hsElevate--h4__letterSpacing: 0em ; --hsElevate--h5__letterSpacing: 0em ; --hsElevate--h6__letterSpacing: 0em ; /* Margin Bottom - Mobile */ --hsElevate--display__marginBottom: 24px ; --hsElevate--h1__marginBottom: 24px ; --hsElevate--h2__marginBottom: 20px ; --hsElevate--h3__marginBottom: 16px ; --hsElevate--h4__marginBottom: 12px ; --hsElevate--h5__marginBottom: 8px ; --hsElevate--h6__marginBottom: 8px ; /* Body - Mobile */ --hsElevate--body--small__fontSize: 0.875rem ; --hsElevate--body--small__lineHeight: 21px ; --hsElevate--body--small__marginBottom: 8px ; --hsElevate--body--medium__fontSize: 1.125rem ; --hsElevate--body--medium__lineHeight: 27px ; --hsElevate--body--medium__marginBottom: 12px ; --hsElevate--body__fontSize: 1.125rem ; --hsElevate--body--large__fontSize: 1.125rem ; --hsElevate--body--large__lineHeight: 27px ; --hsElevate--body--large__marginBottom: px ; --hsElevate--body__lineHeight: 27px ; /* Eyebrow - Mobile */ --hsElevate--eyebrow__fontSize: 1.0rem ; --hsElevate--eyebrow__lineHeight: 18px ; --hsElevate--eyebrow__fontWeight: 700 ; --hsElevate--eyebrow__letterSpacing: 0.05em ; --hsElevate--eyebrow__marginBottom: 8px ; /* Label L - Mobile */ --hsElevate--label--large__fontSize: 1.0rem ; --hsElevate--label--large__lineHeight: 22px ; --hsElevate--label--large__marginBottom: 6px ; /* Label M - Mobile */ --hsElevate--label--medium__fontSize: 0.875rem ; --hsElevate--label--medium__lineHeight: 20px ; --hsElevate--label--medium__marginBottom: 4px ; /* Label S - Mobile */ --hsElevate--label--small__fontSize: 0.75rem ; --hsElevate--label--small__lineHeight: 17px ; --hsElevate--label--small__marginBottom: 4px ; /* Stat - Mobile */ --hsElevate--stat__fontSize: 6.0rem ; --hsElevate--stat__lineHeight: 96px ; --hsElevate--stat__fontWeight: 200 ; --hsElevate--stat__fontStyle: normal ; --hsElevate--stat__letterSpacing: 0em ; --hsElevate--stat__marginBottom: 4px ; /* CTA - Mobile */ --hsElevate--cta__fontSize: 0.875rem ; --hsElevate--cta__lineHeight: 14px ; --hsElevate--cta__fontWeight: 700 ; --hsElevate--cta__fontStyle: normal ; --hsElevate--cta__letterSpacing: 0.01em ; --hsElevate--cta__marginBottom: 8px ; /* Tag - Mobile */ --hsElevate--tag__fontSize: 0.625rem ; --hsElevate--tag__lineHeight: 10px ; --hsElevate--tag__fontWeight: 700 ; --hsElevate--tag__fontStyle: normal ; --hsElevate--tag__letterSpacing: 0.05em ; --hsElevate--tag__marginBottom: 4px ; } } :root { /* Semantic Color Roles */ --hsElevate--color-role--primary: #342775 ; --hsElevate--color-role--secondary: #FFB600 ; --hsElevate--color-role--accent1: #4B48B7 ; --hsElevate--color-role--accent2: #A69EEF ; --hsElevate--color-role--lightBackground: #F1F1F8 ; --hsElevate--color-role--lightBackgroundAlt: #E5E5F2 ; --hsElevate--color-role--darkBackground: #10001F ; --hsElevate--color-role--darkBackgroundAlt: #18003A ; --hsElevate--color-role--lightText: #FFFFFF ; --hsElevate--color-role--darkText: #10001F ; --hsElevate--color-role--border: #4B48B7 ; } :root { /* Light mode colors (from color roles) */ --hsElevate--color--light--background: #F1F1F8 ; --hsElevate--color--light--foreground: #10001F ; /* Dark mode colors (from color roles) */ --hsElevate--color--dark--background: #10001F ; --hsElevate--color--dark--foreground: #FFFFFF ; /* Theme colors */ --hsElevate--color--theme--primary: #342775 ; --hsElevate--color--theme--secondary: #FFB600 ; --hsElevate--color--theme--accent: #4B48B7 ; --hsElevate--color--theme--surface: #FAFAFA ; /* Status colors */ --hsElevate--color--status--success: #65C728 ; --hsElevate--color--status--error: #E31A1A ; } :root { /* Button sizing (single standard size) */ --hsElevate--button__height: 48px ; --hsElevate--button__paddingHorizontal: 24px ; /* Primary button variables */ --hsElevate--button--primary__buttonFill: filled ; --hsElevate--button--primary__fontFamily: var(--hsElevate--cta__fontFamily); --hsElevate--button--primary__fontSize: var(--hsElevate--cta__fontSize); --hsElevate--button--primary__fontWeight: var(--hsElevate--cta__fontWeight); --hsElevate--button--primary__fontStyle: var(--hsElevate--cta__fontStyle); --hsElevate--button--primary__letterSpacing: var(--hsElevate--cta__letterSpacing); --hsElevate--button--primary__textTransform: var(--hsElevate--cta__textTransform); --hsElevate--button--primary__textColor: #10001f ; --hsElevate--button--primary__hover--textColor: #10001f ; --hsElevate--button--primary__borderRadius: var(--hsElevate--radius--small); --hsElevate--button--primary__backgroundColor: #FFB600 ; --hsElevate--button--primary__hover--backgroundColor: #FFD290 ; --hsElevate--button--primary__active--backgroundColor: #e1b472 ; --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 ; --hsElevate--button--secondary__fontFamily: var(--hsElevate--cta__fontFamily); --hsElevate--button--secondary__fontSize: var(--hsElevate--cta__fontSize); --hsElevate--button--secondary__fontWeight: var(--hsElevate--cta__fontWeight); --hsElevate--button--secondary__fontStyle: var(--hsElevate--cta__fontStyle); --hsElevate--button--secondary__letterSpacing: var(--hsElevate--cta__letterSpacing); --hsElevate--button--secondary__textTransform: var(--hsElevate--cta__textTransform); --hsElevate--button--secondary__textColor: #FFFFFF ; --hsElevate--button--secondary__hover--textColor: #10001f ; --hsElevate--button--secondary__borderRadius: var(--hsElevate--radius--small); --hsElevate--button--secondary__backgroundColor: transparent; --hsElevate--button--secondary__hover--backgroundColor: #e5e5f2 ; --hsElevate--button--secondary__borderThickness: 1px ; --hsElevate--button--secondary__hover--borderThickness: 1px ; --hsElevate--button--secondary__borderColor: #FFFFFF ; --hsElevate--button--secondary__hover--borderColor: #e5e5f2 ; /* Primary outline button variables */ --hsElevate--button--primary-outline__buttonFill: no_fill ; --hsElevate--button--primary-outline__fontFamily: var(--hsElevate--cta__fontFamily); --hsElevate--button--primary-outline__fontSize: var(--hsElevate--cta__fontSize); --hsElevate--button--primary-outline__fontWeight: var(--hsElevate--cta__fontWeight); --hsElevate--button--primary-outline__fontStyle: var(--hsElevate--cta__fontStyle); --hsElevate--button--primary-outline__letterSpacing: var(--hsElevate--cta__letterSpacing); --hsElevate--button--primary-outline__textTransform: var(--hsElevate--cta__textTransform); --hsElevate--button--primary-outline__textColor: #342775 ; --hsElevate--button--primary-outline__hover--textColor: #F1F1F8 ; --hsElevate--button--primary-outline__borderRadius: var(--hsElevate--radius--small); --hsElevate--button--primary-outline__backgroundColor: transparent; --hsElevate--button--primary-outline__hover--backgroundColor: #342775 ; --hsElevate--button--primary-outline__borderThickness: 2px ; --hsElevate--button--primary-outline__hover--borderThickness: 2px ; --hsElevate--button--primary-outline__borderColor: #342775 ; --hsElevate--button--primary-outline__hover--borderColor: #342775 ; --hsElevate--button--primary-outline__active--borderColor: #160957 ; /* Secondary outline button variables */ --hsElevate--button--secondary-outline__buttonFill: no_fill ; --hsElevate--button--secondary-outline__fontFamily: var(--hsElevate--cta__fontFamily); --hsElevate--button--secondary-outline__fontSize: var(--hsElevate--cta__fontSize); --hsElevate--button--secondary-outline__fontWeight: var(--hsElevate--cta__fontWeight); --hsElevate--button--secondary-outline__fontStyle: var(--hsElevate--cta__fontStyle); --hsElevate--button--secondary-outline__letterSpacing: var(--hsElevate--cta__letterSpacing); --hsElevate--button--secondary-outline__textTransform: var(--hsElevate--cta__textTransform); --hsElevate--button--secondary-outline__textColor: #FFB600 ; --hsElevate--button--secondary-outline__hover--textColor: #342775 ; --hsElevate--button--secondary-outline__borderRadius: var(--hsElevate--radius--small); --hsElevate--button--secondary-outline__backgroundColor: transparent; --hsElevate--button--secondary-outline__hover--backgroundColor: #FFB600 ; --hsElevate--button--secondary-outline__borderThickness: 2px ; --hsElevate--button--secondary-outline__hover--borderThickness: 2px ; --hsElevate--button--secondary-outline__borderColor: #FFB600 ; --hsElevate--button--secondary-outline__hover--borderColor: #FFB600 ; /* Dark primary button variables */ --hsElevate--button--dark-primary__buttonFill: filled ; --hsElevate--button--dark-primary__fontFamily: var(--hsElevate--cta__fontFamily); --hsElevate--button--dark-primary__fontSize: var(--hsElevate--cta__fontSize); --hsElevate--button--dark-primary__fontWeight: var(--hsElevate--cta__fontWeight); --hsElevate--button--dark-primary__fontStyle: var(--hsElevate--cta__fontStyle); --hsElevate--button--dark-primary__letterSpacing: var(--hsElevate--cta__letterSpacing); --hsElevate--button--dark-primary__textTransform: var(--hsElevate--cta__textTransform); --hsElevate--button--dark-primary__textColor: #342775 ; --hsElevate--button--dark-primary__hover--textColor: #342775 ; --hsElevate--button--dark-primary__borderRadius: var(--hsElevate--radius--small); --hsElevate--button--dark-primary__backgroundColor: #F1F1F8 ; --hsElevate--button--dark-primary__borderThickness: 0px ; --hsElevate--button--dark-primary__hover--borderThickness: 0px ; --hsElevate--button--dark-primary__borderColor: transparent; --hsElevate--button--dark-primary__hover--borderColor: transparent; /* Dark primary outline button variables */ --hsElevate--button--dark-primary-outline__buttonFill: no_fill ; --hsElevate--button--dark-primary-outline__fontFamily: var(--hsElevate--cta__fontFamily); --hsElevate--button--dark-primary-outline__fontSize: var(--hsElevate--cta__fontSize); --hsElevate--button--dark-primary-outline__fontWeight: var(--hsElevate--cta__fontWeight); --hsElevate--button--dark-primary-outline__fontStyle: var(--hsElevate--cta__fontStyle); --hsElevate--button--dark-primary-outline__letterSpacing: var(--hsElevate--cta__letterSpacing); --hsElevate--button--dark-primary-outline__textTransform: var(--hsElevate--cta__textTransform); --hsElevate--button--dark-primary-outline__textColor: #F1F1F8 ; --hsElevate--button--dark-primary-outline__hover--textColor: #342775 ; --hsElevate--button--dark-primary-outline__borderRadius: var(--hsElevate--radius--small); --hsElevate--button--dark-primary-outline__backgroundColor: transparent; --hsElevate--button--dark-primary-outline__hover--backgroundColor: #F1F1F8 ; --hsElevate--button--dark-primary-outline__borderThickness: 2px ; --hsElevate--button--dark-primary-outline__hover--borderThickness: 2px ; --hsElevate--button--dark-primary-outline__borderColor: #F1F1F8 ; --hsElevate--button--dark-primary-outline__hover--borderColor: #F1F1F8 ; /* Link button variables */ --hsElevate--button--link__fontSize: var(--hsElevate--body--small__fontSize); --hsElevate--button--link__fontWeight: var(--hsElevate--body__fontWeight); --hsElevate--button--link__letterSpacing: 0em; --hsElevate--button--link__textTransform: none; --hsElevate--button--link__textColor: #10001F ; --hsElevate--button--link__decorationColor: #10001F ; --hsElevate--button--link__hover--textColor: #342775 ; --hsElevate--button--link__hover--decorationColor: #342775 ; /* Dark link button variables */ --hsElevate--button--dark-link__fontSize: var(--hsElevate--body--small__fontSize); --hsElevate--button--dark-link__fontWeight: var(--hsElevate--body__fontWeight); --hsElevate--button--dark-link__letterSpacing: 0em; --hsElevate--button--dark-link__textTransform: none; --hsElevate--button--dark-link__textColor: #FFFFFF ; --hsElevate--button--dark-link__decorationColor: #FFFFFF ; --hsElevate--button--dark-link__hover--textColor: #FFFFFF ; --hsElevate--button--dark-link__hover--decorationColor: #FFFFFF ; } :root { /* Form field background color */ --hsElevate--formField__backgroundColor: #F1F1F8 ; /* Form field shape */ --hsElevate--formField__borderRadius: var(--hsElevate--radius--small); /* 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: #10001F ; /* 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: #10001F ; --hsElevate--formLabel__font: "Inter", sans-serif; --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: #F1F1F8 ; /* Form shape */ --hsElevate--form__borderRadius: var(--hsElevate--radius--large); /* 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: var(--hsElevate--radius--large); --hsElevate--card--variant1__iconBorderRadius: var(--hsElevate--radius--medium); /* Border thickness */ --hsElevate--card--variant1__borderThickness: 1px ; /* Colors */ --hsElevate--card--variant1__backgroundColor: #F1F1F8 ; --hsElevate--card--variant1__borderColor: #4B48B7 ; --hsElevate--card--variant1__textColor: #000000 ; --hsElevate--card--variant1__bodyColor: #525252 ; /* Links */ --hsElevate--card--variant1--link__fontColor: #342775 ; --hsElevate--card--variant1--link__textDecoration: none; --hsElevate--card--variant1--link__textDecorationColor: transparent; /* Hover state */ --hsElevate--card--variant1--link__hover--fontColor: #342775 ; --hsElevate--card--variant1--link__hover--textDecoration: underline; --hsElevate--card--variant1--link__hover--textDecorationColor: #342775 ; /* Icon colors */ --hsElevate--card--variant1__iconColor: #4B48B7 ; --hsElevate--card--variant1__iconBackgroundColor: #4B48B7 ; /* Card variant 2 */ /* Shape */ --hsElevate--card--variant2__borderRadius: var(--hsElevate--radius--large); --hsElevate--card--variant2__iconBorderRadius: var(--hsElevate--radius--medium); /* Border thickness */ --hsElevate--card--variant2__borderThickness: 1px ; /* Colors */ --hsElevate--card--variant2__backgroundColor: #F1F1F8 ; --hsElevate--card--variant2__borderColor: #FFB600 ; --hsElevate--card--variant2__textColor: #000000 ; --hsElevate--card--variant2__bodyColor: #525252 ; /* Links */ --hsElevate--card--variant2--link__fontColor: #342775 ; --hsElevate--card--variant2--link__textDecoration: none; --hsElevate--card--variant2--link__textDecorationColor: transparent; /* Hover state */ --hsElevate--card--variant2--link__hover--fontColor: #342775 ; --hsElevate--card--variant2--link__hover--textDecoration: underline; --hsElevate--card--variant2--link__hover--textDecorationColor: #342775 ; /* Icon colors */ --hsElevate--card--variant2__iconColor: #FFB600 ; --hsElevate--card--variant2__iconBackgroundColor: #FFB600 ; } :root { /* Accordion variant 1 */ /* Shape */ --hsElevate--accordion--variant1__borderRadius: var(--hsElevate--radius--large); /* Border */ --hsElevate--accordion--variant1__borderThickness: 1px ; --hsElevate--accordion--variant1__borderColor: #4B48B7 ; /* Colors */ --hsElevate--accordion--variant1__backgroundColor: transparent; --hsElevate--accordion--variant1__hoverColor: #342775 ; --hsElevate--accordion--variant1__textColor: #FFFFFF ; --hsElevate--accordion--variant1__bodyColor: #FFFFFF ; --hsElevate--accordion--variant1__iconColor: #FFFFFF ; /* Accordion variant 2 */ /* Shape */ --hsElevate--accordion--variant2__borderRadius: var(--hsElevate--radius--large); /* Border */ --hsElevate--accordion--variant2__borderThickness: 1px ; --hsElevate--accordion--variant2__borderColor: #4B48B7 ; /* Colors */ --hsElevate--accordion--variant2__backgroundColor: #F1F1F8 ; --hsElevate--accordion--variant2__hoverColor: #F5F5F5 ; --hsElevate--accordion--variant2__textColor: #000000 ; --hsElevate--accordion--variant2__bodyColor: #525252 ; --hsElevate--accordion--variant2__iconColor: #4B48B7 ; } :root { /* Accordion with Image — Variant 1 (Dark) */ /* Shape */ --hsElevate--awi--variant1__borderRadius: 0; /* Border */ --hsElevate--awi--variant1__borderThickness: 1px ; --hsElevate--awi--variant1__borderColor: #ffffff ; /* Summary padding */ --hsElevate--awi--variant1__summaryPaddingTop: var(--hsElevate--spacing--16, 16px); --hsElevate--awi--variant1__summaryPaddingBottom: var(--hsElevate--spacing--16, 16px); /* Detail padding */ --hsElevate--awi--variant1__paddingTop: 0px ; --hsElevate--awi--variant1__paddingRight: 0px ; --hsElevate--awi--variant1__paddingBottom: 0px ; --hsElevate--awi--variant1__paddingLeft: 0px ; /* Colors */ --hsElevate--awi--variant1__backgroundColor: #10001F ; --hsElevate--awi--variant1__activeBgColor: #10001F ; --hsElevate--awi--variant1__textColor: #ffffff ; --hsElevate--awi--variant1__hoverTextColor: #4B48B7 ; --hsElevate--awi--variant1__bodyColor: #E0E0E0 ; --hsElevate--awi--variant1__stageColor: #4B48B7 ; --hsElevate--awi--variant1__hoverBorderColor: #4B48B7 ; /* Accordion with Image — Variant 2 (Light) */ /* Shape */ --hsElevate--awi--variant2__borderRadius: 0; /* Border */ --hsElevate--awi--variant2__borderThickness: 1px ; --hsElevate--awi--variant2__borderColor: #000000 ; /* Summary padding */ --hsElevate--awi--variant2__summaryPaddingTop: var(--hsElevate--spacing--16, 16px); --hsElevate--awi--variant2__summaryPaddingBottom: var(--hsElevate--spacing--16, 16px); /* Detail padding */ --hsElevate--awi--variant2__paddingTop: 24px ; --hsElevate--awi--variant2__paddingRight: 24px ; --hsElevate--awi--variant2__paddingBottom: 24px ; --hsElevate--awi--variant2__paddingLeft: 24px ; /* Colors */ --hsElevate--awi--variant2__backgroundColor: #F1F1F8 ; --hsElevate--awi--variant2__activeBgColor: #F5F5F5 ; --hsElevate--awi--variant2__textColor: #000000 ; --hsElevate--awi--variant2__hoverTextColor: #4B48B7 ; --hsElevate--awi--variant2__bodyColor: #525252 ; --hsElevate--awi--variant2__stageColor: #4B48B7 ; --hsElevate--awi--variant2__hoverBorderColor: #4B48B7 ; } :root { /* Light section 1 */ --hsElevate--section--lightSection--1__backgroundColor: #F1F1F8 ; --hsElevate--section--lightSection--1__textColor: #000000 ; --hsElevate--section--lightSection--1__headingColor: #000000 ; --hsElevate--section--lightSection--1__bodyColor: #525252 ; --hsElevate--section--lightSection--1__accentColor: #342775 ; --hsElevate--section--lightSection--1__captionColor: #647390 ; --hsElevate--section--lightSection--1__eyebrowColor: var(--hsElevate--eyebrow__color--light); --hsElevate--section--lightSection--1__statColor: var(--hsElevate--stat__color--light); --hsElevate--section--lightSection--1--blockquote__textColor: #10001F ; --hsElevate--section--lightSection--1--blockquote__backgroundColor: #F1F1F8 ; --hsElevate--section--lightSection--1--blockquote__accentColor: #342775 ; --hsElevate--section--lightSection--1--link__fontColor: #342775 ; --hsElevate--section--lightSection--1--link__textDecoration: none; --hsElevate--section--lightSection--1--link__textDecorationColor: transparent; /* Hover state */ --hsElevate--section--lightSection--1--link__hover--fontColor: #342775 ; --hsElevate--section--lightSection--1--link__hover--textDecoration: underline; --hsElevate--section--lightSection--1--link__hover--textDecorationColor: #342775 ; /* Dark section 1 */ --hsElevate--section--darkSection--1__backgroundColor: #10001F ; --hsElevate--section--darkSection--1__textColor: #FFFFFF ; --hsElevate--section--darkSection--1__headingColor: #FFFFFF ; --hsElevate--section--darkSection--1__bodyColor: #FFFFFF ; --hsElevate--section--darkSection--1__accentColor: #342775 ; --hsElevate--section--darkSection--1__captionColor: #7D8CA5 ; --hsElevate--section--darkSection--1__eyebrowColor: var(--hsElevate--eyebrow__color--dark); --hsElevate--section--darkSection--1__statColor: var(--hsElevate--stat__color--dark); --hsElevate--section--darkSection--1--blockquote__textColor: #F1F1F8 ; --hsElevate--section--darkSection--1--blockquote__backgroundColor: #18233B ; --hsElevate--section--darkSection--1--blockquote__accentColor: #342775 ; --hsElevate--section--darkSection--1--link__fontColor: #342775 ; --hsElevate--section--darkSection--1--link__textDecoration: none; --hsElevate--section--darkSection--1--link__textDecorationColor: transparent; /* Hover state */ --hsElevate--section--darkSection--1--link__hover--fontColor: #342775 ; --hsElevate--section--darkSection--1--link__hover--textDecoration: underline; --hsElevate--section--darkSection--1--link__hover--textDecorationColor: #342775 ; /* Body color mode — background is independent (overridable in forks), text/heading from section scheme */ --hsElevate--body__backgroundColor: #10001F ; --hsElevate--body__textColor: var(--hsElevate--section--darkSection--1__bodyColor); --hsElevate--body__headingColor: var(--hsElevate--section--darkSection--1__headingColor); } :root { /* Font */ --hsElevate--tag__font: "Inter", sans-serif; --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 { /* Icon sizes & padding - Desktop (from display heading theme settings) */ --hsElevate--icon--display__size: 56px ; --hsElevate--icon--display__padding: 18px ; --hsElevate--icon--display__margin: 22px ; --hsElevate--icon--display__borderRadius: 18px ; /* Icon sizes & padding - Desktop (from heading theme settings) */ --hsElevate--icon--heading1__size: 48px ; --hsElevate--icon--heading1__padding: 16px ; --hsElevate--icon--heading1__margin: 20px ; --hsElevate--icon--heading1__borderRadius: 16px ; --hsElevate--icon--heading2__size: 40px ; --hsElevate--icon--heading2__padding: 14px ; --hsElevate--icon--heading2__margin: 18px ; --hsElevate--icon--heading2__borderRadius: 14px ; --hsElevate--icon--heading3__size: 32px ; --hsElevate--icon--heading3__padding: 12px ; --hsElevate--icon--heading3__margin: 16px ; --hsElevate--icon--heading3__borderRadius: 12px ; --hsElevate--icon--heading4__size: 24px ; --hsElevate--icon--heading4__padding: 10px ; --hsElevate--icon--heading4__margin: 14px ; --hsElevate--icon--heading4__borderRadius: 10px ; --hsElevate--icon--heading5__size: 20px ; --hsElevate--icon--heading5__padding: 8px ; --hsElevate--icon--heading5__margin: 12px ; --hsElevate--icon--heading5__borderRadius: 8px ; --hsElevate--icon--heading6__size: 16px ; --hsElevate--icon--heading6__padding: 6px ; --hsElevate--icon--heading6__margin: 10px ; --hsElevate--icon--heading6__borderRadius: 6px ; /* Icon sizes & padding - Desktop (from body/eyebrow theme settings) */ --hsElevate--icon--eyebrow__size: 20px ; --hsElevate--icon--eyebrow__padding: 10px ; --hsElevate--icon--eyebrow__margin: 8px ; --hsElevate--icon--eyebrow__borderRadius: 10px ; --hsElevate--icon--bodyLg__size: 18px ; --hsElevate--icon--bodyLg__padding: 6px ; --hsElevate--icon--bodyLg__margin: 10px ; --hsElevate--icon--bodyLg__borderRadius: 8px ; --hsElevate--icon--bodyMd__size: 16px ; --hsElevate--icon--bodyMd__padding: 4px ; --hsElevate--icon--bodyMd__margin: 8px ; --hsElevate--icon--bodyMd__borderRadius: 6px ; --hsElevate--icon--bodySm__size: 14px ; --hsElevate--icon--bodySm__padding: 4px ; --hsElevate--icon--bodySm__margin: 8px ; --hsElevate--icon--bodySm__borderRadius: 6px ; /* Icon sizes & padding - Desktop (from list theme settings) */ --hsElevate--icon--listLg__size: 18px ; --hsElevate--icon--listLg__padding: 6px ; --hsElevate--icon--listLg__margin: 10px ; --hsElevate--icon--listLg__borderRadius: 8px ; --hsElevate--icon--listMd__size: 16px ; --hsElevate--icon--listMd__padding: 4px ; --hsElevate--icon--listMd__margin: 8px ; --hsElevate--icon--listMd__borderRadius: 6px ; --hsElevate--icon--listSm__size: 14px ; --hsElevate--icon--listSm__padding: 4px ; --hsElevate--icon--listSm__margin: 8px ; --hsElevate--icon--listSm__borderRadius: 6px ; /* Material Symbols fill setting (theme-level toggle) */ --hsElevate--icon--material__fill: 0; /* Icon style variants — mapped to semantic color roles */ /* Primary — primary bg, light text icon */ --hsElevate--icon--primary__color: #FFFFFF ; --hsElevate--icon--primary__backgroundColor: #342775 ; /* Primary Light — secondary bg, dark text icon */ --hsElevate--icon--primaryLight__color: #10001F ; --hsElevate--icon--primaryLight__backgroundColor: #FFB600 ; /* Secondary — accent 1 bg, light text icon */ --hsElevate--icon--secondary__color: #FFFFFF ; --hsElevate--icon--secondary__backgroundColor: #4B48B7 ; /* Surface — light bg, dark text icon */ --hsElevate--icon--surface__color: #10001F ; --hsElevate--icon--surface__backgroundColor: #F1F1F8 ; /* Highlight — accent 2 bg, dark text icon */ --hsElevate--icon--highlight__color: #10001F ; --hsElevate--icon--highlight__backgroundColor: #A69EEF ; } /* Tablet Breakpoint - 768px to 1024px */ @media (max-width: 1024px) { :root { --hsElevate--icon--display__size: 56px ; --hsElevate--icon--display__padding: 18px ; --hsElevate--icon--display__margin: 22px ; --hsElevate--icon--display__borderRadius: 18px ; --hsElevate--icon--heading1__size: 40px ; --hsElevate--icon--heading1__padding: 14px ; --hsElevate--icon--heading1__margin: 18px ; --hsElevate--icon--heading1__borderRadius: 14px ; --hsElevate--icon--heading2__size: 32px ; --hsElevate--icon--heading2__padding: 12px ; --hsElevate--icon--heading2__margin: 16px ; --hsElevate--icon--heading2__borderRadius: 12px ; --hsElevate--icon--heading3__size: 28px ; --hsElevate--icon--heading3__padding: 10px ; --hsElevate--icon--heading3__margin: 14px ; --hsElevate--icon--heading3__borderRadius: 10px ; --hsElevate--icon--heading4__size: 20px ; --hsElevate--icon--heading4__padding: 8px ; --hsElevate--icon--heading4__margin: 12px ; --hsElevate--icon--heading4__borderRadius: 10px ; --hsElevate--icon--heading5__size: 18px ; --hsElevate--icon--heading5__padding: 6px ; --hsElevate--icon--heading5__margin: 10px ; --hsElevate--icon--heading5__borderRadius: 8px ; --hsElevate--icon--heading6__size: 14px ; --hsElevate--icon--heading6__padding: 6px ; --hsElevate--icon--heading6__margin: 10px ; --hsElevate--icon--heading6__borderRadius: 6px ; --hsElevate--icon--eyebrow__size: 16px ; --hsElevate--icon--eyebrow__padding: 8px ; --hsElevate--icon--eyebrow__margin: 8px ; --hsElevate--icon--eyebrow__borderRadius: 8px ; --hsElevate--icon--bodyLg__size: 18px ; --hsElevate--icon--bodyLg__padding: 6px ; --hsElevate--icon--bodyLg__margin: 10px ; --hsElevate--icon--bodyLg__borderRadius: 8px ; --hsElevate--icon--bodyMd__size: 14px ; --hsElevate--icon--bodyMd__padding: 4px ; --hsElevate--icon--bodyMd__margin: 8px ; --hsElevate--icon--bodyMd__borderRadius: 6px ; --hsElevate--icon--bodySm__size: 12px ; --hsElevate--icon--bodySm__padding: 4px ; --hsElevate--icon--bodySm__margin: 8px ; --hsElevate--icon--bodySm__borderRadius: 6px ; --hsElevate--icon--listLg__size: 18px ; --hsElevate--icon--listLg__padding: 6px ; --hsElevate--icon--listLg__margin: 10px ; --hsElevate--icon--listLg__borderRadius: 8px ; --hsElevate--icon--listMd__size: 14px ; --hsElevate--icon--listMd__padding: 4px ; --hsElevate--icon--listMd__margin: 8px ; --hsElevate--icon--listMd__borderRadius: 6px ; --hsElevate--icon--listSm__size: 12px ; --hsElevate--icon--listSm__padding: 4px ; --hsElevate--icon--listSm__margin: 8px ; --hsElevate--icon--listSm__borderRadius: 6px ; } } /* Mobile Breakpoint - < 768px */ @media (max-width: 768px) { :root { --hsElevate--icon--display__size: 48px ; --hsElevate--icon--display__padding: 16px ; --hsElevate--icon--display__margin: 20px ; --hsElevate--icon--display__borderRadius: 16px ; --hsElevate--icon--heading1__size: 32px ; --hsElevate--icon--heading1__padding: 12px ; --hsElevate--icon--heading1__margin: 16px ; --hsElevate--icon--heading1__borderRadius: 12px ; --hsElevate--icon--heading2__size: 28px ; --hsElevate--icon--heading2__padding: 10px ; --hsElevate--icon--heading2__margin: 14px ; --hsElevate--icon--heading2__borderRadius: 10px ; --hsElevate--icon--heading3__size: 24px ; --hsElevate--icon--heading3__padding: 8px ; --hsElevate--icon--heading3__margin: 12px ; --hsElevate--icon--heading3__borderRadius: 10px ; --hsElevate--icon--heading4__size: 18px ; --hsElevate--icon--heading4__padding: 6px ; --hsElevate--icon--heading4__margin: 10px ; --hsElevate--icon--heading4__borderRadius: 8px ; --hsElevate--icon--heading5__size: 16px ; --hsElevate--icon--heading5__padding: 6px ; --hsElevate--icon--heading5__margin: 10px ; --hsElevate--icon--heading5__borderRadius: 6px ; --hsElevate--icon--heading6__size: 14px ; --hsElevate--icon--heading6__padding: 6px ; --hsElevate--icon--heading6__margin: 8px ; --hsElevate--icon--heading6__borderRadius: 6px ; --hsElevate--icon--eyebrow__size: 16px ; --hsElevate--icon--eyebrow__padding: 8px ; --hsElevate--icon--eyebrow__margin: 8px ; --hsElevate--icon--eyebrow__borderRadius: 8px ; --hsElevate--icon--bodyLg__size: 16px ; --hsElevate--icon--bodyLg__padding: 4px ; --hsElevate--icon--bodyLg__margin: 8px ; --hsElevate--icon--bodyLg__borderRadius: 6px ; --hsElevate--icon--bodyMd__size: 14px ; --hsElevate--icon--bodyMd__padding: 4px ; --hsElevate--icon--bodyMd__margin: 8px ; --hsElevate--icon--bodyMd__borderRadius: 6px ; --hsElevate--icon--bodySm__size: 12px ; --hsElevate--icon--bodySm__padding: 4px ; --hsElevate--icon--bodySm__margin: 8px ; --hsElevate--icon--bodySm__borderRadius: 6px ; --hsElevate--icon--listLg__size: 16px ; --hsElevate--icon--listLg__padding: 4px ; --hsElevate--icon--listLg__margin: 8px ; --hsElevate--icon--listLg__borderRadius: 6px ; --hsElevate--icon--listMd__size: 14px ; --hsElevate--icon--listMd__padding: 4px ; --hsElevate--icon--listMd__margin: 8px ; --hsElevate--icon--listMd__borderRadius: 6px ; --hsElevate--icon--listSm__size: 12px ; --hsElevate--icon--listSm__padding: 4px ; --hsElevate--icon--listSm__margin: 8px ; --hsElevate--icon--listSm__borderRadius: 6px ; } } /* Image settings from theme */ :root { --hsElevate--image__borderRadius: var(--hsElevate--radius--large); } /* ========================================================================== Sprout Fork-Specific Styles ========================================================================== Styles unique to the Sprout client fork. Not present in the upstream master theme. Imported last in settings so it can reference all vars. ========================================================================== */ /* Body background images -------------------------------------------------------------------------- Two page types: homepage and inside (sub) pages. Each has a desktop and mobile variant. The class is set via the template_body_class block in each template. -------------------------------------------------------------------------- */ .sprout-page-home, .sprout-page-inside { background-repeat: no-repeat; background-position: top center; background-size: 100% auto; } /* The background-image URLs are set via a