/* CSS by Manu LECHAT https://e-lechat.com */ /* {__ {__ {_ {__ {_{_ {_ {__ {__ {__ {_{_ {_ {____ {__ {__ {__ {__ {__ {__ {__ {__ {__ {__ {__ {__ {__ {___ {__ {__ {__ {__ {__ {__ {__ {__ {__ {___ {__ {__ {__ {__ */ @font-face { font-family: "Lora"; src: url("../fonts/Lora/static/Lora-Regular.ttf") format('truetype') } @font-face { font-family: "Inter-Medium"; src: url("../fonts/Inter/static/Inter-Medium.ttf") format('truetype') } @font-face { font-family: "Inter-SemiBold"; src: url("../fonts/Inter/static/Inter-SemiBold.ttf") format('truetype') } /* {__ {__ {__ {_ {___ {____ {__ {__ {__ {__ {__ {__ {__ {__ {__ {__ {__ {___ {_{__ {__ {__ {__ {__ {__ {__ {___ {___ {__ {__ */ :root { --grid_unit : 88px; --grid_gap : 20px; --fontSize_unit: 10px; --color_txt : #161818; --body_bg: #ffffff; --section_bg2: #F2F4F7; --section_bg3: #161818; --color_alt: rgba(0,255,70,0.5); } /* /^^ /^^ /^ /^^ /^/^ /^ /^^ /^^ /^^ /^/^ /^ /^^^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^^ /^^ /^^ /^^ /^^ */ .txt_11 { font-size:11px; } .txt_13 { font-size:13px; } .txt_16 { font-size:16px; } .txt_18 { font-size:18px; } .txt_21 { font-size:21px; } .txt_26 { font-size:26px; } .txt_32 { font-size:32px; } .txt_43 { font-size:43px; } .txt_54 { font-size:54px; } .txt_58 { font-size:58px; line-height: 1em; letter-spacing: -0.03em; } .txt_65 { font-size:65px; line-height: 1em; letter-spacing: -0.03em; } .txt_72 { font-size:72px; line-height: 1em; } .txt_82 { font-family: "Inter-SemiBold";font-size:82px; line-height: 1em; letter-spacing: -0.03em; } .txt_97 { font-size:97px; line-height: .8em; letter-spacing: -0.03em; } .txt_102 { padding-left: .3em; font-size:102px; line-height: 1em; letter-spacing: -0.03em; } .txt_167 { font-size:167px; } .serif{ font-family: "Lora"; } .italic{ font-family: "Lora"; letter-spacing: -0.03em; font-style: italic; } .bold{ font-family: "Inter-SemiBold"; } .regular{ font-family: "Inter-Medium"; } h1,h2,h3,h4,h5,h6{ font-family: "Inter-SemiBold"; letter-spacing: -0.03em; } .topbar{ display: none; position: absolute; top: 0; left: 0; z-index:10 ; box-shadow: 0px -3.99px 33.247px 0px rgba(0, 0, 0, 0.25); width: 100%; background: var(--body_bg); } .topbar .main_container{ align-items: center; padding-top: 0; padding-bottom: 0; display: flex; justify-content: space-between; } /* .bt_contact{ font-size: 13px; font-family: "Inter-SemiBold";; box-shadow: 0px -3.99px 33.247px 0px rgba(0, 0, 0, 0.25); border: 1px solid var(--Text-Colo-2, #fff); display: inline-flex; padding: 12px 30px; justify-content: center; align-items: center; gap: 10px; } */ .bt_rounded{ margin-top: 20px; width: fit-content; font-size: 13px; font-family: "Inter-SemiBold"; border-radius: 30px; border: 1px solid var(--color_txt); display: inline-flex; padding: 12px 30px; justify-content: center; align-items: center; gap: 10px; } .unopacity{ opacity: 0.5; } .center{ text-align: center; margin: auto; } .quote{ max-width: 20ch; margin: auto; line-height: 1.2em; } .underline{ text-decoration: underline; } .maj{ text-transform: uppercase; } .bt_visite_site{ display: flex; gap: 8px; transition: all .3s; align-items: center; padding-bottom: 5px; width: fit-content; border-bottom: 1px solid var(--color_txt); font-family: "Manrope-Bold"; letter-spacing: -0.03em; line-height: 1.2em; } .bt_visite_site:hover{ gap: 12px; margin-left: 8px; } figcaption{ text-align: center; padding: 1.5em; opacity: 0.6; font-size: 13px; } .grey{ color: rgba(0,0,0,0.4); } .bg_colored{ background: var(--color_alt); padding: 2px; } /* /^^^^^^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^^^ /^^ /^/^ /^ /^ /^^ /^ /^^ /^^ /^ /^^ /^^ /^^ /^^ /^^^^^ /^^ /^^^ /^^^^^ /^^ /^^ /^^ /^^ /^ /^^ /^ /^^ /^^ /^^ /^^^^ /^^ /^^ /^^^^ /^^ */ ::selection { background-color: rgba(0,255,70,0.5); opacity: 0.1; transition: all .3s; ; text-shadow: none; } * { box-sizing: border-box; outline: none; } html{ width:100%; margin: 0; padding: 0; background: var(--color_bg); top:0; left: 0;-webkit-font-smoothing: antialiased; box-sizing: border-box; position: relative; text-rendering: optimizeLegibility; } body{ background-image: url('../images/bg.jpg'); background-size: 300px; width:100%; margin: 0; padding: 0; color: var(--color_txt); font-family: "Inter-Medium"; } div{ position: relative; display: block; } header, section, main, footer{ width: 100%; padding: 0;} img{ max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; object-fit: contain; } ul{ margin: 0; display: block; text-align: left; padding: 0;} li{ margin: 0; list-style: none; padding: 0px; } h1,h2,h3,h4,h5,h6{ width: fit-content; display: block; margin: 0 ; clear: both; break-after: always; font-size: 1em; line-height: 1.2em; font-weight: normal } span{ display: block; } a{ display: block; position: relative; color: var(--color_txt); text-align: left; text-decoration: none; } a:hover{ cursor: pointer; text-decoration: none; } p{ letter-spacing: -0.03em; width: fit-content; clear: both; display: block; padding: 0; margin: 0; font-weight: normal; position: relative; line-height: 1.5em; font-style: normal; } p a{ text-decoration: underline; display: inline; color: var(--color_txt_alt); } 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%; } address { display: block; font-style: normal; } button{ background: none; border: none; } figure{ margin: 0; padding: 0; } .text_alt *{ font-family: Lora; font-weight: normal; } .block-type-video{ width: 100%; height: auto; } .block-type-video iframe{ width: 100%; height: 100%; aspect-ratio: 16/9; } .block-type-video .copyright{ font-size: 12px; width: 100%; display: flex; justify-content: flex-start; opacity: 0.7; position: relative; padding: 20px; color: black; } /* /^^ /^^ /^^ /^^ /^/^ /^ /^^ /^^ /^^ /^^^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^^ /^^ /^^ */ .shadow{ box-shadow: 0px -6px 30px 0px rgba(0, 0, 0, 0.15); } .hidden{ display: none; } .img_shadow figure{ box-shadow: 0px -6px 30px 0px rgba(0, 0, 0, 0.15); } .bt_rounded_black{ background: #000; padding: 1em; width: fit-content; border-radius: 1rem; color: #FFF!important; } .bt_rounded_white{ border: 2px solid black; padding: 1em; border-radius: 1rem; } /* /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^/^ /^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^^ /^^ /^^^ /^^ /^^ /^^/^^ /^^ /^^ */ .grid_line{ width:1px; height: 100vh; background-color: #000; opacity: 0; z-index: 1; position: fixed; top: 0; } .seo_tags{ height: 0px; overflow: hidden; } .main_container{/* box-shadow: 0px 0px 18px 0px rgba(0, 0, 0, 0.05); */ background:var(--body_bg); width: calc( var(--grid_unit) * 14 + var(--grid_gap) * 12 ); margin: 0 auto; max-width: 100%; padding: 120px calc( var(--grid_unit) + var(--grid_gap) ) ; } .main_container_nopadg{ width: calc( var(--grid_unit) * 14 + var(--grid_gap) * 13 ); margin: auto; max-width: 100%; padding: 0px calc( var(--grid_unit) * 1 + var(--grid_gap) * 1 ) ; } .grid{ background-color: antiquewhite; min-height: 80px; } .grid_unit3{ width: calc( var(--grid_unit) * 3 + var(--grid_gap) * 2 ); } .grid_unit4{ width: calc( var(--grid_unit) * 4 + var(--grid_gap) * 3 ); } .grid_unit6{ width: calc( var(--grid_unit) * 6 + var(--grid_gap) * 5 ); } .grid_unit9{ width: calc( var(--grid_unit) * 9 + var(--grid_gap) * 8 ); } .flex_container{ display: flex; gap: var(--grid_gap) ; } .flex_container .col{ min-height: 40px; width: 100%; } .section_block .main_container{ } .section_block h1{ font-size:67px; line-height: 1em; padding-right: calc( var(--grid_unit) * 1 + var(--grid_gap) * 1 ); } .section_block h2{ font-size:43px; } .section_block h3, .section_block h4, .section_block h5, .section_block h6{ font-size:26px; } .section_block.paddingb_0 .main_container{ padding-bottom: 0; } .padding_r3{ padding-right: calc( var(--grid_unit) * 3 + var(--grid_gap) * 3 ); } .padding_r2{ padding-right: calc( var(--grid_unit) * 2 + var(--grid_gap) * 2 ); } .padding_r1{ padding-right: calc( var(--grid_unit) * 1 + var(--grid_gap) * 1 ); } .padding_l2{ padding-left: calc( var(--grid_unit) * 2 + var(--grid_gap) * 2 ); } .padding_l3{ padding-left: calc( var(--grid_unit) * 3 + var(--grid_gap) * 3 ); } .padding_l1_r1{ padding-left: calc( var(--grid_unit) + var(--grid_gap) ); padding-right: calc( var(--grid_unit) + var(--grid_gap) ); } .bt_home{ gap: 1rem; display: flex; flex-direction: column; position: fixed; top: 0; right: 0; background: var(--body_bg); padding: 1rem; } .logo{ background-color: rgba(0,255,70,0); text-transform: uppercase; font-family: "Inter-SemiBold"; letter-spacing: 0; } /* loader */ #loader{ display: none; pointer-events: none; } .loading #loader { z-index: 99; display: flex; gap: 30px; transition: all .5s 0s; position: fixed; background-color: var(--body_bg); top: 0; left: 0; width: 100vw; height: 100vh; justify-content: center; align-items: center; flex-direction: column; } .loading #loader .nekosan_wrapper{ position: relative; width: 80px; font-size: 65px; display: flex; justify-content: center; align-items: center; } .loading #loader .nekosan_wrapper:before{ content: ''; z-index: 22; display: block; position: absolute; top: 0; left: 0; transform: translate(-50%,-50%); width: 2rem; height: 2rem; border-radius: 3rem; background-color: var(--color_alt); } .loading #loader .nekosan_wrapper svg{ width: 60%; height: 60%; } .loading #loader .loader_item{ display: flex; flex-direction: column; gap: 30px; justify-content: center; align-items: center; } .loading #loader .loadBar{ width: 120px; height: 2px; background: rgb(216, 216, 216); } .loading #loader .loadBar:after{ animation :loadBar 1.2s cubic-bezier(0.2, 0, 0.02, 0.93) .1s 1 normal forwards; background: var(--color_txt); content: ""; width: 0; height: 100%; position: absolute; left: 0; } .loading #loader .circle{ transform: scale(2); filter: blur(1.3px); width: 2rem; height: 2rem; border-radius: 2rem; background-color: var(--color_alt); position: absolute; top: 0; right: 0%; z-index: 2; mix-blend-mode: multiply; } /* home_template */ .home_template .hero{ padding-bottom:0; display: flex; justify-content: space-between; gap: 60px; } .home_template .hero .bt_contact{ display: none; transform: rotate(90deg); background-color: var(--body_bg); z-index: 11; position: fixed; top: 50vh; right: var(--grid_gap); } .home_template .hero .logo{ width: fit-content; z-index: 12; } /* .home_template .hero .logo:after{ content: ''; display: block; z-index: 11; position: absolute; top: 0; left: 0; transform: translate(-50%,-50%); width: 1rem; height: 1rem; border-radius: 3rem; background-color: var(--color_alt); } */ .home_template .hero_img{ object-fit:cover; aspect-ratio: 3/5; } .home_template .col_projet{ display: flex; flex-direction: column; gap: 220px; } .home_template .project_item{ display: flex; flex-direction: column; gap: 1rem; } .home_template .project_item h2{ width: 50%; } .home_template .col1{ padding-top: 420px; } .home_template .hero .hero_col1{ width: calc( var(--grid_unit) * 6 + var(--grid_gap) * 5 ); display: flex; flex-direction: column; gap: 60px; } .home_template .hero .hero_col2{ display: flex; justify-content: end; flex-direction: column; gap: 40px; } .home_template .intro{ margin-left: calc( var(--grid_unit) * 1 + var(--grid_gap) * 1 ); width: calc( var(--grid_unit) * 4 + var(--grid_gap) * 3 ); display: flex; flex-direction: column; gap:20px; } .home_template .hero .icon{ position: absolute; top: var(--grid_unit); left: 0; width: var(--grid_unit); opacity: 0.8; transform: translateX(-80%); } .home_template .grid_unit3{ display: flex; flex-direction: column; gap: 80px; } .home_template article{ display: flex; flex-direction: column; gap: 20px; } .home_template .workflow{ vertical-align: bottom; } .home_template .workflow .heading{ padding-bottom: 0.5em; } .home_template .workflow .col1{ padding-top: 0px; } .home_template .workflow .col4{ justify-content: flex-end; } .home_template .workflow .icon{ margin: var(--grid_gap) ; width: var(--grid_unit) ;} .home_template .workflow .tags{ width: calc( var(--grid_unit) * 4 + var(--grid_gap) * 3 ); max-width: 100%; } .home_template .project_items{ display: flex; flex-wrap: wrap; justify-content: center; gap:var(--grid_unit) } .home_template .project_item{ display: flex; flex-direction: column; gap: 1rem; transition: all .1s; width: calc( var(--grid_unit) * 5 + var(--grid_gap) * 5 );; margin-bottom: var(--grid_gap) ; } .home_template .project_item:nth-child(2n+2){ width: calc( var(--grid_unit) * 4 + var(--grid_gap) * 3 ); margin-top: 320px; } .home_template .project_item img{ border: 20px solid white; transition: all .13s ease-in-out; } .home_template .project_item:hover img{ transition: all .3s ease-out } .home_template .project_item:hover img.shadow{ box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.25); } .tag{ width: fit-content; border-radius: 1rem; background-color: var(--body_bg); border:2px solid var(--color_txt); font-family: "Inter-SemiBold"; ; padding: 3px 8px ; font-size: 12px; letter-spacing: 0em; color: var(--color_txt); } a.tag:hover{ background: var(--color_txt); color: white; } .tag_green{padding: 2px 5px ; border: none; border-radius: 0; background-color: var(--color_alt); font-family: 'Inter-SemiBold'; color: #000; } /* .tag{ border: none; border-radius: 0; background-color: var(--color_alt); font-family: 'Inter-SemiBold'; color: #000; } */ .tags{ display: flex; gap: 5px; flex-wrap: wrap; padding-right:var(--grid_unit) ; } .contact_template .heading{ display: flex; gap: 20px; flex-direction: column; } .contact_template .contact_infos{ margin: 2rem 0; } .contact_template .contact_infos .list_link_wrapper{ margin: 2rem 0; } .contact_template .phone_mail{ margin: 2rem 0; display: flex; flex-direction: column; } .contact_template .contact_item{ transition: all .3s; align-items: center; margin: 1rem 0; display: flex; flex-direction: row; gap: 1rem } .contact_template .contact_item .icon{ width:2rem } .contact_template .col_form{ display: flex; gap: 20px; flex-direction: column; } .illus_bg{ width: 40rem; height: 40rem; border: 5px solid black; opacity: 0.06; border-radius: 100rem; position: absolute; top:15vh; left: 66vw; transform: translateX(-50%); } .contact_item:hover{ color: var(--color_txt); } .honeypot { position: absolute; left: -9999px; } .application-form textarea, .application-form input{ box-shadow: rgb(200, 208, 231) -2px 3.2px 8px 0px inset, rgb(255, 255, 255) 2px -3.2px 8px 0px inset;; width: 100%; margin: 1rem 0; padding: 0.5rem; border: 2px solid var(--color_txt); border-radius: 4px; background: var(--section_bg2); padding: 1rem; border: none; } .contact_template .alert{ font-size: 14px; color: var(--color_txt_alt); margin:1rem 0; padding: 1rem; border: 2px solid var(--site-theme-color); border-radius: 1rem; } .contact_template .application-form label{ font-size: 1rem; opacity: 0.4; } .application-form input.button{ background-color: var(--site-theme-color); width: fit-content; box-shadow: none; float: right; margin-right: 2rem; } .application-form .nobg{ background: none; box-shadow: none; } /* project_template */ .gap_60{ display: flex; flex-direction: column; gap:60px } .gap_40{ display: flex; flex-direction: column; gap:40px } .project_template .section_intro h1{ padding-right: 5ch; } .project_template .section_intro .paragraphe1{ margin-top: 40px; } .project_template .section_intro .paragraphe2{ margin-top: 40px; margin-left: calc( var(--grid_unit) * 1 + var(--grid_gap) * 1 ); ; } .project_template .section_intro img{ border: 20px solid white; aspect-ratio: 4 / 3; object-fit: cover; } .project_template .section_intro .icon{ z-index: 11; position: absolute; top: var(--grid_unit); left: 50%; width: var(--grid_unit); transform: translateX(-80%); } .project_template .section_budget{ display: flex; flex-direction: column; gap: 40px; } .project_template .section_budget .paragraphes{ justify-content: center; margin: auto; margin-top: 60px; gap: var(--grid_unit); } .project_template .section_budget .paragraphe{ width: calc( var(--grid_unit) * 6 + var(--grid_gap) * 5 ); padding: 60px; text-align: center; background: #FFF; box-shadow: 0px -3.99px 33.247px 0px rgba(0, 0, 0, 0.25); display: flex; padding: 60px; flex-direction: column; align-items: center; gap: 10px; justify-content: space-between; } .project_template .section_budget .paragraphe h4{ font-size: 26px; text-align: center; margin: 0 auto; letter-spacing: -0.03em; line-height:1.2em; } .project_template .section_budget .paragraphe h5{ font-size: 26px; text-align: center; margin: 0 auto; letter-spacing: -0.03em; line-height: 1.2em; } .project_template .section_budget .paragraphe h6{ font-size: 43px; text-align: center; margin: 0 auto; letter-spacing: -0.03em; line-height: .9em; } .project_template .section_budget .paragraphe p{ font-size: 13px; margin: 40px 0; } .project_template .section_budget .me_contacter{ margin-top: 60px; } .project_template .section_3_steps .heading{ display: flex; justify-content: flex-start; align-items: center; } .project_template .section_3_steps .steps{ width: 100%; display: flex; padding-top: 60px; gap: 0; } .project_template .section_3_steps .step{ width: 100%; display: flex; flex-direction: column; gap: 20px; } .project_template .section_3_steps .step p{ padding-right: 60px; } .project_template .section_3_steps .num{ color: var(--body_bg); text-shadow: -1px -1px 1px #000, 1px -1px 1px #000, -1px 1px 1px #000, 1px 1px 1px #000; font-size: 86px; font-style: normal; font-weight: 700; line-height: 100%; letter-spacing: -1.72px; } .project_template .section_3_steps .ligne:before{ content: ""; background: var(--color_txt); width: 1rem; height: 1rem; position: absolute; left: 0; transform: translateY(-50%); border-radius: 1rem; } .project_template .section_3_steps .ligne{ background: none; border-bottom: 2px solid var(--color_txt); } .project_template .section_faq .heading{ display: flex; flex-direction: column; gap: 20px; width: calc( var(--grid_unit) * 6 + var(--grid_gap) * 5 ); padding-right: calc( var(--grid_unit) * 2 + var(--grid_gap) * 2 ); } .project_template .section_faq .heading svg{ margin-top: 20px; } .project_template .section_faq input { position: absolute; opacity: 0; z-index: -1; } .project_template .section_faq .tab { overflow: hidden;width: 100%; } .project_template .section_faq .faq_question{ width: calc( var(--grid_unit) * 8 + var(--grid_gap) * 7 ); line-height: 1.2em; } .project_template .section_faq .tab-label { padding: 1rem 0; align-items: center; display: flex; justify-content: space-between; cursor: pointer; } .project_template .section_faq .tab-label::after { border-radius: 32px; transition: all .3s ease-in-out; position: absolute; right: var(--grid_gap); align-items: center; content: "+"; font-size: 21px; width: 32px; height: 32px; display: flex; justify-content: center; border: 1px solid var(--color_txt); } .project_template .section_faq .tab-content { max-height: 0; padding: 0; transition: all .5s cubic-bezier(0.05, 0.52, 0.2, 0.99); } .project_template .section_faq .tab-close { display: flex; justify-content: flex-end; padding: 1em ; cursor: pointer; } .project_template .section_faq input:checked + .tab-label::after { transform: rotate(45deg); } .project_template .section_faq input:checked ~ .tab-content { max-height: 100vh; padding: 0 0 2em 0; } .project_template .section_faq .faq_items{ display: flex; flex-direction: column; gap: var(--grid_gap); width: calc( var(--grid_unit) * 6 + var(--grid_gap) * 5 ); } .project_template .section_faq .faq_item{ padding-left: var(--grid_gap); padding-right: var(--grid_unit); border-radius: 1rem; background-color: var(--section_bg2); } .project_template .section_2_colones .img_shadow figure{ box-shadow: 0px -6px 30px 0px rgba(0, 0, 0, 0.15); } .section_2_colones .col{ width: calc( var(--grid_unit) * 6 + var(--grid_gap) * 5 ); display: flex; flex-direction: column; gap: 20px; } .section_block.bg_grey .main_container{ background-color: var(--section_bg2); } .section_bg2{ background:var(--section_bg2); } .block_citation{ background:var(--section_bg2); display: flex; padding-top: 120px; padding-bottom: 120px; justify-content: center; flex-direction: column; gap: 40px; } .block_image_seule .panoramique{ width: 100%; height: 420px; overflow: hidden; object-fit: cover; } /* realisations_template */ .realisations_template .mosaique_workitems{ justify-content: flex-start; display: flex; flex-wrap: wrap; gap: var(--grid_gap) ; } .realisations_template .section_intro h1{ padding-right: 5ch; } .realisations_template .section_intro .paragraphe2{ margin-top: 40px; margin-left: calc( var(--grid_unit) * 1 + var(--grid_gap) * 1 ); ; } .realisations_template .section_intro img{ transition: all .2s ease-in-out; border: 20px solid white; aspect-ratio: 4 / 3; object-fit: cover; } .realisations_template .section_intro .icon{ z-index: 11; position: absolute; top: var(--grid_unit); left: 50%; width: var(--grid_unit); transform: translateX(-80%); } .realisations_template .realisations_items{ display: flex; margin-top: 60px; margin-bottom: 60px; gap: var(--grid_gap); flex-wrap: wrap; } .realisations_template .realisations_items_intro{ border-top: 2px solid black; padding-top: var(--grid_gap); } .realisations_template .intro{ max-width: 50ch; margin-top: var(--grid_gap); } .realisation_thumb{ width: calc( var(--grid_unit) * 3 + var(--grid_gap) * 1 ); margin:0; display: flex; flex-direction: column; gap: 1rem; padding-bottom: 2rem; font-size: 13px; } .realisation_thumb .cover_wraper { height: calc( var(--grid_unit) * 3 ); width: 100%; } .realisation_thumb .cover_wraper img{ border-radius: 8px; box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.25); aspect-ratio: 1; object-fit: cover; width: 100%; height: 100%; } .realisation_thumb .tags{ padding-right: 0; z-index: 11; display: flex; gap: 8px; } .realisation_thumb .tag{ border: none; border-radius: 0; background-color: var(--color_alt); font-family: 'Inter-SemiBold'; color: #000; } .realisation_thumb .realisation_thumb_txt{ display: flex; flex-direction: column; gap: 10px; } .section_home_realisations{ padding: 120px calc( var(--grid_unit) ) } .section_home_realisations .intro_thumbs{ display: flex; gap: var(--grid_gap); flex-direction: column; padding-left: var(--grid_gap); padding-bottom: calc( var(--grid_unit)); } .section_home_realisations .thumbs{ display: flex; gap: var(--grid_gap); flex-wrap: wrap; justify-content: center; } .section_home_realisations .intro_thumbs .tags{ max-width: 45%; } .realisation_thumb_home{ width: calc( var(--grid_unit) * 1 + var(--grid_gap) * 1 ); margin:0; display: flex; flex-direction: column; gap: 1rem; font-size: 13px; } .realisation_thumb_home .cover_wraper { height: var(--grid_unit) * 1; width: 100%; } .realisation_thumb_home .cover_wraper img{ border-radius: 8px; box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.25); aspect-ratio: 1; object-fit: cover; width: 100%; height: 100%; } /* realisation_template */ .realisation_template .prevnext{ top: 0; right: 0; display: flex; padding: 1rem; justify-content: flex-end; } .realisation_template .prevnext a{ padding: 1rem; } .realisation_template .prevnext svg{ width: 8px; height: auto; } .realisation_template .section_hero h1{ padding-right: 2ch; } .realisation_template .section_hero .video_container{ display: flex; justify-content: center; border: 20px solid white; max-width: 100%; height: auto; } .realisation_template .section_hero video{ max-height: 600px; max-width: 100%; } .realisation_template .section_hero .cover_wrapper{ border: 20px solid white; } .realisation_template .section_hero .cover{ width: 100%; } .realisation_template .section_intro{ padding-top: 60px; display: flex; gap: var(--grid_gap); } .realisation_template .section_intro .col{ display: flex; gap: 10px; flex-direction: column; } .realisation_template .section_intro .col ul{ display: flex; gap: 10px; flex-direction: column; } .realisation_template .section_intro .col .slack_list{ flex-direction: row; flex-wrap: wrap; } .realisation_template .section_intro .col{ padding-right: 60px; } .realisation_template .section_intro h4{ margin-top: 1rem; } .realisation_template .section_intro .link_visit{ text-decoration: underline; display: flex; gap: 8px; } .realisation_template .section_intro .link_visit svg{ } .realisation_template .next_project{ border-top: 2px solid black; padding-top: 60px; } .realisation_template .section_views{ padding-top: 120px; display: flex; flex-wrap: wrap; gap: var(--grid_gap); } .realisation_template .section_views.cols_4 .view_wrapper{ width: calc( 25% - var(--grid_gap)); } .realisation_template .section_views .view_wrapper{ align-items: center; justify-content: center; width: calc( 50% - var(--grid_gap));} .realisation_template .section_views .view_wrapper img{ width: 100%; } /* .realisation_template .section_intro .paragraphe1{ line-height: 1.2em; } .realisation_template .section_intro .paragraphe2{ margin-top: 40px; margin-left: calc( var(--grid_unit) * 1 + var(--grid_gap) * 1 ); ; } .realisation_template .section_intro img{ border: 20px solid white; aspect-ratio: 4 / 3; object-fit: cover; } .realisation_template .section_intro .icon{ z-index: 11; position: absolute; top: var(--grid_unit); left: 50%; width: var(--grid_unit); transform: translateX(-80%); } .realisation_template .screen_items{ align-items: center; flex-direction: column; display: flex; flex-wrap: wrap; gap: var(--grid_gap) } .realisation_template .screen_item { border: 20px solid black; width: calc( var(--grid_unit) * 8 + var(--grid_gap) * 7 ); margin-bottom: var(--grid_unit); } .realisation_template .section_intro img { border: 20px solid white; aspect-ratio: 4 / 3; object-fit: cover; } .realisation_template .section_hero { display: flex; align-items: start; gap: var(--grid_gap); } .realisation_template .section_hero .cover_wrapper{ position: sticky; height: 100dvh; } .realisation_template .section_hero .cover{ position: sticky; } .realisation_template .screen_item:nth-child(3n+1) { width: calc( var(--grid_unit) * 8 + var(--grid_gap) * 7 ); } .realisation_template .screen_item:nth-child(3n+3) { width: calc( var(--grid_unit) * 8 + var(--grid_gap) * 7 ); } .realisation_template .screen_item:first-child { width: 100%; } .realisation_template .screen_item img{ max-height: 2200px; width: 100%; overflow: hidden; } */ /* .realisation_template .video_container{ border: 20px solid black; justify-content: center; width: fit-content; display: flex; background-color: #000; margin-bottom: var(--grid_unit); } */ /* .section_gallerie .flex_container{ display:grid; grid-gap:var(--grid_gap); column-gap: var(--grid_gap); row-gap: var(--grid_gap); grid-template-areas: 'image1 image2 image3' 'image4 image2 image5' } .section_gallerie{} */ .section_gallerie { width: 100%; overflow: hidden; } .section_gallerie .flex_container{ flex-wrap: wrap; justify-content: center; } .section_gallerie img{ width: calc( var(--grid_unit) * 4 + var(--grid_gap) * 3 ); aspect-ratio: 5/4; object-fit: cover; height: 100%; } /* .section_gallerie img:nth-child(1){ margin-left: calc( var(--grid_unit) *1 + var(--grid_gap) * 1 ); ; width: calc( var(--grid_unit) * 3 + var(--grid_gap) * 2 ); } .section_gallerie img:nth-child(3){ grid-area: image2; width: calc( var(--grid_unit) * 4 + var(--grid_gap) * 3 ); aspect-ratio: 9/12; } .section_gallerie img:nth-child(2){ grid-row-end: none; grid-area: image3 ;margin-top: 3rem; width: calc( var(--grid_unit) * 4 + var(--grid_gap) * 3 ); } .section_gallerie img:nth-child(4){ grid-area: image4; margin-bottom: 3rem; width: calc( var(--grid_unit) * 4 + var(--grid_gap) * 3 ); } .section_gallerie img:nth-child(5){ grid-area: image5; margin-bottom: 3rem; margin-right: calc( var(--grid_unit) *1 + var(--grid_gap) * 1 ); ; width: calc( var(--grid_unit) * 3 + var(--grid_gap) * 2 ); } */ .section_gallerie img:nth-child(3){ margin-left: calc( var(--grid_unit) * 4 + var(--grid_gap) * 3 ); } .section_2_paragraphes { padding: 120px 0 0 0; background:var(--section_bg2); } .section_2_paragraphes .image_mobile{ width: calc( var(--grid_unit) * 3 + var(--grid_gap) * 2 ); margin: auto; } .section_2_paragraphes .flex_wrapper{ display: flex; } .section_2_paragraphes .img_wrapper{ width: 100%; } .section_2_paragraphes .main_container{ display: flex; flex-direction: column; gap: 40px; } .section_header_img .main_container{ display: flex; justify-content: end; padding-bottom: 0; padding-top: 0; padding-right: 0; } .section_header_img img{ height: 320px; width: calc( var(--grid_unit) * 9 + var(--grid_gap) * 8 ); object-fit: cover; } /* .section_intro{ padding-top: 320px; padding-bottom: 0; padding-left: var(--grid_gap); padding-right: var(--grid_gap); } */ .section_4_paragraphes .heading{ margin-bottom: 60px; } .section_4_paragraphes .paragraphes{ margin: 60px 0 0 0 } .section_4_paragraphes .paragraphes h4{ margin-bottom: 20px; font-size: 26px; letter-spacing: -0.03em; line-height: .9em; } .section_4_paragraphes figure{ margin: 60px 0; } .section_references{ display: flex; flex-direction: column; gap: 40px; } .section_references .paragraphe{ width: calc( var(--grid_unit) * 3 + var(--grid_gap) * 2 ); margin-bottom: 40px; } .section_references .ref_img{ height: calc( var(--grid_unit) * 2 + var(--grid_gap) * 1 ); object-fit: cover; object-fit: cover; } .section_references .ref{ display: flex; flex-direction: column; gap: 20px; } .section_references .ref h4{ font-size: 21px; letter-spacing: -0.03em; line-height: .9em; } .section_references .only_one .ref { flex-direction: row; } .section_references .only_one .grid_unit3 { width: calc(var(--grid_unit)* 7 + var(--grid_gap)* 2); } /* ARTICLE */ .article_template .hero_section .main_container{ } .article_template .main_container{ } .article_template .hero_section{ padding: 0px calc(var(--grid_unit)* 1 + var(--grid_gap)* 1); } .article_template .hero_section h1{display: flex; flex-direction: column; gap: 1rem; padding-right: 2ch; } .article_template .hero_section .col1{ margin-top: 40px; gap: 2rem; padding-right: 40px; } .article_template .hero_section .col2{ margin-top: 40px;; } .article_template .hero_section img{ border: 20px solid white; aspect-ratio: 4 / 3; object-fit: cover; } .article_template .hero_section .icon{ z-index: 11; position: absolute; top: var(--grid_unit); left: 50%; width: var(--grid_unit); transform: translateX(-80%); } .article_template .hero_section .hero_txt2 { margin-top: 40px; margin-left: calc(var(--grid_unit)* 1 + var(--grid_gap)* 1); } .article_template .paragraphe{ display: flex; flex-direction: column; gap: 2rem; margin: 0; } .article_template .paragraphe p{ font-size: 1.2rem; max-width: 900px; } .article_template .paragraphe h2{ font-size: 24px; } .article_template .paragraphe h3{ font-size: 21px; padding: 5px 5px 3px 5px; text-transform: uppercase; font-family: "Lora"; margin-top: 1em; font-weight: bolder; letter-spacing: 0.05em; } .article_template .paragraphe h2{ background: var(--color_alt); padding: 0em 0.2em; } .article_template .blocks_container{display: flex; flex-direction: column; gap: 4rem; } .article_template ol{ margin: 0; padding: 0; padding-left: 1em ; } .article_template li{ list-style: square; margin-bottom: 0.5em; } .ligne{ width: 100%; height: 2px; background-color: var(--color_txt); overflow: hidden;} .section_4_paragraphes.style1 figure{ position: absolute; height: 120px ; left: calc( var(--grid_unit) * -4 + var(--grid_gap) * -3 ); width: calc( var(--grid_unit) * 6 + var(--grid_gap) * 5 ); } .section_4_paragraphes.style1 figure img{ width: 100%; height: 100%; object-fit: cover; } .section_4_paragraphes.style1 .heading{ margin-left: calc( var(--grid_unit) * 6 + var(--grid_gap) * 5 ); } .section_4_paragraphes.style1 .paragraphes{ flex-wrap: wrap; margin-left: calc( var(--grid_unit) * 6 + var(--grid_gap) * 5 ); width: calc( var(--grid_unit) * 6 + var(--grid_gap) * 5 ); } .section_4_paragraphes.style1 .paragraphe{ width: calc( var(--grid_unit) * 3 + var(--grid_gap) * 2 ); margin-bottom: 40px; } .footer{ background-color: var(--section_bg1); } .footer .main_container{ padding-top: 90px; padding-bottom: 90px; background-color: var(--section_bg2); color: #000; } .footer .flex_container{ gap: 0; } .footer a{ color: var(--color_txt); width: fit-content; } .footer .ligne{ width: 100%; height: 2px; background: #000; } .footer .bouton{ border-radius: 30px; border: 1px solid var(--Text-Colo-2, #000); display: inline-flex; padding: 12px 30px; justify-content: center; align-items: center; gap: 10px; } .footer .col{ padding: 30px 0; gap: 20px; justify-content: flex-end; display: flex; flex-direction: column; } .footer .col1{ gap: 60px; } .footer .exergue{ padding: 1em; color: white var(--section_bg3); } .footer .tags{ opacity: 0; } .footer .shadow{ } .marble{ /* background-image: url('../images/bg_marble.jpg'); background-size: 100%; background-size: cover; */} .hey_joe{ background-color: var(--section_bg1); } .hey_joe .main_container{ padding-top: 90px; padding-bottom: 90px; background-color: var(--section_bg2); color: #000; } .hey_joe .flex_container{ gap: 0; } .hey_joe .Homepage{ color: var(--color_txt); width: fit-content; } .hey_joe .ligne{ width: 100%; height: 2px; background: #000; } .hey_joe .bouton{ border-radius: 30px; border: 1px solid var(--Text-Colo-2, #000); display: inline-flex; padding: 12px 30px; justify-content: center; align-items: center; gap: 10px; } .hey_joe .col{ padding: 30px 0; gap: 20px; justify-content: flex-start; display: flex; flex-direction: column; } .hey_joe .col1{ gap: 60px; } .hey_joe .exergue{ padding: 1em; color: white var(--section_bg3); } /* .hey_joe .tags{ opacity: 0; } */ /* SWIPER BANNERS */ .banners{ width: 50%; padding: 120px; position: absolute; top: 0; right: 0; background: var(--body_bg); display: flex; justify-content: center; } .zone_banners { height: auto; width: 580px!important; max-width: 100%; margin: 0 auto } .zone_banners .swiper-container { } .zone_banners .gallery-top { border:10px solid black; height: 600px!important; width: 300px!important; max-width: 100%;} .zone_banners .gallery-top .swiper-slide { height: 600px!important; width: 100%; } .zone_banners .gallery-top .swiper-slide iframe{ width: 300px!important; height: 600px!important; overflow: hidden; } .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%; width: 580px!important; height: 200px; } .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{ text-decoration: none; font-size: 12px; background: none; opacity: 0.6em; color: #5d5e62;} /* /^^ /^^ /^ /^ /^^ /^ /^/^ /^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^ /^^ /^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^ /^^^^^ /^^ /^ /^^ /^^ /^^ /^^ /^^ /^^ /^ /^^ /^ /^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^^^ /^^ /^^ /^^/^^ /^^ */ /* /^^^ /^^^^^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^^ /^^ /^^ /^ /^^ /^^ /^^ /^/^ /^ /^^ /^^^^ /^^ /^ /^^ /^^ /^ /^^ /^ /^^ /^^ /^^ /^^ /^^ /^ /^^ /^^ /^^ /^^^^^ /^^ /^^ /^ /^^ /^ /^^ /^^ /^^ /^^ /^^ /^^^^^ /^^ /^^^ /^^ /^ /^^ /^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^ /^^ /^^ /^^^^ /^^^ /^ /^^ /^^ /^^^ /^^ /^^^ /^^ /^^^^ /^^ /^^ /^^ */ /* /^^^^^^^ /^^ /^^ /^^ /^^ /^^ /^^^^ /^ /^^ /^^^^ /^^ /^^ /^ /^^ /^ /^^ /^^ /^ /^^ /^^ /^^ /^^ /^^ /^^ /^^^^^ /^^ /^^^ /^ /^^ /^^^ /^^ /^^ /^^ /^^ /^ /^^ /^^ /^^ /^^ /^/^^ /^^ /^^ /^^^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ */ @media ( max-width: 1200px){ :root { --grid_unit : 10vw; } .txt_13 { font-size:11px; } .txt_16 { font-size:13px; } .txt_21 { font-size:14px; } .txt_26 { font-size:26px; } .txt_32 { font-size:26px; } .txt_43 { font-size:32px; } .txt_54 { font-size:38px; } .txt_58 { font-size:38px; } .txt_65 { font-size:38px; } .txt_97 { font-size: 67px; } .txt_167 { font-size:104px; padding: 1em 0; } body{ font-size: 1 3px; overflow-x: hidden; } .gap_40{ gap: 30px; } .gap_60{ gap: 40px; } .project_template .section_intro .icon{ display: none; } .section_block h2 { font-size: 30px; } .home_template .tag{ font-size: 9px; } .home_template .intro{ margin-left: 0; width: 100%; } .home_template .hero_img{ aspect-ratio: 16/8; } .home_template .hero .icon { width: 20vw; } .grid_unit3{ width: 100%; } .project_template .section_intro .paragraphe2{ margin-left: 0; } .footer .ligne{ display: none; } div{ max-width: 100%; } .section_references .ref_img{ height: auto; aspect-ratio: 16/8; } .flex_container{ flex-direction: column; gap: 60px; align-items: center; } .main_container{ width: 100%; padding: 1rem ; } .col{ width: 100%!important; } .grid_unit9{ width: 100%!important; } .padding_l1_r1{ padding-left: 0; padding-right: 0 ; } .section_3_steps{ display: none; } .project_template .section_faq .faq_items{ width: 100%; } .home_template .project_item{ width: 100%!important ; margin-top: 40px!important ; margin-bottom: 40px!important ; } .project_template .section_intro .icon{position: relative; } .project_template .section_faq .faq_item { padding-right: 4rem; } .section_references .references_list .ref p{ font-size: 10px; } .project_item .screen_wrapper{ width: 100vmin; box-sizing: border-box; background: rgba(0,0,0,0.2); } .swiper-slide-active .screen_wrapper { height:70vmin; } .project_item .cover_wrapper{ padding: 2vmin; } .project_item .video_container{ padding: 2vmin; } .project_template .section_budget .paragraphe h5 { font-size: 18px; } .project_template .section_budget .paragraphe h6 { font-size: 28px; } .project_template .section_budget .paragraphe p{ font-size: 12px; } .project_template .section_budget .paragraphe{ padding: 3rem ; } .home_template .workflow .icon { position: absolute; top: 0; right: 0; } .section_references .references_list{ display: flex; flex-wrap: wrap; flex-direction: row; gap: 1rem; } .section_references .references_list .ref{ width: 45%; } .project_template .section_intro h1{ padding-right: 2ch; } .section_home_realisations .intro_thumbs .tags{ max-width:100%; } .section_home_realisations{ padding: 3rem 1rem; } .section_home_realisations .intro_thum{ padding-left: 0; } .article_template .hero_section { padding-left: 0; padding-right: 0; padding-bottom: 5rem; background-color: white; } .article_template .hero_section .hero_txt2{ margin-left: 0; padding-left: 2rem; } } @keyframes loadBar{ 0% { width: 0%; filter: blur(.5px); } 100% { width: 100%; filter: blur(.3px); } } @keyframes circle{ 0% { transform: scale(1); filter: blur(.5px); } 100% { transform: scale(2); filter: blur(1.3px); } } @keyframes fadeIn{ to { opacity: 1; transform:translate3D(0,0,0) } } @keyframes ZoomAppear{ from { padding-top: 0px; opacity: 0; } to { padding-top: 0px; opacity: 1; } }