/* Version: 0.9.63 */
html {
font-size: 62.5%; /* Set base font size to 10px */
}
:root {
/***********
***********
***********
EVERYTHING BELOW THIS POINT IS NO TOUCHEY
UNLESS YOU KNOW EXACTLY WHAT YOU'RE DOING
***********
***********
***********/
/* PRIMARY COLOR VARIABLES */
--primary: hsl(var(--primary-h), var(--primary-s), var(--primary-l));
--primary-hover: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) * var(--primary-hover-val)));
--primary-ultra-light: hsl(var(--primary-h), var(--primary-s), var(--primary-ultra-light-val));
--primary-light: hsl(var(--primary-h), var(--primary-s), var(--primary-light-val));
--primary-medium: hsl(var(--primary-h), var(--primary-s), var(--primary-medium-val));
--primary-dark: hsl(var(--primary-h), var(--primary-s), var(--primary-dark-val));
--primary-ultra-dark: hsl(var(--primary-h), var(--primary-s), var(--primary-ultra-dark-val));
--primary-ultra-dark-trans-90: hsla(var(--primary-h), var(--primary-s), var(--primary-ultra-dark-val), .9);
--primary-ultra-dark-trans-80: hsla(var(--primary-h), var(--primary-s), var(--primary-ultra-dark-val), .8);
--primary-ultra-dark-trans-60: hsla(var(--primary-h), var(--primary-s), var(--primary-ultra-dark-val), .6);
--primary-ultra-dark-trans-40: hsla(var(--primary-h), var(--primary-s), var(--primary-ultra-dark-val), .4);
--primary-ultra-dark-trans-20: hsla(var(--primary-h), var(--primary-s), var(--primary-ultra-dark-val), .2);
--primary-ultra-dark-trans-10: hsla(var(--primary-h), var(--primary-s), var(--primary-ultra-dark-val), .1);
--primary-trans-90: hsla(var(--primary-h), var(--primary-s), var(--primary-l), .9);
--primary-trans-80: hsla(var(--primary-h), var(--primary-s), var(--primary-l), .8);
--primary-trans-60: hsla(var(--primary-h), var(--primary-s), var(--primary-l), .6);
--primary-trans-40: hsla(var(--primary-h), var(--primary-s), var(--primary-l), .4);
--primary-trans-20: hsla(var(--primary-h), var(--primary-s), var(--primary-l), .2);
--primary-trans-10: hsla(var(--primary-h), var(--primary-s), var(--primary-l), .1);
--primary-comp: hsl(calc(var(--primary-h) + 180), var(--primary-s), var(--primary-l));
/* SECONDARY COLOR VARIABLES */
--secondary: hsl(var(--secondary-h), var(--secondary-s), var(--secondary-l));
--secondary-hover: hsl(var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) * var(--secondary-hover-val)));
--secondary-ultra-light: hsl(var(--secondary-h), var(--secondary-s), var(--secondary-ultra-light-val));
--secondary-light: hsl(var(--secondary-h), var(--secondary-s), var(--secondary-light-val));
--secondary-medium: hsl(var(--secondary-h), var(--secondary-s), var(--secondary-medium-val));
--secondary-dark: hsl(var(--secondary-h), var(--secondary-s), var(--secondary-dark-val));
--secondary-ultra-dark: hsl(var(--secondary-h), var(--secondary-s), var(--secondary-ultra-dark-val));
--secondary-ultra-dark-trans-90: hsla(var(--secondary-h), var(--secondary-s), var(--secondary-ultra-dark-val), .9);
--secondary-ultra-dark-trans-80: hsla(var(--secondary-h), var(--secondary-s), var(--secondary-ultra-dark-val), .8);
--secondary-ultra-dark-trans-60: hsla(var(--secondary-h), var(--secondary-s), var(--secondary-ultra-dark-val), .6);
--secondary-ultra-dark-trans-40: hsla(var(--secondary-h), var(--secondary-s), var(--secondary-ultra-dark-val), .4);
--secondary-ultra-dark-trans-20: hsla(var(--secondary-h), var(--secondary-s), var(--secondary-ultra-dark-val), .2);
--secondary-ultra-dark-trans-10: hsla(var(--secondary-h), var(--secondary-s), var(--secondary-ultra-dark-val), .1);
--secondary-trans-90: hsla(var(--secondary-h), var(--secondary-s), var(--secondary-l), .9);
--secondary-trans-80: hsla(var(--secondary-h), var(--secondary-s), var(--secondary-l), .8);
--secondary-trans-60: hsla(var(--secondary-h), var(--secondary-s), var(--secondary-l), .6);
--secondary-trans-40: hsla(var(--secondary-h), var(--secondary-s), var(--secondary-l), .4);
--secondary-trans-20: hsla(var(--secondary-h), var(--secondary-s), var(--secondary-l), .2);
--secondary-trans-10: hsla(var(--secondary-h), var(--secondary-s), var(--secondary-l), .1);
--secondary-comp: hsl(calc(var(--secondary-h) + 180), var(--secondary-s), var(--secondary-l));
/* ACCENT COLOR VARIABLES */
--accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
--accent-hover: hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l) * var(--accent-hover-val)));
--accent-ultra-light: hsl(var(--accent-h), var(--accent-s), var(--accent-ultra-light-val));
--accent-light: hsl(var(--accent-h), var(--accent-s), var(--accent-light-val));
--accent-medium: hsl(var(--accent-h), var(--accent-s), var(--accent-medium-val));
--accent-dark: hsl(var(--accent-h), var(--accent-s), var(--accent-dark-val));
--accent-ultra-dark: hsl(var(--accent-h), var(--accent-s), var(--accent-ultra-dark-val));
--accent-ultra-dark-trans-90: hsla(var(--accent-h), var(--accent-s), var(--accent-ultra-dark-val), .9);
--accent-ultra-dark-trans-80: hsla(var(--accent-h), var(--accent-s), var(--accent-ultra-dark-val), .8);
--accent-ultra-dark-trans-60: hsla(var(--accent-h), var(--accent-s), var(--accent-ultra-dark-val), .6);
--accent-ultra-dark-trans-40: hsla(var(--accent-h), var(--accent-s), var(--accent-ultra-dark-val), .4);
--accent-ultra-dark-trans-20: hsla(var(--accent-h), var(--accent-s), var(--accent-ultra-dark-val), .2);
--accent-ultra-dark-trans-10: hsla(var(--accent-h), var(--accent-s), var(--accent-ultra-dark-val), .1);
--accent-trans-90: hsla(var(--accent-h), var(--accent-s), var(--accent-l), .9);
--accent-trans-80: hsla(var(--accent-h), var(--accent-s), var(--accent-l), .8);
--accent-trans-60: hsla(var(--accent-h), var(--accent-s), var(--accent-l), .6);
--accent-trans-40: hsla(var(--accent-h), var(--accent-s), var(--accent-l), .4);
--accent-trans-20: hsla(var(--accent-h), var(--accent-s), var(--accent-l), .2);
--accent-trans-10: hsla(var(--accent-h), var(--accent-s), var(--accent-l), .1);
--accent-comp: hsl(calc(var(--accent-h) + 180), var(--accent-s), var(--accent-l));
/* BASE COLOR VARIABLES */
--base: hsl(var(--base-h), var(--base-s), var(--base-l));
--base-hover: hsl(var(--base-h), var(--base-s), calc(var(--base-l) * var(--base-hover-val)));
--base-ultra-light: hsl(var(--base-h), var(--base-s), var(--base-ultra-light-val));
--base-light: hsl(var(--base-h), var(--base-s), var(--base-light-val));
--base-medium: hsl(var(--base-h), var(--base-s), var(--base-medium-val));
--base-dark: hsl(var(--base-h), var(--base-s), var(--base-dark-val));
--base-ultra-dark: hsl(var(--base-h), var(--base-s), var(--base-ultra-dark-val));
--base-ultra-dark-trans-90: hsla(var(--base-h), var(--base-s), var(--base-ultra-dark-val), .9);
--base-ultra-dark-trans-80: hsla(var(--base-h), var(--base-s), var(--base-ultra-dark-val), .8);
--base-ultra-dark-trans-60: hsla(var(--base-h), var(--base-s), var(--base-ultra-dark-val), .6);
--base-ultra-dark-trans-40: hsla(var(--base-h), var(--base-s), var(--base-ultra-dark-val), .4);
--base-ultra-dark-trans-20: hsla(var(--base-h), var(--base-s), var(--base-ultra-dark-val), .2);
--base-ultra-dark-trans-10: hsla(var(--base-h), var(--base-s), var(--base-ultra-dark-val), .1);
--base-trans-90: hsla(var(--base-h), var(--base-s), var(--base-l), .9);
--base-trans-80: hsla(var(--base-h), var(--base-s), var(--base-l), .8);
--base-trans-60: hsla(var(--base-h), var(--base-s), var(--base-l), .6);
--base-trans-40: hsla(var(--base-h), var(--base-s), var(--base-l), .4);
--base-trans-20: hsla(var(--base-h), var(--base-s), var(--base-l), .2);
--base-trans-10: hsla(var(--base-h), var(--base-s), var(--base-l), .1);
--base-comp: hsl(calc(var(--base-h) + 180), var(--base-s), var(--base-l));
/* WHITE, BLACK, AND GRAY COLOR VARIABLES - NO TOUCHEY */
--shade-black: hsl(0, 0%, 0%);
--shade-white: hsl(100, 100%, 100%);
--shade-ultra-light: hsl(var(--shade-h), var(--shade-s), 95%);
--shade-light: hsl(var(--shade-h), var(--shade-s), 85%);
--shade-medium: hsl(var(--shade-h), var(--shade-s), 50%);
--shade-dark: hsl(var(--shade-h), var(--shade-s), 20%);
--shade-ultra-dark: hsl(var(--shade-h), var(--shade-s), 10%);
--shade-ultra-dark-trans-90: hsla(var(--shade-h), var(--shade-s), var(--shade-ultra-dark-val), .9);
--shade-ultra-dark-trans-80: hsla(var(--shade-h), var(--shade-s), var(--shade-ultra-dark-val), .8);
--shade-ultra-dark-trans-60: hsla(var(--shade-h), var(--shade-s), var(--shade-ultra-dark-val), .6);
--shade-ultra-dark-trans-40: hsla(var(--shade-h), var(--shade-s), var(--shade-ultra-dark-val), .4);
--shade-ultra-dark-trans-20: hsla(var(--shade-h), var(--shade-s), var(--shade-ultra-dark-val), .2);
--shade-ultra-dark-trans-10: hsla(var(--shade-h), var(--shade-s), var(--shade-ultra-dark-val), .1);
--black-trans-90: hsla(var(--shade-h), var(--shade-s), var(--shade-l), .9);
--black-trans-80: hsla(var(--shade-h), var(--shade-s), var(--shade-l), .8);
--black-trans-60: hsla(var(--shade-h), var(--shade-s), var(--shade-l), .6);
--black-trans-40: hsla(var(--shade-h), var(--shade-s), var(--shade-l), .4);
--black-trans-20: hsla(var(--shade-h), var(--shade-s), var(--shade-l), .2);
--black-trans-10: hsla(var(--shade-h), var(--shade-s), var(--shade-l), .1);
/***
SCALE CALCS
These calcs are for the text clamps.
***/
/* SCALE-BASED TYPOGRAPHY */
--text-m-max: var(--base-text-desk);
--text-m-min: var(--base-text-mob);
--text-s-max: calc(var(--text-m-max) / var(--text-scale));
--text-s-min: calc(var(--text-m-min) / var(--mob-text-scale));
--text-xs-max: calc(var(--text-s-max) / var(--text-scale));
--text-xs-min: calc(var(--text-s-min) / var(--mob-text-scale));
--text-l-max: calc(var(--text-m-max) * var(--text-scale));
--text-l-min: calc(var(--text-m-min) * var(--mob-text-scale));
--text-xl-max: calc(var(--text-l-max) * var(--text-scale));
--text-xl-min: calc(var(--text-l-min) * var(--mob-text-scale));
--text-xxl-max: calc(var(--text-xl-max) * var(--text-scale));
--text-xxl-min: calc(var(--text-xl-min) * var(--mob-text-scale));
/***
USEFUL TEXT VARIABLES
These can be used in place of classes or in custom classes.
***/
--text-xs: clamp(calc(var(--text-xs-min) * 1rem), calc(var(--text-xs-min) * 1rem + ((1vw - (var(--vp-min) / 100) * 1rem) * (100 * (var(--text-xs-max) - var(--text-xs-min)) / (var(--vp-max) - var(--vp-min))))), calc(var(--text-xs-max) * 1rem));
--text-s: clamp(calc(var(--text-s-min) * 1rem), calc(var(--text-s-min) * 1rem + ((1vw - (var(--vp-min) / 100) * 1rem) * (100 * (var(--text-s-max) - var(--text-s-min)) / (var(--vp-max) - var(--vp-min))))), calc(var(--text-s-max) * 1rem));
--text-m: clamp(calc(var(--text-m-min) * 1rem), calc(var(--text-m-min) * 1rem + ((1vw - (var(--vp-min) / 100) * 1rem) * (100 * (var(--text-m-max) - var(--text-m-min)) / (var(--vp-max) - var(--vp-min))))), calc(var(--text-m-max) * 1rem));
--text-l: clamp(calc(var(--text-l-min) * 1rem), calc(var(--text-l-min) * 1rem + ((1vw - (var(--vp-min) / 100) * 1rem) * (100 * (var(--text-l-max) - var(--text-l-min)) / (var(--vp-max) - var(--vp-min))))), calc(var(--text-l-max) * 1rem));
--text-xl: clamp(calc(var(--text-xl-min) * 1rem), calc(var(--text-xl-min) * 1rem + ((1vw - (var(--vp-min) / 100) * 1rem) * (100 * (var(--text-xl-max) - var(--text-xl-min)) / (var(--vp-max) - var(--vp-min))))), calc(var(--text-xl-max) * 1rem));
--text-xxl: clamp(calc(var(--text-xxl-min) * 1rem), calc(var(--text-xxl-min) * 1rem + ((1vw - (var(--vp-min) / 100) * 1rem) * (100 * (var(--text-xxl-max) - var(--text-xxl-min)) / (var(--vp-max) - var(--vp-min))))), calc(var(--text-xxl-max) * 1rem));
--text-xs-fallback: calc(var(--text-xs-min) * 1rem + (var(--text-xs-max) - var(--text-xs-min)) * ((100vw - (var(--vp-min) * 1rem)) / (var(--vp-max) - var(--vp-min))));
--text-s-fallback: calc(var(--text-s-min) * 1rem + (var(--text-s-max) - var(--text-s-min)) * ((100vw - (var(--vp-min) * 1rem)) / (var(--vp-max) - var(--vp-min))));
--text-m-fallback: calc(var(--text-m-min) * 1rem + (var(--text-m-max) - var(--text-m-min)) * ((100vw - (var(--vp-min) * 1rem)) / (var(--vp-max) - var(--vp-min))));
--text-l-fallback: calc(var(--text-l-min) * 1rem + (var(--text-l-max) - var(--text-l-min)) * ((100vw - (var(--vp-min) * 1rem)) / (var(--vp-max) - var(--vp-min))));
--text-xl-fallback: calc(var(--text-xl-min) * 1rem + (var(--text-xl-max) - var(--text-xl-min)) * ((100vw - (var(--vp-min) * 1rem)) / (var(--vp-max) - var(--vp-min))));
--text-xxl-fallback: calc(var(--text-xxl-min) * 1rem + (var(--text-xxl-max) - var(--text-xxl-min)) * ((100vw - (var(--vp-min) * 1rem)) / (var(--vp-max) - var(--vp-min))));
/***
USEFUL SPACING VARIABLES
These can be used for individul margin, padding, and gap needs.
***/
/* SPACING */
--space-m-min: var(--base-space-min);
--space-m-max: var(--base-space);
--space-xs-min: calc(var(--space-s-min) / var(--mob-space-scale));
--space-xs-max: calc(var(--space-s-max) / var(--space-scale));
--space-s-min: calc(var(--space-m-min) / var(--mob-space-scale));
--space-s-max: calc(var(--space-m-max) / var(--space-scale));
--space-l-min: calc(var(--space-m-min) * var(--mob-space-scale));
--space-l-max: calc(var(--space-m-max) * var(--space-scale));
--space-xl-min: calc(var(--space-l-min) * var(--mob-space-scale));
--space-xl-max: calc(var(--space-l-max) * var(--space-scale));
--space-xxl-min: calc(var(--space-xl-min) * var(--mob-space-scale));
--space-xxl-max: calc(var(--space-xl-max) * var(--space-scale));
/* SPACING CLAMPS */
--space-xs: clamp(var(--space-xs-min) * 1rem, calc(var(--space-xs-min) * 1rem + ((1vw - (var(--vp-min) / 100) * 1rem) * (100 * (var(--space-xs-max) - var(--space-xs-min)) / (var(--vp-max) - var(--vp-min))))), var(--space-xs-max) * 1rem);
--space-s: clamp(var(--space-s-min) * 1rem, calc(var(--space-s-min) * 1rem + ((1vw - (var(--vp-min) / 100) * 1rem) * (100 * (var(--space-s-max) - var(--space-l-min)) / (var(--vp-max) - var(--vp-min))))), var(--space-s-max) * 1rem);
--space-m: clamp(var(--space-m-min) * 1rem, calc(var(--space-m-min) * 1rem + ((1vw - (var(--vp-min) / 100) * 1rem) * (100 * (var(--space-m-max) - var(--space-m-min)) / (var(--vp-max) - var(--vp-min))))), var(--space-m-max) * 1rem);
--space-l: clamp(var(--space-l-min) * 1rem, calc(var(--space-l-min) * 1rem + ((1vw - (var(--vp-min) / 100) * 1rem) * (100 * (var(--space-l-max) - var(--space-l-min)) / (var(--vp-max) - var(--vp-min))))), var(--space-l-max) * 1rem);
--space-xl: clamp(var(--space-xl-min) * 1rem, calc(var(--space-xl-min) * 1rem + ((1vw - (var(--vp-min) / 100) * 1rem) * (100 * (var(--space-xl-max) - var(--space-xl-min)) / (var(--vp-max) - var(--vp-min))))), var(--space-xl-max) * 1rem);
--space-xxl: clamp(var(--space-xxl-min) * 1rem, calc(var(--space-xxl-min) * 1rem + ((1vw - (var(--vp-min) / 100) * 1rem) * (100 * (var(--space-xxl-max) - var(--space-xxl-min)) / (var(--vp-max) - var(--vp-min))))), var(--space-xxl-max) * 1rem);
--space-xs-fallback: calc(var(--space-xs-min) * 1rem + (var(--space-xs-max) - var(--space-xs-min)) * ((100vw - (var(--vp-min) * 1rem)) / (var(--vp-max) - var(--vp-min))));
--space-s-fallback: calc(var(--space-s-min) * 1rem + (var(--space-s-max) - var(--space-s-min)) * ((100vw - (var(--vp-min) * 1rem)) / (var(--vp-max) - var(--vp-min))));
--space-m-fallback: calc(var(--space-m-min) * 1rem + (var(--space-m-max) - var(--space-m-min)) * ((100vw - (var(--vp-min) * 1rem)) / (var(--vp-max) - var(--vp-min))));
--space-l-fallback: calc(var(--space-l-min) * 1rem + (var(--space-l-max) - var(--space-l-min)) * ((100vw - (var(--vp-min) * 1rem)) / (var(--vp-max) - var(--vp-min))));
--space-xl-fallback: calc(var(--space-xl-min) * 1rem + (var(--space-xl-max) - var(--space-xl-min)) * ((100vw - (var(--vp-min) * 1rem)) / (var(--vp-max) - var(--vp-min))));
--space-xxl-fallback: calc(var(--space-xxl-min) * 1rem + (var(--space-xxl-max) - var(--space-xxl-min)) * ((100vw - (var(--vp-min) * 1rem)) / (var(--vp-max) - var(--vp-min))));
/* SECTION SPACING */
--section-m-min: calc(var(--space-m-min) * var(--mob-space-adjust-section));
--section-m-max: calc(var(--space-m-max) * var(--space-adjust-section));
--section-xs-min: calc(var(--space-xs-min) * var(--mob-space-adjust-section));
--section-xs-max: calc(var(--space-xs-max) * var(--space-adjust-section));
--section-s-min: calc(var(--space-s-min) * var(--mob-space-adjust-section));
--section-s-max: calc(var(--space-s-max) * var(--space-adjust-section));
--section-l-min: calc(var(--space-l-min) * var(--mob-space-adjust-section));
--section-l-max: calc(var(--space-l-max) * var(--space-adjust-section));
--section-xl-min: calc(var(--space-xl-min) * var(--mob-space-adjust-section));
--section-xl-max: calc(var(--space-xl-max) * var(--space-adjust-section));
--section-xxl-min: calc(var(--space-xxl-min) * var(--mob-space-adjust-section));
--section-xxl-max: calc(var(--space-xxl-max) * var(--space-adjust-section));
/* SECTION CLAMPS */
--section-space-xs: clamp(calc(var(--section-xs-min) * 1rem), calc(var(--section-xs-min) * 1rem + ((1vw - (var(--vp-min) / 100) * 1rem) * (100 * (var(--section-xs-max) - var(--section-xs-min)) / (var(--vp-max) - var(--vp-min))))), calc(var(--section-xs-max) * 1rem));
--section-space-s: clamp(calc(var(--section-s-min) * 1rem), calc(var(--section-s-min) * 1rem + ((1vw - (var(--vp-min) / 100) * 1rem) * (100 * (var(--section-s-max) - var(--section-s-min)) / (var(--vp-max) - var(--vp-min))))), calc(var(--section-s-max) * 1rem));
--section-space-m: clamp(calc(var(--section-m-min) * 1rem), calc(var(--section-m-min) * 1rem + ((1vw - (var(--vp-min) / 100) * 1rem) * (100 * (var(--section-m-max) - var(--section-m-min)) / (var(--vp-max) - var(--vp-min))))), calc(var(--section-m-max) * 1rem));
--section-space-l: clamp(calc(var(--section-l-min) * 1rem), calc(var(--section-l-min) * 1rem + ((1vw - (var(--vp-min) / 100) * 1rem) * (100 * (var(--section-l-max) - var(--section-l-min)) / (var(--vp-max) - var(--vp-min))))), calc(var(--section-l-max) * 1rem));
--section-space-xl: clamp(calc(var(--section-xl-min) * 1rem), calc(var(--section-xl-min) * 1rem + ((1vw - (var(--vp-min) / 100) * 1rem) * (100 * (var(--section-xl-max) - var(--section-xl-min)) / (var(--vp-max) - var(--vp-min))))), calc(var(--section-xl-max) * 1rem));
--section-space-xxl: clamp(calc(var(--section-xxl-min) * 1rem), calc(var(--section-xxl-min) * 1rem + ((1vw - (var(--vp-min) / 100) * 1rem) * (100 * (var(--section-xxl-max) - var(--section-xxl-min)) / (var(--vp-max) - var(--vp-min))))), calc(var(--section-xxl-max) * 1rem));
--section-space-xs-fallback: calc(var(--section-xs-min) * 1rem + (var(--section-xs-max) - var(--section-xs-min)) * ((100vw - (var(--vp-min) * 1rem)) / (var(--vp-max) - var(--vp-min))));
--section-space-s-fallback: calc(var(--section-s-min) * 1rem + (var(--section-s-max) - var(--section-s-min)) * ((100vw - (var(--vp-min) * 1rem)) / (var(--vp-max) - var(--vp-min))));
--section-space-m-fallback: calc(var(--section-m-min) * 1rem + (var(--section-m-max) - var(--section-m-min)) * ((100vw - (var(--vp-min) * 1rem)) / (var(--vp-max) - var(--vp-min))));
--section-space-l-fallback: calc(var(--section-l-min) * 1rem + (var(--section-l-max) - var(--section-l-min)) * ((100vw - (var(--vp-min) * 1rem)) / (var(--vp-max) - var(--vp-min))));
--section-space-xl-fallback: calc(var(--section-xl-min) * 1rem + (var(--section-xl-max) - var(--section-xl-min)) * ((100vw - (var(--vp-min) * 1rem)) / (var(--vp-max) - var(--vp-min))));
--section-space-xxl-fallback: calc(var(--section-xxl-min) * 1rem + (var(--section-xxl-max) - var(--section-xxl-min)) * ((100vw - (var(--vp-min) * 1rem)) / (var(--vp-max) - var(--vp-min))));
--section-xs: var(--section-space-xs) var(--section-padding-x);
--section-s: var(--section-space-s) var(--section-padding-x);
--section-m: var(--section-space-m) var(--section-padding-x);
--section-l: var(--section-space-l) var(--section-padding-x);
--section-xl: var(--section-space-xl) var(--section-padding-x);
--section-xxl: var(--section-space-xxl) var(--section-padding-x);
/* RADIUS SCALE */
--radius-xs: calc(var(--radius-s) / var(--radius-scale));
--radius-s: calc(var(--base-radius) / var(--radius-scale));
--radius-m: var(--base-radius);
--radius-l: calc(var(--base-radius) * var(--radius-scale));
--radius-xl: calc(var(--radius-l) * var(--radius-scale));
--radius-xxl: calc(var(--radius-xl) * var(--radius-scale));
--radius-50: 50%;
/* WIDTH VARIABLES */
--width-xs: calc(var(--vp-max) * .1 * 1rem);
--width-s: calc(var(--vp-max) * .2 * 1rem);
--width-m: calc(var(--vp-max) * .4 * 1rem);
--width-l: calc(var(--vp-max) * .6 * 1rem);
--width-xl: calc(var(--vp-max) * .8 * 1rem);
--width-xxl: calc(var(--vp-max) * .9 * 1rem);
--width-vp-max: calc((var(--vp-max) - var(--base-space) * 2) * 1rem);
--width-50: calc((var(--vp-max) / 2) * 1rem);
/* COMPLETELY CUSTOM TYPOGRAPHY
Set your own static min and max values for each size.
NUMBERS ONLY, NO UNITS (rem/px/etc.).
Remove comments to go live.
*/
/*
--text-xs-min: value;
--text-xs-max: value;
--text-s-min: value;
--text-s-max: value;
--text-m-min: value;
--text-m-max: value;
--text-l-min: value;
--text-l-max: value;
--text-xl-min: value;
--text-xl-max: value;
--text-xxl-min: value;
--text-xxl-max: value;
*/
--text-s-min: 1.6;
--text-s-max: 1.8;
--text-m-min: 1.6;
--text-m-max: 2;
--text-l-min: 2;
--text-l-max: 2.5;
--text-xl-min: 2.5;
--text-xl-max: 3;
/***** END ROOT VARIABLES & CALCS *****/
}
/***
OXYGEN GLOBAL SIZE & SPACING REPLACEMENT
This area replaces most of the global size & spacing related areas in Oxygen.
***/
body {
font-size: var(--text-m-fallback);
font-size: var(--text-m);
--text-size-max: calc(var(--text-m-max) * 1rem); /* Used for fallbacks */
}
.ct-section-inner-wrap {
padding: var(--section-m-fallback);
padding: var(--section-m);
}
.oxy-header-container {
padding-left: var(--section-padding-x);
padding-right: var(--section-padding-x);
}
:-webkit-any(h1,h2,h3,h4,h5,h6) {
font-size: var(--text-size);
}
:-moz-any(h1,h2,h3,h4,h5,h6) {
font-size: var(--text-size);
}
:matches(h1,h2,h3,h4,h5,h6) {
font-size: var(--text-size);
}
:is(h1,h2,h3,h4,h5,h6),
[class*="text--"] {
font-size: var(--text-size);
color: var(--text-color);
}
:where([class*="text--"],h1,h2,h3,h4,h5,h6).text--larger {
font-size: calc(var(--text-size) * var(--text-multiplier));
}
h1 {
--text-size-fallback-pure: var(--text-xxl-fallback-pure);
--text-size-fallback: var(--text-xxl-fallback);
--text-size-max: calc(var(--text-xxl-max) * 1rem); /* Used for fallbacks */
--text-size: var(--text-xxl);
}
h2 {
--text-size-fallback-pure: var(--text-xl-fallback-pure);
--text-size-fallback: var(--text-xl-fallback);
--text-size-max: calc(var(--text-xl-max) * 1rem);
--text-size: var(--text-xl);
}
h3 {
--text-size-fallback-pure: var(--text-l-fallback-pure);
--text-size-fallback: var(--text-l-fallback);
--text-size-max: calc(var(--text-l-max) * 1rem);
--text-size: var(--text-l);
}
h4 {
--text-size-fallback-pure: var(--text-m-fallback-pure);
--text-size-fallback: var(--text-m-fallback);
--text-size-max: calc(var(--text-m-max) * 1rem);
--text-size: var(--text-m);
}
h5 {
--text-size-fallback-pure: var(--text-s-fallback-pure);
--text-size-fallback: var(--text-s-fallback);
--text-size-max: calc(var(--text-s-max) * 1rem);
--text-size: max(var(--text-s-stop), var(--text-s));
}
h6 {
--text-size-fallback-pure: var(--text-xs-fallback-pure);
--text-size-fallback: var(--text-xs-fallback);
--text-size-max: calc(var(--text-xs-max) * 1rem);
--text-size: max(var(--text-xs-stop), var(--text-xs));
}
/***
TEXT CLASSES
These are generated from the text size system.
***/
.text--xs {
--text-size-fallback-pure: var(--text-xs-fallback-pure);
--text-size-fallback: var(--text-xs-fallback);
--text-size-max: calc(var(--text-xs-max) * 1rem);
--text-size: max(var(--text-xs-stop), var(--text-xs));
}
.text--s {
--text-size-fallback-pure: var(--text-s-fallback-pure);
--text-size-fallback: var(--text-s-fallback);
--text-size-max: calc(var(--text-s-max) * 1rem);
--text-size: max(var(--text-s-stop), var(--text-s));
}
.text--m {
--text-size-fallback-pure: var(--text-m-fallback-pure);
--text-size-fallback: var(--text-m-fallback);
--text-size-max: calc(var(--text-m-max) * 1rem);
--text-size: var(--text-m);
}
.text--l {
--text-size-fallback-pure: var(--text-l-fallback-pure);
--text-size-fallback: var(--text-l-fallback);
--text-size-max: calc(var(--text-l-max) * 1rem);
--text-size: var(--text-l);
}
.text--xl {
--text-size-fallback-pure: var(--text-xl-fallback-pure);
--text-size-fallback: var(--text-xl-fallback);
--text-size-max: calc(var(--text-xl-max) * 1rem);
--text-size: var(--text-xl);
}
.text--xxl {
--text-size-fallback-pure: var(--text-xxl-fallback-pure);
--text-size-fallback: var(--text-xxl-fallback);
--text-size-max: calc(var(--text-xxl-max) * 1rem);
--text-size: var(--text-xxl);
}
.text--primary {
--text-color: var(--primary);
}
.text--primary-ultra-light {
--text-color: var(--primary-ultra-light);
}
.text--primary-light {
--text-color: var(--primary-light);
}
.text--primary-medium {
--text-color: var(--primary-medium);
}
.text--primary-dark {
--text-color: var(--primary-dark);
}
.text--primary-ultra-dark {
--text-color: var(--primary-ultra-dark);
}
.text--primary-comp {
--text-color: var(--primary-comp);
}
.text--secondary {
--text-color: var(--secondary);
}
.text--secondary-ultra-light {
--text-color: var(--secondary-ultra-light);
}
.text--secondary-light {
--text-color: var(--secondary-light);
}
.text--secondary-medium {
--text-color: var(--secondary-medium);
}
.text--secondary-dark {
--text-color: var(--secondary-dark);
}
.text--secondary-ultra-dark {
--text-color: var(--secondary-ultra-dark);
}
.text--secondary-comp {
--text-color: var(--secondary-comp);
}
.text--accent {
--text-color: var(--accent);
}
.text--accent-ultra-light {
--text-color: var(--accent-ultra-light);
}
.text--accent-light {
--text-color: var(--accent-light);
}
.text--accent-medium {
--text-color: var(--accent-medium);
}
.text--accent-dark {
--text-color: var(--accent-dark);
}
.text--accent-ultra-dark {
--text-color: var(--accent-ultra-dark);
}
.text--accent-comp {
--text-color: var(--accent-comp);
}
.text--base {
--text-color: var(--base);
}
.text--base-ultra-light {
--text-color: var(--base-ultra-light);
}
.text--base-light {
--text-color: var(--base-light);
}
.text--base-medium {
--text-color: var(--base-medium);
}
.text--base-dark {
--text-color: var(--base-dark);
}
.text--base-ultra-dark {
--text-color: var(--base-ultra-dark);
}
.text--base-comp {
--text-color: var(--base-comp);
}
.text--white {
--text-color: var(--shade-white);
}
.text--black {
--text-color: var(--shade-black);
}
.text--shade-ultra-light {
--text-color: var(--shade-ultra-light);
}
.text--shade-light {
--text-color: var(--shade-light);
}
.text--shade-medium {
--text-color: var(--shade-medium);
}
.text--shade-dark {
--text-color: var(--shade-dark);
}
.text--shade-ultra-dark {
--text-color: var(--shade-ultra-dark);
}
/***
LINK CLASSES
These apply colors to links within other elements.
***/
[class*="link--"] a {
color: var(--link-color);
}
[class*="link--"] a:hover {
color: var(--link-hover-color);
}
.link--primary {
--link-color: var(--primary);
--link-hover-color: var(--primary-hover);
}
.link--primary-ultra-light {
--link-color: var(--primary-ultra-light);
--link-hover-color: var(--primary-hover);
}
.link--primary-light {
--link-color: var(--primary-light);
--link-hover-color: var(--primary-hover);
}
.link--primary-medium {
--link-color: var(--primary-medium);
--link-hover-color: var(--primary-hover);
}
.link--primary-dark {
--link-color: var(--primary-dark);
--link-hover-color: var(--primary-hover);
}
.link--primary-ultra-dark {
--link-color: var(--primary-ultra-dark);
--link-hover-color: var(--primary-hover);
}
.link--primary-comp {
--link-color: var(--primary-comp);
--link-hover-color: var(--primary-hover);
}
.link--secondary {
--link-color: var(--secondary);
--link-hover-color: var(--secondary-hover);
}
.link--secondary-ultra-light {
--link-color: var(--secondary-ultra-light);
--link-hover-color: var(--secondary-hover);
}
.link--secondary-light {
--link-color: var(--secondary-light);
--link-hover-color: var(--secondary-hover);
}
.link--secondary-medium {
--link-color: var(--secondary-medium);
--link-hover-color: var(--secondary-hover);
}
.link--secondary-dark {
--link-color: var(--secondary-dark);
--link-hover-color: var(--secondary-hover);
}
.link--secondary-ultra-dark {
--link-color: var(--secondary-ultra-dark);
--link-hover-color: var(--secondary-hover);
}
.link--secondary-comp {
--link-color: var(--secondary-comp);
--link-hover-color: var(--secondary-hover);
}
.link--accent {
--link-color: var(--accent);
--link-hover-color: var(--accent-hover);
}
.link--accent-ultra-light {
--link-color: var(--accent-ultra-light);
--link-hover-color: var(--accent-hover);
}
.link--accent-light {
--link-color: var(--accent-light);
--link-hover-color: var(--accent-hover);
}
.link--accent-medium {
--link-color: var(--accent-medium);
--link-hover-color: var(--accent-hover);
}
.link--accent-dark {
--link-color: var(--accent-dark);
--link-hover-color: var(--accent-hover);
}
.link--accent-ultra-dark {
--link-color: var(--accent-ultra-dark);
--link-hover-color: var(--accent-hover);
}
.link--accent-comp {
--link-color: var(--accent-comp);
--link-hover-color: var(--accent-hover);
}
.link--base {
--link-color: var(--base);
--link-hover-color: var(--base-hover);
}
.link--base-ultra-light {
--link-color: var(--base-ultra-light);
--link-hover-color: var(--base-hover);
}
.link--base-light {
--link-color: var(--base-light);
--link-hover-color: var(--base-hover);
}
.link--base-medium {
--link-color: var(--base-medium);
--link-hover-color: var(--base-hover);
}
.link--base-dark {
--link-color: var(--base-dark);
--link-hover-color: var(--base-hover);
}
.link--base-ultra-dark {
--link-color: var(--base-ultra-dark);
--link-hover-color: var(--base-hover);
}
.link--base-comp {
--link-color: var(--base-comp);
--link-hover-color: var(--base-hover);
}
.link--white {
--link-color: var(--shade-white);
--link-hover-color: var(--primary-hover);
}
.link--black {
--link-color: var(--shade-black);
--link-hover-color: var(--primary-hover);
}
.link--shade-ultra-light {
--link-color: var(--shade-ultra-light);
--link-hover-color: var(--primary-hover);
}
.link--shade-light {
--link-color: var(--shade-light);
--link-hover-color: var(--primary-hover);
}
.link--shade-medium {
--link-color: var(--shade-medium);
--link-hover-color: var(--primary-hover);
}
.link--shade-dark {
--link-color: var(--shade-dark);
--link-hover-color: var(--primary-hover);
}
.link--shade-ultra-dark {
--link-color: var(--shade-ultra-dark);
--link-hover-color: var(--primary-hover);
}
/***
PADDING UTILITY CLASSES
These apply padding to sections and containers.
***/
.pad--xs {
--pad-fallback-pure: var(--space-xs-fallback-pure);
--pad-fallback: var(--space-xs-fallback);
--pad-max: var(--space-xs-max);
padding: var(--space-xs);
}
.pad--s {
--pad-fallback-pure: var(--space-s-fallback-pure);
--pad-fallback: var(--space-s-fallback);
--pad-max: var(--space-s-max);
padding: var(--space-s);
}
.pad--m {
--pad-fallback-pure: var(--space-m-fallback-pure);
--pad-fallback: var(--space-m-fallback);
--pad-max: var(--space-m-max);
padding: var(--space-m);
}
.pad--l {
--pad-fallback-pure: var(--space-l-fallback-pure);
--pad-fallback: var(--space-l-fallback);
--pad-max: var(--space-l-max);
padding: var(--space-l);
}
.pad--xl {
--pad-fallback-pure: var(--space-xl-fallback-pure);
--pad-fallback: var(--space-xl-fallback);
--pad-max: var(--space-xl-max);
padding: var(--space-xl);
}
.pad--xxl {
--pad-fallback-pure: var(--space-xxl-fallback-pure);
--pad-fallback: var(--space-xxl-fallback);
--pad-max: var(--space-xxl-max);
padding: var(--space-xxl);
}
.pad--none {
padding: 0;
}
.pad-section--xs .ct-section-inner-wrap {
--section-fallback-pure: var(--section-space-xs-fallback-pure);
--section-padding-fallback: var(--section-xs-fallback);
--padding-section-max: var(--section-xs-max);
padding: var(--section-xs);
}
.pad-section--s .ct-section-inner-wrap {
--section-fallback-pure: var(--section-space-s-fallback-pure);
--section-padding-fallback: var(--section-s-fallback);
--padding-section-max: var(--section-s-max);
padding: var(--section-s);
}
.pad-section--l .ct-section-inner-wrap {
--section-fallback-pure: var(--section-space-l-fallback-pure);
--section-padding-fallback: var(--section-l-fallback);
--padding-section-max: var(--section-l-max);
padding: var(--section-l);
}
.pad-section--xl .ct-section-inner-wrap {
--section-fallback-pure: var(--section-space-xl-fallback-pure);
--section-padding-fallback: var(--section-xl-fallback);
--padding-section-max: var(--section-xl-max);
padding: var(--section-xl);
}
.pad-section--xxl .ct-section-inner-wrap {
--section-fallback-pure: var(--section-space-xxl-fallback-pure);
--section-padding-fallback: var(--section-xxl-fallback);
--padding-section-max: var(--section-xxl-max);
padding: var(--section-xxl);
}
.pad-section--none .ct-section-inner-wrap {
padding: 0 var(--space-m);
}
/***
MARGIN UTILITY CLASSES
These apply margin to elements.
***/
.margin-top--xs {
margin-top: var(--space-xs);
}
.margin-top--s {
margin-top: var(--space-s);
}
.margin-top--m {
margin-top: var(--space-m);
}
.margin-top--l {
margin-top: var(--space-l);
}
.margin-top--xl {
margin-top: var(--space-xl);
}
.margin-top--xxl {
margin-top: var(--space-xxl);
}
.margin-bottom--xs {
margin-bottom: var(--space-xs);
}
.margin-bottom--s {
margin-bottom: var(--space-s);
}
.margin-bottom--m {
margin-bottom: var(--space-m);
}
.margin-bottom--l {
margin-bottom: var(--space-l);
}
.margin-bottom--xl {
margin-bottom: var(--space-xl);
}
.margin-bottom--xxl {
margin-bottom: var(--space-xxl);
}
.margin-left--xs {
margin-left: var(--space-xs);
}
.margin-left--s {
margin-left: var(--space-s);
}
.margin-left--m {
margin-left: var(--space-m);
}
.margin-left--l {
margin-left: var(--space-l);
}
.margin-left--xl {
margin-left: var(--space-xl);
}
.margin-left--xxl {
margin-left: var(--space-xxl);
}
.margin-right--xs {
margin-right: var(--space-xs);
}
.margin-right--s {
margin-right: var(--space-s);
}
.margin-right--m {
margin-right: var(--space-m);
}
.margin-right--l {
margin-right: var(--space-l);
}
.margin-right--xl {
margin-right: var(--space-xl);
}
.margin-right--xxl {
margin-right: var(--space-xxl);
}
/*
OWL SPACING UTILITY CLASSES
These apply equal margin to the top of all elements with an adjacent sibling.
Use these to automatically space everything in a section or container without creating extra top or bottom spacing.
*/
.ct-section[class*="owl--"] .ct-section-inner-wrap > * + *,
[class*="owl--"]:not(.ct-section) > * + * {
margin-top: var(--owl-space);
}
.owl--xs.ct-section > .ct-section-inner-wrap > * + *,
.owl--xs:not(.ct-section) > * + * {
--owl-space-fallback-pure: var(--space-xs-fallback-pure);
--owl-space-fallback: var(--space-xs-fallback);
--owl-space: var(--space-xs);
}
.owl--s.ct-section > .ct-section-inner-wrap > * + *,
.owl--s:not(.ct-section) > * + * {
--owl-space-fallback-pure: var(--space-s-fallback-pure);
--owl-space-fallback: var(--space-s-fallback);
--owl-space: var(--space-s);
}
.owl--m.ct-section > .ct-section-inner-wrap > * + *,
.owl--m:not(.ct-section) > * + * {
--owl-space-fallback-pure: var(--space-m-fallback-pure);
--owl-space-fallback: var(--space-m-fallback);
--owl-space: var(--space-m);
}
.owl--l.ct-section > .ct-section-inner-wrap > * + *,
.owl--l:not(.ct-section) > * + * {
--owl-space-fallback-pure: var(--space-l-fallback-pure);
--owl-space-fallback: var(--space-l-fallback);
--owl-space: var(--space-l);
}
.owl--xl.ct-section > .ct-section-inner-wrap > * + *,
.owl--xl:not(.ct-section) > * + * {
--owl-space-fallback-pure: var(--space-xl-fallback-pure);
--owl-space-fallback: var(--space-xl-fallback);
--owl-space: var(--space-xl);
}
.owl--xxl.ct-section > .ct-section-inner-wrap > * + *,
.owl--xxl:not(.ct-section) > * + * {
--owl-space-fallback-pure: var(--space-xxl-fallback-pure);
--owl-space-fallback: var(--space-xxl-fallback);
--owl-space: var(--space-xxl);
}
/*
CARD UTILITY CLASSES
Default cards that pad and space content automatically.
*/
.card--xs {
padding: var(--space-xs);
}
.card--s {
padding: var(--space-s);
}
.card--m {
padding: var(--space-m);
}
.card--l {
padding: var(--space-l);
}
.card--xl {
padding: var(--space-xl);
}
.card--xxl {
padding: var(--space-xxl);
}
.owl-card--xs {
padding: var(--space-xs);
}
.owl-card--xs > * + * {
margin-top: var(--space-xs);
}
.owl-card--s {
padding: var(--space-s);
}
.owl-card--s > * + * {
margin-top: var(--space-s);
}
.owl-card--m {
padding: var(--space-m);
}
.owl-card--m > * + * {
margin-top: var(--space-m);
}
.owl-card--l {
padding: var(--space-l);
}
.owl-card--l > * + * {
margin-top: var(--space-l);
}
/***
BACKGROUND CLASSES
Quickly apply brand colors to the background.
***/
[class*="bg--"] {
background-color: var(--bg-color);
}
.bg--primary {
--bg-color: var(--primary);
}
.bg--primary-hover {
--bg-color: var(--primary-hover);
}
.bg--primary-ultra-light {
--bg-color: var(--primary-ultra-light);
}
.bg--primary-light {
--bg-color: var(--primary-light);
}
.bg--primary-medium {
--bg-color: var(--primary-medium);
}
.bg--primary-dark {
--bg-color: var(--primary-dark);
}
.bg--primary-ultra-dark {
--bg-color: var(--primary-ultra-dark);
}
.bg--primary-ultra-dark-trans-90 {
--bg-color: var(--primary-ultra-dark-trans-90);
}
.bg--primary-ultra-dark-trans-80 {
--bg-color: var(--primary-ultra-dark-trans-80);
}
.bg--primary-ultra-dark-trans-60 {
--bg-color: var(--primary-ultra-dark-trans-60);
}
.bg--primary-ultra-dark-trans-40 {
--bg-color: var(--primary-ultra-dark-trans-40);
}
.bg--primary-ultra-dark-trans-20 {
--bg-color: var(--primary-ultra-dark-trans-20);
}
.bg--primary-ultra-dark-trans-10 {
--bg-color: var(--primary-ultra-dark-trans-10);
}
.bg--primary-trans-90 {
--bg-color: var(--primary-trans-90);
}
.bg--primary-trans-80 {
--bg-color: var(--primary-trans-80);
}
.bg--primary-trans-60 {
--bg-color: var(--primary-trans-60);
}
.bg--primary-trans-40 {
--bg-color: var(--primary-trans-40);
}
.bg--primary-trans-20 {
--bg-color: var(--primary-trans-20);
}
.bg--primary-trans-10 {
--bg-color: var(--primary-trans-10);
}
.bg--primary-comp {
--bg-color: var(--primary-comp);
}
.bg--secondary {
--bg-color: var(--secondary);
}
.bg--secondary-hover {
--bg-color: var(--secondary-hover);
}
.bg--secondary-ultra-light {
--bg-color: var(--secondary-ultra-light);
}
.bg--secondary-light {
--bg-color: var(--secondary-light);
}
.bg--secondary-medium {
--bg-color: var(--secondary-medium);
}
.bg--secondary-dark {
--bg-color: var(--secondary-dark);
}
.bg--secondary-ultra-dark {
--bg-color: var(--secondary-ultra-dark);
}
.bg--secondary-ultra-dark-trans-90 {
--bg-color: var(--secondary-ultra-dark-trans-90);
}
.bg--secondary-ultra-dark-trans-80 {
--bg-color: var(--secondary-ultra-dark-trans-80);
}
.bg--secondary-ultra-dark-trans-60 {
--bg-color: var(--secondary-ultra-dark-trans-60);
}
.bg--secondary-ultra-dark-trans-40 {
--bg-color: var(--secondary-ultra-dark-trans-40);
}
.bg--secondary-ultra-dark-trans-20 {
--bg-color: var(--secondary-ultra-dark-trans-20);
}
.bg--secondary-ultra-dark-trans-10 {
--bg-color: var(--secondary-ultra-dark-trans-10);
}
.bg--secondary-trans-90 {
--bg-color: var(--secondary-trans-90);
}
.bg--secondary-trans-80 {
--bg-color: var(--secondary-trans-80);
}
.bg--secondary-trans-60 {
--bg-color: var(--secondary-trans-60);
}
.bg--secondary-trans-40 {
--bg-color: var(--secondary-trans-40);
}
.bg--secondary-trans-20 {
--bg-color: var(--secondary-trans-20);
}
.bg--secondary-trans-10 {
--bg-color: var(--secondary-trans-10);
}
.bg--secondary-comp {
--bg-color: var(--secondary-comp);
}
.bg--accent {
--bg-color: var(--accent);
}
.bg--accent-hover {
--bg-color: var(--accent-hover);
}
.bg--accent-ultra-light {
--bg-color: var(--accent-ultra-light);
}
.bg--accent-light {
--bg-color: var(--accent-light);
}
.bg--accent-medium {
--bg-color: var(--accent-medium);
}
.bg--accent-dark {
--bg-color: var(--accent-dark);
}
.bg--accent-ultra-dark {
--bg-color: var(--accent-ultra-dark);
}
.bg--accent-ultra-dark-trans-90 {
--bg-color: var(--accent-ultra-dark-trans-90);
}
.bg--accent-ultra-dark-trans-80 {
--bg-color: var(--accent-ultra-dark-trans-80);
}
.bg--accent-ultra-dark-trans-60 {
--bg-color: var(--accent-ultra-dark-trans-60);
}
.bg--accent-ultra-dark-trans-40 {
--bg-color: var(--accent-ultra-dark-trans-40);
}
.bg--accent-ultra-dark-trans-20 {
--bg-color: var(--accent-ultra-dark-trans-20);
}
.bg--accent-ultra-dark-trans-10 {
--bg-color: var(--accent-ultra-dark-trans-10);
}
.bg--accent-trans-90 {
--bg-color: var(--accent-trans-90);
}
.bg--accent-trans-80 {
--bg-color: var(--accent-trans-80);
}
.bg--accent-trans-60 {
--bg-color: var(--accent-trans-60);
}
.bg--accent-trans-40 {
--bg-color: var(--accent-trans-40);
}
.bg--accent-trans-20 {
--bg-color: var(--accent-trans-20);
}
.bg--accent-trans-10 {
--bg-color: var(--accent-trans-10);
}
.bg--accent-comp {
--bg-color: var(--accent-comp);
}
.bg--base {
--bg-color: var(--base);
}
.bg--base-hover {
--bg-color: var(--base-hover);
}
.bg--base-ultra-light {
--bg-color: var(--base-ultra-light);
}
.bg--base-light {
--bg-color: var(--base-light);
}
.bg--base-medium {
--bg-color: var(--base-medium);
}
.bg--base-dark {
--bg-color: var(--base-dark);
}
.bg--base-ultra-dark {
--bg-color: var(--base-ultra-dark);
}
.bg--base-ultra-dark-trans-90 {
--bg-color: var(--base-ultra-dark-trans-90);
}
.bg--base-ultra-dark-trans-80 {
--bg-color: var(--base-ultra-dark-trans-80);
}
.bg--base-ultra-dark-trans-60 {
--bg-color: var(--base-ultra-dark-trans-60);
}
.bg--base-ultra-dark-trans-40 {
--bg-color: var(--base-ultra-dark-trans-40);
}
.bg--base-ultra-dark-trans-20 {
--bg-color: var(--base-ultra-dark-trans-20);
}
.bg--base-ultra-dark-trans-10 {
--bg-color: var(--base-ultra-dark-trans-10);
}
.bg--base-trans-90 {
--bg-color: var(--base-trans-90);
}
.bg--base-trans-80 {
--bg-color: var(--base-trans-80);
}
.bg--base-trans-60 {
--bg-color: var(--base-trans-60);
}
.bg--base-trans-40 {
--bg-color: var(--base-trans-40);
}
.bg--base-trans-20 {
--bg-color: var(--base-trans-20);
}
.bg--base-trans-10 {
--bg-color: var(--base-trans-10);
}
.bg--base-comp {
--bg-color: var(--base-comp);
}
.bg--black {
--bg-color: var(--shade-black);
}
.bg--white {
--bg-color: var(--shade-white);
}
.bg--shade-ultra-light {
--bg-color: var(--shade-ultra-light);
}
.bg--shade-light {
--bg-color: var(--shade-light);
}
.bg--shade-medium {
--bg-color: var(--shade-medium);
}
.bg--shade-dark {
--bg-color: var(--shade-dark);
}
.bg--shade-ultra-dark {
--bg-color: var(--shade-ultra-dark);
}
.bg--shade-ultra-dark-trans-90 {
--bg-color: var(--shade-ultra-dark-trans-90);
}
.bg--shade-ultra-dark-trans-80 {
--bg-color: var(--shade-ultra-dark-trans-80);
}
.bg--shade-ultra-dark-trans-60 {
--bg-color: var(--shade-ultra-dark-trans-60);
}
.bg--shade-ultra-dark-trans-40 {
--bg-color: var(--shade-ultra-dark-trans-40);
}
.bg--shade-ultra-dark-trans-20 {
--bg-color: var(--shade-ultra-dark-trans-20);
}
.bg--shade-ultra-dark-trans-10 {
--bg-color: var(--shade-ultra-dark-trans-10);
}
.bg--black-trans-90 {
--bg-color: var(--black-trans-90);
}
.bg--black-trans-80 {
--bg-color: var(--black-trans-80);
}
.bg--black-trans-60 {
--bg-color: var(--black-trans-60);
}
.bg--black-trans-40 {
--bg-color: var(--black-trans-40);
}
.bg--black-trans-20 {
--bg-color: var(--black-trans-20);
}
.bg--black-trans-10 {
--bg-color: var(--black-trans-10);
}
/***
OVERLAY CLASSES
Quickly apply brand color overlays.
***/
[class*="overlay--"] {
position: relative;
z-index: 0;
}
[class*="overlay--"]:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
}
.overlay--primary-trans-90::before {
background: var(--primary-trans-90);
}
.overlay--primary-trans-80::before {
background: var(--primary-trans-80);
}
.overlay--primary-trans-60::before {
background: var(--primary-trans-60);
}
.overlay--primary-trans-40::before {
background: var(--primary-trans-40);
}
.overlay--primary-trans-20::before {
background: var(--primary-trans-20);
}
.overlay--primary-trans-10::before {
background: var(--primary-trans-10);
}
.overlay--primary-ultra-dark-trans-90::before {
background: var(--primary-ultra-dark-trans-90);
}
.overlay--primary-ultra-dark-trans-80::before {
background: var(--primary-ultra-dark-trans-80);
}
.overlay--primary-ultra-dark-trans-60::before {
background: var(--primary-ultra-dark-trans-60);
}
.overlay--primary-ultra-dark-trans-40::before {
background: var(--primary-ultra-dark-trans-40);
}
.overlay--primary-ultra-dark-trans-20::before {
background: var(--primary-ultra-dark-trans-20);
}
.overlay--primary-ultra-dark-trans-10::before {
background: var(--primary-ultra-dark-trans-10);
}
.overlay--secondary-trans-90::before {
background: var(--secondary-trans-90);
}
.overlay--secondary-trans-80::before {
background: var(--secondary-trans-80);
}
.overlay--secondary-trans-60::before {
background: var(--secondary-trans-60);
}
.overlay--secondary-trans-40::before {
background: var(--secondary-trans-40);
}
.overlay--secondary-trans-20::before {
background: var(--secondary-trans-20);
}
.overlay--secondary-trans-10::before {
background: var(--secondary-trans-10);
}
.overlay--secondary-ultra-dark-trans-90::before {
background: var(--secondary-ultra-dark-trans-90);
}
.overlay--secondary-ultra-dark-trans-80::before {
background: var(--secondary-ultra-dark-trans-80);
}
.overlay--secondary-ultra-dark-trans-60::before {
background: var(--secondary-ultra-dark-trans-60);
}
.overlay--secondary-ultra-dark-trans-40::before {
background: var(--secondary-ultra-dark-trans-40);
}
.overlay--secondary-ultra-dark-trans-20::before {
background: var(--secondary-ultra-dark-trans-20);
}
.overlay--secondary-ultra-dark-trans-10::before {
background: var(--secondary-ultra-dark-trans-10);
}
.overlay--accent-trans-90::before {
background: var(--accent-trans-90);
}
.overlay--accent-trans-80::before {
background: var(--accent-trans-80);
}
.overlay--accent-trans-60::before {
background: var(--accent-trans-60);
}
.overlay--accent-trans-40::before {
background: var(--accent-trans-40);
}
.overlay--accent-trans-20::before {
background: var(--accent-trans-20);
}
.overlay--accent-trans-10::before {
background: var(--accent-trans-10);
}
.overlay--accent-ultra-dark-trans-90::before {
background: var(--accent-ultra-dark-trans-90);
}
.overlay--accent-ultra-dark-trans-80::before {
background: var(--accent-ultra-dark-trans-80);
}
.overlay--accent-ultra-dark-trans-60::before {
background: var(--accent-ultra-dark-trans-60);
}
.overlay--accent-ultra-dark-trans-40::before {
background: var(--accent-ultra-dark-trans-40);
}
.overlay--accent-ultra-dark-trans-20::before {
background: var(--accent-ultra-dark-trans-20);
}
.overlay--accent-ultra-dark-trans-10::before {
background: var(--accent-ultra-dark-trans-10);
}
.overlay--base-trans-90::before {
background: var(--base-trans-90);
}
.overlay--base-trans-80::before {
background: var(--base-trans-80);
}
.overlay--base-trans-60::before {
background: var(--base-trans-60);
}
.overlay--base-trans-40::before {
background: var(--base-trans-40);
}
.overlay--base-trans-20::before {
background: var(--base-trans-20);
}
.overlay--base-trans-10::before {
background: var(--base-trans-10);
}
.overlay--base-ultra-dark-trans-90::before {
background: var(--base-ultra-dark-trans-90);
}
.overlay--base-ultra-dark-trans-80::before {
background: var(--base-ultra-dark-trans-80);
}
.overlay--base-ultra-dark-trans-60::before {
background: var(--base-ultra-dark-trans-60);
}
.overlay--base-ultra-dark-trans-40::before {
background: var(--base-ultra-dark-trans-40);
}
.overlay--base-ultra-dark-trans-20::before {
background: var(--base-ultra-dark-trans-20);
}
.overlay--base-ultra-dark-trans-10::before {
background: var(--base-ultra-dark-trans-10);
}
.overlay--shade-ultra-dark-trans-90::before {
background: var(--shade-ultra-dark-trans-90);
}
.overlay--shade-ultra-dark-trans-80::before {
background: var(--shade-ultra-dark-trans-80);
}
.overlay--shade-ultra-dark-trans-60::before {
background: var(--shade-ultra-dark-trans-60);
}
.overlay--shade-ultra-dark-trans-40::before {
background: var(--shade-ultra-dark-trans-40);
}
.overlay--shade-ultra-dark-trans-20::before {
background: var(--shade-ultra-dark-trans-20);
}
.overlay--shade-ultra-dark-trans-10::before {
background: var(--shade-ultra-dark-trans-10);
}
.overlay--black-trans-90::before {
background: var(--black-trans-90);
}
.overlay--black-trans-80::before {
background: var(--black-trans-80);
}
.overlay--black-trans-60::before {
background: var(--black-trans-60);
}
.overlay--black-trans-40::before {
background: var(--black-trans-40);
}
.overlay--black-trans-20::before {
background: var(--black-trans-20);
}
.overlay--black-trans-10::before {
background: var(--black-trans-10);
}
/***
BOX-SHADOW CLASSES
Quickly apply multi-layered box shadows.
***/
[class*="box-shadow--"] {
box-shadow: var(--box-shadow);
}
.box-shadow--m {
--box-shadow:
0 4px 4px -10px hsla(var(--base-h), var(--base-s), var(--base-l), 0.04),
0 13px 13px -10px hsla(var(--base-h), var(--base-s), var(--base-l), 0.06),
0 40px 60px -10px hsla(var(--base-h), var(--base-s), var(--base-l), 0.08)
}
.box-shadow--l {
--box-shadow:
0 2.7px 3.6px -5px hsla(var(--base-h), var(--base-s), var(--base-l), .04),
0 7.5px 10px -5px hsla(var(--base-h), var(--base-s), var(--base-l), .06),
0 18px 24.1px -5px hsla(var(--base-h), var(--base-s), var(--base-l), 0.08),
0 60px 80px -5px hsla(var(--base-h), var(--base-s), var(--base-l), 0.1)
}
.box-shadow--xl {
--box-shadow:
0 2.2px 2.8px -5px hsla(var(--base-h), var(--base-s), var(--base-l), 0.01),
0 5.3px 6.7px -5px hsla(var(--base-h), var(--base-s), var(--base-l), 0.02),
0 10px 12.5px -5px hsla(var(--base-h), var(--base-s), var(--base-l), 0.04),
0 17.9px 22.3px -5px hsla(var(--base-h), var(--base-s), var(--base-l), 0.06),
0 33.4px 41.8px -5px hsla(var(--base-h), var(--base-s), var(--base-l), 0.08),
0 80px 100px -5px hsla(var(--base-h), var(--base-s), var(--base-l), 0.1)
}
/* BREAKOUT UTILITY CLASSES
Horizontally break any element out of its parent container.
*/
@media (min-width: 1365px) {
.breakout--s {
width: 60vw;
max-width: 60vw;
margin: 0 calc(-30vw + 50%);
}
.breakout--m {
width: 70vw;
max-width: 70vw;
margin: 0 calc(-35vw + 50%);
}
.breakout--l {
width: 80vw;
max-width: 80vw;
margin: 0 calc(-40vw + 50%);
}
.breakout--xl {
width: 90vw;
max-width: 90vw;
margin: 0 calc(-45vw + 50%);
}
}
.breakout--full {
width: 100vw !important;
max-width: 100vw !important;
margin-left: calc(-50vw + 50%) !important;
}
@media (max-width: 1279px) {
[class*="breakout--"] {
width: 100%;
max-width: 100%;
margin: 0;
}
}
/* STICKY UTILITY CLASSES */
.sticky {
position: sticky;
top: 0;
}
.sticky-top--s {
top: 2.5%;
}
.sticky-top--m {
top: 5%;
}
.sticky-top--l {
top: 10%;
}
/*
MAX WIDTH UTILITY CLASSES
Change the max-width of any element. Values are generated from base viewport sizes so they adapt to viewport defaults.
*/
[class*="width--"]:not([class*="breakout--"]) {
width: 100%;
max-width: var(--width);
}
.width--xs {
--width: var(--width-xs);
}
.width--s {
--width: var(--width-s);
}
.width--m {
--width: var(--width-m);
}
.width--l {
--width: var(--width-l);
}
.width--xl {
--width: var(--width-xl);
}
.width--xxl {
--width: var(--width-xxl);
}
.width--vp-max {
--width: var(--width-vp-max);
margin-left: auto;
margin-right: auto;
}
.width--50 {
--width: var(--width-50);
}
.width--full {
--width: 100%;
}
/* HEIGHT UTILITY CLASSES */
.ct-section[class*="height--"] .ct-section-inner-wrap {
min-height: var(--min-height);
max-height: var(--max-height);
}
[class*="height--"]:not(.ct-section) {
min-height: var(--min-height);
max-height: var(--max-height);
}
.height--30 {
--min-height: 30vh;
}
.height--40 {
--min-height: 40vh;
}
.height--50 {
--min-height: 50vh;
}
.height--60 {
--min-height: 60vh;
}
.height--70 {
--min-height: 70vh;
}
.height--80 {
--min-height: 80vh;
}
.height--90 {
--min-height: 90vh;
}
.height--full {
--min-height: 100vh;
}
.max-height--30 {
--max-height: 30vh;
}
.max-height--40 {
--max-height: 40vh;
}
.max-height--50 {
--max-height: 50vh;
}
.max-height--60 {
--max-height: 60vh;
}
.max-height--70 {
--max-height: 70vh;
}
.max-height--80 {
--max-height: 80vh;
}
.max-height--90 {
--max-height: 90vh;
}
/***
OBJECT-FIT UTILITY CLASSES
Use these classes when images require a set width and height.
They prevent image stretching and allow control over which area of the image is shown.
***/
.object-fit--cover {
object-fit: cover;
}
.object-fit--contain {
object-fit: contain;
}
.object-fit--top-left {
object-position: 10% 90%;
}
.object-fit--top-center {
object-position: 50% 10%;
}
.object-fit--top-right {
object-position: 90% 10%;
}
.object-fit--center-left {
object-position: 10% 50%;
}
.object-fit--center-right {
object-position: 90% 50%;
}
.object-fit--bottom-left {
object-position: 10% 10%;
}
.object-fit--bottom-center {
object-position: 50% 90%;
}
.object-fit--bottom-right {
object-position: 90% 90%;
}
/***
BUTTON UTILITY CLASSES
These set background color, hover color, text size, and default padding.
***/
:-webkit-any(
.btn--xs,
.btn--s,
.btn--m,
.btn--l,
.btn--xl,
.btn--xxl,
.btn--primary,
.btn--secondary,
.btn--accent,
.btn--base,
.btn--white,
.btn--black) {
background: var(--btn-bg, var(--btn-primary-bg));
border-width: var(--btn-border-size);
border-color: var(--btn-border-color, var(--btn-primary-border-color));
border-radius: var(--btn-radius);
line-height: 1.2;
padding: var(--btn-pad-y) var(--btn-pad-x);
font-size: var(--btn-text-size, var(--text-m));
color: var(--btn-text-color, var(--btn-primary-text));
}
:-moz-any(
.btn--xs,
.btn--s,
.btn--m,
.btn--l,
.btn--xl,
.btn--xxl,
.btn--primary,
.btn--secondary,
.btn--accent,
.btn--base,
.btn--white,
.btn--black) {
background: var(--btn-bg, var(--btn-primary-bg));
border-width: var(--btn-border-size);
border-color: var(--btn-border-color, var(--btn-primary-border-color));
border-radius: var(--btn-radius);
line-height: 1.2;
padding: var(--btn-pad-y) var(--btn-pad-x);
font-size: var(--btn-text-size, var(--text-m));
color: var(--btn-text-color, var(--btn-primary-text));
}
:matches(
.btn--xs,
.btn--s,
.btn--m,
.btn--l,
.btn--xl,
.btn--xxl,
.btn--primary,
.btn--secondary,
.btn--accent,
.btn--base,
.btn--white,
.btn--black) {
background: var(--btn-bg, var(--btn-primary-bg));
border-width: var(--btn-border-size);
border-color: var(--btn-border-color, var(--btn-primary-border-color));
border-radius: var(--btn-radius);
line-height: 1.2;
padding: var(--btn-pad-y) var(--btn-pad-x);
font-size: var(--btn-text-size, var(--text-m));
color: var(--btn-text-color, var(--btn-primary-text));
}
:is(
.btn--xs,
.btn--s,
.btn--m,
.btn--l,
.btn--xl,
.btn--xxl,
.btn--primary,
.btn--secondary,
.btn--accent,
.btn--base,
.btn--white,
.btn--black) {
background: var(--btn-bg, var(--btn-primary-bg));
border-width: var(--btn-border-size);
border-color: var(--btn-border-color, var(--btn-primary-border-color));
border-radius: var(--btn-radius);
line-height: 1.2;
padding: var(--btn-pad-y) var(--btn-pad-x);
font-size: var(--btn-text-size, var(--text-m));
color: var(--btn-text-color, var(--btn-primary-text));
}
:-webkit-any(
.btn--xs,
.btn--s,
.btn--m,
.btn--l,
.btn--xl,
.btn--xxl,
.btn--primary,
.btn--secondary,
.btn--accent,
.btn--base,
.btn--white,
.btn--black):hover {
background: var(--btn-hover, var(--btn-primary-hover));
border-color: var(--btn-hover, var(--btn-primary-hover-border-color));
color: var(--btn-hover-text, var(--btn-primary-hover-text));
}
:-moz-any(
.btn--xs,
.btn--s,
.btn--m,
.btn--l,
.btn--xl,
.btn--xxl,
.btn--primary,
.btn--secondary,
.btn--accent,
.btn--base,
.btn--white,
.btn--black):hover {
background: var(--btn-hover, var(--btn-primary-hover));
border-color: var(--btn-hover, var(--btn-primary-hover-border-color));
color: var(--btn-hover-text, var(--btn-primary-hover-text));
}
:matches(
.btn--xs,
.btn--s,
.btn--m,
.btn--l,
.btn--xl,
.btn--xxl,
.btn--primary,
.btn--secondary,
.btn--accent,
.btn--base,
.btn--white,
.btn--black):hover {
background: var(--btn-hover, var(--btn-primary-hover));
border-color: var(--btn-hover, var(--btn-primary-hover-border-color));
color: var(--btn-hover-text, var(--btn-primary-hover-text));
}
:is(
.btn--xs,
.btn--s,
.btn--m,
.btn--l,
.btn--xl,
.btn--xxl,
.btn--primary,
.btn--secondary,
.btn--accent,
.btn--base,
.btn--white,
.btn--black):hover {
background: var(--btn-hover, var(--btn-primary-hover));
border-color: var(--btn-hover, var(--btn-primary-hover-border-color));
color: var(--btn-hover-text, var(--btn-primary-hover-text));
}
.btn--outline {
background: none;
color: var(--btn-outline-text, var(--primary-outline-btn-text));
border-width: var(--btn-border-size);
border-color: var(--btn-bg, var(--btn-primary-bg));
line-height: 1.2;
padding: var(--btn-pad-y) var(--btn-pad-x);
}
.btn--outline:hover {
background: var(--btn-hover, var(--btn-primary-hover));
color: var(--btn-outline-hover-text, var(--btn-primary-hover-text));
border-color: var(--btn-hover, var(--btn-primary-bg));
}
:-webkit-any(
.btn--primary,
.btn--secondary,
.btn--accent,
.btn--base,
.btn--white,
.btn--black).btn--outline {
--btn-text-color: var(--btn-outline-text);
--btn-border-color: var(--btn-bg);
--btn-border-size: var(--outline-btn-border-size);
}
:-moz-any(
.btn--primary,
.btn--secondary,
.btn--accent,
.btn--base,
.btn--white,
.btn--black).btn--outline {
--btn-text-color: var(--btn-outline-text);
--btn-border-color: var(--btn-bg);
--btn-border-size: var(--outline-btn-border-size);
}
:matches(
.btn--primary,
.btn--secondary,
.btn--accent,
.btn--base,
.btn--white,
.btn--black).btn--outline {
--btn-text-color: var(--btn-outline-text);
--btn-border-color: var(--btn-bg);
--btn-border-size: var(--outline-btn-border-size);
}
:is(
.btn--primary,
.btn--secondary,
.btn--accent,
.btn--base,
.btn--white,
.btn--black).btn--outline {
--btn-text-color: var(--btn-outline-text);
--btn-border-color: var(--btn-bg);
--btn-border-size: var(--outline-btn-border-size);
}
:-webkit-any(
.btn--primary,
.btn--secondary,
.btn--accent,
.btn--base,
.btn--white,
.btn--black).btn--outline:hover {
--btn-bg: var(--btn-hover);
--btn-text-color: var(--btn-outline-hover-text);
--btn-border-color: var(--btn-hover);
--btn-outline-hover-text: var(--primary-outline-hover-text);
}
:-moz-any(
.btn--primary,
.btn--secondary,
.btn--accent,
.btn--base,
.btn--white,
.btn--black).btn--outline:hover {
--btn-bg: var(--btn-hover);
--btn-text-color: var(--btn-outline-hover-text);
--btn-border-color: var(--btn-hover);
--btn-outline-hover-text: var(--primary-outline-hover-text);
}
:matches(
.btn--primary,
.btn--secondary,
.btn--accent,
.btn--base,
.btn--white,
.btn--black).btn--outline:hover {
--btn-bg: var(--btn-hover);
--btn-text-color: var(--btn-outline-hover-text);
--btn-border-color: var(--btn-hover);
--btn-outline-hover-text: var(--primary-outline-hover-text);
}
:is(
.btn--primary,
.btn--secondary,
.btn--accent,
.btn--base,
.btn--white,
.btn--black).btn--outline:hover {
--btn-bg: var(--btn-hover);
--btn-text-color: var(--btn-outline-hover-text);
--btn-border-color: var(--btn-hover);
--btn-outline-hover-text: var(--primary-outline-hover-text);
}
:-webkit-any(
.btn--xs,
.btn--s,
.btn--m,
.btn--l,
.btn--xl,
.btn--xxl) {
font-size: var(--btn-text-size);
}
:-moz-any(
.btn--xs,
.btn--s,
.btn--m,
.btn--l,
.btn--xl,
.btn--xxl) {
font-size: var(--btn-text-size);
}
:matches(
.btn--xs,
.btn--s,
.btn--m,
.btn--l,
.btn--xl,
.btn--xxl) {
font-size: var(--btn-text-size);
}
:is(
.btn--xs,
.btn--s,
.btn--m,
.btn--l,
.btn--xl,
.btn--xxl) {
font-size: var(--btn-text-size);
}
.btn--primary {
--btn-bg: var(--btn-primary-bg);
--btn-text-color: var(--btn-primary-text);
--btn-hover: var(--btn-primary-hover);
--btn-hover-text: var(--btn-primary-hover-text);
--btn-border-color: var(--btn-primary-border-color);
--btn-outline-text: var(--primary-outline-btn-text);
--btn-outline-hover-text: var(--primary-outline-hover-text);
}
.btn--secondary {
--btn-bg: var(--btn-secondary-bg);
--btn-text-color: var(--btn-secondary-text);
--btn-hover: var(--btn-secondary-hover);
--btn-hover-text: var(--btn-secondary-hover-text);
--btn-border-color: var(--btn-secondary-border-color);
--btn-outline-text: var(--secondary-outline-btn-text);
--btn-outline-hover-text: var(--secondary-outline-hover-text);
}
.btn--accent {
--btn-bg: var(--btn-accent-bg);
--btn-text-color: var(--btn-accent-text);
--btn-hover: var(--btn-accent-hover);
--btn-hover-text: var(--btn-accent-hover-text);
--btn-border-color: var(--btn-accent-border-color);
--btn-outline-text: var(--accent-outline-btn-text);
--btn-outline-hover-text: var(--accent-outline-hover-text);
}
.btn--base {
--btn-bg: var(--btn-base-bg);
--btn-text-color: var(--btn-base-text);
--btn-hover: var(--btn-base-hover);
--btn-hover-text: var(--btn-base-hover-text);
--btn-border-color: var(--btn-base-border-color);
--btn-outline-text: var(--base-outline-btn-text);
--btn-outline-hover-text: var(--base-outline-hover-text);
}
.btn--white {
--btn-bg: var(--btn-white-bg);
--btn-text-color: var(--btn-white-text);
--btn-hover: var(--btn-white-hover);
--btn-hover-text: var(--btn-white-hover-text);
--btn-border-color: var(--btn-white-border-color);
--btn-outline-text: var(--white-outline-btn-text);
--btn-outline-hover-text: var(--white-outline-hover-text);
}
.btn--black {
--btn-bg: var(--btn-black-bg);
--btn-text-color: var(--btn-black-text);
--btn-hover: var(--btn-black-hover);
--btn-hover-text: var(--btn-black-hover-text);
--btn-border-color: var(--btn-black-border-color);
--btn-outline-text: var(--black-outline-btn-text);
--btn-outline-hover-text: var(--black-outline-hover-text);
}
.btn--xs {
--btn-text-size-fallback-pure: var(--text-xs-fallback-pure);
--btn-text-size-fallback: var(--text-xs-fallback);
--btn-text-size-max: calc(var(--text-xs-max) * 1rem);
--btn-text-size: var(--text-xs);
}
.btn--s {
--btn-text-size-fallback-pure: var(--text-s-fallback-pure);
--btn-text-size-fallback: var(--text-s-fallback);
--btn-text-size-max: calc(var(--text-s-max) * 1rem);
--btn-text-size: var(--text-s);
}
.btn--m {
--btn-text-size-fallback-pure: var(--text-m-fallback-pure);
--btn-text-size-fallback: var(--text-m-fallback);
--btn-text-size-max: calc(var(--text-m-max) * 1rem);
--btn-text-size: var(--text-m);
}
.btn--l {
--btn-text-size-fallback-pure: var(--text-l-fallback-pure);
--btn-text-size-fallback: var(--text-l-fallback);
--btn-text-size-max: calc(var(--text-l-max) * 1rem);
--btn-text-size: var(--text-l);
}
.btn--xl {
--btn-text-size-fallback-pure: var(--text-xl-fallback-pure);
--btn-text-size-fallback: var(--text-xl-fallback);
--btn-text-size-max: calc(var(--text-xl-max) * 1rem);
--btn-text-size: var(--text-xl);
}
.btn--xxl {
--btn-text-size-fallback-pure: var(--text-xxl-fallback-pure);
--btn-text-size-fallback: var(--text-xxl-fallback);
--btn-text-size-max: calc(var(--text-xxl-max) * 1rem);
--btn-text-size: var(--text-xxl);
}
/***
ROUNDED UTILITY CLASSES
These control the border radius of elements
***/
[class*="rounded--"] {
border-radius: var(--radius);
}
.rounded--xs {
--radius: var(--radius-xs);
}
.rounded--s {
--radius: var(--radius-s);
}
.rounded--m {
--radius: var(--base-radius);
}
.rounded--l {
--radius: var(--radius-l);
}
.rounded--xl {
--radius: var(--radius-xl);
}
.rounded--xxl {
--radius: var(--radius-xxl);
}
.rounded--circle {
--radius: var(--radius-50);
}
.rounded--none {
--radius: none;
}
/***
FLEX CLASSES
These control the position/behavior of elements
***/
[class*="center--"]:not(.ct-section),
[class*="flex--"]:not(.ct-section),
.ct-section[class*="center--"] .ct-section-inner-wrap,
.ct-section[class*="flex--"] .ct-section-inner-wrap {
display: var(--flex-display);
flex-direction: var(--flex-direction);
justify-content: var(--flex-justify);
align-content: var(--flex-align-content);
align-items: var(--flex-align-items);
flex-wrap: var(--flex-wrap);
text-align: var(--flex-text);
}
[class*="flex--"],
[class*="center--"] {
--flex-display: flex;
}
.flex--row {
--flex-direction: row;
--flex-align-items: flex-start;
}
.flex--col {
--flex-direction: column;
--flex-align-items: flex-start;
}
.flex--row-reverse {
--flex-direction: row-reverse;
}
.flex--col-reverse {
--flex-direction: column-reverse;
}
.justify--start {
--flex-justify: flex-start;
}
.justify--center {
--flex-justify: center;
}
.justify--end {
--flex-justify: flex-end;
}
.justify--between {
--flex-justify: space-between;
}
.justify--around {
--flex-justify: space-around;
}
.align--start {
--flex-align-items: flex-start;
}
.align--center {
--flex-align-items: center;
}
.align--end {
--flex-align-items: flex-end;
}
.align--baseline {
--flex-align-items: baseline;
}
.flex--wrap {
--flex-wrap: wrap;
}
.self--start {
align-self: flex-start;
}
.self--end {
align-self: flex-end;
}
.self--center {
align-self: center;
}
.self--stretch {
align-self: stretch;
}
.stretch:not(.ct-section),
.ct-section.stretch .ct-section-inner-wrap {
display: flex;
--flex-align-items: stretch;
--flex-justify: stretch;
}
@media only screen and (max-width: 479px) {
.flex--col-s {
--flex-direction: column;
}
.flex--row-s {
--flex-direction: row;
}
.flex--row-reverse-s {
--flex-direction: row-reverse;
}
.flex--col-reverse-s {
--flex-direction: column-reverse;
}
}
@media only screen and (max-width: 767px) {
.flex--col-m {
--flex-direction: column;
}
.flex--row-m {
--flex-direction: row;
}
.flex--row-reverse-m {
--flex-direction: row-reverse;
}
.flex--col-reverse-m {
--flex-direction: column-reverse;
}
}
@media only screen and (max-width: 991px) {
.flex--col-l {
--flex-direction: column;
}
.flex--row-l {
--flex-direction: row;
}
.flex--row-reverse-l {
--flex-direction: row-reverse;
}
.flex--col-reverse-l {
--flex-direction: column-reverse;
}
}
@media only screen and (max-width: 1279px) {
.flex--col-xl {
--flex-direction: column;
}
.flex--row-xl {
--flex-direction: row;
}
.flex--row-reverse-xl {
--flex-direction: row-reverse;
}
.flex--col-reverse-xl {
--flex-direction: column-reverse;
}
}
/***
CENTERING CLASSES
Quickly align elements without needing to know Flexbox.
***/
.center--all {
--flex-direction: column;
--flex-align-items: center;
--flex-align-content: center;
--flex-justify: center;
--flex-text: center;
}
.center--y {
--flex-direction: column;
--flex-justify: center;
--flex-align-items: flex-start;
}
.center--x {
--flex-direction: row;
--flex-justify: center;
--flex-align-items: flex-start;
}
.center--left {
--flex-direction: column;
--flex-justify: center;
--flex-align-items: flex-start;
--flex-text: left;
}
.center--right {
--flex-direction: column;
--flex-justify: center;
--flex-align-items: flex-end;
}
@media only screen and (max-width: 479px) {
.center--all-s {
--flex-align-items: center;
--flex-align-content: center;
--flex-justify: center;
--flex-text: center;
}
.center--y-s {
--flex-direction: column;
--flex-justify: center;
--flex-align-items: flex-start;
}
.center--x-s {
--flex-direction: row;
--flex-justify: center;
--flex-align-items: flex-start;
}
.center--left-s {
--flex-direction: column;
--flex-justify: center;
--flex-align-items: flex-start;
--flex-text: left;
}
.center--right-s {
--flex-direction: column;
--flex-justify: center;
--flex-align-items: flex-end;
}
}
@media only screen and (max-width: 767px) {
.center--all-m {
--flex-align-items: center;
--flex-align-content: center;
--flex-justify: center;
--flex-text: center;
}
.center--y-m {
--flex-direction: column;
--flex-justify: center;
--flex-align-items: flex-start;
}
.center--x-m {
--flex-direction: row;
--flex-justify: center;
--flex-align-items: flex-start;
}
.center--left-m {
--flex-direction: column;
--flex-justify: center;
--flex-align-items: flex-start;
--flex-text: left;
}
.center--right-m {
--flex-direction: column;
--flex-justify: center;
--flex-align-items: flex-end;
}
}
@media only screen and (max-width: 991px) {
.center--all-l {
--flex-align-items: center;
--flex-align-content: center;
--flex-justify: center;
--flex-text: center;
}
.center--y-l {
--flex-direction: column;
--flex-justify: center;
--flex-align-items: flex-start;
}
.center--x-l {
--flex-direction: row;
--flex-justify: center;
--flex-align-items: flex-start;
}
.center--left-l {
--flex-direction: column;
--flex-justify: center;
--flex-align-items: flex-start;
--flex-text: left;
}
.center--right-l {
--flex-direction: column;
--flex-justify: center;
--flex-align-items: flex-end;
}
}
@media only screen and (max-width: 1279px) {
.ct-section.center--all-xl .ct-section-inner-wrap,
.center--all-xl:not(.ct-section) {
--flex-align-items: center;
--flex-align-content: center;
--flex-justify: center;
--flex-text: center;
}
.center--y-xl {
--flex-direction: column;
--flex-justify: center;
--flex-align-items: flex-start;
}
.center--x-xl {
--flex-direction: row;
--flex-justify: center;
--flex-align-items: flex-start;
}
.center--left-xl {
--flex-direction: column;
--flex-justify: center;
--flex-align-items: flex-start;
--flex-text: left;
}
.center--right-xl {
--flex-direction: column;
--flex-justify: center;
--flex-align-items: flex-end;
}
}
/***
FLIP CLASSES
Flip items and images.
***/
.flip--x,
.flip--x > div {
transform: scaleX(-1);
}
.flip--y,
.flip--y > div {
transform: scaleY(-1);
}
.flip--xy,
.flip--xy > div {
transform: scale(-1, -1);
}
/***
OPACITY CLASSES
These control the opacity of elements.
***/
.opacity--5 {opacity: 0.05;}
.opacity--10 {opacity: 0.1;}
.opacity--20 {opacity: 0.2;}
.opacity--30 {opacity: 0.3;}
.opacity--40 {opacity: 0.4;}
.opacity--50 {opacity: 0.5;}
.opacity--60 {opacity: 0.6;}
.opacity--70 {opacity: 0.7;}
.opacity--80 {opacity: 0.8;}
.opacity--90 {opacity: 0.9;}
.opacity--95 {opacity: 0.95;}