/* Theme Name: Facyle - TwentyTwenty-One Child Description: Twenty Kwenty One Child Theme Author: Yvan Roumilhac Template: twentytwentyone Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready Text Domain: twentytwentyonevhild */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body{ --heading--font-weight-strong : 700; /*-------------------------------- COLORS */ --color--black : #000000; --color--dark-gray : #28303D; --color--gray : #D8D8D8; --color--facyle : #e07e17; --color--oxford : #132a3e; --color--oxford_lighter : #18344D; --color--ocean : #2e7798; --color--amande : #82b091; --color--champagne : #f5f2eb; --color--true_white : #ffffff; /*---------------------------------- FONT */ --global--font-size-base: 1.15rem; --global--font-size-xs: 0.8rem; --global--font-size-sm: 1.125rem; --global--font-size-md: 1.25rem; --global--font-size-lg: 1.5rem; --global--font-size-xl: 2rem; --global--font-size-xxl: 4rem; --global--font-size-xxxl: 5rem; } p, h1, h2, h3, h4, h5, h6 { margin-top: var(--global--spacing-vertical) !important; margin-bottom: var(--global--spacing-vertical) !important; } strong{font-weight:var(--primary-nav--font-weight-button);} .line-it{padding-left:5rem!important;} .line-it:before{ content: ""; display: block; border-top: dotted 0.4rem var(--color--facyle); width: 5rem; position: static; margin-top: 0.65em; margin-right: 0.25em; margin-left: -5.25rem; float: left; } .alignfull .kt-row-column-wrap{max-width: var(--responsive--aligndefault-width)!important; padding-left:0!important; padding-right:0!important;} .aside_footer .kt-row-column-wrap{max-width: var(--responsive--alignwide-width)!important;} .page .widget-area{display:none;} body:not(.home) #content{padding-top:0;} body:not(.home) #main{margin-top:0; padding-top:0;} #main{margin-bottom:0; padding-bottom:0; } a:focus{background:none!important; color:inherit!important;} .icon_title{display:flex;} .icon_title:before{content: ""; display: block; width: 12%; background: url("assets/images/icon_arrow_h2.svg") no-repeat center/contain; margin-right: .7em; margin-top: 0.2em; } .inset_border{display:flex; justify-content:center; align-items:center; padding-right:10%; padding-left:10%; } .inset_border:before, .inset_border:after{content:""; display:block; height:1px; background:grey; flex-grow:2; position:static!important;} .inset_border:before{margin-right:1em;} .inset_border:after{margin-left:1em;} .wp-block-spacer.dotted_bg {background:url("assets/images/dotted_way_1.svg") no-repeat center/contain;} .wp-block-spacer.dotted_bg.from_right {transform:scaleX(-1);} .page.page-id-47 .site-main > .hentry > .entry-content{margin-bottom:var(--global--spacing-vertical)!important;} .grecaptcha-badge { visibility: hidden; } /*————————————————————————————————————————————————————————————————————*/ /*———————————————————————————————————————————————————–––– SITE HEADER */ /*————————————————————————————————————————————————————————————————————*/ #masthead {padding-right:0; padding-left:0;} #masthead > div{display:flex; justify-content:space-between; width:100%; align-items: center;} #masthead > div > *{margin:inherit 0; width:auto; } #masthead .site-branding{display:none;} #masthead .site-logo{border-bottom:none; padding-bottom:0;} /*————————————————————————————————————————————————————————————————————*/ /*———————————————————————————————————————————————————––––––––––– MENU */ /*————————————————————————————————————————————————————————————————————*/ @keyframes rotate_icon{from{transform:rotate(0deg);} to{transform:rotate(180deg);}} #masthead .primary-navigation > div > .menu-wrapper .sub-menu-toggle{width:auto!important; padding-right: var(--primary-nav--padding);} #site-navigation{display:flex; align-items:center;} /*BT-SUB MENU*/ .sub-menu-toggle svg{display:none;} .sub-menu-toggle .icon-plus, .sub-menu-toggle .icon-minus{display:block; width:1.3em; } .sub-menu-toggle .icon-plus{background:url("assets/images/icon_down.svg") no-repeat center/contain; transform:rotate(0deg); animation: rotate_icon .2s reverse;} .sub-menu-toggle .icon-minus{background:url("assets/images/icon_down.svg") no-repeat center/contain; transform:rotate(180deg); animation: rotate_icon .2s;} /* SUB-MENU */ .primary-navigation > div > .menu-wrapper > li > .sub-menu{background:transparent!important; border:none; /*padding-top:calc((var(--global--spacing-vertical) / 3) + var(--header--padding))!important;*/width:20rem; padding-bottom:0!important; } .primary-navigation > div > .menu-wrapper > li > .sub-menu:before{display:none !important;} .primary-navigation > div > .menu-wrapper > li > .sub-menu li, .primary-navigation > div > .menu-wrapper > li > .sub-menu li{background:transparent !important;} .primary-navigation > div > .menu-wrapper > li > .sub-menu li a{color:black; background:#fbfbfb; font-weight:normal; font-size:var(--global--font-size-xs); } .primary-navigation > div > .menu-wrapper > li > .sub-menu li:last-child a{border-radius: 0 0 var(--button--border-radius) var(--button--border-radius);} .primary-navigation > div > .menu-wrapper > li > .sub-menu li a:focus{background:var(--color--facyle) !important; color:white !important; text-decoration:none!important;} .primary-navigation > div > .menu-wrapper > li > .sub-menu li a:hover{background:var(--color--facyle) !important;color:white !important;text-decoration:none!important;} /* BOUTONS CONTACT MENUS */ #menu-item-934, #menu-item-1047{margin-left: var(--primary-nav--padding); } #menu-item-934 a, #menu-item-1047 a{display:block; padding-left: var(--primary-nav--padding);padding-right: var(--primary-nav--padding); text-decoration: none !important; font-weight: var(--button--font-weight); font-family: var(--button--font-family); border-radius: var(--button--border-radius); text-transform: none; letter-spacing: normal; font-size: var(--primary-nav--font-size); background-color:var(--color--facyle); color: #ffffff; border: var(--button--border-width) solid var(--color--facyle);} #menu-item-934 a:hover, #menu-item-1047 a:hover{opacity: 0.9; outline-offset: 4px !important;} #menu-item-1047 a{ border: var(--button--border-width) solid var(--color--facyle); border-radius: var(--button--border-radius); cursor: pointer; text-decoration: none; background:transparent; color:var(--color--facyle); text-align:center; } /*————————————————————————————————————————————————————————————————————*/ /*———————————————————————————————————————————————————––––––––––– HOME */ /*————————————————————————————————————————————————————————————————————*/ /*#img_poster{transform: scale(1.3) translateY(-2em); transform-origin: left top;}*/ #img_poster img{width: auto; height: 80vh; position: absolute; top: 50%; transform: translateY(-45%);} #main{margin-bottom:0; padding-bottom:0;} #header_page{position:relative; margin-bottom:calc(var(--global--spacing-vertical) * 2)!important;} #header_page:after{content: ""; display: block; border-top: dotted 1vh var(--color--true_white); position: absolute; bottom: 8vh; z-index: 20;} .home #header_page:after{ width: 35vw; right: 0; } body:not(.home) #header_page:after{ width: 35vw; left: 0; } #header_page h2{font-size:var(--global--font-size-xl);} /**/ .with_shape .kt-inside-inner-col{position:relative; transform:scale(1.4) translate(5%, 0%); transform-origin: left center; width: calc(100% / 1.4);} .with_shape .kt-inside-inner-col:before{content:""; display:block; width:28vh; height:calc(28vh * 1.68); background:url("assets/images/shape_mask_reverse.svg")no-repeat center; position:absolute; left:-5%; top:50%; transform:translateY(-35%);} .mask_me{width:28vh; height:calc(28vh * 1.68); display:block; mask-image: url("assets/images/shape_mask.svg"); -webkit-mask-image: url("assets/images/shape_mask.svg"); mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;} .mask_me img{ width:100%!important; height:100%!important; object-fit: cover; } /**/ #edito {min-height:auto!important; background:transparent!important;} #edito img{height:auto!important;} #edito .block_it{width:70%; margin:0!important;} #edito .block_it h2{margin-top:0!important; margin-bottom:1rem!important; position:relative;} #edito .block_it h2:after{content: ""; display: block; height: 5rem; width: 5rem; background: url("assets/images/icon_arc.svg") no-repeat center/contain; position: absolute; left: 12ch; top: -2rem;} #edito .block_it p{border-radius:.5rem!important; position:relative; margin-top: 1rem !important;} #edito .block_it p:after{content: ""; display: block; height: 5rem; width: 5rem; background: url("assets/images/icon_arc.svg") no-repeat center/contain; position: absolute; transform:rotate(180deg); left: -1rem; bottom: -1rem;} /*————————————————————————————————————————————————————————————————————*/ /*———————————————————————————————————————————————————––– FOOTER ASIDE */ /*————————————————————————————————————————————————————————————————————*/ .aside_footer{margin-top:0!important;} .aside_footer .wp-block-social-links{font-size:2.5rem !important;} /*————————————————————————————————————————————————————————————————————*/ /*———————————————————————————————————————————————————––––––––– FOOTER */ /*————————————————————————————————————————————————————————————————————*/ .site-footer{padding-bottom:0!important;} .site-footer > .site-info{padding-top:0!important;} .site-footer > .site-info .powered-by{margin-left:0!important;} .footer-navigation{margin:0!important;} #kt-layout-id_ab46c5-29 > .kt-row-column-wrap{max-width: var(--responsive--alignwide-width)!important;} #kt-layout-id_ab46c5-29 > .kt-row-column-wrap .kt-inside-inner-col{display:flex; align-items:center; justify-content:flex-start; flex-wrap:wrap;} /*————————————————————————————————————————————————————————————————————*/ /*———————————————————————————————————————————————————–––––––––––– CTA */ /*————————————————————————————————————————————————————————————————————*/ [class*="ef8f21-e8"] .kt-row-layout-overlay { clip-path: polygon(13% 0, 100% 0, 100% 100%, 0 100%); width: 45%; right: 0; left: auto;} #cta_contact .kt-row-layout-inner{background-image: url("assets/images/icon_arrow_bg_white.svg"); background-repeat:no-repeat; background-position: -2% -40%; background-size: 14vw;} #cta_recrutement .kt-row-column-wrap, #cta_contact .kt-row-column-wrap { max-width: var(--responsive--alignwide-width) !important; } #cta_recrutement .kt-row-layout-overlay{ clip-path: polygon(13% 0, 100% 0, 100% 100%, 0 100%); width: 45%; right: 0; left: auto;} /*————————————————————————————————————————————————————————————————————*/ /*———————————————————————————————————————————————————––––––––––– FORM */ /*————————————————————————————————————————————————————————————————————*/ form.wpcf7-form label{display:none;} form.wpcf7-form *{list-style-type:none; padding:0; margin:0} form.wpcf7-form .col_it{display:flex; flex-wrap:wrap; justify-content: space-between;} form.wpcf7-form .col_it li{width:48%;} form.wpcf7-form p{margin-top:0 !important;} form.wpcf7-form input, form.wpcf7-form textarea{background:rgba(255,255,255,0.50); border:solid 2px white; border-radius:var(--button--border-radius); max-height:10em;} .bt_submit{display:flex; flex-direction: row-reverse; align-items:center;} form.wpcf7-form .wpcf7-file{width:100%; padding: .5em;} form.wpcf7-form .has-separator{padding-top:1em!important; margin-top:1em!important; border-top:solid 1px grey;} form.wpcf7-form .acceptance label{display:flex;} form.wpcf7-form .acceptance input{border-color:var(--color--facyle);} /*————————————————————————————————————————————————————————————————————*/ /*———————————————————————————————————————————————————––––––––– BLOCKS */ /*————————————————————————————————————————————————————————————————————*/ .wp-block-media-text.is-style-tw-overlap .wp-block-media-text__content{border-radius:var(--button--border-radius); position:relative; padding:calc(var(--global--spacing-vertical) * 2);} .wp-block-media-text.is-style-tw-overlap .wp-block-media-text__content:before, .wp-block-media-text.is-style-tw-overlap .wp-block-media-text__content:after{ content:""; display:block; background:red; height:5rem; width:5rem; background:url("assets/images/icon_arc.svg") no-repeat center/contain; position:absolute;} .wp-block-media-text.is-style-tw-overlap .wp-block-media-text__content:before{top:0; right:0; transform: rotate(0) translateY(-25%);} .wp-block-media-text.is-style-tw-overlap .wp-block-media-text__content:after{bottom:0; left:0; transform: rotate(180deg) translateY(-25%);} .wp-block-media-text.is-style-tw-overlap .wp-block-media-text__media{box-shadow: 0 0 2rem rgba(0, 0, 0, .1); border-radius:var(--button--border-radius); overflow:hidden;} /*-------*/ #chiffres_cles{max-width: calc(var(--responsive--aligndefault-width) * .8);} #chiffres_cles .kb-count-up-title{margin:0 !important;} #chiffres_cles .kb-count-up-process{position:relative;} #chiffres_cles .kb-count-up-process:after{content: ""; display: block; height: 5.2rem; border-radius: 0 0 0 1rem; width: 1.4rem; border-left: dotted var(--color--facyle) 5px; border-bottom: dotted var(--color--facyle) 5px; position: absolute; left: -1.5rem; top: 1.2rem;} #chiffres_cles .wp-block-kadence-countup{padding-left:1.5rem;} /*-------*/ div[id^="childPage-block"] a{ position:relative; padding-right: 12%;} div[id^="childPage-block"] a:after {content:""; width:8%; height:100%; position:absolute; right:0; top:0; background:url("assets/images/icon_arrow_h2_facyle.svg") no-repeat center/contain; transition:all 0.4s;} div[id^="childPage-block"] a:hover:after{right:2%; transition:all 0.4s;} #solutions div[id^="childPage-block"]{display:flex; flex-wrap:wrap; justify-content: center;} #solutions div[id^="childPage-block"] > *{width:calc((100% / 3) - 4%); text-align:center; margin:0 2%; border:none; padding-top:0;} #solutions div[id^="childPage-block"] header{flex-direction:column; align-items: center; } #solutions div[id^="childPage-block"] a{padding:1rem;} #solutions div[id^="childPage-block"] a:after{display:none;} #solutions div[id^="childPage-block"] .thumb_img {width:20%; margin-right:0; margin-bottom:1rem;} /* HEADER PAGE */ [class*="fcde43-8a"] .kt-row-layout-overlay, .with_polygone .kt-row-layout-overlay{ clip-path: polygon(13% 0, 100% 0, 100% 100%, 0 100%); width: 40%; height:100%; right: 0; left: auto;} /*————————————————————————————————————————————————————————————————————*/ /*———————————————————————————————————————————————————––––––––– BLOCKS */ /*————————————————————————————————————————————————————————————————————*/ .tw-hero-cover .entry-header::before { background-color: #132a3e!important; mix-blend-mode: multiply!important;} .single .entry-content > :not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce), .single .tw-title-text-width .intro-text, #sponso{ max-width: calc(var(--responsive--aligndefault-width) * .75);} #sponso{ max-width: calc(var(--responsive--aligndefault-width) * .4);} /*————————————————————————————————————————————————————————————————————*/ /*———————————————————————————————————————————————————––––– RESPONSIVE */ /*————————————————————————————————————————————————————————————————————*/ @media only screen and (max-width:1023px){ #site-navigation{display:block;} body:not(.primary-navigation-open) #masthead.has-logo.has-title-and-tagline .menu-button-container{top:.3rem; padding-bottom:0;} #masthead.has-title-and-tagline .primary-menu-container{padding-top:6rem !important;} #masthead.has-title-and-tagline .primary-menu-container:before, #menu-item-934:before{content:""; display:block; height:1px; background:var(--color--gray); margin-bottom:1rem;} #menu-item-934:before{margin-bottom:2rem; margin-top:1.5rem;} .site-logo{z-index:200;} #site-navigation .sub-menu{padding:0 !important; } .primary-navigation > div > .menu-wrapper > li > .sub-menu li a{background:transparent; color:var(--color--oxford); display:flex; } .primary-navigation > div > .menu-wrapper > li > .sub-menu li a:before{content:""; display:block; height:1rem; width:1rem; background:url("assets/images/icon_down.svg") no-repeat center/contain; transform:rotate(-90deg); margin-right:.25rem;} .primary-navigation > div > .menu-wrapper{padding-bottom:0 !important; } #menu-item-934:before{} #menu-item-934, #menu-item-933{margin-bottom:1rem; text-align:center;} .primary-navigation-open .menu-button-container #primary-mobile-menu { position: absolute; right: 0; top: 1em;} .kt-row-layout-overlay{opacity:.1!important; width: 100%!important; clip-path: polygon(0% 0, 100% 0, 100% 100%, 0 100%)!important;} .kt-row-layout-inner > .kt-row-column-wrap > .kadence-column_d6a550-bf > .kt-inside-inner-col{padding-right:0 !important;} .line-it::before{margin-left:0; float:none; margin-bottom:0.65em} .line-it{padding-left:0!important;} } @media only screen and (max-width:651px){ #masthead.has-logo .menu-button-container{position: absolute; right: 0; top: 0; width: auto; left: auto;} form.wpcf7-form .col_it li{width:100%;} #solutions div[id^="childPage-block"] > *{width:100%;} .icon_title { display: flex; align-items: flex-start; } .icon_title::before { background: url("assets/images/icon_arrow_h2.svg") no-repeat center top/contain; margin-right: .25em; margin-top: 0.4em; height: 3em;} #header_page .kt-row-layout-inner{padding-bottom:3rem;} .page-child header .wp-block-image img{height: 4rem; width: auto;} .with_shape {display:none!important;} #cta_recrutement .kt-inside-inner-col{padding-right: 0%;} aside .wp-block-image:not(.is-style-rounded) img{width:60%; display:block; margin:auto;} #kt-layout-id_715506-28{ background-size:50% !important;} #kt-layout-id_715506-28 > .kt-row-layout-overlay { opacity: 0.83; background-color: #132a3e; opacity: 0.83 !important;} } .blog #primary {padding-top: var(--global--spacing-vertical); padding-bottom: var(--global--spacing-vertical);}