/* Theme Name: Docebo Theme URI: https://github.com/EngageMassive/ Author: Massive Media Author URI: https://engagemassive.com Description: Docebo's WordPress Theme Version: 1.0 Requires at least: 6.5 Tested up to: 6.5.5 Requires PHP: 8.0 Text Domain: docebo */ :root { /* CONFIGURABLE SETTINGS */ /* COLORS */ --color-white: #FFFFFF; --color-lightest-grey: #ebebeb; --color-light-grey: #F0F0F0; --color-grey: #D0D0D0; --color-dark-grey: #727A80; --color-darkest-grey: #2F2F2F; --color-black: #000000; --color-blue: #0259F7; --color-dark-blue: #093FA0; --color-red: #FF5A3D; --color-dark-red: #D84930; --color-yellow: #FFF04B; --color-dark-yellow: #EBDC37; --color-green: #50FFB5; --color-dark-green: #28D98E; --color-cyan: #50F3FF; --color-dark-cyan: #28D98E; --color-purple: #A657C2; --color-dark-purple: #9243AE; /* BACKGROUND */ --light-background-color: var(--color-white); --medium-blue-background-color: var(--color-blue); --medium-background-color: var(--color-light-grey); --dark-background-color: var(--color-black); --blue-background-color: var(--color-blue); /* TEXT */ /* PRIMARY FONT */ --primary-font: "Figtree", sans-serif; --primary-line-height: 1.2; --primary-letter-spacing: -0.01em; --primary-font-weight: 600; /* SECONDARY FONT */ --secondary-font: var(--primary-font); --secondary-line-height: 1.3; --secondary-letter-spacing: var(--primary-letter-spacing); --secondary-font-weight: 400; /* BODY FONT */ --body-font: var(--primary-font); --body-line-height: 1.6; --body-letter-spacing: var(--primary-letter-spacing); --body-font-weight: 400; /* LIGHT FONT */ --light-font-weight: 300; /* FONT SIZES */ --eyebrow-font-size: 1.2rem; --base-font-size: 1.6rem; --font-multiplier: 1.125; --font-size-h1: 3.6rem; --font-size-h2: 2.8rem; --font-size-h3: 2.4rem; --font-size-h4: 2rem; --font-size-h5: 1.6rem; --font-size-h6: 1.6rem; --font-size-e2: 2rem; --font-size-e1: 1.8rem; --font-size-body-large: 2rem; /* LIGHT BACKGROUND COLORS */ --light-background-text-color: #000000; --light-background-title-color: #000000; --light-background-eyebrow-color: #000000; --light-background-link-color: var(--color-blue); --light-background-hover-link-color: var(--color-dark-blue); --light-background-accent-color: #888888; /* DARK BACKGROUND COLORS */ --dark-background-text-color: var(--color-white); --dark-background-title-color: var(--color-white); --dark-background-eyebrow-color: var(--color-white); --dark-background-link-color: #80B0F9; --dark-background-hover-link-color: #0062F3; --dark-background-accent-color: #888888; /* PRIMARY BUTTON */ /* STYLE */ --primary-button-border-width: 0.1rem; --primary-button-border-style: solid; --primary-button-border-radius: calc(var(--element-border-radius) / 2); /* LIGHT BACKGROUND COLORS */ --light-background-primary-button-border-color: var(--color-blue); --light-background-primary-button-background-color: var(--color-blue); --light-background-primary-button-text-color: var(--color-white); --light-background-primary-button-box-shadow: none; --light-background-primary-button-hover-border-color: var(--light-background-hover-link-color); --light-background-primary-button-hover-background-color: var(--light-background-hover-link-color); --light-background-primary-button-hover-text-color: var(--color-white); --light-background-primary-button-hover-box-shadow: none; /* DARK BACKGROUND COLORS */ --dark-background-primary-button-border-color: var(--color-white); --dark-background-primary-button-background-color: var(--color-white); --dark-background-primary-button-text-color: var(--color-black); --dark-background-primary-button-box-shadow: none; --dark-background-primary-button-hover-border-color: var(--color-black); --dark-background-primary-button-hover-background-color: var(--color-black); --dark-background-primary-button-hover-text-color: var(--color-white); --dark-background-primary-button-hover-box-shadow: none; /* SECONDARY BUTTON */ /* STYLE */ --secondary-button-border-width: 0.1rem; --secondary-button-border-style: solid; --secondary-button-border-radius: calc(var(--element-border-radius) / 2); /* LIGHT BACKGROUND COLORS */ --light-background-secondary-button-border-color: var(--color-blue); --light-background-secondary-button-background-color: transparent; --light-background-secondary-button-text-color: var(--color-blue); --light-background-secondary-button-box-shadow: none; --light-background-secondary-button-hover-border-color: var(--color-blue); --light-background-secondary-button-hover-background-color: transparent; --light-background-secondary-button-hover-text-color: var(--color-blue); --light-background-secondary-button-hover-box-shadow: none; /* DARK BACKGROUND COLORS */ --dark-background-secondary-button-border-color: var(--color-white); --dark-background-secondary-button-background-color: transparent; --dark-background-secondary-button-text-color: var(--color-white); --dark-background-secondary-button-box-shadow: none; --dark-background-secondary-button-hover-border-color: var(--color-white); --dark-background-secondary-button-hover-background-color: var(--color-white); --dark-background-secondary-button-hover-text-color: #000000; --dark-background-secondary-button-hover-box-shadow: none; /* TERTIARY BUTTON */ --tertiary-button-border-width: 0.1rem; --tertiary-button-border-style: solid; --tertiary-button-border-radius: calc(var(--element-border-radius) / 2); /* FORMS */ --form-input-border-style: solid; --form-input-border-width: 0.1rem; --form-input-border-radius: 0; --light-background-form-input-border-color: #000000; --light-background-form-input-background-color: transparent; --light-background-form-input-option-background-color: var(--color-white); --light-background-form-input-text-color: #000000; --light-background-form-input-placeholder-text-color: #595959; --light-background-form-input-hover-border-color: var(--light-background-form-input-border-color); --light-background-form-input-hover-background-color: var(--light-background-form-input-background-color); --light-background-form-input-hover-text-color: var(--light-background-form-input-text-color); --light-background-form-input-focus-border-color: #595959; --light-background-form-input-focus-background-color: transparent; --light-background-form-input-focus-text-color: #000000; --light-background-form-input-autofill-border-color: #595959; --light-background-form-input-autofill-background-color: #F3F3F3; --light-background-form-input-autofill-text-color: #000000; --light-background-form-input-label-color: #595959; --light-background-form-input-notice-color: #000000; --dark-background-form-input-border-color: var(--color-white); --dark-background-form-input-background-color: transparent; --dark-background-form-input-option-background-color: #000000; --dark-background-form-input-text-color: var(--color-white); --dark-background-form-input-placeholder-text-color: #F3F3F3; --dark-background-form-input-hover-border-color: var(--dark-background-form-input-border-color); --dark-background-form-input-hover-background-color: var(--dark-background-form-input-background-color); --dark-background-form-input-hover-text-color: var(--dark-background-form-input-text-color); --dark-background-form-input-focus-border-color: #F3F3F3; --dark-background-form-input-focus-background-color: transparent; --dark-background-form-input-focus-text-color: var(--color-white); --dark-background-form-input-autofill-border-color: #F3F3F3; --dark-background-form-input-autofill-background-color: #595959; --dark-background-form-input-autofill-text-color: #F3F3F3; --dark-background-form-input-label-color: #F3F3F3; --dark-background-form-input-notice-color: var(--color-white); /* EYEBROW */ --eyebrow-font-family: var(--primary-font); --eyebrow-letter-spacing: 0.06em; --eyebrow-line-height: 1.6; --eyebrow-font-weight: 600; --eyebrow-text-transform: uppercase; --eyebrow-font-style: normal; /* MARGINS */ --column-gap: var(--padding-lg); --row-gap: var(--padding-lg); --item-column-gap: var(--padding-md); --item-row-gap: var(--padding-md); --small-column-gap: calc(var(--padding-md) - var(--padding-xs)); --small-row-gap: calc(var(--padding-md) - var(--padding-xs)); --xsmall-column-gap: var(--padding-xs); --xsmall-row-gap: var(--padding-xs); /* MISCELANEOUS */ --default-block-width: 80rem; --page-padding: 1.2rem; --container-width: 100%; --element-drop-shadow: drop-shadow(0.1rem 0px 1rem rgba(0, 0, 0, 0.4)); --element-box-shadow-light-background: 0rem .8rem 2.4rem 0rem #00000014; --element-box-shadow-medium-background: 0rem .8rem 2.4rem 0rem #00000014; --element-box-shadow-dark-background: 0rem .8rem 2.4rem 0rem #00000014; --element-border-radius: 1.6rem; --admin-bar-height: 0rem; --wide-width: calc(min(var(--container-width), 100%) - (var(--page-padding) * 2)); --full-width: calc(100% - (var(--page-padding) * 2)); /* TOOLS*/ /* FONT SIZES */ /* CALCULATIONS */ --font-headline-000: var(--font-headline-1); --font-headline-00: var(--font-headline-1); --font-headline-0: var(--font-headline-1); --font-headline-1: var(--primary-font-weight) var(--font-size-h1) / var(--primary-line-height) var(--secondary-font); --font-headline-2: var(--primary-font-weight) var(--font-size-h2) / var(--secondary-line-height) var(--secondary-font); --font-headline-3: var(--primary-font-weight) var(--font-size-h3) / var(--secondary-line-height) var(--secondary-font); --font-headline-4: var(--primary-font-weight) var(--font-size-h4) / var(--secondary-line-height) var(--secondary-font); --font-headline-5: var(--primary-font-weight) var(--font-size-h5) / var(--secondary-line-height) var(--secondary-font); --font-headline-6: var(--primary-font-weight) var(--font-size-h6) / 1.4 var(--secondary-font); --font-headline-7: var(--secondary-font-weight) var(--font-size-e1) / var(--secondary-line-height) var(--secondary-font); --font-headline-8: var(--secondary-font-weight) var(--base-font-size) / var(--secondary-line-height) var(--secondary-font); --font-elevated-1: var(--primary-font-weight) var(--font-size-e2) / var(--primary-line-height) var(--primary-font); --font-elevated-2: var(--primary-font-weight) var(--font-size-e1) / var(--primary-line-height) var(--primary-font); --font-body-large: var(--body-font-weight) var(--font-size-body-large) / var(--body-line-height) var(--primary-font); --font-body: var(--secondary-font-weight) var(--base-font-size) / var(--body-line-height) var(--primary-font); --font-body-small: var(--secondary-font-weight) calc(var(--base-font-size) / var(--font-multiplier-pow-1)) / var(--body-line-height) var(--primary-font); --font-body-xsmall: var(--secondary-font-weight) var(--eyebrow-font-size) / var(--body-line-height) var(--primary-font); --font-eyebrow: var(--eyebrow-font-weight) var(--eyebrow-font-size) / var(--eyebrow-line-height) var(--primary-font); /* PRIMARY BUTTON */ /* STYLE */ --primary-button-padding: var(--primary-button-vertical-padding) var(--primary-button-horizontal-padding); /* SECONDARY BUTTON */ /* STYLE */ --secondary-button-padding: var(--secondary-button-vertical-padding) var(--secondary-button-horizontal-padding); /* ACTIVE COLORS */ /* BACKGROUND */ --background-color: var(--light-background-color); /* BOX SHADOW */ --element-box-shadow: var(--element-box-shadow-light-background); /* TEXT COLORS */ --text-color: var(--light-background-text-color); --title-color: var(--light-background-title-color); --eyebrow-color: var(--light-background-eyebrow-color); --link-color: var(--light-background-link-color); --hover-link-color: var(--light-background-hover-link-color); --accent-color: var(--light-background-accent-color); /* PRIMARY BUTTON */ --primary-button-border-color: var(--light-background-primary-button-border-color); --primary-button-background-color: var(--light-background-primary-button-background-color); --primary-button-text-color: var(--light-background-primary-button-text-color); --primary-button-box-shadow: var(--light-background-primary-button-box-shadow); --primary-button-hover-border-color: var(--light-background-primary-button-hover-border-color); --primary-button-hover-background-color: var(--light-background-primary-button-hover-background-color); --primary-button-hover-text-color: var(--light-background-primary-button-hover-text-color); --primary-button-hover-box-shadow: var(--light-background-primary-button-hover-box-shadow); /* SECONDARY BUTTON */ --secondary-button-border-color: var(--light-background-secondary-button-border-color); --secondary-button-background-color: var(--light-background-secondary-button-background-color); --secondary-button-text-color: var(--light-background-secondary-button-text-color); --secondary-button-box-shadow: var(--light-background-secondary-button-box-shadow); --secondary-button-hover-border-color: var(--light-background-secondary-button-hover-border-color); --secondary-button-hover-background-color: var(--light-background-secondary-button-hover-background-color); --secondary-button-hover-text-color: var(--light-background-secondary-button-hover-text-color); --secondary-button-hover-box-shadow: var(--light-background-secondary-button-hover-box-shadow); /* FORMS */ --form-input-border-color: var(--light-background-form-input-border-color); --form-input-background-color: var(--light-background-form-input-background-color); --form-input-option-background-color: var(--light-background-form-input-option-background-color); --form-input-text-color: var(--light-background-form-input-text-color); --form-input-placeholder-text-color: var(--light-background-form-input-placeholder-text-color); --form-input-hover-border-color: var(--light-background-form-input-hover-border-color); --form-input-hover-background-color: var(--light-background-form-input-hover-background-color); --form-input-hover-text-color: var(--light-background-form-input-hover-text-color); --form-input-focus-border-color: var(--light-background-form-input-focus-border-color); --form-input-focus-background-color: var(--light-background-form-input-focus-background-color); --form-input-focus-text-color: var(--light-background-form-input-focus-text-color); --form-input-autofill-border-color: var(--light-background-form-input-autofill-border-color); --form-input-autofill-background-color: var(--light-background-form-input-autofill-background-color); --form-input-autofill-text-color: var(--light-background-form-input-autofill-text-color); --form-input-label-color: var(--light-background-form-input-label-color); --form-input-notice-color: var(--light-background-form-input-notice-color); } @media (max-width: 767px) { :root { /* CONFIGURABLE SETTINGS */ /* TEXT */ --font-multiplier: 1.125; --base-font-size: 1.6rem; --font-size-h1: 3.6rem; --font-size-h2: 2.8rem; --font-size-h3: 2.4rem; --font-size-h4: 2rem; --font-size-h5: 1.6rem; --font-size-h6: 1.2rem; --font-size-e2: 2rem; --font-size-e1: 1.8rem; --font-size-body-large: 2rem; --font-size-body: 1.6rem; --font-size-body-small: 1.2rem; /* MARGINS */ --block-margin: var(--padding-xl); --padding-vertical: 2.4rem; --padding-center: 0; --padding-xs: 0.4rem; --padding-sm: 0.8rem; --padding-md: 1.6rem; --padding-lg: 2.4rem; --padding-xl: 6.4rem; --huge-column-gap: 11.6rem; --huge-row-gap: 11.6rem; /* MISCELANEOUS */ --gap-sizing: 2.4rem; --page-padding: 1.6rem; /* GRID */ --grid-margin-width: 1.2rem; --grid-columns-width: 7.2rem; --grid-columns: 0.4rem; /* BUTTONS */ --primary-button-width: 21em; --primary-button-vertical-padding: 1em; --primary-button-horizontal-padding: 1.5em; --secondary-button-width: 21em; --secondary-button-vertical-padding: 1em; --secondary-button-horizontal-padding: 1.5em; --tertiary-button-vertical-padding: 1em; --tertiary-button-horizontal-padding: 0; } } @media (min-width: 768px) and (max-width: 991px) { :root { /* CONFIGURABLE SETTINGS */ /* TEXT */ --font-multiplier: 1.2; --base-font-size: 1.6rem; --font-size-h1: 4.0rem; --font-size-h2: 3.2rem; --font-size-h3: 2.4rem; --font-size-h4: 2.0rem; --font-size-h5: 1.6rem; --font-size-h6: 1.2rem; --font-size-e2: 2rem; --font-size-e1: 1.8rem; --font-size-body-large: 2.0rem; --font-size-body: 1.6rem; --font-size-body-small: 1.2rem; /* MARGINS */ --block-margin: var(--padding-xl); --padding-vertical: 3.6rem; --padding-center: var(--padding-md); --padding-xs: 0.8rem; --padding-sm: 1.2rem; --padding-md: 2.4rem; --padding-lg: 3.6rem; --padding-xl: 6.4rem; --huge-column-gap: 14.8rem; --huge-row-gap: 14.8rem; /* MISCELANEOUS */ --gap-sizing: 2.4rem; --page-padding: 1.6rem; /* GRID */ --grid-margin-width: 2.4rem; --grid-columns-width: 10rem; --grid-columns: 1.2rem; /* BUTTONS */ --primary-button-width: 14em; --primary-button-vertical-padding: 1em; --primary-button-horizontal-padding: 1.5em; --secondary-button-width: 14em; --secondary-button-vertical-padding: 1em; --secondary-button-horizontal-padding: 1.5em; --tertiary-button-vertical-padding: 1em; --tertiary-button-horizontal-padding: 0; } } @media (min-width: 992px) { :root { /* CONFIGURABLE SETTINGS */ /* TEXT */ --font-multiplier: 1.2; --base-font-size: 1.6rem; --font-size-h1: 5.6rem; --font-size-h2: 3.6rem; --font-size-h3: 2.8rem; --font-size-h4: 2.4rem; --font-size-h5: 2.0rem; --font-size-h6: 1.6rem; --font-size-e2: 2rem; --font-size-e1: 1.8rem; --font-size-body-large: 2.4rem; --font-size-body: 1.6rem; --font-size-body-small: 1.2rem; /* MARGINS */ --block-margin: var(--padding-xl); --padding-vertical: 4.8rem; --padding-center: 23.2rem; --padding-xs: 0.8rem; --padding-sm: 1.6rem; --padding-md: 3.2rem; --padding-lg: 4.8rem; --padding-xl: 12.8rem; --huge-column-gap: 14.8rem; --huge-row-gap: 14.8rem; /* MISCELANEOUS */ --gap-sizing: 3.2rem; --container-width: 144rem; --page-padding: 4rem; /* GRID */ --grid-margin-width: 4rem; --grid-columns-width: 8.4rem; --grid-columns: 1.2rem; /* BUTTONS */ --primary-button-width: 12.50em; --primary-button-vertical-padding: 1em; --primary-button-horizontal-padding: 1.5em; --secondary-button-width: 12.50em; --secondary-button-vertical-padding: 1em; --secondary-button-horizontal-padding: 1.5em; --tertiary-button-vertical-padding: 1em; --tertiary-button-horizontal-padding: 0; } } html { scroll-behavior: smooth; } /* BLOCKS WIDTH */ .blocks-container>* { max-width: min(var(--default-block-width), var(--full-width)); margin-left: auto; margin-right: auto; } .blocks-container>.alignwide { max-width: var(--wide-width); } .blocks-container>.alignfull { max-width: var(--full-width); } main>.blocks-container>*:first-child { margin-top: 0; margin-bottom: 0; padding: var(--padding-lg) 0 0 0; } :not(.single)>main>.blocks-container>*:first-child { margin-top: 0; margin-bottom: 0; padding: var(--padding-xl) 0; } .blocks-container ul { list-style: disc; padding-left: 3.25rem; } /* COLOR SCHEMES */ [data-color-scheme|="light"] { /* BACKGROUND */ --background-color: var(--light-background-color); /* BOX SHADOW */ --element-box-shadow: var(--element-box-shadow-light-background); } [data-color-scheme|="medium"] { /* BACKGROUND */ --background-color: var(--medium-background-color); /* BOX SHADOW */ --element-box-shadow: var(--element-box-shadow-medium-background); } [data-color-scheme|="light"], [data-color-scheme|="medium"] { /* TEXT COLORS */ --text-color: var(--light-background-text-color); --title-color: var(--light-background-title-color); --eyebrow-color: var(--light-background-eyebrow-color); --link-color: var(--light-background-link-color); --hover-link-color: var(--light-background-hover-link-color); --accent-color: var(--light-background-accent-color); /* PRIMARY BUTTON */ --primary-button-border-color: var(--light-background-primary-button-border-color); --primary-button-background-color: var(--light-background-primary-button-background-color); --primary-button-text-color: var(--light-background-primary-button-text-color); --primary-button-box-shadow: var(--light-background-primary-button-box-shadow); --primary-button-hover-border-color: var(--light-background-primary-button-hover-border-color); --primary-button-hover-background-color: var(--light-background-primary-button-hover-background-color); --primary-button-hover-text-color: var(--light-background-primary-button-hover-text-color); --primary-button-hover-box-shadow: var(--light-background-primary-button-hover-box-shadow); /* SECONDARY BUTTON */ --secondary-button-border-color: var(--light-background-secondary-button-border-color); --secondary-button-background-color: var(--light-background-secondary-button-background-color); --secondary-button-text-color: var(--light-background-secondary-button-text-color); --secondary-button-box-shadow: var(--light-background-secondary-button-box-shadow); --secondary-button-hover-border-color: var(--light-background-secondary-button-hover-border-color); --secondary-button-hover-background-color: var(--light-background-secondary-button-hover-background-color); --secondary-button-hover-text-color: var(--light-background-secondary-button-hover-text-color); --secondary-button-hover-box-shadow: var(--light-background-secondary-button-hover-box-shadow); /* FORMS */ --form-input-border-color: var(--light-background-form-input-border-color); --form-input-background-color: var(--light-background-form-input-background-color); --form-input-option-background-color: var(--light-background-form-input-option-background-color); --form-input-text-color: var(--light-background-form-input-text-color); --form-input-placeholder-text-color: var(--light-background-form-input-placeholder-text-color); --form-input-hover-border-color: var(--light-background-form-input-hover-border-color); --form-input-hover-background-color: var(--light-background-form-input-hover-background-color); --form-input-hover-text-color: var(--light-background-form-input-hover-text-color); --form-input-focus-border-color: var(--light-background-form-input-focus-border-color); --form-input-focus-background-color: var(--light-background-form-input-focus-background-color); --form-input-focus-text-color: var(--light-background-form-input-focus-text-color); --form-input-autofill-border-color: var(--light-background-form-input-autofill-border-color); --form-input-autofill-background-color: var(--light-background-form-input-autofill-background-color); --form-input-autofill-text-color: var(--light-background-form-input-autofill-text-color); --form-input-label-color: var(--light-background-form-input-label-color); --form-input-notice-color: var(--light-background-form-input-notice-color); /* BODY STYLES*/ background-color: var(--background-color); color: var(--text-color); } [data-color-scheme|="dark"], [data-color-scheme|="dark-grey"], [data-color-scheme|="blue"] { /* BACKGROUND */ --background-color: var(--dark-background-color); /* BOX SHADOW */ --element-box-shadow: var(--element-box-shadow-dark-background); /* TEXT COLORS */ --text-color: var(--dark-background-text-color); --title-color: var(--dark-background-title-color); --eyebrow-color: var(--dark-background-eyebrow-color); --link-color: var(--dark-background-link-color); --hover-link-color: var(--dark-background-hover-link-color); --accent-color: var(--dark-background-accent-color); /* PRIMARY BUTTON */ --primary-button-border-color: var(--dark-background-primary-button-border-color); --primary-button-background-color: var(--dark-background-primary-button-background-color); --primary-button-text-color: var(--dark-background-primary-button-text-color); --primary-button-box-shadow: var(--dark-background-primary-button-box-shadow); --primary-button-hover-border-color: var(--dark-background-primary-button-hover-border-color); --primary-button-hover-background-color: var(--dark-background-primary-button-hover-background-color); --primary-button-hover-text-color: var(--dark-background-primary-button-hover-text-color); --primary-button-hover-box-shadow: var(--dark-background-primary-button-hover-box-shadow); /* SECONDARY BUTTON */ --secondary-button-border-color: var(--dark-background-secondary-button-border-color); --secondary-button-background-color: var(--dark-background-secondary-button-background-color); --secondary-button-text-color: var(--dark-background-secondary-button-text-color); --secondary-button-box-shadow: var(--dark-background-secondary-button-box-shadow); --secondary-button-hover-border-color: var(--dark-background-secondary-button-hover-border-color); --secondary-button-hover-background-color: var(--dark-background-secondary-button-hover-background-color); --secondary-button-hover-text-color: var(--dark-background-secondary-button-hover-text-color); --secondary-button-hover-box-shadow: var(--dark-background-secondary-button-hover-box-shadow); /* FORMS */ --form-input-border-color: var(--dark-background-form-input-border-color); --form-input-background-color: var(--dark-background-form-input-background-color); --form-input-option-background-color: var(--dark-background-form-input-option-background-color); --form-input-text-color: var(--dark-background-form-input-text-color); --form-input-placeholder-text-color: var(--dark-background-form-input-placeholder-text-color); --form-input-hover-border-color: var(--dark-background-form-input-hover-border-color); --form-input-hover-background-color: var(--dark-background-form-input-hover-background-color); --form-input-hover-text-color: var(--dark-background-form-input-hover-text-color); --form-input-focus-border-color: var(--dark-background-form-input-focus-border-color); --form-input-focus-background-color: var(--dark-background-form-input-focus-background-color); --form-input-focus-text-color: var(--dark-background-form-input-focus-text-color); --form-input-autofill-border-color: var(--dark-background-form-input-autofill-border-color); --form-input-autofill-background-color: var(--dark-background-form-input-autofill-background-color); --form-input-autofill-text-color: var(--dark-background-form-input-autofill-text-color); --form-input-label-color: var(--dark-background-form-input-label-color); --form-input-notice-color: var(--dark-background-form-input-notice-color); /* BODY STYLES*/ background-color: var(--background-color); color: var(--text-color); } [data-color-scheme|="dark-grey"] { --background-color: var(--color-darkest-grey); } [data-color-scheme="dark-blue"] { --background-color: var(--blue-background-color); } [data-color-scheme|="blue"] { /* BACKGROUND */ --background-color: var(--blue-background-color); } /* LIGHT BLUE COLOR SCHEME */ [data-color-scheme|="light-blue"] { /* BACKGROUND */ --background-color: #EEF4FF; /* BOX SHADOW */ --element-box-shadow: var(--element-box-shadow-light-background); /* TEXT COLORS */ --text-color: #000000; --title-color: #000000; --eyebrow-color: var(--light-background-eyebrow-color); --link-color: var(--light-background-link-color); --hover-link-color: var(--light-background-hover-link-color); --accent-color: var(--light-background-accent-color); /* PRIMARY BUTTON */ --primary-button-border-color: var(--light-background-primary-button-border-color); --primary-button-background-color: var(--light-background-primary-button-background-color); --primary-button-text-color: var(--light-background-primary-button-text-color); --primary-button-box-shadow: var(--light-background-primary-button-box-shadow); --primary-button-hover-border-color: var(--light-background-primary-button-hover-border-color); --primary-button-hover-background-color: var(--light-background-primary-button-hover-background-color); --primary-button-hover-text-color: var(--light-background-primary-button-hover-text-color); --primary-button-hover-box-shadow: var(--light-background-primary-button-hover-box-shadow); /* SECONDARY BUTTON */ --secondary-button-border-color: var(--light-background-secondary-button-border-color); --secondary-button-background-color: var(--light-background-secondary-button-background-color); --secondary-button-text-color: var(--light-background-secondary-button-text-color); --secondary-button-box-shadow: var(--light-background-secondary-button-box-shadow); --secondary-button-hover-border-color: var(--light-background-secondary-button-hover-border-color); --secondary-button-hover-background-color: var(--light-background-secondary-button-hover-background-color); --secondary-button-hover-text-color: var(--light-background-secondary-button-hover-text-color); --secondary-button-hover-box-shadow: var(--light-background-secondary-button-hover-box-shadow); /* FORMS */ --form-input-border-color: var(--light-background-form-input-border-color); --form-input-background-color: var(--light-background-form-input-background-color); --form-input-option-background-color: var(--light-background-form-input-option-background-color); --form-input-text-color: var(--light-background-form-input-text-color); --form-input-placeholder-text-color: var(--light-background-form-input-placeholder-text-color); --form-input-hover-border-color: var(--light-background-form-input-hover-border-color); --form-input-hover-background-color: var(--light-background-form-input-hover-background-color); --form-input-hover-text-color: var(--light-background-form-input-hover-text-color); --form-input-focus-border-color: var(--light-background-form-input-focus-border-color); --form-input-focus-background-color: var(--light-background-form-input-focus-background-color); --form-input-focus-text-color: var(--light-background-form-input-focus-text-color); --form-input-autofill-border-color: var(--light-background-form-input-autofill-border-color); --form-input-autofill-background-color: var(--light-background-form-input-autofill-background-color); --form-input-autofill-text-color: var(--light-background-form-input-autofill-text-color); --form-input-label-color: var(--light-background-form-input-label-color); --form-input-notice-color: var(--light-background-form-input-notice-color); /* BODY STYLES*/ background-color: var(--background-color); color: var(--text-color); } /* STYLES */ html { font-size: 62.5%; } body { text-rendering: geometricPrecision; font: var(--font-body); font-size: var(--base-font-size); letter-spacing: var(--primary-letter-spacing); color: var(--text-color); background-color: var(--background-color); } body.admin-bar { --admin-bar-height: var(--wp-admin--admin-bar--height); } @media (max-width: 991px) { main { padding-top: calc(var(--full-header-height, 135px)); } } img { max-width: 100%; height: auto; } svg { display: block; max-width: 100%; height: auto; } a { transition: all 0.3s ease; text-decoration-color: transparent; text-decoration-skip-ink: none; color: var(--link-color); text-underline-offset: 0.2rem; } a:is(:hover, :focus, :active) { color: var(--hover-link-color); text-decoration-color: var(--hover-link-color); text-decoration: underline; } p, ul, ol, blockquote, dl { margin-bottom: calc(1em * var(--primary-line-height)); } dt { font: var(--font-headline-6); letter-spacing: var(--primary-letter-spacing); color: var(--title-color); } dd { margin-bottom: 0; } .wp-block-quote:has(p:not(:empty)) { font-size: var(--font-size-e2); padding: var(--padding-md); background: var(--color-light-grey); border-radius: var(--element-border-radius); } .wp-block-quote:has(p:not(:empty)) p:first-child::before { font-family: 'Material Icons Outlined'; content: '\e244'; display: flex; font-size: 4rem; font-style: normal; color: var(--color-blue); line-height: 1; margin-bottom: var(--padding-sm); } .wp-block-quote p { font-weight: var(--light-font-weight); font-style: italic; line-height: 3.2rem; margin-bottom: var(--padding-sm); } .wp-block-quote p.has-small-font-size { font: var(--font-body-xsmall) !important; line-height: 1.6 !important; margin-bottom: 0; } .wp-block-image img { border-radius: var(--element-border-radius); } .hidden { display: none; } .sr-only { position: absolute; color: var(--text-color); background-color: var(--background-color); padding: 0; } .sr-only:not(:focus) { width: 0; height: 0; overflow: hidden; opacity: 0; } .default-template { margin-top: var(--block-margin); margin-bottom: var(--block-margin); } .wp-block-image, .wp-block-table { margin-top: var(--padding-md); margin-bottom: var(--padding-md); } .single-research .wp-block-image, .single-thought-leadership .wp-block-image { margin-top: 0; } .no-margin { margin: 0; } .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet { margin: 0; } @media (max-width: 600px) { #wpadminbar { position: fixed; } .wp-block-quote:has(p:not(:empty)) { border-radius: 0; max-width: 100%; } } /* ANIMATION */ .page-animation :is([data-animation], .animate):not(.animate__animated) { visibility: hidden; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-property: all !important; transition-duration: 0s !important; transition-delay: 0s !important; animation-duration: 0s !important; animation-name: unset !important; } .page-animation :is([data-animation], .animate):not(.animate__animated) { visibility: visible; } } /* BUTTONS */ :is(.primary-button, .secondary-button, .tertiary-button, .wp-element-button), :where(button) { margin: 0; padding: 0; border-radius: 0; border: none; background: transparent; appearance: none; display: inline-block; cursor: pointer; transition: all 0.3s ease; text-align: left; color: inherit; text-decoration: none; font-weight: 600; } :is(.primary-button, .secondary-button, .tertiary-button, .wp-element-button):is(:hover, :focus, :active), :where(button):is(:hover, :focus, :active) { outline: none; } :is(.primary-button, .secondary-button, .wp-element-button):is(:hover, :focus, :active), :where(button):is(:hover, :focus, :active) { text-decoration: none; } :is(.primary-button, .wp-block-button:not(.is-style-outline) > .wp-element-button) { display: flex; justify-content: center; border-width: var(--primary-button-border-width); border-style: var(--primary-button-border-style); border-radius: var(--primary-button-border-radius); padding: var(--primary-button-padding); border-color: var(--primary-button-border-color); background-color: var(--primary-button-background-color); color: var(--primary-button-text-color); box-shadow: var(--primary-button-box-shadow); } :is(.primary-button, .wp-block-button:not(.is-style-outline) > .wp-element-button):is(:hover, :focus, :active) { border-color: var(--primary-button-hover-border-color); background-color: var(--primary-button-hover-background-color); color: var(--primary-button-hover-text-color); box-shadow: var(--primary-button-hover-box-shadow); } :is(.secondary-button, .wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button) { position: relative; display: flex; justify-content: center; min-width: min( var(--primary-button-width), calc( 100vw - 32px ) ); border-width: var(--secondary-button-border-width); border-style: var(--secondary-button-border-style); border-radius: var(--secondary-button-border-radius); padding: var(--secondary-button-padding); border-color: var(--secondary-button-border-color); background-color: var(--secondary-button-background-color); color: var(--secondary-button-text-color); box-shadow: var(--secondary-button-box-shadow); } :is(.secondary-button, .wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button):is(:hover, :focus, :active) { transition: 0.3s ease all; border-color: var(--secondary-button-hover-border-color); background-color: var(--secondary-button-hover-background-color); color: var(--secondary-button-hover-text-color); box-shadow: var(--secondary-button-hover-box-shadow); } :is(.secondary-button, .wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button)::before { content: ''; border: 0.2rem solid; position: absolute; left: -0.1rem; top: -0.1rem; right: 0; bottom: 0; width: calc(100% + 0.2rem); height: calc(100% + 0.2rem); border-radius: var(--secondary-button-border-radius); opacity: 0; transition: 0.3s ease all; } :is(.secondary-button, .wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button):is(:hover, :focus, :active)::before { opacity: 1; transition: 0.3s ease all; } :is(.tertiary-button) { padding: 16px 24px; color: var(--primary-button-background-color); text-decoration: underline; text-underline-offset: 0.2rem; } :is(.tertiary-button):is(:active, :hover, :focus) { color: var(--hover-link-color); } /* FONTS */ .h0 { font: var(--font-headline-0); letter-spacing: var(--secondary-letter-spacing); margin-bottom: calc(0.25em * var(--secondary-line-height)); } h1, .h1 { font: var(--font-headline-1); letter-spacing: var(--secondary-letter-spacing); margin-bottom: calc(0.25em * var(--secondary-line-height)); } h2, .h2 { font: var(--font-headline-2); letter-spacing: var(--secondary-letter-spacing); margin-bottom: calc(0.25em * var(--secondary-line-height)); } h3, .h3 { font: var(--font-headline-3); letter-spacing: var(--secondary-letter-spacing); margin-bottom: calc(0.25em * var(--secondary-line-height)); } h4, .h4 { font: var(--font-headline-4); letter-spacing: var(--secondary-letter-spacing); margin-bottom: calc(0.25em * var(--secondary-line-height)); } h5, .h5 { font: var(--font-headline-5); letter-spacing: var(--secondary-letter-spacing); margin-bottom: calc(0.25em * var(--secondary-line-height)); } h6, .h6 { font: var(--font-headline-6); letter-spacing: var(--secondary-letter-spacing); margin-bottom: calc(0.25em * var(--secondary-line-height)); } .h7 { font: var(--font-headline-7); letter-spacing: var(--secondary-letter-spacing); margin-bottom: calc(0.25em * var(--secondary-line-height)); } .h8 { font: var(--font-headline-8); letter-spacing: var(--secondary-letter-spacing); margin-bottom: calc(0.25em * var(--secondary-line-height)); } :is(.h0, h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, .h7, .h8) { color: var(--title-color); } :is(h1, h2, h3, h4, h5, h6, p):is(:last-child, :only-child) { margin-bottom: 0; } .elevated-1 { font: var(--font-elevated-1); letter-spacing: var(--primary-letter-spacing); margin-bottom: calc(1em * var(--primary-line-height)); } .elevated-2 { font: var(--font-elevated-2); letter-spacing: var(--primary-letter-spacing); margin-bottom: calc(1em * var(--primary-line-height)); } .body-small { font: var(--font-body-small); letter-spacing: var(--primary-letter-spacing); margin-bottom: calc(1em * var(--primary-line-height)); } .body-xsmall { font: var(--font-body-xsmall); letter-spacing: var(--primary-letter-spacing); margin-bottom: calc(1em * var(--primary-line-height)); } .eyebrow { font-family: var(--eyebrow-font-family); letter-spacing: var(--eyebrow-letter-spacing); line-height: var(--eyebrow-line-height); font-size: var(--eyebrow-font-size); font-weight: var(--eyebrow-font-weight); text-transform: var(--eyebrow-text-transform); font-style: var(--eyebrow-font-style); color: var(--eyebrow-color); margin-bottom: var(--padding-sm); } @media (max-width: 1025px) { .h0 { font: var(--font-headline-0); letter-spacing: var(--secondary-letter-spacing); margin-bottom: calc(0.25em * var(--secondary-line-height)); } h1, .h1 { font-size: 40px !important; letter-spacing: -0.4; } h2, .h2 { font-size: 32px; letter-spacing: -0.32; } h3, .h3 { font-size: 28px; letter-spacing: -0.28; } } @media (max-width: 568px) { h1, .h1 { font-size: 36px !important; letter-spacing: -0.36; } h2, .h2 { font-size: 28px; letter-spacing: -0.28; } h3, .h3 { font-size: 24px; letter-spacing: -0.24; } h4, .h4 { font-size: 20px; letter-spacing: -0.20; } } /* TABLES */ .wp-block-table { font-size: var(--base-font-size, 16px); line-height: 1.5; } .wp-block-table td { vertical-align: top; } @media screen and (min-width:769px) { .wp-block-table.is-style-span-right-column { /* Allow to expand right into CTA column. 30px is column gap - 1px border x 2. */ margin-right: calc( -1 * ( 30px + var(--docebo-cta-section-width, 0) ) ); } } /* 404 PAGE NOT FOUND */ .page-not-found { margin: var(--block-margin) 0; } /* CASE STUDY */ .single-case-study .blocks-container>* { --default-block-width: 66.4rem; } /* WPML LANGUAGE SWITCHER */ .wpml-language-switcher { position: relative; display: inline-block; font: var(--font-body-xsmall); } .top-nav-bar .wpml-language-switcher ul, .wpml-language-switcher ul { list-style-type: none; margin: 0; margin-left: -0.8rem; padding: 0; display: none; position: absolute; background-color: var(--color-white); box-shadow: var(--element-box-shadow); min-width: 6.4rem; z-index: 1000; } .wpml-language-switcher ul li a { display: block; padding: 0.8rem; color: var(--text-color); } .wpml-language-switcher.active ul { display: block; } .wpml-language-switcher>span { display: flex; align-items: center; gap: 0.6rem; cursor: pointer; } .language-switcher-toggle:hover, .language-switcher-toggle:focus, .language-switcher-toggle:active { outline: none; border: 0; text-decoration: underline; } .wpml-language-switcher>button::after { content: ""; display: inline-block; vertical-align: middle; width: 0.5em; height: 0.5em; border-right: 0.2rem solid; border-bottom: 0.2rem solid; margin: 0 0.1em 0.4em 1em; transform: rotateZ(45deg); transition: transform 0.3s ease; } .wpml-language-switcher.active>button::after { transform: translateY(0.1rem) rotateZ(-135deg); margin-bottom: 0; } /* single article custom css */ .post-meta { line-height: 19.2px; letter-spacing: 0.01em; } .breadcrumb ul { list-style: none; padding: 0; } .breadcrumb li { display: inline; } .breadcrumb li a, .breadcrumb li { margin-bottom: 0; } .breadcrumb li::after { content: "/"; margin: 0 0.2em; } .breadcrumb li:last-child::after { content: ""; } .article-meta-container { display: flex; justify-content: space-between; align-items: center; } .article-meta-container .post-meta { margin-bottom: 0; } .author-info { display: flex; gap: 16px; align-items: center; } .author-name a, .author-name { font-weight: 600; color: black; text-decoration: none; } .author-name p { font-weight: normal; } .post-container article { max-width: 1360px; } .article-hero { margin-bottom: 128px; max-width: 886px; margin-right: auto; margin-left: auto; } .article-content-container { display: flex; gap: 32px; } @media screen and (min-width: 1280px) { /* Handle layout inconsistencies because Legal template has no third column. */ .page-template-template-legal .table-of-contents { min-width: 300px; padding: 0 20px; } .page-template-template-legal .table-of-contents + .article-content, .single-legal .table-of-contents + .article-content { margin-left: 0; } .article-content-container aside { padding: 0 20px; } } .page-template-template-legal .article-hero, .single-legal .article-hero { margin-bottom: 64px; } .article-content-container aside { max-width: 316px; } .article-content-container aside ul { list-style: none; padding: 0; } .article-content { position: relative; max-width: 1012px; } .post-container .article-content { max-width: 664px; margin: auto; } .no-toc .article-content { max-width: 664px; margin: auto; } .wp-block-group { margin-bottom: var(--padding-lg); margin-top: var(--padding-lg); } .numbered-headers .wp-block-heading:has(em) { margin-top: 1em; } .numbered-headers .wp-block-heading em { border-radius: 2em; border: 1px solid currentColor; display: inline-block; font-size: var(--eyebrow-font-size); font-style: normal; margin-right: 0.5em; margin-top: -0.5em; padding: 1em 2em; vertical-align: middle; } .grey-callout { background-color: var(--medium-background-color); border-radius: var(--element-border-radius); padding: var(--padding-md); } @media (max-width: 768px) { .article-content .grey-callout image.icon { width: auto !important; } } @media (max-width: 640px) { :is(.secondary-button, .wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button) { min-width: none; } .article-content .grey-callout { border-radius: 0; margin-left: calc( ( 100vw - 100% ) / -2 ); margin-right: calc( ( 100vw - 100% ) / -2 ); width: 100vw; } } /* Sticky TOC */ .sticky-toc { position: sticky; top: 200px; line-height: 1.3; max-height: calc(100vh - 220px); min-width: 125px; overflow-y: auto; } .table-of-contents ul { list-style: none; padding: 0; margin: 0; } .table-of-contents li { margin-bottom: 1em; } .table-of-contents a { text-decoration: none; color: #b2b2b2; display: flex; align-items: center; transition: color 0.3s ease; } .table-of-contents a:hover, .table-of-contents .toc-off-page { color: black; } .table-of-contents .toc-active, .table-of-contents a.active { color: black; font-weight: 600; } .table-of-contents .toc-active { border-left: 2px solid var(--primary-button-background-color, blue); padding-left: 0.5rem; } .toc-toggle-container { display: none; } /* related posts */ .related-posts { margin: 128px auto; padding: var(--gap-sizing); border-radius: 8px; background: #FAFAFA; max-width: 1360px; display: flex; flex-direction: column; gap: 22px; } .related-posts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } .related-post-card { display: flex; flex-direction: column; gap: 10px; background: #fff; max-width: 411px; min-height: 230px; padding: 16px; border-radius: 8px; border: 1px solid rgba(0, 0, 0, 0.04); } .related-post-title { font: var(--font-headline-4); text-transform: capitalize; } .related-post-title a { color: #000; text-decoration: none; } .related-post-title a:hover { text-decoration: underline; } .author-avatar img { border-radius: 50%; width: 48px; height: 48px; } .related-post-card .author-info span { display: block; } .related-post-card .author-info span:nth-child(2) { font-size: 12px; font-weight: 400; } @media (max-width: 1280px) { article { padding: 96px 24px 0 !important; } .article-hero { margin-bottom: 96px; } .page-template-template-legal .article-hero, .single-legal .article-hero { margin-bottom: 30px; } .article-meta-container { justify-content: space-between; align-items: flex-end; } .article-content-container { flex-direction: column; } .article-content-container { gap: 52px; } .related-posts { margin: 96px 24px; } .related-posts-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; } .related-post-card { max-width: 324px; min-height: 166px; gap: 5px; } .related-post-card .author-avatar img { display: none; } .related-post-card .author-info span:first-child { display: none; } } @media screen and (max-width: 1280px) { .toc-toggle-container { display: block; } .table-of-contents { display: none; position: relative; top: 0; left: 0; right: 0; z-index: 1; } .table-of-contents.open { display: block; } .toc-toggle-container { display: flex; align-items: center; } .toc-toggle-button { background: none; border: none; color: var(--color-blue); cursor: pointer; display: flex; align-items: center; gap: 0.5em; text-decoration: underline; } .toc-toggle-button span { font-weight: 700; } } @media screen and (min-width: 768px) and (max-width: 1280px) { .article-content-container:has(.table-of-contents) { flex-direction: column; } .toc-toggle-container { display: flex; align-items: center; } .article-content-container .table-of-contents, .toc-toggle-container { width: 100%; max-width: 664px; margin: auto; } } @media (max-width: 640px) { article { padding: 64px 12px 0 !important; } .article-hero { margin-bottom: 48px; } .article-meta-container { justify-content: space-between; align-items: flex-start; flex-direction: column-reverse; font-size: 12px; margin-top: 20px; } .article-hero .author-name { position: relative; top: -8px; } .article-hero .post-meta { margin-left: 65px; position: relative; top: -10px; } .article-content-container { gap: 40px; } .related-posts { margin: 64px 0; border-radius: 0; padding: var(--gap-sizing) 12px; } .related-posts-grid { grid-template-columns: repeat(1, 1fr); } .related-post-card { max-width: 100%; min-height: 130px; padding: 8px; } } .post-featured-image img { border-radius: 16px; margin: 32px 0; } .post-container .cta-section { max-width: 300px; padding: 8px 16px 16px; } .post-container .cta-text { color: var(--content-text-icons, #000); font-size: var(--Typography-h6, 16px); font-weight: 600; line-height: 140%; letter-spacing: -0.16px; } .post-container .article-content-container.no-toc { justify-content: center; } .post-container .no-toc .article-content { margin-right: 0; margin-left: 0; } .post-container .article-content { font-size: 20px; line-height: 160%; letter-spacing: -0.24px; } .post-container blockquote .quote-citation { font-size: var(--Typography-body, 16px); line-height: 160%; /* 25.6px */ } /* Share Story Section */ .share-story { text-align: center; margin: 20px 0; } .share-story h2 { font-size: var(--Typography-h3, 28px); font-style: normal; font-weight: 600; line-height: 130%; /* 36.4px */ letter-spacing: -0.28px; margin-bottom: 32px; } .share-links { display: flex; justify-content: center; gap: 48px; list-style: none; padding: 0; margin: 0; } .article-content .share-links, .article-content .share-story { list-style: none; padding: 0; } .share-links li a { display: flex; flex-direction: row; align-items: center; gap: 10px; color: var(--content-text-icons, #000); font-family: Figtree; font-size: var(--Typography-body-sm, 12px); font-style: normal; font-weight: 400; line-height: 160%; letter-spacing: 0.12px; text-decoration: none; } .share-links li a:hover { text-decoration: underline; } /* Author Section */ .author-bio { display: flex; align-items: center; margin: 128px 0; border-top: 1px solid #EBEBEB; border-bottom: 1px solid #EBEBEB; padding: 64px 0; } .author-bio .author-info { display: flex; gap: 0; align-items: flex-start; flex-direction: column; } .author-container { display: flex; align-items: center; gap: 32px; justify-content: flex-start; } .author-avatar { min-width: 84px; } .author-avatar img { border-radius: 50%; width: 85px; height: 85px; } .author-info h3 { margin: 0; } .author-info h3 a { color: var(--content-text-icons, #000); font-size: var(--Typography-h4, 24px); font-weight: 600; line-height: 140%; /* 33.6px */ letter-spacing: -0.24px; text-decoration: none; } .author-info h3 a:hover { text-decoration: underline; } .author-info p { color: var(--content-text-icons, #000); font-size: var(--Typography-body, 16px); font-weight: 400; line-height: 160%; /* 25.6px */ } @media (max-width: 768px) { .post-featured-image img { margin: 24px 0; } .post-container .author-avatar { min-width: inherit; } .post-container .author-avatar img { width: 48px; height: 48px; } .post-container .author-name { color: var(--content-text-icons, #000); font-size: var(--Typography-h6, 12px); font-weight: 600; line-height: 140%; letter-spacing: -0.12px; } .post-container .post-meta { color: var(--content-text-icons, #000); font-size: var(--Typography-body-sm, 12px); line-height: 160%; /* 19.2px */ letter-spacing: 0.12px; } .post-container .article-meta-container { align-items: center; } .post-container .article-content { margin: 0; color: var(--content-text-icons, #000); /* Body lg */ font-family: Figtree; font-size: 20px; font-style: normal; font-weight: 400; line-height: 160%; /* 32px */ letter-spacing: -0.2px; } .post-container .article-content { max-width: 100%; } .wp-block-image img { width: 100% !important; } .post-container .author-bio { margin: 96px 0; } .post-container .author-avatar { min-width: inherit; min-width: 48px; } .share-story h2 { color: var(--content-text-icons, #000); /* H3 */ font-family: Figtree; font-size: var(--Typography-h3, 24px); font-style: normal; font-weight: 600; line-height: 130%; /* 31.2px */ letter-spacing: -0.24px; } .share-links { gap: 32px; } .share-story h2 { margin-bottom: 24px; } .post-container .cta-section { display: none; } } @media (max-width: 640px) { .post-container .article-meta-container { align-items: flex-start; margin-top: 0; } .post-container .author-bio { margin: 64px 0; } .author-info h3 a { font-size: var(--Typography-h4, 20px); font-style: normal; font-weight: 600; line-height: 140%; letter-spacing: -0.2px; } .post-container .article-content-container .author-avatar img { width: 84px; height: 84px; } .post-container .article-content-container .author-avatar { min-width: 84px; } .share-links { flex-direction: column; justify-content: center; align-items: center; gap: 24px; } } /* customer case studies */ .stats__container__value, .page-hero-article-featured-info-item p:first-child { font-size: var(--Typography-h2, 36px); font-weight: 600; line-height: 130%; letter-spacing: -0.36px; } .case-study-template-default .page-hero-article-content a { font-weight: 700; } .case-study-template-default h3 { font-size: 24px; font-weight: 400; line-height: 160%; letter-spacing: -0.24px; text-transform: inherit; } @media (min-width: 768px) { .case-study-template-default .blocks-container .title-and-content:not(:last-child) { margin: var(--gap-sizing) auto; } } /**** Home ****/ .video-hero { height: 100vh; } .video-hero-text, .video-hero-logos { position: relative; z-index: 2; } .video-hero-text { max-width: 1031px; gap: 32px; display: flex; flex-direction: column; } .video-hero-text h1 { color: var(--content-text-icons, #FFF); font-family: Figtree; font-size: 80px; font-style: normal; font-weight: 600; line-height: 110%; /* 88px */ letter-spacing: -0.8px; } .video-hero-text .text-light-blue { color: #5B94FA; } .video-hero-text .title-new-line { display: block; } .home-video { right: 0; position: absolute; bottom: 0; min-width: 100%; min-height: 100%; object-fit: cover; } .background-video-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(0deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.75) 100%); background-blend-mode: hard-light; z-index: 1; } .video-hero .hero-buttons { display: flex; align-items: flex-start; align-content: flex-start; gap: 8px; align-self: stretch; flex-wrap: wrap; } .video-hero .hero-buttons button.primary-button { background: var(--Content-Action, #FFF) !important; border: none !important; color: var(--Content-Action-label, #000); font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ } .home .video-hero .hero-buttons button.primary-button:hover { color: #000 !important; } .video-hero .hero-buttons a { text-decoration: none; } .video-hero .hero-buttons a:hover { text-decoration: underline; } .video-hero .hero-buttons button.tertiary-button { color: #FFF; text-decoration: none; } .video-hero .hero-buttons button.tertiary-button:hover { text-decoration: underline; } .home header, .home header .header-inner svg path, .single-partner-page header, .single-partner-page header .header-inner svg path { transition: background 200ms, fill 200ms; } .home header, .single-partner-page header { background: transparent; } .home .header:not(.menu-open, :has(.mega-menu-open), .scrolled) svg path, .single-partner-page .header:not(.menu-open, :has(.mega-menu-open), .scrolled) svg path { fill:white; } .home a.menu-link, .single-partner-page a.menu-link { color: white; } /**** Support Hub ****/ /* Product resources section styling */ .wp-block-buttons.pr-buttons-grid.wp-container-content-1.is-content-justification-center.is-layout-flex.wp-container-core-buttons-is-layout-1.wp-block-buttons-is-layout-flex { width: 960px; margin: 0 auto; gap: 32px; } #block_d52007c0a0a1a649236a2a9bbfdc4586.dcb_sh_services1 { margin-bottom: 0; margin-top: 0 !important; } #block_9a0e7e9e02251870efe3ac04bfc6b4e1.dcb_sh_services2 { margin-top: 48px; } #block_d52007c0a0a1a649236a2a9bbfdc4586.dcb_sh_services1 .content-in-columns-columns, #block_9a0e7e9e02251870efe3ac04bfc6b4e1.dcb_sh_services2 .content-in-columns-columns { margin-top: 0; } @media screen and (max-width: 1025px) { .wp-block-buttons.pr-buttons-grid.wp-container-content-1.is-content-justification-center.is-layout-flex.wp-container-core-buttons-is-layout-1.wp-block-buttons-is-layout-flex { width: 100%; gap: 24px; } } @media screen and (max-width: 580px) { .wp-block-buttons.pr-buttons-grid.wp-container-content-1.is-content-justification-center.is-layout-flex.wp-container-core-buttons-is-layout-1.wp-block-buttons-is-layout-flex { gap: 16px; } } /**** Research & Reports ****/ /* Research grid */ .research-grid-row { margin-top: 128px; } /* Research grid block */ .research-grid-row .grid-item { display: flex; min-height: 432px; padding: 64px; flex-direction: column; justify-content: space-between; align-items: center; color: white; text-align: center; border-radius: 8px; box-shadow: 0 16px 48px 0 rgba(0, 0, 0, 0.08); position: relative; } .research-grid-row .wp-block-group__inner-container.is-layout-grid.wp-block-group-is-layout-grid { gap: 16px; } .research-grid-row .grid-item .grid-item-text, .research-grid-row .grid-item .grid-item-btns { z-index: 2; } .research-grid-row h3 { color: white; } .grid-overlay { height: 100%; width: 100%; border-radius: 8px; background: rgba(0, 0, 0, 0.48); position: absolute; top: 0; left: 0; width: 100%; } .grid-item-text .wp-block-group__inner-container.is-layout-constrained.wp-block-group-is-layout-constrained { display: flex; flex-direction: column; gap: 16px; padding-bottom: 16px; } /* Research block background images */ .res-ai-buyers-guide { background: url('/wp-content/uploads/2024/11/Contained-Card-01.jpg'); } .res-measuring-learning { background: url('/wp-content/uploads/2024/11/onboarding-matters-min.png'); } .res-social-learning{ background: url('/wp-content/uploads/2024/11/ContainedCard03.jpg'); } .res-learning-landscape{ background: url('/wp-content/uploads/2024/11/toolkit-img03.jpg'); } .res-roi-of-learning{ background: url('/wp-content/uploads/2024/11/toolkit-img02.jpg'); } .res-ld-banking-finance{ background: url('/wp-content/uploads/2024/11/Image1-Finserve-thought_leadership.jpg'); } .res-lms-migration-guide{ background: url('/wp-content/uploads/2024/11/lms-hero.png'); } .res-future-of-learning{ background: url('/wp-content/uploads/2024/11/toolkit-img08.jpg'); } .res-ai-buyers-guide, .res-measuring-learning, .res-social-learning, .res-learning-landscape, .res-roi-of-learning, .res-ld-banking-finance, .res-lms-migration-guide, .res-future-of-learning { background-position: center; background-size: cover; } /* Research type tag styling */ .research-type-tag { padding: 4px 10px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.16); color: #FFF; font-family: 'Figtree',sans-serif; font-size: 12px; font-style: normal; font-weight: 400; line-height: 160%; letter-spacing: 0.12px; width: fit-content; margin: 0 auto 16px; } /* Learn more buttons */ .research-grid-row .wp-block-button__link.has-text-color.has-background.has-link-color.wp-element-button, .research-grid-row :is(.primary-button, .wp-block-button:not(.is-style-outline) > .wp-element-button):is(:hover, :focus, :active) { border: none !important; } .research-grid-row .wp-block-button__link.has-text-color.has-background.has-link-color.wp-element-button:hover { background: white !important; } /* Tablet styling */ @media screen and (min-width: 768px) and (max-width: 1025px) { .research-grid-row { margin-top: 96px; grid-template-columns: auto auto !important; } .research-grid-row .wp-block-group__inner-container.is-layout-grid.wp-container-core-group-is-layout-17.wp-block-group-is-layout-grid { display: flex; flex-wrap: wrap; } .research-grid-row .grid-item { padding: 96px 64px; } .home .header.scrolled .mobile-cta ul.featured-menu li.menu-item:last-child a, .home .header.menu-open .mobile-cta ul.featured-menu li.menu-item:last-child a, .single-partner-page .header.scrolled .mobile-cta ul.featured-menu li.menu-item:last-child a, .single-partner-page .header.menu-open .mobile-cta ul.featured-menu li.menu-item:last-child a { color: white; } .home .header.scrolled .mobile-cta ul.featured-menu li.menu-item:last-child a:is(:hover, :focus, :active), .home .header.menu-open .mobile-cta ul.featured-menu li.menu-item:last-child a:is(:hover, :focus, :active), .single-partner-page .header.scrolled .mobile-cta ul.featured-menu li.menu-item:last-child a:is(:hover, :focus, :active), .single-partner-page .header.menu-open .mobile-cta ul.featured-menu li.menu-item:last-child a:is(:hover, :focus, :active) { border-color: var(--primary-button-hover-border-color); background-color: var(--primary-button-hover-background-color); } } @media screen and (max-width: 767px) { .home .header .mobile-cta ul.featured-menu li.menu-item a, .single-partner-page .header .mobile-cta ul.featured-menu li.menu-item a { color:white; } .home .header.scrolled .mobile-cta ul.featured-menu li.menu-item a, .home .header.menu-open .mobile-cta ul.featured-menu li.menu-item a, .single-partner-page .header.scrolled .mobile-cta ul.featured-menu li.menu-item a, .single-partner-page .header.menu-open .mobile-cta ul.featured-menu li.menu-item a { color: var(--link-color); } .home .header.scrolled .mobile-cta ul.featured-menu li.menu-item:last-child a:is(:hover, :focus, :active), .home .header.menu-open .mobile-cta ul.featured-menu li.menu-item:last-child a:is(:hover, :focus, :active), .single-partner-page .header.scrolled .mobile-cta ul.featured-menu li.menu-item:last-child a:is(:hover, :focus, :active), .single-partner-page .header.menu-open .mobile-cta ul.featured-menu li.menu-item:last-child a:is(:hover, :focus, :active) { background-color: transparent; text-decoration: underline; } } /* Mobile styling */ @media screen and (max-width: 568px) { #block_e06aa394850341c599c924170466aace { padding-left: 17px; padding-right: 17px; } .research-grid-row { margin-top: 0; grid-template-columns: 1fr !important; } .research-grid-row .grid-item { padding: 64px 32px; width: 100%; max-width: 100%; } .grid-item :is(.primary-button, .wp-block-button:not(.is-style-outline) > .wp-element-button) { min-width: 184px; } } /* Mobile view: single column */ @media (max-width: 768px) { } /***** Company page *****/ .company-resources { margin-bottom: 128px; } .company-resources .cards-in-columns-columns-item { border-radius: var(--element-border-radius); padding: 0; } body .company-hero { padding-bottom: 0 !important; } @media (max-width: 1025px) { .company-resources { margin-bottom: 96px; } body .company-hero { padding-bottom: 0 !important; } .company-resources .cards-in-columns-columns[data-columns="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 568px) { .company-resources { margin-bottom: 64px; } .company-resources .cards-in-columns-columns[data-columns="3"] { grid-template-columns: repeat(1, minmax(0, 1fr)); } .company-resources .cards-in-columns-columns-item { padding: 8px 16px !important; } } /***** Customers page *****/ .customers-archive-hero { padding-bottom: 0 !important; } .awards-carousel-list-item :is(svg, img) { display: block; margin: 0; } .awards-carousel-list-item-title p { font-size: 20px; font-weight: 600; color: black; } /****** Awards page ******/ .awards-hero { margin-bottom: 128px !important; } .awards-hero .page-hero-primary-wrapper { align-content: center; } .awards-component .faq details:first-of-type > div { display: block !important; } .awards-section { margin-top: 16px; } .awards_awards-grid { display: flex; gap: 32px; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; width: 908px; } .awards_awards-grid .award img { height: 80px; } .wp-block-heading.awards_award-year { margin-top: 32px; } /* Tablet styling */ @media screen and (max-width: 1025px) { .awards-hero { display: flex !important; flex-direction: column; margin-bottom: 96px !important; } .awards_awards-grid { width: 100%; gap: 24px; } .wp-block-heading.awards_award-year { margin-top: 24px; } } /* Mobile styling */ @media screen and (max-width: 568px) { .awards-hero { margin-bottom: 64px !important; } .awards_awards-grid { width: 100%; gap: 16px; } .wp-block-heading.awards_award-year { margin-top: 16px; } } /****** Careers page ******/ .careers_primary-hero .page-hero-primary-wrapper { margin: 0; } .careers_our-values { background: #0259f7; border-radius: 16px; color: white; } .careers_our-values h2 { color: white; } .careers_our-values .image-and-content-primary-media :is(img, video, iframe) { border-radius: 0 var(--element-border-radius) var(--element-border-radius) 0; } .careers_our-values .image-and-content-primary-content { padding: 48px; } .careers__awards-grid .swiper-slide { min-width: 373px; } .careers__awards-grid .logos-in-carousel-list-item { background: #EFEFEF; height: 80px; width: 100%; border-radius: 8px; padding: 32px; display: flex; justify-content: space-between; align-items: center; } .careers__awards-grid .logos-in-carousel-list-item :is(svg, img) { display: block; margin: 0; height: 44px; width: auto; } /* Open roles level integration styling */ .jobs-section { display: flex; justify-content: space-between; margin-bottom: 128px; } #jobs-container { background: #ffffff; border: none; width: 76%; padding-right: 32px; } #jobs-container .jobs-parent { display: flex; max-width: 94%; } #jobs-container .job-hidden { display: none !important; } #jobs-container .jobs-parent ul { list-style: none inside; padding: 0; margin: 5px 0 0; display: block; width: 100%; } #jobs-container .jobs-parent ul a { display: block; color: var(--black, #000); font-family: 'Figtree', sans-serif; font-size: 20px; font-style: normal; font-weight: 600; line-height: 140%; /* 28px */ letter-spacing: -0.2px; cursor: pointer; } #jobs-container .jobs-parent ul a::selection { background: none; } #jobs-container .jobs-parent ul a:hover { opacity: 0.9; } .jobs-parent li { display: flex; align-items: baseline; width: 100%; padding: 32px 0; border-bottom: 1px solid #ddd; gap: 32px; } #jobs-container .jobs-parent .jobs-parent-title { color: var(--black, #000); font-family: 'Figtree', sans-serif; font-size: 20px; font-style: normal; font-weight: 600; line-height: 140%; /* 28px */ letter-spacing: -0.2px; cursor: pointer; } #jobs-container .jobs-parent .jobs-parent-title::selection { background: none; } #jobs-container .jobs-parent .jobs-parent-title:before { content: "+"; display: inline-block; width: 15px; padding-right: 5px; transform: translateY(-2px); } #jobs-container .jobs-parent .jobs-parent-title.active + ul { display: block; } .job-details { display: flex; width: 410px; justify-content: space-between; font-size: 12px; } .job-block div:last-child { margin-right: 0; margin-bottom: 0; } .job-details .department { width: 121px; } .job-details .location { width: 260px; } .job-block { width: 100%; } .job-block a { width: 462px; } .sidebar-filter { display: flex; flex-direction: column; width: 300px; padding-top: 32px; } .jobs-sidebar { left: 50px; } .sidebar-filter p { margin-bottom: 16px !important; margin-top: 32px; } select#jobs-locations, select#jobs-departments { margin-bottom: 15px; min-width: 120px; padding: 5px; } input#jobs-search, select#jobs-locations, select#jobs-departments { display: flex; padding: 16px; align-items: center; gap: var(--padding-sm, 8px); align-self: stretch; color: rgba(0, 0, 0, 0.40); font-family: 'Figtree', sans-serif !important; font-size: 16px !important; font-style: normal; font-weight: 400; line-height: 170%; /* 27.2px */ border-radius: 4px; border: 1px solid rgba(0, 51, 132, 0.16); background: #fff; } input#jobs-search { background-image: url('/wp-content/uploads/2024/11/search_24dp_000000_FILL0_wght400_GRAD0_opsz24.svg'); background-repeat: no-repeat; background-position: left 10px center; padding-left: 45px; } .open-roles p { text-align: left; } /***** Careers page - Our values ******/ .company-values { width: 100%; display: flex; flex-direction: row; height: 532px; margin: 128px auto; border-radius: 16px !important; } ol.carousel__viewport { list-style: none; padding-left: 0; width: 100%; } .company-values .carousel__slide { display: flex; flex-direction: row; min-height: 532px; } .values-left, .values-right { width: 50%; height: 532px; } .values-left { background: #0259f7; padding: 32px; display: flex; flex-direction: column; justify-content: space-between; border-radius: 16px 0 0 16px; } .values-left .text-col { display: flex; flex-direction: column; gap: 16px; } .values-left .text-col .value-num-text { order: -1; } .values-left h2, .values-left h3, .company-values p, .company-values a { color: #fff; font-family: 'Figtree', sans-serif; } .company-values h2 { font-size: 32px; font-weight: 700; } .company-values p { font-size: 20px; font-weight: 400; line-height: 160%; letter-spacing: -0.2px; } .company-values a { text-decoration: underline; font-size: 16px; font-weight: 700; cursor: pointer; } #careers_esg-report-link { background: none; border: none; padding: 0; } .values-left .slide-toggles { align-self: flex-end; display: flex; justify-content: space-between; width: 100%; margin-top: 24px; } button.toggle-forward.toggle, button.toggle-back.toggle { display: flex; align-items: center; gap: 16px; color: white; padding: 8px; background: transparent; border: none; font-weight: 600; cursor: pointer; } button.toggle-forward.toggle:focus, button.toggle-forward.toggle:active { padding: 8px; } .values-right { background-size: cover !important; background-repeat: no-repeat !important; background-position: center !important; border-radius: 0 16px 16px 0; } .slide1 { background-size: cover; background-repeat: no-repeat; background-position: center; border-radius: 0 16px 16px 0; } #slide-image { opacity: 1; transition: opacity 0.3s ease; } #slide-image.fade-out { opacity: 0; } .hidden-visibility { visibility: hidden; } /***** Mobile styles *****/ @media (max-width: 768px) { .company-values, .company-values .carousel__slide { flex-direction: column; height: auto; min-height: auto; margin: 64px auto; } .values-left, .values-right { width: 100%; height: auto; border-radius: 0 !important; } .values-left { min-height: 240px; border-radius: 16px 16px 0 0 !important; padding: 24px; } .values-right { min-height: 240px; border-radius: 0 0 16px 16px !important; } .values-left .text-col { gap: 12px; } .values-left h2 { font-size: 24px; } .company-values p { font-size: 16px; } .values-left .slide-toggles { flex-direction: row; justify-content: space-between; margin-top: 24px; gap: 12px; } button.toggle-forward.toggle, button.toggle-back.toggle { font-size: 14px; gap: 8px; padding: 6px; } } /********* Thank you *********/ p.thankyou-heading-paragraph { font-size: 24px !important; } .thankyou-hero { padding-bottom: 0 !important; } .thankyou-hero .title-and-content-content-body { row-gap: 32px; } @media (max-width: 1025px) { .thankyou-hero { padding-top: 96px !important; max-width: 100%; margin: 0 40px; } .thankyou-hero .title-and-content-content { padding: 0 40px; } .thankyou-hero.title-and-content:is([data-alignment="center"]) :is(.title-and-content-content-heading, .title-and-content-content-body) { align-items: flex-start !important; text-align: left !important; } p.thankyou-heading-paragraph { font-size: 20px !important; } } @media (max-width: 568px) { .thankyou-hero { padding-top: 64px !important; } .thankyou-hero .title-and-content-content { padding: 0; } } /********* Support plans ********/ /***** Show/hide elements *****/ .hero-grid-mobile, .visible-mobile { display: none !important; } .hidden-desktop, .hidden { display: none !important; } .hidden-tablet { display: block; } .show-tier { display: block; } .hide-tier { display: none; } .no-bg { background: #ffffff; margin-top: 0 !important; } .hero-section { padding: 128px 0; } .compare-filter { display: flex; width: 100%; padding: 0 0 32px 0; align-items: flex-start; gap: 8px; } .compare-filter div, .compare-filter select { width: 33.33%; } .compare-filter select { display: flex; min-width: 100px; min-height: 60px; padding: 16px; align-items: center; gap: 8px; flex: 1 0 0; border-radius: 4px; border: 1px solid rgba(0, 0, 0, 0.16); background: url('/wp-content/uploads/2023/11/arrow_drop_down.png'); background-position: right; background-repeat: no-repeat; -moz-appearance: none; -webkit-appearance: none; appearance: none; color: var(--text, #000); text-align: center; font-family: 'Figtree', sans-serif; font-size: 25px; font-style: normal; font-weight: 600; line-height: 150%; /* 37.5px */ letter-spacing: -0.25px; } .support-plan-grid { display: flex; width: 100%; gap: 8px; padding-bottom: 128px; } .support-plan { width: 33.33%; } .support-plan div { display: flex; min-width: 100px; min-height: 60px; padding: 0 32px; align-items: center; gap: 16px; color: var(--text, #000); font-family: Figtree; font-size: 16px; font-style: normal; font-weight: 400; line-height: 170%; } .service-header { border-bottom: 1px solid rgba(0, 0, 0, 0.16); margin-top: 32px; } .essential div, .advantage div, .premier div, .elite div { justify-content: center; } .essential { background: linear-gradient(0deg, rgba(255, 255, 255, 0.80) 0%, rgba(255, 255, 255, 0.80) 100%), #53ADE8; } .advantage { background: linear-gradient(0deg, rgba(255, 255, 255, 0.80) 0%, rgba(255, 255, 255, 0.80) 100%), #F09849; } .premier { background: linear-gradient(0deg, rgba(255, 255, 255, 0.80) 0%, rgba(255, 255, 255, 0.80) 100%), #E96F66; } .elite { background: linear-gradient(0deg, rgba(255, 255, 255, 0.80) 0%, rgba(255, 255, 255, 0.80) 100%), #70BF70; } @media screen and (max-width: 568px) { .support-plan div { padding: 0; } .hero-section { padding: 64px 0; } } /******** Home *********/ .home .page-hero-secondary { padding-top: 48px !important; } /******* Industry pages ********/ .featured-courses { padding-top: 0; padding-bottom: 0; } .featured-resources { padding-top: 128px; padding-bottom: 0; } @media (max-width: 1025px) { .featured-resources { padding-top: 96px; } } @media (max-width: 568px) { .featured-resources { padding-top: 64px; } } /******* LearnGov ********/ .learngov-logos { margin-top: 0 !important; } .hidden-subtitle .image-and-content-primary-subtitle { display: none; } /****** Services *******/ .services-hero { padding: 128px 0 !important; } @media (max-width: 1025px) { .services-hero { padding: 96px 0 !important; } } @media (max-width: 568px) { .services-hero { padding: 64px 0 !important; } } /***** Docebo University, Pro *****/ /**** To do ---- Add a full page background selector *****/ .page-id-7920, .page-id-8074 { background: #FAFAFA; } #university-form { margin: 128px auto 0; background: #FFFFFF; border-radius: var(--Border-radius, 16px); border: 1px solid var(--Content-Stroke, rgba(0, 0, 0, 0.04)); display: flex; width: 664px; padding: var(--gap-sizing, 32px); flex-direction: column; align-items: center; gap: var(--gap-sizing, 32px); } .university-form-header { text-align: center; max-width: 540px; } div#hbspt-form-4c6cdfe6-e28a-4c8a-8eab-ea4e939f4e34 { width: 100% !important; } #university-form .hs-form-field .input { width: 100% !important; margin-bottom: 16px; } #university-form input { display: flex; height: 56px; max-height: 56px; padding: 16px; justify-content: space-between; align-items: center; align-self: stretch; border-bottom: none !important; border-radius: var(--Border-radius, 8px) !important; border: 1px solid var(--Content-Stroke, rgba(0, 0, 0, 0.04)) !important; background: #FAFAFA !important; } #university-form .hs-form-field label { opacity: 0.7 !important; } #university-form ul.inputs-list { list-style: none !important; padding: 8px !important; margin: 16px 0 !important; } #university-form form .hs-submit { margin-top: 0 !important; } #university-form ul.no-list.hs-error-msgs.inputs-list { margin-bottom: 0; list-style: none; margin-left: 0; padding-left: 0; margin-top: -10px; } #university-form .hs_i_agree_to_docebo_privacy_policy legend.hs-field-desc { font-size: 12px; } #university-form .hs-form-booleancheckbox label { color: var(--content-text-icons, #000); font-size: 16px; font-style: normal; font-weight: 400; line-height: 170%; /* 27.2px */ opacity: 1 !important; } #university-form label.hs-form-booleancheckbox-display { display: flex; align-items: center; gap: 8px; } #university-form label.hs-form-booleancheckbox-display input { height: auto; } #university-form .hs-button.primary.large { border-radius: var(--Border-radius, 8px) !important; background: var(--Content-Action, #0259F7) !important; display: flex; padding: 16px 24px; justify-content: center; align-items: center; width: fit-content; } @media (max-width: 1025px) { #university-form { margin: 96px auto; width: 100%; padding: 24px; gap: 24px; } } @media (max-width: 568px) { #university-form { margin: 64px 0; width: 100vw !important; position: relative; left: 0; border-radius: 0; max-width: 100vw; } .university-form-header { text-align: left; } } /******* Pricing page background color *******/ .page-id-6849, .page-id-12774, .page-id-12864, .page-id-12832, .page-id-12791 { background: #FAFCFF; } .page-id-6849 footer, .page-id-12774 footer, .page-id-12864 footer, .page-id-12832 footer, .page-id-12791 footer { background: #FAFCFF; } /****** Partners main page ********/ .partner-form { padding: 128px 0 !important; } .partner-program-form { padding: 0 0 128px 0 !important; } .partner-form .hs-form-field { width: 48% !important; } .partner-form .hs-form-field.hs-fieldtype-textarea { width: 98% !important; } .partner-form .legal-consent-container { order: 2; } .partner-form form .hs-submit { margin-top: 16px; } .partner-program-hero .page-hero-primary-wrapper { width: 100%; } .partner-ecosystem { margin-bottom: 128px; } .partner-ecosystem h2 { text-align: center; } .parter-ecosystem-grid { display: flex; align-items: flex-start; align-content: flex-start; gap: var(--Padding-padding-lg, 48px) var(--gap-sizing, 32px); align-self: stretch; flex-wrap: wrap; padding-top: 32px; } .parter-ecosystem-grid .partner-ecosystem-grid-block { display: none; width: 432px; align-items: flex-start; gap: var(--Padding-padding-sm, 16px); border-radius: var(--Border-radius, 16px); } .parter-ecosystem-grid .partner-ecosystem-grid-block a { display: flex; width: 84px; height: 84px; padding: 0px 12px; flex-direction: column; justify-content: center; align-items: center; flex-shrink: 0; border-radius: var(--Border-radius, 16px); border: 1px solid rgba(0, 0, 0, 0.12); } .partner-ecosystem-grid-block .partner-title { color: var(--content-text-icons, #000); font-family: Figtree; font-size: var(--Typography-h4, 24px); font-style: normal; font-weight: 600; line-height: 140%; /* 33.6px */ letter-spacing: -0.24px; margin-bottom: 4px; } .partner-ecosystem-header { max-width: 896px; text-align: center; margin: 0 auto; } .partner-ecosystem-nav ul { display: flex; align-items: flex-start; gap: 32px; list-style: none; justify-content: center; padding-left: 0; } .partner-ecosystem-nav ul button { display: flex; height: 64px; min-width: 108px; padding: 16px; flex-direction: column; justify-content: center; align-items: center; gap: var(--Padding-padding-sm, 16px); border-bottom: 3px solid transparent; } .partner-ecosystem-nav ul button:hover, .partner-ecosystem-nav ul button:active { border-bottom: 3px solid #0259F7; padding: 13px 16px; } .partner-ecosystem-nav ul button:focus { outline: none; } .parter-ecosystem-grid .partner-active { display: flex; } @media (max-width: 1023px) { .partner-form { padding: 0 0 96px 0 !important; } body .partner-program-hero { padding-bottom: 32px !important; } .partner-ecosystem { margin-bottom: 96px; } .parter-ecosystem-grid { gap: 24px; } .parter-ecosystem-grid .partner-ecosystem-grid-block { width: 348px; } .partner-ecosystem-grid-block .partner-title { font-size: var(--Typography-h4, 20px); } .partner-ecosystem-nav ul { gap: 0; } .partner-ecosystem-nav li { font-size: 12px; } .partner-ecosystem-nav ul button { padding: 16px 0; } } @media (max-width: 568px) { body .partner-program-hero, body .partner-hero{ padding-bottom: 0 !important; } .partner-form { padding: 0 0 64px 0 !important; } .partner-form .hs-form-field { width: 100% !important; } .partner-ecosystem { margin-bottom: 64px; } .parter-ecosystem-grid { padding-top: 16px; } .parter-ecosystem-grid .partner-ecosystem-grid-block { width: 100%; } .partner-ecosystem-nav li { min-width: 84px; max-width: 84px; } .partner-ecosystem-nav ul button { max-width: 84px; min-width: 84px; } } /****** Home page ******/ /* capabilities */ .visible-md { display: none; } .capabilities-container { display: flex; flex-wrap: wrap; gap: 32px; margin-top: 128px; } .capabilities-container .text-section { max-width: 664px; width: 100%; } .capabilities-container .text-section h2 { font-size: 28px; font-weight: 700; } .capabilities-container .text-section a { text-decoration: none !important; } .capabilities-container .text-section a:hover, .capabilities-container .text-section a:focus { text-decoration: underline !important; } .text-section-sticky { position: relative; } .capabilities-container a { color: var(--Content-Action, #0259F7); font-family: 'Figtree'; font-size: 16px; font-weight: 700; line-height: 150%; text-decoration: underline !important; margin-top: 22px; display: block; } /* === Capabilities Section === */ .capabilities-section { width: 100%; padding-top: 16px; } .capabilities-grid { display: flex; flex-direction: column; gap: 16px; } .capabilities-title-wrap { width: 100%; } .capabilities-title { font-size: 28px; font-weight: 600; margin-bottom: 10px !important; } .capabilities-lists { display: flex; flex-direction: column; gap: 0; } .capabilities-lists ul { list-style: none; padding: 0; margin: 0; } .capabilities-lists li { position: relative; display: flex; align-items: flex-start; margin-bottom: 12px; } .capabilities-lists li::before { content: ""; display: inline-block; width: 20px; height: 20px; margin-right: 8px; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.4 13.7L3.7 10c-.4-.4-1-.4-1.4 0s-.4 1 0 1.4l4.7 4.7c.4.4 1 .4 1.4 0l10-10c.4-.4.4-1 0-1.4s-1-.4-1.4 0L7.4 13.7z' fill='%230259F7'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: contain; vertical-align: middle; flex-shrink: 0; } /* === Tablet: Two-column layout === */ @media (min-width: 768px) and (max-width: 1023px) { .capabilities-grid { flex-direction: column; } .capabilities-lists { flex-direction: row; gap: 32px; } .capabilities-lists ul { width: 50%; } .capabilities-container { gap: 16px; } } /* === Desktop: h3 left, lists right === */ @media (min-width: 1024px) { .capabilities-container { display: flex; flex-wrap: nowrap; gap: 128px; margin-top: 128px; } .capabilities-container .text-section { width: 50%; max-width: none; } .capabilities-container .text-section h2 { font-size: 38px; } .capabilities-container .text-section-sticky { position: sticky; top: calc(var(--admin-bar-height) + var(--full-header-height, 135px) + 10px); } .capabilities-section { width: 50%; padding-top: 32px; } .capabilities-title { font-size: 24px; font-weight: 600; margin-bottom: 24px; } .capabilities-grid { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; } .capabilities-grid li { position: relative; display: flex; align-items: flex-start; } .capabilities-grid li::before { content: ""; display: inline-block; width: 20px; height: 20px; margin-right: 8px; margin-top: 2px; background-image: url("data:image/svg+xml,%3Csvg width='18' height='14' viewBox='0 0 18 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.79506 10.875L2.32506 7.40502C1.93506 7.01502 1.30506 7.01502 0.915059 7.40502C0.525059 7.79502 0.525059 8.42502 0.915059 8.81502L5.09506 12.995C5.48506 13.385 6.11506 13.385 6.50506 12.995L17.0851 2.41502C17.4751 2.02502 17.4751 1.39502 17.0851 1.00502C16.6951 0.615024 16.0651 0.615024 15.6751 1.00502L5.79506 10.875Z' fill='%230259F7'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; background-position: center; flex-shrink: 0; } } /* === Mobile fallback === */ @media (max-width: 767px) { .capabilities-container { margin-top: 68px; margin-bottom: 96px; } .text-section h2 { text-align: left; } .capabilities-lists { flex-direction: column; } } /***** Press archive page *****/ /* more about docebo */ .more-about-docebo__container { width: 100%; margin: 0 auto; background-color: white; } .more-about-docebo__container .header { text-align: center; margin-bottom: 20px; } .more-about-docebo__container .grid-container { display: flex; flex-direction: column; column-gap: 32px; } @media (min-width: 992px) { .more-about-docebo__container .grid-container { display: grid; grid-template-columns: 1fr 2fr; } } .more-about-docebo__container .company-overview { grid-row: span 3; background-color: #333; color: white; padding: 32px; border-radius: 10px; display: flex; flex-direction: column; justify-content: space-between; } .more-about-docebo__container .company-overview h3 { margin-top: 0; color: var(--content-text-icons, #FFF); /* H2 */ font-family: 'Figtree'; font-size: var(--Typography-h2, 48px); font-style: normal; font-weight: 600; line-height: 120%; /* 57.6px */ letter-spacing: -0.48px; } .more-about-docebo__container .company-overview p { color: var(--content-text-icons, #FFF) } .more-about-docebo__container .pronunciation { margin-top: 20px; font-size: 14px; } .more-about-docebo__container .pronunciation strong { color: var(--Core-White, #FFF); /* Eyebrow */ font-family: 'Figtree'; font-size: var(--Typography-eyebrow, 12px); font-style: normal; font-weight: 600; line-height: 160%; /* 19.2px */ letter-spacing: 0.72px; text-transform: uppercase; } .more-about-docebo__container .pronunciation p { color: var(--Core-White, #FFF); font-family: 'Figtree'; font-size: 48px; font-style: normal; font-weight: 300; line-height: 110%; /* 52.8px */ letter-spacing: 2.4px; margin-bottom: 10px; } .more-about-docebo__container .pronunciation p:last-child { color: var(--Core-White, #FFF); /* Body */ font-family: 'Figtree'; font-size: var(--Typography-body, 16px); font-style: normal; font-weight: 400; line-height: 160%; /* 25.6px */ } .more-about-docebo__container .info-grid { display: grid; gap: 16px; margin-top: 16px; margin-bottom: 16px; } @media (min-width: 768px) { .more-about-docebo__container .info-grid { grid-template-columns: 1fr 1fr; gap: 32px; } } @media (min-width: 992px) { .more-about-docebo__container .info-grid { margin-top: 0; margin-bottom: 0; } } .more-about-docebo__container .info-item { background-color: #fff; padding: 48px 32px; border-radius: 10px; text-align: center; border-radius: var(--Border-radius, 16px); border: 1px solid var(--Content-Stroke, rgba(0, 0, 0, 0.04)); background: var(--Neutrals-Neutral-100, #FAFAFA); } .more-about-docebo__container .info-item h3 { margin-top: 0; color: var(--content-text-icons, #000); font-family: 'Figtree'; font-size: var(--Typography-eyebrow, 12px); font-style: normal; font-weight: 600; line-height: 160%; letter-spacing: 0.72px; text-transform: uppercase; text-align: left; } .more-about-docebo__container .info-item p { color: var(--content-text-icons, #000); /* H4 */ font-family: 'Figtree'; font-size: var(--Typography-h4, 32px); font-style: normal; font-weight: 600; line-height: 140%; /* 44.8px */ letter-spacing: -0.32px; margin: 5px 0 0 0; text-align: left; } .more-about-docebo__container .info-item:last-child p { font-size: var(--Typography-body, 16px); font-weight: 400; line-height: 160%; /* 25.6px */ } .press-inquiry { display: flex; padding: 48px; justify-content: center; align-items: center; gap: var(--padding-sm); border-radius: var(--Border-radius, 16px); background: var(--Neutrals-Neutral-200, #F4F4F4); text-align: center; margin: 128px auto !important; text-align: center; color: var(--content-text-icons, #000); font-family: 'Figtree'; font-size: 20px !important; font-style: normal; font-weight: 400; line-height: 160%; letter-spacing: -0.2px; } .docebo-news-title { margin-top: 128px; } .featured-press-block { margin-top: 32px; } #truste-consent-track { z-index: 10; } .article-content, .rich-text { ul { padding-left: 20px; margin: 20px 0; list-style-type: disc; } ol { margin-left: 2em; margin-bottom: 1em; padding-left: 0; list-style-type: numeric; ol { list-style-type: lower-alpha; ol { list-style-type: lower-roman; } } } li { margin-bottom: 10px; line-height: 1.5; } } .otgs-development-site-front-end { display: none; } /* Partner Page ---------------------------------------------------------------------------- */ .single-partner-page { background-color: var( --color-docebo-extra-dark-blue ); background-image: url( './img/partner-page-bg.png' ); background-position: top center; background-repeat: no-repeat; color: var( --wp--preset--color--white ); } @media (min-width: 1040px) { .single-partner-page { background-size: 100% auto; } } .single-partner-page .blocks-container { padding: 84px 16px 120px; } .single-partner-page .blocks-container > * { max-width: 896px; } .single-partner-page footer { background-color: var( --color-docebo-extra-dark-blue ); color: var( --wp--preset--color--white ); position: relative; } /* Fading blurred background */ .single-partner-page footer::before { background: linear-gradient( to top, var( --color-docebo-extra-dark-blue ) 10%, transparent 100% ); content: ""; display: block; height: 100px; left: 0; position: absolute; right: 0; top: -100px; } .single-partner-page footer :is(.h0, h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, .h7, .h8), .single-partner-page .footer-main-column:is([data-column-type="menu"], [data-column-type="contact"]) ul li a, .single-partner-page .footer-copyright nav ul li a, .footer-copyright #teconsent a { color: var( --wp--preset--color--white ); } .single-partner-page .footer-intro .logo svg path, .single-partner-page .footer-copyright ul.social-media svg path { fill: var( --wp--preset--color--white ); } .single-partner-page .footer-copyright ul.social-media li:is(:active, :hover, :focus) svg path { fill: #5B94FA; } .single-partner-page .blocks-container h1, .single-partner-page .blocks-container .wp-block-post-title { font-size: clamp(3.6rem, 3.6rem + ((1vw - 0.32rem) * 1.92), 5.6rem); margin-bottom: 16px !important; } .single-partner-page .blocks-container p { font-size: clamp(2rem, 2rem + ((1vw - 0.32rem) * 0.38), 2.4rem); } .single-partner-page .blocks-container .wp-block-buttons { gap: 16px; } .single-partner-page .blocks-container .wp-block-button { width: 100%; } @media (min-width: 500px) { .single-partner-page .blocks-container .wp-block-button { width: auto; } } .single-partner-page .blocks-container :is(.primary-button, .wp-block-button:not(.is-style-outline) > .wp-element-button) { background-color: #5B94FA; border-color: #5B94FA; border-radius: 8px; font-size: 16px; line-height: 1.3; padding: 16px; text-align: center; } @media (min-width: 500px) { .single-partner-page .blocks-container :is(.primary-button, .wp-block-button:not(.is-style-outline) > .wp-element-button) { min-width: 264px !important; } } .single-partner-page .blocks-container :is(.primary-button, .wp-block-button:not(.is-style-outline) > .wp-element-button):focus, .single-partner-page .blocks-container :is(.primary-button, .wp-block-button:not(.is-style-outline) > .wp-element-button):hover { border-color: var(--primary-button-border-color); background-color: var(--primary-button-background-color); } /* Forms */ .hbspt-form { width: 100%; } .hbspt-form label { font-weight: 600 !important; margin-bottom: 0.25rem !important; } .hbspt-form label .hs-form-required { font-size: 14px !important; vertical-align: top; } .hbspt-form .form-columns-2 .input { margin-right: 16px !important; } @media screen and (max-width: 568px) { .hbspt-form .form-columns-2 .input { margin-right: 0 !important; } } .hbspt-form .hs-input { border-color: var(--color-light-grey) !important; background-color: #fafafa !important; } .hbspt-form .hs-input:focus-visible { outline: 2px solid var(--color-lightest-grey) !important; } .hbspt-form .hs-button:focus-visible { outline: 4px solid var(--color-lightest-grey) !important; outline-offset: 4px !important; } .hbspt-form input:not(.primary):hover, .hbspt-form input:not(.primary):active, .hbspt-form select:not(.primary):hover, .hbspt-form select:not(.primary):active { border-color: var(--color-grey) !important; } .hbspt-form input.invalid { border-color: var(--color-red) !important; } .hbspt-form .hs-error-msg { color: var(--color-red) !important; } /* Utility classes ---------------------------------------------------------------------------- */ /* Grid layout */ .grid-layout { display: grid; grid-gap: var( --grid-layout-gap, 24px ); grid-template-columns: repeat( auto-fit, minmax( min( var( --grid-min-width, 346px ), 100% ), 1fr ) ); } .grid-layout > * { margin: 0; } /* Sidebar layout */ .sidebar-layout { display: flex; flex-wrap: wrap; gap: var( --sidebar-layout-gap, 30px ); } .sidebar-layout > :last-child { flex-basis: var( --sidebar-width, 400px ); flex-grow: 1; } .sidebar-layout > :first-child { flex-basis: 0; flex-grow: 999; min-inline-size: var( --sidebar-content-width, 67% ); }