@charset "UTF-8"; /* ════════════════════════════════════════════════════════════════════════════════════ * * ██╗ ██╗ █████╗ ██████╗ ███████╗███████╗ █████╗ ███████╗████████╗ * ██║ ██║██╔══██╗██╔══██╗██╔════╝██╔════╝██╔══██╗██╔════╝╚══██╔══╝ * ███████║███████║██████╔╝█████╗ █████╗ ███████║███████╗ ██║ * ██╔══██║██╔══██║██╔══██╗██╔══╝ ██╔══╝ ██╔══██║╚════██║ ██║ (\ /) * ██║ ██║██║ ██║██████╔╝███████╗██║ ██║ ██║███████║ ██║ ( . .)♥ * ╚═╝ ╚═╝╚═╝ ╚═╝╚═════╝ ╚══════╝╚═╝ ╚═╝ ╚═╝╚══════╝ ╚═╝ c(”)(” * * ════════════════════════════════════════════════════════════════════════════════════ * * VARIABLES * * Variables...................... Globally available variables and config * * * TOOLS * * Functions...................... Useful SCSS functions * Mixins......................... Useful SCSS mixins * * * RESSOURCES * * Yamm 3 (Mega Menu Boostrap 3).......................... http://geedmo.github.io/yamm3 * * * BASE * * Html-elements.................. H1-H6 — List — etc. * Typo........................... Title, text and general typo styling * * * LAYOUT * * * COMPONENTS * * * UTILITIES * * Utilities....................... Global reusable rules. * Animate......................... Gather animaton rules. * * ════════════════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════════════ * * ███████╗███████╗████████╗████████╗██╗███╗ ██╗ ██████╗ ███████╗ * ██╔════╝██╔════╝╚══██╔══╝╚══██╔══╝██║████╗ ██║██╔════╝ ██╔════╝ * ███████╗█████╗ ██║ ██║ ██║██╔██╗ ██║██║ ███╗███████╗ * ╚════██║██╔══╝ ██║ ██║ ██║██║╚██╗██║██║ ██║╚════██║ * ███████║███████╗ ██║ ██║ ██║██║ ╚████║╚██████╔╝███████║ * ╚══════╝╚══════╝ ╚═╝ ╚═╝ ╚═╝╚═╝ ╚═══╝ ╚═════╝ ╚══════╝ * * * ════════════════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════════════ * BOOTSTRAP'S 3 BREAKPOINTS (+XL zone adding) * ════════════════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════════════ * MAXIMAL WIDTH OF FIXED LAYOUT * ════════════════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════════════ * DEFAULT GUTTER ON 1280PX * ════════════════════════════════════════════════════════════════════════════════════ * * Value of the "gutter" of the site. It corresponds to the default gap between: * * — Page canvas and Page content * — Columns in WP Bakery rows * — Columns in Wordpress Templates rows (in bootstrap syntax) * — Elements of a grid module * * ════════════════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════════════ * DEFAULT VERTICAL SPACING BETWEEN BLOCKS ON BOOTSTRAP-XS ZONE WHEN IN VERTICAL MODE * ════════════════════════════════════════════════════════════════════════════════════ * * It corresponds to the vertical separation we want to put between block elements in * bootstrap-xs zone, when we are confronted to a all-vertical-block part (that is, all * blocks one below the other) * * ════════════════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════════════ * COLOR VARIABLES * ════════════════════════════════════════════════════════════════════════════════════ * * Put here all color variables to are meant to be used * * ════════════════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════════════ * FONTS VARIABLES * ════════════════════════════════════════════════════════════════════════════════════ * * Put here all font variables to are meant to be used. * * Has to be put in list form: $font-variable-name: ('...', '...', identifier). * * P.S. CSS identifiers (serif, sans-serif) do not require to be quoted. * * ════════════════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════════════ * HTML Hx VARIABLES * ════════════════════════════════════════════════════════════════════════════════════ * * Here we define for 1280px resolution * * — margin-bottom * — font-size * — line-height * — font * * P.S. We make two important choices: * * — We decide to put to zero all margin-tops to eliminate perturbation on the vertical * aeration of elements on a page * — We decide to make responsive margin-bottoms, but to keep unchanged size and * line-height * * ════════════════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════════════ * HTML p VARIABLES for 1280px resolution * ════════════════════════════════════════════════════════════════════════════════════ * * Here we define: * * — the margin-bottom * — font-size * — line-height * * P.S. We make two important choices: * * — We decide to put to zero all margin-tops to eliminate perturbation on the vertical * aeration of elements on a page * — We decide to make responsive margin-bottoms, but to keep unchanged size and * line-height * * ════════════════════════════════════════════════════════════════════════════════════ */ /* !!!!!!!!!!!!!!!!!!! IMPORTANT !!!!!!!!!!!!!!!!!!!!! IL FAUT SORTIR PARTOUT TOUS LES MARGINS / PADDINGS DÉFINIS SUR TOUS LES ÉLÉMENTS POUR LES METTRE ICI ET EN FAIRE DES VARIABLES PERSONNALISABLES ET L'IDÉAL SERAIT QU'À LA FIN ON PUISSE CONFIGURER LES VALEURS ENTRÉES DIRECTEMENT DANS WP DEPUIS DES OPTIONS DE THEME CONFIGURABLES ON DOIT INTERPOLER LES VARIABLES LORSQU'ELLES SONT DANS DES FONCTIONS CALC POUR QUE LES VALEURS SOIENT CORRECTEMENT COMPILÉES DANS LES AUTRES FICHIERS SCSS !!!!!!!!!!!!!!!!!! IMPORTANT !!!!!!!!!!!!!!!!!!!!!!!!!! */ /* IL FAUT MUTUALISER TOUT CE QUI PEUT L'ÊTRE (LES VARIABLES D'ESPACE PAR EXEMPLE ?) POUR DIMINUER LA TAILLE DU FICHIER UTILISE-T-ON DES FONCTIONS À CERTAINS ENDROITS ? */ /* REMPLACER LES 30PX = $ecart-vertical-bootstrap-xs */ /* ════════════════════════════════════════════════════════════════════════════════════ * DEFINE bleeding margin * ════════════════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════════════ * * ██╗ ██╗ █████╗ ██████╗ ██╗ █████╗ ██████╗ ██╗ ███████╗███████╗ * ██║ ██║██╔══██╗██╔══██╗██║██╔══██╗██╔══██╗██║ ██╔════╝██╔════╝ * ██║ ██║███████║██████╔╝██║███████║██████╔╝██║ █████╗ ███████╗ * ╚██╗ ██╔╝██╔══██║██╔══██╗██║██╔══██║██╔══██╗██║ ██╔══╝ ╚════██║ * ╚████╔╝ ██║ ██║██║ ██║██║██║ ██║██████╔╝███████╗███████╗███████║ * ╚═══╝ ╚═╝ ╚═╝╚═╝ ╚═╝╚═╝╚═╝ ╚═╝╚═════╝ ╚══════╝╚══════╝╚══════╝ * * * ════════════════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════════════ * DEFAULT RESPONSIVE GUTTER * ════════════════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════════════ * DEFAULT RESPONSIVE CONTAINERS PADDING * ════════════════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════════════ * DEFAULT RESPONSIVE BLEED MARGIN * ════════════════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════════════ * HTML VARIABLES — Hx margin bottoms responsive values * ════════════════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════════════ * HTML VARIABLES — p responsive values * ════════════════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════════════ * * ███████╗██╗ ██╗███╗ ██╗ ██████╗████████╗██╗ ██████╗ ███╗ ██╗███████╗ * ██╔════╝██║ ██║████╗ ██║██╔════╝╚══██╔══╝██║██╔═══██╗████╗ ██║██╔════╝ * █████╗ ██║ ██║██╔██╗ ██║██║ ██║ ██║██║ ██║██╔██╗ ██║███████╗ * ██╔══╝ ██║ ██║██║╚██╗██║██║ ██║ ██║██║ ██║██║╚██╗██║╚════██║ * ██║ ╚██████╔╝██║ ╚████║╚██████╗ ██║ ██║╚██████╔╝██║ ╚████║███████║ * ╚═╝ ╚═════╝ ╚═╝ ╚═══╝ ╚═════╝ ╚═╝ ╚═╝ ╚═════╝ ╚═╝ ╚═══╝╚══════╝ * * * ════════════════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════════════ * str-replace($string, $search, $replace) : @author Hugo Giraudel * ════════════════════════════════════════════════════════════════════════════════════ * * Replace $search with $replace in $string * * ════════════════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════════════ * to-string($value) * ════════════════════════════════════════════════════════════════════════════════════ * * Transform a value into string * * ════════════════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════════════ * * ███╗ ███╗██╗██╗ ██╗██╗███╗ ██╗███████╗ * ████╗ ████║██║╚██╗██╔╝██║████╗ ██║██╔════╝ * ██╔████╔██║██║ ╚███╔╝ ██║██╔██╗ ██║███████╗ * ██║╚██╔╝██║██║ ██╔██╗ ██║██║╚██╗██║╚════██║ * ██║ ╚═╝ ██║██║██╔╝ ██╗██║██║ ╚████║███████║ * ╚═╝ ╚═╝╚═╝╚═╝ ╚═╝╚═╝╚═╝ ╚═══╝╚══════╝ * * * ════════════════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════════════ * BOOTSTRAP / MAXIMAL-FIXED-LAYOUT ZONES * ════════════════════════════════════════════════════════════════════════════════════ * * These mixins have to be used with @include($zone) directives * * ════════════════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════════════ * USEFULL MIXINS * ════════════════════════════════════════════════════════════════════════════════════ * * Bunch of usefull mixins available for use * * ════════════════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════════════ * * ███████╗███████╗████████╗████████╗██╗███╗ ██╗ ██████╗ ███████╗ * ██╔════╝██╔════╝╚══██╔══╝╚══██╔══╝██║████╗ ██║██╔════╝ ██╔════╝ * ███████╗█████╗ ██║ ██║ ██║██╔██╗ ██║██║ ███╗███████╗ * ╚════██║██╔══╝ ██║ ██║ ██║██║╚██╗██║██║ ██║╚════██║ * ███████║███████╗ ██║ ██║ ██║██║ ╚████║╚██████╔╝███████║ * ╚══════╝╚══════╝ ╚═╝ ╚═╝ ╚═╝╚═╝ ╚═══╝ ╚═════╝ ╚══════╝ * * * ════════════════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════════════ * COLOR VARIABLES * ════════════════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════════════ * MAXIMAL WIDTH OF FIXED LAYOUT / FIXED INNER LAYOUT * ════════════════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════════════ * FOOTER * ════════════════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════════════ * MENU * ════════════════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════════════ * FONTS VARIABLES * ════════════════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════════════ * BORDERS * ════════════════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════════════ * MENU * ════════════════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════════════ * HERO * ════════════════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════════════ * SPACING * ════════════════════════════════════════════════════════════════════════════════════ */ /* Sections spacing — 35px / 50px / 100px */ /* ════════════════════════════════════════════════════════════════════════════════════ * HTML Hx VARIABLES * ════════════════════════════════════════════════════════════════════════════════════ * * Here we define for 1280px resolution * * — margin-bottom * — font-size * — line-height * — font * * P.S. We make two important choices: * * — We decide to put to zero all margin-tops to eliminate perturbation on the vertical * aeration of elements on a page * — We decide to make responsive margin-bottoms, but to keep unchanged size and * line-height * * ════════════════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════════════ * HTML p VARIABLES for 1280px resolution * ════════════════════════════════════════════════════════════════════════════════════ * * Here we define: * * — the margin-bottom * — font-size * — line-height * * P.S. We make two important choices: * * — We decide to put to zero all margin-tops to eliminate perturbation on the vertical * aeration of elements on a page * — We decide to make responsive margin-bottoms, but to keep unchanged size and * line-height * * ════════════════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════════════ * BOOTSTRAP'S 3 BREAKPOINTS (+XL zone adding) * ════════════════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════════════ * DEFAULT GUTTER ON 1280PX * ════════════════════════════════════════════════════════════════════════════════════ * * Value of the "gutter" of the site. It corresponds to the default gap between: * * — Page canvas and Page content * — Columns in WP Bakery rows * — Columns in Wordpress Templates rows (in bootstrap syntax) * — Elements of a grid module * * ════════════════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════════════ * DEFAULT VERTICAL SPACING BETWEEN BLOCKS ON BOOTSTRAP-XS ZONE WHEN IN VERTICAL MODE * ════════════════════════════════════════════════════════════════════════════════════ * * It corresponds to the vertical separation we want to put between block elements in * bootstrap-xs zone, when we are confronted to a all-vertical-block part (that is, all * blocks one below the other) * * ════════════════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════════════ * DEFINE THE VARIABLE FOR OUR CONTAINERS AND THE RELEVANT BLEEDING * ════════════════════════════════════════════════════════════════════════════════════ * * Our containers need an extra padding to allow bleeding of elements such as titles * * ════════════════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════════════ * * ██╗ ██╗ █████╗ ██████╗ ██╗ █████╗ ██████╗ ██╗ ███████╗███████╗ * ██║ ██║██╔══██╗██╔══██╗██║██╔══██╗██╔══██╗██║ ██╔════╝██╔════╝ * ██║ ██║███████║██████╔╝██║███████║██████╔╝██║ █████╗ ███████╗ * ╚██╗ ██╔╝██╔══██║██╔══██╗██║██╔══██║██╔══██╗██║ ██╔══╝ ╚════██║ * ╚████╔╝ ██║ ██║██║ ██║██║██║ ██║██████╔╝███████╗███████╗███████║ * ╚═══╝ ╚═╝ ╚═╝╚═╝ ╚═╝╚═╝╚═╝ ╚═╝╚═════╝ ╚══════╝╚══════╝╚══════╝ * * * ════════════════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════════════ * * ███████╗██╗ ██╗███╗ ██╗ ██████╗████████╗██╗ ██████╗ ███╗ ██╗███████╗ * ██╔════╝██║ ██║████╗ ██║██╔════╝╚══██╔══╝██║██╔═══██╗████╗ ██║██╔════╝ * █████╗ ██║ ██║██╔██╗ ██║██║ ██║ ██║██║ ██║██╔██╗ ██║███████╗ * ██╔══╝ ██║ ██║██║╚██╗██║██║ ██║ ██║██║ ██║██║╚██╗██║╚════██║ * ██║ ╚██████╔╝██║ ╚████║╚██████╗ ██║ ██║╚██████╔╝██║ ╚████║███████║ * ╚═╝ ╚═════╝ ╚═╝ ╚═══╝ ╚═════╝ ╚═╝ ╚═╝ ╚═════╝ ╚═╝ ╚═══╝╚══════╝ * * * ════════════════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════════════ * * ███╗ ███╗██╗██╗ ██╗██╗███╗ ██╗███████╗ * ████╗ ████║██║╚██╗██╔╝██║████╗ ██║██╔════╝ * ██╔████╔██║██║ ╚███╔╝ ██║██╔██╗ ██║███████╗ * ██║╚██╔╝██║██║ ██╔██╗ ██║██║╚██╗██║╚════██║ * ██║ ╚═╝ ██║██║██╔╝ ██╗██║██║ ╚████║███████║ * ╚═╝ ╚═╝╚═╝╚═╝ ╚═╝╚═╝╚═╝ ╚═══╝╚══════╝ * * * ════════════════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════════════ * ════════════════════════════════════════════════════════════════════════════════════ * * FLEX * * ════════════════════════════════════════════════════════════════════════════════════ * ════════════════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════════════ * FLEX CONTAINER PROPERTIES * ════════════════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════════════ * FLEX ITEMS PROPERTIES * ════════════════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════════════ * Yamm!3 - Yet another megamenu for Bootstrap 3 * http://geedmo.github.com/yamm3 * * @geedmo - Licensed under the MIT license * ════════════════════════════════════════════════════════════════════════════════════ */ .yamm .nav, .yamm .collapse, .yamm .dropup, .yamm .dropdown { position: static; } .yamm .container { position: relative; } .yamm .dropdown-menu { left: auto; } .yamm .yamm-content { padding: 20px 40px; } .yamm .dropdown.yamm-fw .dropdown-menu { left: 0; right: 0; } /* ════════════════════════════════════════════════════════════════════════════════════ * FONTS * ════════════════════════════════════════════════════════════════════════════════════ */ @font-face { font-family: "Roboto"; src: url("/wp-content/themes/habefast-child-theme/assets/fonts/Roboto/Roboto-MediumItalic.eot"); src: local("Roboto Medium Italic"), local("Roboto-MediumItalic"), url("/wp-content/themes/habefast-child-theme/assets/fonts/Roboto/Roboto-MediumItalic.eot?#iefix") format("embedded-opentype"), url("/wp-content/themes/habefast-child-theme/assets/fonts/Roboto/Roboto-MediumItalic.woff2") format("woff2"), url("/wp-content/themes/habefast-child-theme/assets/fonts/Roboto/Roboto-MediumItalic.woff") format("woff"), url("/wp-content/themes/habefast-child-theme/assets/fonts/Roboto/Roboto-MediumItalic.ttf") format("truetype"); font-weight: 500; font-style: italic; font-display: swap; } @font-face { font-family: "Roboto"; src: url("/wp-content/themes/habefast-child-theme/assets/fonts/Roboto/Roboto-Bold.eot"); src: local("Roboto Bold"), local("Roboto-Bold"), url("/wp-content/themes/habefast-child-theme/assets/fonts/Roboto/Roboto-Bold.eot?#iefix") format("embedded-opentype"), url("/wp-content/themes/habefast-child-theme/assets/fonts/Roboto/Roboto-Bold.woff2") format("woff2"), url("/wp-content/themes/habefast-child-theme/assets/fonts/Roboto/Roboto-Bold.woff") format("woff"), url("/wp-content/themes/habefast-child-theme/assets/fonts/Roboto/Roboto-Bold.ttf") format("truetype"); font-weight: bold; font-style: normal; font-display: swap; } @font-face { font-family: "Roboto"; src: url("/wp-content/themes/habefast-child-theme/assets/fonts/Roboto/Roboto-BlackItalic.eot"); src: local("Roboto Black Italic"), local("Roboto-BlackItalic"), url("/wp-content/themes/habefast-child-theme/assets/fonts/Roboto/Roboto-BlackItalic.eot?#iefix") format("embedded-opentype"), url("/wp-content/themes/habefast-child-theme/assets/fonts/Roboto/Roboto-BlackItalic.woff2") format("woff2"), url("/wp-content/themes/habefast-child-theme/assets/fonts/Roboto/Roboto-BlackItalic.woff") format("woff"), url("/wp-content/themes/habefast-child-theme/assets/fonts/Roboto/Roboto-BlackItalic.ttf") format("truetype"); font-weight: 900; font-style: italic; font-display: swap; } @font-face { font-family: "Roboto"; src: url("/wp-content/themes/habefast-child-theme/assets/fonts/Roboto/Roboto-ThinItalic.eot"); src: local("Roboto Thin Italic"), local("Roboto-ThinItalic"), url("/wp-content/themes/habefast-child-theme/assets/fonts/Roboto/Roboto-ThinItalic.eot?#iefix") format("embedded-opentype"), url("/wp-content/themes/habefast-child-theme/assets/fonts/Roboto/Roboto-ThinItalic.woff2") format("woff2"), url("/wp-content/themes/habefast-child-theme/assets/fonts/Roboto/Roboto-ThinItalic.woff") format("woff"), url("/wp-content/themes/habefast-child-theme/assets/fonts/Roboto/Roboto-ThinItalic.ttf") format("truetype"); font-weight: 100; font-style: italic; font-display: swap; } @font-face { font-family: "Roboto"; src: url("/wp-content/themes/habefast-child-theme/assets/fonts/Roboto/Roboto-BoldItalic.eot"); src: local("Roboto Bold Italic"), local("Roboto-BoldItalic"), url("/wp-content/themes/habefast-child-theme/assets/fonts/Roboto/Roboto-BoldItalic.eot?#iefix") format("embedded-opentype"), url("/wp-content/themes/habefast-child-theme/assets/fonts/Roboto/Roboto-BoldItalic.woff2") format("woff2"), url("/wp-content/themes/habefast-child-theme/assets/fonts/Roboto/Roboto-BoldItalic.woff") format("woff"), url("/wp-content/themes/habefast-child-theme/assets/fonts/Roboto/Roboto-BoldItalic.ttf") format("truetype"); font-weight: bold; font-style: italic; font-display: swap; } @font-face { font-family: "Roboto"; src: url("/wp-content/themes/habefast-child-theme/assets/fonts/Roboto/Roboto-Black.eot"); src: local("Roboto Black"), local("Roboto-Black"), url("/wp-content/themes/habefast-child-theme/assets/fonts/Roboto/Roboto-Black.eot?#iefix") format("embedded-opentype"), url("/wp-content/themes/habefast-child-theme/assets/fonts/Roboto/Roboto-Black.woff2") format("woff2"), url("/wp-content/themes/habefast-child-theme/assets/fonts/Roboto/Roboto-Black.woff") format("woff"), url("/wp-content/themes/habefast-child-theme/assets/fonts/Roboto/Roboto-Black.ttf") format("truetype"); font-weight: 900; font-style: normal; font-display: swap; } @font-face { font-family: "Roboto"; src: url("/wp-content/themes/habefast-child-theme/assets/fonts/Roboto/Roboto-Light.eot"); src: local("Roboto Light"), local("Roboto-Light"), url("/wp-content/themes/habefast-child-theme/assets/fonts/Roboto/Roboto-Light.eot?#iefix") format("embedded-opentype"), url("/wp-content/themes/habefast-child-theme/assets/fonts/Roboto/Roboto-Light.woff2") format("woff2"), url("/wp-content/themes/habefast-child-theme/assets/fonts/Roboto/Roboto-Light.woff") format("woff"), url("/wp-content/themes/habefast-child-theme/assets/fonts/Roboto/Roboto-Light.ttf") format("truetype"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "Roboto"; src: url("/wp-content/themes/habefast-child-theme/assets/fonts/Roboto/Roboto-Italic.eot"); src: local("Roboto Italic"), local("Roboto-Italic"), url("/wp-content/themes/habefast-child-theme/assets/fonts/Roboto/Roboto-Italic.eot?#iefix") format("embedded-opentype"), url("/wp-content/themes/habefast-child-theme/assets/fonts/Roboto/Roboto-Italic.woff2") format("woff2"), url("/wp-content/themes/habefast-child-theme/assets/fonts/Roboto/Roboto-Italic.woff") format("woff"), url("/wp-content/themes/habefast-child-theme/assets/fonts/Roboto/Roboto-Italic.ttf") format("truetype"); font-weight: normal; font-style: italic; font-display: swap; } @font-face { font-family: "Roboto"; src: url("/wp-content/themes/habefast-child-theme/assets/fonts/Roboto/Roboto-LightItalic.eot"); src: local("Roboto Light Italic"), local("Roboto-LightItalic"), url("/wp-content/themes/habefast-child-theme/assets/fonts/Roboto/Roboto-LightItalic.eot?#iefix") format("embedded-opentype"), url("/wp-content/themes/habefast-child-theme/assets/fonts/Roboto/Roboto-LightItalic.woff2") format("woff2"), url("/wp-content/themes/habefast-child-theme/assets/fonts/Roboto/Roboto-LightItalic.woff") format("woff"), url("/wp-content/themes/habefast-child-theme/assets/fonts/Roboto/Roboto-LightItalic.ttf") format("truetype"); font-weight: 300; font-style: italic; font-display: swap; } @font-face { font-family: "Roboto"; src: url("/wp-content/themes/habefast-child-theme/assets/fonts/Roboto/Roboto-Regular.eot"); src: local("Roboto"), local("Roboto-Regular"), url("/wp-content/themes/habefast-child-theme/assets/fonts/Roboto/Roboto-Regular.eot?#iefix") format("embedded-opentype"), url("/wp-content/themes/habefast-child-theme/assets/fonts/Roboto/Roboto-Regular.woff2") format("woff2"), url("/wp-content/themes/habefast-child-theme/assets/fonts/Roboto/Roboto-Regular.woff") format("woff"), url("/wp-content/themes/habefast-child-theme/assets/fonts/Roboto/Roboto-Regular.ttf") format("truetype"); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: "Roboto"; src: url("/wp-content/themes/habefast-child-theme/assets/fonts/Roboto/Roboto-Medium.eot"); src: local("Roboto Medium"), local("Roboto-Medium"), url("/wp-content/themes/habefast-child-theme/assets/fonts/Roboto/Roboto-Medium.eot?#iefix") format("embedded-opentype"), url("/wp-content/themes/habefast-child-theme/assets/fonts/Roboto/Roboto-Medium.woff2") format("woff2"), url("/wp-content/themes/habefast-child-theme/assets/fonts/Roboto/Roboto-Medium.woff") format("woff"), url("/wp-content/themes/habefast-child-theme/assets/fonts/Roboto/Roboto-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Roboto"; src: url("/wp-content/themes/habefast-child-theme/assets/fonts/Roboto/Roboto-Thin.eot"); src: local("Roboto Thin"), local("Roboto-Thin"), url("/wp-content/themes/habefast-child-theme/assets/fonts/Roboto/Roboto-Thin.eot?#iefix") format("embedded-opentype"), url("/wp-content/themes/habefast-child-theme/assets/fonts/Roboto/Roboto-Thin.woff2") format("woff2"), url("/wp-content/themes/habefast-child-theme/assets/fonts/Roboto/Roboto-Thin.woff") format("woff"), url("/wp-content/themes/habefast-child-theme/assets/fonts/Roboto/Roboto-Thin.ttf") format("truetype"); font-weight: 100; font-style: normal; font-display: swap; } /* ════════════════════════════════════════════════════════════════════════════════════ * TITLES * ════════════════════════════════════════════════════════════════════════════════════ */ .title__section { font-family: Arial; font-size: 26px; font-weight: bold; line-height: normal; letter-spacing: 4.6px; text-transform: uppercase; color: #65c6e5; margin-bottom: 1em; } .title__item { /*font-size: 18px; font-weight: bold; color: $dark-teal; letter-spacing: .1em;*/ color: #00324e; letter-spacing: 0; font-size: 14px; line-height: 20px; } .title__list { font-size: 22px; font-weight: bold; color: #282828; } /* ════════════════════════════════════════════════════════════════════════════════════ * TYPO (récupéré de Zeplin) * ════════════════════════════════════════════════════════════════════════════════════ */ body { font-family: Arial; } .Content { font-family: Arial; font-size: 14px; font-weight: normal; font-style: normal; font-stretch: normal; line-height: 1.43; letter-spacing: 2.5px; color: #282828; } .Content-chiffre-cle { font-family: Arial; font-size: 64px; font-weight: bold; font-style: normal; font-stretch: normal; line-height: normal; letter-spacing: normal; text-align: center; color: #65c6e5; } .Title-Header-home { font-family: Arial; font-size: 56px; font-weight: normal; font-style: normal; font-stretch: normal; line-height: normal; letter-spacing: 6.4px; text-align: center; color: #ffffff; } .Title-Header { font-family: Arial; font-size: 42px; font-weight: normal; font-style: normal; font-stretch: normal; line-height: 1.19; letter-spacing: 8.8px; color: #00324e; } .Title-Part { font-family: Arial; font-size: 26px; font-weight: bold; font-style: normal; font-stretch: normal; line-height: normal; letter-spacing: 4.6px; color: #65c6e5; } .Mobile-Title-Header { font-family: Arial; font-size: 26px; font-weight: normal; font-style: normal; font-stretch: normal; line-height: normal; letter-spacing: 5.4px; color: #00324e; } .Mobile-Title-Part { font-family: Arial; font-size: 24px; font-weight: bold; font-style: normal; font-stretch: normal; line-height: normal; letter-spacing: 4.3px; color: #65c6e5; } .Content-Catchline { font-family: Arial; font-size: 24px; font-weight: normal; font-style: normal; font-stretch: normal; line-height: normal; letter-spacing: 4.3px; text-align: center; color: #00324e; } .Title-Service { font-family: Arial; font-size: 22px; font-weight: bold; font-style: normal; font-stretch: normal; line-height: normal; letter-spacing: 2.4px; color: #282828; } .Title-Title-Actu { font-family: Arial; font-size: 22px; font-weight: normal; font-style: normal; font-stretch: normal; line-height: 1.45; letter-spacing: 4.6px; color: #00324e; } .Content-News-title { font-family: Arial; font-size: 18px; font-weight: bold; font-style: normal; font-stretch: normal; line-height: normal; letter-spacing: 2px; color: #00324e; } .Content-Avantages-title { font-family: Arial; font-size: 18px; font-weight: bold; font-style: normal; font-stretch: normal; line-height: normal; letter-spacing: 3.2px; text-align: center; color: #00324e; } .Mobile-Title-Service { font-family: Arial; font-size: 18px; font-weight: bold; font-style: normal; font-stretch: normal; line-height: normal; letter-spacing: 2px; color: #282828; } .Content-Chiffre-cle-text { font-family: Arial; font-size: 18px; font-weight: normal; font-style: normal; font-stretch: normal; line-height: 1.44; letter-spacing: 3.2px; text-align: center; color: #00324e; } .Content-Citation { font-family: Arial; font-size: 16px; font-weight: bold; font-style: italic; font-stretch: normal; line-height: 1.25; letter-spacing: 2.9px; text-align: center; color: #65c6e5; } .Content-citation { font-family: Arial; font-size: 16px; font-weight: bold; font-style: italic; font-stretch: normal; line-height: 1.25; letter-spacing: 2.9px; text-align: center; color: #65c6e5; } .Content-List-Title { font-family: Arial; font-size: 16px; font-weight: bold; font-style: normal; font-stretch: normal; line-height: normal; letter-spacing: 2.9px; color: #00324e; } .Content-Important { font-family: Arial; font-size: 16px; font-weight: bold; font-style: normal; font-stretch: normal; line-height: 1.38; letter-spacing: 2.9px; color: #00324e; } .Content-List { font-family: Arial; font-size: 14px; font-weight: normal; font-style: normal; font-stretch: normal; line-height: normal; letter-spacing: 2.5px; color: #000000; } .Content-News-category { font-family: Arial; font-size: 12px; font-weight: bold; font-style: normal; font-stretch: normal; line-height: normal; letter-spacing: 1.7px; color: #65c6e5; } menu { font-family: Arial; font-size: 12px; font-weight: normal; font-style: normal; font-stretch: normal; line-height: normal; letter-spacing: 2.1px; text-align: center; color: #00324e; } .Content-avantages { font-family: Arial; font-size: 12px; font-weight: normal; font-style: normal; font-stretch: normal; line-height: 1.67; letter-spacing: 2.1px; text-align: center; color: #777777; } .ContentNews-date { font-family: Arial; font-size: 11px; font-weight: normal; font-style: italic; font-stretch: normal; line-height: normal; letter-spacing: 2.8px; color: #65c6e5; } /* ════════════════════════════════════════════════════════════════════════════════════ * HEADER * ════════════════════════════════════════════════════════════════════════════════════ */ header .FR { display: none; } header .EN { display: none; } html[lang="fr-FR"] header .FR { display: block; } html[lang="en-US"] header .EN { display: block; } header #main-navigation { float: right; } @media (max-width: 1140px) { header #main-navigation { padding: 0 !important; } } @media (max-width: 1094px) { header #main-navigation .trait-menu { display: none; } header #main-navigation #mega-menu-primary { position: fixed; left: 0; top: calc(47px + 100px); width: 100vw; padding: 30px; } } @media (max-width: 1094px) and (max-width: 734px) { header #main-navigation #mega-menu-primary { top: 100px; } } header #logo-site { padding-left: 4%; padding-right: 4%; padding-top: 7px; background-color: #fff; } header #logo-site img { max-width: 100%; } header .top-bar-argos { overflow: hidden; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } header .top-bar-argos .nous-appeler { background-color: #65c6e5; padding-left: 2%; padding-right: 2%; text-align: center; height: 100%; font-size: 14px; } header .top-bar-argos .nous-appeler a { color: #fff; } header .top-bar-argos .espace-client { padding-left: 2%; padding-right: 2%; text-align: center; height: 100%; font-size: 14px; text-transform: uppercase; } header .top-bar-argos .espace-client img { padding-left: 1%; padding-right: 1%; } header .top-bar-argos .widget_text { padding-top: 6px; } [id*="top-header-widget"] { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 225px; padding: 0 !important; } @media (max-width: 991px) { [id*="top-header-widget"] { width: calc((1/3)*100%); } } [id*="top-header-widget"] * { color: white; letter-spacing: 2px; line-height: 1.7; font-size: 12px !important; text-transform: uppercase; } @media (max-width: 991px) { [id*="top-header-widget"] * { font-size: 1.20967742vw !important; } } [id*="top-header-widget"] .widget_text { padding-top: 0 !important; } [id*="top-header-widget"] p { margin-bottom: 0; } [id*="top-header-widget"] a:hover { color: white; } #top-header-widget-01 { background: #00324e; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; padding: 0 40px !important; width: calc(100% - 2*225px - 110px); } @media (max-width: 991px) { #top-header-widget-01 { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: calc((1/3)*100%); padding: 0 !important; } } #top-header-widget-03 { background: #00324e; position: relative; } #top-header-widget-03::after { position: absolute; right: 0; top: 0; width: 110px; height: 100%; background: #65c6e5; transform: translateX(100%); content: ""; } @media (min-width: 1280px) { #top-header-widget-03::after { width: calc(110px + (100vw - 1280px)); } } @media (max-width: 991px) { #top-header-widget-03::after { display: none; } } #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link { text-align: center !important; } #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item:first-child > a.mega-menu-link { margin-top: 20px; } @media screen and (min-width: 1440px) { #logo-site { padding-top: 7px !important; padding-left: 5% !important; padding-right: 6% !important; } } @media screen and (max-width: 734px) { header .top-bar-argos { display: none !important; } #logo-site { padding-left: 20px; padding-right: 0; padding-top: 20px; background-color: #fff; width: 60% !important; max-width: 250px; height: 40px; } } @media only screen and (max-width: 990px) and (min-width: 834px) { header #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block { height: auto; } header #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-blocks-right .mega-toggle-block { /*margin-right: -100px;*/ } header #logo-site { padding-left: 20px; padding-right: 0; padding-top: 20px; background-color: #fff; width: 30%; height: 70px; } header .top-bar-argos { height: 100%; min-height: 47px; font-size: 11px; } header .top-bar-argos .nous-appeler { height: 47px; font-size: 14px; } header .top-bar-argos .espace-client { height: 47px; text-align: center; padding-top: 0 !important; } header .top-bar-argos #top-header-widget-01 { /*padding-top: 10px;*/ } header .top-bar-argos .top-header-widget-container:nth-child(1) { padding-left: 50px; padding-right: 50px; } header #mega-menu-wrap-primary .mega-menu-toggle { line-height: 130px; } } @media only screen and (min-width: 600px) { header .top-bar-argos { height: 100%; min-height: 47px; font-size: 12px; } header .top-bar-argos .nous-appeler { padding-top: 9px; height: 47px; } header .top-bar-argos .espace-client { height: 47px; text-align: center; padding-top: 8px; } header .top-bar-argos #top-header-widget-01 { padding-top: 6px; } } .wpml-ls-display { color: #65c6e5; } button.navbar-toggle { display: none; } #mega-menu-primary { /* margin-right: 15px !important;*/ } @media screen and (min-width: 1440px) and (max-width: 1920px) { #mega-menu-primary { /*margin-right: 200px !important;*/ } } @media screen and (min-width: 1440px) { #mega-menu-primary { margin-right: 50px !important; } } #mega-menu-primary { padding: 18px 30px 15px 0px !important; } @media only screen and (min-width: 834px) and (max-width: 1280px) { #mega-menu-primary { margin-right: 5px !important; padding: 20px 15px 15px 0px !important; } header #logo-site { padding-left: 20px; padding-right: 2%; padding-top: 7px; background-color: #fff; width: 25% !important; } } .trait-menu { margin-top: -20%; max-height: 50px; } @media only screen and (max-width: 934px) { .trait-menu { display: none; } } @media only screen and (max-width: 834px) { header #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block { height: auto; } header #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-blocks-right .mega-toggle-block { /*margin-right: -100px;*/ } header #logo-site { padding-left: 20px; padding-right: 0; padding-top: 20px; background-color: #fff; width: 26%; height: 40px; } header #mega-menu-wrap-primary .mega-menu-toggle { line-height: 80px; } } .fixed { position: fixed; top: 0; left: 0; z-index: 99; background-color: #fff; width: 100%; } .home-slider { background-repeat: no-repeat; background-size: cover; } .slider-home-argos { height: 585px; width: 100%; background-repeat: no-repeat; background-size: cover; margin-top: 35px; } .text-slider { font-family: Arial; text-align: center; color: #113861; } .title-slider h1 { font-size: 56px; font-weight: normal; letter-spacing: 6.4px; padding-top: 60px; } .subtext-slider { font-size: 18px; font-weight: bold; line-height: 1.39; letter-spacing: 3.2px; padding-top: 24px; margin-left: 30%; margin-right: 30%; } @media screen and (min-width: 1441px) { .slider-home-argos { height: 800px; margin-top: 35px; } } @media screen and (max-width: 800px) { .slider-home-argos { height: 480px; margin-top: 140px; } .home-slider .title-slider h1 { font-size: 28px !important; } } @media screen and (max-width: 599px) { .slider-page__button-container, .slider-page--with-btn .slider-page__button-container { display: none !important; } .slider-page-mobile { margin-bottom: 10px; } .slider-page__button-container-mobile .btn { min-width: 250px; } } @media screen and (min-width: 600px) { .slider-page__button-container-mobile { display: none !important; } } /* ════════════════════════════════════════════════════════════════════════════════════ * FOOTER * ════════════════════════════════════════════════════════════════════════════════════ */ .site-footer { width: 100%; height: auto; margin-top: 50px; background-color: #00324e; } .site-footer .FR { display: none; } .site-footer .EN { display: none; } html[lang="fr-FR"] .site-footer .FR { display: block; } html[lang="en-US"] .site-footer .EN { display: block; } .site-footer .btn { max-width: 100% !important; } .site-footer .footer-logo-top { display: none; } .site-footer .footer-top { height: auto; padding-bottom: 2%; background-color: #00324e; } @media screen and (max-width: 600px) { .site-footer .footer-top .widget { margin: 20px; } } .site-footer .footer-top .widget h4 { color: white; } .site-footer .footer-top .widget img { max-width: 100%; } .site-footer .footer-top .widget a { color: white; } .site-footer .footer-top .widget a:hover { color: #65c6e5; } .site-footer .footer-top .widget .icons a { display: inline-block; } .site-footer .footer-top .widget .icons a:not(:last-child) { margin-right: 20px; } .site-footer .footer-top .widget .icons img { margin-bottom: 10px; width: 30px; height: 30px; } .site-footer .footer-top .widget .icons br { display: none; } .site-footer .footer-bottom { /*height: $footer-bottom-height;*/ } .site-footer .footer-bottom .copyright, .site-footer .footer-bottom .copyright * { text-align: center; color: white; font-size: 12px; height: 60px; padding-top: 20px; } .site-footer .footer-logo-top { background-color: #F5F5F5; text-align: center; padding-left: 20%; padding-right: 20%; padding-bottom: 1%; padding-top: 1%; } @media screen and (min-width: 550px) and (max-width: 800px) { .site-footer .footer-logo-top .col-sm-4 { width: 30%; display: inline-block; } } .site-footer .footer-bottom { background-color: #00324e; width: 100%; /*height: 30px;*/ } @media only screen and (min-width: 600px) and (max-width: 990px) { .footer-logo-top { height: 100px; } .widget_text p { font-size: 11px; } .btn-main--blue { min-width: 130px !important; font-size: 10px !important; } } #block-10 figure { margin-bottom: 15px; } @media only screen and (max-width: 600px) { .site-footer .footer-logo-top { width: 100%; display: none; } } /* ════════════════════════════════════════════════════════════════════════════════════ * * CONTAINERS * * * ════════════════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════════════ * Roubert Benoit : 2018.07.06 * ════════════════════════════════════════════════════════════════════════════════════ * * We do not want lateral paddings on the borders of #page-content > .container(-fluid) because we want the * possibility for children
(#page-content > article > .entry-content > section) * to occupy all width with an eventually filled background * * ════════════════════════════════════════════════════════════════════════════════════ */ #main-content > .container-fluid { padding: 0 1.953125vw; } @media (min-width: 1280px) { #main-content > .container-fluid { padding: 0 25px; } } /* ════════════════════════════════════════════════════════════════════════════════════ * * ROWS — TEST * Roubert Benoit : 2018.13.06 * * Need all content on
> .container to be of class row * * ════════════════════════════════════════════════════════════════════════════════════ */ /* .entry-content section > .container > .row { margin-bottom: $content-bottom-spacing-base; &:last-child { margin-bottom: 0; } } */ /* ════════════════════════════════════════════════════════════════════════════════════ * Roubert Benoit : 2018.07.06 * ════════════════════════════════════════════════════════════════════════════════════ * * Instead we want the default-gutter-responsive lateral aeration around
.container * * ════════════════════════════════════════════════════════════════════════════════════ */ /*.home .entry-content section .container { padding-left: calc((50/1280)*100vw); padding-right: calc((50/1280)*100vw); } */ /* ════════════════════════════════════════════════════════════════════════════════════ * Roubert Benoit : 2018.07.12 * ════════════════════════════════════════════════════════════════════════════════════ * * I deactivate this because a responsive padding has been defined for .container (See @gui 2018.05.25 * rewriting on /theme/habefast/habefast_includes/scss/_main-containers.scss * * ════════════════════════════════════════════════════════════════════════════════════ */ /*@media screen and (min-width:$sm-breakpoint) { .container { padding: 0 $container-bleed-padding; } }*/ /* ════════════════════════════════════════════════════════════════════════════════════ * HABEFAST CHILD THEME > INCLUDES > SCSS > LAYOUT > _home.scss * ════════════════════════════════════════════════════════════════════════════════════ */ .page-template-home { /* ════════════════════════════════════════════════════════════════════════════════════ * HOME SLIDER * ════════════════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════════════ * SECTION | INTRO * ════════════════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════════════ * SECTION SERVICES * ════════════════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════════════ * SECTION | QUOTATION * ════════════════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════════════ * NEWS * ════════════════════════════════════════════════════════════════════════════════════ */ } .page-template-home .home-slider { /* ════════════════════════════════════════════════════════════════════════════════════ * MAIN * ════════════════════════════════════════════════════════════════════════════════════ */ position: relative; padding: 100px 100px 60px 100px; /* ════════════════════════════════════════════════════════════════════════════════════ * SLIDER * ════════════════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════════════ * TITLE * ════════════════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════════════ * SUBTITLE * ════════════════════════════════════════════════════════════════════════════════════ */ } @media (max-width: 767px) { .page-template-home .home-slider { padding: 60px 30px; } } .page-template-home .home-slider .slider { position: relative; width: 1440px; max-width: 100%; height: 440px; margin-left: auto; margin-right: auto; background-repeat: no-repeat; background-size: cover; } @media (max-width: 767px) { .page-template-home .home-slider .slider { height: calc((440/768)*100vw); min-height: 300px; } } .page-template-home .home-slider .title-slider h1 { margin: 0; padding-top: 0px; padding-left: 35px; border-left: 3px solid #00324e; line-height: 1.4; letter-spacing: 3px; font-size: 30px; text-align: left; text-transform: uppercase; } .page-template-home .home-slider .title-slider h1 hr { display: block; margin: 0 0 10px 0; border: none; } @media (max-width: 767px) { .page-template-home .home-slider .title-slider h1 { padding-left: 20px; font-size: 3.90625vw !important; } .page-template-home .home-slider .title-slider h1 hr { margin: 0 0 20px 0; } } .page-template-home .home-slider .subtitle-slider { position: absolute; bottom: 0; right: 0; font-size: 32px; line-height: 0.9; } @media (max-width: 767px) { .page-template-home .home-slider .subtitle-slider { width: 100%; left: 50%; -webkit-transform: translateX(-50%) !important; -ms-transform: translateX(-50%) !important; -o-transform: translateX(-50%) !important; transform: translateX(-50%) !important; font-size: 4.16666667vw; } } .page-template-home .introduction { /* ════════════════════════════════════════════════════════════════════════════════════ * CONTAINER * ════════════════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════════════ * TEXT * ════════════════════════════════════════════════════════════════════════════════════ */ } .page-template-home .introduction .col.c-section__video { width: 850px; max-width: 100%; margin-left: auto; margin-right: auto; } .page-template-home .introduction__text { color: #00324e; letter-spacing: 2px; line-height: 1.25; font-size: 35px; } @media (max-width: 767px) { .page-template-home .introduction__text { font-size: 5.20833333vw; } } .page-template-home .service { /* ════════════════════════════════════════════════════════════════════════════════════ * ALL * ════════════════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════════════ * SINGLE * ════════════════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════════════ * SINGLE | IMAGE * ════════════════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════════════ * TITLE * ════════════════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════════════ * DESCRIPTION * ════════════════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════════════ * CTA * ════════════════════════════════════════════════════════════════════════════════════ */ } .page-template-home .services { /* ════════════════════════════════════════════════════════════════════════════════════ * TITLE * ════════════════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════════════ * FLEX COL * ════════════════════════════════════════════════════════════════════════════════════ */ } .page-template-home .services__text { color: #00324e; letter-spacing: 2px; line-height: 1.25; font-size: 35px; } @media (max-width: 767px) { .page-template-home .services__text { font-size: 5.20833333vw; } } .page-template-home .services .row { display: -ms-flex; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media (min-width: 1200px) { .page-template-home .services .row > .col:nth-child(2) { padding-left: 60px; } } @media (max-width: 991px) { .page-template-home .services .row { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .page-template-home .service { margin-bottom: 80px; } .page-template-home .service:last-child { margin-bottom: 0; } .page-template-home .service__image { position: relative; margin-left: -200px; } @media (max-width: 991px) { .page-template-home .service__image { margin-left: 0; margin-bottom: 30px; } } .page-template-home .service__image img { width: 100%; } .page-template-home .service__title { margin-bottom: 40px; } @media (max-width: 991px) { .page-template-home .service__title { margin-bottom: 30px; } } .page-template-home .service__title * { margin: 0; color: #65c6e5; letter-spacing: 5.4px; line-height: 1.4; font-size: 25px; font-weight: bold; text-transform: uppercase; } .page-template-home .service__description { margin-bottom: 40px; letter-spacing: 0.5px; line-height: 1.4; font-size: 14px; } .page-template-home .service__cta { display: -ms-flex; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .page-template-home .service__cta a { padding-left: 10px; color: #65c6e5; letter-spacing: 1.7; font-size: 14px; font-weight: normal; text-transform: uppercase; } .page-template-home .service__cta::before { width: 19px; height: 19px; content: url("/wp-content/themes/habefast_theme_child/assets/images/argos-group-pictogramme-fleche.svg"); } html[lang="en-US"] .page-template-home .service__cta::before { content: url("/wp-content/themes/habefast_theme_child/assets/images/argos-group-pictogram-arrow.svg"); } .page-template-home .quotation { /* ════════════════════════════════════════════════════════════════════════════════════ * SECTION * ════════════════════════════════════════════════════════════════════════════════════ */ height: 600px; background-size: cover; background-position: center bottom; /* ════════════════════════════════════════════════════════════════════════════════════ * ROW * ════════════════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════════════ * TEXT * ════════════════════════════════════════════════════════════════════════════════════ */ } @media (max-width: 767px) { .page-template-home .quotation { height: auto; } } .page-template-home .quotation .row { display: -ms-flex; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 100%; width: 100%; padding: 130px 60px; } .page-template-home .quotation .row > .col { width: 1015px; max-width: 100%; margin-left: auto; margin-right: auto; } .page-template-home .quotation__text { position: relative; line-height: 1.3; letter-spacing: 3.4px; font-size: 30px; text-align: center; } @media (max-width: 767px) { .page-template-home .quotation__text { font-size: 3.90625vw; } } .page-template-home .quotation__text::before, .page-template-home .quotation__text::after { position: absolute; display: block; width: 30px; height: 30px; background-size: contain; background-position: center center; background-repeat: no-repeat; content: ""; } @media (max-width: 499px) { .page-template-home .quotation__text::before, .page-template-home .quotation__text::after { width: calc((30/500)*100vw); height: calc((30/500)*100vw); } } .page-template-home .quotation__text::before { top: -40px; left: 0; -webkit-transform: translateX(-100%) !important; -ms-transform: translateX(-100%) !important; -o-transform: translateX(-100%) !important; transform: translateX(-100%) !important; background-image: url("/wp-content/themes/habefast_theme_child/assets/images/argos-group-pictogramme-citation-ouverture.svg"); } .page-template-home .quotation__text::after { bottom: -20px; right: 0; -webkit-transform: translateX(100%) !important; -ms-transform: translateX(100%) !important; -o-transform: translateX(100%) !important; transform: translateX(100%) !important; background-image: url("/wp-content/themes/habefast_theme_child/assets/images/argos-group-pictogramme-citation-fermeture.svg"); } html[lang="en-US"] .page-template-home .quotation__text::before { background-image: url("/wp-content/themes/habefast_theme_child/assets/images/argos-group-pictogram-quotation-opening.svg"); } html[lang="en-US"] .page-template-home .quotation__text::after { background-image: url("/wp-content/themes/habefast_theme_child/assets/images/argos-group-pictogram-quotation-closing.svg"); } html[lang="en-US"] .page-template-home .quotation { margin-bottom: -50px !important; } .page-template-home .news { /* ════════════════════════════════════════════════════════════════════════════════════ * FLEX COLUMNS * ════════════════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════════════ * TITLE * ════════════════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════════════ * NEWS | ITEM * ════════════════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════════════ * NEWS | IMAGE * ════════════════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════════════ * NEWS | CATEGORY * ════════════════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════════════ * NEWS | TITLE * ════════════════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════════════ * NEWS | CTA * ════════════════════════════════════════════════════════════════════════════════════ */ } .page-template-home .news .row > .col { padding: 0 10px; } .page-template-home .news h2 { margin-bottom: 70px; color: #65c6e5; letter-spacing: 5.4px; line-height: 1.4; font-size: 25px; font-weight: bold; text-transform: uppercase; } @media (min-width: 1200px) { .page-template-home .news h2 { margin-left: 100px; } } @media (max-width: 991px) { .page-template-home .news h2 { margin-bottom: 30px; } } @media (max-width: 991px) { .page-template-home .news__item { margin-bottom: 60px; } } .page-template-home .news__image { margin-bottom: 20px; height: 190px; overflow: hidden; } @media (max-width: 991px) { .page-template-home .news__image { height: auto; } } .page-template-home .news__image img { width: 100%; height: auto; max-height: none; } .page-template-home .news__category { margin-bottom: 20px; color: #65c6e5; letter-spacing: 1.7; font-size: 12px; font-weight: bold; text-transform: uppercase; } .page-template-home .news__title { margin-bottom: 30px; line-height: 1.2; font-size: 17px; } .page-template-home .news__all-cta { text-align: center; } .page-template-home .news__all-cta a { height: auto; padding-left: 30px; padding-right: 30px; white-space: break-spaces; letter-spacing: 2px; font-size: 14px; font-weight: normal; } /*.page-template-home { #main-content > .container-fluid{ margin-top: -30px; @media screen and (max-width: 800px) { margin-top: -50px; } } }*/ .devise-argos-home { text-align: center; font-size: 32px; color: #00324e; float: right; } .has-before--menu-full-height:before { position: absolute; content: " "; width: 0; border-right: 2px solid #65c6e5; left: 50%; bottom: 55%; height: 70%; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); animation-name: slideInDown; animation-duration: 1s; animation-delay: 1s; animation-fill-mode: forwards; } .has-before--menu-full-height { position: relative; } .bloc-image-text-home { height: 500px; background-color: #00324e; } .bloc-chiffres-home { color: #ffffff; margin-top: 2%; } .bloc-chiffre-text-home { height: auto; min-height: 550px; background-color: #00324e; } @media screen and (min-width: 1440px) { .bloc-chiffre-text-home { height: auto; } } .bloc-three-home { padding-left: 10%; padding-right: 10%; margin-top: 10%; margin-bottom: 10%; } .bloc-three-home .col-sm-4 { padding: 15px; } .bloc-three-home .title-bloc-home { font-size: 26px; font-weight: bold; font-style: normal; font-stretch: normal; line-height: normal; letter-spacing: 4.6px; color: #65c6e5; margin-left: -10px; text-transform: uppercase; } .bloc-three-home .description-bloc-home { font-size: 12px; font-weight: normal; font-style: normal; font-stretch: normal; line-height: 1.43; letter-spacing: 2.5px; color: #282828; margin-top: 8%; } .bloc-three-home .button-bloc-home { width: 206px; height: 50px; background-color: #65c6e5 !important; font-size: 14px; font-weight: normal; font-style: normal; font-stretch: normal; line-height: normal; letter-spacing: 2px; text-align: center; color: #ffffff; margin-top: 8%; border: none; text-transform: uppercase; } .bloc-three-home .picto-bloc-home { width: 68px; height: 89px; float: left; margin-top: -50px; } .bloc-chiffres-home .chiffres-home { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 200px); } .bloc-chiffres-home .chiffres-home .chiffre-home { text-align: center; height: 50%; padding: 15%; padding-bottom: 50%; } @media screen and (min-width: 1440px) { .bloc-chiffres-home .chiffres-home .chiffre-home { padding-bottom: 35%; } } .bloc-chiffres-home .chiffres-home .chiffre { font-size: 64px; font-weight: bold; font-style: normal; font-stretch: normal; line-height: normal; letter-spacing: normal; } .bloc-chiffres-home .chiffres-home .description-chiffre { font-size: 18px; font-weight: normal; font-style: normal; font-stretch: normal; line-height: 1.44; letter-spacing: 3.2px; } .bloc-chiffres-home .chiffre-home:nth-child(1) { margin-top: 4%; border-right: solid 1px #65c6e5; border-bottom: solid 1px #65c6e5; padding-left: 10%; padding-bottom: 60%; } .bloc-chiffres-home .chiffre-home:nth-child(2) { margin-top: 4%; border-bottom: solid 1px #65c6e5; padding-bottom: 60%; } .bloc-chiffres-home .chiffre-home:nth-child(3) { border-right: solid 1px #65c6e5; padding-top: 35%; padding-left: 10%; } .bloc-chiffres-home .chiffre-home:nth-child(4) { padding-top: 35%; } @media screen and (min-width: 1440px) { .bloc-chiffres-home .chiffre-home:nth-child(1), .bloc-chiffres-home .chiffre-home:nth-child(2) { padding-bottom: 40%; } .bloc-chiffres-home .chiffre-home:nth-child(3), .bloc-chiffres-home .chiffre-home:nth-child(4) { padding-top: 30%; } } .image-bloc-numbers { width: 100%; } .situations-frequentes { padding-top: 5%; } .situations-frequentes .titre-section { margin-left: 0px; padding-bottom: 2%; } .situations-frequentes .situations-home { padding-left: 10%; padding-right: 5%; font-weight: bold; margin-bottom: 5%; } .situations-frequentes .situations-home .categorie-situation { font-size: 12px; letter-spacing: 1.7px; color: #65c6e5; margin-top: 3%; margin-bottom: 3%; } .situations-frequentes .situations-home .titre-situation { font-size: 18px; letter-spacing: 2px; color: #00324e; margin-top: 3%; } .situations-frequentes .situations-home .image-situation { width: 100%; } /************************************************************ ************************************************************/ /* Slider home ************************************************************/ .home-slider { position: relative; /*&:after { position: absolute; content: " "; width: 0; border-right: 2px solid $seafoam-blue; left: 50%; bottom: 0; height: 10vw; -webkit-transform: translateY(50%); transform: translateY(50%); }*/ } .home-slider .title-slider h1 { text-transform: uppercase; font-size: 32px; border-left: 3px solid #00324e; padding-left: 20px; text-align: left; padding-top: 0px; margin-top: 60px; line-height: 45px; } @media screen and (max-width: 800px) { .home-slider .title-slider h1 { font-size: 28px !important; } } /* Service row ************************************************************/ @media (max-width: 767px) { .service-home .col-sm-4 { margin-bottom: 60px; } } .service-home__title-container { padding-top: 50px; padding-left: 50px; margin-bottom: 50px; height: 90px; background-position: left bottom; background-size: 65px auto; background-repeat: no-repeat; } .service-home__description { margin-bottom: 45px; padding-right: 50px; } @media screen and (min-width: 250px) and (max-width: 800px) { .service-home__description { height: auto; } } /* Numbers bloc ************************************************************/ .numbers-home__grid { display: grid; grid-template-columns: 1fr 1fr minmax(300px, 1fr) minmax(300px, 1fr); grid-template-rows: 1fr 1fr; background-color: #00324e; } .numbers-home__grid .chiffre { font-size: 64px; font-weight: bold; text-align: center; color: #fff; } .numbers-home__grid .description-chiffre { font-size: 18px; line-height: 1.44; letter-spacing: 3.2px; text-align: center; color: #fff; } .numbers-home__image { grid-column: 1 / span 2; grid-row: 1 / span 2; background-size: cover; background-position: left center; background-repeat: no-repeat; } .numbers-home--item, .numbers-home__item1, .numbers-home__item2, .numbers-home__item3, .numbers-home__item4 { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 250px; border: 1px solid #65c6e5; } .numbers-home__item1 { grid-column: 3 / span 1; grid-row: 1 / span 1; margin: 50px 0 0 50px; padding: 0 50px 50px 0; border-width: 0 1px 1px 0; } .numbers-home__item2 { grid-column: 4 / span 1; grid-row: 1 / span 1; margin: 50px 50px 0 0; padding: 0 0 50px 50px; border-width: 0 0 1px 0; } .numbers-home__item3 { grid-column: 3 / span 1; grid-row: 2 / span 1; margin: 0 0 50px 50px; padding: 50px 50px 0 0; border-width: 0 1px 0 0; } .numbers-home__item4 { grid-column: 4 / span 1; grid-row: 2 / span 1; margin: 0 50px 50px 0; padding: 50px 0 0 50px; border-width: 0; } /* Situations ************************************************************/ .situations-home .situations__img { height: 190px; } .situations-home .situations__title { text-align: left; } .situations-home .categorie-situation { text-transform: uppercase; font-size: 12px; font-weight: bold; color: #65c6e5; letter-spacing: 0.12em; margin-top: 20px; } @media only screen and (min-width: 600px) and (max-width: 1024px) { .numbers-home__grid { grid-template-columns: 1fr 1fr minmax(220px, 1fr) minmax(220px, 1fr); } .title__section { font-size: 16px; } .slider-page--with-btn .slider-page__title a.btn { margin: 3px; letter-spacing: 1px !important; } } @media only screen and (max-width: 600px) { .numbers-home__grid { /*grid-template-columns: 1fr 1fr minmax(150px, 1fr) minmax(150px, 1fr);*/ grid-template-columns: 1fr 1fr minmax(185px, 1fr) minmax(200px, 1fr); } .title-slider h1 { font-size: 32px; } } .texte-phone-migration { background-color: #65c6e5; color: #fff; text-align: center; padding-top: 20px; padding-bottom: 20px; font-size: 14px; } .cn-button.bootstrap { background-color: #65c6e5 !important; } /*html { max-width: 100%; margin: 0; overflow-x: scroll; }*/ /* ════════════════════════════════════════════════════════════════════════════════════ * PAGE HEADER * ════════════════════════════════════════════════════════════════════════════════════ */ .slider-page { background-position: center; background-size: cover; background-repeat: no-repeat; margin-bottom: 20px; } .slider-page--regular .slider-page__title { display: flex; flex-direction: column; justify-content: center; height: 300px; } .slider-page--regular .slider-page__title h1 { font-family: "Arial", helvetica, sans-serif; font-size: 38px; letter-spacing: 0.2em; color: #fff; text-transform: uppercase; padding-right: 40%; padding-left: 20px; border-left: 3px solid #00324e; margin-top: -10%; } @media screen and (max-width: 600px) { .slider-page--regular .slider-page__title h1 { font-size: 30px !important; } } .slider-page--regular .slider-page__container { position: relative; } .slider-page--regular .slider-page__container:after { position: absolute; content: ""; top: 250px; /*left: 80%;*/ right: 8%; height: 0; border-left: 2px solid #65c6e5; } @media screen and (min-width: 992px) { .slider-page--regular .slider-page__container:after { height: 130px; } } .slider-page--with-btn .slider-page__title { display: flex; flex-direction: column; justify-content: center; height: 400px; } @media screen and (max-width: 600px) { .slider-page--with-btn .slider-page__title { margin-top: 100px; } } .slider-page--with-btn .slider-page__title h1 { font-family: "Arial", helvetica, sans-serif; font-size: 38px; letter-spacing: 0.2em; color: #fff; text-transform: uppercase; padding-right: 40%; padding-left: 20px; border-left: 3px solid #00324e; margin-top: -10%; } @media screen and (max-width: 600px) { .slider-page--with-btn .slider-page__title h1 { font-size: 30px !important; } } .slider-page--with-btn .slider-page__title a.btn { display: inline-block; } .slider-page--with-btn .slider-page__container { position: relative; } .slider-page--with-btn .slider-page__container:after { position: absolute; content: ""; top: 350px; /*left: 80%;*/ right: 8%; height: 0; border-left: 2px solid #65c6e5; } @media screen and (min-width: 992px) { .slider-page--with-btn .slider-page__container:after { height: 165px; } } .slider-page--with-btn .slider-page__button-container { display: flex; justify-content: space-between; flex-wrap: wrap; } @media screen and (min-width: 600px) and (max-width: 1024px) { .slider-page--with-btn .slider-page__button-container { margin-left: 0 !important; } .slider-page--with-btn .slider-page__button-container a.btn { min-width: 200px !important; } } .slider-page--with-btn .slider-page__button-container > .col { flex: 0 1 100%; margin: 0 0 20px 0; } @media screen and (min-width: 600px) { .slider-page--with-btn .slider-page__button-container > .col { margin: 0 0 20px 0; flex: 0 1 50%; } } @media screen and (min-width: 992px) { .slider-page--with-btn .slider-page__button-container > .col { flex: 0 1 25%; margin: 0; } } .titre-section { font-size: 26px; font-weight: bold; font-style: normal; line-height: normal; letter-spacing: 4.6px; color: #65c6e5; text-align: center; text-transform: uppercase; margin-left: 6%; } .titre-slider-page { font-size: 42px; font-weight: normal; font-style: normal; font-stretch: normal; line-height: 1.19; letter-spacing: 8.8px; color: #00324e; text-transform: uppercase; } /* ════════════════════════════════════════════════════════════════════════════════════ * BLOC LISTE * ════════════════════════════════════════════════════════════════════════════════════ */ .bloc-texte-liste__wrapper { position: relative; margin: 0 0; } .bloc-texte-liste__wrapper:before { position: absolute; content: ""; top: 0; height: 100%; width: 30px; } @media screen and (max-width: 600px) { .bloc-texte-liste__wrapper:before { width: 10px; } } .bloc-texte-liste__wrapper:nth-of-type(odd):before { right: 0; } .bloc-texte-liste__wrapper:nth-of-type(even):before { left: 0; } .bloc-texte-liste__wrapper:not(:last-of-type) { margin: 0 0 100px; } .bloc-texte-liste__wrapper--light:before { background-color: #65c6e5; } .bloc-texte-liste__wrapper--dark:before { background-color: #00324e; } .bloc-texte-liste__title-container { display: flex; padding-bottom: 25px; } .bloc-texte-liste__title-image { width: 85px; margin-right: 3vw; } .bloc-texte-liste__title-text { flex: 0 0 1; } .bloc-texte-liste__liste_elements { column-count: 2; column-gap: 40px; padding-left: 15px; } .bloc-texte-liste__liste_elements > li { padding-top: 15px; break-inside: avoid; page-break-inside: avoid; -webkit-break-inside: avoid; } .bloc-texte-liste .picto-bloc { max-width: 85px; max-height: 60px; float: left; } .bloc-texte-liste .titre-bloc { font-size: 22px; font-weight: bold; font-style: normal; line-height: normal; letter-spacing: 2.4px; color: #282828; margin: 5%; } .bloc-texte-liste .liste_elements { margin-top: 3%; } .bloc-texte-liste .liste_elements ul { columns: 2; -webkit-columns: 2; -moz-columns: 2; list-style-position: inside; } .bloc-texte-liste .liste_elements ul li { font-size: 14px; font-weight: normal; font-style: normal; line-height: normal; letter-spacing: 0.5px; padding-top: 5%; break-inside: avoid; page-break-inside: avoid; -webkit-break-inside: avoid; } .bloc-texte-liste .text-bloc { font-size: 14px; font-weight: normal; font-style: normal; line-height: 1.43; letter-spacing: 0.5px; margin-top: 30px; } /* ════════════════════════════════════════════════════════════════════════════════════ * INTRODUCTION * ════════════════════════════════════════════════════════════════════════════════════ */ .texte-intro { padding-left: 5%; /*margin-top: 5%;*/ } .texte-intro .titre-bloc { font-size: 26px; font-weight: bold; font-style: normal; line-height: normal; letter-spacing: 4.6px; color: #65c6e5; text-align: center; margin-top: 2%; margin-bottom: 5%; text-transform: uppercase; } .texte-intro .text-intro { font-size: 14px; font-weight: normal; font-style: normal; letter-spacing: 0.5px; line-height: 1.43; } .has-before--intro-full-height:before { position: absolute; content: " "; width: 0; border-right: 1px solid #65c6e5; right: 0; bottom: 0; height: 80%; -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); animation-name: slideInDown; animation-duration: 1s; animation-delay: 1s; animation-fill-mode: forwards; } .has-before--intro-full-height { position: relative; } /* ════════════════════════════════════════════════════════════════════════════════════ * BANDEAU * ════════════════════════════════════════════════════════════════════════════════════ */ .bandeau-page { width: 100%; padding: 3%; max-height: 300px; text-align: center; color: #00324e; margin: 50px 0; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; } .bandeau-page .titre-bandeau { font-size: 28px; font-weight: bold; letter-spacing: 4.3px; } .bandeau-page .titre-bandeau--white { color: #fff; } .bandeau-page .subtitle-bandeau { font-size: 24px; font-weight: normal; letter-spacing: 3.7px; margin-bottom: 3%; } .bandeau-page .subtitle-bandeau--white { color: #fff; } .button-bandeau { text-align: center; padding-top: 1%; padding-bottom: 1%; padding-left: 1%; padding-right: 1%; } /* ════════════════════════════════════════════════════════════════════════════════════ * SECTION * ════════════════════════════════════════════════════════════════════════════════════ */ .section-page { padding-top: 50px; padding-bottom: 50px; } .section-page .title-section { font-size: 26px; font-weight: bold; font-style: normal; line-height: normal; letter-spacing: 4.6px; color: #65c6e5; text-align: center; text-transform: uppercase; } .section-page li { font-size: 14px; font-weight: normal; font-style: normal; line-height: 20px; letter-spacing: 0; padding-top: 10px; text-align: left; } .section-page .text-section { font-size: 14px; font-weight: normal; font-style: normal; line-height: 1.43; letter-spacing: 0.5px; margin-top: 0; } /* ════════════════════════════════════════════════════════════════════════════════════ * BUTTONS ROW * ════════════════════════════════════════════════════════════════════════════════════ */ .button-row__wrapper { padding-top: 0; } .button-row__container { text-align: center; } @media screen and (min-width: 768px) { .button-row__container a.btn { display: inline-block; margin: 0 1%; } } @media screen and (min-width: 992px) { .button-row__container a.btn { margin: 0 45px; } } /* ════════════════════════════════════════════════════════════════════════════════════ * PICTOS * ════════════════════════════════════════════════════════════════════════════════════ */ .picto { padding-left: 5%; padding-right: 5%; text-align: center; } @media screen and (max-width: 768px) { .picto:not(:first-of-type) { padding-top: 50px; } } .picto .picto-title { font-size: 16px; line-height: 20px; letter-spacing: 3.2px; margin-top: 3%; color: #00324e; font-weight: bold; padding-top: 5%; text-align: center; margin-top: -30px; } @media screen and (max-width: 1440px) { .picto .picto-title { margin-top: -40px; } } @media screen and (max-width: 550px) { .picto .picto-title { text-align: center; } } @media screen and (min-width: 550px) and (max-width: 800px) { .picto .picto-title { text-align: center; } } .picto .picto-text, .picto p { font-size: 14px; font-weight: normal; font-style: normal; line-height: 20px; letter-spacing: 0; padding-top: 5%; color: #777777; text-align: left !important; margin-bottom: 0; } @media screen and (max-width: 550px) { .picto .picto-text, .picto p { text-align: center !important; } } @media screen and (min-width: 550px) and (max-width: 800px) { .picto .picto-text, .picto p { text-align: center; } } /* ════════════════════════════════════════════════════════════════════════════════════ * Partenaires * ════════════════════════════════════════════════════════════════════════════════════ */ .grid-partenaires .img-partenaire { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 120px; text-align: center; } /* ════════════════════════════════════════════════════════════════════════════════════ * SITUATIONS * ════════════════════════════════════════════════════════════════════════════════════ */ .bloc-situations { display: -webkit-box; display: -ms-flexbox; display: flex; justify-content: space-between; flex-wrap: wrap; } .bloc-situations .col { flex: 0 1 100%; } @media screen and (min-width: 560px) { .bloc-situations .col { flex: 0 1 49%; } } @media screen and (min-width: 992px) { .bloc-situations .col { flex: 0 1 32%; } } @media screen and (min-width: 560px) and (max-width: 992px) { .bloc-situations .col:nth-of-type(3) { display: none; } } @media screen and (max-width: 768px) { .situations__item { margin-bottom: 30px; } } .situations__item img { max-width: 100%; height: auto; } .situations__img { height: 130px; width: 100%; background-position: center; background-size: cover; background-repeat: no-repeat; } .situations__title { margin-top: 15px; text-align: center; } /* Tabs situations */ .nav-tabs__situations { border-bottom: 0px solid transparent; background: #d9edf6; margin-bottom: 20px; } .nav-tabs__situations > li { padding-top: 0; } .nav-tabs__situations > li > a { color: #00324e; margin-right: 0; line-height: 1; border: 0px solid transparent; border-radius: 0 0 0 0; padding: 20px 3vw; } .nav-tabs__situations > li > a:hover, .nav-tabs__situations > li > a:focus { border-color: transparent; background-color: transparent; } .nav-tabs__situations > li.active a, .nav-tabs__situations > li.active a:focus, .nav-tabs__situations > li.active a:hover { color: #00324e; font-weight: bold; cursor: default; background-color: transparent; border: 0px solid #ddd; border-bottom-color: transparent; } @media screen and (max-width: 560px) { .nav-tabs__situations > li { float: none; } } .contact-form-onpage { background-position: right bottom; background-size: contain; background-repeat: no-repeat; margin-right: -120px; } .contact-submit-button { /*margin-top: 5px !important; margin-bottom: 12%;*/ float: right; } .slider-page-centrale { margin-right: 25px; } .slider-page-centrale:last-child { margin-right: 0px !important; } /* ════════════════════════════════════════════════════════════════════════════════════ * EQUIPE * ════════════════════════════════════════════════════════════════════════════════════ */ .bloc-equipe .membre-equipe { padding: 10px 0px; margin-bottom: 30px; } @media screen and (min-width: 768px) { .bloc-equipe .membre-equipe { margin-bottom: 0px; padding: 10px 40px; } } .bloc-equipe .membre-equipe .img-equipe { width: 200px; height: 200px; background: #d8d8d8; position: relative; } .bloc-equipe .membre-equipe .img-equipe:after { position: absolute; content: ""; top: 120px; left: 10%; height: 185px; border-left: 2px solid #65c6e5; } .bloc-equipe .membre-equipe .bloc-texte-membre { margin-left: 12%; margin-right: 12%; height: 155px; } .bloc-equipe .membre-equipe .bloc-texte-membre .nom-membre { font-size: 14px; font-family: Arial; font-weight: bold; letter-spacing: 2.86px; text-transform: uppercase; color: #00324e; margin-top: 20px; margin-right: 10px; } .bloc-equipe .membre-equipe .bloc-texte-membre .fonction-membre { font-size: 11px; letter-spacing: 0.5px; font-family: Arial; color: #00324e; } .bloc-equipe .texte-membre { margin-top: 100px; display: inline-block; font-size: 12px; letter-spacing: 0.5px; font-family: Arial; color: #00324e; width: 75%; height: auto; background-color: rgba(217, 237, 246, 0.2); border-top: 2px solid #65c6e5; padding: 20px; margin-top: 20px; margin-left: 20px; z-index: 1; position: absolute; top: 74.5%; } @media screen and (min-width: 768px) { .bloc-equipe .texte-membre { display: none; } } .bloc-equipe .texte-membre strong { color: #00324e; } @media screen and (min-width: 768px) { .bloc-equipe .membre-equipe:hover .texte-membre { display: inline-block; } } .contact-bar:after { /*position: absolute;*/ content: ""; top: 130px; left: 10%; height: 0; border-left: 2px solid #65c6e5; } @media screen and (min-width: 992px) { .contact-bar:after { height: 200px; } } /**** PAGE EQUIPE ****/ .bloc-equipe-page { display: inline-block; margin-bottom: 50px; } .bloc-equipe-page .membre-equipe { /*margin-bottom: 20px;*/ padding-top: 40px; padding-bottom: 40px; } .bloc-equipe-page .membre-equipe .img-equipe { width: 100%; height: auto; max-width: 200px; display: block; position: relative; } @media screen and (max-width: 767px) { .bloc-equipe-page .membre-equipe .img-equipe { margin-bottom: 30px; } } .bloc-equipe-page .membre-equipe .bandeau-equipe { /*display: flex;*/ } .bloc-equipe-page .membre-equipe .bandeau-equipe .nom-membre { font-size: 16px; font-family: Arial; font-weight: bold; letter-spacing: 2.86px; text-transform: uppercase; color: #00324e; } .bloc-equipe-page .membre-equipe .bandeau-equipe .fonction-membre { font-size: 12px; letter-spacing: 0.5px; font-family: Arial; color: #00324e; } @media screen and (min-width: 992px) { .bloc-equipe-page .details-bloc-equipe { min-height: 55px; } } .bloc-equipe-page .details-bloc-equipe:not(.border-bloc-equipe) { margin-bottom: 30px; } @media screen and (min-width: 992px) { .bloc-equipe-page .details-bloc-equipe:not(.border-bloc-equipe) { margin-bottom: 0px; } } .bloc-equipe-page .border-bloc-equipe { border-left: 2px solid #65c6e5; height: auto; } .bloc-equipe-page .border-bloc-equipe .tel-membre { font-size: 14px; line-height: 20px; letter-spacing: 0.5px; color: #113861; } .bloc-equipe-page .border-bloc-equipe .tel-membre a { font-size: 14px; line-height: 20px; letter-spacing: 0.5px; color: #113861; } .bloc-equipe-page .border-bloc-equipe .mail-membre { font-size: 14px; line-height: 20px; letter-spacing: 0.5px; } .bloc-equipe-page .border-bloc-equipe .mail-membre a { color: #65c6e5; } .bloc-equipe-page .texte-membre { margin-left: 50px; margin-top: 25px; font-size: 14px; letter-spacing: 0.5px; color: #282828; line-height: 20px; } @media screen and (max-width: 600px) { .bloc-equipe-page .texte-membre { margin-left: 20px; } } .bloc-equipe-page .texte-membre strong { color: #00324e; } @media screen and (min-width: 769px) { .texte-membre { margin-left: 0px; } } .bloc-texte-sinistre { background-color: #00324e; color: #fff; font-size: 12px; line-height: 1.43; letter-spacing: 2.5px; padding: 20px; } /* ════════════════════════════════════════════════════════════════════════════════════ * MENTIONS LEGALES * ════════════════════════════════════════════════════════════════════════════════════ */ /************************************************************ * BLOG ************************************************************/ /* Blog header ************************************************************/ .slider-blog { background-position: center; background-size: cover; background-repeat: no-repeat; } .slider-blog__title { position: relative; display: flex; flex-direction: column; justify-content: center; height: 300px; } .slider-blog__title h1 { font-family: "Arial", helvetica, sans-serif; font-size: 42px; letter-spacing: 0.2em; color: #fff; text-transform: uppercase; } .slider-blog__title:after { position: absolute; content: ""; top: 200px; right: 0; height: 0; border-left: 1px solid #65c6e5; } @media screen and (min-width: 992px) { .slider-blog__title:after { /*height: 180px;*/ } } /* Blog post list ************************************************************/ .news-list__post-image { width: 100%; padding-bottom: 56%; margin-bottom: 20px; background-size: cover; background-position: center; /*background-color: #ebebeb;*/ } @media screen and (min-width: 768px) { .news-list__post-image { margin-bottom: 50px; } } .news-list__post-title h3 { font-family: "Arial", helvetica, sans-serif; font-size: 18px; font-weight: 700; color: #00324e; letter-spacing: 0.1em; margin: 0 0 50px; } @media screen and (min-width: 768px) { .news-list__post-title h3 { margin: 0 0 20px; } } /* Blog sidebar ************************************************************/ .widget_categories h3.widget-title { margin: 0 0 30px; font-family: Arial; font-size: 18px; font-weight: bold; letter-spacing: 0.1em; color: #00324e; text-transform: uppercase; text-align: center; } .widget_categories .nav > li > a { margin-bottom: 30px; text-align: center; color: #00324e; border: 1px solid #65c6e5; } .widget_categories .nav > li > a:focus { background-color: #65c6e5; color: white; } .widget_categories .nav > li.current-cat > a { background-color: #65c6e5; color: white; } /***** Single post ********/ .content-post-single-news { margin-top: 50px; margin-bottom: 50px; } .news-image { width: 100%; } .news-title { font-family: Arial; font-size: 18px; font-weight: 600; color: #00324e; letter-spacing: 1.58px; line-height: 32px; text-transform: uppercase; margin: 70px 0; } .news-post-intro { letter-spacing: 0.5px; line-height: 20px; font-size: 14px; font-family: Arial; color: #282828; } .news-content { padding-top: 30px; padding-bottom: 30px; letter-spacing: 0.5px; line-height: 20px; font-size: 14px; font-family: Arial; color: #282828; } .sidebar-news { margin-top: 70px; } @media screen and (max-width: 734px) { .news-title { margin: 20px 0; } .news-content { margin-top: 30px; } } .situations { text-align: center; } .situations-all { width: 100%; margin-top: 70px; text-align: center; } .titre-situation { color: #00324e; padding-left: 2%; padding-right: 2%; font-size: 18px; font-weight: bold; letter-spacing: 2px; } /* Contact form 7 */ .contact-form-argos { margin-bottom: 2%; } input, textarea, label { font-size: 14px; font-style: italic; font-weight: normal; letter-spacing: 1.6px; color: #777777; width: 100%; padding: 20px !important; } .bloc-citation { background-color: #ffffff; } .bloc-citation .image-citation { padding: 2%; text-align: center; width: 35%; min-height: 200px; padding-top: 5%; padding-right: 10%; float: center; } .bloc-citation .bloc-text-citation { padding: 5%; } .bloc-citation .bloc-text-citation .author-citation { text-align: left; font-size: 14px; letter-spacing: 0.5px; color: #282828; margin-bottom: 5%; } .bloc-citation .bloc-text-citation .text-citation { text-align: center; font-size: 14px; color: #65c6e5; line-height: 20px; letter-spacing: 0.9px; font-style: italic; } .bloc-specialites { margin-top: 5%; margin-bottom: 2%; background-color: #ffffff; } .bloc-specialites .image-specialites { width: 50%; min-height: 200px; padding-top: 5%; padding-right: 10%; float: center; } @media screen and (max-width: 600px) { .bloc-specialites .image-specialites { display: none; } } @media screen and (min-width: 601px) { .bloc-specialites .bloc-text-specialites { padding: 5%; } } .bloc-specialites .bloc-text-specialites .titre-specialites { /*text-align: center;*/ } .bloc-specialites .bloc-specialites__container { position: relative; } .bloc-specialites .bloc-specialites__container:after { position: absolute; content: ""; top: 315px; right: 95%; height: 0; border-left: 2px solid #65c6e5; } @media screen and (min-width: 992px) { .bloc-specialites .bloc-specialites__container:after { height: 250px; } } .bloc-qualites { margin-bottom: 5%; background-color: #ffffff; margin-top: 5%; } .bloc-qualites .bloc-text-qualites { /*padding: 5%;*/ } @media screen and (min-width: 601px) { .bloc-qualites .bloc-text-qualites { margin-left: 50px; } } .bloc-qualites .button-qualites { margin-top: 6%; } .page-id-65 .section-page .col-md-offset-1 { margin-left: 5%; } /* ════════════════════════════════════════════════════════════════════════════════════ * HABEFAST CHILD THEME > INCUDES > SCSS > LAYOUT > PAGE ÉQUIPE REFONTE * ════════════════════════════════════════════════════════════════════════════════════ */ .page-template-page-equipe-refonte { /* ════════════════════════════════════════════════════════════════════════════════════ * CONTAINER OF SECTIONS * ════════════════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════════════ *
* ════════════════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════════════ * SECTION #INTRODUCTION * ════════════════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════════════ * SECTION #TEAM * ════════════════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════════════ *