@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
.glide {
position: relative;
width: 100%;
box-sizing: border-box;
}
.glide * {
box-sizing: inherit;
}
.glide__track {
overflow: hidden;
}
.glide__slides {
position: relative;
width: 100%;
list-style: none;
backface-visibility: hidden;
transform-style: preserve-3d;
touch-action: pan-Y;
overflow: hidden;
margin: 0;
padding: 0;
white-space: nowrap;
display: flex;
flex-wrap: nowrap;
will-change: transform;
}
.glide__slides--dragging {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.glide__slide {
width: 100%;
height: 100%;
flex-shrink: 0;
white-space: normal;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-webkit-tap-highlight-color: transparent;
}
.glide__slide a {
-webkit-user-select: none;
user-select: none;
-webkit-user-drag: none;
-moz-user-select: none;
-ms-user-select: none;
}
.glide__arrows {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.glide__bullets {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.glide--rtl {
direction: rtl;
}
/*
! tailwindcss v3.3.1 | MIT License | https://tailwindcss.com
*/
/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/
*,
::before,
::after {
box-sizing: border-box; /* 1 */
border-width: 0; /* 2 */
border-style: solid; /* 2 */
border-color: var(--border-theme); /* 2 */
}
::before,
::after {
--tw-content: '';
}
/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
*/
html {
line-height: 1.5; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
-moz-tab-size: 4; /* 3 */
-o-tab-size: 4;
tab-size: 4; /* 3 */
font-family: var(--main-font), ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
font-feature-settings: normal; /* 5 */
font-variation-settings: normal; /* 6 */
}
/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/
body {
margin: 0; /* 1 */
line-height: inherit; /* 2 */
}
/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/
hr {
height: 0; /* 1 */
color: inherit; /* 2 */
border-top-width: 1px; /* 3 */
}
/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr:where([title]) {
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
}
/*
Remove the default font size and weight for headings.
*/
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
font-weight: inherit;
}
/*
Reset links to optimize for opt-in styling instead of opt-out.
*/
a {
color: inherit;
text-decoration: inherit;
}
/*
Add the correct font weight in Edge and Safari.
*/
b,
strong {
font-weight: bolder;
}
/*
1. Use the user's configured `mono` font family by default.
2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", 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;
}
/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/
table {
text-indent: 0; /* 1 */
border-color: inherit; /* 2 */
border-collapse: collapse; /* 3 */
}
/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 1 */
font-weight: inherit; /* 1 */
line-height: inherit; /* 1 */
color: inherit; /* 1 */
margin: 0; /* 2 */
padding: 0; /* 3 */
}
/*
Remove the inheritance of text transform in Edge and Firefox.
*/
button,
select {
text-transform: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/
button,
[type='button'],
[type='reset'],
[type='submit'] {
-webkit-appearance: button; /* 1 */
background-color: transparent; /* 2 */
background-image: none; /* 2 */
}
/*
Use the modern Firefox focus style for all focusable elements.
*/
:-moz-focusring {
outline: auto;
}
/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/
:-moz-ui-invalid {
box-shadow: none;
}
/*
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
vertical-align: baseline;
}
/*
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-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.
*/
::-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 */
}
/*
Add the correct display in Chrome and Safari.
*/
summary {
display: list-item;
}
/*
Removes the default spacing and border for appropriate elements.
*/
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
margin: 0;
}
fieldset {
margin: 0;
padding: 0;
}
legend {
padding: 0;
}
ol,
ul,
menu {
list-style: none;
margin: 0;
padding: 0;
}
/*
Prevent resizing textareas horizontally by default.
*/
textarea {
resize: vertical;
}
/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/
input::-moz-placeholder, textarea::-moz-placeholder {
opacity: 1; /* 1 */
color: #9ca3af; /* 2 */
}
input::placeholder,
textarea::placeholder {
opacity: 1; /* 1 */
color: #9ca3af; /* 2 */
}
/*
Set the default cursor for buttons.
*/
button,
[role="button"] {
cursor: pointer;
}
/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
cursor: default;
}
/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
This can trigger a poorly considered lint error in some tools but is included by design.
*/
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
display: block; /* 1 */
vertical-align: middle; /* 2 */
}
/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/
img,
video {
max-width: 100%;
height: auto;
}
/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden] {
display: none;
}
[type='text'],[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: #fff;
border-color: #6b7280;
border-width: 1px;
border-radius: 0px;
padding-top: 0.5rem;
padding-right: 0.75rem;
padding-bottom: 0.5rem;
padding-left: 0.75rem;
font-size: 1rem;
line-height: 1.5rem;
--tw-shadow: 0 0 #0000;
}
[type='text']:focus, [type='email']:focus, [type='url']:focus, [type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus, [multiple]:focus, textarea:focus, select:focus{
outline: 2px solid transparent;
outline-offset: 2px;
--tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: #2563eb;
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
border-color: #2563eb;
}
input::-moz-placeholder, textarea::-moz-placeholder{
color: #6b7280;
opacity: 1;
}
input::placeholder,textarea::placeholder{
color: #6b7280;
opacity: 1;
}
::-webkit-datetime-edit-fields-wrapper{
padding: 0;
}
::-webkit-date-and-time-value{
min-height: 1.5em;
}
::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field{
padding-top: 0;
padding-bottom: 0;
}
select{
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
background-position: right 0.5rem center;
background-repeat: no-repeat;
background-size: 1.5em 1.5em;
padding-right: 2.5rem;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
[multiple]{
background-image: initial;
background-position: initial;
background-repeat: unset;
background-size: initial;
padding-right: 0.75rem;
-webkit-print-color-adjust: unset;
print-color-adjust: unset;
}
[type='checkbox'],[type='radio']{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding: 0;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
display: inline-block;
vertical-align: middle;
background-origin: border-box;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
flex-shrink: 0;
height: 1rem;
width: 1rem;
color: #2563eb;
background-color: #fff;
border-color: #6b7280;
border-width: 1px;
--tw-shadow: 0 0 #0000;
}
[type='checkbox']{
border-radius: 0px;
}
[type='radio']{
border-radius: 100%;
}
[type='checkbox']:focus,[type='radio']:focus{
outline: 2px solid transparent;
outline-offset: 2px;
--tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
--tw-ring-offset-width: 2px;
--tw-ring-offset-color: #fff;
--tw-ring-color: #2563eb;
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
[type='checkbox']:checked,[type='radio']:checked{
border-color: transparent;
background-color: currentColor;
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
}
[type='checkbox']:checked{
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}
[type='radio']:checked{
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
}
[type='checkbox']:checked:hover,[type='checkbox']:checked:focus,[type='radio']:checked:hover,[type='radio']:checked:focus{
border-color: transparent;
background-color: currentColor;
}
[type='checkbox']:indeterminate{
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
border-color: transparent;
background-color: currentColor;
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
}
[type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus{
border-color: transparent;
background-color: currentColor;
}
[type='file']{
background: unset;
border-color: inherit;
border-width: 0;
border-radius: 0;
padding: 0;
font-size: unset;
line-height: inherit;
}
[type='file']:focus{
outline: 1px solid ButtonText;
outline: 1px auto -webkit-focus-ring-color;
}
/* Extend preflight css sanitation*/
html{
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
height: 100%;
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
font-size: 1rem;
color: var(--text-primary);
}
body {
/* Sets default styles for all instances of main headers in repo*/
overflow-x: hidden;
background-color: var(--pg-body);
}
body .main-header{
z-index: 30;
display: flex;
height: var(--header-height);
width: 100%;
justify-content: center;
background-color: var(--pg-header);
padding-left: 1.125rem;
padding-right: 1.125rem;
padding-top: 0.75rem;
}
@media (min-width: 768px){
body .main-header{
padding-left: 1.875rem;
padding-right: 1.875rem;
}
}
@media (min-width: 1024px){
body .main-header{
padding-left: 2.5rem;
padding-right: 2.5rem;
}
}
body .main-header__wrapper{
display: flex;
width: 100%;
max-width: 1280px;
justify-content: space-between;
}
main{
overflow-x: hidden;
}
/* Remove blue line from focused elements on older versions of Safari*/
*:focus{
outline: 2px solid transparent;
outline-offset: 2px;
}
.main-app-wrapper,
.live-wrapper{
min-height: var(--body-height);
}
/* A flexible container with dynamix x-axis padding and responsive x-axis padding.*/
/* Used on most member facing screens, and on the marketing website*/
/* May need to refactor the prior work on member screens to match the grid method used in new components.*/
section.bs-flex-container,
section.landing-section,
section.landing-hero{
display: flex;
width: 100%;
align-content: center;
justify-content: center;
padding-left: 18px;
padding-right: 18px;
padding-top: 2.5rem;
padding-bottom: 2.5rem;
}
@media (min-width: 768px){
section.bs-flex-container,
section.landing-section,
section.landing-hero{
padding-left: 1.875rem;
padding-right: 1.875rem;
padding-top: 3rem;
padding-bottom: 3rem;
}
}
@media (min-width: 1024px){
section.bs-flex-container,
section.landing-section,
section.landing-hero{
padding-left: 2.5rem;
padding-right: 2.5rem;
padding-top: 3.5rem;
padding-bottom: 3.5rem;
}
section.bs-flex-container.admin, section.landing-section.admin, section.landing-hero.admin{
padding-top: 0.25rem;
padding-bottom: 1.875rem;
}
}
section.landing-section > div, section.bs-flex-container > div, section.bs-grid-container > div, .bs-nav-container > div{
width: 100%;
max-width: 1280px;
}
section.bs-grid-container{
display: grid;
padding-left: 1.25rem;
padding-right: 1.25rem;
padding-top: 3.125rem;
padding-bottom: 3.125rem;
}
@media (min-width: 768px){
section.bs-grid-container{
padding-left: 1.875rem;
padding-right: 1.875rem;
}
}
@media (min-width: 1024px){
section.bs-grid-container{
padding-left: 2.5rem;
padding-right: 2.5rem;
padding-top: 5rem;
padding-bottom: 5rem;
}
}
section.bs-grid-container > div{
margin-left: auto;
margin-right: auto;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 33px;
}
@media (min-width: 768px){
section.bs-grid-container > div{
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
@media (min-width: 1024px){
section.bs-grid-container > div{
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 42px;
}
}
.bs-nav-container{
display: flex;
width: 100%;
align-content: center;
justify-content: center;
padding-left: 18px;
padding-right: 18px;
padding-top: 2.5rem;
}
@media (min-width: 768px){
.bs-nav-container{
padding-left: 1.875rem;
padding-right: 1.875rem;
padding-top: 3rem;
}
}
@media (min-width: 1024px){
.bs-nav-container{
padding-left: 2.5rem;
padding-right: 2.5rem;
padding-top: 3.5rem;
}
}
footer.main-footer{
display: flex;
flex-direction: column;
background-color: var(--pg-footer);
padding-left: 4%;
padding-right: 4%;
padding-bottom: 1rem;
padding-top: 2.5rem;
color: var(--text-primary-inverted);
}
footer.main-footer a,
footer.main-footer p{
font-size: 1rem;
font-weight: 700;
color: var(--text-primary-inverted);
}
footer.main-footer a{
text-decoration-line: underline;
text-underline-offset: 2px;
}
:root {
/* default font*/
--main-font: "Proxima Nova", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--display-font: Fasthand, cursive;
/* drop shadow*/
--drop-shadow-theme: 0px 4px 4px rgba(0, 0, 0, 0.25); /* 11 O clock light source, hard lines.*/
/* Shared colors */
/* neutral color palette*/
--neutral-50: #FAFBFD;
--neutral-100: #F1F5F9;
--neutral-200: #E2E8F0;
--neutral-300: #CBD5E1;
--neutral-400: #94A3B8;
--neutral-500: #64748B;
--neutral-600: #475569;
--neutral-700: #334155;
--neutral-800: #1E293B;
--neutral-900: #0F172A;
--neutral-300-muted: 203, 213, 225;
--neutral-900-muted: 15, 23, 42;
--white: #FCFEFF;
--black: #0F172A;
--navy: #0F5E8C;
/* surface color palette*/
--accent-surface: #F0F9FF;
--accent-secondary-surface: #FFF0E8;
--danger-surface: #FEF2F2;
--warning-surface: #FFF7ED;
--success-surface: #ECFDF5;
/* semantic color palette */
--danger: #EF4444;
--danger-dark: #CC1F1F;
--warning: #FFA040;
--success: #34D399;
--info: #0284C7;
--border-danger: #EF4444;
--border-warning: #FED7AA;
/* by business*/
--allsites: #0F5E8C;
--nobsbusiness: #0F766E;
--nobswomen: #BE185D;
--nobsbusiness-marketing: #2E6565;
--nobsweightloss-marketing: #D4CA08;
/* Height calculations*/
/*///// Headers*/
--header-height: 70px;
}
/* mobile*/
@media screen and (min-width: 640px) {
:root {
/* small*/
--header-height: 80px
}
}
@media screen and (min-width: 768px) {
:root {
/* tablet*/
--header-height: 136px
}
}
@media screen and (min-width: 1024px) {
:root {
/* desktop*/
--header-height: 128px
}
}
:root{
--footer-height: 80px;
}
/*////// Footers*/
/* mobile*/
@media screen and (min-width: 786px) {
:root {
/* tablet*/
--footer-height: 80px
}
}
@media screen and (min-width: 1024px) {
:root {
/* desktop*/
--footer-height: 80px
}
}
:root{
--banner-height: 191px;
}
/* Banners*/
/* mobile*/
@media screen and (min-width: 640px) {
:root {
/* small*/
--banner-height: 68px
}
}
@media screen and (min-width: 768px) {
:root {
/* tablet*/
--banner-height: 74px
}
}
@media screen and (min-width: 1024px) {
:root {
/* desktop*/
--banner-height: 80px
}
}
:root{
--bs-grid-layout: repeat(3, 100px);
}
/*////////////////*/
/* Grid Layouts //*/
/*///////////////*/
/* mobile*/
@media screen and (min-width: 786px) {
:root {
/* tablet*/
--bs-grid-layout: repeat(4, 125px)
}
}
@media screen and (min-width: 1024px) {
:root {
/* desktop*/
--bs-grid-layout: grid-template-columns: repeat(6, 165px)
}
}
/*//////////////////////////////////////////////////////////////////////*/
/* No BS Business UI*/
/*//////////////////////////////////////////////////////////////////////*/
[data-theme='business'], [data-theme='public'], [data-theme='weight-loss'] {
/* theme font*/
--main-font: "Proxima Nova", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--display-font: Fasthand, cursive;
/* default shadows */
--bs-shadow-theme: 0px 4px 4px rgba(0, 0, 0, 0.25);
--bs-shadow-button-theme: 0px 4px 4px rgba(0, 0, 0, 0.25);
--bs-shadow-card: 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.06);
--bs-shadow-card-hover: 0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -2px rgba(0, 0, 0, 0.05);
/* primary accent color palette*/
--accent: #BAE5FD; /* Default*/
--accent-hover: #7DD3FC; /* Hover*/
--accent-pressed: #38BDF8; /* Pressed*/
--accent-disabled: #E2E8F0; /* Disabled*/
--accent-link: #0369A1; /**/
/* secondary accent palette*/
--accent-secondary: #FFCCB2;
--black: #334155;
/* accent scale*/
--accent-50: #F0F9FF;
--accent-100: #E0F2FE;
--accent-200: #BAE5FD;
--accent-300: #7DD3FC;
--accent-400: #38BDF8;
--accent-500: #0EA5E9;
--accent-600: #0284C7;
--accent-700: #0369A1;
--accent-800: #075985;
--accent-900: #0C4A6E;
--accent-muted: 125, 211, 252;
/* text color palette*/
--text-primary: #0F172A;
--text-secondary: #64748B;
--text-primary-inverted: #FAFBFC;
--text-secondary-inverted: #FAFBFC;
--text-muted: #64748B;
--text-accent: #075985;
/* button text color palette*/
--btn-text-primary: #0F172A;
--btn-text-primary-hover: #0F172A;
--btn-text-primary-pressed: #0C4A6E;
--btn-text-secondary: #0C4A6E;
--btn-text-secondary-hover: #0C4A6E;
--btn-text-secondary-pressed: #0C4A6E;
--btn-text-tertiary: #0F172A;
--btn-text-tertiary-hover: #0284C7;
--btn-text-tertiary-pressed: #0F5E8C;
--btn-text-link: #0284C7;
--btn-text-link-hover: #0284C7;
--btn-text-link-pressed: #0F5E8C;
/* button border color palette*/
--btn-border-primary: #BAE5FD;
--btn-border-primary-hover: #7DD3FC;
--btn-border-primary-pressed: #38BDF8;
--btn-border-secondary: #BAE6FD;
--btn-border-secondary-hover: #7DD3FC;
--btn-border-secondary-pressed: #38BDF8;
--btn-border-tertiary: transparent;
--btn-border-tertiary-hover: transparent;
--btn-border-tertiary-pressed: transparent;
/* button bg color palette */
--btn-bg-primary: #BAE5FD;
--btn-bg-primary-hover: #7DD3FC;
--btn-bg-primary-pressed: #38BDF8;
--btn-bg-secondary: #F0F9FF;
--btn-bg-secondary-hover: #F0F9FF;
--btn-bg-secondary-pressed: #E0F2FE;
--btn-bg-tertiary: transparent;
--btn-bg-tertiary-hover: transparent;
--btn-bg-tertiary-pressed: transparent;
/* focus ring color*/
--btn-focus-ring: #0F172A;
/* border color palette*/
--border-theme: #94A3B8;
--border-accent: #73BEE5;
--border-danger: #B91C1C;
--border-success: #1CBA80;
/* component background color variables*/
--pg-header: #FCFEFF;
--pg-body: #FCFEFF;
--pg-footer: #0F172A;
--card-body: #FCFEFF;
--card-body-hover: #FCFEFF;
/* border-radius*/
--border-radius: 0.25rem;
/*/ Body height*/
--body-height: calc(100vh - var(--header-height) - var(--footer-height));
}
/*////////////////////////////////////////*/
/* not-yet-member landing page variables//*/
/*////////////////////////////////////////*/
[data-theme='business'] #user-facing.is-marketing-page, [data-theme='public'] #user-facing.is-marketing-page, [data-theme='weight-loss'] #user-facing.is-marketing-page {
/* default shadows */
--bs-shadow-button-theme: 0px 4px 4px rgba(0, 0, 0, 0.25);
--bs-shadow-theme: 0px 4px 4px rgba(0, 0, 0, 0.25);
/* border-radius*/
--border-radius: 0.25rem;
/* Height calculations for non-member pages*/
/* Page headers*/
--header-height: 70px; /* mobile*/
/*/ Body height*/
--body-height: calc(100vh - var(--footer-height) - var(--header-height));
}
@media screen and (min-width: 786px) {
[data-theme='business'] #user-facing.is-marketing-page, [data-theme='public'] #user-facing.is-marketing-page, [data-theme='weight-loss'] #user-facing.is-marketing-page {
/* tablet*/
--header-height: 70px
}
}
@media screen and (min-width: 1024px) {
[data-theme='business'] #user-facing.is-marketing-page, [data-theme='public'] #user-facing.is-marketing-page, [data-theme='weight-loss'] #user-facing.is-marketing-page {
/* desktop*/
--header-height: 96px
}
}
/*//////////////////////////////////////////////////////////////////////*/
/* No BS Admin UI*/
/*//////////////////////////////////////////////////////////////////////*/
[data-theme='admin'] {
/* theme font*/
--main-font: "Proxima Nova", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--display-font: Fasthand, cursive;
/* default shadows */
--bs-shadow-button-theme: 0px 4px 4px rgba(0, 0, 0, 0);
--bs-shadow-theme: 0px 0px 0px 0px rgba(0, 0, 0, 0);
--bs-shadow-card: 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.06);
--bs-shadow-card-hover: 0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -2px rgba(0, 0, 0, 0.05);
--black: #0F172A;
--white: #FCFEFF;
--navy: #0F5E8C;
/* primary accent color palette*/
--accent: #334155; /* Default*/
--accent-hover: #0369A1; /* Hover */
--accent-pressed: #1E293B; /* Pressed*/
--accent-disabled: #E2E8F0; /* Disabled*/
--accent-link: #0284C7; /* Link*/
/* secondary accent palette*/
--accent-secondary: #0369A1;
/* accent scale*/
--accent-50: #F8FAFC;
--accent-100: #F1F5F9;
--accent-200: #E2E8F0;
--accent-300: #CBD5E1;
--accent-400: #94A3B8;
--accent-500: #64748B;
--accent-600: #475569;
--accent-700: #334155;
--accent-800: #1E293B;
--accent-900: #0F172A;
--accent-muted: 125, 211, 252;
/* text color palette*/
--text-primary: #0F172A;
--text-secondary: #334155;
--text-primary-inverted: #FCFEFF;
--text-secondary-inverted: #FCFEFF;
--text-muted: #64748B;
--text-accent: #185075;
/* button text color palette*/
--btn-text-primary: #FCFEFF;
--btn-text-primary-hover: #FCFEFF;
--btn-text-primary-pressed: #CBD5E1;
--btn-text-secondary: #0F172A;
--btn-text-secondary-hover: #0F172A;
--btn-text-secondary-pressed: #334155;
--btn-text-tertiary: #0F172A;
--btn-text-tertiary-hover: #0369A1;
--btn-text-tertiary-pressed: #075985;
--btn-text-link: #0284C7;
--btn-text-link-hover: #0284C7;
--btn-text-link-pressed: #0F5E8C;
/* button border color palette*/
--btn-border-primary: #334155;
--btn-border-primary-hover: #0369A1;
--btn-border-primary-pressed: #1E293B;
--btn-border-secondary: #334155;
--btn-border-secondary-hover: #0EA5E9;
--btn-border-secondary-pressed: #64748B;
--btn-border-tertiary: transparent;
--btn-border-tertiary-hover: transparent;
--btn-border-tertiary-pressed: transparent;
/* button bg color palette */
--btn-bg-primary: #334155;
--btn-bg-primary-hover: #0369A1;
--btn-bg-primary-pressed: #1E293B;
--btn-bg-secondary: #FCFEFF;
--btn-bg-secondary-hover: #FCFEFF;
--btn-bg-secondary-pressed: #F1F5F9;
--btn-bg-tertiary: transparent;
--btn-bg-tertiary-hover: transparent;
--btn-bg-tertiary-pressed: transparent;
/* focus ring color*/
--btn-focus-ring: #0EA5E9;
/* border color palette*/
--border-theme: #CBD5E1;
--border-accent: #73BEE5;
--border-danger: #B91C1C;
--border-success: #1CBA80;
/* component background color variables*/
--pg-header: #334155;
--pg-body: #FFFFFF;
--pg-footer: #02111A;
--card-body: #FCFEFF;
--card-body-hover: #FCFEFF;
/* border-radius*/
/* accent-gradient*/
--accent-gradient: linear-gradient(180deg, #00B4D8 0%, #B3E9F4 100%);
--accent-gradient-start: #00B4D8;
--accent-gradient-stop: #B3E9F4;
/* border-radius*/
--border-radius: 0.25rem;
/*/ Body height*/
}
/* 4px */
@media screen and (min-width: 768px) {
[data-theme='admin'] {
/* tablet*/
--header-height: 80px;
}
}
@media screen and (min-width: 1024px) {
[data-theme='admin'] {
/* desktop*/
--header-height: 112px;
}
}
[data-theme='admin']{
--body-height: calc(100vh - var(--header-height) - var(--footer-height));
}
/*//////////////////////////////////////////////////////////////////////*/
/* Public (login/reset-password pages)*/
/*//////////////////////////////////////////////////////////////////////*/
[data-theme='public'] #user-facing.logged-out {
/* component background color variables*/
--pg-header: #FCFEFF;
--pg-body: #FCFEFF;
--accent-surface: #F0F9FF;
--accent: #BAE5FD;
/*/ Body height*/
/* border-radius*/
}
/* Header height*/
@media screen and (min-width: 768px) {
[data-theme='public'] #user-facing.logged-out {
/* tablet*/
--header-height: 80px;
}
}
@media screen and (min-width: 1024px) {
[data-theme='public'] #user-facing.logged-out {
/* desktop*/
--header-height: 112px;
}
}
[data-theme='public'] #user-facing.logged-out{
--body-height: calc(100vh - var(--header-height) - var(--footer-height));
--border-radius: 0.25rem;
}
/*//////////////////////////////////////////////////////////////////////*/
/* All marketing pages (for all business verticals)*/
/*//////////////////////////////////////////////////////////////////////*/
#user-facing.is-marketing-page {
--pg-header: #0F172A;
/* button border color palette*/
--btn-border-primary: #FFCC00;
--btn-border-primary-hover: #BAE5FD;
--btn-border-primary-pressed: #FFCC00;
--btn-border-secondary: #FFCC00;
--btn-border-secondary-hover: #BAE6FD;
--btn-border-secondary-pressed: #FFCC00;
/* button bg color palette */
--btn-bg-primary: #FFCC00;
--btn-bg-primary-hover: #BAE5FD;
--btn-bg-primary-pressed: #FFCC00;
--btn-bg-secondary: #FFF7ED;
--btn-bg-secondary-hover: #F0F9FF;
--btn-bg-secondary-pressed: #FFCC00;
/* button text color palette*/
--btn-text-primary: #0F172A;
--btn-text-primary-hover: #0F172A;
--btn-text-primary-pressed: #075985;
--btn-text-secondary: #0F172A;
--btn-text-secondary-hover: #0F172A;
--btn-text-secondary-pressed: #64748B;
/* text color palette*/
--text-primary: #0F172A;
--text-secondary: #334155;
--text-primary-inverted: #FCFEFF;
--text-secondary-inverted: #FCFEFF;
--text-muted: #64748B;
--text-accent: #185075;
}
#user-facing.no-header {
--header-height: 0px !important;
}
/*//////////////////////////////////////////////////////////////////////*/
/* New Marketing Sites*/
/*//////////////////////////////////////////////////////////////////////*/
[data-theme='wl-marketing'] #user-facing.is-marketing-page.logged-out {
/* component background color variables*/
--pg-header: #0F172A;
--pg-body: #FCFEFF;
--pg-footer: #0F172A;
--card-body: #FCFEFF;
--card-body-hover: #FCFEFF;
--accent-surface: #F0F9FF;
--accent: #BAE5FD;
--bs-shadow-card: 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.06);
--bs-shadow-card-hover: 0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -2px rgba(0, 0, 0, 0.05);
/*////// Page headers*/
--header-height: 70px;
/*/ Body height*/
/* border-radius*/
}
/* mobile*/
@media screen and (min-width: 640px) {
[data-theme='wl-marketing'] #user-facing.is-marketing-page.logged-out {
/* small*/
--header-height: 136px;
}
}
@media screen and (min-width: 786px) {
[data-theme='wl-marketing'] #user-facing.is-marketing-page.logged-out {
--header-height: 136px; /* tablet */
}
}
@media screen and (min-width: 1024px) {
[data-theme='wl-marketing'] #user-facing.is-marketing-page.logged-out {
--header-height: 128px; /* desktop */
}
}
[data-theme='wl-marketing'] #user-facing.is-marketing-page.logged-out{
--footer-height: 158px;
}
/*////// Page Footers */
/* mobile */
@media screen and (min-width: 786px) {
[data-theme='wl-marketing'] #user-facing.is-marketing-page.logged-out {
--footer-height: 153px; /* tablet */
}
}
@media screen and (min-width: 1024px) {
[data-theme='wl-marketing'] #user-facing.is-marketing-page.logged-out {
--footer-height: 114px; /* desktop */
}
}
[data-theme='wl-marketing'] #user-facing.is-marketing-page.logged-out{
--body-height: calc(100vh - var(--header-height) - var(--footer-height));
--border-radius: 0.25rem;
}
/*//////////////////////////////////////////////////////////////////////*/
/* New Marketing Sites*/
/*//////////////////////////////////////////////////////////////////////*/
[data-theme='biz-marketing'] #user-facing.is-marketing-page.logged-out {
/* component background color variables*/
--pg-header: #FCFEFF;
--pg-body: #FCFEFF;
--pg-footer: #0F172A;
--card-body: #FCFEFF;
--card-body-hover: #FCFEFF;
--accent-surface: #F0F9FF;
--accent: #BAE5FD;
/*////// Page headers*/
--header-height: 80px;
/*/ Body height*/
/* border-radius*/
}
/* mobile*/
@media screen and (min-width: 786px) {
[data-theme='biz-marketing'] #user-facing.is-marketing-page.logged-out {
--header-height: 102px; /* tablet */
}
}
@media screen and (min-width: 1024px) {
[data-theme='biz-marketing'] #user-facing.is-marketing-page.logged-out {
--header-height: 102px; /* desktop */
}
}
[data-theme='biz-marketing'] #user-facing.is-marketing-page.logged-out{
--footer-height: 164px;
}
/*////// Page Footers */
/* mobile */
@media screen and (min-width: 786px) {
[data-theme='biz-marketing'] #user-facing.is-marketing-page.logged-out {
--footer-height: 128px; /* tablet */
}
}
@media screen and (min-width: 1024px) {
[data-theme='biz-marketing'] #user-facing.is-marketing-page.logged-out {
--footer-height: 128px; /* desktop */
}
}
[data-theme='biz-marketing'] #user-facing.is-marketing-page.logged-out{
--body-height: calc(100vh - var(--header-height) - var(--footer-height));
--border-radius: 0.25rem;
}
*, ::before, ::after{
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
}
::backdrop{
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
}
.container{
width: 100%;
}
@media (min-width: 640px){
.container{
max-width: 640px;
}
}
@media (min-width: 768px){
.container{
max-width: 768px;
}
}
@media (min-width: 1024px){
.container{
max-width: 1024px;
}
}
@media (min-width: 1280px){
.container{
max-width: 1280px;
}
}
@media (min-width: 1536px){
.container{
max-width: 1536px;
}
}
.aspect-h-1{
--tw-aspect-h: 1;
}
.aspect-w-1{
position: relative;
padding-bottom: calc(var(--tw-aspect-h) / var(--tw-aspect-w) * 100%);
--tw-aspect-w: 1;
}
.aspect-w-1 > *{
position: absolute;
height: 100%;
width: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
/* Cross Browser Support for Proxima Nova*/
@font-face {
font-family: "Proxima Nova";
src: url("../fonts/ProximaNova-Regular-b3d6d5c7ffb6e5a41fb6dd18d59e95f8.woff?vsn=d") format("woff"),
url("../fonts/ProximaNova-Regular-e75b10fd18383401c9b739a08bd3d6e5.ttf?vsn=d") format("truetype");
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Proxima Nova";
src: url("../fonts/ProximaNova-Light-7e56e0b008ae1d1af73c0f9f16c5b687.woff?vsn=d") format("woff"),
url("../fonts/ProximaNova-Light-f97eb78cde185570d9a1076da1258762.ttf?vsn=d") format("truetype");
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Proxima Nova";
src: url("../fonts/ProximaNova-Medium-2600c03bd9d1d95417e2ead0e2661e54.woff?vsn=d") format("woff"),
url("../fonts/ProximaNova-Medium-5e197e64c482bc181fba152a80ce9868.ttf?vsn=d") format("truetype");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Proxima Nova";
src: url("../fonts/ProximaNova-RegularIt-db2be2558679b3f7a94369c2c264a7bc.woff?vsn=d") format("woff"),
url("../fonts/ProximaNova-RegularIt-8441338d6e54525b7d5624a7e3d75882.ttf?vsn=d") format("truetype");
font-weight: normal;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Proxima Nova";
src: url("../fonts/ProximaNova-Semibold-5f08dc3d010382d082b8a6856e1c6a43.woff?vsn=d") format("woff"),
url("../fonts/ProximaNova-Semibold-b49e409261566e1c90bfc2679e90cdf9.ttf?vsn=d") format("truetype");
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Proxima Nova";
src: url("../fonts/ProximaNova-Bold-a68494543d704bdbd415ca1dac318557.woff?vsn=d") format("woff"),
url("../fonts/ProximaNova-Bold-f33dc55f03e7bdb2b3752af4401c6095.ttf?vsn=d") format("truetype");
font-weight: bold;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Proxima Nova";
src: url("../fonts/ProximaNova-Black-aea44f0ce4b481f51b28e2c2a1b8513e.woff?vsn=d") format("woff"),
url("../fonts/ProximaNova-Black-884f3fa29a5891e509c99a1f7a9167d1.ttf?vsn=d") format("truetype");
font-weight: 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Proxima Nova";
src: url("../fonts/ProximaNova-ThinIt-5e96345c5635f19b200289719050dd48.woff?vsn=d") format("woff"),
url("../fonts/ProximaNova-ThinIt-1b79c2c8e3ddadd312cdbcda669dee58.ttf?vsn=d") format("truetype");
font-weight: 100;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Proxima Nova";
src: url("../fonts/ProximaNovaT-Thin-85acbc0abac0f7647589325a4c158445.woff?vsn=d") format("woff"),
url("../fonts/ProximaNovaT-Thin-5188b815efafb72ecf334076f54a5d5c.ttf?vsn=d") format("truetype");
font-weight: 100;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Proxima Nova";
src: url("../fonts/ProximaNova-MediumIt-7a497e9e45c54aab0a29c0a42fcfc060.woff?vsn=d") format("woff"),
url("../fonts/ProximaNova-MediumIt-0606b33dc3ebc3be2a0d78f6c016bc7b.ttf?vsn=d") format("truetype");
font-weight: 500;
font-style: italic;
font-display: swap;
}
/* Title styles*/
.page-title{
position: relative;
font-size: 2.25rem;
line-height: 130%;
font-weight: 700;
}
.page-title::first-letter{
text-transform: capitalize;
}
@media (min-width: 768px){
.page-title{
font-size: 52px;
line-height: 130%;
}
}
.page-title-gradient{
position: relative;
font-size: 34px;
line-height: 130%;
font-weight: 700;
}
.page-title-gradient::first-letter{
text-transform: capitalize;
}
@media (min-width: 768px){
.page-title-gradient{
font-size: 52px;
line-height: 120%;
}
}
.page-title-bg-img{
position: relative;
font-size: 2.25rem;
line-height: 130%;
font-weight: 700;
}
.page-title-bg-img::first-letter{
text-transform: capitalize;
}
@media (min-width: 768px){
.page-title-bg-img{
font-size: 52px;
line-height: 130%;
}
}
.page-intro{
margin-bottom: 1.25rem;
font-size: 26px;
line-height: 150%;
font-weight: 500;
}
@media (min-width: 768px){
.page-intro{
margin-bottom: 1rem;
font-size: 1.875rem;
line-height: 130%;
}
}
@media (min-width: 1024px){
.page-intro{
margin-bottom: 1.25rem;
}
}
.title-eyebrow{
margin-bottom: 5px;
white-space: nowrap;
font-size: .875rem;
line-height: 1.25rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
}
@media (min-width: 768px){
.title-eyebrow{
font-size: 1rem;
line-height: 1.5rem;
}
}
/* Body styles*/
.body-heading{
position: relative;
margin-bottom: 0.875rem;
font-size: 2.25rem;
line-height: 130%;
font-weight: 700;
}
.body-heading::first-letter{
text-transform: capitalize;
}
@media (min-width: 768px){
.body-heading{
font-size: 40px;
line-height: 130%;
}
}
@media (min-width: 1024px){
.body-heading{
margin-bottom: 1.25rem;
}
}
.body-subheading{
font-size: 1rem;
line-height: 1.4375rem;
font-weight: 700;
}
@media (min-width: 768px){
.body-subheading{
margin-bottom: 0.625rem;
font-size: 1.5rem;
line-height: 1.75rem;
}
}
.body-text{
margin-bottom: 0.875rem;
font-size: 20px;
line-height: 150%;
font-weight: 400;
}
@media (min-width: 768px){
.body-text{
margin-bottom: 1.25rem;
font-size: 22px;
line-height: 150%;
}
}
.cta-text{
margin-bottom: 0.875rem;
font-size: 1rem;
line-height: 1.5rem;
font-weight: 700;
}
.cta-text::first-letter{
text-transform: capitalize;
}
@media (min-width: 768px){
.cta-text{
margin-bottom: 1.25rem;
font-size: 1.25rem;
line-height: 1.75rem;
}
}
.body-caption{
margin-bottom: 0.75rem;
font-size: .875rem;
line-height: 1.25rem;
font-weight: 400;
}
@media (min-width: 768px){
.body-caption{
font-size: 1rem;
line-height: 1.5rem;
}
}
/* Heroless page styles*/
.heroless-title{
font-size: 2.25rem;
line-height: 130%;
font-weight: 700;
}
@media (min-width: 768px){
.heroless-title{
font-size: 40px;
line-height: 120%;
}
}
.heroless-body-heading{
font-size: 2.25rem;
line-height: 130%;
font-weight: 700;
}
@media (min-width: 1024px){
.heroless-body-heading{
font-size: 40px;
line-height: 130%;
}
}
.heroless-body-subheading{
font-size: 1.5rem;
line-height: 1.5rem;
font-weight: 700;
}
@media (min-width: 1024px){
.heroless-body-subheading{
font-size: 1.75rem;
line-height: 2.125rem;
}
}
/* Card styles*/
.card-label{
font-size: 1rem;
line-height: 1.5rem;
font-weight: 700;
color: var(--neutral-600);
}
@media (min-width: 768px){
.card-label{
margin-bottom: 0.75rem;
font-size: 1.125rem;
line-height: 1.5rem;
}
}
.card-heading{
margin-bottom: 0.75rem;
font-size: 1.125rem;
line-height: 1.375rem;
font-weight: 700;
}
@media (min-width: 768px){
.card-heading{
margin-bottom: 0.875rem;
font-size: 1.5rem;
line-height: 1.75rem;
}
}
.card-body{
margin-bottom: 0.75rem;
font-size: .875rem;
line-height: 1.25rem;
font-weight: 500;
}
@media (min-width: 768px){
.card-body{
margin-bottom: 1.125rem;
font-size: 1.125rem;
line-height: 1.5rem;
}
}
.card-list-item{
margin-bottom: 0.875rem;
font-size: 1rem;
line-height: 1.5rem;
font-weight: 700;
}
@media (min-width: 768px){
.card-list-item{
margin-bottom: 1.25rem;
font-size: 1.25rem;
line-height: 1.75rem;
}
}
.accordion-title{
font-size: 1.125rem;
line-height: 1.5rem;
font-weight: 700;
}
@media (min-width: 768px){
.accordion-title{
font-size: 1.25rem;
line-height: 1.75rem;
}
}
.card-cta{
margin-top: 0px;
white-space: normal;
padding: 0.625rem;
font-size: 1rem;
line-height: 1.5rem;
font-weight: 700;
color: var(--accent-600);
text-decoration-line: underline;
text-decoration-thickness: 2px;
text-underline-offset: 2px;
}
.card-cta::first-letter{
text-transform: capitalize;
}
@media (min-width: 768px){
.card-cta{
margin-top: 0.5rem;
}
}
/* FAQ*/
.faq-body-text{
margin-bottom: 0.5rem;
font-size: 1.125rem;
line-height: 1.5rem;
font-weight: 400;
}
@media (min-width: 768px){
.faq-body-text{
margin-bottom: 0.625rem;
font-size: 1.25rem;
line-height: 1.75rem;
}
}
/* Video cards*/
.video-card-heading{
margin-bottom: 0.25rem;
font-size: 1rem;
line-height: 1.5rem;
font-weight: 700;
}
@media (min-width: 768px){
.video-card-heading{
font-size: 1.125rem;
line-height: 1.5rem;
}
}
.video-card-subheading{
font-size: .875rem;
line-height: 1.25rem;
font-weight: 500;
color: var(--text-secondary);
}
@media (min-width: 768px){
.video-card-subheading{
font-size: 1rem;
line-height: 1.5rem;
}
}
.video-card-list-item{
font-size: .875rem;
line-height: 1.25rem;
font-weight: 500;
color: var(--navy);
}
@media (min-width: 768px){
.video-card-list-item{
font-size: 1rem;
line-height: 1.5rem;
}
}
/* Modal styles*/
.modal-heading{
margin-bottom: 0.25rem;
font-size: 1.5rem;
line-height: 1.75rem;
font-weight: 700;
}
@media (min-width: 768px){
.modal-heading{
margin-bottom: 0.5rem;
font-size: 2.25rem;
line-height: 2.5rem;
}
}
.modal-subheading{
font-size: 1.25rem;
line-height: 1.75rem;
font-weight: 400;
}
@media (min-width: 768px){
.modal-subheading{
font-size: 1.5rem;
line-height: 1.75rem;
}
}
.modal-body-text{
font-size: 1rem;
line-height: 1.5rem;
font-weight: 600;
}
@media (min-width: 768px){
.modal-body-text{
font-size: 1.125rem;
line-height: 1.5rem;
}
}
.modal-body-text {
/* NOTE: @hanna may need to come back and address how links within .modal body are styled depending on implementation.*/
}
.testimonial-heading{
font-size: 1.5rem;
line-height: 1.75rem;
font-weight: 700;
color: var(--text-primary);
}
/* Admin-ui specific typography*/
.admin-label{
font-size: 1.125rem;
line-height: 1.5rem;
font-weight: 700;
}
/* Link styles*/
a{
text-decoration-line: none;
}
a:hover{
text-decoration-line: underline;
}
/* NOTE: by default, we do not use an underline on elements,*/
/* this is because we use tags to navigate all over the app, sometimes in lists, cards etc.*/
/* use the class .link to style an as an underlined hyperlink*/
/* NOTE: for