/*
1. Libraries
2. Base
*/
/* Enable CSS debug mode */
/* * {border: 1px solid red;} */
/* Libraries */
*,
*:before,
*:after {
box-sizing: border-box;
} /* 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;
} /* https://github.com/necolas/normalize.css */
/* 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));
}
} /* layout classes https://github.com/HubSpot/cms-theme-boilerplate */
.content-wrapper {
margin: 0 auto;
padding: 0;
}
@media screen and (min-width: 1380px) {
.content-wrapper {
padding: 0;
}
}
.dnd-section>.row-fluid {
margin: 0 auto;
}
.dnd-section .dnd-column {
padding: 0;
}
@media (max-width: 767px) {
.dnd-section .dnd-column {
padding: 0;
}
} /* dnd classes https://github.com/HubSpot/cms-theme-boilerplate */
[data-sal] {
transition-delay: 0s;
transition-delay: var(--sal-delay, 0s);
transition-duration: .2s;
transition-duration: var(--sal-duration, .2s);
transition-timing-function: ease;
transition-timing-function: var(--sal-easing, ease)
}
[data-sal][data-sal-duration="200"] {
transition-duration: .2s
}
[data-sal][data-sal-duration="250"] {
transition-duration: .25s
}
[data-sal][data-sal-duration="300"] {
transition-duration: .3s
}
[data-sal][data-sal-duration="350"] {
transition-duration: .35s
}
[data-sal][data-sal-duration="400"] {
transition-duration: .4s
}
[data-sal][data-sal-duration="450"] {
transition-duration: .45s
}
[data-sal][data-sal-duration="500"] {
transition-duration: .5s
}
[data-sal][data-sal-duration="550"] {
transition-duration: .55s
}
[data-sal][data-sal-duration="600"] {
transition-duration: .6s
}
[data-sal][data-sal-duration="650"] {
transition-duration: .65s
}
[data-sal][data-sal-duration="700"] {
transition-duration: .7s
}
[data-sal][data-sal-duration="750"] {
transition-duration: .75s
}
[data-sal][data-sal-duration="800"] {
transition-duration: .8s
}
[data-sal][data-sal-duration="850"] {
transition-duration: .85s
}
[data-sal][data-sal-duration="900"] {
transition-duration: .9s
}
[data-sal][data-sal-duration="950"] {
transition-duration: .95s
}
[data-sal][data-sal-duration="1000"] {
transition-duration: 1s
}
[data-sal][data-sal-duration="1050"] {
transition-duration: 1.05s
}
[data-sal][data-sal-duration="1100"] {
transition-duration: 1.1s
}
[data-sal][data-sal-duration="1150"] {
transition-duration: 1.15s
}
[data-sal][data-sal-duration="1200"] {
transition-duration: 1.2s
}
[data-sal][data-sal-duration="1250"] {
transition-duration: 1.25s
}
[data-sal][data-sal-duration="1300"] {
transition-duration: 1.3s
}
[data-sal][data-sal-duration="1350"] {
transition-duration: 1.35s
}
[data-sal][data-sal-duration="1400"] {
transition-duration: 1.4s
}
[data-sal][data-sal-duration="1450"] {
transition-duration: 1.45s
}
[data-sal][data-sal-duration="1500"] {
transition-duration: 1.5s
}
[data-sal][data-sal-duration="1550"] {
transition-duration: 1.55s
}
[data-sal][data-sal-duration="1600"] {
transition-duration: 1.6s
}
[data-sal][data-sal-duration="1650"] {
transition-duration: 1.65s
}
[data-sal][data-sal-duration="1700"] {
transition-duration: 1.7s
}
[data-sal][data-sal-duration="1750"] {
transition-duration: 1.75s
}
[data-sal][data-sal-duration="1800"] {
transition-duration: 1.8s
}
[data-sal][data-sal-duration="1850"] {
transition-duration: 1.85s
}
[data-sal][data-sal-duration="1900"] {
transition-duration: 1.9s
}
[data-sal][data-sal-duration="1950"] {
transition-duration: 1.95s
}
[data-sal][data-sal-duration="2000"] {
transition-duration: 2s
}
[data-sal][data-sal-delay="50"] {
transition-delay: .05s
}
[data-sal][data-sal-delay="100"] {
transition-delay: .1s
}
[data-sal][data-sal-delay="150"] {
transition-delay: .15s
}
[data-sal][data-sal-delay="200"] {
transition-delay: .2s
}
[data-sal][data-sal-delay="250"] {
transition-delay: .25s
}
[data-sal][data-sal-delay="300"] {
transition-delay: .3s
}
[data-sal][data-sal-delay="350"] {
transition-delay: .35s
}
[data-sal][data-sal-delay="400"] {
transition-delay: .4s
}
[data-sal][data-sal-delay="450"] {
transition-delay: .45s
}
[data-sal][data-sal-delay="500"] {
transition-delay: .5s
}
[data-sal][data-sal-delay="550"] {
transition-delay: .55s
}
[data-sal][data-sal-delay="600"] {
transition-delay: .6s
}
[data-sal][data-sal-delay="650"] {
transition-delay: .65s
}
[data-sal][data-sal-delay="700"] {
transition-delay: .7s
}
[data-sal][data-sal-delay="750"] {
transition-delay: .75s
}
[data-sal][data-sal-delay="800"] {
transition-delay: .8s
}
[data-sal][data-sal-delay="850"] {
transition-delay: .85s
}
[data-sal][data-sal-delay="900"] {
transition-delay: .9s
}
[data-sal][data-sal-delay="950"] {
transition-delay: .95s
}
[data-sal][data-sal-delay="1000"] {
transition-delay: 1s
}
[data-sal][data-sal-easing=linear] {
transition-timing-function: linear
}
[data-sal][data-sal-easing=ease] {
transition-timing-function: ease
}
[data-sal][data-sal-easing=ease-in] {
transition-timing-function: ease-in
}
[data-sal][data-sal-easing=ease-out] {
transition-timing-function: ease-out
}
[data-sal][data-sal-easing=ease-in-out] {
transition-timing-function: ease-in-out
}
[data-sal][data-sal-easing=ease-in-cubic] {
transition-timing-function: cubic-bezier(.55, .055, .675, .19)
}
[data-sal][data-sal-easing=ease-out-cubic] {
transition-timing-function: cubic-bezier(.215, .61, .355, 1)
}
[data-sal][data-sal-easing=ease-in-out-cubic] {
transition-timing-function: cubic-bezier(.645, .045, .355, 1)
}
[data-sal][data-sal-easing=ease-in-circ] {
transition-timing-function: cubic-bezier(.6, .04, .98, .335)
}
[data-sal][data-sal-easing=ease-out-circ] {
transition-timing-function: cubic-bezier(.075, .82, .165, 1)
}
[data-sal][data-sal-easing=ease-in-out-circ] {
transition-timing-function: cubic-bezier(.785, .135, .15, .86)
}
[data-sal][data-sal-easing=ease-in-expo] {
transition-timing-function: cubic-bezier(.95, .05, .795, .035)
}
[data-sal][data-sal-easing=ease-out-expo] {
transition-timing-function: cubic-bezier(.19, 1, .22, 1)
}
[data-sal][data-sal-easing=ease-in-out-expo] {
transition-timing-function: cubic-bezier(1, 0, 0, 1)
}
[data-sal][data-sal-easing=ease-in-quad] {
transition-timing-function: cubic-bezier(.55, .085, .68, .53)
}
[data-sal][data-sal-easing=ease-out-quad] {
transition-timing-function: cubic-bezier(.25, .46, .45, .94)
}
[data-sal][data-sal-easing=ease-in-out-quad] {
transition-timing-function: cubic-bezier(.455, .03, .515, .955)
}
[data-sal][data-sal-easing=ease-in-quart] {
transition-timing-function: cubic-bezier(.895, .03, .685, .22)
}
[data-sal][data-sal-easing=ease-out-quart] {
transition-timing-function: cubic-bezier(.165, .84, .44, 1)
}
[data-sal][data-sal-easing=ease-in-out-quart] {
transition-timing-function: cubic-bezier(.77, 0, .175, 1)
}
[data-sal][data-sal-easing=ease-in-quint] {
transition-timing-function: cubic-bezier(.755, .05, .855, .06)
}
[data-sal][data-sal-easing=ease-out-quint] {
transition-timing-function: cubic-bezier(.23, 1, .32, 1)
}
[data-sal][data-sal-easing=ease-in-out-quint] {
transition-timing-function: cubic-bezier(.86, 0, .07, 1)
}
[data-sal][data-sal-easing=ease-in-sine] {
transition-timing-function: cubic-bezier(.47, 0, .745, .715)
}
[data-sal][data-sal-easing=ease-out-sine] {
transition-timing-function: cubic-bezier(.39, .575, .565, 1)
}
[data-sal][data-sal-easing=ease-in-out-sine] {
transition-timing-function: cubic-bezier(.445, .05, .55, .95)
}
[data-sal][data-sal-easing=ease-in-back] {
transition-timing-function: cubic-bezier(.6, -.28, .735, .045)
}
[data-sal][data-sal-easing=ease-out-back] {
transition-timing-function: cubic-bezier(.175, .885, .32, 1.275)
}
[data-sal][data-sal-easing=ease-in-out-back] {
transition-timing-function: cubic-bezier(.68, -.55, .265, 1.55)
}
[data-sal|=fade] {
opacity: 0;
transition-property: opacity
}
[data-sal|=fade].sal-animate,
body.sal-disabled [data-sal|=fade] {
opacity: 1
}
[data-sal|=slide] {
opacity: 0;
transition-property: opacity, transform
}
[data-sal=slide-up] {
transform: translateY(20%)
}
[data-sal=slide-down] {
transform: translateY(-20%)
}
[data-sal=slide-left] {
transform: translateX(20%)
}
[data-sal=slide-right] {
transform: translateX(-20%)
}
[data-sal|=slide].sal-animate,
body.sal-disabled [data-sal|=slide] {
opacity: 1;
transform: none
}
[data-sal|=zoom] {
opacity: 0;
transition-property: opacity, transform
}
[data-sal=zoom-in] {
transform: scale(.5)
}
[data-sal=zoom-out] {
transform: scale(1.1)
}
[data-sal|=zoom].sal-animate,
body.sal-disabled [data-sal|=zoom] {
opacity: 1;
transform: none
}
[data-sal|=flip] {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transition-property: transform
}
[data-sal=flip-left] {
transform: perspective(2000px) rotateY(-91deg)
}
[data-sal=flip-right] {
transform: perspective(2000px) rotateY(91deg)
}
[data-sal=flip-up] {
transform: perspective(2000px) rotateX(-91deg)
}
[data-sal=flip-down] {
transform: perspective(2000px) rotateX(91deg)
}
[data-sal|=flip].sal-animate,
body.sal-disabled [data-sal|=flip] {
transform: none
}
/*# sourceMappingURL=sal.css.map*/ /* https://github.com/mciastek/sal */
/* Base */
:root {
/* Colors — Theme */
--action1: #733bf7;
--action2: #00a4bd;
/* Oranges */
--orange-1: #f37321; /* Outgoing Orange */
--orange-2: #ed630c; /* Semi-Compliant Orange (AA large text) */
--orange-3: #c4530e; /* Full Compliant Orange (AA all sizes) */
--full-compliant-orange: var(--orange-3); /* Figma: Full-Compliant-Orange #C4530E */
--orange-footer-deep: #d95c0f;
--compliant-orange-large-text: var(--orange-2);
--footer-bg-gradient: linear-gradient(0deg, var(--orange-footer-deep) 73.03%, var(--compliant-orange-large-text) 100%);
/* Brand */
--aqua: #68c6b4; /* Authentic Aqua */
--authentic-aqua: var(--aqua);
--purple: #421540; /* Passionate Purple */
--purple-gradient-end: #682665;
--purple-outline: #432a3f;
--passionate-purple-5: rgba(66, 21, 64, 0.05);
/* Neutrals */
--white: #ffffff;
--black: #000000;
--light-gray: #f7f5f2; /* Glorious Gray */
--dark-gray: #595959;
/* Legacy grays (keep for backward compatibility) */
--gray1: #cccccc;
--gray2: #979797;
--gray3: #565656;
--gray4: #ececec;
--gray5: #f7f5f2;
--neutral-border: #d4d4d4;
/* Black opacities */
--black-80: rgba(0, 0, 0, .8);
--black-50: rgba(0, 0, 0, .5);
--black-30: rgba(0, 0, 0, .3);
--black-20: rgba(0, 0, 0, .2);
--black-10: rgba(0, 0, 0, .1);
/* White opacities */
--white-80: rgba(255, 255, 255, .8);
--white-50: rgba(255, 255, 255, .5);
--white-30: rgba(255, 255, 255, .3);
--white-20: rgba(255, 255, 255, .2);
--white-10: rgba(255, 255, 255, .1);
/* Gradients */
--purple-gradient: linear-gradient(180deg, var(--purple) 0%, var(--purple-gradient-end) 100%);
--gradient1: linear-gradient(-45deg, var(--action1) 0%, var(--action2) 50%);
/* Fonts */
--font1: 'Rubik', sans-serif;
--font2: 'Source Sans Pro', sans-serif;
/* Border Radius */
--border1: 10px;
--border2: 20px;
--border3: 30px;
--border4: 40px;
--border-button: 5px;
/* Shadows */
--shadow1: rgba(0, 0, 0, 0.1) 0px 2px 12px 0px;
--shadow2: rgba(0, 0, 0, 0.1) 0px 12px 24px 0px;
--shadow3: rgba(0, 0, 0, 0.1) 0px 16px 32px 0px;
--shadow-card: 0 15px 15px -10px rgba(0, 0, 0, 0.1);
--textShadow1: 0px 0px 2px rgba(0, 0, 0, 0.5);
/* Filter controls — Figma (filtered content search + selects) */
--filter-control-radius: var(--border1);
--filter-control-border: 1px solid var(--gray4);
--filter-control-bg: var(--white);
--filter-control-shadow: var(--shadow-card);
--filter-search-width: 500px;
--filter-dropdown-width: 300px;
/* Animation */
--animation1: .1s ease-in;
--animation2: .25s ease-in;
--animation3: 1s ease-in;
/* Widths */
--center: 1240px;
--center-small: 900px;
/* Spacing */
--section-padding-none: 0;
--section-padding-small: 50px 0;
--section-padding-medium: 80px 0;
--section-padding-large: 100px 0;
--section-margin-none: 0 auto;
--section-margin-small: 0 auto 50px auto;
--section-margin-medium: 0 auto 80px auto;
--section-margin-large: 0 auto 100px auto;
--glorious-gray: var(--light-gray);
--Glorious-Gray: var(--light-gray);
--header-edge: #f2f2f2;
--mega-dropdown-panel-bg: var(--Glorious-Gray, #F7F5F2);
--mega-dropdown-border: var(--header-edge);
--mega-dropdown-col-gap: 10px;
--mega-dropdown-card-w: 328px;
--mega-dropdown-column-accent-bg: #f2f0ed;
--mega-dropdown-heading-border: #e8e4df;
--mega-dropdown-link: #1a1a1a;
--mega-dropdown-shadow: var(--shadow-card);
--header-float-top: 30px;
--header-util-h: 40px;
--header-shell-min: 80px;
/* --u5-header-height on html: max(ceil(header.getBoundingClientRect().bottom), this row’s occupancy) in main.js. */
--header-occupancy: calc(var(--header-float-top) + var(--header-util-h) + 10px + var(--header-shell-min) + 32px);
--header-occupancy-mobile: calc(var(--header-float-top) + var(--header-shell-min) + 32px);
--passionate-purple: var(--purple);
--footer-landing-bg: var(--glorious-gray);
--footer-landing-text: var(--passionate-purple);
--footer-landing-social-icon: var(--orange-2);
--footer-landing-compliance-font-size: 12px;
--footer-landing-compliance-line-height: 18px;
}
/* ─── Background Utilities ───────────────────────────────── */
.bg-purple-gradient {
background: var(--purple-gradient);
}
/* ─── Centering ──────────────────────────────────────────── */
.center {
float: none;
margin-left: auto;
margin-right: auto;
max-width: var(--center);
width: 100%;
padding-left: 20px;
padding-right: 20px;
}
.center-small {
float: none;
margin-left: auto;
margin-right: auto;
max-width: var(--center-small);
width: 100%;
padding-left: 20px;
padding-right: 20px;
}
/* Default anchor link offset */
.anchor {
display: block;
position: relative;
top: -160px;
visibility: hidden;
}
.shadow-boxes {
background-color: var(--black-10);
display: flex;
justify-content: center;
align-items: center;
gap: 50px;
padding: 50px;
.box {
display: flex;
justify-content: center;
align-items: center;
background-color: var(--white);
padding: 16px;
aspect-ratio: 1/1;
max-width: 250px;
width: 100%;
&.shadow1 {
box-shadow: var(--shadow1);
}
&.shadow2 {
box-shadow: var(--shadow2);
}
&.shadow3 {
box-shadow: var(--shadow3);
}
}
}
/* Popover styling */
/* When any card popover is open, lock body scroll. Using class so it works with top-layer. */
body:has(.popover-container:popover-open) {
overflow: hidden;
}
.popover-container {
border:none;
background: transparent;
&:has(form) {
.popover-inner-container {
background: transparent;
padding:0;
}
}
/* Keep dialog within the viewport when short (Popover UA centers tall boxes → top/bottom clip). */
&:popover-open {
display: flex;
flex-direction: column;
box-sizing: border-box;
min-height: 0;
overflow: hidden;
max-height: calc(
100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 32px
);
max-height: calc(
100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 32px
);
}
/* Scroll the white panel when the stack exceeds the viewport; avoid nested flex on content (collapses height when popover is intrinsic-sized). */
&:popover-open .popover-inner-container {
flex: 1 1 auto;
min-height: 0;
overflow-x: hidden;
overflow-y: auto;
}
&::backdrop {
background: rgba(0, 0, 0, 0.9);
backdrop-filter: none;
transition: background-color 0.3s;
transition-behavior: allow-discrete;
position: fixed;
pointer-events: auto;
inset: 0px;
}
.popover-inner-container {
padding: 30px;
overflow: visible;
border-radius: var(--border3);
box-shadow: var(--shadow3);
background-color: var(--white);
@media (max-width: 580px) {
padding: 20px;
}
}
/**/
button.close-btn {
display: block;
margin:0 0 20px auto;
border:none;
background:rgba(255,255,255,.25);
width: 48px;
height: 48px;
flex: 0 0 48px;
border-radius: 50%;
border: 2px solid var(--white);
transition: var(--animation1);
span {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
svg {
width: 16px;
height: 16px;
path {
fill: var(--white);
transition: var(--animation1);
}
}
&:hover,&:focus {
background: rgba(255,255,255,.9);
svg {
path {
fill: var(--black);
}
}
}
}
.popover-content-container {
&:has(form) {
max-width: 860px;
width: 100%;
}
max-height: 650px;
overflow-y:scroll;
text-align:initial;
h1,h2,h3,h4,h5,h6 {
color: initial;
}
}
}
/* Team Member Popover — glass backdrop + purple panel (Figma) */
.popover-container.team-member {
/* Figma modal frame ~1140px; wider than --center-small (900px) so bio fits without inner scroll */
max-width: min(1140px, calc(100vw - 32px));
&:popover-open {
overflow-x: hidden;
overflow-y: auto;
}
&:popover-open .popover-inner-container {
flex: 0 0 auto;
min-height: auto;
overflow-y: visible;
}
&::backdrop {
background: rgba(255, 255, 255, 0.3);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
transition: background-color 0.3s;
transition-behavior: allow-discrete;
position: fixed;
pointer-events: auto;
inset: 0;
}
button.close-btn {
margin: 0 0 16px auto;
background: transparent;
border: 1px solid var(--black);
box-shadow: none;
svg path {
fill: var(--black);
}
&:hover,
&:focus {
background: rgba(0, 0, 0, 0.08);
svg path {
fill: var(--black);
}
}
&:focus-visible {
outline: 2px solid var(--white);
outline-offset: 2px;
}
}
.popover-inner-container {
padding: 79px 77px 81px 83px;
gap 80px;
border-radius: var(--border4);
border: 1px solid rgba(236, 236, 236, 0.46);
background: var(--purple-gradient);
box-shadow: 0 15px 15px -10px rgba(0, 0, 0, 0.1);
@media (max-width: 580px) {
padding: 24px 20px 28px;
}
}
.popover-content-container {
color: var(--white);
max-height: none;
overflow: visible;
h1,
h2,
h3,
h4,
h5,
h6 {
color: inherit;
}
a {
color: var(--white);
text-decoration: underline;
text-underline-offset: 2px;
&:hover {
color: var(--authentic-aqua);
}
}
}
.popover-team-layout {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 32px 40px;
@media (max-width: 720px) {
flex-direction: column;
align-items: center;
}
}
.popover-team-aside {
display: flex;
flex-direction: column;
align-items: center;
flex: 0 0 auto;
width: min(400px, 100%);
}
.popover-team-photo {
width: min(400px, 100%);
aspect-ratio: 400 / 300;
border-radius: var(--border3);
border: 1px solid var(--gray4);
overflow: hidden;
background: var(--white);
box-shadow: 0 15px 15px -10px rgba(0, 0, 0, 0.1);
flex-shrink: 0;
img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
}
}
.popover-team-social.social-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
margin-top: 20px;
a {
margin: 0;
display: flex;
color: var(--white);
&:after {
display: none;
}
svg path {
fill: currentcolor;
}
&:hover {
color: var(--authentic-aqua);
svg path {
fill: currentcolor;
}
}
}
}
.popover-team-main {
flex: 1 1 auto;
min-width: 0;
text-align: left;
}
.popover-member-position {
margin: 0 0 8px;
color: var(--white);
font-weight: 600;
font-size: 13px;
line-height: 1.35;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.popover-member-name {
margin: 0 0 20px;
font-weight: 700;
color: var(--white);
.popover-name-given {
color: var(--white);
}
.popover-name-family {
color: var(--white);
}
}
.popover-member-bio {
display: block;
margin: 0;
color: var(--white-80);
line-height: 1.55;
}
}
/*---------------------------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------*/
/* ─── MixItUp / Global Pagination ───────────────────────── */
.pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
width: fit-content;
margin: 0 auto;
padding: 5px;
border-radius: var(--border1);
border: 1px solid var(--gray4);
background: var(--light-gray);
box-shadow: var(--shadow-card);
button:not(.btn-stroked) {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
border: none;
background: transparent;
border-radius: var(--border1);
color: var(--dark-gray);
min-height: 44px;
min-width: 44px;
padding: 0;
font-family: var(--font1);
font-weight: 700;
font-size: 14px;
line-height: 1.2;
letter-spacing: .25px;
text-decoration: none;
cursor: pointer;
transition: background-color var(--animation2), color var(--animation2);
&:hover {
background: var(--black-10);
}
&.mixitup-control-active {
background: var(--aqua);
color: var(--black);
pointer-events: none;
}
}
}
.pagination.paginate.mixitup-page-list-disabled {
display: none;
}
/* splide pagination and arrows */
ul.splide__pagination {
position: relative;
margin-top: 30px;
bottom: unset;
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0;
padding:0;
li {
margin:0;
padding:0;
button.splide__pagination__page {
width: 24px;
height: 24px;
margin:0;
opacity:1;
border: 2px solid var(--black);
border-radius: 50%;
background: transparent;
transform: none;
transition: var(--animation1);
&:not(.is-active) {
&:hover,&:focus {
background: var(--black-10);
}
}
&.is-active {
background: var(--black);
transform: none;
}
}
}
.dark-mode & {
li {
button.splide__pagination__page {
border: 2px solid var(--white);
&.is-active {
background: var(--white);
transform: none;
}
&:not(.is-active) {
&:hover,&:focus {
background: var(--white-20);
}
}
}
}
}
}
.splide__arrows {
.splide__arrow {
background:var(--white);
border: 1px solid var(--gray1);
border-radius: 50%;
width: 40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
transition: var(--animation1);
box-shadow: var(--shadow1);
opacity:1!important;
svg {
transition: var(--animation1);
path {
fill: var(--black);
transition: var(--animation1);
}
}
&.splide__arrow--prev {
left: -18px;
transform:scale(0.8);
}
&.splide__arrow--next {
right: -18px;
transform:scale(0.8);
}
&:hover:not(:disabled) {
border: 1px solid var(--black);
background-color: var(--black);
opacity:1!important;
svg {
path {
fill: var(--white);
}
}
}
}
.dark-mode & {
.splide__arrow {
background:var(--white);
border: 1px solid var(--gray1);
svg path {
fill: var(--black);
}
&:hover:not(:disabled) {
border: 1px solid var(--gray2);
background-color: var(--light-gray);
svg path {
fill: var(--black);
}
}
}
}
}
/* Body defaults */
body {
font-size: 16px;
line-height: 1.618;
font-family: var(--font2);
color: var(--dark-gray);
font-weight: normal;
}
/* Span accent color in headings and body text */
section:not(.dark-mode) {
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.b1, .b2, .b3, .title {
span {
color: var(--orange-2);
}
}
}
section.dark-mode {
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.b1, .b2, .b3, .title {
span {
color: var(--white);
}
}
}
/* Zero top margin on first child */
p:first-child,
h1:first-child, h2:first-child, h3:first-child,
h4:first-child, h5:first-child, h6:first-child {
margin-top: 0;
}
/* ─── Headings ─────────────────────────────────────────── */
h1, .h1 {
font-family: var(--font1);
font-size: 95px;
font-weight: 800;
color: var(--orange-2);
line-height: 1;
letter-spacing: .25px;
margin: 0 0 20px;
@media (max-width: 1024px) {
font-size: 70px;
}
@media (max-width: 580px) {
font-size: 50px;
}
}
h2, .h2 {
font-family: var(--font1);
font-size: 75px;
font-weight: 800;
color: var(--orange-2);
line-height: 1.1;
letter-spacing: .25px;
margin: 0 0 20px;
@media (max-width: 1024px) {
font-size: 56px;
}
@media (max-width: 580px) {
font-size: 40px;
}
}
h3, .h3 {
font-family: var(--font1);
font-size: 50px;
font-weight: 800;
color: var(--black);
line-height: 1.15;
letter-spacing: .25px;
margin: 0 0 15px;
@media (max-width: 1024px) {
font-size: 40px;
}
@media (max-width: 580px) {
font-size: 30px;
}
}
h4, .h4 {
font-family: var(--font1);
font-size: 40px;
font-weight: 800;
color: var(--black);
line-height: 1.2;
letter-spacing: .25px;
margin: 0 0 15px;
@media (max-width: 1024px) {
font-size: 32px;
}
@media (max-width: 580px) {
font-size: 26px;
}
}
h5, .h5 {
font-family: var(--font1);
font-size: 30px;
font-weight: 700;
color: var(--black);
line-height: 1.2;
letter-spacing: .25px;
margin: 0 0 15px;
@media (max-width: 1024px) {
font-size: 26px;
}
@media (max-width: 580px) {
font-size: 22px;
}
}
h6, .h6 {
font-family: var(--font1);
font-size: 26px;
font-weight: 700;
color: var(--black);
line-height: 1.2;
letter-spacing: .25px;
margin: 0 0 15px;
@media (max-width: 1024px) {
font-size: 22px;
}
@media (max-width: 580px) {
font-size: 18px;
}
}
/* ─── Body ──────────────────────────────────────────────── */
.b1 {
font-family: var(--font2);
font-size: 24px;
font-weight: 400;
color: var(--dark-gray);
line-height: 1.42;
letter-spacing: .25px;
margin-bottom: 20px;
@media (max-width: 580px) {
font-size: 19px;
}
}
.b2 {
font-family: var(--font2);
font-size: 18px;
font-weight: 400;
color: var(--dark-gray);
line-height: 1.67;
letter-spacing: .25px;
margin-bottom: 20px;
@media (max-width: 580px) {
font-size: 16px;
}
}
.b3 {
font-family: var(--font2);
font-size: 15px;
font-weight: 400;
color: var(--dark-gray);
line-height: 1.67;
letter-spacing: .25px;
margin-bottom: 20px;
@media (max-width: 580px) {
font-size: 14px;
}
}
/* ─── Eyebrow ────────────────────────────────────────────── */
.eyebrow {
font-family: var(--font1);
font-size: 14px;
font-weight: 700;
color: var(--purple);
line-height: 30px;
letter-spacing: 1px;
text-transform: uppercase;
display: block;
margin-bottom: 12px;
@media (max-width: 580px) {
font-size: 12px;
}
}
.eyebrow-lowercase {
font-family: var(--font2);
font-size: 15px;
font-weight: 600;
color: var(--purple);
line-height: 28px;
display: block;
margin-bottom: 0;
}
/* ─── Label ──────────────────────────────────────────────── */
.label {
font-family: var(--font1);
font-size: 13px;
font-weight: 700;
color: var(--purple);
line-height: 1;
letter-spacing: 1px;
display: block;
}
/* ─── Blockquote ─────────────────────────────────────────── */
.blockquote, blockquote {
font-family: var(--font2);
font-size: 20px;
font-weight: 500;
font-style: italic;
margin: 50px auto;
display: block;
padding: 50px;
max-width: 100%;
border-radius: var(--border3);
border: 1px solid var(--gray1);
background: var(--white);
@media (max-width: 1024px) {
padding: 30px;
}
@media (max-width: 580px) {
padding: 20px;
font-size: 18px;
}
p:last-of-type {
margin-bottom: 0;
}
p:first-of-type {
margin-top: 0;
}
}
/* ─────────────────────────────────────────────────────────────
Button base — shared across all button types
───────────────────────────────────────────────────────────── */
a.btn-outline-purple,
span.btn-outline-purple a,
span.btn-outline-purple button:not(.close-btn),
button.btn-outline-purple,
a.btn-solid-purple,
span.btn-solid-purple a,
span.btn-solid-purple button:not(.close-btn),
button.btn-solid-purple,
a.btn-solid-orange,
span.btn-solid-orange a,
span.btn-solid-orange button:not(.close-btn),
button.btn-solid-orange {
position: relative;
display: inline-flex;
align-items: center;
font-family: var(--font1);
font-size: 16px;
font-weight: 600;
line-height: 1.2;
letter-spacing: .25px;
padding: 15px 30px;
border-radius: var(--border-button);
text-decoration: none;
cursor: pointer;
text-align: center;
margin: 0;
transition: background-color var(--animation2), color var(--animation2), border-color var(--animation2), padding var(--animation2);
/* 13px text–chevron: pr = 13 + 16 + inset-inline-end → 30px default, 40px hover */
&::after {
content: '';
position: absolute;
inset-block-start: 50%;
inset-inline-end: 1px;
inline-size: 16px;
block-size: 16px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M5.33717 14.2053L4.62817 13.4963L10.1243 8.00009L4.62817 2.50392L5.33717 1.79492L11.5423 8.00009L5.33717 14.2053Z' fill='white'/%3E%3C/svg%3E") center / contain no-repeat;
opacity: 0;
transform: translate(-2px, -50%);
pointer-events: none;
transition: opacity var(--animation2), transform var(--animation2), inset-inline-end var(--animation2);
}
&:hover,
&:focus {
padding: 15px 40px 15px 20px;
&::after {
inset-inline-end: 11px;
opacity: 1;
transform: translate(0, -50%);
}
}
}
/* ─────────────────────────────────────────────────────────────
Outline Purple
───────────────────────────────────────────────────────────── */
a.btn-outline-purple,
span.btn-outline-purple a,
span.btn-outline-purple button:not(.close-btn),
button.btn-outline-purple {
background-color: var(--white);
border: 2px solid var(--purple-outline);
color: var(--purple);
z-index: 1;
&:hover,
&:focus {
background-color: var(--purple);
border-color: var(--purple);
color: var(--white);
}
}
/* ─────────────────────────────────────────────────────────────
Solid Purple
───────────────────────────────────────────────────────────── */
a.btn-solid-purple,
span.btn-solid-purple a,
span.btn-solid-purple button:not(.close-btn),
button.btn-solid-purple {
background-color: var(--purple);
border: 2px solid var(--purple);
color: var(--light-gray);
&:hover,
&:focus {
background-color: var(--purple);
border-color: var(--purple);
color: var(--light-gray);
}
}
/* ─────────────────────────────────────────────────────────────
Solid Orange
───────────────────────────────────────────────────────────── */
a.btn-solid-orange,
span.btn-solid-orange a,
span.btn-solid-orange button:not(.close-btn),
button.btn-solid-orange {
background-color: var(--orange-3);
border: 2px solid var(--orange-3);
color: var(--white);
&:hover,
&:focus {
background-color: var(--orange-2);
border-color: var(--orange-2);
color: var(--white);
}
}
/* ─────────────────────────────────────────────────────────────
Inline Black
───────────────────────────────────────────────────────────── */
a.btn-inline-black,
span.btn-inline-black a,
span.btn-inline-black button:not(.close-btn),
button.btn-inline-black {
display: inline-flex;
align-items: center;
font-family: var(--font1);
font-size: 16px;
font-weight: 600;
line-height: 1.2;
letter-spacing: .25px;
color: var(--black);
background-color: transparent;
border: none;
padding: 0;
margin: 0;
text-decoration: none;
cursor: pointer;
transition: color var(--animation2);
&::after {
content: '';
display: inline-block;
width: 16px;
height: 16px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M5.33717 14.2053L4.62817 13.4963L10.1243 8.00009L4.62817 2.50392L5.33717 1.79492L11.5423 8.00009L5.33717 14.2053Z' fill='%23C4530E'/%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
margin-left: 6px;
flex-shrink: 0;
transition: transform var(--animation2);
}
&:hover,
&:focus {
color: var(--orange-3);
&::after {
transform: translateX(3px);
}
}
}
/* ─────────────────────────────────────────────────────────────
Inline Black — dark mode override
───────────────────────────────────────────────────────────── */
section.dark-mode {
a.btn-inline-black,
span.btn-inline-black a,
span.btn-inline-black button:not(.close-btn),
button.btn-inline-black {
color: var(--white);
&:hover,
&:focus {
color: var(--white-80);
}
}
}
/* ─────────────────────────────────────────────────────────────
Small modifier — works with any button type
───────────────────────────────────────────────────────────── */
a.btn-outline-purple.btn-sm,
span.btn-outline-purple.btn-sm a,
a.btn-solid-purple.btn-sm,
span.btn-solid-purple.btn-sm a,
a.btn-solid-orange.btn-sm,
span.btn-solid-orange.btn-sm a {
font-size: 13px;
padding: 9px 20px;
&:hover,
&:focus {
padding: 9px 20px;
}
&::after {
inset-inline-end: 2px;
}
}
a.btn-inline-black.btn-sm,
span.btn-inline-black.btn-sm a {
font-size: 13px;
padding: 9px 20px;
}
/***************************************/
.card {
border-radius: var(--border3);
position: relative;
display: flex;
flex-direction: column;
flex-basis: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
border: 1px solid transparent;
background-color: var(--white);
transition: all var(--animation2);
&.filled {
background: var(--light-gray);
border: 1px solid var(--gray4);
box-shadow: var(--shadow-card);
padding: 59px 41px;
overflow: visible;
&:has(.icon-gradient) {
.media.icon-gradient {
position: absolute;
top: -20px;
left: 41px;
}
}
}
&.full-click {
.button-group a, .button-group button {
&:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
}
&:has(.media.icon) {
.content {
padding-top: 20px;
}
}
&:has(.media.image) {
padding: 0;
overflow: hidden;
.content {
padding: 0;
.content-upper {
padding: 20px 20px 20px;
}
.button-group {
padding: 0 20px 20px;
margin-top: 0;
}
}
}
.media {
&.image {
position: relative;
aspect-ratio: 16/9;
border-radius: inherit;
overflow: hidden;
/* min-height: 200px; */
img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
}
&.icon {
padding: 30px 0 0 0;
&>span {
display: flex;
}
svg {
height: 36px;
path {
fill: var(--purple);
}
}
&.icon-gradient {
padding: 24px 12px;
background: var(--purple-gradient);
border-radius: var(--border1);
width: fit-content;
svg {
height: 32px;
width: 32px;
path {
fill: var(--white);
}
}
}
}
}
.content {
padding: 10px 0;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: space-between;
flex-grow: 1;
.eyebrow {
margin-bottom: 0;
}
.content-upper {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
flex-grow: 1;
gap: 5px;
.topics {
.eyebrow-lowercase {
display: flex;
align-items: center;
gap: 5px;
.topic-icon {
img {
vertical-align: middle;
}
}
}
}
span.title {
display: block;
margin: 0;
line-height: 30px;
}
span.description {
display: block;
margin: 0;
p:last-of-type {
margin-bottom: 0;
}
}
}
.button-group {
margin-top: 20px;
}
}
}
/***************************************/
.featured-card {
/* featured cards use .card class */
@media(min-width: 768px) {
flex-direction:row;
align-items: center;
justify-content: space-between;
padding: 30px;
gap: 30px;
.media {
width: 40%;
border-radius: var(--border3);
}
.content {
width: 60%;
padding:0;
.content-upper {
.topics {
.eyebrow-lowercase {
display: flex;
align-items: center;
gap: 5px;
}
}
.title {
font-size: 28px;
}
}
}
}
}
/*****Resource Card**********************************/
.resource-card {
.content-upper {
span.title {
font-family: var(--font1);
font-size: 22px;
font-weight: 700;
color: var(--black);
line-height: 1.3;
margin: 0;
}
span.description {
color: var(--dark-gray);
}
}
}
/***************************************/
.blog-card {
border-radius: 20px;
.media.image {
border-radius: 20px;
}
.content-upper {
span.title {
font-family: var(--font1);
font-size: 22px;
font-weight: 700;
color: var(--black);
line-height: 1.3;
padding-left: 0;
padding-right: 0;
}
.excerpt {
margin: 0;
font-size: 15px;
line-height: 1.6;
color: var(--dark-gray);
}
}
.button-group {
padding-left: 0;
}
.read-time {
margin: 0;
}
}
.form,.popover-content-container:has(form) {
background-color: var(--light-gray);
padding: 30px;
max-width: 765px;
margin: 0 auto;
float: none;
overflow: auto;
border-radius: var(--border3);
border: 1px solid var(--gray1);
.submitted-message {
text-align: center;
}
.form-title:empty {
display: none;
}
form {
margin-bottom: 0;
.hs-form-field {
>label {
font-size: 12px;
font-weight: bold;
line-height: 1.2;
letter-spacing: 1px;
pointer-events: auto;
}
}
/* error messages */
.hs_error_rollup {
margin-top: 20px;
.hs-error-msgs {
margin-top: 0;
}
}
ul.hs-error-msgs {
margin: -10px 0 20px 0;
padding: 0;
list-style: none;
li {
display: block;
text-align: center;
margin: 0;
width: 100%;
font-size: 14px;
line-height: 1.2;
font-weight: bold;
padding: 10px;
border-radius: var(--border1);
color: var(--white);
background-color: red;
}
}
/****** FORM INPUTS ******/
.form-columns-1,
.form-columns-2 {
.input {
margin-right: 0 !important;
}
}
.form-columns-2 {
display: flex;
gap: 20px;
}
fieldset {
max-width: unset;
}
input,
select,
textarea {
&.error,
&.invalid {
border: 1px solid red;
}
}
/* Text Based Inputs */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"] {
border-radius: var(--border1);
margin-top: 2px;
margin-bottom: 20px;
font-size: 16px;
background-color: var(--white);
padding: 16px;
width: 100% !important;
appearance: none;
&:not(.error):not(.invalid) {
border: 1px solid transparent;
}
}
/* Select Inputs */
select {
position: relative;
border: 0;
border-radius: var(--border1);
margin-top: 2px;
margin-bottom: 20px;
font-size: 16px;
background-color: var(--white);
padding: 16px;
cursor: pointer;
width: 100% !important;
appearance: none;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-position: right 16px center;
background-size: 24px;
color: var(--black);
&::placeholder {
color: var(--gray2);
}
}
/* Radios and Checkboxes */
ul.inputs-list {
&.multi-container {
list-style: none;
padding: 0;
margin-top: 8px;
margin-bottom: 20px;
label {
>span {
font-size: 14px;
font-weight: normal;
line-height: 1.2;
pointer-events: auto;
}
}
/* Shared Input Styles */
input {
margin-right: 5px;
cursor: pointer;
}
/* Radio Input */
input[type="radio"] {}
/* Checkbox Input */
input[type="checkbox"] {}
}
}
/* Textarea Input */
textarea {
border: 1px solid transparent;
border-radius: var(--border1);
margin-top: 2px;
margin-bottom: 20px;
font-size: 16px;
background-color: var(--white);
padding: 16px;
width: 100% !important;
min-height: 150px;
resize: vertical;
}
.legal-consent-container {
font-size: 13px;
font-weight: normal;
line-height: 1.6;
pointer-events: auto;
display: flex;
flex-direction: column;
gap: 10px;
* {
margin: 0 !important;
}
ul {
list-style: none;
padding: 0;
margin: 0;
li {
label {
display: flex;
gap: 5px;
cursor: pointer;
span {
margin: 0;
}
}
}
}
}
/* Button */
.hs-button {
margin-top: 30px;
margin-bottom: 0;
display: block;
width: 100%;
font-size: 18px;
}
}
.dark-mode & {
background-color: rgba(255, 255, 255, .75);
}
}
/* for the "new" hubspot form tool */
.form,.popover-content-container:has(form) {
.hsfc-Renderer {
p {
font-family: var(--font1)!important;
color: var(--black)!important;
margin: 0 0 10px 0;
}
.hsfc-FormWrapper {
form {
.hsfc-Step {
.hsfc-Step__Content {
padding:0!important;
/*---- FORM ROWS ----*/
.hsfc-Row {
margin-bottom:20px;
label {
font-size: 12px;
font-weight: bold;
line-height: 1.2;
letter-spacing: 1px;
pointer-events: auto;
}
input {
margin-bottom:0;
}
/* FIELD TYPE SPECIFIC STYLES */
/* rich text */
.hsfc-RichText {
margin-bottom: 30px;
p:last-of-type {
margin-bottom:0;
}
}
/* text input */
.hsfc-TextField {}
/* phone input */
.hsfc-PhoneField {
.hsfc-PhoneInput {
margin-bottom: 20px;
.hsfc-PhoneInput__FlagAndCaret {
border-color: transparent!important;
}
input.hsfc-TextInput {
margin-bottom:0;
margin-top:0;
}
}
}
/* textarea field */
.hsfc-TextareaField {
textarea {
background-color: var(--white);
border:none;
}
}
/* single checkbox field */
.hsfc-CheckboxField {
margin-bottom: 10px;
}
/* multiple checkbox field */
.hsfc-CheckboxFieldGroup {
margin-bottom:10px;
}
/* radio button field */
.hsfc-RadioFieldGroup {
margin-bottom: 10px;
}
/* file upload field */
/* select/dropdown field */
}
/*---- SUBMIT BUTTON(S) ----*/
.hsfc-NavigationRow {
/*button style from buttons.css*/
button[type="submit"] {
display: block;
width:100%;
display: inline-block;
font-family: var(--font1);
color: var(--white);
background-color: var(--action1);
border: 2px solid var(--action1);
border-radius: var(--border1);
padding: 15px 40px 15px 40px;
/* margin: 20px 0; */
margin:0;
transition: var(--animation1);
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
font-size: 14px;
line-height: 1.2;
letter-spacing: .25px;
text-decoration: none;
cursor: pointer;
text-align: center;
&:hover,&:focus {
transform: none;
background-color: var(--black);
color: var(--white);
border-color: var(--black);
}
}
}
}
}
}
}
}
}
.hs-search-field {
--search-button-bg: var(--action1);
--search-button-color: var(--white);
--search-border: var(--action1);
--search-height: 48px;
--search-radius: 6px;
.hs-search-field__bar {
form {
display: flex;
align-items: stretch;
gap: 0;
flex-wrap: nowrap;
margin-bottom: 0;
}
.hs-search-field__input {
height: var(--search-height);
min-height: var(--search-height);
padding: 0 1rem;
border: 1px solid var(--search-border);
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-top-left-radius: var(--search-radius);
border-bottom-left-radius: var(--search-radius);
font-size: 16px;
line-height: 1;
box-sizing: border-box;
flex: 0 0 180px;
appearance: none;
&:focus {
outline: none;
border-color: var(--search-button-bg);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--search-button-bg) 20%, transparent);
}
}
.search-button {
height: var(--search-height);
min-height: var(--search-height);
padding: 0 1rem;
border: none;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-top-right-radius: var(--search-radius);
border-bottom-right-radius: var(--search-radius);
background: var(--search-button-bg);
color: var(--search-button-color);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-sizing: border-box;
transition: background 0.2s ease, transform 0.2s ease;
&:hover {
filter: brightness(0.95);
}
&:focus {
outline: none;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--search-button-bg) 20%, transparent);
}
svg {
width: 20px;
height: 20px;
fill: currentColor;
}
}
}
ul.hs-search-field__suggestions {
margin-top: 0;
margin-bottom: 0;
}
}
form {
.hs-form__virality-link {
display: none!important;
}
}
/* Keep background from scrolling when menu is open */
html.menu-open {
overflow-y: hidden;
}
/* Header is fixed and overlays the page; heroes add top padding via --u5-header-height (main.js) + fallbacks. */
/* HubSpot Cookie Notification */
div#hs-eu-cookie-confirmation.hs-cookie-notification-position-bottom.can-use-gradients {
box-shadow: 2px -1px 5px 0px rgba(0, 0, 0, 0.05);
border: 0;
background-color: rgba(var(--white), .9);
div#hs-eu-cookie-confirmation-inner {
background-color: rgba(var(--white), 0);
padding: 15px 20px 10px 20px;
max-width: 1240px;
p {
margin-bottom: 0;
}
div#hs-en-cookie-confirmation-buttons-area {
text-align: left;
margin: 0;
a#hs-eu-confirmation-button {
font-weight: bold;
margin: 10px 0;
&:hover {
background-color: var(--black);
}
}
}
}
}
/* default p size */
p {
line-height: 1.5;
}
a {
color: var(--action1);
}
blockquote,
blockquote p {}
em {
font-style: italic;
}
strong {
font-weight: bold;
}
ul {
list-style: disc;
padding-left: 40px;
margin-top: 0;
margin-bottom: 30px;
}
ol {
list-style: decimal;
padding-left: 40px;
margin-top: 0;
margin-bottom: 30px;
}
li {
margin-bottom: 5px;
letter-spacing: .5px;
}
ul ul,
ul ol,
ol ol,
ol ul {
margin: 20px 0 20px 20px;
}
input {
font-family: var(--font1);
}
button {
font-family: var(--font1);
cursor: pointer;
}
/* Forms */
form {
margin-bottom: 30px
}
::-webkit-input-placeholder {
color: var(--gray3);
opacity: 1;
font-weight: normal;
}
/* Webkit input placeholders */
::-moz-placeholder {
color: var(--gray3);
opacity: 1;
font-weight: normal;
}
/* Firefox input placeholders */
:-ms-input-placeholder {
color: var(--gray3);
opacity: 1;
font-weight: normal;
}
/* IE input placeholders */
/* Images */
img {
max-width: 100%;
height: auto;
border: 0;
-ms-interpolation-mode: bicubic;
vertical-align: bottom;
}
/* Make responsive, clear border, fix IE scaling, suppress the space beneath the baseline, fix Webkit blurring on scaled down files */
svg {
max-width: 100%;
width: auto;
height: auto;
}
/* Horizontal Rule */
hr {
margin-top: 30px;
margin-bottom: 35px;
border-width: 0;
border-top: 1px solid var(--gray1);
}
/* Abbreviations */
abbr[title] {
border: 0;
}
/* Code */
code {
padding: 1px;
margin: 0 10px;
white-space: nowrap;
background: var(--gray1);
border: 1px solid var(--gray1);
border-radius: 0;
}
pre>code {
display: block;
padding: 1px 15px;
white-space: pre;
margin-bottom: 30px
}
pre {
overflow-x: auto;
}
/* responsive pre elements */
table pre {
white-space: pre-wrap;
}
/* responsive pre tables */
/* Tables */
th,
td {
padding: 10px 20px;
text-align: left;
border-bottom: 1px solid var(--gray1);
}
th:first-child,
td:first-child {
padding-left: 0;
}
th:last-child,
td:last-child {
padding-right: 0;
}
table {
margin-bottom: 30px
}
table th {
text-transform: uppercase;
}
table td {
border-bottom: 1px solid var(--gray2);
font-size: 14px;
}
a[href='javascript:;'] {
cursor: default;
}
.u5-site-footer {
padding-block-start: 65px;
background: var(--orange-2);
padding-block-end: 50px;
}
body.hs-landing-page .u5-site-footer,
body.lp-sign-up .u5-site-footer {
background: var(--footer-landing-bg);
padding-block-end: 0;
padding-block-start: 0;
}
section[class*='u5m-'] {
scroll-margin-top: 145px;
}
.hs_cos_wrapper_type_form {
h3 {
text-align: center;
}
form {}
}
section.u5m-404-error,
section.u5m-500-error,section.u5m-backup-unsubscribe {
margin: 0 auto;
text-align: center;
min-height: 60vh;
display:flex;
align-items: center;
justify-content: center;
flex-direction: column;
@media (max-width: 768px) {
min-height: 35vh;
}
}
section.u5m-backup-unsubscribe {
text-align: center;
#hs_cos_wrapper_backup_unsubscribe_email_simple_subscription {
h3 {
max-width: 900px;
margin-left: auto;
margin-right: auto;
font-size: 20px;
line-height: 1.4;
}
}
form {
h3 {
font-size: 12px;
font-weight: bold;
text-align: left;
margin-bottom: 4px;
}
input {
border: 1px solid transparent;
border-radius: 4px;
margin-top: 2px;
margin-bottom: 0;
font-size: 16px;
padding: 16px;
width: 100%;
}
padding-bottom: 50px;
}
}
section.u5m-membership-login,
section.u5m-membership-register,
section.u5m-membership-reset-password-request,
section.u5m-membership-reset-password,
section.u5m-password-prompt {
span.form-separator {
display:block;
margin-top: 20px;
}
margin: 180px auto 80px;
text-align: center;
ul.hs-error-msgs {
margin: 10px 0 20px 0;
}
.form {
&.membership-reset-password-request {
div.hs-form-field:has(ul.no-list) {
display:none;
}
div.hs-form-field {
input.hs-input {
margin-bottom: 0;
}
}
}
&.membership-login, &.membership-register {
div.hs-form-field:has(ul.no-list) {
display:none;
}
}
h1 {
font-size: 40px;
margin-bottom: 10px;
}
form {
label:not(.hs-error-msg) {
float:left;
}
.no-list li label, label#hs-register-widget-checkbox-consent {
float:none;
}
label#hs-register-widget-checkbox-consent {
position: relative;
top: -2px;
}
label.hs-login-widget-email-label {
margin-bottom: 10px;
}
a.hs-reset-widget-show-password, a.hs-register-widget-show-password, a.hs-login-widget-show-password {
float:right;
margin-left:10px;
position: relative;
font-size: 14px;
top: -5px;
&:hover,&:focus {
color: var(--black);
}
}
a#hs_login_reset {
margin-top: 20px;
display:block;
&:hover,&:focus {
color: var(--black);
}
}
.hs-form-field:has(#hs-login-widget-remember),.hs-form-field:has(#hs-passwordless-auth-checkbox-consent){
display: flex;
gap: 10px;
margin-top: 30px;
}
input[type="password"] {
height:auto!important;
margin-bottom: 0;
}
}
}
div>p {
margin-top: 20px;
a {
&:hover,&:focus {
color: var(--black);
}
}
}
}
section.u5m-password-prompt {
form {
padding-top: 30px;
}
}
section.u5m-search-results {
margin: 180px auto 100px;
.section-inner.center {
.systems-page {
h1 {}
.filters-wrapper {
margin-bottom: 80px;
@media (max-width: 768px) {
margin-bottom: 50px;
}
select {
position: relative;
border: 1px solid var(--gray1);
border-radius: var(--border1);
transition: border-color var(--animation2);
margin-top: 0px;
margin-bottom: 0px;
font-size: 16px;
background-color: var(--white);
padding: 16px;
cursor: pointer;
width: 100% !important;
appearance: none;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-position: right 16px center;
background-size: 24px;
color: var(--black);
&::placeholder {
color: var(--gray2);
}
&:hover,&:focus {
border-color: var(--action1);
}
}
}
.hs-search-results {
p.hs-search-results__message {}
}
}
}
/* search results 'card' style found in u5m-search-results.module.css */
ul.hs-search-results__listing {
}
.hs-search__no-results {
p {
font-size: 18px;
}
}
}
section.u5m-subscription-preferences {
margin: 180px auto 80px;
.page-header br {
display: none;
}
.systems-page {
.form-group {
.form {
max-width: 1000px;
form {
h1 {
font-size: 40px;
}
h2 {
font-size: 24px;
}
.email-prefs {
margin-top: 30px;
div.item {
border-bottom: 1px solid var(--gray1);
margin-bottom: 25px;
.item-inner {
padding-bottom: 25px;
div.checkbox-row span span {
font-weight: bold;
padding-left: 5px;
}
p {
margin:0;
padding-left: 22px;
}
}
}
}
div.subscribe-options p span {
font-weight: bold;
padding-left: 5px;
}
}
}
}
}
}
section.u5m-subscriptions-confirmation {
margin: 180px auto 80px;
form {
margin-top: 20px;
fieldset {
padding:0;
&#hs-subscriptions-unsubscribe-survey-fieldset {
legend {
margin-bottom: 10px;
}
#hs-subscriptions-unsubscribe-survey-options {
div {
margin-bottom: 5px;
label {
input {margin-right: 5px;}
}
}
}
}
textarea {
margin: 20px 0 0 0;
}
}
button {}
}
div.success {
font-weight: bold;
}
}
.visually-hidden,
.sr-only {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.001s;
transition-duration: 0.001s;
animation-iteration-count: 1;
}
}
/* Hidden until focused: translate(-100%) sat in the gap above a fixed header (--header-float-top). */
.skip-to-content-link {
border: 0;
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
width: 1px;
&:focus {
background: var(--action1);
clip: auto;
clip-path: none;
color: var(--white);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font: bold 16px / 1.2 inherit;
height: auto;
left: 50%;
letter-spacing: 0.25px;
margin: 0;
min-height: 40px;
overflow: visible;
padding: 10px;
position: fixed;
text-align: center;
top: max(12px, env(safe-area-inset-top, 0px));
transform: translateX(-50%);
transition: none;
white-space: normal;
width: auto;
z-index: 100000;
}
}
section.u5m-blog-post {
position: relative;
&.has-sidebar {
--content-width: 1240px;
--body-max-width: 800px;
}
&:not(.has-sidebar) {
--content-width:920px;
}
/*****************************************/
/* .hero */
/*****************************************/
.hero {
background-color: var(--orange-1);
margin-bottom:0;
position: relative;
padding: 80px 0px;
padding-top: calc(max(var(--u5-header-height, 0px), var(--header-occupancy)) + 80px);
@media (max-width: 1024px) {
padding-top: calc(max(var(--u5-header-height, 0px), var(--header-occupancy-mobile)) + 80px);
}
@media(max-width: 580px) {
padding: 50px 0px;
padding-top: calc(max(var(--u5-header-height, 0px), var(--header-occupancy-mobile)) + 50px);
}
.section-inner.center {
max-width: var(--content-width);
.content {
padding: 0;
margin: 0 auto;
span.date {
display:block;
margin-bottom: 15px;
font-weight: 500;
font-size: 14px;
}
h1.title {
margin: 0;
color: var(--white);
text-align: center;
span {
color: var(--white);
}
}
.post-data {
display:flex;
align-items: center;
gap: 24px;
justify-content: center;
span.read-time, .date {
margin-top: 20px;
display: flex;
align-items: center;
gap: 5px;
font-size: 24px;
font-weight: 500;
color: var(--white);
margin-bottom: 0;
}
}
.author-wrap {
display: flex;
align-items: center;
margin: 20px auto 0 auto;
justify-content:flex-start;
gap: 10px;
.avatar {
overflow: hidden;
height: 36px;
width: 36px;
border-radius: 50%;
img {
object-fit: cover;
object-position: 50% 50%;
width: 100%;
height: 100%;
}
}
.author-link {
font-size: 14px;
a {
font-weight: 500;
color: var(--black);
transition: var(--animation1);
}
a:hover {
color: var(--action1);
}
}
}
}
}
.featured-image {
display:flex;
justify-content: center;
align-items: center;
position: relative;
bottom: -200px;
margin-top: -155px;
img {
border-radius: 40px;
max-width: 840px;
width: 100%;
height: auto;
}
}
}
/*****************************************/
/* .share */
/*****************************************/
.share {
padding: 8px 0;
position: sticky;
max-width: 55px;
top: 100px;
z-index:2;
.section-inner {
position: relative;
left: -159px;
display:flex;
flex-direction:column;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
@media(max-width: 767px) {
left: 0;
}
span.label {
font-weight: 700;
font-size: 13px;
text-transform: uppercase;
color: var(--purple);
}
.share-links {
display:flex;
flex-direction: column;
gap: 5px;
align-items: center;
a {
display:flex;
svg {
path {
fill: var(--purple);
transition: var(--animation1);
}
}
&:hover,&:focus {
svg {
path {
fill: var(--purple);
}
}
}
}
}
}
}
/*****************************************/
/* .body */
/*****************************************/
.body {
max-width: var(--content-width);
margin: 0 auto;
padding: 0 20px;
.content {
img {
border-radius: var(--border2);
}
p,
ul,
ol {}
h1 {}
h2 {}
h3 {}
h4 {}
h5 {font-size: }
h6 {}
h1,h2,h3,h4,h5,h6 {
margin-top: 30px;
}
blockquote {
p {}
}
a {
font-weight: bold;
color: var(--orange-3);
&:hover {
color: var(--orange-2);
}
}
}
&.has-sidebar {
display: flex;
flex-direction: row;
gap: 80px;
@media(max-width: 991px) {
flex-direction: column;
}
.content {
max-width: var(--body-max-width);
width: 100%;
@media(max-width: 991px) {
order:2;
max-width: 100%;
}
h2 {
scroll-margin-top:160px;
}
}
.blog-sidebar {
max-width: 320px;
width: 100%;
position:relative;
@media(max-width: 991px) {
order:1;
max-width: 100%;
}
.blog-sidebar-inner {
position:sticky;
top: 170px;
padding: 20px;
background-color: var(--white);
border-radius: var(--border2);
border: 1px solid var(--gray1);
.title {
font-weight: 600;
margin-bottom:12px;
}
.toc-list {
padding-left:20px;
margin:0;
li.toc-item {
margin-bottom:12px;
line-height:1.4;
&::marker {
color: var(--action1);
font-weight: 600;
}
&:last-of-type {
margin-bottom:0;
}
a.toc-link {
color: var(--black);
transition: var(--animation1);
text-decoration: none;
&.active {
color: var(--action1);
}
&:hover,&:focus {
color: var(--action1);
text-decoration:underline;
}
}
}
}
}
}
}
}
/*****************************************/
/* .topics */
/*****************************************/
.topics {
max-width: var(--content-width);
margin: 0 auto;
padding: 0 20px;
margin-top: 50px;
padding-top: 50px;
border-top: 1px solid var(--gray1);
display:flex;
flex-direction:row;
align-items: center;
gap: 12px;
.label {
font-size: 13px;
font-weight: 500;
display:inline-block;
}
.topics-list {
display:flex;
flex-direction:row;
column-gap: 8px;
row-gap: 10px;
.link {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
white-space: nowrap;
font-size: 15px;
font-weight: 600;
text-decoration: none;
color: var(--purple);
padding: 5px 8px;
transition: var(--animation1);
&:hover {
color: var(--black);
}
}
}
}
/*****************************************/
/* .author -- removed */
/*****************************************/
.author {
display:none;
max-width: var(--content-width);
display: flex;
align-items: center;
margin: 50px auto;
padding: 0 20px;
.meta {
flex: 0 0 170px;
text-align: center;
.avatar {
width: 100px;
height: 100px;
background-image: url('https://302335.fs1.hubspotusercontent-na1.net/hubfs/302335/default-avatar.png');
background-size: cover;
background-position: 50%;
border-radius: 50%;
margin: 0 auto;
@media (max-width: 575.98px) {
margin-bottom: 30px;
}
}
}
.bio {
.name {
margin: 0;
}
p {
margin-top: 20px;
}
.social {
.label {
@media (max-width: 575.98px) {}
}
a {
font-size: 20px;
margin-left: 10px;
@media (max-width: 575.98px) {
font-size: 18px;
margin-left: 8px;
}
}
}
}
}
/*****************************************/
/* .comments -- removed */
/*****************************************/
.comments {
display:none;
margin-bottom: 100px;
h2.heading {
text-align: center;
margin: 100px auto 0 auto;
}
.content {
max-width: 1000px;
margin-top: 50px;
form {
.hs-button {}
}
}
}
}
/* CSS Keyframes */
@keyframes fadeIn1 {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0px);
}
}
@keyframes fadeIn2 {
0% {
opacity: 0;
transform: translateY(20px);
}
50% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0px);
}
}
/* Header first paint — used by u5m-mega-menu (header.site-header) */
@keyframes hdr-nav-shell-in {
0% {
opacity: 0;
clip-path: inset(10% 38% 10% 38%);
transform: translateY(16px) scale(0.98);
filter: blur(6px);
}
55% {
opacity: 1;
filter: blur(0);
}
100% {
opacity: 1;
clip-path: none;
transform: translateY(0) scale(1);
filter: blur(0);
}
}
@keyframes hdr-nav-util-in {
0% {
opacity: 0;
transform: translate(14px, -10px) rotate(-12deg) scale(0.82);
}
100% {
opacity: 1;
transform: translate(0, 0) rotate(0deg) scale(1);
}
}
@keyframes hdr-nav-logo-in {
0% {
opacity: 0;
transform: translateX(-18px) scale(0.92);
filter: blur(5px);
}
100% {
opacity: 1;
transform: translateX(0) scale(1);
filter: blur(0);
}
}
@keyframes hdr-nav-link-in {
0% {
opacity: 0;
transform: translateY(16px);
}
76% {
opacity: 1;
transform: translateY(-3px);
}
100% {
opacity: 1;
transform: none;
}
}
@keyframes hdr-nav-cta-in {
0% {
opacity: 0;
transform: scale(0.86) translateY(14px);
}
74% {
opacity: 1;
transform: scale(1.05) translateY(-2px);
}
100% {
opacity: 1;
transform: scale(1) translateY(0);
}
}
/* Hero first paint — u5m-hero (skipped when .inner has data-sal) */
@keyframes hdr-hero-eyebrow-in {
0% {
opacity: 0;
transform: translateX(-36px) skewX(-10deg) scale(0.94);
}
100% {
opacity: 1;
transform: translateX(0) skewX(0deg) scale(1);
}
}
@keyframes hdr-hero-heading-in {
0% {
opacity: 0;
clip-path: inset(0 100% 0 0);
transform: translateY(10px) rotate(-0.75deg);
}
18% {
opacity: 1;
}
100% {
opacity: 1;
clip-path: inset(0 0% 0 0);
transform: translateY(0) rotate(0deg);
}
}
@keyframes hdr-hero-description-in {
0% {
opacity: 0;
clip-path: inset(100% 0 0 0);
transform: translateY(-8px);
}
22% {
opacity: 1;
}
100% {
opacity: 1;
clip-path: inset(0 0 0 0);
transform: translateY(0);
}
}
@keyframes hdr-hero-media-in {
0% {
opacity: 0;
clip-path: circle(0% at 58% 48%);
transform: scale(1.06) rotate(-1.25deg);
}
45% {
opacity: 1;
}
100% {
opacity: 1;
clip-path: circle(150% at 58% 48%);
transform: scale(1) rotate(0deg);
}
}
@keyframes hdr-hero-btn-in {
0% {
opacity: 0;
transform: perspective(680px) rotateX(22deg) translateY(28px);
}
72% {
opacity: 1;
transform: perspective(680px) rotateX(-5deg) translateY(-3px);
}
100% {
opacity: 1;
transform: perspective(680px) rotateX(0deg) translateY(0);
}
}
@keyframes hdr-hero-curve-in {
0% {
opacity: 0;
transform: translateY(16px) scaleX(0.88);
}
100% {
opacity: 1;
transform: translateY(0) scaleX(1);
}
}
/*
Module intro recipes (viewport + u5-in-view). Per-module mapping in _13-intro-content.
Hero unchanged. Shared easing feel; distinct motion per recipe.
*/
@keyframes mod-bloom-eyebrow-in {
0% {
opacity: 0;
transform: translateY(14px) scale(0.93);
filter: blur(3px);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
filter: blur(0);
}
}
@keyframes mod-bloom-heading-in {
0% {
opacity: 0;
transform: scale(0.91);
filter: blur(6px);
}
40% {
opacity: 1;
}
100% {
opacity: 1;
transform: scale(1);
filter: blur(0);
}
}
@keyframes mod-bloom-desc-in {
0% {
opacity: 0;
transform: translateY(18px);
filter: blur(4px);
}
100% {
opacity: 1;
transform: translateY(0);
filter: blur(0);
}
}
@keyframes mod-bloom-btn-in {
0% {
opacity: 0;
transform: translateY(12px) scale(0.88);
}
65% {
opacity: 1;
transform: translateY(-2px) scale(1.04);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes mod-drift-eyebrow-in {
0% {
opacity: 0;
transform: translateX(24px);
filter: blur(3px);
}
100% {
opacity: 1;
transform: translateX(0);
filter: blur(0);
}
}
@keyframes mod-drift-heading-in {
0% {
opacity: 0;
clip-path: inset(0 38% 0 38%);
transform: scale(0.95);
filter: blur(5px);
}
30% {
opacity: 1;
}
100% {
opacity: 1;
clip-path: inset(0 0% 0 0%);
transform: scale(1);
filter: blur(0);
}
}
@keyframes mod-drift-desc-in {
0% {
opacity: 0;
transform: translateX(-20px);
filter: blur(4px);
}
100% {
opacity: 1;
transform: translateX(0);
filter: blur(0);
}
}
@keyframes mod-drift-btn-in {
0% {
opacity: 0;
transform: translateX(18px) scale(0.94);
}
70% {
opacity: 1;
transform: translateX(-3px) scale(1.02);
}
100% {
opacity: 1;
transform: translateX(0) scale(1);
}
}
@keyframes mod-snap-eyebrow-in {
0% {
opacity: 0;
transform: translateY(8px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes mod-snap-heading-in {
0% {
opacity: 0;
transform: translateY(10px) scale(0.98);
filter: blur(2px);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
filter: blur(0);
}
}
@keyframes mod-snap-desc-in {
0% {
opacity: 0;
transform: translateY(12px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes mod-snap-btn-in {
0% {
opacity: 0;
transform: translateY(10px) scale(0.95);
}
72% {
opacity: 1;
transform: translateY(-2px) scale(1.02);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes mod-float-eyebrow-in {
0% {
opacity: 0;
transform: translateY(-14px);
filter: blur(3px);
}
100% {
opacity: 1;
transform: translateY(0);
filter: blur(0);
}
}
@keyframes mod-float-heading-in {
0% {
opacity: 0;
transform: translateY(22px) rotate(0.9deg);
filter: blur(6px);
}
35% {
opacity: 1;
}
100% {
opacity: 1;
transform: translateY(0) rotate(0deg);
filter: blur(0);
}
}
@keyframes mod-float-desc-in {
0% {
opacity: 0;
transform: translateY(20px) scale(0.97);
filter: blur(3px);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
filter: blur(0);
}
}
@keyframes mod-float-btn-in {
0% {
opacity: 0;
transform: translateY(16px);
filter: blur(2px);
}
100% {
opacity: 1;
transform: translateY(0);
filter: blur(0);
}
}
@keyframes mod-slice-eyebrow-in {
0% {
opacity: 0;
letter-spacing: 0.12em;
transform: translateY(6px);
}
100% {
opacity: 1;
letter-spacing: 0.02em;
transform: translateY(0);
}
}
@keyframes mod-slice-heading-in {
0% {
opacity: 0;
clip-path: inset(46% 0 46% 0);
transform: translateY(6px);
filter: blur(4px);
}
100% {
opacity: 1;
clip-path: inset(0 0 0 0);
transform: translateY(0);
filter: blur(0);
}
}
@keyframes mod-slice-desc-in {
0% {
opacity: 0;
transform: translateY(16px);
clip-path: inset(0 18% 0 18%);
filter: blur(3px);
}
100% {
opacity: 1;
transform: translateY(0);
clip-path: inset(0 0 0 0);
filter: blur(0);
}
}
@keyframes mod-slice-btn-in {
0% {
opacity: 0;
transform: translateX(-18px) scale(0.94);
}
68% {
opacity: 1;
transform: translateX(4px) scale(1.02);
}
100% {
opacity: 1;
transform: translateX(0) scale(1);
}
}
@keyframes mod-resource-eyebrow-in {
0% {
opacity: 0;
transform: translateY(10px);
letter-spacing: 0.14em;
}
100% {
opacity: 1;
transform: translateY(0);
letter-spacing: 0.02em;
}
}
@keyframes mod-resource-title-in {
0% {
opacity: 0;
clip-path: inset(40% 0 40% 0);
transform: translateY(8px);
filter: blur(4px);
}
100% {
opacity: 1;
clip-path: inset(0 0 0 0);
transform: translateY(0);
filter: blur(0);
}
}
@keyframes mod-resource-desc-in {
0% {
opacity: 0;
transform: translateY(26px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes mod-acc-row-l-in {
0% {
opacity: 0;
transform: translateX(-26px) skewY(-1deg);
filter: blur(4px);
}
100% {
opacity: 1;
transform: translateX(0) skewY(0);
filter: blur(0);
}
}
@keyframes mod-acc-row-r-in {
0% {
opacity: 0;
transform: translateX(26px) skewY(1deg);
filter: blur(4px);
}
100% {
opacity: 1;
transform: translateX(0) skewY(0);
filter: blur(0);
}
}
@keyframes mod-card-deck-in {
0% {
opacity: 0;
transform: perspective(920px) rotateY(12deg) translateZ(-22px) translateY(10px);
filter: blur(5px);
}
52% {
opacity: 1;
filter: blur(0);
}
100% {
opacity: 1;
transform: perspective(920px) rotateY(0deg) translateZ(0) translateY(0);
filter: blur(0);
}
}
@keyframes mod-trust-chip-in {
0% {
opacity: 0;
transform: scale(0.72);
}
70% {
opacity: 1;
transform: scale(1.08);
}
100% {
opacity: 1;
transform: scale(1);
}
}
@keyframes mod-pillar-shelf-in {
0% {
opacity: 0;
transform: translateY(32px) scaleX(0.93);
filter: blur(6px);
}
38% {
opacity: 1;
}
100% {
opacity: 1;
transform: translateY(0) scaleX(1);
filter: blur(0);
}
}
@keyframes mod-landing-visor-in {
0% {
opacity: 0;
clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
transform: skewX(-4deg);
filter: blur(8px);
}
48% {
opacity: 1;
}
100% {
opacity: 1;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
transform: skewX(0deg);
filter: blur(0);
}
}
@keyframes mod-landing-eyebrow-in {
0% {
opacity: 0;
transform: translateY(-16px);
filter: blur(3px);
}
100% {
opacity: 1;
transform: translateY(0);
filter: blur(0);
}
}
@keyframes mod-landing-heading-in {
0% {
opacity: 0;
transform: scale(0.9);
filter: blur(7px);
}
36% {
opacity: 1;
}
100% {
opacity: 1;
transform: scale(1);
filter: blur(0);
}
}
@keyframes mod-landing-desc-in {
0% {
opacity: 0;
transform: translateX(-22px);
filter: blur(4px);
}
100% {
opacity: 1;
transform: translateX(0);
filter: blur(0);
}
}
@keyframes mod-landing-btn-in {
0% {
opacity: 0;
transform: translateY(14px) scale(0.93);
}
62% {
opacity: 1;
transform: translateY(-4px) scale(1.04);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes mod-landing-logo-in {
0% {
opacity: 0;
transform: rotate(-8deg) scale(0.84);
}
100% {
opacity: 1;
transform: rotate(0deg) scale(1);
}
}
/* default anchor link offset */
div.hs_cos_wrapper_widget section.top-margin-none {
margin-top: 0;
}
/* module overrides */
div.hs_cos_wrapper_widget section.top-margin-small {
margin-top: 50px;
@media (max-width: 767px) {
margin-top: 35px;
}
@media (max-width: 575.98px) {
margin-top: 25px;
}
}
div.hs_cos_wrapper_widget section.top-margin-medium {
margin-top: 100px;
@media (max-width: 767px) {
margin-top: 75px;
}
@media (max-width: 575.98px) {
margin-top: 50px;
}
}
div.hs_cos_wrapper_widget section.top-margin-large {
margin-top: 150px;
@media (max-width: 767px) {
margin-top: 115px;
}
@media (max-width: 575.98px) {
margin-top: 75px;
}
}
div.hs_cos_wrapper_widget section.bottom-margin-none {
margin-bottom: 0;
}
div.hs_cos_wrapper_widget section.bottom-margin-small {
margin-bottom: 50px;
@media (max-width: 767px) {
margin-bottom: 35px;
}
@media (max-width: 575.98px) {
margin-bottom: 25px;
}
}
div.hs_cos_wrapper_widget section.bottom-margin-medium {
margin-bottom: 100px;
@media (max-width: 767px) {
margin-bottom: 75px
}
@media (max-width: 575.98px) {
margin-bottom: 50px
}
}
div.hs_cos_wrapper_widget section.bottom-margin-large {
margin-bottom: 150px;
@media (max-width: 767px) {
margin-bottom: 115px;
}
@media (max-width: 575.98px) {
margin-bottom: 75px;
}
}
div.hs_cos_wrapper_widget section.top-padding-none {
padding-top: 0;
}
div.hs_cos_wrapper_widget section.top-padding-small {
padding-top: 50px;
@media (max-width: 767px) {
padding-top: 35px;
}
@media (max-width: 575.98px) {
padding-top: 25px;
}
}
div.hs_cos_wrapper_widget section.top-padding-medium {
padding-top: 100px;
@media (max-width: 767px) {
padding-top: 75px;
}
@media (max-width: 575.98px) {
padding-top: 50px;
}
}
div.hs_cos_wrapper_widget section.top-padding-large {
padding-top: 150px;
@media (max-width: 767px) {
padding-top: 115px;
}
@media (max-width: 575.98px) {
padding-top: 75px;
}
}
div.hs_cos_wrapper_widget section.bottom-padding-none {
padding-bottom: 0;
}
div.hs_cos_wrapper_widget section.bottom-padding-small {
padding-bottom: 50px;
@media (max-width: 767px) {
padding-bottom: 35px;
}
@media (max-width: 575.98px) {
padding-bottom: 25px;
}
}
div.hs_cos_wrapper_widget section.bottom-padding-medium {
padding-bottom: 100px;
@media (max-width: 767px) {
padding-bottom: 75px;
}
@media (max-width: 575.98px) {
padding-bottom: 50px;
}
}
div.hs_cos_wrapper_widget section.bottom-padding-large {
padding-bottom: 150px;
@media (max-width: 767px) {
padding-bottom: 115px;
}
@media (max-width: 575.98px) {
padding-bottom: 75px;
}
}
.intro-content {
display: flex;
flex-direction: column;
&.left-aligned {
flex-direction: row;
align-items: flex-end;
justify-content: space-between;
gap: 40px;
text-align: left;
.intro-content-upper {
flex: 1;
}
.heading,
.description {
margin-left: 0;
margin-right: auto;
}
.button-group {
justify-content: flex-start;
flex-shrink: 0;
margin-top: 0;
}
@media (max-width: 767px) {
flex-direction: column;
align-items: flex-start;
.button-group {
margin-top: 30px;
}
}
}
&.center-aligned {
align-items: center;
justify-content: center;
text-align: center;
margin-left: auto;
margin-right: auto;
.heading,
.description {
margin-left: auto;
margin-right: auto;
}
.button-group {
justify-content: center;
}
}
.eyebrow {}
.heading {
max-width: 900px;
margin-top: 0;
}
span.description {
margin-bottom: 0;
max-width: 750px;
display: block;
* {
font-size: inherit;
}
*:last-child {
margin-bottom: 0;
}
a {
text-decoration: underline;
&:hover,
&:focus {
color: var(--black);
}
}
}
.button-group {
display: flex;
gap: 20px;
align-items: center;
flex-wrap: wrap;
margin-top: 30px;
span.button-span {
@media (max-width: 767px) {
width: auto;
}
a {
margin: 0;
}
}
}
}
section.dark-mode {
.intro-content {
.intro-content-upper {
.eyebrow {
color: var(--white);
}
h1,
h2,
h3 {
color: var(--white);
}
span.description {
color: var(--white);
font-weight: 500;
* {
color: var(--white);
}
a {
text-decoration: underline;
&:hover,
&:focus {
opacity: .8;
}
}
}
}
}
}
/* -------------------------------------------------------------------------
Module motion — viewport (u5-in-view) after REVEAL_LAG_MS (main.js).
Intro recipes mapped per module: bloom, drift, snap, float, slice (+ resource row on slider-resource-cards).
------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
/* Bloom — resting */
section.u5m-cards:not(.u5-in-view) .section-inner.center:not([data-sal]),
section.u5m-blog-post-cards:not(.u5-in-view) .section-inner.center:not([data-sal]) {
& .intro-content:not(.resource-cards-intro) .intro-content-upper .eyebrow {
opacity: 0;
transform: translateY(14px) scale(0.93);
filter: blur(3px);
}
& .intro-content:not(.resource-cards-intro) .intro-content-upper .heading {
opacity: 0;
transform: scale(0.91);
filter: blur(6px);
}
& .intro-content:not(.resource-cards-intro) .intro-content-upper span.description {
opacity: 0;
transform: translateY(18px);
filter: blur(4px);
}
& .intro-content .button-group > span.button-span {
opacity: 0;
transform: translateY(12px) scale(0.88);
}
}
/* Drift — resting */
section.u5m-accordion-faq:not(.u5-in-view) .section-inner.center:not([data-sal]),
section.u5m-tab-content:not(.u5-in-view) .section-inner.center:not([data-sal]) {
& .intro-content:not(.resource-cards-intro) .intro-content-upper .eyebrow {
opacity: 0;
transform: translateX(24px);
filter: blur(3px);
}
& .intro-content:not(.resource-cards-intro) .intro-content-upper .heading {
opacity: 0;
clip-path: inset(0 38% 0 38%);
transform: scale(0.95);
filter: blur(5px);
}
& .intro-content:not(.resource-cards-intro) .intro-content-upper span.description {
opacity: 0;
transform: translateX(-20px);
filter: blur(4px);
}
& .intro-content .button-group > span.button-span {
opacity: 0;
transform: translateX(18px) scale(0.94);
}
}
section.u5m-cta-row-signup:not(.u5-in-view) .inner.center:not([data-sal]) {
& .intro-content .intro-content-upper .eyebrow {
opacity: 0;
transform: translateX(24px);
filter: blur(3px);
}
& .intro-content .intro-content-upper .heading {
opacity: 0;
clip-path: inset(0 38% 0 38%);
transform: scale(0.95);
filter: blur(5px);
}
& .intro-content .intro-content-upper span.description {
opacity: 0;
transform: translateX(-20px);
filter: blur(4px);
}
& .intro-content .button-group > span.button-span {
opacity: 0;
transform: translateX(18px) scale(0.94);
}
}
/* Snap — resting */
section.u5m-cards-side:not(.u5-in-view) .outer-wrap:not([data-sal]),
section.u5m-form:not(.u5-in-view) .section-inner.center:not([data-sal]),
section.u5m-cta-row:not(.u5-in-view) .inner.center:not([data-sal]) {
& .intro-content:not(.resource-cards-intro) .intro-content-upper .eyebrow,
& .intro-content .intro-content-upper .eyebrow {
opacity: 0;
transform: translateY(8px);
}
& .intro-content:not(.resource-cards-intro) .intro-content-upper .heading,
& .intro-content .intro-content-upper .heading {
opacity: 0;
transform: translateY(10px) scale(0.98);
filter: blur(2px);
}
& .intro-content:not(.resource-cards-intro) .intro-content-upper span.description,
& .intro-content .intro-content-upper span.description {
opacity: 0;
transform: translateY(12px);
}
& .intro-content .button-group > span.button-span {
opacity: 0;
transform: translateY(10px) scale(0.95);
}
}
/* Float — resting (sliders; standard intro only on resource slider) */
section.u5m-slider-simple:not(.u5-in-view) .section-inner.center:not([data-sal]),
section.u5m-slider-image:not(.u5-in-view) .section-inner.center:not([data-sal]),
section.u5m-filterable-slider:not(.u5-in-view) .section-inner.center:not([data-sal]),
section.u5m-slider-resource-cards:not(.u5-in-view) .section-inner.center:not([data-sal]) {
& .intro-content:not(.resource-cards-intro) .intro-content-upper .eyebrow {
opacity: 0;
transform: translateY(-14px);
filter: blur(3px);
}
& .intro-content:not(.resource-cards-intro) .intro-content-upper .heading {
opacity: 0;
transform: translateY(22px) rotate(0.9deg);
filter: blur(6px);
}
& .intro-content:not(.resource-cards-intro) .intro-content-upper span.description {
opacity: 0;
transform: translateY(20px) scale(0.97);
filter: blur(3px);
}
& .intro-content:not(.resource-cards-intro) .button-group > span.button-span {
opacity: 0;
transform: translateY(16px);
filter: blur(2px);
}
}
/* Slice — resting */
section.u5m-team-grid:not(.u5-in-view) .section-inner.center:not([data-sal]),
section.u5m-alternating-content:not(.u5-in-view) .section-inner.center:not([data-sal]),
section.u5m-filtered-locations:not(.u5-in-view) .section-inner.center:not([data-sal]),
section.u5m-rich-text:not(.u5-in-view) .section-inner.center:not([data-sal]),
section.u5m-animated-stats:not(.u5-in-view) .section-inner.center:not([data-sal]),
section.u5m-anchor-nav:not(.u5-in-view) .section-inner.center:not([data-sal]),
section.u5m-000:not(.u5-in-view) .section-inner.center:not([data-sal]),
section.u5m-blog-subscribe:not(.u5-in-view) .section-inner.center:not([data-sal]),
section.u5m-filtered-content:not(.u5-in-view) .section-inner.center:not([data-sal]),
section.u5m-logo-trust-marks:not(.u5-in-view) .section-inner.center:not([data-sal]) {
& .intro-content:not(.resource-cards-intro) .intro-content-upper .eyebrow {
opacity: 0;
letter-spacing: 0.12em;
transform: translateY(6px);
}
& .intro-content:not(.resource-cards-intro) .intro-content-upper .heading {
opacity: 0;
clip-path: inset(46% 0 46% 0);
transform: translateY(6px);
filter: blur(4px);
}
& .intro-content:not(.resource-cards-intro) .intro-content-upper span.description {
opacity: 0;
transform: translateY(16px);
clip-path: inset(0 18% 0 18%);
filter: blur(3px);
}
& .intro-content .button-group > span.button-span {
opacity: 0;
transform: translateX(-18px) scale(0.94);
}
}
/* Resource-row intro (slider-resource-cards layout) — resting */
section.u5m-slider-resource-cards:not(.u5-in-view) .section-inner.center:not([data-sal]) {
& .intro-content.resource-cards-intro > .eyebrow {
opacity: 0;
transform: translateY(10px);
letter-spacing: 0.14em;
}
& .intro-content.resource-cards-intro .resource-cards-intro__heading-inner .heading {
opacity: 0;
clip-path: inset(40% 0 40% 0);
transform: translateY(8px);
filter: blur(4px);
}
& .intro-content.resource-cards-intro > span.description {
opacity: 0;
transform: translateY(26px);
}
& .intro-content.resource-cards-intro .button-group > span.button-span {
opacity: 0;
transform: translateX(-20px) scale(0.92);
}
}
/* Fallback bloom — sections not listed above (still use section-inner + intro) */
section[class*='u5m-']:not(.u5m-hero):not(.u5-in-view):not(.u5m-cards):not(.u5m-blog-post-cards):not(.u5m-accordion-faq):not(.u5m-tab-content):not(.u5m-cards-side):not(.u5m-form):not(.u5m-cta-row):not(.u5m-cta-row-signup):not(.u5m-slider-simple):not(.u5m-slider-image):not(.u5m-filterable-slider):not(.u5m-slider-resource-cards):not(.u5m-team-grid):not(.u5m-alternating-content):not(.u5m-filtered-locations):not(.u5m-rich-text):not(.u5m-animated-stats):not(.u5m-anchor-nav):not(.u5m-000):not(.u5m-blog-subscribe):not(.u5m-filtered-content):not(.u5m-logo-trust-marks):not(.u5m-landing-page-classic):not(.u5m-pillar-page) .section-inner.center:not([data-sal]) {
& .intro-content:not(.resource-cards-intro) .intro-content-upper .eyebrow {
opacity: 0;
transform: translateY(14px) scale(0.93);
filter: blur(3px);
}
& .intro-content:not(.resource-cards-intro) .intro-content-upper .heading {
opacity: 0;
transform: scale(0.91);
filter: blur(6px);
}
& .intro-content:not(.resource-cards-intro) .intro-content-upper span.description {
opacity: 0;
transform: translateY(18px);
filter: blur(4px);
}
& .intro-content .button-group > span.button-span {
opacity: 0;
transform: translateY(12px) scale(0.88);
}
}
section.u5m-accordion-faq:not(.u5-in-view) .section-inner.center:not([data-sal]) .accordion-repeater-section .accordion-item:nth-child(odd) {
opacity: 0;
transform: translateX(-26px) skewY(-1deg);
filter: blur(4px);
}
section.u5m-accordion-faq:not(.u5-in-view) .section-inner.center:not([data-sal]) .accordion-repeater-section .accordion-item:nth-child(even) {
opacity: 0;
transform: translateX(26px) skewY(1deg);
filter: blur(4px);
}
section.u5m-cards:not(.u5-in-view) .section-inner.center:not([data-sal]) ~ .card-wrapper .card {
opacity: 0;
transform: perspective(920px) rotateY(12deg) translateZ(-22px) translateY(10px);
filter: blur(5px);
}
section.u5m-cards-side:not(.u5-in-view) .outer-wrap:not([data-sal]) .wrapper .card {
opacity: 0;
transform: perspective(920px) rotateY(12deg) translateZ(-22px) translateY(10px);
filter: blur(5px);
}
section.u5m-logo-trust-marks:not(.u5-in-view) .section-inner.center:not([data-sal]) .grid__item,
section.u5m-logo-trust-marks:not(.u5-in-view) .section-inner.center:not([data-sal]) .splide__slide {
opacity: 0;
transform: scale(0.72);
}
section.u5m-pillar-page:not(.u5-in-view) .intro-content.main-intro {
opacity: 0;
transform: translateY(32px) scaleX(0.93);
filter: blur(6px);
}
section.u5m-landing-page-classic:not(.u5-in-view) .landing-classic:not([data-sal]) .landing-classic__hero-visual {
opacity: 0;
clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
transform: skewX(-4deg);
filter: blur(8px);
}
section.u5m-landing-page-classic:not(.u5-in-view) .landing-classic:not([data-sal]) .landing-classic__hero-inner {
& .intro-content-upper .eyebrow {
opacity: 0;
transform: translateY(-16px);
filter: blur(3px);
}
& .intro-content-upper .heading,
& .intro-content-upper h1 {
opacity: 0;
transform: scale(0.9);
filter: blur(7px);
}
& .intro-content-upper span.description,
& .intro-content-upper .landing-classic__subheading {
opacity: 0;
transform: translateX(-22px);
filter: blur(4px);
}
& .landing-classic__logo {
opacity: 0;
transform: rotate(-8deg) scale(0.84);
}
& .intro-content .button-group > span.button-span {
opacity: 0;
transform: translateY(14px) scale(0.93);
}
}
/* Bloom — in view */
section.u5m-cards.u5-in-view .section-inner.center:not([data-sal]),
section.u5m-blog-post-cards.u5-in-view .section-inner.center:not([data-sal]) {
& .intro-content:not(.resource-cards-intro) .intro-content-upper .eyebrow {
transform-origin: 50% 100%;
animation: mod-bloom-eyebrow-in 0.72s cubic-bezier(0.2, 1, 0.34, 1) 0.04s both;
}
& .intro-content:not(.resource-cards-intro) .intro-content-upper .heading {
transform-origin: 50% 50%;
animation: mod-bloom-heading-in 0.86s cubic-bezier(0.2, 1, 0.34, 1) 0.08s both;
}
& .intro-content:not(.resource-cards-intro) .intro-content-upper span.description {
animation: mod-bloom-desc-in 0.78s cubic-bezier(0.2, 1, 0.34, 1) 0.14s both;
}
& .intro-content .button-group > span.button-span {
transform-origin: 50% 50%;
animation: mod-bloom-btn-in 0.74s cubic-bezier(0.2, 1, 0.34, 1) both;
&:nth-child(1) {
animation-delay: 0.2s;
}
&:nth-child(2) {
animation-delay: 0.3s;
}
&:nth-child(3) {
animation-delay: 0.4s;
}
&:nth-child(4) {
animation-delay: 0.5s;
}
}
}
/* Drift — in view */
section.u5m-accordion-faq.u5-in-view .section-inner.center:not([data-sal]),
section.u5m-tab-content.u5-in-view .section-inner.center:not([data-sal]) {
& .intro-content:not(.resource-cards-intro) .intro-content-upper .eyebrow {
animation: mod-drift-eyebrow-in 0.7s cubic-bezier(0.2, 1, 0.34, 1) 0.04s both;
}
& .intro-content:not(.resource-cards-intro) .intro-content-upper .heading {
transform-origin: 50% 50%;
animation: mod-drift-heading-in 0.9s cubic-bezier(0.2, 1, 0.34, 1) 0.08s both;
}
& .intro-content:not(.resource-cards-intro) .intro-content-upper span.description {
animation: mod-drift-desc-in 0.76s cubic-bezier(0.2, 1, 0.34, 1) 0.14s both;
}
& .intro-content .button-group > span.button-span {
animation: mod-drift-btn-in 0.72s cubic-bezier(0.2, 1, 0.34, 1) both;
&:nth-child(1) {
animation-delay: 0.22s;
}
&:nth-child(2) {
animation-delay: 0.32s;
}
&:nth-child(3) {
animation-delay: 0.42s;
}
&:nth-child(4) {
animation-delay: 0.52s;
}
}
}
section.u5m-cta-row-signup.u5-in-view .inner.center:not([data-sal]) {
& .intro-content .intro-content-upper .eyebrow {
animation: mod-drift-eyebrow-in 0.7s cubic-bezier(0.2, 1, 0.34, 1) 0.06s both;
}
& .intro-content .intro-content-upper .heading {
transform-origin: 50% 50%;
animation: mod-drift-heading-in 0.9s cubic-bezier(0.2, 1, 0.34, 1) 0.1s both;
}
& .intro-content .intro-content-upper span.description {
animation: mod-drift-desc-in 0.76s cubic-bezier(0.2, 1, 0.34, 1) 0.16s both;
}
& .intro-content .button-group > span.button-span {
animation: mod-drift-btn-in 0.72s cubic-bezier(0.2, 1, 0.34, 1) both;
&:nth-child(1) {
animation-delay: 0.24s;
}
&:nth-child(2) {
animation-delay: 0.34s;
}
&:nth-child(3) {
animation-delay: 0.44s;
}
}
}
/* Snap — in view */
section.u5m-cards-side.u5-in-view .outer-wrap:not([data-sal]),
section.u5m-form.u5-in-view .section-inner.center:not([data-sal]),
section.u5m-cta-row.u5-in-view .inner.center:not([data-sal]) {
& .intro-content:not(.resource-cards-intro) .intro-content-upper .eyebrow,
& .intro-content .intro-content-upper .eyebrow {
animation: mod-snap-eyebrow-in 0.52s cubic-bezier(0.2, 1, 0.34, 1) 0.04s both;
}
& .intro-content:not(.resource-cards-intro) .intro-content-upper .heading,
& .intro-content .intro-content-upper .heading {
animation: mod-snap-heading-in 0.58s cubic-bezier(0.2, 1, 0.34, 1) 0.06s both;
}
& .intro-content:not(.resource-cards-intro) .intro-content-upper span.description,
& .intro-content .intro-content-upper span.description {
animation: mod-snap-desc-in 0.54s cubic-bezier(0.2, 1, 0.34, 1) 0.1s both;
}
& .intro-content .button-group > span.button-span {
animation: mod-snap-btn-in 0.56s cubic-bezier(0.2, 1, 0.34, 1) both;
&:nth-child(1) {
animation-delay: 0.16s;
}
&:nth-child(2) {
animation-delay: 0.24s;
}
&:nth-child(3) {
animation-delay: 0.32s;
}
&:nth-child(4) {
animation-delay: 0.4s;
}
}
}
/* Float — in view */
section.u5m-slider-simple.u5-in-view .section-inner.center:not([data-sal]),
section.u5m-slider-image.u5-in-view .section-inner.center:not([data-sal]),
section.u5m-filterable-slider.u5-in-view .section-inner.center:not([data-sal]),
section.u5m-slider-resource-cards.u5-in-view .section-inner.center:not([data-sal]) {
& .intro-content:not(.resource-cards-intro) .intro-content-upper .eyebrow {
animation: mod-float-eyebrow-in 0.74s cubic-bezier(0.2, 1, 0.34, 1) 0.04s both;
}
& .intro-content:not(.resource-cards-intro) .intro-content-upper .heading {
transform-origin: 50% 0;
animation: mod-float-heading-in 0.88s cubic-bezier(0.2, 1, 0.34, 1) 0.1s both;
}
& .intro-content:not(.resource-cards-intro) .intro-content-upper span.description {
animation: mod-float-desc-in 0.78s cubic-bezier(0.2, 1, 0.34, 1) 0.16s both;
}
& .intro-content:not(.resource-cards-intro) .button-group > span.button-span {
animation: mod-float-btn-in 0.68s cubic-bezier(0.2, 1, 0.34, 1) both;
&:nth-child(1) {
animation-delay: 0.2s;
}
&:nth-child(2) {
animation-delay: 0.3s;
}
&:nth-child(3) {
animation-delay: 0.4s;
}
&:nth-child(4) {
animation-delay: 0.5s;
}
}
}
/* Slice — in view */
section.u5m-team-grid.u5-in-view .section-inner.center:not([data-sal]),
section.u5m-alternating-content.u5-in-view .section-inner.center:not([data-sal]),
section.u5m-filtered-locations.u5-in-view .section-inner.center:not([data-sal]),
section.u5m-rich-text.u5-in-view .section-inner.center:not([data-sal]),
section.u5m-animated-stats.u5-in-view .section-inner.center:not([data-sal]),
section.u5m-anchor-nav.u5-in-view .section-inner.center:not([data-sal]),
section.u5m-000.u5-in-view .section-inner.center:not([data-sal]),
section.u5m-blog-subscribe.u5-in-view .section-inner.center:not([data-sal]),
section.u5m-filtered-content.u5-in-view .section-inner.center:not([data-sal]),
section.u5m-logo-trust-marks.u5-in-view .section-inner.center:not([data-sal]) {
& .intro-content:not(.resource-cards-intro) .intro-content-upper .eyebrow {
animation: mod-slice-eyebrow-in 0.7s cubic-bezier(0.2, 1, 0.34, 1) 0.04s both;
}
& .intro-content:not(.resource-cards-intro) .intro-content-upper .heading {
transform-origin: 50% 50%;
animation: mod-slice-heading-in 0.88s cubic-bezier(0.2, 1, 0.34, 1) 0.08s both;
}
& .intro-content:not(.resource-cards-intro) .intro-content-upper span.description {
animation: mod-slice-desc-in 0.8s cubic-bezier(0.2, 1, 0.34, 1) 0.14s both;
}
& .intro-content .button-group > span.button-span {
animation: mod-slice-btn-in 0.72s cubic-bezier(0.2, 1, 0.34, 1) both;
&:nth-child(1) {
animation-delay: 0.22s;
}
&:nth-child(2) {
animation-delay: 0.32s;
}
&:nth-child(3) {
animation-delay: 0.42s;
}
&:nth-child(4) {
animation-delay: 0.52s;
}
}
}
/* Resource-row — in view (slider-resource-cards only) */
section.u5m-slider-resource-cards.u5-in-view .section-inner.center:not([data-sal]) {
& .intro-content.resource-cards-intro > .eyebrow {
animation: mod-resource-eyebrow-in 0.68s cubic-bezier(0.2, 1, 0.34, 1) 0.04s both;
}
& .intro-content.resource-cards-intro .resource-cards-intro__heading-inner .heading {
transform-origin: 50% 50%;
animation: mod-resource-title-in 0.82s cubic-bezier(0.2, 1, 0.34, 1) 0.1s both;
}
& .intro-content.resource-cards-intro > span.description {
animation: mod-resource-desc-in 0.72s cubic-bezier(0.2, 1, 0.34, 1) 0.16s both;
}
& .intro-content.resource-cards-intro .button-group > span.button-span {
transform-origin: 50% 50%;
animation: mod-drift-btn-in 0.72s cubic-bezier(0.2, 1, 0.34, 1) both;
&:nth-child(1) {
animation-delay: 0.22s;
}
&:nth-child(2) {
animation-delay: 0.32s;
}
&:nth-child(3) {
animation-delay: 0.42s;
}
&:nth-child(4) {
animation-delay: 0.52s;
}
}
}
/* Fallback bloom — in view */
section[class*='u5m-']:not(.u5m-hero).u5-in-view:not(.u5m-cards):not(.u5m-blog-post-cards):not(.u5m-accordion-faq):not(.u5m-tab-content):not(.u5m-cards-side):not(.u5m-form):not(.u5m-cta-row):not(.u5m-cta-row-signup):not(.u5m-slider-simple):not(.u5m-slider-image):not(.u5m-filterable-slider):not(.u5m-slider-resource-cards):not(.u5m-team-grid):not(.u5m-alternating-content):not(.u5m-filtered-locations):not(.u5m-rich-text):not(.u5m-animated-stats):not(.u5m-anchor-nav):not(.u5m-000):not(.u5m-blog-subscribe):not(.u5m-filtered-content):not(.u5m-logo-trust-marks):not(.u5m-landing-page-classic):not(.u5m-pillar-page) .section-inner.center:not([data-sal]) {
& .intro-content:not(.resource-cards-intro) .intro-content-upper .eyebrow {
transform-origin: 50% 100%;
animation: mod-bloom-eyebrow-in 0.72s cubic-bezier(0.2, 1, 0.34, 1) 0.04s both;
}
& .intro-content:not(.resource-cards-intro) .intro-content-upper .heading {
transform-origin: 50% 50%;
animation: mod-bloom-heading-in 0.86s cubic-bezier(0.2, 1, 0.34, 1) 0.08s both;
}
& .intro-content:not(.resource-cards-intro) .intro-content-upper span.description {
animation: mod-bloom-desc-in 0.78s cubic-bezier(0.2, 1, 0.34, 1) 0.14s both;
}
& .intro-content .button-group > span.button-span {
transform-origin: 50% 50%;
animation: mod-bloom-btn-in 0.74s cubic-bezier(0.2, 1, 0.34, 1) both;
&:nth-child(1) {
animation-delay: 0.2s;
}
&:nth-child(2) {
animation-delay: 0.3s;
}
&:nth-child(3) {
animation-delay: 0.4s;
}
&:nth-child(4) {
animation-delay: 0.5s;
}
}
}
section.u5m-accordion-faq.u5-in-view .section-inner.center:not([data-sal]) .accordion-repeater-section .accordion-item:nth-child(odd) {
transform-origin: 0 50%;
animation: mod-acc-row-l-in 0.62s cubic-bezier(0.2, 1, 0.34, 1) both;
&:nth-child(1) {
animation-delay: 0.18s;
}
&:nth-child(3) {
animation-delay: 0.34s;
}
&:nth-child(5) {
animation-delay: 0.5s;
}
&:nth-child(7) {
animation-delay: 0.66s;
}
&:nth-child(9) {
animation-delay: 0.82s;
}
&:nth-child(11) {
animation-delay: 0.98s;
}
}
section.u5m-accordion-faq.u5-in-view .section-inner.center:not([data-sal]) .accordion-repeater-section .accordion-item:nth-child(even) {
transform-origin: 100% 50%;
animation: mod-acc-row-r-in 0.62s cubic-bezier(0.2, 1, 0.34, 1) both;
&:nth-child(2) {
animation-delay: 0.26s;
}
&:nth-child(4) {
animation-delay: 0.42s;
}
&:nth-child(6) {
animation-delay: 0.58s;
}
&:nth-child(8) {
animation-delay: 0.74s;
}
&:nth-child(10) {
animation-delay: 0.9s;
}
&:nth-child(12) {
animation-delay: 1.06s;
}
}
section.u5m-cards.u5-in-view .section-inner.center:not([data-sal]) ~ .card-wrapper {
perspective: 980px;
}
section.u5m-cards.u5-in-view .section-inner.center:not([data-sal]) ~ .card-wrapper .card {
transform-origin: 50% 50%;
animation: mod-card-deck-in 0.72s cubic-bezier(0.2, 1, 0.34, 1) both;
&:nth-child(1) {
animation-delay: 0.14s;
}
&:nth-child(2) {
animation-delay: 0.22s;
}
&:nth-child(3) {
animation-delay: 0.3s;
}
&:nth-child(4) {
animation-delay: 0.38s;
}
&:nth-child(5) {
animation-delay: 0.46s;
}
&:nth-child(6) {
animation-delay: 0.54s;
}
&:nth-child(7) {
animation-delay: 0.62s;
}
&:nth-child(8) {
animation-delay: 0.7s;
}
}
section.u5m-cards-side.u5-in-view .outer-wrap:not([data-sal]) .wrapper {
perspective: 980px;
}
section.u5m-cards-side.u5-in-view .outer-wrap:not([data-sal]) .wrapper .card {
transform-origin: 50% 50%;
animation: mod-card-deck-in 0.72s cubic-bezier(0.2, 1, 0.34, 1) both;
&:nth-child(1) {
animation-delay: 0.16s;
}
&:nth-child(2) {
animation-delay: 0.24s;
}
&:nth-child(3) {
animation-delay: 0.32s;
}
&:nth-child(4) {
animation-delay: 0.4s;
}
&:nth-child(5) {
animation-delay: 0.48s;
}
&:nth-child(6) {
animation-delay: 0.56s;
}
}
section.u5m-logo-trust-marks.u5-in-view .section-inner.center:not([data-sal]) .grid__item,
section.u5m-logo-trust-marks.u5-in-view .section-inner.center:not([data-sal]) .splide__slide {
transform-origin: 50% 50%;
animation: mod-trust-chip-in 0.52s cubic-bezier(0.2, 1, 0.34, 1) both;
&:nth-child(1) {
animation-delay: 0.1s;
}
&:nth-child(2) {
animation-delay: 0.16s;
}
&:nth-child(3) {
animation-delay: 0.22s;
}
&:nth-child(4) {
animation-delay: 0.28s;
}
&:nth-child(5) {
animation-delay: 0.34s;
}
&:nth-child(6) {
animation-delay: 0.4s;
}
&:nth-child(7) {
animation-delay: 0.46s;
}
&:nth-child(8) {
animation-delay: 0.52s;
}
&:nth-child(9) {
animation-delay: 0.58s;
}
&:nth-child(10) {
animation-delay: 0.64s;
}
&:nth-child(11) {
animation-delay: 0.7s;
}
&:nth-child(12) {
animation-delay: 0.76s;
}
}
section.u5m-pillar-page.u5-in-view .intro-content.main-intro {
transform-origin: 50% 0;
animation: mod-pillar-shelf-in 0.92s cubic-bezier(0.2, 1, 0.34, 1) 0.06s both;
}
section.u5m-landing-page-classic.u5-in-view .landing-classic:not([data-sal]) .landing-classic__hero-visual {
transform-origin: 50% 50%;
animation: mod-landing-visor-in 1.08s cubic-bezier(0.2, 1, 0.34, 1) 0.04s both;
}
section.u5m-landing-page-classic.u5-in-view .landing-classic:not([data-sal]) .landing-classic__hero-inner {
& .intro-content-upper .eyebrow {
animation: mod-landing-eyebrow-in 0.68s cubic-bezier(0.2, 1, 0.34, 1) 0.12s both;
}
& .intro-content-upper .heading,
& .intro-content-upper h1 {
transform-origin: 50% 50%;
animation: mod-landing-heading-in 0.9s cubic-bezier(0.2, 1, 0.34, 1) 0.2s both;
}
& .intro-content-upper span.description,
& .intro-content-upper .landing-classic__subheading {
animation: mod-landing-desc-in 0.76s cubic-bezier(0.2, 1, 0.34, 1) 0.28s both;
}
& .landing-classic__logo {
transform-origin: 50% 60%;
animation: mod-landing-logo-in 0.64s cubic-bezier(0.2, 1, 0.34, 1) 0.08s both;
}
& .intro-content .button-group > span.button-span {
transform-origin: 50% 50%;
animation: mod-landing-btn-in 0.7s cubic-bezier(0.2, 1, 0.34, 1) both;
&:nth-child(1) {
animation-delay: 0.36s;
}
&:nth-child(2) {
animation-delay: 0.46s;
}
&:nth-child(3) {
animation-delay: 0.56s;
}
}
}
}
@media (prefers-reduced-motion: reduce) {
section[class*='u5m-']:not(.u5m-hero) .section-inner.center:not([data-sal]) .intro-content .intro-content-upper .eyebrow,
section[class*='u5m-']:not(.u5m-hero) .section-inner.center:not([data-sal]) .intro-content .intro-content-upper .heading,
section[class*='u5m-']:not(.u5m-hero) .section-inner.center:not([data-sal]) .intro-content .intro-content-upper span.description,
section[class*='u5m-']:not(.u5m-hero) .section-inner.center:not([data-sal]) .intro-content.resource-cards-intro > .eyebrow,
section[class*='u5m-']:not(.u5m-hero) .section-inner.center:not([data-sal]) .intro-content.resource-cards-intro .resource-cards-intro__heading-inner .heading,
section[class*='u5m-']:not(.u5m-hero) .section-inner.center:not([data-sal]) .intro-content.resource-cards-intro > span.description,
section[class*='u5m-']:not(.u5m-hero) .section-inner.center:not([data-sal]) .intro-content .button-group > span.button-span,
section.u5m-cards-side .outer-wrap:not([data-sal]) .intro-content .intro-content-upper .eyebrow,
section.u5m-cards-side .outer-wrap:not([data-sal]) .intro-content .intro-content-upper .heading,
section.u5m-cards-side .outer-wrap:not([data-sal]) .intro-content .intro-content-upper span.description,
section.u5m-cards-side .outer-wrap:not([data-sal]) .intro-content .button-group > span.button-span,
section[class*='u5m-']:not(.u5m-hero) .inner.center:not([data-sal]) .intro-content .intro-content-upper .eyebrow,
section[class*='u5m-']:not(.u5m-hero) .inner.center:not([data-sal]) .intro-content .intro-content-upper .heading,
section[class*='u5m-']:not(.u5m-hero) .inner.center:not([data-sal]) .intro-content .intro-content-upper span.description,
section[class*='u5m-']:not(.u5m-hero) .inner.center:not([data-sal]) .intro-content .button-group > span.button-span,
section.u5m-accordion-faq .section-inner.center:not([data-sal]) .accordion-repeater-section .accordion-item,
section.u5m-cards .section-inner.center:not([data-sal]) ~ .card-wrapper .card,
section.u5m-cards-side .outer-wrap:not([data-sal]) .wrapper .card,
section.u5m-logo-trust-marks .section-inner.center:not([data-sal]) .grid__item,
section.u5m-logo-trust-marks .section-inner.center:not([data-sal]) .splide__slide,
section.u5m-pillar-page .intro-content.main-intro,
section.u5m-landing-page-classic .landing-classic:not([data-sal]) .landing-classic__hero-visual,
section.u5m-landing-page-classic .landing-classic:not([data-sal]) .landing-classic__hero-inner .intro-content-upper .eyebrow,
section.u5m-landing-page-classic .landing-classic:not([data-sal]) .landing-classic__hero-inner .intro-content-upper .heading,
section.u5m-landing-page-classic .landing-classic:not([data-sal]) .landing-classic__hero-inner .intro-content-upper h1,
section.u5m-landing-page-classic .landing-classic:not([data-sal]) .landing-classic__hero-inner .intro-content-upper span.description,
section.u5m-landing-page-classic .landing-classic:not([data-sal]) .landing-classic__hero-inner .intro-content-upper .landing-classic__subheading,
section.u5m-landing-page-classic .landing-classic:not([data-sal]) .landing-classic__hero-inner .landing-classic__logo,
section.u5m-landing-page-classic .landing-classic:not([data-sal]) .landing-classic__hero-inner .intro-content .button-group > span.button-span {
animation: none;
opacity: 1;
transform: none;
filter: none;
clip-path: none;
letter-spacing: normal;
}
}