/* CSS by Manu LECHAT https://e-lechat.com */ @font-face { font-family: "Inter_Light"; src: url("../fonts/Inter/static/Inter_18pt-Light.ttf") format('truetype') } @font-face { font-family: "Inter_Light_Italic"; src: url("../fonts/Inter/static/Inter_18pt-LightItalic.ttf") format('truetype') } /* #### Generated By: http://www.cufonfonts.com #### */ @font-face { font-family: 'Menlo Regular'; font-style: normal; font-weight: normal; src: local('Menlo Regular'), url('../fonts/Menlo/Menlo-Regular.woff') format('woff'); } /* /^^ /^^ /^^ /^ /^^^ /^^^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^^ /^/^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^^ /^^^ /^^ */ :root { /* layout */ --site_max_width: 934px; --grid_gutter : 20px; --grid_padding_h : 40px; --fontSize_unit: 10px; --color_txt : #171B2D; --color_txt_alt : #7997b7; --color_bgmenu_mobile : #7997b7; } /* /^^ /^^ /^ /^^ /^/^ /^ /^^ /^^ /^^ /^/^ /^ /^^^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^^ /^^ /^^ /^^ /^^ */ .inter_light { font-family: "Inter_18pt-Light", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal;} .italic { font-family: "Inter_Light_Italic"; } .menlo{ font-family: 'Menlo Regular'; } .color_alt{ color: var(--color_txt_alt); } /* sizes */ .txt_38 { font-size: 38px; } .txt_31{ font-size: 31px; } .txt_26{ font-size: 26px; } .txt_21{ font-size: 21px; } .txt_18{ font-size: 18px; } .txt_16{ font-size: 16px; } .txt_14{ font-size: 14px; } .txt_12{ font-size: 12px; } .txt_11{ font-size: 11px; } .txt_08{ font-size: 8px; } /*headings */ .suptitle, .suptitle a{ color: var(--color_txt_alt); font-family: 'Menlo Regular'; font-size: 10px; letter-spacing: 0.08em; font-style: normal; line-height: normal; text-transform: uppercase; } .tiret_left{ padding-left: 110px; position: relative } .tiret_left:before{ content: ""; width: 90px; height: 1px; background-color: var(--color_txt); position: absolute; top: 50%; left: 0; } .maj{ text-transform: uppercase; letter-spacing: -0.04em; } strong { font-weight: 700; } .black { font-weight: 700; } .white{ color: #fff; } .titre{ line-height: 1.1em; margin-bottom: 0.5em; } .color_alt{ color: var(--color_alt) } .color_light{color: var(--color_light) } .bolder{ font-weight: bolder; } .icon_burger{ display: none; } .display_none{ display: none; } .bt_contact:hover{ cursor: pointer; } .italic{ font-family: "Inter_Light_Italic"; } figure{ margin: 0; padding: 0; } ::selection { background-color: rgba(0, 0, 0, 0.3); opacity: 0.1; transition: all .3s; ; text-shadow: none; } * { box-sizing: border-box; } #sprite-plyr{ display: none; } /* html{ min-height: 100vh; background: white; font-weight: 500; color: var(--color_txt); height: 100vh; top:0; left: 0; margin: 0; padding: 0; width:100%; overflow-x: hidden; -webkit-font-smoothing: antialiased; box-sizing: border-box; position: relative; text-rendering: optimizeLegibility; } */ /* body{ font-family: Lexend; border: 4px solid royalblue; */ /* font-style: normal; */ /* font-weight: 400; background: white; font-size: 1rem; line-height: 1.5em; overflow-x: hidden; width: 100vw; overflow-y: auto; color: var(--color_txt); margin: 0; padding: 0; top:0; left: 0; } */ /* body.shownav{ overflow: hidden; } */ html{ box-sizing: border-box; width:100%; max-width: 100vw; height:100dvh; } body{ box-sizing: border-box; height: auto; width: 100%; max-width: 100vw; overflow-y: scroll; background: white; max-width: 100vw; overflow-x: hidden; height:100dvh; font-weight: 400; overflow-y: auto; margin: 0; font-family: "Inter_Light"; font-optical-sizing: auto; font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-size: 1rem; color: var(--color_txt); } div{ position: relative; display: block; } header, section, main{ width: 100%; position: relative; } section{ width: 100%; max-width: 100vw; } 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{ color: var(--color_txt); font-weight: normal; font-style: normal; margin-block-start: 0; margin-block-end: 0; width: fit-content; display: block; margin: 0; clear: both; break-after: always; line-height: 1.2em; } span{ display: inline-block; } a{ width: fit-content; position: relative; color: var(--color_txt); text-align: left; text-decoration: none; } a:hover{ cursor: pointer; } p{ font-family: "", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; line-height: 2em; color: var(--color_txt); clear: both; display: block; padding: 0; margin: 0; } p a{ text-decoration: underline; color: var(--color_theme_dark); } p a:hover{ text-decoration: underline; } .bold{ font-weight: 600; } u{ position: relative; text-decoration: none; z-index:2; } u::before{ pointer-events: none; opacity: 0.6; mix-blend-mode: multiply; position: absolute; transform: rotate(2deg); z-index:1; top: 0.3em; left: 0; width: 100%; height: .8em; background-color: var(--color_theme); content: ""; } li{ font-size: 1rem; line-height: 1.35em; } iframe{ border: none; width: 100%; height: 100%; margin: 0; } 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%; } blockquote{ margin: 1em 0; } .section{ max-width: 100% ; width: var(--w_wrapper); margin: 0 auto; } .main_container{ width: 100%; } .center{ text-align: center; margin: 0 auto; } .color_txt_alt{ --color_txt: var(--color_txt_alt); } .content_wrapper{ max-width: var(--site_max_width); padding-right: 96px; padding-left: 96px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 60px; } .bt_home{ display: none!important; } .hideOneDesktop{ display: none; } .width_standard{ width: 100%; max-width: var(--site_max_width); margin: auto; padding-left: 20px; padding-right: 20px; } /* /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^/^ /^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^^ /^^ /^^^ /^^ /^^ /^^/^^ /^^ /^^ */ .template_project{ padding-top: 180px; } .project_intro{ display: flex; flex-direction: column; gap: 60px; } .project_intro_title{ display: flex; flex-direction: column; gap: 20px; } .container{ width: 100%; max-width: var(--site_max_width); margin: auto; padding-left: 20px; padding-right: 20px; } .project_intro_img_wrapper{ opacity: 0; filter: brightness(2); animation: project_intro_img_wrapper 1s cubic-bezier(.17,.67,.32,.96) .2s 1 normal forwards; aspect-ratio: 16/8; margin: auto; width: 100%; overflow: hidden; display: flex; flex-direction: column; gap: 40px; } .project_intro_img_wrapper img{ width: 100%; height: 100%; object-fit: cover; } .project_intro_img_wrapper figcaption{ text-align: right; } .template_project.expo .project_intro_img_wrapper{ width: var(--site_max_width); margin: auto; aspect-ratio: 16/6; } .template_project.publication .project_intro_img_wrapper{ width:100%; max-width: var(--site_max_width); margin: auto; aspect-ratio: 16/9; padding-left: var(--grid_gutter); padding-right: var(--grid_gutter); } .template_project .project_heading{ display: flex; margin: auto; width: var(--site_max_width); justify-content: space-between; } .prevnext_wrapper{ display: flex; gap: 20px; } .template_project .txt_intro{ display: flex; gap: 5%; } .template_project .col1{ width: 35%; } .template_project .col2{ width: 65%; } .project_intro_suite{ display: flex; flex-direction: column; gap: 40px; } .img_grid_7{ width: 666px; } .img_grid_8{ width: 890px; } .section_projets{ padding-top: 120px; } /* navbar */ /* navbar */ .burger{ display: none; } .navbar{ z-index: 120; position: fixed; background: linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,1)); box-shadow: 0px 10px 85px white;; transition: opacity .3s .3s ease-in-out; top: 0; left: 0; width:100%; align-items: center; padding-top: 40px; padding-bottom: 20px; } .navbar .container{ width: 100%; max-width: 100%; display: flex; justify-content: space-between; padding-left: 40px; padding-right: 40px; } .navbar.hidden{ opacity: 0; } .navbar .main_logo{ width: 4rem; } .navbar .icon_insta{ width: 1.2rem; } .navbar nav{ display: flex; gap: 30px; align-items: center; width: 100%; justify-content:center} .navbar .nav_right{ display: flex; flex-wrap: wrap; gap: 0px; justify-content: flex-end } .navbar .nav_left{ display: flex; gap: 40px; width: 200px; justify-content: flex-start } .navbar .menu_link{ font-weight: 600; text-transform: uppercase; transition: all .13s; color: var(--color_txt); text-align: center; text-transform: uppercase; font-size: 12px; letter-spacing: 0.04em; padding: .5rem 1rem; } .navbar .menu_link:hover{ cursor: pointer; color: var(--color_txt_alt); } .navbar .logo_txt{ font-weight: 500; text-transform: uppercase; font-size: 18px; letter-spacing: 0.04em; color: var(--color_txt_alt); } .navbar .menu_link.alt{ font-weight: 600; color: var(--color_txt_alt); } .navbar .menu_link.alt:hover{ color: var(--color_txt); } .navbar .menu_link.alt:last-child{ border: 1px solid red; } .navbar .menu_link:after{ transition: all .3s; content: ""; border-radius: 2px; opacity: 0; width: 4px; height: 4px; position: absolute; left: calc(50% - 2px); bottom: -3px; background-color: var(--color_txt_alt); } .navbar .menu_link.actif:after{ opacity:.8 } .navbar .menu_link:hover:after{ opacity:.8 } .navbar .languages{ text-transform: uppercase; color: var(--color_txt_alt); margin-left: 15px; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 4px; } .navbar .languages .language_bt{ color: var(--color_txt_alt); opacity: 0.5; transition: all .3s; } .navbar .languages .language_bt:hover{ opacity: 1; } .navbar .languages .language_bt.activ{ opacity: 1; } .navbar .languages .separator{ width: 2px; background: linear-gradient(90deg, var(--color_txt_alt) 50%, #C6C6C6 50%); height: 2px; } .navbar .languages .separator.right{ background: linear-gradient(-90deg, var(--color_txt_alt) 50%, #C6C6C6 50%); } .navbar .languages .separator:last-child{ display: none; } .bt_home{ display: none!important; } .template_home{ padding-top: 80px;} .template_about{ padding-top:120px } .template_projects{ padding-top:120px } .projects_wrapper{ display: flex; max-width: 80%; gap: 20px; flex-wrap: wrap; justify-content: space-start; justify-content: center; } .composant_project_thumb{ width: calc( 25% - 15px ); box-shadow: 0px 6px 26px 0px rgba(0, 0, 0, 0.15); } .composant_project_thumb .thumb_txt{ padding: 1.5rem 1rem; min-height: 120px; display: flex; flex-direction: column; gap: 8px; } .composant_project_thumb h2{ transition: all .3s;padding-left: 0px; padding-right: 10px; } .composant_project_thumb:hover h2{ filter: brightness(1.3); } .composant_project_thumb:hover .cover_wraper img { filter: brightness(1.2); } .composant_project_thumb .cover_wraper{ width: 100%; aspect-ratio: 16/9; } .composant_project_thumb .cover_wraper img{ transition: all .8s ease-out; width: 100%; height: 100%; object-fit: cover; } .composant_flipbook{ padding: 0; } .composant_flipbook img{ position: absolute; width: 100%; height: 100%; top: 0; left: 0; object-fit: cover; padding-left: var(--grid_gutter); padding-right: var(--grid_gutter); } .composant_flipbook img:nth-child(1){ position: relative; width: 100%; aspect-ratio: 16/9; object-fit: cover; } /* blocks */ .blocks{ padding-top: 40px; padding-bottom: 40px; } .block{ margin: auto; width: 100%; max-width: var(--site_max_width); padding-left: var(--grid_gutter); padding-right: var(--grid_gutter); padding-top: 40px; padding-bottom: 40px; } .block_citation blockquote{ margin: auto; width: 100%; line-height: 1.7em; font-style: italic; max-width: var(--site_max_width); padding-left: 343px; padding-right: 90px; } .block_text p{ width: 65%; } .residence_imgs_intro{ display: flex; gap:20px; padding-top: 40px; padding-bottom: 40px; align-items: center; align-items: flex-start; } .residence_imgs_intro figure:nth-child(1){ width: 35%; } .residence_imgs_intro figure:nth-child(2){ width: 65%; } .block_columns .grid{.border: 1px solid red; .width: 100%; display: grid; grid-template-columns: repeat(12, 1fr); gap: 2rem; } .block_columns .blocks{.margin:0; padding: 0; display: flex; flex-direction: column; gap: 20px; } .block_columns .column { grid-column: span var(--columns); } .block_columns .column p {padding-right: 80px; } .block_gallery_patchwork{ width: 100%; var(--site_max_width); padding-left: var(--grid_gutter); flex-wrap: wrap; padding-right: var(--grid_gutter); display: flex; justify-content: center; gap: 0px; } .block_gallery_patchwork img{ padding: 10px; } .block_gallery_patchwork img:nth-child(3n+1){ width: 100%; } .block_gallery_patchwork img:nth-child(3n+2){ width: 45%; } .block_gallery_patchwork img:nth-child(3n+3){ width: 45%; } .block_flipbook{ padding: 0; display: flex; flex-direction: column; align-items: flex-end; } .block_flipbook img{ position: absolute; width: 100%; aspect-ratio: 16/9; top: 0; left: 0; object-fit: cover; padding-left: var(--grid_gutter); padding-right: var(--grid_gutter); } .block_flipbook img:nth-child(1){ position: relative; width: 100%; object-fit: cover; } .block_flipbook .pagination{ padding: 20px; color: var(--color_txt_alt); font-family: 'Menlo Regular'; } .block_gallery_slider{ width: 100%; max-width:100%; padding-top: 40px; padding-bottom: 40px; } .block_gallery_slider .swiper-wrapper{ height: 460px; width:100% } .block_gallery_slider .swiper-slide{ height: 460px; width:auto; } .block_gallery_slider img{ height: 460px; width:auto; } .block_gallery_slider .swiper-slide{ opacity: 0.3; transition: opacity .8s ease-out; } .block_gallery_slider .swiper-slide-active{ opacity: 1; } .block_titre{ padding-bottom: 10px; border-bottom: 1px solid var(--color_txt_alt); } .block_img_format{} .block_img_format{ max-width: 100%; padding-left: 0; padding-right: 0; display: flex; align-items: center; justify-content: center; } .block_img_format figure{ width: 100%; } .block_img_format figure img{ width: 100%; } .block_img_format figure.size_s{ max-width: calc( var(--site_max_width) * 0.75 ); } .block_img_format figure.size_m{ max-width: var(--site_max_width); padding-right: var(--grid_gutter); padding-left: var(--grid_gutter); } .block_img_format figure.size_l{ max-width: 80%; padding: 0; } .block_img_format figure.size_xl{ width: 100%; max-width: 100%; padding: 0; } .block_img_format figcaption{ width: 100%; text-align: right; margin: auto; font-style: italic; max-width: var(--site_max_width); font-size: 12px; padding-left: var(--grid_gutter); padding-right: var(--grid_gutter); padding-top: 1rem; padding-bottom: 40px; } /* /^^^^^^^ /^^ /^^ /^^ /^^ /^^ /^^^^ /^ /^^ /^^^^ /^^ /^^ /^ /^^ /^ /^^ /^^ /^ /^^ /^^ /^^ /^^ /^^ /^^ /^^^^^ /^^ /^^^ /^ /^^ /^^^ /^^ /^^ /^^ /^^ /^ /^^ /^^ /^^ /^^ /^/^^ /^^ /^^ /^^^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ */ @media ( max-width: 800px){ :root { /* layout */ --site_max_width: 100vw; } /* burger */ .txt_16{ font-size: 14px; } .txt_26 { font-size: 20px; } .burger{ display: block; z-index: 1000; position: fixed; top:17px; left: calc( 100vw - 50px ); width: 36px; border-radius: 36px; height: 36px; } .burger .line{ position: absolute; transform-origin:50% 50%; left: 50%; top:50%; transition:all .3s; content:''; width: 16px; border-radius: 3px; height: 3px; background: var(--color_txt_alt); transition: all .3s; } .burger:hover{ cursor: pointer; } .burger .line1{ transform : translateX(-50%) translateY(-8px) rotate(0deg); width: 24px; } .burger .line2{ transform : translateX(-50%) translateY(-50%) rotate(0deg); } .burger .line3{ transform : translateX(-50%) translateY(5px) rotate(0deg); width: 24px; } .shownav .burger .line1{width: 24px; background: white; transform : translateX(-50%) translateY(0) rotate(45deg); transition:all .17s; } .shownav .burger .line3{width: 24px; background: white; transform : translateX(-50%) translateY(0) rotate(-45deg); transition:all .17s .03s; } .shownav .burger .line2{ display: none; } .bt_home{ display: flex!important; } .navbar{ justify-content: space-evenly; display: flex; padding-top: 10%; gap: 2rem; align-items: center; flex-direction: column; top: 0; right: 0; border-radius: 0; width: 100vw; z-index: 1000; height: 100dvh; position: fixed; color: white; background: var(--color_bgmenu_mobile); transform: translateX(110vw); transition: all .3s cubic-bezier(0.075, 0.82, 0.165, 1); } .navbar nav{ justify-content: center; align-items: center; flex-direction: column; gap: 2rem; } .navbar .container { flex-direction: column; align-items: center; gap: 20vw; } .navbar .menu_link { font-size: calc( var(--fontSize_unit) * 1.8); } .shownav .navbar{ transition: all .3s cubic-bezier(0.075, 0.82, 0.165, 1); transform: translateX(0%); } .navbar .nav_left{ position: fixed; top:20px; left: 20px; transition: all .3s cubic-bezier(0.075, 0.82, 0.165, 1); transform: translateX(-110vw); } .shownav .navbar .nav_left{ transform: translateX(0vw);} .navbar .logo_txt{ transition: all .3s cubic-bezier(0.075, 0.82, 0.165, 1); } .shownav .navbar .logo_txt{ color: white; } .navbar .menu_link{ opacity: 0; transition: all .3s ease-out .3s; } /* .shownav .navbar .menu_link{ opacity: 1; } */ .navbar .nav_right:nth-child(1){ transition-delay: 0.3s; } .navbar .nav_right:nth-child(2){ transition-delay: 0.4s; } .navbar .nav_right:nth-child(3){ transition-delay: 0.5s; } .navbar .nav_right:nth-child(4){ transition-delay: 0.6s; } .navbar .nav_right:nth-child(5){ transition-delay: 0.7s; } .navbar .nav_right:nth-child(6){ transition-delay: 0.8s; } .navbar .menu_link:nth-child(7){ transition-delay: 0.9s; } .navbar .menu_link:nth-child(8){ transition-delay: 1s; } .navbar .menu_link:nth-child(9){ transition-delay: 1.1s; } .navbar .menu_link:nth-child(10){ transition-delay: 1.2s; } .navbar .menu_link:nth-child(11){ transition-delay: 1.3s; } .navbar .nav_center { width: 100%; gap: 20px; } .navbar .nav_center .menu_link{ font-size: 24px; font-weight: 700; color: white; } .navbar .bt_blue { font-size: 18px; } .shownav .navbar .menu_link{ color: white; opacity:1; } .shownav .navbar .menu_link.alt{ color: white; opacity: 0.6; } .navbar .menu_link:hover, .navbar .menu_link.alt:hover{ color: white; } .navbar .nav_center .menu_link::before{ opacity: 0.2; } .navbar .nav_right{ gap: 40px; } .navbar .languages .language_bt.activ{ color: white; } .navbar .languages a{ color: white; } .template_project .txt_intro{ flex-direction: column; gap: 40px; } .template_project .col1{ width: 100%; } .template_project .col2{ width: 100%; } .composant_project_thumb{ width: 100%; } .block_citation blockquote{ padding-left: 40px; padding-right: 80px; } .block_text{ width: 100%; padding-right: 40px; } .navbar .languages .language_bt{ color: white; } .navbar .container{ height: 100dvh; } .navbar .nav_right{ height: 70dvh; margin-top: 15vh; gap: 15px; justify-content: space-between; } .navbar .languages{ margin-left: 0; } .block_columns .grid{ display: flex; flex-direction: column; } .block_text p{ width: 100%; padding-right: 20px; } .block_columns .column p{ padding-right: 20px; } .block_citation blockquote{ padding-right: 20px; } .template_projects { padding-top: 20px; } .template_project { padding-top: 120px;} .block { padding-top: 1rem; padding-bottom: 1rem } } @keyframes project_intro_img_wrapper{ to { opacity: 1; transform:translate3D(0,0,0); filter: brightness(1); } }