/* Cascading Bullshit by Manu Lechat www.e-lechat.com */ /* /^^ /^^ /^ /^^ /^/^ /^ /^^ /^^ /^^ /^/^ /^ /^^^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^^ /^^ /^^ /^^ /^^ */ @font-face { font-family: "Montserrat-Bold"; src: url("../fonts/Montserrat/Montserrat-Bold.ttf") format('truetype') } @font-face { font-family: "Montserrat-Regular"; src: url("../fonts/Montserrat/Montserrat-Regular.ttf") format('truetype') } @font-face { font-family: "Montserrat-SemiBold"; src: url("../fonts/Montserrat/Montserrat-SemiBold.ttf") format('truetype') } /* /^^ /^^ /^ /^^ /^^ /^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^ /^^ /^^ /^^ /^^ /^^ /^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^ /^^ /^^^^^ /^^ /^^ /^^ /^^ /^^ /^^^^^ /^^ /^^^ /^^ /^^ /^^ /^^ /^^ /^ /^^ /^ /^^ /^^ /^^ /^^ /^ /^^ /^^ /^^/^^ /^^ /^^ /^^ /^^^^ /^^^ /^^ /^^^ /^^ /^^^^ /^^ /^^ /^^ */ /*basics */ html{ height: 100vh; width:100%; margin: 0; overflow-x: hidden; overflow-y: auto; } body { width: 100%; padding: 0; margin: 0; background: #000; font-family: "Montserrat-Regular"; font-size: 1vw; letter-spacing: .03em; color:#000; } div, section{ box-sizing: border-box; } img{ max-width: 100%; width: 100% } a{ text-decoration: none; position: relative; } p{ color: #09152d; padding: 0; margin:0; font-size: 15px; text-align: left; } ::selection { background:rgba(0,0,0,0) } canvas { width: 100%; height: 100%; z-index: -1; position: absolute; } body.smoothScroll{ scroll-behavior: smooth; } body.modalOpen { overflow: hidden; height: 99vh; } body.no_scroll { overflow: hidden; } * { box-sizing: border-box; position: relative; } img{ max-width: 100%; height: auto; display:block; } ul{ margin: 0; display: block; text-align: left; padding: 0; } li{ margin: 0.2em 0; list-style: none; min-height:1.6em; padding-left: 24px; background-repeat: no-repeat; background-size: 16px; background-position: 0 3px; padding-bottom: 10px; } ul.small_list{margin:0 0 15px} ul.small_list li{background: none;list-style: disc;padding: 0px;margin:0;margin-left: 15px;} ::selection { background:rgba(255,255,255,1); color: #000} /* grid */ header, footer, main{ width: 100%; display: block; position: relative;} section{ width: 100%; display: block; position: relative; overflow-x: hidden; z-index: 2} .display_size{width: 100vw; height: 100vh} /* utils */ .center{ text-align: center;} body.modalOpen { overflow: hidden; height: 100vh; } body.menuOpen { overflow: hidden; height: 100vh; } body.show_about_screen { overflow: hidden; height: 100vh; } body.boby_no_scroll { overflow: hidden; height: 100vh; } /* font-style */ h1, h2, h3{ font-family: "Montserrat-SemiBold"; width: auto; clear: both; display: block ; margin: 0 0 1em 0; line-height: 1.15em; font-weight: normal; } h4, h5{ font-family: "Montserrat-Regular"; margin:0; position: relative; font-size: 13px; color: #000; line-height: 1.5em; font-weight: normal; } p{ font-family: "Montserrat-Regular"; text-align: left; margin:0; position: relative; font-size: 13px; color: #000; line-height: 1.85em; } a{ color: #fff; transition:all .3s; text-decoration: none; } a.black{ color: #000; } a.black:hover{ color: #666; } a:hover{ color: #ccc; } .bold{ font-family: "Montserrat-Bold"; } p strong{ font-family: "Montserrat-SemiBold"; font-weight: normal;} .biggos{ font-size: 100px; line-height: 1.15em; } .small{ font-size: 20px; font-weight: 500; } .viewport_container{ width: 100vw; max-width: 100%; height: 100vh; max-height: 100%; top: 0; left: 0; } .three_container{ z-index: 0; position: fixed; } /* /^^^^ /^^^ /^ /^^^ /^^ /^^ /^^ /^^ /^^^^ /^^ /^^ /^^ /^ /^^ /^ /^^ /^^ /^^ /^^ /^^^ /^^ /^^ /^^^^^ /^^ /^^^^^ /^^ /^^ /^^ /^^^ /^^ /^^ /^^ /^ /^ /^^ /^^ /^^ /^^ /^^ /^^^ /^^^ /^^^^ /^^^^ /^^^ /^^ /^^ /^^ */ .contact_bt{ letter-spacing: 0.5em; z-index: 111; color: white; mix-blend-mode: difference; font-size: 12px; text-align: left; display: inline;text-transform: uppercase;position: fixed; right: -10px; top: 50%; transform: translateY(-50%) translateX(100%) rotate(90deg);; } .hidden_content{ display: none } .screen_loader{ z-index: 1111; position: absolute; width: 100vw; height: 100vh; background: white; animation: anim_screen_loader 3s cubic-bezier(.17,.67,.14,1.02) 5s 1 normal forwards; } .loader{ z-index: 1112; position: fixed; top: 50vh; left:50vw; width: 40px; height: 40px; font-size: 100px; font-family: "Montserrat-Bold"; opacity: 0; animation: anim_loader 4s cubic-bezier(.17,.67,.14,1.02) 1s 1 normal forwards; } /* logo */ .manu_lechat{ position: fixed; mix-blend-mode: difference; color: white; font-family: "Montserrat-SemiBold"; left: 60px; top: 60px; font-size: 20px; z-index: 111} /* homepage */ .homepage{ width: 100vw; height: 100vh; display: block; background: black; } .homepage .biggos{ z-index: 111; color: white; position: absolute; top: 50%; left:50%; transform: translate3d(-50%, -50%,0);} .homepage .small{ z-index: 1; } .encart_titre { width: 100vw; padding: 240px 0; background: black } .encart_titre .biggos{ color: white; position: absolute; top: 50%; left:50%; transform: translate3d(-50%, -50%,0);} /* presentation */ .presentation{ font-size: 15px;  width: 100vw; padding: 80px; display: block; background: white; } .presentation p{ font-size: 15px!important} .presentation .accroche{ font-family: "Montserrat-Bold"; text-align: center; margin-bottom:120px ; } .presentation .accroche .small{ margin: 2em 0 1em 0; display: block;} .row{ display: table; position: relative; width: 90%; max-width: 700px; margin: 100px auto; } .presentation a{ color: black} /* footer_merci */ .footer_merci { bottom: 0; padding: 100px 0; background: white; width: 100%; display: block; } .footer_merci a{ color: #000 } /* refs */ .realisations { background: #141517; z-index: 2 } .realisations .active .appear_line span::before{ background: #141517; } .realisations .item_container{ display: block;; margin: 0; padding: 100px 250px; width: 100vw; } .realisations .item_container:nth-child(odd) { background: #101012; } .realisations .item_container:nth-child(odd) .active .appear_line span::before{ background: #101012; } .realisations .item_container .ref_screen { display: table; max-width: 980px; width: 100%; margin: 0 auto; border: 32px solid #000; background: #1d2431; display: block; border-radius: 6px; display: block; box-shadow: 0px 30px 40px -20px #000; } .ref_txt{ display: table; max-width: 980px; width: 100%; padding: 0 40px; margin: 100px auto 0 auto; } .ref_txt .subtitle{ display: block; color: #fff; font-size: 20px; } .ref_txt .title{ margin-bottom: 60px; display: block; color: #fff; font-size: 20px; } .ref_txt p{ transition: all .3s .8s ease-out; color: #fff; opacity: 0.4; font-size: 13px; margin-top: 1em; display: inline-block;   } .ref_txt h4{ transition: all .3s .8s ease-out; color: #fff; opacity: 0.4; font-size: 13px; margin-top: 1em; display: inline-block;   } .ref_txt .description{ display: table; width: 48%; float: left; } .ref_txt .annee{ text-align: right; position: absolute; right:40px; top: 100px;;} .ref_txt .num{ text-align: right; position: absolute; right:40px; top: 10px; } .ref_txt .url{padding: 3px 0px; font-size: 8px; text-transform:uppercase; text-align: right; position: absolute; right:40px; bottom: 10px; color: #fff} .ref_txt .url:hover{ padding: 3px 8px; background: white; color: black; } .ref_txt.active h4{ opacity: 0.4!important; } /* video */ .realisations .video_container{ opacity: 0; transition: all .3s .3s ease-out; z-index: 11; width: 100%; height: 100%; background: black; position: absolute; height: 100%; display: block;} .realisations .video_container video{ position: absolute; width: 100% } .realisations .video_container.active{ opacity: 1; transition: all .3s .3s ease-out; } .realisations .video_container .loader{ display: none;animation: anim_loader_video 3s ease-in 1s 1 normal forwards; opacity: 1; z-index: 111; background: white; bottom: 0; height: 5px; position: absolute; } .realisations .video_container.loading .loader{ display: block; } /* diaporama img */ .realisations .item_container .ref_screen img{ position: absolute; width: 100%; top: 0; left: 0; display: block; } .realisations .item_container .ref_screen img{ opacity: 0 } .realisations .item_container .ref_screen .img_1 { z-index: 1; display: block; position: relative; opacity: 1 } .realisations .item_container .ref_screen .img_2 { z-index: 2; animation: fadeInDiaporama 12s ease-in 2s infinite normal forwards; } .realisations .item_container .ref_screen .img_3 { z-index: 3; animation: fadeInDiaporama 12s ease-in 4s infinite normal forwards; } .realisations .item_container .ref_screen .img_4 { z-index: 4; animation: fadeInDiaporama 12s ease-in 6s infinite normal forwards; } .realisations .item_container .ref_screen .img_5 { z-index: 5; animation: fadeInDiaporama 12s ease-in 8s infinite normal forwards; } .realisations .item_container .ref_screen .img_6 { z-index: 6; animation: fadeInDiaporama 12s ease-in 10s infinite normal forwards; } .realisations .item_container .ref_screen .mask{ z-index: 111; height: 180%; opacity: 0.8; transition: all 1s ease-out; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: black; display: block;} .realisations .item_container .ref_screen.active .mask{ opacity: 0; } /* title styles */ .active .appear_line span{ position: relative; overflow: hidden; display: inline-block; } .appear_line span::before{ content: ''; position: absolute; top: 0; right: 0; width: 100%; height: 100%; background: black; transform: translateX(0); } .active .appear_line span::before{ animation: appear_line_before .3s cubic-bezier(.17,.67,.08,.97) .3s 1 forwards; } .appear_line span::after{ content: ''; position: absolute; top: 0; left: 0; width: 0; height: 100%; background: black; transform: translateX(0%); } .active .appear_line span::after{ animation: appear_line_after .6s cubic-bezier(.17,.67,.08,.97) 1 forwards; } @keyframes appear_line_after{ 0% { width: 0;transform: translateX(-100%)} 50%{ width: 100%;transform: translateX(0%) } 100% { width: 100%; transform: translateX(100%)} } @keyframes appear_line_before{ 0% {transform: translateX(0)} 100% {transform: translateX(100%)} } /* SWIPER BANNERS */ .section_banners { background: #141517;margin-bottom: 300px; padding: 100px 0; } .zone_banners { } .zone_banners .swiper-container { } .zone_banners .gallery-top { height: 740px!important; width: 580px!important; max-width: 100%; display: block; } .zone_banners .gallery-top .swiper-slide { height: 600px!important; width: 543px!important; } .zone_banners .gallery-top .swiper-slide iframe{ position: absolute; top: 30px; left: 50%; margin-left: -150px; width: 300px!important; height: 600px!important; overflow: hidden; border: 32px solid #000; box-sizing: content-box; border-radius: 6px; display: block; box-shadow: 0px 30px 40px -20px #000; } .zone_banners .gallery-top .swiper-button-prev{ left: 0px; } .zone_banners .gallery-top .swiper-button-next{ right: 0px; } .zone_banners .gallery-thumbs { max-width: 100%; height: 110px; width: 900px; margin: auto; } .zone_banners .gallery-thumbs .swiper-slide { width: 100px; height: auto; opacity: 0.4; } .zone_banners .gallery-thumbs .swiper-slide-active { opacity: 1; } .banniere_container{ background: #111; display: inline-block; height: auto; width: 100px; margin: 0; padding: 10px; overflow: hidden; } .banniere_container img{ width: 100% } .banniere_container h4{ letter-spacing: 0.2em; text-decoration: none; font-size: 12px; background: none; opacity: 0.6em; color: #fff; text-transform: uppercase; font-size: 9px; text-align: center; padding: 10px 0; max-width: 100%; overflow-x: hidden; } .txt_banners{ } /* /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^/^ /^ /^^ /^^ /^^ /^^ /^/^ /^ /^/^ /^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^ /^^ /^^ /^^ /^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^^^^ /^^ /^^ /^^ /^^^^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^ /^^ /^^ /^ /^^ /^^ /^^^ /^^ /^^ /^^^ /^^^^ /^^ /^^ /^^^^ */ @media screen and (max-aspect-ratio: 4/3) { } @media (max-width: 1230px){ } /* /^^ /^^ /^^ /^ /^^ /^^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^ /^^ /^^ /^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^^^^ /^^ /^^ /^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^ /^^^ /^ /^^ /^^ /^^ /^^ /^^ /^^^ /^^^^ */ @media (max-width: 780px){ .manu_lechat{ font-size: 15px; ; width: 100vw; mix-blend-mode: normal; color: #fff; top: 0; left: 0; padding: 20px; text-align: left; background: black; display: block; } .contact_bt{ font-size: 11px; left: auto; right: 20px; top: 22px; transform: translateY(0) rotate(0);;} p { font-size: 12px; } .presentation p{ font-size: 12px; } .biggos{ font-size: 30px; } .small{ font-size: 15px; } .ref_txt { padding: 0 10%; margin-top: 0px; width: 100%; } .ref_txt .title { margin: 10px 0; } .ref_txt .description{ width: 100% } .ref_txt .num{ position: relative; right: auto; width: 100% ; text-align: left; } .ref_txt .annee{ position: relative; top: auto; right: auto; width: 100%; text-align: left; } .realisations .item_container{ padding: 60px 0; } .presentation { padding: 80px 0px ; } .presentation .biggos{ padding-bottom: 80px; } .appear_line span::after{ display: none; } .appear_line span::before{ display: none; } .realisations .item_container .ref_screen { width: 90%; border: 16px solid #000; } .section_banners{ display: none;} .realisations .item_container{ padding: 80px 0px ; } .ref_txt .url{ display: none; } .encart_titre { padding: 120px 0; } .presentation .accroche .small{ margin: 10px;} } /* /^^ /^^ /^^ /^ /^^ /^^ /^^ /^^ /^^ /^/^ /^ /^ /^^^ /^^ /^^^ /^^ /^^ /^^ /^^^^ /^^ /^^ /^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^ /^^ /^ /^^ /^^ /^/^^ /^^^^^ /^^ /^^^ /^^ /^^ /^^ /^^ /^^ /^ /^^ /^^^^^ /^^ /^^^ /^^ /^^ /^ /^^ /^^ /^^ /^^ /^^ /^^ /^ /^^ /^ /^^ /^^ /^^ /^^^^ /^^ /^^ /^^^ /^^ /^^^ /^^^ /^ /^^ /^^^^ /^^ /^^ /^^ */ @keyframes anim_loader{ 0% { transform: translate3d(-50%, -50%,0); opacity: 0 } 30% { transform: translate3d(-50%, -50%,0); opacity: 1 } 70% { transform: translate3d(-50%, -50%,0); opacity: 1 } 100% { transform: translate3d(-50%, -50%,0); opacity: 0 } } @keyframes anim_screen_loader{ to{ transform: translateY(-120vh);} } @keyframes anim_loader_video{ 0% { width: 0 } 100% { width: 100% } } @keyframes fadeInDiaporama{ 0% { opacity: 0; } 10% { opacity: 1; } 40% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 0; } } /* /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^ /^^ /^^^^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^ /^^ /^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^^^ /^^ /^^ /^^/^^ /^^ */ .debugmode div, .debugmode header, .debugmode footer, .debugmode section{ border: 1px dotted cyan } .debugmode h1, .debugmode h2, .debugmode h3, .debugmode p, .debugmode ul, .debugmode li, .debugmode a{ border: 1px dotted rgba(0,0,0,0.2) }