/* Theme Name: Cegep Garneau - Sophie Theme URI: http://activis.ca Author: Activis Author URI: http://activis.ca Description: A design system to build Wordpress site Version: 1.0.1 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: activis Template: act-wp-base-designsystem This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned with others. */ /* Font */ @import url("https://use.typekit.net/tjl4qgn.css"); /* Couleur de la maquette */ :root { --scrollbar: 0px; /* Brand primary */ --g-900: #101914; --g-800: #006944; --g-600: #80BA27; --g-50: #F3FAE7; /* Brand secondary */ --b-800: #0D294D; --b-50: #E5F3F5; /* Neutral */ --n-900: #000000; --n-800: #1A1A1A; --n-700: #666666; --n-600: #808080; --n-500: #999999; --n-400: #B3B3B3; --n-300: #CCCCCC; --n-200: #E5E5E5; --n-100: #F2F2F2; --n-50: #F7F7F7; /* Base */ --black: #000000; --white: #FFFFFF; /* Alert/Error */ --error-darkest: #742A2A; --error-dark: #C53030; --error-light: #FEB2B2; --error-lightest: #FFF0F0; /* Alert/Succes */ --succes-darkest: #234E52; --succes-dark: #2C7A7B; --succes-light: #4FD1C5; --succes-lightest: #E6FFFA; /* Alert/Warning */ --warning-darkest: #7B341E; --warning-dark: #C05621; --warning-light: #FBD38D; --warning-lightest: #FFF6E6; /* Alert/Info */ --info-darkest: #3C366B; --info-dark: #4C51BF; --info-light: #7F9CF5; --info-lightest: #EBF4FF; /* Social */ --facebook: #3B5999; --twitter: #55ACEE; --instagram: #E4405F; --youtube: #CD201F; --linkedin: #0077B5; /* link */ --links: #3371F2; --color--text--high: #000; --color--text--medium: #333; --color--text--low: #666; --color--text: var(--color--text--high); --color--accent: #3371F2; --color--background: #fff; --color--border: #CCCCCC; --color--background--button--primary: #3371F2; --color--background--button--hover--primary: #0C47C1; --color--background--button--active--primary: #09338A; --color--link--button--secondary: var(--color--link--text); --color--background--surface--light: #EBF1FE; --color--button--background: var(--color--link--text); --color--button--text: #fff; --color--button--border: var(--color--link--text); --color--button--background--filled: var(--g-800); --color--button--text--filled: #fff; --color--button--border--filled: var(--g-800); --color--button--background--hover--filled: var(--color--link--text--hover); --color--button--text--hover--filled: #fff; --color--button--border--hover--filled: var(--color--link--text--hover); --color--button--background--disabled--filled: var(--color--text--low); --color--button--text--disabled--filled: #fff; --color--button--border--disabled--filled: var(--color--text--low); --color--button--background--outlined: transparent; --color--button--text--outlined: #3371F2; --color--button--border--outlined: #3371F2; --color--button--background--hover--outlined: #3371F2; --color--button--text--hover--outlined: #fff; --color--button--border--hover--outlined: #3371F2; --color--button--background--disabled--outlined: transparent; --color--button--text--disabled--outlined: var(--color--text--low); --color--button--border--disabled--outlined: var(--color--text--low); --color--button--background--urgence: #C53030; --color--button--text--urgence: #fff; --color--button--border--urgence: #C53030; --color--button--background--hover--urgence: #742A2A; --color--button--text--hover--urgence: #fff; --color--button--border--hover--urgence: #742A2A; --color--button--background--disabled--urgence: #eb8e8e; --color--button--text--disabled--urgence: #fff; --color--button--border--disabled--urgence: #eb8e8e; --color--button--background--black: var(--color--text); --color--button--text--black: #fff; --color--button--border--black: var(--color--text); --color--button--background--hover--black: var(--color--text--medium); --color--button--text--hover--black: #fff; --color--button--border--hover--black: var(--color--text--medium); --color--button--background--disabled--black: var(--color--text--low); --color--button--text--disabled--black: #fff; --color--button--border--disabled--black: var(--color--text--low); --color--button--background--light: #fff; --color--button--text--light: var(--color--link--text); --color--button--border--light: #fff; --color--button--background--hover--light: #EBF1FE; --color--button--text--hover--light: var(--color--link--text--hover); --color--button--border--hover--light: #EBF1FE; --color--button--background--disabled--light: #efefef; --color--button--text--disabled--light: var(--color--text--low); --color--button--border--disabled--light: #efefef; --color--button--background--dark: var(--color--text); --color--button--text--dark: #fff; --color--button--border--dark: var(--color--text); --color--button--background--hover--dark: var(--color--text--medium); --color--button--text--hover--dark: #fff; --color--button--border--hover--dark: var(--color--text--medium); --color--button--background--disabled--dark: var(--color--text--low); --color--button--text--disabled--dark: #fff; --color--button--border--disabled--dark: var(--color--text--low); --color--button--background--transparent: transparent; --color--button--text--transparent: var(--color--link--text); --color--button--border--transparent: transparent; --color--button--background--hover--transparent: transparent; --color--button--text--hover--transparent: var(--color--link--text--hover); --color--button--border--hover--transparent: transparent; --color--button--background--disabled--transparent: transparent; --color--button--text--disabled--transparent: var(--color--text--low); --color--button--border--disabled--transparent: transparent; --color--interactive-box--border: var(--color--border); --color--interactive-box--text: var(--color--text); --color--interactive-box--link: var(--color--link--text); --color--interactive-box--background: var(--color--background); --color--interactive-box--border--hover: var(--color--button--border--filled); --color--interactive-box--text--hover: var(--color--button--text--filled); --color--interactive-box--link--hover: var(--color--button--text--filled); --color--interactive-box--background--hover: var(--color--button--background--filled); --color--interactive-box--border--activated: var(--color--button--border--filled); --color--interactive-box--text--activated: var(--color--button--text--filled); --color--interactive-box--link--activated: var(--color--button--text--filled); --color--interactive-box--background--activated: var(--color--button--background--filled); --border-width--box: none; --border-radius--box: none; --border-radius--interactive-box: 0.5rem; --box-shadow--box: none; --padding--box: 1.5rem; --border-width--interactive-box: 1px; --border-radius--interactive-box: 0.5rem; --padding--interactive-box: 1.5rem; } body { /** * Variables wordpress pour les containers de blocs */ --layout--content-size: 1060px; --layout--small-size: 1060px; --layout--wide-size: 1600px; --font-family--heading: "franklin-gothic-atf", sans-serif; --font-family--text: "franklin-gothic-atf", sans-serif; --color--text: #000; --color--background: #fff; --color--border: #e5e5e5; --color--facebook: #3B5999; --color--youtube: #CD201F; --color--linkedin: #0077B5; --color--twitter: #55ACEE; --color--instagram: #E4405F; --color--lead--text: #000; --color--title--text: #000; --color--list--icon: var(--color--text); --color--link--text: var(--g-800); --color--link--text--hover: var(--g-600); --color--link--text--focus: #0C47C1; --color--link--text--active: #09338A; --color--link--decoration: var(--g-800); --color--link--decoration--hover: transparent; --color--link--decoration--focus: transparent; --color--link--decoration--active: transparent; --color--button--background: var(--g-800); --color--button--text: #fff; --color--button--border: var(--color--link--text); --color--button--background--hover: var(--g-600); --color--button--text--hover: #fff; --color--button--border--hover: var(--g-800); --color--button--background--focus: var(--g-800); --color--button--text--focus: #fff; --color--button--border--focus: var(--g-600); --color--button--background--active: var(--g-800); --color--button--text--active: #fff; --color--button--border--active: var(--g-600); --color--button--background--disabled: rgba(0, 0, 0, 0.5); --color--button--text--disabled: #fff; --color--button--border--disabled: rgba(0, 0, 0, 0.5); --color--button--background--light: #fff; --color--button--text--light: var(--color--link--text); --color--button--border--light: #fff; --color--button--background--hover--light: #EBF1FE; --color--button--text--hover--light: var(--color--link--text--hover); --color--button--border--hover--light: #EBF1FE; --color--button--background--disabled--light: #efefef; --color--button--text--disabled--light: var(--color--text--low); --color--button--border--disabled--light: #efefef; --color--button--background--filled: var(--g-800); --color--button--text--filled: #fff; --color--button--border--filled: var(--g-800); --color--button--background--hover--filled: var(--g-600); --color--button--text--hover--filled: #fff; --color--button--border--hover--filled: var(--g-600); --color--button--background--disabled--filled: var(--color--text--low); --color--button--text--disabled--filled: #fff; --color--button--border--disabled--filled: var(--color--text--low); --color--button--background--outlined: transparent; --color--button--text--outlined: var(--color--link--text); --color--button--border--outlined: var(--color--link--text); --color--button--background--hover--outlined: var(--color--link--text); --color--button--text--hover--outlined: #fff; --color--button--border--hover--outlined: var(--color--link--text); --color--button--background--disabled--outlined: transparent; --color--button--text--disabled--outlined: var(--color--text--low); --color--button--border--disabled--outlined: var(--color--text--low); --color--button--background--dark: var(--g-600); --color--button--text--dark: var(--color--text); --color--button--border--dark: var(--g-600); --color--button--background--hover--dark: var(--g-800); --color--button--text--hover--dark: #fff; --color--button--border--hover--dark: var(--g-800); --color--button--background--disabled--dark: var(--color--text--low); --color--button--text--disabled--dark: #fff; --color--button--border--disabled--dark: var(--color--text--low); --color--button--background--transparent: transparent; --color--button--text--transparent: var(--color--link--text); --color--button--border--transparent: transparent; --color--button--background--hover--transparent: transparent; --color--button--text--hover--transparent: var(--color--link--text--hover); --color--button--border--hover--transparent: transparent; --color--button--background--disabled--transparent: transparent; --color--button--text--disabled--transparent: var(--color--text--low); --color--button--border--disabled--transparent: transparent; --color--label--text: var(--color--text); --color--input--background: #F2F2F2; --color--input--border: #F2F2F2; --color--input--text: var(--color--text); --color--input--background--focus: var(--color--input--background); --color--input--border--focus: var(--color--input--border); --color--input--text--focus: var(--color--input--text); --color--input--background--error: var(--color--input--background); --color--input--border--error: var(--color--input--border); --color--input--text--error: var(--color--input--text); --color--input--background--disabled: var(--color--input--background); --color--input--border--disabled: var(--color--input--border); --color--input--text--disabled: var(--color--input--text); --color--box--text: var(--color--text); --color--box--background: #F3FAE7; --color--box--border: #F3FAE7; --color--box--text--odd: var(--color--text); --color--box--background--odd: var(--color--background); --color--box--border--odd: var(--color--background); --color--box--text--even: var(--color--box--text); --color--box--background--even: var(--g-50); --color--box--border--even: var(--color--box--border); --color--box--text--contrast: #fff; --color--box--background--contrast: #000; --color--box--border--contrast: #000; --color--box--text--emphasis: #fff; --color--box--background--emphasis: var(--g-800); --color--box--border--emphasis: #202084; --color--box--text--info: #202084; --color--box--background--info: #CFE2FF; --color--box--border--info: #CFE2FF; --color--box--text--warning: #664D03; --color--box--background--warning: #FFF3CD; --color--box--border--warning: #FFF3CD; --color--box--text--error: #842029; --color--box--background--error: #F8D7DA; --color--box--border--error: #F8D7DA; --color--box--text--success: #0F5132; --color--box--background--success: #D1E7DD; --color--box--border--success: #D1E7DD; --font--input: normal 1rem/1.5rem var(--font-family--text); --outline--focus: 3px solid var(--color--button--background--focus); --outline--active: 2px solid var(--color--button--background--active); --font--text: 1rem var(--font-family--text, sans-serif); --font--text--bold: 600 1rem var(--font-family--text, sans-serif); --font--small--regular: 0.875rem/1.714 var(--font-family--text, sans-serif); --font--small--bold: 600 0.875rem/1.714 var(--font-family--text, sans-serif); --font--small: var(--font--small--regular); --font--lead--regular: 1.75rem/1.429 var(--font-family--text, sans-serif); --font--lead--bold: 600 1.75rem/1.429 var(--font-family--text, sans-serif); --font--lead: var(--font--lead--regular); --font--hero: clamp(2rem, 5vw, 4rem)/1.156 var(--font-family--heading, sans-serif); --font--small: 0.875rem/1.714 var(--font-family--text, sans-serif); --font--input: var(--font--text); --font--button: var(--font--text--bold); --font--button--large: var(--font--text--bold); --font--button--small: var(--font--text--bold); --font--lead--regular: 1.5rem var(--font-family--text, sans-serif); --font--lead--bold: 600 1.5rem var(--font-family--text, sans-serif); --font--lead: var(--font--lead--regular); --font--title--h1--regular: 500 3rem var(--font-family--heading, sans-serif); --font--title--h2--regular: 400 2rem var(--font-family--heading, sans-serif); --font--title--h3--regular: 500 1.5rem var(--font-family--heading, sans-serif); --font--title--h4--regular: 600 1.25rem var(--font-family--heading, sans-serif); --font--title--h5--regular: 1.125rem/1.33333 var(--font-family--heading, sans-serif); --font--title--h6--regular: 600 1.0625rem/1.41176 var(--font-family--heading, sans-serif); --font--title--h1--bold: 600 3rem var(--font-family--heading, sans-serif); --font--title--h2--bold: 600 2rem var(--font-family--heading, sans-serif); --font--title--h3--bold: 600 1.5rem var(--font-family--heading, sans-serif); --font--title--h4--bold: 600 1.25rem var(--font-family--heading, sans-serif); --font--title--h5--bold: 600 1.125rem var(--font-family--heading, sans-serif); --font--title--h6--bold: 600 1.0625rem/1.41176 var(--font-family--heading, sans-serif); --font--title--h1: var(--font--title--h1--regular); --font--title--h2: var(--font--title--h2--bold); --font--title--h3: var(--font--title--h3--bold); --font--title--h4: var(--font--title--h4--bold); --font--title--h5: var(--font--title--h5--bold); --font--title--h6: var(--font--title--h6--bold); --font--label: bold 1rem/1rem var(--font-family--text); --spacing--none: 0; --spacing--xxx-small: 0.25rem; --spacing--xx-small: 0.5rem; --spacing--x-small: 1rem; --spacing--small: 1.5rem; --spacing--medium: 2rem; --spacing--large: 3rem; --spacing--x-large: 4rem; --spacing--xx-large: 5rem; --spacing--xxx-large: 8rem; --border-radius--button: 0.5rem; --border-width--button: 2px; --border-width--button--large: 2px; --border-width--button--medium: 2px; --border-width--button--small: 2px; --border-width--button--x-small: 2px; --border-width--button--text: 0; /*--height--button:3.5rem;*/ --padding--button: 1rem; --padding--button--large: 1rem; --padding--button--medium: 0.75rem; --padding--button--small: 0.5rem; --padding--button--x-small: 0.25rem; --padding--button--text: 0rem; --height--button: 3.5rem; --height--input: 3rem; --padding--input: 0.5rem 1rem; --border-radius--input: 0.25rem; --border-width--input: 0; --border-width--box: none; --border-radius--box: none; --box-shadow--box: none; --padding--box: 1.5rem; --box-shadow--button: none; --box-shadow--button--hover: none; --box-shadow--button--focus: none; --box-shadow--button--active: none; --box-shadow--input: none; --box-shadow--input--hover: none; --box-shadow--input--focus: none; --box-shadow--input--error: none; /** https://yoksel.github.io/url-encoder/ */ --icon--list: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ctitle%3Ebullet%3C/title%3E%3Cpath d='M16 21.333c-2.945 0-5.333-2.388-5.333-5.333s2.388-5.333 5.333-5.333c2.945 0 5.333 2.388 5.333 5.333 0 1.415-0.561 2.771-1.563 3.771s-2.356 1.563-3.771 1.563z'%3E%3C/path%3E%3C/svg%3E"); --easing--state: ease-in-out; --easing--entrance: ease-in; --easing--exit: ease-out; --duration--slowest: 1s; --duration--slower: 750ms; --duration--slow: 500ms; --duration--fast: 300ms; --duration--faster: 200ms; --duration--fastest: 100ms; --duration--none: 0; } /*** DEPRECATED La liste en-dessous n'est plus à utiliser. **/ body { /** * Variables de couleurs propres au projet */ --color--primary: var(--g-800); --color--primary--hover: var(--g-800); --color--secondary: var(--g-600); --color--secondary--hover: var(--g-600); --color--tertiary: #86BBD8; --color--tertiary--hover: #86BBD8; --color--accent: var(--g-800); --color--accent--hover: #F1F7FB; --color--error: #DA1E28; --color--black: #000; --color--grey-90: #1A1A1A; --color--grey-80: #333333; --color--grey-70: #534545; --color--grey-60: #666666; --color--grey-50: #808080; --color--grey-40: #C4C4C4; --color--grey-30: #B3B3B3; --color--grey-20: #CCCCCC; --color--grey-10: #E5E5E5; --color--grey-05: #F2F2F2; --color--grey-03: #F7F7F7; --color--white: #fff; --background: var(--color--white); --color--meta: var(--color--grey-70); --color--text: var(--color--black); --color--interactive: var(--color--secondary); --color--emphasis: var(--color--primary); --gaps--columns: 1.5rem; --gaps--grid: 2rem; --gaps--list: 1.5rem; --gaps--sides: 2rem; --gaps--boxed: 1.5rem; --gaps--text: 1rem; --gaps--block: 2.5rem; --gaps--section: 5rem; --gaps--inline: 0.5rem; --gaps--inline--large: 1em; --gaps--menu: 2.5rem; --padding--none: 0; --padding--xx-small: 0.25rem; --padding--x-small: 0.5rem; --padding--small: 1rem; --padding--medium: 1.25rem; --padding--x-medium: 1.5rem; --padding--xx-medium: 1.75rem; --padding--large: 2rem; --padding--x-large: 2.5rem; --padding--xx-large: 5rem; --margin--none: 0; --margin--xxx-small: 0.25rem; --margin--xx-small: 0.5rem; --margin--x-small: 1rem; --margin--small: 1.5rem; --margin--medium: 2rem; --margin--large: 3rem; --margin--x-large: 4rem; --margin--xx-large: 5rem; --margin--xxx-large: 8rem; --layer--behind: -1; --layer--set: 1; --layer--overlay: 800; --layer--menu: 900; --layer--header: 1000; --layer--modal: 1100; --layer--veil: 9000; --layer--always-on-top: 99999999; --line-height--text: 1.5; --line-height--x-small: 1.6; --line-height--small: 1.4285; --line-height--x-large: 1.25; --font-size--x-small: 0.625rem; --font-size--small: 0.75rem; --font-size--medium: 1rem; --font-size--large: 1.5rem; --font-size--x-large: 2rem; --font--input: normal 1rem/1.5rem var(--font-family--text); /* les variables fonts ci-dessous sont la copie de ADMQ */ --font--text: 1rem/1.5 var(--font-family--text, sans-serif); --font--text--bold: 600 1rem/1.5 var(--font-family--text, sans-serif); --font--small--regular: 0.875rem/1.714 var(--font-family--text, sans-serif); --font--small--bold: 600 0.875rem/1.714 var(--font-family--text, sans-serif); --font--small: var(--font--small--regular); --font--input: var(--font--text); --font--button: 600 1rem/1.25 var(--font-family--text, sans-serif); --font--lead--regular: 1.5rem/1.429 var(--font-family--text, sans-serif); --font--lead--bold: 600 1.5rem/1.429 var(--font-family--text, sans-serif); --font--lead: var(--font--lead--regular); --font--hero: clamp(2rem, 5vw, 4rem)/1.156 var(--font-family--heading, sans-serif); /* --font--title--h1--regular: 3rem/1.25 var(--font-family--heading, sans-serif); --font--title--h2--regular: 2rem/1.25 var(--font-family--heading, sans-serif); --font--title--h3--regular: 1.5rem/1.25 var(--font-family--heading, sans-serif); --font--title--h4--regular: 1.375rem/1.3636 var(--font-family--heading, sans-serif); --font--title--h5--regular: 1.250rem/1.2 var(--font-family--heading, sans-serif); --font--title--h6--regular: 1.125rem/1.333333 var(--font-family--heading, sans-serif); --font--title--h1--bold: bold 3rem/1.25 var(--font-family--heading, sans-serif); --font--title--h2--bold: bold 2rem/1.25 var(--font-family--heading, sans-serif); --font--title--h3--bold: bold 1.5rem/1.25 var(--font-family--heading, sans-serif); --font--title--h4--bold: bold 1.375rem/1.3636 var(--font-family--heading, sans-serif); --font--title--h5--bold: bold 1.250rem/1.2 var(--font-family--heading, sans-serif); --font--title--h6--bold: bold 1.125rem/1.33333 var(--font-family--heading, sans-serif); --font--title--h1: var(--font--title--h1--bold); --font--title--h2: var(--font--title--h2--bold); --font--title--h3: var(--font--title--h3--bold); --font--title--h4: var(--font--title--h4--bold); --font--title--h5: var(--font--title--h5--bold); --font--title--h6: var(--font--title--h6--bold); */ --font--label: bold 1rem/1.2 var(--font-family--text); --line-height--heading: 1.3333; --line-height--h1: 1.142857; --line-height--h2: 1.142857; --line-height--h3: 1.2; --line-height--h4: 1.3333; --line-height--h5: 1.2; --line-height--h6: 1.3333; --icon--xx-small: 1rem; --icon--x-small: 1.25rem; --icon--small: 1.5rem; --icon--medium: 2rem; --icon--large: 2.5rem; --icon--x-large: 4rem; --icon--xx-large: 5rem; --icon--xxx-large: 6rem; --font-weight--heading: 500; --font-weight--text: 400; --list--bullet: url("../../assets/icons/SVG/bullet.svg"); --caption--font: normal var(--font-weight--text) 0.875rem/1.5rem var(--font-family--text); --quote--font: italic 500 1.75rem var(--font-family--heading); --quote--color: var(--g-800); --quote--background: transparent; --color--quote--emphasis: #3371f2; --color--quote--text: var(--color--text); /* non scopé, peut etre utilisé a beaucoup de places */ --social--facebook: #3B5999; --social--youtube: #CD201F; --social--twitter: #55ACEE; --social--linkedin: #0077B5; --social--instagram: #E4405F; --button--background--hover: var(--color--primary--hover); --button--border-color--hover: var(--color--primary--hover); --button--color--hover: var(--color--white); --button--background--active: var(--color--primary--hover); --button--border-color--active: var(--color--primary--hover); --button--color--active: var(--color--white); --button--background--disabled: #ededed; --button--border-color--disabled: #ededed; --button--color--disabled: #bcbcbc; --icon-button--color: var(--color--white); --icon-button--background: var(--color--black); --icon-button--color--hover: var(--color--black); --icon-button--background--hover: var(--color--white); --logo--primary--filter: invert(51%) sepia(61%) saturate(495%) hue-rotate(79deg) brightness(93%) contrast(92%); --badges--gap: .5rem; --badge--padding: .5rem 1rem; --badge--radius: 999vw; --badge--font: 700/normal 1rem/1.5em var(--font-family--text); } @media (max-width: 1279px) { body { --font--lead--regular: 1.375rem/1.3636 var(--font-family--text, sans-serif); --font--lead--bold: 600 1.375rem/1.3636 var(--font-family--text, sans-serif); --font--title--h1--regular: 2rem/1.25 var(--font-family--heading, sans-serif); --font--title--h1--bold: 600 2rem/1.25 var(--font-family--heading, sans-serif); --font--title--h2--regular: 1.5rem/1.25 var(--font-family--heading, sans-serif); --font--title--h2--bold: 600 1.5rem/1.25 var(--font-family--heading, sans-serif); --font--title--h3--regular: 1.375rem/1.3636 var(--font-family--heading, sans-serif); --font--title--h3--bold: 600 1.375rem/1.3636 var(--font-family--heading, sans-serif); --font--title--h4--regular: 1.25rem/1.2 var(--font-family--heading, sans-serif); --font--title--h4--bold: 600 1.25rem/1.2 var(--font-family--heading, sans-serif); --font--title--h5--regular: 1.125rem/1.333333 var(--font-family--heading, sans-serif); --font--title--h5--bold: 600 1.125rem/1.333333 var(--font-family--heading, sans-serif); --font--title--h6--regular: 1rem/1.5 var(--font-family--heading, sans-serif); --font--title--h6--bold: 600 1rem/1.5 var(--font-family--heading, sans-serif); --font--lead: 1.375rem/1.333333 var(--font-family--text, sans-serif); --spacing--medium: 1.5rem; --spacing--large: 2rem; --spacing--x-large: 2.5rem; --spacing--xx-large: 4rem; --spacing--xxx-large: 5rem; } } @media (max-width: 781px) { body { --font--title--h1--regular: 1.75rem/1.429 var(--font-family--heading, sans-serif); --font--title--h1--bold: 600 1.75rem/1.429 var(--font-family--heading, sans-serif); --spacing--large: 1.5rem; --spacing--x-large: 2rem; --spacing--xx-large: 3rem; --spacing--xxx-large: 4rem; --gaps--sides: 1.5rem; } } .l-header { --icon-button--color: var(--color--black); --icon-button--background: var(--color--grey-05); --icon-button--color--hover: var(--color--white); --icon-button--background--hover: var(--g-600); } .post-navigation-link { --link--color: var(--color--primary); } .act-quick-links { --color--background: var(--color--primary); --color--background--hover: var(--color--tertiary); --color--text: var(--color--white); --color--text--hover: var(--color--white); } .wp-block-cover, .act-gallery-cover { --cover-heading-color: var(--color--white); --cover-heading-font: normal var(--font-weight--heading) var(--font-size--h1)/var(--line-height--heading) var(--font-family--heading); --cover-heading-align: left; --cover-heading-valign: center; --cover-container-width: var(--layout--wide-size); --cover-overlay-background: var(--color--black); --cover-overlay-opacity: 0.35; --cover-height: 640px; } .gform_wrapper, form { --form--gap-x: var(--gaps--grid); --form--gap-y: var(--gaps--grid); } .wp-block-query-pagination { --number--size: 2rem; --number--gap: 0.5rem; --number--color: var(--color--secondary); --number--background: transparent; --number--color--hover: var(--color--white); --number--background--hover: var(--color--secondary); --number--color--active: var(--color--white); --number--background--active: var(--color--grey-60); --number--color--current: var(--color--secondary); --number--background--current: var(--color--grey-20); --number--radius: 0.25rem; --button--color: var(--color--white); --button--background: var(--color--primary); --button--color--hover: var(--color--white); --button--background--hover: var(--color--secondary); --button--color--active: var(--color--white); --button--background--active: var(--color--grey-60); --button--radius: 0.25rem; --font: 500 1rem/1.5rem var(--font-family--text); } .yoast-breadcrumbs { --crumb--gap: var(--padding--x-small); --crumb--color: var(--color--text--high); --crumb--font: normal 500 var(--font-size--medium)/1em var(--font-family--text); --crumb--color--current: var(--color--text--high); --crumb--font--current: normal 400 var(--font-size--medium)/1em var(--font-family--text); --crumb--color--separator: var(--g-800); --crumb--size--separator: var(--font-size--medium); } .wp-block-post-template { --img--height: 200px; } .alerte-banner { --avis--title-color: #ffffff; --avis--color: #ffffff; --avis--bg-color: #D22E3E; --annonce--title-color: #000000; --annonce--color: #000000; --annonce--bg-color: #FFB529; --information--title-color: #000000; --information--color: #000000; --information--bg-color: #758E4F; } .act-galerie-slider { --nav--dots--height: 0.5rem; --nav--dots--width: 0.5rem; --nav--dots--margin: 0 0.5rem; --nav--dots--shadow: 0px 0.25rem 0.25rem rgb(0 0 0 / 25%); --nav--dots--bg-color: #fff; --nav--dots--border-color: #fff; --nav--dots--border-size: 2px; --nav--controls--padding: 0 1.5rem; --nav--controls--height: 1.5rem; --nav--controls--width: 1.5rem; --nav--controls--color: #fff; --nav--controls--bg-color: rgba(0, 0, 0, 0.4); --nav--controls--bg-color--hover: rgba(0, 0, 0, 1); --items-height: 400px; } .act-page-404 { --page-404--bg--color: var(--color--primary); --page-404--text--color: var(--color--white); --button--background: #fff; --button--border-color: #fff; --button--color: var(--color--primary); --button--background--hover: #dcdcdc; --button--border-color--hover: #dcdcdc; --button--color--hover: var(--color--primary); --button--background--active: #dcdcdc; --button--border-color--active: #dcdcdc; --button--color--active: var(--color--primary); --button--background--disabled: #ededed; --button--border-color--disabled: #ededed; --button--color--disabled: #bcbcbc; } .l-footer { --footer--background: var(--color--black); --footer--text-color: var(--color--white); --footer--font: normal 400 1rem/1.5rem var(--font-family--heading); --footer--spacing-y: var(--padding--none); --footer--content-spacing-y: var(--padding--xx-large); --footer--gap-x: 92px; --footer--gap-y: var(--margin--large); --footer--font-level1: normal 600 1.25rem/1.25em var(--font-family--heading); --footer--font-level2: normal 400 1rem/1.25em var(--font-family--heading); } .act-share { --network--color: var(--color--primary); --network--color--hover: var(--color--secondary); --toggle--color: var(--color--secondary); } .wp-block-archive-filtres { --filtres--padding: 1.5rem; --filtres--background: #ECF2FE; --filtres--title--font: 700 normal 1.25rem/1.14em var(--font-family--heading); --filtres--label--font: 700 normal 1rem/1.5em var(--font-family--text); --filtres--field--font: 400 normal 1rem/1.5em var(--font-family--text); --filtres--field--color: #223654; --filtres--label--text-color: #000; --filtres--form--gap: 1rem; } .act-reveal-card { --card--height: 400px; --color--text: #fff; --color--background--reveal: var(--color--primary); --color--background-opacity--reveal: 0.9; --color--text--reveal: #fff; --font--normal: 700 normal 2.5rem/1.20em var(--font-family--heading); } .wp-block-act-notice, .act-notice { --notice--radius: 0; --default--background: #000; --default--color: #fff; --default--border: transparent; --info--background: #CFE2FF; --info--color: #202084; --info--border: transparent; --alert--background: #F8D7DA; --alert--color: #842029; --alert--border: transparent; --warning--background: #FFF3CD; --warning--color: #664D03; --warning--border: transparent; --success--background: #D1E7DD; --success--color: #0F5132; --success--border: transparent; } .act-collapsible { --collapsible--color--heading--border: var(--color--grey-20); --collapsible--color--heading--background: var(--color--white); --collapsible--color--heading--text: var(--white); --collapsible--color--heading--icon: var(--g-800); --collapsible--color--heading--border--hover: var(--color--grey-20); --collapsible--color--heading--background--hover: #3371F2; --collapsible--color--heading--text--hover: var(--color--white); --collapsible--color--heading--icon--hover: var(--color--white); --collapsible--color--heading--border--focus: var(--color--grey-20); --collapsible--color--heading--background--focus: var(--g-800); --collapsible--color--heading--text--focus: var(--color--white); --collapsible--color--heading--icon--focus: var(--color--white); --collapsible--color--heading--border--active: var(--color--grey-20); --collapsible--color--heading--background--active: var(--g-800); --collapsible--color--heading--text--active: var(--color--white); --collapsible--color--heading--icon--active: var(--g-800); --collapsible--color--heading--border--open: var(--color--grey-20); --collapsible--color--heading--background--open: var(--g-800); --collapsible--color--heading--text--open: var(--color--white); --collapsible--color--heading--icon--open: var(--g-800); --collapsible--color--wrapper--border: none; --collapsible--color--wrapper--background: var(--color--white); --collapsible--color--wrapper--text: var(--color--text); --collapsible--font--heading: var(--font--family--heading); --collapsible--icon--heading: var(--g-800); --collapsible--icon--heading--open: var(--g-800); } .act-hero-slider { --act-hero-slider--height: 55.75rem; --act-hero-slider--color--text: #fff; --act-hero-slider--color--controls--text: #fff; --act-hero-slider--color--controls--background: rgba(0, 0, 0, 0.65); --act-hero-slider--color--controls--background--hover: rgba(0, 0, 0, 0.75); } .act-back-to-top { --back-to-top--background: #80BA27; --back-to-top--background--hover: #006944; --back-to-top--size: 3.75rem; } /* Fix: override WP contain-intrinsic-size on media-text block images */ .wp-block-media-text .wp-block-media-text__media img:is([sizes=auto i], [sizes^="auto," i]) { contain-intrinsic-size: none; }