/* Theme base styles */ /* Tools Any animations, or functions used throughout the project. Note: _macros.css needs to be imported into each stylesheet where macros are used and not included here */ /* Generic This is where reset, normalize, design tokens & box-sizing styles go. */ /* ============================================================ * Webfonts * ------------------------------------------------------------ * Galano Grotesque (heading) — self-hosted from HubSpot File * Manager. 4 weights loaded: * 400 Regular — body + non-bold UI text * 500 Medium — all headings (h1–h5) * 600 SemiBold — eyebrows, link/topic labels, item labels * 700 Bold — header buttons, mega-icon, max emphasis * * Manrope (body) — loaded from Google Fonts CDN. Used for all * description/body text across the modules. * * font-display: swap → render fallback (system-ui) instantly * then swap to webfont once loaded; avoids invisible-text flash. * ============================================================ */ @import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap"); @font-face { font-family: "Galano Grotesque"; font-style: normal; font-weight: 400; font-display: swap; src: url("https://51415689.fs1.hubspotusercontent-na1.net/hubfs/51415689/GalanoGrotesqueRegular.otf") format("opentype"); } @font-face { font-family: "Galano Grotesque"; font-style: normal; font-weight: 500; font-display: swap; src: url("https://51415689.fs1.hubspotusercontent-na1.net/hubfs/51415689/GalanoGrotesqueMedium.otf") format("opentype"); } @font-face { font-family: "Galano Grotesque"; font-style: normal; font-weight: 600; font-display: swap; src: url("https://51415689.fs1.hubspotusercontent-na1.net/hubfs/51415689/GalanoGrotesqueSemiBold.otf") format("opentype"); } @font-face { font-family: "Galano Grotesque"; font-style: normal; font-weight: 700; font-display: swap; src: url("https://51415689.fs1.hubspotusercontent-na1.net/hubfs/51415689/GalanoGrotesqueBold.otf") format("opentype"); } /* ============================================================ * Kaymbu Design Tokens * ------------------------------------------------------------ * Pure CSS variables. Hardcoded to Brand Kit values. * Not editor-controllable; dev edits this file to change tokens. * * Type scale is mobile-first: * < 768px = mobile * 768px – 1023px = tablet (interpolated) * >= 1024px = desktop * * Note: component-level breakpoints (e.g., header at 980px, * footer at 800px) are intentionally separate from the * typography scale breakpoints above. They are layout-specific. * ============================================================ */ :root { /* ---------------------------------------------------------- * Colors — brand (legacy) * Kept for backwards compat with header/footer/feature-row. * New components should consume the --color-brand-* scale * defined below. * ---------------------------------------------------------- */ --color-primary: #179F9E; /* teal — alias of --color-brand-green-300 */ --color-primary-dark: #0D7377; /* deep teal — button hover, footer bg */ --color-secondary: #323139; /* dark charcoal */ /* Accents (paired with semantic product/solution use later) */ --color-accent-green: #E2F1CF; /* alias of --color-brand-mantis-200 */ --color-accent-blue: #DEECFB; /* legacy lighter blue, no direct brand match */ --color-accent-pink: #F0C0E8; /* legacy pink, no direct brand match */ --color-accent-peach: #FBEAD9; /* legacy peach, no direct brand match */ /* ---------------------------------------------------------- * Colors — brand scale (sourced from Figma 2026-05-16) * 6 families × 3 shades. 100 = lightest, 300 = strongest. * ---------------------------------------------------------- */ --color-brand-green-100: #ECFAF9; --color-brand-green-200: #36CBC4; --color-brand-green-300: #179F9E; --color-brand-mantis-100: #F3F9EC; --color-brand-mantis-200: #E2F1CF; --color-brand-mantis-300: #C5DAAC; --color-brand-blue-100: #F1F7FD; --color-brand-blue-200: #C5DCF2; --color-brand-blue-300: #6BA5E8; --color-brand-wisteria-100: #F5EEF9; --color-brand-wisteria-200: #E1C2F1; --color-brand-wisteria-300: #C39BD7; --color-brand-pink-100: #FBF4FA; --color-brand-pink-200: #F8D7F3; --color-brand-pink-300: #DF87C8; --color-brand-orange-100: #FDF6EF; --color-brand-orange-200: #FCDAB8; --color-brand-orange-300: #E88A4F; /* ---------------------------------------------------------- * Colors — surfaces & text * ---------------------------------------------------------- */ --color-surface: #FFFFFF; --color-text-default: #504F4F; /* body text in chrome + module descriptions */ --color-text-strong: #323139; /* headings, strong UI text */ --color-text-muted: #504F4F; /* secondary descriptions */ --color-text-inverse: #FFFFFF; /* on dark surfaces */ --color-text-inverse-soft: rgba(255, 255, 255, 0.84); --color-text-inverse-faint:rgba(255, 255, 255, 0.82); /* ---------------------------------------------------------- * Colors — borders & overlays * ---------------------------------------------------------- */ --color-border-subtle: rgba(50, 49, 57, 0.08); --color-border-default: rgba(50, 49, 57, 0.12); --color-border-mobile-menu:rgba(50, 49, 57, 0.10); --color-overlay-primary: rgba(23, 159, 158, 0.06); /* ---------------------------------------------------------- * Typography — families * ---------------------------------------------------------- */ --font-heading: "Galano Grotesque", Manrope, system-ui, sans-serif; --font-body: Manrope, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* ---------------------------------------------------------- * Typography — heading scale (Mobile defaults, < 768px) * Upgraded at 768px (tablet) and 1024px (desktop) below. * ---------------------------------------------------------- */ --font-size-h1: 40px; --line-height-h1: 1.1; --font-size-h2: 36px; --line-height-h2: 1.1; --font-size-h3: 30px; --line-height-h3: 1.1; --font-size-h4: 24px; --line-height-h4: 1.4; --font-size-h5: 20px; --line-height-h5: 1.4; --font-size-h6: 18px; --line-height-h6: 1.4; /* ---------------------------------------------------------- * Typography — body scale (same across breakpoints) * ---------------------------------------------------------- */ --font-size-body-large: 20px; --font-size-body-medium: 18px; --font-size-body-regular: 16px; --font-size-body-small: 14px; --font-size-body-tiny: 12px; --line-height-body: 1.5; /* Component-specific sizes used in chrome modules */ --font-size-footer-link: 15px; --font-size-mega-description: 13px; /* ---------------------------------------------------------- * Typography — weights * ---------------------------------------------------------- */ --font-weight-extra-bold: 800; --font-weight-bold: 700; --font-weight-semi-bold: 600; --font-weight-medium: 500; --font-weight-regular: 400; --font-weight-light: 300; /* ---------------------------------------------------------- * Spacing scale (4px base unit) * ---------------------------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 80px; /* ---------------------------------------------------------- * Layout * ---------------------------------------------------------- */ --container-max-width: 76.875rem; /* = 1230px @ 1rem=16px; matches Webflow container-large */ --container-padding-mobile: 20px; --container-padding-desktop: 32px; /* ---------------------------------------------------------- * Border radius * ---------------------------------------------------------- */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 32px; /* card radius — standardized to 32px */ --radius-pill: 999px; /* ---------------------------------------------------------- * Buttons * Shared system used by .btn (see elements/_buttons.css). * Header/footer keep their local button styles for now. * ---------------------------------------------------------- */ --radius-button: 16px; --button-height-desktop: 64px; --button-height-mobile: 56px; --color-button-secondary-border: #B8B8B8; /* ---------------------------------------------------------- * Shadows * ---------------------------------------------------------- */ --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-elevated: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-mega-menu: 0 16px 36px rgba(50, 49, 57, 0.14); --shadow-mobile-menu: 0 22px 30px rgba(50, 49, 57, 0.10); /* ---------------------------------------------------------- * Transitions * ---------------------------------------------------------- */ --transition-fast: 160ms ease; --transition-base: 200ms ease; /* ---------------------------------------------------------- * Z-index scale * ---------------------------------------------------------- */ --z-header: 20; --z-mobile-menu: 30; --z-skip-link: 50; } /* ============================================================ * Tablet typography (768px – 1023px) — interpolated * ============================================================ */ @media (min-width: 768px) { :root { --font-size-h1: 56px; --font-size-h2: 44px; --font-size-h3: 38px; --font-size-h4: 32px; --line-height-h4: 1.2; --font-size-h5: 22px; --font-size-h6: 20px; } } /* ============================================================ * Desktop typography (>= 1024px) * ============================================================ */ @media (min-width: 1024px) { :root { --font-size-h1: 72px; --font-size-h2: 52px; --font-size-h3: 48px; --font-size-h4: 40px; --font-size-h5: 26px; --font-size-h6: 20px; } } *, *:before, *:after { box-sizing: border-box; } /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ /* Document ========================================================================== */ /** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font size after orientation changes in iOS. */ html { line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ } /* Sections ========================================================================== */ /** * Remove the margin in all browsers. */ body { margin: 0; } /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; margin: 0.67em 0; } /* Grouping content ========================================================================== */ /** * Add the correct box sizing in Firefox. */ hr { box-sizing: content-box; height: 0; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /* Text-level semantics ========================================================================== */ /** * 1. Remove the bottom border in Chrome 57- * 2. Add the correct text decoration in Chrome, Edge, Opera, and Safari. */ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ text-decoration: underline dotted; /* 2 */ } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * Add the correct font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* Forms ========================================================================== */ /** * 1. Change the font styles in all browsers. * 2. Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ } /** * Remove the inheritance of text transform in Edge and Firefox. * 1. Remove the inheritance of text transform in Firefox. */ button, select { /* 1 */ text-transform: none; } /** * Correct the inability to style clickable types in iOS and Safari. */ button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } /** * Correct the padding in Firefox. */ fieldset { padding: 0.35em 0.75em 0.625em; } /** * Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers. */ legend { padding: 0; } /** * Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { vertical-align: baseline; } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ [type="search"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** * Remove the inner padding in Chrome and Safari on macOS. */ [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Interactive ========================================================================== */ /* * Add the correct display in Edge and Firefox. */ details { display: block; } /* * Add the correct display in all browsers. */ summary { display: list-item; } /* Objects Non-cosmetic design patterns including grid and layout classes) */ /* CSS variables */ :root { --column-gap: 2.13%; --column-width-multiplier: 8.333; } /* Mobile layout */ .row-fluid { display: flex; flex-wrap: wrap; width: 100%; } .row-fluid .span1, .row-fluid .span2, .row-fluid .span3, .row-fluid .span4, .row-fluid .span5, .row-fluid .span6, .row-fluid .span7, .row-fluid .span8, .row-fluid .span9, .row-fluid .span10, .row-fluid .span11, .row-fluid .span12{ min-height: 1px; width: 100%; } /* Desktop layout */ @media (min-width: 768px) { .row-fluid { flex-wrap: nowrap; justify-content: space-between; } .row-fluid .span1 { width: calc(var(--column-width-multiplier) * 1% * 1 - var(--column-gap) * (11 * var(--column-width-multiplier) / 100)); } .row-fluid .span2 { width: calc(var(--column-width-multiplier) * 1% * 2 - var(--column-gap) * (10 * var(--column-width-multiplier) / 100)); } .row-fluid .span3 { width: calc(var(--column-width-multiplier) * 1% * 3 - var(--column-gap) * (9 * var(--column-width-multiplier) / 100)); } .row-fluid .span4 { width: calc(var(--column-width-multiplier) * 1% * 4 - var(--column-gap) * (8 * var(--column-width-multiplier) / 100)); } .row-fluid .span5 { width: calc(var(--column-width-multiplier) * 1% * 5 - var(--column-gap) * (7 * var(--column-width-multiplier) / 100)); } .row-fluid .span6 { width: calc(var(--column-width-multiplier) * 1% * 6 - var(--column-gap) * (6 * var(--column-width-multiplier) / 100)); } .row-fluid .span7 { width: calc(var(--column-width-multiplier) * 1% * 7 - var(--column-gap) * (5 * var(--column-width-multiplier) / 100)); } .row-fluid .span8 { width: calc(var(--column-width-multiplier) * 1% * 8 - var(--column-gap) * (4 * var(--column-width-multiplier) / 100)); } .row-fluid .span9 { width: calc(var(--column-width-multiplier) * 1% * 9 - var(--column-gap) * (3 * var(--column-width-multiplier) / 100)); } .row-fluid .span10 { width: calc(var(--column-width-multiplier) * 1% * 10 - var(--column-gap) * (2 * var(--column-width-multiplier) / 100)); } .row-fluid .span11 { width: calc(var(--column-width-multiplier) * 1% * 11 - var(--column-gap) * (1 * var(--column-width-multiplier) / 100)); } } .content-wrapper { margin: 0 auto; padding: 0 1rem; } @media screen and (min-width: 1380px) { .content-wrapper { padding: 0; } } .dnd-section > .row-fluid { margin: 0 auto; } /* Equal-height columns: opt-in per row via the "kaymbu-row-equal" class on a * dnd-section. Makes the row a flex container so its column modules stretch to * the tallest one (modules that set height:100% then fill). Scoped — does not * affect other rows. */ @media (min-width: 768px) { .kaymbu-row-equal > .row-fluid { align-items: stretch; display: flex; flex-wrap: wrap; } .kaymbu-row-equal > .row-fluid > [class*="span"] { display: flex; } .kaymbu-row-equal > .row-fluid > [class*="span"] > .hs_cos_wrapper { width: 100%; } } .dnd-section .dnd-column { padding: 0 1rem; } @media (max-width: 767px) { .dnd-section .dnd-column { padding: 0; } } /* Vertical gap between consecutive dnd-rows inside a dnd-column, * matching the horizontal --column-gap variable. */ .dnd-column > .row-fluid-wrapper.dnd-row + .row-fluid-wrapper.dnd-row { margin-top: var(--column-gap); } /* Home hero: the first section carries a large desktop bottom padding (144px, * set in the page's section spacing) with no mobile override, leaving a big * empty gap above the wave on phones. Trim it on mobile. Scoped to the home * template wrapper (.body-container--home, set on the dnd_area in home.html) so * other pages keep their own first-section padding. The generated * .dnd_area-row-0-padding rule is !important, so this override is too. */ @media (max-width: 767px) { .body-container--home .dnd_area-row-0-padding { padding-bottom: var(--space-7) !important; /* 48px */ } } /* Elements Base HTML elements are styled in this section (,

, ,

,