/*------------------------------------*\ // #VARIABLES // \*------------------------------------*/ /** // * CONTENTS // * // * COLORS // * Brand Colors...............Globally-available variables and config // * Neutral Colors.............Grayscale colors, including white and black // * Utility Colors.............Info, Warning, Error, Success // * // * TYPOGRAPHY // * Font Families..............The fonts used in the design system // * Sizing.....................Font sizing // * // * LAYOUT // * Max-widths.................Maximum layout container width // * // * SPACING // * Spacing defaults...........Spacing between elements // * // * BORDERS // * Border Width...............Border thicknesses // * Border Radius..............Border radius definitions // * // * ANIMATION // * Animation Speed............Transition/animation speed variables // * Animation easing...........Easing variables // * // * BREAKPOINTS // * Breakpoints................Global breakpoint definitions // */ /*------------------------------------*\ // #COLORS // \*------------------------------------*/ /** * Brand Colors * 1) Brand-specific colors */ :root { --color-brand-blue: #00bfff; --color-brand-blue-dark: #1c576e; --color-brand-orange: #fe8f3f; --color-brand-red: #ef1f3f; --color-brand-red-orange: #ff5f2f; --color-brand-yellow: #ffbf3f; --color-brand-yellow-orange: #faa634; /** * Neutral Colors * 1) Neutral colors are grayscale values used throughout the UI */ --color-neutral-white: #fff; --color-neutral-gray-04: #f4f4f4; --color-neutral-gray-08: #eaeaea; --color-neutral-gray-17: #d3d3d3; --color-neutral-gray-25: #bababa; --color-neutral-gray-53: #6e6f72; --color-neutral-gray-70: #4a4f54; --color-neutral-black: #000; /** * Utility Colors * 1) Utility colors are colors used to provide feedback, such as alert messages, * form validation, etc. */ --color-utility-info: #0192d0; --color-utility-info-light: #d3f2ff; --color-utility-error: #b12a0b; --color-utility-error-light: #fdded8; --color-utility-success: #03804d; --color-utility-success-light: #d4f3e6; --color-utility-warning: #a59b15; --color-utility-warning-light: #fffecf; --black: #404040; --dark: #737579; --light-grey: #f3f3f4; --orange: var(--color-brand-red-orange); /* ------------------------------------- BASE GLOBAL VARS --------------------------------------------*/ --primary-color: var(--color-brand-red-orange); --primary-bg: var(--color-brand-red-orange); --color-neutral-gray-04-2: #f9f9f9; --color-neutral-black-rgb: 0, 0, 0; /* Secundary */ --secondary-color: var(--color-brand-yellow-orange); --secondary-bg: var(--color-brand-yellow-orange); /* background */ --background-gradient-primary: linear-gradient(to right, var(--orange), var(--color-brand-yellow-orange), var(--color-brand-yellow-orange), var(--orange)); --background-gradient-primary2: linear-gradient(135deg, var(--color-brand-red-orange) 50%, var(--color-brand-yellow-orange) 100%); --background-gradient-primary3: linear-gradient(to right, var(--color-brand-orange), var(--color-brand-red)); /* ------------------------------------- COMPONENTS VARS --------------------------------------------*/ /* btn*/ --btn-bg-color: var(--primary-color); --btn-bg-color-gradient: linear-gradient(to right, var(--orange), var(--color-brand-yellow-orange), var(--color-brand-yellow-orange), var(--orange)); --btn-bg-color-gradient-trans: linear-gradient(to right, rgba(var(--orange), 0), rgba(var(--color-brand-yellow-orange), 0), rgba(var(--color-brand-yellow-orange), 0), rgba(var(--orange), 0)); --btn-bg-color-line: var(--primary-color); --btn-text-color: var(--color-neutral-white); /* accordion*/ --color-list-text: var(--primary-color); --color-title-expanded: var(--primary-color); /* address block*/ --color-address-block: var(--primary-color); --color-address-block-hover: var(--primary-color); /* alert*/ --bg-color-alert: var(--primary-color); /*carousel*/ --color-carousel-quotes: var(--primary-color); --color-carousel-quotes-link: var(--primary-color); --border-color-carousel: var(--primary-color); --bg-color-carousel-nav-active: var(--primary-color); /* clinicians-desc link color */ --border-color-clinicians-hover: var(--color-brand-red-orange); --text-color-clinicians-hover: var(--color-brand-red-orange); --text-color-clinicians-active: var(--color-brand-red-orange); /* CTA and datails */ --color-cta-link: var(--primary-color); --bg-details-summary: var(--primary-color); /* document */ --border-document-cta: var(--color-brand-red-orange); --background-gradient-color-orange: linear-gradient(to right, var(--color-brand-red-orange), var(--color-brand-orange)); /* event carousel */ --color-title-event: var(--color-brand-orange); /* featured clinician */ --color-info-featured-clinician: var(--color-brand-red-orange); --color-link-featured-clinician: var(--color-brand-red-orange); --color-link-border-featured-clinician: var(--color-brand-red-orange); --color-link-featured-clinician-hover: var(----color-brand-blue); --bg-color-gradient-link-featured-clinician: linear-gradient(to right, #ff5f2f, #faa634, #faa634, #ff5f2f); /* feed */ --color-feed-link: var(--primary-color); /* Field */ --bg-color-input-checked: var(--primary-color); /* Find a clinic */ --color-location-filter: var(--primary-color); --color-find-clinic-header: var(--primary-color); --border-field-clinic-hover: var(--primary-color); --color-feed-clinician-link: var(--primary-color); --border-clinician-profile: var(--primary-color); --color-clinician-profile: var(--primary-color); --color-clinician-btn: var(--primary-color); --color-clinic-directory-list: var(--primary-color); /* footer */ --color-footer-copyright: var(--primary-color); --color-footer-post: var(--color-neutral-gray-53); /* Hamburger */ --color-hamburger: var(--primary-color); /* Horizontal */ --color-horizontal-subnav-accordion-trigger: var(--primary-color); --bg-expanded-horizontal-subnav: var(--primary-color); --bg-gradient-expanded-horizontal-subnav: linear-gradient(135deg, var(--color-brand-red-orange) 50%, var(--color-brand-yellow-orange) 100%); --border-acordion-horizontal-subnav: var(--primary-color); --color-horizontal-subnav-link: var(--primary-color); --border-color-horizontal-subnav-active: var(--primary-color); /* Image carousel */ --color-image-carousel-btn-hover: var(--primary-color); /* Library */ --color-library-search-links-hover: var(--primary-color); --color-library-search-library-type: var(--primary-color); --color-library-search-header: var(--primary-color); --background-gradient-single-library: linear-gradient(to right, var(--color-brand-yellow-orange), var(--color-brand-red-orange)); --color-library-editor: var(--primary-color); --color-library-title: var(--primary-color); /* Link group */ --color-link-group-svg: var(--primary-color); /* location header */ --color-link-location-header-caps: var(--primary-color); --bg-chinic-share-footer-nav: var(--primary-color); /* map */ --color-map-gm-style: var(--primary-color); /* multiple clinicians */ --color-multiple-clinicians-expand-button: var(--primary-color); /* pagination */ --color-page-number-current: var(--primary-color); /* primary nav */ --color-primary-nav-current: var(--primary-color); --bg-primary-nav-before: var(--primary-color); --bg-gradiant-nav-before-hover: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0), #faa634, #ff5f2f); /* Quotes */ --color-quote-block: var(--primary-color); --color-quote-block-author: var(--primary-color); --color-quote-block-author-title: var(--primary-color); --color-quote-block-bold-before : var(--primary-color); --color-quote-block-content : var(--primary-color); --color-quote-button-before : var(--primary-color); /* search form */ --border-search-form-body: var(--color-brand-orange); /*stacked block list*/ --background-gradient-stacked-block-list: linear-gradient(to right, var(--color-brand-orange), var(--color-brand-red)); --background-gradient-stacked-block-list2: linear-gradient(to right, var(--color-brand-orange), var(--color-brand-red-orange)); --background-gradient-stacked-block-list3: linear-gradient(to right, var(--color-brand-red-orange), var(--color-brand-red)); --color-stacked-cta: var(--primary-color); /* subnav */ --color-subnav-before: var(--primary-color); --color-subnav-hover: var(--primary-color); --color-subnav-active: var(--primary-color); /* tabs */ --bg-tabs-list-selected: var(--primary-color); --border-color-tabs-panel: var(--primary-color); --color-title-tabs-panel: var(--primary-color); --color-link-tabs-block-list: var(--primary-color); /* vertical photo */ --color-title-vertical-photo: var(--primary-color); --border-color-vertical-photo: var(--primary-color); --color-block-quote-vertical-photo: var(--primary-color); /*------------------------------------*\ // #TYPOGRAPHY // \*------------------------------------*/ /** * Font Family */ --font-family-fallback: "Helvetica", "Arial", sans-serif; --font-family-primary: proxima-nova; /** * Font Sizing */ --font-size-sm: .75rem; /* 12px */ --font-size-sm-2: .875rem; /* 14px */ --font-size-med: 1rem; /* 16px */ --font-size-med-1: 1.125rem; /* 18px */ --font-size-med-2: 1.25rem; /* 20px */ --font-size-med-3: 1.5rem; /* 24px */ --font-size-large: 2rem; /* 32px */ --font-size-xl: 2rem; /* 48px */ --font-size-xxl: 3rem; /* 64px */ --body-font-size: var(--font-size-med); /** * Line Height */ --line-height-sm: .8; --line-height-sm-2: .9; --line-height-med: 1; --line-height-med-2: 1.2; --line-height-large: 1.6; --line-height-xl: 1.8; /*------------------------------------*\ #LAYOUT \*------------------------------------*/ /** * Max Width */ --l-max-width-xxl: 120rem; /* 1920px */ --l-max-width-xl: 90rem; /* 1440px */ --l-max-width-lg: 80rem; /* 1280px */ --l-max-width: 70rem; /* 1120px */ --l-max-width-sm: 60rem; /* 960px */ --l-max-width-xs: 45rem; /* 720px */ --l-max-width-xxs: 36rem; /* 576px */ --mobile-gutter: 92%; /*------------------------------------*\ #TAP TARGET \*------------------------------------*/ --tap-target: 48px; /*------------------------------------*\ #SPACING \*------------------------------------*/ /** * Spacing and offsets * 1) Used to space grids and body padding */ --spacing: 1.125rem; --spacing-small: calc(0.5 * var(--spacing)); --spacing-large: calc(2 * var(--spacing)); /*------------------------------------*\ #BORDERS \*------------------------------------*/ /** * Border */ --border-thickness: 1px; /** * Border radius */ --border-radius: 3rem; --border-radius-bottom: 0 0 1.25rem 1.25rem; --border-radius-top: 1.25rem 1.25rem 0 0; /*------------------------------------*\ #ANIMATION \*------------------------------------*/ /** * Transition Speed */ --anim-fade-quick: .15s; --anim-fade: .35s; --anim-fade-long: .5s; /** * Transition Ease */ --anim-ease: ease-in; --sticky-speed: .15s; /*------------------------------------*\ #BREAKPOINTS \*------------------------------------*/ /** * Breakpoints used in media queries * 1) These are not the only breakpoints used, but they provide a few defaults */ --bp-xs: 28em; /* 448px */ --bp-small: 35em; /* 560px */ --bp-med: 47em; /* 752px */ --bp-large: 60em; /* 960px */ --bp-xl: 70em; /* 1120px */ --bp-xxl: 90em; /* 1440px */ --mobile-nav-break: 47em; /*------------------------------------*\ #STICKY NAV *------------------------------------*/ --fn-height: 220px; }