/* CSS by Manu LECHAT https://e-lechat.com */ /* /^^ /^^ /^^ /^/^ /^ /^^ /^^ /^ /^^ /^^ /^^ /^ /^^^ /^^ /^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^ /^^ /^ /^ /^^ /^^ /^^ /^^^ /^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^ /^^ /^^ /^^ /^^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^^ /^^ /^^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ */ @font-face { font-family: "font_1"; src: url("../fonts/Literata-Regular.ttf") format('truetype') } @font-face { font-family: "font_2"; src: url("../fonts/Literata-MediumItalic.ttf") format('truetype') } @font-face { font-family: "font_3"; src: url("../fonts/Inter-Regular.ttf") format('truetype') } @font-face { font-family: "font_4"; src: url("../fonts/Literata-Light.ttf") format('truetype') } /* /^^ /^^ /^^ /^ /^^^ /^^^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^^ /^/^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^^ /^^^ /^^ */ :root { --font_1 : "font_1"; --font_2 : "font_2"; --font_3 : "font_3"; --font_4 : "font_4"; --grid_unit: 80px; --w_wrapper: calc( 14 * var(--grid_unit) ); --mozaic_unit: 23vw; --fontSize_unit: 10px; --color_txt : #2F2F3D; --color_txt_alt : #8BA596; --color_bg: #F6F6F6; --swiper-navigation-size: 17px; } /* /^^ /^^ /^ /^^ /^/^ /^ /^^ /^^ /^^ /^/^ /^ /^^^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^^ /^^ /^^ /^^ /^^ */ /* titles */ .txt_s { font-size: calc( var(--fontSize_unit) * 1.1) ; } .txt_m { font-size: calc( var(--fontSize_unit) * 1.4); } .txt_l { font-size: calc( var(--fontSize_unit) * 2.8); } .txt_xl { font-size: calc( var(--fontSize_unit) * 3.5); } .txt_xxl { font-size: calc( var(--fontSize_unit) * 3.8); line-height: 1.23em!important; } .regular{ font-family: var(--font_1); } .medium{ font-family: var(--font_1); } .bold{ font-family: var(--font_2); } .font2{ font-family: var(--font_2); font-weight: bolder; letter-spacing: 0.05em; } .center{ text-align: center; } strong{ font-family: var(--font_1); } .maj{ text-transform: uppercase; } /* /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^/^ /^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^^ /^^ /^^^ /^^ /^^ /^^/^^ /^^ /^^ */ ::selection { background-color: #4d84f1; opacity: 0.5; transition: all .3s; ; color: #fff; text-shadow: none; } * { box-sizing: border-box; outline: none; } .border *{ border:1px dotted cyan } html{ top:0; left: 0; margin: 0; padding: 0; width:100%;-webkit-font-smoothing: antialiased; box-sizing: border-box; position: relative; text-rendering: optimizeLegibility; } body{ font-size: calc( var(--fontSize_unit) * 1.4); line-height: 1.35em; overflow-x: hidden; background-color: var(--color_bg); font-family: var(--font_1); width: 100vw; overflow-x: hidden; color: var(--color_txt); margin: 0; padding: 0; top:0; left: 0; } .underline{ text-decoration: underline; } .page_fadeIn{ opacity: 0; animation: anim_page_fadeIn 1s cubic-bezier(0.17, 0.9, 0.46, 1) .2s 1 normal forwards} body.shownav{ overflow: hidden; } body.noscroll{ overflow: hidden; } div, figure{ position: relative; display: block; } header, section, main{ margin: 0; padding: 0; width: 100%; max-width: 100vw; display: block; position: relative; overflow-x: hidden; z-index: 2} img{ width: 100%; height: auto; display: block; object-fit: contain; } ul{ margin: 0; display: block; text-align: left; padding: 0;} li{ letter-spacing: 0.05em; margin: 0em 0; list-style: none; min-height:1.6em; padding-left: 0px; background-repeat: no-repeat; background-size: 16px; background-position: 0 3px; padding-bottom: 0px; } h1,h2,h3,h4{ text-transform: uppercase; font-family: var(--font_2); font-size: calc( var(--fontSize_unit) * 2); display: block; width: auto; clear: both; break-after: always; margin: 0 ; line-height: 1.15em; font-weight: 400 } a{ display: inline-block; color: var(--color_txt); text-align: left; text-decoration: underline; } a:hover{ cursor: pointer; opacity: 1; } p{ clear: both; display: block; padding: 0; margin: 0;font-weight: lighter; position: relative; line-height: 1.5em; font-family: 'font_1'; font-style: normal; font-weight: 400; font-size: calc( var(--fontSize_unit) * 1.4); line-height: 1.6em; letter-spacing: -0.02em; } a.over_underline{ width: fit-content;} a.over_underline:after{ content:""; position: absolute; bottom:0; left: 0; transition: all .1s cubic-bezier(.17,.67,.68,1.01); width:0%; height: 2px; background: var(--color_txt); } a.over_underline:hover:after{ width:100%; } .section{ max-width: 100% ; width: var(--w_wrapper); margin: 0 auto; } .intro{ font-family: var(--font_2); line-height: 1.4em; font-size: calc( var(--fontSize_unit) * 1.8);; margin-bottom: 40px; } .surtitre{ margin-bottom: calc( .5 * var(--grid_unit) ) ; font-weight: 600; letter-spacing: 0.05em; font-family: var(--font_3); color: var(--color_txt_alt); font-size: calc( var(--fontSize_unit) * 1.2); } .col{ padding: calc(var(--grid_unit) * 0.5); width: 50%; } .col_wrapper{ display: flex; } /* maintenance_wrapper */ .maintenance_wrapper { display: flex; z-index: 100; width: 100%; height: 100vh; top:0; left: 0; position: fixed; background: black; flex-direction: column; text-align: center; justify-content: center; } .maintenance_wrapper .maintenance_content{ opacity: 0; text-transform: uppercase; line-height: 1.26em; animation: fadeIn 3s cubic-bezier(.58,.28,.6,.96) 0s 1 normal forwards; color: white; } /* header */ section.cover{ flex-direction: column; margin-top: 0; width: 100%; height: calc( var(--grid_unit) * 9 ); max-height: calc( 100vh ); align-items: center; display: flex; justify-content: center; } section.cover .logo_wrapper{ border-radius: 3px; overflow: hidden; width: calc( var(--grid_unit) * 4 ); height: auto; object-fit: contain; box-shadow: 0px 0px 25px rgba(0,0,0,0.1); } section.cover .cover_wrapper{ overflow: hidden; width: calc( 100% - var(--grid_unit) * 4 ); max-width: var(--w_wrapper); position: absolute; height: calc( var(--grid_unit) * 8 ); max-height: calc( 100vh - var(--grid_unit) * 2 ); object-fit: cover; } section.cover .bg{ width: 100% ; height: 100%; object-fit: cover; } section.cover .keywords{ font-size: 10px; display: flex; position: absolute; z-index: -1; flex-wrap: wrap; } section.cover .keywords li{ width: 0px; overflow: hidden; } /* contact */ .bt_contact{ z-index: 80; padding: 5px 8px; letter-spacing: 0.05em; cursor: pointer; text-transform: uppercase; width: 1.5em; display: flex; justify-content: center; position: fixed; left:calc( 100vw - 60px ); top:calc( var(--grid_unit) * 1); writing-mode: vertical-rl; text-orientation: mixed; } .bt_contact:hover{ text-decoration: underline;} .bt_insta{ z-index: 80; text-decoration:none; letter-spacing: 0.05em; cursor: pointer; text-transform: uppercase; width: 1.5em; display: flex; justify-content: center; position: fixed; left:calc( var(--grid_unit) * 0.5); top:calc( 100vh - var(--grid_unit) * 1); writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg) translateY(5em); } .bt_insta:hover{ text-decoration: underline; } /* intro */ section.intro { display: flex; } section.intro .portrait{ width: calc(var(--grid_unit) * 6); height: calc(var(--grid_unit) * 4); object-fit: contain; } /* paragraphe */ section.paragraphe .article{ display: flex; width: 100%; } section.paragraphe .illus_titre{ margin-bottom: 20px; width:calc( var(--grid_unit) * 4 ) } section.paragraphe .listing{ margin-top: calc( var(--grid_unit) * 0.5);font-family: var(--font_3); font-size: calc( var(--fontSize_unit) * 1.4); } section.paragraphe .listing li{ padding-bottom: 0.5em; background-image: url("../images/puce.png"); background-repeat: no-repeat; background-size: calc( var(--fontSize_unit) * 0.6); font-size: calc( var(--fontSize_unit) * 1.2); background-position: left 8px; padding-left: 1em; } section.paragraphe .realisations{ padding: calc(var(--grid_unit) * 0.5); } section.paragraphe .realisations_wrapper{ width: 100%; display: flex; justify-content: space-between; } section.paragraphe .projet_thumb{ z-index: 11; margin-bottom: 20px; display: block; max-width: 100%; } section.paragraphe .projet_thumb .cover{ width: calc( var(--grid_unit) * 4); ; height: calc( var(--grid_unit) * 2.3); max-width: 100%; object-fit: cover; } section.paragraphe .projet_thumb .caption{ padding-top: 5px; font-size: calc( var(--fontSize_unit) * 1.2); font-family: var(--font_3); } section.paragraphe .titre{ position: relative; background-image: url("../images/separator.svg"); background-position: top left; background-repeat: no-repeat; background-size: 30px; text-align: left; font-family: var(--font_4); font-size: calc( var(--fontSize_unit) * 4.5); text-transform: uppercase; margin-bottom: 40px; } section.paragraphe .illus{ margin-left: calc( var(--grid_unit) * 2); height: calc( var(--grid_unit) * 7); width: calc( var(--grid_unit) * 3); object-fit: cover; } section.paragraphe .realisations_wrapper{ width: 100%; display: flex; justify-content: space-between; } /* image */ section.image{ background-color: var(--color_bg); padding: calc( var(--grid_unit) * 0.5); } section.image img{ mix-blend-mode: multiply; height: calc(var(--grid_unit) * 6); object-fit: cover; } /* partenaires */ section.partenaires { background-color: var(--color_bg); } section.partenaires .titre{ position: relative; padding-top: 40px; background-size: 30px; text-align: center; font-family: var(--font_4); font-size: calc( var(--fontSize_unit) * 3); text-transform: uppercase; margin-bottom: var(--grid_unit); } section.partenaires .logos_wrapper{ padding: 0 60px; display: flex; flex-wrap: wrap; justify-content: center; mix-blend-mode: multiply; } section.partenaires .logo_partenaire{ width:calc( var(--grid_unit) * 1); margin: 15px; height:calc( var(--grid_unit) * 1); object-fit: contain; } /* project */ section.projects { padding: calc(var(--grid_unit) * 0.5); } section.projects .titre{ font-family: var(--font_4); font-size: calc( var(--fontSize_unit) * 3); text-transform: uppercase; margin-bottom: 40px; } section.projects .realisations_wrapper{ width: 100%; display: flex; flex-wrap: wrap; ; } section.projects .projet_thumb{ margin-bottom: 20px; display: block; max-width: 100%; width: calc( var(--grid_unit) * 3); margin-bottom: 18px; margin-right: 19px; } section.projects .projet_thumb .cover_wrapper{ align-items: flex-end; flex-direction: column; justify-content: flex-end;display: flex; width: 100%; height: calc( var(--grid_unit) * 2); max-width: 100%; object-fit: cover; } section.projects .projet_thumb .cover_wrapper img{ position: absolute; width: 100%; height: 100%; object-fit: cover; } section.projects .projet_thumb .caption{ padding-top: 5px; font-size: calc( var(--fontSize_unit) * 1.2); font-family: var(--font_3); min-height: 3em; } section.projects .projet_thumb:hover{ cursor: pointer; } section.projects .projet_thumb .categ{ margin: 0 5px 5px 0; opacity: 0; transition: opacity .3s; display: flex; align-items: center; padding : 5px 8px 5px 8px; text-transform: uppercase; line-height: 1em; font-size: calc( var(--fontSize_unit) * 1); ; font-family: var(--font_3); background: var(--color_bg); border-radius: 3px;} section.projects .projet_thumb:hover .categ{ opacity: 1; } /* contact */ section.contact .titre{ position: relative; padding-top: 40px; background-size: 30px; text-align: center; font-family: var(--font_4); font-size: calc( var(--fontSize_unit) * 3); text-transform: uppercase; margin-bottom: var(--grid_unit); } section.contact { padding: calc(var(--grid_unit) * 0.5); } section.contact p{ font-size: calc( var(--fontSize_unit) * 1.6); line-height: 2em; text-align: center; } /* overlay */ .overlay { z-index: -1; align-items: center; background: rgba(255,255,255,0.8); top: 0; left: 0; align-content: center; width: 100vw; height: 100vh; position: fixed; display: none; justify-content: center; } .overlay.activ{ display: flex; z-index: 100; } .overlay .popup_contact{ text-align: center; flex-direction: column; align-items: center; background-color: white; box-shadow: 0px 0px 25px rgba(0,0,0,0.3); display: flex; justify-content: center; max-height: 80vh; overflow: hidden; width: calc(var(--grid_unit) * 7); ; height: calc(var(--grid_unit) * 4); position: relative; } .overlay .popup_contact .titre{ margin-bottom: 40px; padding-bottom: 20px; border-bottom: 1px solid black; } .overlay .projet_wrapper{ box-shadow: 0px 0px 25px rgba(0,0,0,0.3); justify-content: center; max-height: 80vh; overflow: hidden; width: calc(var(--grid_unit) * 13); ; height: calc(var(--grid_unit) * 7); position: relative; } .projet_item{ background-color: white; position: absolute; display: none; height: calc(var(--grid_unit) * 7); } .projet_item.activ{ display: flex; } .projet_item .colg{ width: calc(var(--grid_unit) * 9); height: calc(var(--grid_unit) * 7);max-height: 80vh; overflow: hidden; } .projet_item .colg .swiper{ z-index: 1; } .projet_item .colg .swiper-slide{ width: 100%; height: calc(var(--grid_unit) * 7);max-height: 80vh; overflow: hidden; } .projet_item .colg .swiper-slide img{ background-color: white; object-fit: contain; width: 100%;max-height: 80vh; height: calc(var(--grid_unit) * 7); overflow: hidden; } .projet_item .colg .keywords{ position: absolute; z-index: -1; display: flex; flex-wrap: wrap; } .projet_item .colg .keywords li{ font-size: 11px; padding: 5px; } .projet_item .cold{ padding: calc(var(--grid_unit) * 0.5); width: calc(var(--grid_unit) * 4); height: calc(var(--grid_unit) * 7); overflow-y: auto; } .projet_item .titre{ border-bottom:1px solid black; width: 100%; font-family: var(--font_4); padding-bottom: 1em; font-size: calc( var(--fontSize_unit) * 2); text-transform: uppercase; margin-bottom: 20px; } .projet_item .intro{ margin-bottom: 20px; font-size: calc( var(--fontSize_unit) * 1.6); } .projet_item .quandqui{ font-size: calc( var(--fontSize_unit) * 1.1); font-family: var(--font_3); margin-bottom: 20px; } .projet_item .paragraphe{ line-height: 1.5em; margin-bottom: 20px; font-size: calc( var(--fontSize_unit) * 1.2); } .projet_item .paragraphe p{ line-height: 1.5em; margin-bottom: 20px; font-size: calc( var(--fontSize_unit) * 1.2); } .projet_item .description { margin-top: 20px; line-height: 1.5em;font-size: calc( var(--fontSize_unit) * 1.2); font-family: var(--font_3); } .projet_item .description p{ line-height: 1.5em;font-size: calc( var(--fontSize_unit) * 1.2); font-family: var(--font_3); } .projet_item .swiper figure{ margin: 0; width: 100%; height: 100%; } .projet_item .swiper iframe { border: none; width: 100%; height: 100%; } .cover{ object-fit: cover!important; } /* swiper */ .swiper-button-next{ top: auto; z-index: 9;margin:0 10px; position: relative; color: var(--color_txt); } .swiper-button-prev{ top: auto; z-index: 9; margin:0 10px; position: relative; color: var(--color_txt); } .swiper-pagination{ top: auto; z-index: 9; margin:0 10px; position: relative; color: var(--color_txt); display: flex; align-items: center; height: 25px; } .nav_wrapper{ z-index: 10; height: 36px; border-radius: 40px; align-items: center; z-index: 9; display: flex; background: white; position:absolute; bottom: 10px; left: 50%; transform: translateX(-50%); } .swiper-pagination-bullet-active { background: var(--color_txt); } .swiper-pagination-bullet { width: 5px; height: 5px; margin: 2px; } .popup_wrapper .bt_close{ display: block; z-index: 91; position: absolute; top:10px; right: 10px; width: 30px; height: 30px; } .popup_wrapper .bt_close:hover{ cursor: pointer; } .popup_wrapper .bt_close .line{ position: absolute; transform-origin:50% 50%; left: 50%; top:50%; width:0px; height: 1px; background: var(--color_txt); transition: all .3s; } .popup_wrapper .bt_close .line1{ width:30px; transform : translateX(-50%) translateY(0) rotate(45deg); transition:all .3s 1.4s; } .popup_wrapper .bt_close .line2{ width:30px; transform : translateX(-50%) translateY(0) rotate(-45deg); transition:all .3s 1.5s; } /* maintenance */ .msg_maintenance{ padding: 5px 40px; position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); font-family: var(--font_2); margin-top: 40px; background: var(--color_bg); } section.default { padding: calc(var(--grid_unit) * 0.5); } section.default h2{ font-size: 18px; margin: 1em 0; } section.footer{ display: flex; justify-content: space-between; padding: calc(var(--grid_unit) * 0.5); } /* /^^^^^^^ /^^ /^^ /^^ /^^ /^^ /^^^^ /^ /^^ /^^^^ /^^ /^^ /^ /^^ /^ /^^ /^^ /^ /^^ /^^ /^^ /^^ /^^ /^^ /^^^^^ /^^ /^^^ /^ /^^ /^^^ /^^ /^^ /^^ /^^ /^ /^^ /^^ /^^ /^^ /^/^^ /^^ /^^ /^^^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ */ @media ( min-width: 1800px){ :root { --fontSize_unit: 13px; /* max value */ } } @media ( max-width: 1200px){ :root { --fontSize_unit: .9vw; } } @media ( max-width: 800px){ :root { /* --mozaic_unit: 48vw; */ --grid_unit: 10vw; --fontSize_unit: 2vw; } section.cover{ height: 100vh; } section.intro { flex-direction: column; } .col{ width: 100%; } section.projects .projet_thumb { width: 28vw; margin-right: 2vw; } .col_wrapper { flex-direction: column; } section.partenaires .logos_wrapper { padding: 0; } .bt_contact { position: absolute; } .bt_insta { position: absolute; } .overlay .popup_contact { height: calc(var(--grid_unit) * 9); width: calc(var(--grid_unit) * 7); } .overlay .projet_wrapper { width: calc(var(--grid_unit) * 9); height: 80vh; } .projet_item { height: 80vh; flex-direction: column; } .projet_item .colg { width: calc(var(--grid_unit) * 9); height: 40vh; } .projet_item .colg .swiper-slide { height: 40vh; overflow: auto; } .projet_item .colg .swiper-slide img { height: 40vh; } .projet_item .cold { width: calc(var(--grid_unit) * 9); height: 40vh; } .swiper-button-next, .swiper-button-prev{ display: none; } .nav_wrapper{ background: none; } .popup_wrapper .bt_close { width: 40px; border-radius: 30px; height: 40px; background: #fff; } } @keyframes fadeOut{ to { opacity: 0; } } @keyframes fadeIn{ to { opacity: 1; } } @keyframes fadeInWord{ 0% { opacity: 0 } 100% { opacity: 1; } } @keyframes slideTitle{ to{ opacity: 1; transform:translate3D(0,0,0) } } @keyframes hover_mosaique_item{ 0%{ opacity:0.8; } 100%{ opacity:1 } } @keyframes screen_loader{ from{ opacity:1 } to { opacity: 0; } } @keyframes screen_loader_content{ 0%{ opacity:0; } 10%{ opacity:1; } 80%{ opacity: 1; } 100%{ opacity: 0; } } @keyframes hover_mosaique_item{ 0%{ opacity:0.8; } 100%{ opacity:1 } } @keyframes anim_title_span{ 0% { opacity: 0; top: 20px } 100% { opacity: 1; top: 0px } } @keyframes anim_splitedWords_span{ 0% { opacity: 0; transform:translate3D(0,-50px,0) } 100% { opacity: 1; transform:translate3D(0,0,0) } } @keyframes anim_contact_popup{ 0% { opacity: 0; transform: scale(0.95); } 100% { opacity: 1; transform: scale(1); } }