/* CSS by Manu LECHAT https://e-lechat.com */ /* /^^ /^^ /^^ /^/^ /^ /^^ /^^ /^ /^^ /^^ /^^ /^ /^^^ /^^ /^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^ /^^ /^ /^ /^^ /^^ /^^ /^^^ /^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^ /^^ /^^ /^^ /^^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^^ /^^ /^^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /* /^^ /^^ /^^ /^ /^^^ /^^^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^^ /^/^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^^ /^^^ /^^ */ :root { --grid_unit: calc( 100vw / 24 ); --w_wrapper: 100%; --mozaic_unit: calc( 100vw/5.05 ); --fontSize_unit: .6vw; --color_txt : #1c394e; --color_bg: #FBF7F0; --color_bg_alt: #f6f2eb; --color_orange: #f2c279; } /* /^^ /^^ /^ /^^ /^/^ /^ /^^ /^^ /^^ /^/^ /^ /^^^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^^ /^^ /^^ /^^ /^^ */ /* titles */ .txt_s { font-size: calc( var(--fontSize_unit) * 1.2) ; } .txt_m { font-size: calc( var(--fontSize_unit) * 1.5); } .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); } .fontSize12 { font-size: calc( var(--fontSize_unit) * 1.2); } .fontSize15 { font-size: calc( var(--fontSize_unit) * 1.5); } .fontSize18 { font-size: calc( var(--fontSize_unit) * 1.8); line-height: 1.35em; } .fontSize24 { font-size: calc( var(--fontSize_unit) * 2.4); } .fontSize27 { font-size: calc( var(--fontSize_unit) * 2.7); } .fontSize33 { font-size: calc( var(--fontSize_unit) * 3.3); } .fontSize55 { font-size: calc( var(--fontSize_unit) * 5.5); } .fontSize65 { font-size: calc( var(--fontSize_unit) * 6.5); line-height: 1.35em; } .fontSize90 { font-size: calc( var(--fontSize_unit) * 9); line-height: 1.05em; } .medium{ font-weight: 600; } .SwearDisplayMedium{ font-family: swear-display, serif; font-weight: 600; letter-spacing: -0.01em; } .SwearDisplayThin{ font-family: swear-display, serif; font-weight: 400; letter-spacing: -0.01em; } .LapturesemiBold{ font-family: jaf-lapture, serif; line-height: 1.6em; font-weight: 600; letter-spacing: -0.015em;} .Lapture{ font-family: jaf-lapture, serif; font-weight: 400; letter-spacing: -0.015em;} a.SwearDisplayThin{ text-decoration: underline; } a.LapturesemiBold{ text-decoration: underline; } a.SwearDisplayMedium{ text-decoration: underline; } .bold, strong{ font-weight: 600; } .font_light{ font-weight: 400; } .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; } html{ font-family: swear-display, serif; 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-family: swear-display, serif; font-size: calc( var(--fontSize_unit) * 1.2) ; line-height: 1.35em; overflow-x: hidden; background-color: var(--color_bg); font-weight: 400; font-style: normal; width: 100vw; overflow-x: hidden; color: var(--color_txt); margin: 0; padding: 0; top:0; left: 0; } .bg{ z-index: -1; width:100vw; height: 100vh; position: fixed; top:0; left: 0; } .bg img{ width:100%; height: 100%; object-fit: cover; opacity: 0.5; } .bg svg{ width:auto; height: 100vh; min-width: 100vw} .bg svg path{ fill: var(--color_txt); opacity: 0.03;} .underline{ text-decoration: underline; } body.shownav{ overflow: hidden; } div, figure, a{ 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{ font-size: calc( var(--fontSize_unit) * 2.4); display: block; width: auto; clear: both; break-after: always; margin: 0 ; line-height: 1.25em; font-weight: normal } a{ /*font-family: swear-display, serif; display: inline-block; text-align: left; */text-decoration: none; color: var(--color_txt); } a:hover{ cursor: pointer; opacity: 1; } p{ clear: both; display: block; padding: 0; margin: 0; font-weight: lighter; position: relative; line-height: 1.3em; } 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%; } .fit_padding{ padding-left: calc(var(--grid_unit) * 4); padding-right: calc(var(--grid_unit) * 4) } .logo_bg{ width: 80vw; position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%); } /* .swiper-wrapper { transition-timing-function:linear!important; } */ /* Barba */ #barba-wrapper{ position: relative; width: 100vw;} .barba-container{ width: 100%; } /* main layout */ .main_container{ margin: 120px auto 0 auto; position: relative; display: block; width: 100%; min-height: calc(100vh - 160px); } .fit_container{ padding: 0 calc( var(--grid_unit) * 1) ; width: 100%; max-width: var(--w_wrapper); margin: 0 auto; } /* maintenance_wrapper */ .maintenance_wrapper { display: flex; z-index: 100; width: 100%; height: 100vh; top:0; left: 0; position: fixed; background-color: var(--color_bg); 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; } .maintenance_wrapper div{ border: none; } /* header */ .header{top: 0; position: fixed; background: var(--color_bg ); z-index: 90; padding-left: calc( var(--grid_unit) * 3 ) ; padding-right: calc( var(--grid_unit) * 3 ); height: 120px; width: 100vw; overflow: hidden; display: flex; flex-direction: row; justify-content: space-between;; align-items: center; } .header .main_logo{ width: 220px; } .header .header_flex{ width: 100%; display: flex; justify-content: space-between; } .header a.link{ font-family: jaf-lapture, serif; font-style: normal; font-weight: 400; letter-spacing: 0.015em; font-size: calc( var(--fontSize_unit) * 1.8); position: relative; text-transform: uppercase; padding: 0; } .header a.link:after{ transition: all .3s; content: ""; width: 100%; height: 0px; background: var(--color_orange); position: absolute; bottom: -3px; left: 0px; ; } .header a.link:hover:after{ height: 3px; } .header a.link.active:after{ height: 3px; } .header a:hover{ cursor: pointer;} .header .main_logo{ text-transform: uppercase; font-size: calc( var(--fontSize_unit) * 3); font-weight: 800; letter-spacing: 0.02em; } .header .sublogo{ font-size: calc( var(--fontSize_unit) * 1.8); padding-left: 0.25em; } /* footer */ .footer{ z-index: 1000; background: var(--color_bg_alt); overflow-y: hidden; height: 40px; line-height: 1em; position: relative; padding-left: var(--grid_unit); padding-right: var(--grid_unit); width: 100%; display: flex; flex-direction: column; justify-content: space-around; } .footer .footer_flex{ width: 100%; display: flex; justify-content: space-between; } .footer .link{ margin-left: 1em; } .footer .col2{ display: flex; width: auto; } .footer .col2 a:hover{ text-decoration: underline; } /* splitedWords */ .splitedWords{ display: flex; flex-wrap: wrap; } /* home_template */ .home_template .swiper_vertical_home{ overflow: hidden; width: 80%; margin: auto; height: calc(100vh - 190px); } .home_template .swiper_vertical_home .swiper-slide{ opacity: 0; transition: opacity .8s .5s ease-out; padding: 0 calc( var(--grid_unit) * 2); height: calc( var(--grid_unit) * 8); align-items: center; align-content: center; display: flex; justify-content: flex-start; } .home_template .swiper_vertical_home .swiper-slide.flexend{ justify-content: flex-end; } .home_template .swiper_vertical_home .swiper-slide-active{ opacity: 1; transition: opacity .8s 0s ease-out } .home_template .paragraphe{ width: calc( var(--mozaic_unit) * 2 ) } .home_template .swiper-wrapper{ transition-timing-function:cubic-bezier(0, 0, 0.02, 1)!important; } /* project_pad_home */ .project_pad_home{ width: calc( var(--mozaic_unit) * 1 )!important; height:calc( var(--mozaic_unit) * 1.5 )!important; } .project_pad_home.cover_sizer_paysage{ width: calc( var(--mozaic_unit) * 2 )!important; } .project_pad_home .text_wrapper{ transition: all .8s .8s ease-out!important; } .swiper-slide-active .project_pad_home .text_wrapper{ transform: translateY(0)!important; } .project_pad_home .text_wrapper .text_content{ opacity: 0!important; transform: translateY(30px)!important; transition: all .8s 1.2s ease-out!important; } .swiper-slide-active .project_pad_home .text_content{ transform: translateY(calc( var(--fontSize_unit) * -2.5))!important; opacity: 1!important; } /* effet texte */ .home_template .paragraphe span{ opacity: 0; transition: opacity 1s .1s; } .home_template .paragraphe span:nth-child(13n+1){ transition: opacity 1s .1s; } .home_template .paragraphe span:nth-child(13n+2){ transition: opacity 1s .2s; } .home_template .paragraphe span:nth-child(13n+3){ transition: opacity 1s .3s; } .home_template .paragraphe span:nth-child(13n+4){ transition: opacity 1s .4s; } .home_template .paragraphe span:nth-child(13n+5){ transition: opacity 1s .5s; } .home_template .paragraphe span:nth-child(13n+6){ transition: opacity 1s .6s; } .home_template .paragraphe span:nth-child(13n+7){ transition: opacity 1s .7s; } .home_template .paragraphe span:nth-child(13n+8){ transition: opacity 1s .8s; } .home_template .paragraphe span:nth-child(13n+9){ transition: opacity 1s .9s; } .home_template .paragraphe span:nth-child(13n+10){ transition: opacity 1s 1s; } .home_template .paragraphe span:nth-child(13n+11){ transition: opacity 1s 1.1s; } .home_template .paragraphe span:nth-child(13n+12){ transition: opacity 1s 1.2s; } .home_template .paragraphe span:nth-child(13n+13){ transition: opacity 1s 1.3s; } .home_template .swiper_vertical_home .swiper-slide-active .paragraphe span { opacity: 1; } /* projects_cloud */ .projects_cloud{ width: 100%; } .projects_cloud{ display: flex; flex-wrap: wrap; } .projects_cloud .grid-item{ border: none; padding:5px; width: calc(var(--mozaic_unit) ) ; height: calc( var(--mozaic_unit) * 1.5 ) ; } .projects_cloud .grid-item.cover_sizer_paysage{ width: calc( var(--mozaic_unit) * 2 ) } .projects_cloud .grid-item.cover_sizer_xxl{ width: calc( var(--mozaic_unit) * 2 ); height: calc( var(--mozaic_unit) * 3 ) } .projects_cloud .grid-sizer{ width: var(--mozaic_unit); height: calc( var(--mozaic_unit) * 1.5 ); } /* project_pad */ .project_pad{ border-radius: 3px; overflow:hidden; width: 100%; height: 100%; display: flex; flex-direction: column; } .project_pad .text_wrapper{ width: 100%; position: absolute; bottom: 0; padding-left: 10px; padding-bottom: 0px; } .project_pad .text_wrapper .text_content{ width: 100%; z-index: 11; transform: translateY(calc( var(--fontSize_unit) * -2.5)); } .project_pad .text_wrapper .text_content .project_title{ line-height: 1.23em; padding-bottom: 0.5em; padding-right: 1em; letter-spacing: -0.025em; } .project_pad .img_wrapper{ width: 100%; height: 100%; overflow: hidden; } .project_pad .img_wrapper img{ height: 100%; width: 100%; object-fit: cover; } .project_pad .text_wrapper:before{ opacity: 1; background: var(--color_orange); top: 0; left: 0; position: absolute; content: ""; width: 100%; height: 100%; } .project_pad .text_wrapper:after{ width: calc( var(--mozaic_unit) * 2 ); height: calc( var(--mozaic_unit) * 2 ); transition: all .2s; transform: translateY( -50% ) translateX( -50% ) ; top: 0; left: 0; background: radial-gradient( rgba(242,194,121,1) 0% , rgba(242,194,121,0) 70% ); position: absolute; content: ""; } .project_pad.cover_sizer_paysage .text_wrapper:after{ width: calc( var(--mozaic_unit) * 4 ); height: calc( var(--mozaic_unit) * 4 );} .project_pad.cover_sizer_xxl .text_wrapper:after{ width: calc( var(--mozaic_unit) * 4 ); height: calc( var(--mozaic_unit) * 4 );} .project_pad .text_wrapper{ transform: translateY( calc( 100% )); transition: all .3s; } .project_pad:hover .text_wrapper{ transform: translateY(0); } .project_pad .text_wrapper .text_content{ opacity: 0; transition: all .5s .2s; } .project_pad:hover .text_wrapper .text_content{ opacity: 1; } .project_pad.cover_sizer_paysage .text_content .project_title{ max-width: 80% ; } .project_pad.cover_sizer_xxl .text_content .project_title{ padding-right: 3em; } .project_pad:hover{ cursor: pointer; } /* projects_template */ .projects_template{ padding-bottom: calc( var(--grid_unit) * 2) ; overflow-y: hidden; } .projects_template .projects_nav{ display: flex; flex-direction: column; align-items: flex-end; justify-content: center; padding: 0 var(--grid_unit) ; margin: 0 auto 0 auto; } .projects_template .projects_nav button{ transition: all .2s; margin: 0.5em 0; background: none; border: none; color: var(--color_txt); } .projects_template .projects_nav button:hover{ cursor: pointer; font-weight: 600; } .projects_template .projects_nav button.is-checked{ font-weight: 600; } .projects_template .projects_cloud{margin-top: calc( var(--grid_unit) * 2) ; } /* project_template */ .project_template{ padding-bottom: calc( var(--grid_unit) * 2) ;; } .project_template .cover_wrapper{ position: relative; width: 100%; height:auto ; margin-bottom: 10px; } .project_template .bg_cover{ opacity:0.4; background-size: cover; background-position: center; background-repeat: no-repeat; position: absolute; width:100%; top:0; left:0; height: 100% ; background-size: cover; } .project_template .intro{ display: flex; padding-top: calc(var(--grid_unit) * 2); } .project_template .interTitleSection{ padding-top: calc(var(--grid_unit) * 2); } .project_template .intro .col_left{ width: calc( var(--grid_unit) * 8); padding-right: var(--grid_unit); } .project_template .intro .intro_container{ display: flex; } .project_template em{ font-style: normal; font-size: 0.8em; transform: translateY(-6px); display: inline-flex; } .project_template .intro .project_title{ padding-bottom: calc( var(--fontSize_unit) * 2); line-height: 1.12em; letter-spacing: -0.025em; } .project_template .intro .project_technique_and_date{ padding-top: calc( var(--fontSize_unit) * 4);} .project_template .intro .project_technique_and_date h3{ padding-right: 1em; } .project_template .intro .project_intro{ padding-top: calc( var(--fontSize_unit) * 6); } .project_template .intro .project_description{ padding-top: 30px; line-height: 1.45em; } .project_template .intro .footer_col{ padding-top: calc( var(--fontSize_unit) * 4); } .project_template .intro .project_periode{ line-height: 1.45em; text-transform: uppercase; } .project_template .intro .project_maitre{ line-height: 1.45em; } .project_template .intro p{ padding-top: 1em; } .project_template .intro ul{ padding-top: .5em; } .project_template .intro li{ list-style: none; padding-top: .6em; margin-left: 1em; } .project_template .intro li:before { content: '- '; position: absolute; left: 0;; } .project_template .col_right{ padding-bottom: var(--grid_unit); width: calc( var(--grid_unit) * 8); height: auto; } .project_template .main_thumb{ overflow: hidden; width: calc( var(--grid_unit) * 8); } .project_template .main_thumb:after{ top: 0; left: 0; background: radial-gradient( rgba(242,194,121,0.7) , rgba(242,194,121,0) ); width: 200%; height: 200%; position: absolute; content: ""; } .project_template .main_thumb_bg{ position: absolute; background: var(--color_orange); position: absolute; width: 50vw; height: calc( 100% - var(--grid_unit) ); left: var(--grid_unit); top: calc( var(--grid_unit) * 2 ); } .project_template .swiper-slide{ height: 40vw; width: auto; max-width: 100vw; padding: 10px; } .project_template .projects_cloud_container{ background-color: var(--color_orange); margin-top: 10px; padding-top: var(--grid_unit); padding-bottom: var(--grid_unit) ; padding-left: calc(var(--mozaic_unit) *0.5 ); padding-right: calc(var(--mozaic_unit) *0.5 ); } .project_template .projects_cloud{ justify-content: center; width: 100%; height: calc( var(--mozaic_unit) * 1.5 ); overflow: hidden ; } .project_template .projects_cloud .grid-item.cover_sizer_xxl{ width: calc(var(--mozaic_unit) ); height: calc( var(--mozaic_unit) * 1.5 ); } .project_template .projects_cloud .project_pad .text_wrapper:after{ width: calc( var(--mozaic_unit) * 2 ); height: calc( var(--mozaic_unit) * 2 ); } .project_template .link_projects{ padding-top: var(--grid_unit) ; text-align: center; text-decoration: underline; } .project_template .image_solo{ height: 40vw; width: 100%; max-width: 100vw; padding: 10px; object-fit: contain; } .swiper_horizontal_right{ margin: 0; } .project_template .swiper-wrapper{ transition-timing-function:cubic-bezier(0.6, -0.01, 0.36, 0.95)!important; } .bt_right_slider_medium { box-shadow: 0px -1px 14px -3px rgba(0,0,0,0.3); transition: all .3s; border-radius: 100%; width: calc( var(--grid_unit) * 0.75); height: calc( var(--grid_unit) * 0.75); z-index: 3; right: calc( var(--grid_unit) * 2); position: absolute; top: 50%; transform: translateY(-50%); left: auto; } .bt_right_slider_medium:hover{ cursor: pointer; } .bt_right_slider_medium svg line, .bt_right_slider_medium svg path{ transition: all .17s; stroke-width: 2px; } .bt_right_slider_medium:hover svg line, .bt_right_slider_medium:hover svg path{ transition: all .3s; stroke-width: 4px; } .bt_left_slider_medium { box-shadow: 0px -1px 14px -3px rgba(0,0,0,0.3); border-radius: 100%; width: calc( var(--grid_unit) * 0.75); height: calc( var(--grid_unit) * 0.75); z-index: 3; position: absolute; top: 50%; transform: translateY(-50%); left:calc( var(--grid_unit) * 2); } .bt_left_slider_medium:hover{ cursor: pointer; } .bt_left_slider_medium svg line, .bt_left_slider_medium svg path{ transition: all .17s; stroke-width: 2px; } .bt_left_slider_medium:hover svg line, .bt_left_slider_medium:hover svg path{ transition: all .3s; stroke-width: 4px; } /* popup_wrapper */ .popup_wrapper{ display: none; z-index: 90; background: rgba(255,255,255,0); transition: all .8s; position: fixed; justify-content: center; align-items: center; top: 0; left: 0; width: 100vw; height: 100vh; } .popup_wrapper .bt_close{ display: block; z-index: 91; position: absolute; top:10px; right: 10px; width: 30px; height: 30px; } .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:hover{ cursor: pointer; } .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; } .popup_wrapper .corner{ transform : translateX(50%) translateY(-50%) rotate(45deg); z-index: 90; background: white; width: 120px; height: 120px; position: absolute; top: 0; right: 0; } /* legals_wrapper */ .legals_wrapper.actif{ display: flex; background: rgba(255,255,255,0.9); } .legals_wrapper .legals_popup{ padding: var(--grid_unit) ; padding-right: 0; animation: anim_contact_popup .6s cubic-bezier(.17,.67,.32,.96) .1s 1 normal forwards; overflow: hidden; opacity: 0; display: flex; width: calc( var(--grid_unit) * 10 ); height: calc( var(--grid_unit) * 9 ); max-height: 80vh; background: white; border-radius: 3px; box-shadow: 0px -1px 14px -3px rgba(0,0,0,0.3); } .legals_wrapper .legals_popup h2{ margin: 1em 0; text-transform: uppercase; } .legals_wrapper .legals_popup .col_txt{ font-size: calc( var(--fontSize_unit) * 1.5); width: 100%; max-height: 100%; overflow-y: scroll; } /* contact_template */ .contact_wrapper .contact_popup{ animation: anim_contact_popup .6s cubic-bezier(.17,.67,.32,.96) .1s 1 normal forwards; overflow: hidden; opacity: 0; display: flex; width: calc( var(--grid_unit) * 16 ); height: calc( var(--grid_unit) * 9 ); background: white; border-radius: 3px; box-shadow: 0px -1px 14px -3px rgba(0,0,0,0.3); } .contact_wrapper .txt1{ font-family: jaf-lapture, serif; } .contact_wrapper .txt2{ margin: 40px 0; } .contact_wrapper a{ text-decoration: underline; } .contact_wrapper.actif{ display: flex; background: rgba(255,255,255,0.9); } .contact_wrapper .contact_popup .illus{ width: 40%; height: 100%; } .contact_wrapper .contact_popup .illus img{ width: 100%; height: 100%; object-fit: cover; } .contact_wrapper .contact_popup .col_txt{ width: 60%; height: 100%; padding: var(--grid_unit); display: flex; flex-direction: column; justify-content: center; } .contact_wrapper .contact_popup .mailto{ text-decoration: underline; } /* default_template */ .default_template p{ margin: 1em 0 0 0; } .default_template .flex_cols{ display: flex; } .default_template .flex_cols .left{ width: 30% } .default_template .flex_cols .right{ padding: var(--grid_unit) 0; width: 70% } .default_template .flex_cols .right h2{ margin: 1em 0; text-transform: uppercase; } .default_template .flex_cols .right p{ margin: 3em 0 3em 0; max-width: 24em; } /* about_template */ .about_template{ margin-top: calc(var(--grid_unit) * 4); } .about_template .page_title{ position: absolute; z-index: 22; left: calc(var(--grid_unit) * 5); top: calc(var(--grid_unit) * 2 - 1em); } .about_template .savoir_faire{ margin-top: calc(var(--grid_unit) * 13); ; min-height:calc(var(--grid_unit) * 16); position: relative; } .about_template .savoir_faire .photo1{ z-index:2; position: absolute; overflow: hidden; object-fit: cover; width:calc(var(--grid_unit) * 12); height:calc(var(--grid_unit) * 18); top: calc(var(--grid_unit) * -13); left: 0; } .about_template .savoir_faire .photo1 img{ object-fit: cover; position: relative; width: 100%; height: 100%; object-fit: cover; } .about_template .savoir_faire .photo1:after{ top: 0; left: 0; background: radial-gradient( rgba(242,194,121,0.8) , rgba(242,194,121,0) ); width: 200%; height:200%; position: absolute; content: ""; transform: translate(0,0); } .about_template .savoir_faire .photo2{ z-index:3; display: none; overflow: hidden; object-fit: cover; z-index: 2; position: absolute; width:calc(var(--grid_unit) * 9); height:calc(var(--grid_unit) * 6); top:calc(var(--grid_unit) * 2); left:calc(var(--grid_unit) * 11); } .about_template .savoir_faire .photo2 img{ object-fit: cover; width: 100%; height: 100%; } .about_template .savoir_faire .text_wrapper{ z-index: 1; position: relative; width:calc(var(--grid_unit) * 11); background-color: var(--color_orange); padding-top: calc(var(--grid_unit) * 6); padding-left: calc(var(--grid_unit) * 2); padding-bottom: calc(var(--grid_unit) * 2); } .about_template .savoir_faire .text_wrapper .title{ margin-bottom: 1em; width:calc(var(--grid_unit) * 7); } .about_template .savoir_faire .text_wrapper .text{ width:calc(var(--grid_unit) * 6); } .about_template .savoir_faire.type1{ margin-top: calc(var(--grid_unit) * 14); } .about_template .savoir_faire.type1 .photo1{ background: var(--color_orange); padding-top: calc(var(--grid_unit) * 2);; width:calc(var(--grid_unit) * 22); height:calc(var(--grid_unit) * 17); top: calc(var(--grid_unit) * -14); left: calc(var(--grid_unit) * 2); } .about_template .savoir_faire.type1 .photo2{ display: block; width:calc(var(--grid_unit) * 8); top: calc(var(--grid_unit) * -1); left: calc(var(--grid_unit) * 12); } .about_template .savoir_faire.type1 .text_wrapper{ } .about_template .savoir_faire.type1 .photo1:after{ transform: translate(-50%,-50%); } .about_template .savoir_faire.type2{ margin-top: calc(var(--grid_unit) * 5); } .about_template .savoir_faire.type2 .photo1{ width:calc(var(--grid_unit) * 12); height:calc(var(--grid_unit) * 18); top: calc(var(--grid_unit) * -4); left: 0; } .about_template .savoir_faire.type2 .photo2{ display: block; top: calc(var(--grid_unit) * -2); left: calc(var(--grid_unit) * 11); } .about_template .savoir_faire.type2 .text_wrapper{ width: auto; margin-left: calc(var(--grid_unit) * 3); padding-left: calc(var(--grid_unit) * 11); } .about_template .savoir_faire.type3{ margin-top: calc(var(--grid_unit) * 15); } .about_template .savoir_faire.type3 .photo1{ width:calc(var(--grid_unit) * 20); height:calc(var(--grid_unit) * 15); top: calc(var(--grid_unit) * -10); left: calc(var(--grid_unit) * 3); } .about_template .savoir_faire.type3 .photo2{ display: block;height:calc(var(--grid_unit) * 6); top: calc(var(--grid_unit) * 2); left: calc(var(--grid_unit) * 12); } .about_template .savoir_faire.type3 .text_wrapper{ } .about_template .savoir_faire.type3 .photo1:after{ transform: translate(-50%,0); } .about_template .savoir_faire.type4{ margin-top: calc(var(--grid_unit) * 13); } .about_template .savoir_faire.type4 .photo1{ width:calc(var(--grid_unit) * 20); height:calc(var(--grid_unit) * 12); top: calc(var(--grid_unit) * -8); } .about_template .savoir_faire.type4 .photo2{ display: block; top: calc(var(--grid_unit) * -12); left: calc(var(--grid_unit) * 4); } .about_template .savoir_faire.type4 .text_wrapper{ margin-left: calc(var(--grid_unit) * 13);; } .about_template .savoir_faire.type5{ margin-top: calc(var(--grid_unit) * 13);} .about_template .savoir_faire.type5 .photo1{ width:calc(var(--grid_unit) * 21); height:calc(var(--grid_unit) * 13); left:calc(var(--grid_unit) * 3); top: calc(var(--grid_unit) * -11); } .about_template .savoir_faire.type5 .photo2{ display: block; top: calc(var(--grid_unit) * -2); left: calc(var(--grid_unit) * 12); } .about_template .savoir_faire.type5 .text_wrapper{ padding-top: calc(var(--grid_unit) * 4); } .about_template .savoir_faire.type5 .photo1:after{ transform: translate(-50%,0); } .about_template .savoir_faire.type6{ margin-top: calc(var(--grid_unit) * 8); } .about_template .savoir_faire.type6 .photo1{ width:calc(var(--grid_unit) * 12); height:calc(var(--grid_unit) * 15); left:0; top: calc(var(--grid_unit) * -6); } .about_template .savoir_faire.type6 .photo2{ display: block; top: calc(var(--grid_unit) * -3); left: calc(var(--grid_unit) * 11); } .about_template .savoir_faire.type6 .text_wrapper{ padding-top: calc(var(--grid_unit) * 5); padding-left: calc(var(--grid_unit) * 4); margin-left: calc(var(--grid_unit) * 10);; width:calc(var(--grid_unit) * 14); } .about_template .encart_labels{ z-index: 2; padding: 2em; position: absolute; width:calc(var(--grid_unit) * 8); background: white; left: calc(var(--grid_unit) * 12) ; top: calc(var(--grid_unit) * 21) ; } .about_template .encart_labels .logo{ width: calc(var(--grid_unit) * 2); margin-bottom: 2em ; } .about_template .encart_labels .text_wrapper{ margin-bottom: 4em ; } /* team_template */ .team_template .team_item{ width: calc(var(--grid_unit) * 4); height: calc(var(--grid_unit) * 6); } .team_template .name{ transform: translateY(-0.7em); } .team_template .job{ transform: translateY(-1em); } .team_template .team_content{ height: auto; } .team_template .team_item .txt_wrapper{ min-height: var(--grid_unit); background: var(--color_orange); padding-left: 10px; } .team_template .team_item .img_wrapper{ height: calc(var(--grid_unit) * 5); ; } .team_template .team_item .img_wrapper img{ height: 100%; top: 100%; object-fit: cover; } .team_template .swiper_vertical_team{ opacity: 0; transition: opacity 1s 0S; width: 80%; margin: auto; height: auto; display: block; padding-bottom: calc(var(--grid_unit) * 3.5);; overflow-y: hidden; } .team_template .swiper-wrapper{ display: flex; flex-direction: column; } .team_template .swiper_vertical_team{ overflow: hidden; width: 80%; margin: auto; height: calc( 100vh - 163px ); } .team_template .swiper_vertical_team .swiper-slide{ padding: 0 calc( var(--grid_unit) * 2); height: calc(var(--grid_unit) * 5); display: flex; } .team_template .swiper_vertical_team .swiper-slide.flexend{ } .team_template .swiper_vertical_team .swiper-slide.flexcenter{ justify-content: center; } .team_template .swiper_vertical_team .team_item_wrapper:nth-child(4n+1){ justify-content: flex-start; } .team_template .swiper_vertical_team .team_item_wrapper:nth-child(4n+2){ justify-content: center; } .team_template .swiper_vertical_team .team_item_wrapper:nth-child(4n+3){ justify-content: flex-end; } .team_template .swiper_vertical_team .team_item_wrapper:nth-child(4n+4){ justify-content: center; } .team_template .orange_gradient_wrapper{ overflow: hidden; } .team_template .orange_gradient_wrapper:after{ top: 0; left: -100%; background: radial-gradient( rgba(242,194,121,0.9) , rgba(242,194,121,0) ); width: 200%; height: 200%; position: absolute; content: ""; } .team_template .swiper-wrapper { transition-timing-function:linear!important; } .team_template .swiper_vertical_team .swiper-slide.titre{ height: calc(var(--grid_unit) * 8); display: flex; justify-content: center; align-items: center;text-align: center; } /* burger */ .burger{ display: none; } .splitedWords .ltr{ opacity: 0; } .splitedWords .ltr:nth-child(10n+1){ animation: anim_splitedWords_span .6s cubic-bezier(.17,.67,.32,.96) .1s 1 normal forwards; } .splitedWords .ltr:nth-child(10n+2){ animation: anim_splitedWords_span .6s cubic-bezier(.17,.67,.32,.96) .5s 1 normal forwards; } .splitedWords .ltr:nth-child(10n+3){ animation: anim_splitedWords_span .6s cubic-bezier(.17,.67,.32,.96) .3s 1 normal forwards; } .splitedWords .ltr:nth-child(10n+4){ animation: anim_splitedWords_span .6s cubic-bezier(.17,.67,.32,.96) .25s 1 normal forwards; } .splitedWords .ltr:nth-child(10n+5){ animation: anim_splitedWords_span .6s cubic-bezier(.17,.67,.32,.96) .5s 1 normal forwards; } .splitedWords .ltr:nth-child(10n+6){ animation: anim_splitedWords_span .6s cubic-bezier(.17,.67,.32,.96) .26s 1 normal forwards; } .splitedWords .ltr:nth-child(10n+7){ animation: anim_splitedWords_span .6s cubic-bezier(.17,.67,.32,.96) .7s 1 normal forwards; } .splitedWords .ltr:nth-child(10n+8){ animation: anim_splitedWords_span .6s cubic-bezier(.17,.67,.32,.96) .38s 1 normal forwards; } .splitedWords .ltr:nth-child(10n+9){ animation: anim_splitedWords_span .6s cubic-bezier(.17,.67,.32,.96) .59s 1 normal forwards; } .splitedWords .ltr:nth-child(10n+10){ animation: anim_splitedWords_span .6s cubic-bezier(.17,.67,.32,.96) .41s 1 normal forwards; } /* /^^^^^^^ /^^ /^^ /^^ /^^ /^^ /^^^^ /^ /^^ /^^^^ /^^ /^^ /^ /^^ /^ /^^ /^^ /^ /^^ /^^ /^^ /^^ /^^ /^^ /^^^^^ /^^ /^^^ /^ /^^ /^^^ /^^ /^^ /^^ /^^ /^ /^^ /^^ /^^ /^^ /^/^^ /^^ /^^ /^^^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ */ @media ( max-width: 800px){ :root { /* --mozaic_unit: 48vw; */ /* --grid_unit: calc(100vw / 12); */ --mozaic_unit: 32vw; --fontSize_unit: 1.5vw; } .fontSize90 { font-size: calc( var(--fontSize_unit) * 6); } .fontSize18 { font-size: calc( var(--fontSize_unit) * 2.4); } .fit_padding{ padding-left: calc(var(--grid_unit) * 1); padding-right: calc(var(--grid_unit) * 1); } .project_template .intro .col_left{ width: 100%; } .project_template .intro .col_right{ width: 100%; } .footer{ height: calc( var(--grid_unit) * 3 ); } .project_template .intro { display: flex; padding-top: calc(var(--grid_unit) * 2); flex-direction: column-reverse; } .main_container{ margin-top: 90px; min-height: calc(100vh - 130px); } .main_nav{ align-items: flex-start; z-index: 88; position: fixed; display: flex; top: 0; left: 110vw; width: 100vw; height: 100vh; background: var(--color_orange); flex-direction: column; justify-content: center; } .header:before{ position: fixed; background-color: var(--color_bg); height: 90px; width: 100%; top: 0; left: 0; content: ""; z-index: 10; } .shownav .header:before{ display: none; } .shownav .main_nav{ left: 0; } .header .main_logo{ z-index: 91; top: 20px; left: 50%; position: fixed; width: 36vw; transform: translateX(-50%); } .header a.link{ transition: all 0s; letter-spacing: .1em; opacity: 0; height: 1.3em; transform: translateX(.5em); font-size: calc( var(--fontSize_unit) * 4); margin: 1.25em var(--grid_unit); } .shownav .header a.link:nth-child(1){ transition: all .6s cubic-bezier(0.17, 0.67, 0.46, 1.05) .3s ; } .shownav .header a.link:nth-child(2){ transition: all .6s cubic-bezier(0.17, 0.67, 0.46, 1.05) .4s; } .shownav .header a.link:nth-child(3){ transition: all .6s cubic-bezier(0.17, 0.67, 0.46, 1.05) .5s; } .shownav .header a.link:nth-child(4){ transition: all .6s cubic-bezier(0.17, 0.67, 0.46, 1.05) .6s; } .shownav .header a.link:nth-child(5){ transition: all .6s cubic-bezier(0.17, 0.67, 0.46, 1.05) .7s; } .footer .footer_flex{ } .footer .footer_flex .col{ padding: 0.5em 0; } .shownav .header a.link{ transform: translateX(0); opacity: 1; letter-spacing: 0; } .header svg{ width: 32px; height: 32px; } .header a path{ fill: var(--color_bg); } .header .col.left{ position: absolute; top: 0; left: 0; } .burger{ display: block; z-index: 91; position: fixed; top:30px; left: calc( 100vw - 60px ); width: 30px; height: 30px; } .burger .line{ position: absolute; transform-origin:50% 50%; left: 50%; top:50%; transition:all .3s; content:''; width:30px; height: 2px; background: var(--color_txt); transition: all .3s; } .burger:hover{ cursor: pointer; } .burger .line1{ transform-origin: right; transform : translateX(-50%) translateY(-7px) rotate(0deg); } .burger .line2{ transform-origin: right; transform : translateX(-50%) translateY(7px) rotate(0deg); } .shownav .burger .line1{ width:26px; background: var(--color_bg);; transform : translateX(-70%) translateY(0%) rotate(45deg); transition:all .3s; } .shownav .burger .line2{ width:26px; background: var(--color_bg);; transform : translateX(-70%) translateY(0%) rotate(-45deg); transition:all .3s .1s; } .shownav .header .col.left{ color: var(--color_bg); z-index: 111; position: fixed; top: var(--grid_unit); left: var(--grid_unit); } .shownav .header .main_logo{ color: var(--color_bg); } .contact_template .contact_wrapper{ top: var(--grid_unit); left: var(--grid_unit); transform:none } .shownav .header .col.left{ color: var(--color_bg);} /* about */ .about_template .flex_cols{ display: block; } .about_template .flex_cols .left{ width: 100%; } .about_template .flex_cols .right{ width: 100%; } .projects_template .projects_nav{ margin: 0; } .projects_template .projects_cloud{ width: 100%; } .projects_cloud .grid-item{ padding: .5vw; } .projects_template .projects_cloud .grid-item.cover_sizer_m { width: calc( var(--mozaic_unit) ); height: calc( var(--mozaic_unit)); } .project_template .builder_punchline p{ padding: 0; } .about_template .flex_cols .left{ padding-left: 0; } .about_template .flex_cols .right{ padding-left: 0; } .projects_template .projects_nav button{ margin: 0.2em .5em; } .project_template .projects_cloud{ width: 100%; } .project_template .builder_images{ width: 100%; margin: 0; } .project_template .intro .cols { flex-direction: column; } .project_template .intro .col { width: 100%; } .project_pad .text_wrapper:after{ width: calc( var(--mozaic_unit) * 5 ); height: calc( var(--mozaic_unit) * 5 ); transition: all .2s; transform: translateY( -50% ) translateX( -50% ) ; top: 0; left: 0; background: radial-gradient( rgba(242,194,121,1) 0% , rgba(242,194,121,0) 70% ); position: absolute; content: ""; } .default_template h1, .default_template h2, .default_template h3, .default_template h4{ font-weight: 800; font-size: 1.6em; } .project_template .main_thumb{ width: 90%; } .project_template .main_thumb_bg { width: 100%; } .project_template .swiper-slide { height: 70vw ; } .bt_right_slider_medium{ width: 40px; height: 40px; right: 0; } .bt_left_slider_medium{ width: 40px; height: 40px; left: 0; } .about_template .savoir_faire{ margin-top: 0!important ; min-height:auto; position: relative; } .about_template .savoir_faire .photo1{ top: 0!important; left: 0!important; width:100%!important; margin: 20px 0!important; padding: 0!important; position: relative; height:calc(var(--grid_unit) * 18)!important; } .about_template .savoir_faire .photo2{ top: 0!important; left: 0!important; width:100%!important; margin: 0px 0!important; padding: 0!important; position: relative; width: calc(var(--grid_unit) * 24); height:calc(var(--grid_unit) * 18)!important; top:calc(var(--grid_unit) * 2); left:calc(var(--grid_unit) * 11); } .about_template .savoir_faire .text_wrapper{ width:100%!important; margin: 0px 0!important; padding: calc(var(--grid_unit) * 2)!important; } .about_template .savoir_faire .text_wrapper .title{ width:100%!important; } .about_template .savoir_faire .text_wrapper .text{ width:100%!important; } .about_template .savoir_faire.type2 .text_wrapper { background: white; } .about_template .savoir_faire.type4 .text_wrapper { background: white; } .about_template .savoir_faire.type6 .text_wrapper { background: white; } .about_template .savoir_faire.type1{ margin-top: 90px!important; } .about_template .savoir_faire.type1 .photo1{ padding-top: 40px!important; } .about_template .page_title{ left: 10vw; top: 100px; } .team_template .team_item{ width: calc(var(--grid_unit) * 8); height: calc(var(--grid_unit) * 12); } .team_template .team_item .img_wrapper { height: calc(var(--grid_unit) * 10); } .team_template .swiper_vertical_team .swiper-slide{ height: calc(var(--grid_unit) * 18); padding:0 } .project_pad_home{ width: calc(var(--grid_unit) * 16); height: calc(var(--grid_unit) * 24); } .project_pad .text_wrapper:after{ width: calc( var(--mozaic_unit) * 3 ); height: calc( var(--mozaic_unit) * 3 ); } .project_pad.cover_sizer_paysage .text_wrapper:after{ width: calc( var(--mozaic_unit) * 5 ); height: calc( var(--mozaic_unit) * 5 ); } .project_pad.cover_sizer_xxl .text_wrapper:after{ width: calc( var(--mozaic_unit) * 6 ); height: calc( var(--mozaic_unit) * 6 ); } /* .project_pad_home .text_wrapper:after{ width: calc( var(--mozaic_unit) * 8 ); height: calc( var(--mozaic_unit) * 8 ); } */ .contact_wrapper .contact_popup{ width: calc( var(--grid_unit) * 20 ); height: calc( var(--grid_unit) * 24 ); } .project_pad:hover .text_wrapper .text_content{ opacity: 0; } .project_pad:hover .text_wrapper{ transform: translateY(calc( var(--fontSize_unit) * -2.5)); } .project_pad .text_wrapper:before{ display: none; } /* home */ .home_template .swiper_vertical_home .swiper-slide{ height: 100vh; } .home_template .swiper_vertical_home{ height: calc( 100vh - 130px ); top: 0px; } .project_pad_home{ border-radius: 1vw; width: calc( var(--mozaic_unit) * 2 )!important; height:calc( var(--mozaic_unit) * 3 )!important; } .project_pad_home.cover_sizer_paysage{ width: calc( var(--mozaic_unit) * 2 )!important; } .project_pad_home .text_wrapper:after{ width: calc( var(--mozaic_unit) * 3 )!important; height: calc( var(--mozaic_unit) * 3 ); } .project_pad_home.cover_sizer_xxl .text_wrapper:after{ width: calc( var(--mozaic_unit) * 6 )!important; height: calc( var(--mozaic_unit) * 6 ); } .project_pad_home.cover_sizer_paysage .text_wrapper:after{ width: calc( var(--mozaic_unit) * 6 )!important; height: calc( var(--mozaic_unit) * 6 ); } .project_pad_home .text_wrapper:before{ display: block!important; } } @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); } }