:root { /* Font Family */ --global--font-primary: "Spartan", Helvetica, Arial, serif; --global--font-secondary: "Mulish", Helvetica, Arial, serif; --font-headings: var(--global--font-primary); --font-base: var(--global--font-secondary); /* Font Size */ --global--font-size-base: 16px; --global--font-size-xs: 0.75rem; --global--font-size-sm: 0.875rem; --global--font-size-md: 1rem; --global--font-size-lg: 1.375rem; --global--font-size-xl: 2rem; --global--font-size-xxl: 2.5rem; --global--font-size-xxxl: 3rem; --global--font-size-page-title: var(--global--font-size-xxxl); --global--letter-spacing: normal; /* Line Height */ --global--line-height-body: 1.5555; --global--line-height-heading: 1.46; --global--line-height-page-title: 1.3; --global--line-height-md: 1.8; --global--line-height-lg: 1.54; --global--line-height-sm: 1.75rem; --global--line-height-xs: 1.75rem; /* Headings */ --heading--font-family: var(--font-headings); --heading--letter-spacing: -0.8px; --heading--font-weight: 700; --heading--font-weight-page-title: 700; --heading--font-weight-strong: 900; --heading--font-size-h6: 1.25rem; --heading--font-size-h5: 1.5rem; --heading--font-size-h4: 1.875rem; --heading--font-size-h3: var(--global--font-size-xl); --heading--font-size-h2: var(--global--font-size-xxl); --heading--font-size-h1: var(--global--font-size-xxxl); --heading--font-size-h3-mobile: var(--global--font-size-xl); --heading--font-size-h2-mobile: var(--global--font-size-xxl); --heading--font-size-h1-mobile: var(--global--font-size-xxxl); --heading--letter-spacing-h6: --heading--letter-spacing; --heading--letter-spacing-h5: --heading--letter-spacing; --heading--letter-spacing-h4: --heading--letter-spacing; --heading--letter-spacing-h3: --heading--letter-spacing; --heading--letter-spacing-h2: --heading--letter-spacing; --heading--letter-spacing-h1: --heading--letter-spacing; --heading--line-height-h6: 1.7; --heading--line-height-h5: 1.4167; --heading--line-height-h4: 1.46; --heading--line-height-h3: 1.4; --heading--line-height-h2: 1.46; --heading--line-height-h1: 1.3; /* Block: Latest posts */ --latest-posts--title-font-family: var(--heading--font-family); --latest-posts--title-font-size: var(--heading--font-size-h3); --latest-posts--description-font-family: var(--global--font-secondary); --latest-posts--description-font-size: var(--global--font-size-md); --latest-posts--description-line-height: var(--global--line-height-md); --latest-posts--bottom-space: var(--global--spacing-vertical); --latest-posts--bottom-space-grid: var(--global--spacing-vertical-large); --list--font-family: var(--global--font-secondary); --definition-term--font-family: var(--global--font-primary); /* Colors */ --global--color-black: #000; --global--color-text-base: #161b3d; --global--color-text-lighten: #7b7485; --global--color-text-link: #2820fc; --global--color-gray-darken: #bdbdbd; --global--color-gray-base: #efefef; --global--color-gray-lighten: #f7f7f7; --global--color-third-base: #f551ff; --global--color-third-lighten: #e38fff; --global--color-third-darken: #8e36a8; --global--color-invert: white; --global--color-surface: #f7f7f7; --global--color-surface-invert: rgba(255, 255, 255, 0.11); --global--color-primary-base: #2820fc; --global--color-primary-lighten: #0069ff; --global--color-primary-darken: #0000d3; --global--color-secondary: #00e6ca; --global--color-secondary-lighten: #c4fcef; --global--color-secondary-base: #00e6ca; --global--color-background: white; --global--color-background-transparent: rgba(255, 255, 255, 0.8); --global--color-border: var(--global--color-secondary-base); --global--border-image-style: 15px solid var(--global--color-border); /* Functional Colors */ --global--color-success-base: #d1e4dd; --global--color-warning-base: #de350b; --global--color-info-base: var(--global--color-third-lighten); /* Social Colors */ --global--color-facebook: #135CB6; --global--color-linkedin: #2767B1; --global--color-pinterest: #E60023; --global--color-twitter: #00ACED; --global--color-instagram: #135CB6; /* Spacing */ --global--spacing-unit: 30px; --global--spacing-measure: unset; --global--spacing-horizontal: 30px; --global--spacing-horizontal-medium: 40px; --global--spacing-vertical-sm: 10px; --global--spacing-vertical: 40px; --global--spacing-vertical-large: 50px; --global--spacing-vertical-text: 28px; --global--spacing-vertical-small: 15px; --global--spacing-vertical-mobile: 30px; --global--spacing-horizontal-mobile: 30px; /* Outline */ --global--focus-outline: 1px dashed var(--global--color-gray-lighten); /* Border */ --global--border: 1px solid var(--global--color-gray-darken); /* Elevation */ --global--elevation: 1px 1px 3px 0 rgba(0, 0, 0, 0.2); --global--elevation-tiny: 0px 0px 1px rgba(40, 41, 61, 0.08), 0px 0.5px 2px rgba(96, 97, 112, 0.16); /* Gradient */ --global--linear-gradient: linear-gradient(180deg, rgba(0, 0, 0, 0) 50.52%, rgba(0, 0, 0, 0.65) 100%); /* Links */ --link--color-active: var(--global--color-secondary); --link--color-hover: var(--global--color-secondary); --link--color-focus: var(--global--color-secondary); /* Forms */ --form--font-family: var(--global--font-secondary); --form--font-size: var(--global--font-size-sm); --form--line-height: 1.69; --form--color-text: var(--global--color-gray-darken); --form--color-ranged: var(--global--color-secondary); --form--label-weight: 500; --form--border-color: var(--global--color-gray-darken); --form--icon-color: var(--global--color-text-base); --form--border-focus-color: var(--global--color-secondary); --form--border-width: 0 0 1px 0; --form--border-radius: 0; --form--spacing-unit: calc(0.5 * var(--global--spacing-unit)); --form--spacing-unit-vertical: 10px; --form--spacing-unit-horizontal: 10px; --form--field-background: var(--global--color-surface); /* Cover block */ --cover--height: 300px; --cover--color-foreground: var(--global--color-invert); --cover--color-background: var(--global--color-text-base); /* Buttons */ --button--color-text: var(--global--color-invert); --button--color-text-hover: var(--global--color-secondary); --button--color-text-active: var(--global--color-secondary); --button--color-background: var(--global--color-secondary); --button--color-background-active: var(--global--color-invert); --button--color-background-focus: var(--global--color-secondary-lighten); --button--focus-outline: none; --button--font-family: var(--global--font-primary); --button--font-size: 1rem; --button--font-size-large: 1.19rem; --button--font-weight: 600; --button--line-height: 1.75; --button--min-height: 2.25rem; --button--border-width: 1px; --button--border-radius: 0; --button--padding-vertical: 5px; --button--padding-vertical-large: 5px; --button--padding-horizontal: 26px; --button--padding-horizontal-large: 44px; --gallery--image-gap: 30px; /* entry */ --entry-header--color: var(--global--color-text-base); --entry-header--color-link: currentColor; --entry-header--color-hover: var(--global--color-text-base); --entry-header--color-focus: var(--global--color-secondary); --entry-header--font-size: var(--heading--font-size-h1); --entry-header--line-height: var(--heading--line-height-h1); --entry-content--font-family: var(--global--font-secondary); --entry-author-bio--font-family: var(--heading--font-family); --entry-author-bio--font-size: var(--heading--font-size-h5); --entry-header-meta--color: var(--global--color-text-lighten); --entry-header-meta--font-size: var(--global--font-size-xs); /* Header */ --branding--color-text: var(--global--color-text-base); --branding--color-link: var(--global--color-text-base); --branding--color-link-hover: var(--global--color-secondary); --branding--title--font-family: var(--global--font-primary); --branding--title--font-size: var(--global--font-size-lg); --branding--title--font-size-mobile: var(--heading--font-size-h4); --branding--title--font-weight: normal; --branding--title--text-transform: uppercase; --branding--description--font-family: var(--global--font-secondary); --branding--description--font-size: var(--global--font-size-sm); --branding--title--margin-vertical: var(--primary-nav--padding-vertical); --branding--logo--max-width: 300px; --branding--logo--max-height: 100px; --branding--logo--max-width-mobile: 96px; --branding--logo--max-height-mobile: 96px; /* Main navigation */ --primary-nav--font-family: var(--global--font-primary); --primary-nav--font-family-mobile: var(--global--font-primary); --primary-nav--font-family-sub-menu: var(--global--font-secondary); --primary-nav--font-size: 1.06rem; --primary-nav--font-size-sub-menu: var(--global--font-size-md); --primary-nav--font-size-mobile: var(--global--font-size-lg); --primary-nav--font-size-sub-menu-mobile: var(--global--font-size-md); --primary-nav--font-size-button: var(--global--font-size-xs); --primary-nav--font-style: normal; --primary-nav--font-style-sub-menu-mobile: normal; --primary-nav--font-weight: 300; --primary-nav--font-weight-button: 500; --primary-nav--color-link: var(--global--color-text-base); --primary-nav--color-link-hover: var(--global--color-text-base); --primary-nav--color-text: var(--global--color-text-base); --primary-nav--padding-vertical: 23px; --primary-nav--padding: var(--primary-nav--padding-vertical) 20px; --primary-nav--padding-mobile: 5px 20px; --primary-nav--border-color: var(--global--color-secondary); /* Outline */ --primary-nav--focus-outline: 1px dashed var(--global--color-gray-lighten); /* Pagination */ --pagination--color-text: var(--global--color-text-base); --pagination--color-link-hover: var(--global--color-text-base); --pagination--font-family: var(--global--font-secondary); --pagination--font-size: var(--global--font-size-sm); --pagination--font-weight: normal; --pagination--font-weight-strong: 600; --pagination--link-background: none; --pagination--link-background-current: var(--global--color-gray-base); /* Sidebar */ /* Footer */ --footer--color-text: var(--global--color-text-base); --footer--color-link: var(--global--color-text-base); --footer--color-link-hover: var(--global--color-secondary); --footer--font-family: var(--global--font-secondary); --footer--font-size: var(--global--font-size-sm); /* Block: Pull quote */ --pullquote--font-family: var(--global--font-primary); --pullquote--font-size: var(--heading--font-size-h4); --pullquote--font-style: normal; --pullquote--letter-spacing: var(--heading--letter-spacing-h4); --pullquote--line-height: var(--heading--line-height-h4); --pullquote--border-width: 2px; --pullquote--border-color: var(--global--color-primary-base); --pullquote--color-foreground: var(--global--color-surface); --pullquote--color-background: var(--global--color-surface); --pullquote--color-content: var(--global--color-text-base); --pullquote--color-cite: var(--global--color-text-lighten); --quote--font-family: var(--global--font-secondary); --quote--font-size: var(--global--font-size-md); --quote--font-size-large: var(--global--font-size-lg); --quote--font-style: italic; --quote--font-weight: 400; --quote--font-weight-strong: bolder; --quote--font-style-large: italic; --quote--font-style-cite: normal; --quote--line-height: var(--global--line-height-body); --quote--line-height-large: var(--global--line-height-md); --separator--border-color: var(--global--color-text-base); --separator--height: 1px; /* Block: Table */ --table--border-color: var(--global--color-text-base); --table--stripes-border-color: var(--global--color-gray-lighten); --table--stripes-background-color: var(--global--color-gray-lighten); --table--has-background-text-color: var(--global--color-gray-darken); /* Widgets */ --widget--line-height-list: 1.9; --widget--line-height-title: var(--heading--line-height-h6); --widget--font-weight-title: 700; --widget--spacing-menu: calc(0.66 * var(--global--spacing-unit)); --widget--font-size: var(--global--font-size-base); --widget--color-link: var(--global--color-primary-base); --widget--color-link-hover: var(--global--color-primary-base); /* Admin-bar height */ --global--admin-bar--height: 0; /* System info */ --system-info--background-color: var(--global--color-info-base); --system-info--color-text: var(--global--color-info-base); --system-info--padding: 20px; --system-info--font-size: var(--global--font-size-sm); } .admin-bar { --global--admin-bar--height: 32px; } @media only screen and (max-width: 782px) { .admin-bar { --global--admin-bar--height: 46px; } } @media only screen and (min-width: 652px) { :root { --global--font-size-base: 16px; --global--font-size-xs: 0.75rem; --global--font-size-sm: 0.875rem; --global--font-size-md: 1.125rem; --global--font-size-lg: 1.375rem; --global--font-size-xl: 2.5rem; --global--font-size-xxl: 3.75rem; --global--font-size-xxxl: 6rem; --global--font-size-page-title: var(--global--font-size-xxxl); } }