/*=======================================================================================================*/ /*============================================= HEADER ================================================*/ :root { --header_h: 20vh; --header_min_h: 80px; --header_max_h: 100px; } #nav {position:absolute; top:0; left:0; width:100%; height:var(--header_h); min-height:var(--header_min_h); max-height:var(--header_max_h); z-index:100; padding-top:20px;} #nav .bkg {background:transparent;} body.creations_detail #nav .bkg, body.mediations_detail #nav .bkg, body.company_team #nav .bkg {background:#000;} #nav .gouttiere {height:100%;} #nav .gouttiere_center {height:100%; display:flex; align-items:center; justify-content:space-between;} /* logo */ #logo_container{position:relative; top:0px; height:100%; width:300px; display:flex; align-items:center; justify-content:center; z-index:101;} body.home_index #logo_container{align-items:start;} #logo_container .logo_negatif{height:80%; width:100%; background-image:url("../svg/logo_negatif.svg"); background-position:left center; background-repeat:no-repeat; background-size:contain; text-indent:-9999px; overflow:hidden;} /* menu */ #menu{position:relative; height:100%; list-style-type:none; display:flex; align-items:center; justify-content:center; flex-direction: row; margin: 0;padding: 0;} #menu a{font-size:.85em; display:block; position:relative; height:100%; margin:0 1px; text-align:center; cursor:pointer; text-decoration:none;} #menu a.active{cursor:default;} #menu a:not(.active):hover li{color:var(--main_color);} #menu a.active li{color:#fff;} #menu a li{padding:5px; display:block; color:rgba(255,255,255,.35); background-color:transparent; transition:all .4s; box-sizing:border-box; position:relative; display:flex; height:100%; flex-direction:column; justify-content:center; align-items:flex-end;} #menu a li span{display:block; width:100%; position:relative;} #menu a.active li span:after{position:absolute; content:''; bottom:0; height:1px; background: var(--main_color); animation-name: anim_width; animation-duration: 1s; transition-timing-function: ease-in; animation-fill-mode: both;} @keyframes anim_width { 0% {width:0%; left:50%;} 100% {width:100%; left:0;}} @media screen and (max-width: 767px) { #nav .gouttiere_center {margin: 0 auto;} #logo_container .logo_negatif{background-position:left center;} #menu{display:none;} } @media screen and (max-device-width: 767px) and (orientation: portrait) { } @media screen and (max-device-width: 767px) and (orientation: landscape) { #logo_container .logo_negatif{position:relative; height:60%; top:15%;} } @media screen and (max-width: 1000px) { /* #menu a.home {display:none;} */ } /*=======================================================================================================*/ /*========================================== HAMBURGER ================================================*/ /* ico hamburger */ .menu-button-container { display: none; height:56px; width: 30px; cursor: pointer; flex-direction: column; justify-content: center; align-items: center; z-index:101; padding:0 15px; position:relative; left:15px; } @media screen and (max-device-width: 767px) { .menu-button-container { background:#000; border:1px solid rgba(255,255,255,.2); border-radius:10px; left:0px; } } .menu-button, .menu-button::before, .menu-button::after { display: block; background-color: #fff; position: absolute; height: 2px; width: 30px; transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1); border-radius: 2px;} .menu-button::before { content: ''; margin-top: -8px;} .menu-button::after { content: ''; margin-top: 8px;} /* input -> réaction icone */ #menu-toggle { display: none; } #menu-toggle:checked + .menu-button-container .menu-button::before { margin-top: 0px; transform: rotate(45deg); } #menu-toggle:checked + .menu-button-container .menu-button { background: rgba(255, 255, 255, 0);} #menu-toggle:checked + .menu-button-container .menu-button::after {margin-top: 0px; transform: rotate(-45deg); } @media (max-width: 767px) { /* ico hamburger visible */ .menu-button-container { display:flex; } #menu {opacity:0; top:-100vh; background-image: url("../img/home/home_1920x1080.jpg"); background-position:center; background-repeat:no-repeat; background-size:cover; display:flex; bottom:0; transition: opacity .1s cubic-bezier(0.23, 1, 0.32, 1); height:100vh; position:absolute; right:calc(-1 * var(--gouttiere_sm)); left:calc(-1 * var(--gouttiere_sm)); flex-direction:column; justify-content:flex-start; align-items:center;} #menu .push {height:var(--header_h)} #menu-toggle ~ #menu a {transition: all .4s; width:100%; height:0; margin:0; padding:0; border:0; opacity:0; font-size:clamp(13px, 2.5vh, 20px);} #menu-toggle ~ #menu a .bkg {top:0; bottom:0; background:rgba(0,0,0,0.2); transition: all .4s;} #menu-toggle ~ #menu a:hover .bkg {background:rgba(255,255,255,0.05);} #menu-toggle ~ #menu a.active .bkg {background:rgba(255,255,255,0.08);} #menu-toggle ~ #menu a.active li span:after {display:none;} /* menu plein écran */ #menu-toggle:checked ~ #menu {top:0px; opacity:1; position:fixed; } #menu-toggle:checked ~ #menu a {border-top: 1px solid rgba(255,255,255,.1); opacity:1; padding:clamp(2em, 4.5vh, 7em) 0 clamp(2em, 4.5vh, 7em) 0; } #menu-toggle:checked ~ #menu a.home {display:block;} #menu-toggle:checked ~ #menu a li{padding:0;} #menu-toggle:checked ~ #menu a:hover li{color:var(--main_color);} } /*=======================================================================================================*/ /*========================================== HEADER PUSH ================================================*/ .header_push{position:relative; width:100%; height:var(--header_h); min-height:var(--header_min_h); max-height:var(--header_max_h); display:flex; align-items:center; justify-content:center;} .header_push span{display:inline-block;font-size:2.2em; color:#111;} /*=======================================================================================================*/ /*========================================== FOOTER PUSH ================================================*/ #page_container {flex: 1 0 auto; position:relative; width:100%;} /*=======================================================================================================*/ /*============================================= FOOTER ================================================*/ /* FOOTER -------------------------- */ #footer {position:relative; flex-shrink:0; width:100%; background: #000;} #footer .bkg {background:rgba(0,0,0,.3); border-top:1px solid rgba(255,255,255,.25);} #footer .part{padding:10px 0px 30px 0px;} #footer .hyphen{display:inline-block; margin:0; color:#fff; opacity:.5;} #footer .color1{color:rgba(255,255,255,0.5); transition: all 0.3s;} #footer a.color1:hover{color:var(--main_color); background:rgba(255,255,255,0.07);} #footer .txt, #footer a{display:inline-block; padding:20px 10px 20px 10px; line-height:1; border-radius:3px;} #footer .social_wrap a{ margin:0; padding:20px 17px 20px 17px; transition:all 0.3s;} #footer .social_wrap a i{font-size:25px; position:relative; top:-2px; transition:all 0.3s;} @media screen and (max-width: 640px) { #footer .gouttiere_center {flex-direction:column; padding: 30px 0;} #footer .part{ padding:0;} #footer .part:first-child {order:2;} #footer .part:last-child .color1{color:#fff;} }