/* CSS by Manu LECHAT https://e-lechat.com */ /* {__ {__ {_ {__ {_{_ {_ {__ {__ {__ {_{_ {_ {____ {__ {__ {__ {__ {__ {__ {__ {__ {__ {__ {__ {__ {__ {___ {__ {__ {__ {__ {__ {__ {__ {__ {__ {___ {__ {__ {__ {__ */ @font-face { font-family: "main_font"; src: url("../fonts/Manrope/Manrope-SemiBold.ttf") format('truetype') } /* {__ {__ {__ {_ {___ {____ {__ {__ {__ {__ {__ {__ {__ {__ {__ {__ {__ {___ {_{__ {__ {__ {__ {__ {__ {__ {___ {___ {__ {__ */ :root { --black : "black"; --fontSize_unit: 14px; --color_txt : #d2d2d2; --color_bg:#1C1C20; --color_bg:#1E1C22; } /* /^^ /^^ /^ /^^ /^/^ /^ /^^ /^^ /^^ /^/^ /^ /^^^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^^ /^^ /^^ /^^ /^^ */ .txt_9 { font-size: calc( var(--fontSize_unit) * .9) ; } .txt_14 { font-size: calc( var(--fontSize_unit) * 1.4) ; } .unopacity{ opacity: 0.5; } /* /^^^^^^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^^^ /^^ /^/^ /^ /^ /^^ /^ /^^ /^^ /^ /^^ /^^ /^^ /^^ /^^^^^ /^^ /^^^ /^^^^^ /^^ /^^ /^^ /^^ /^ /^^ /^ /^^ /^^ /^^ /^^^^ /^^ /^^ /^^^^ /^^ */ ::selection { background-color: rgba(0,0,0,0); opacity: 0.1; transition: all .3s; ; text-shadow: none; } * { box-sizing: border-box; outline: none; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: rgba(255,255,255,0.5); } ::-webkit-scrollbar-thumb { background: var(--color_txt_alt); } ::-webkit-scrollbar-thumb:hover { background: var(--color_txt_alt); } html{ width:100%; height: 100vh; margin: 0; padding: 0; background: var(--color_bg); overflow: hidden; top:0; left: 0;-webkit-font-smoothing: antialiased; box-sizing: border-box; position: relative; text-rendering: optimizeLegibility; } body{ width:100%; height: 100vh; margin: 0; padding: 0; text-transform: uppercase; color: var(--color_txt); font-family: "main_font"; } div{ position: relative; display: block; } header, section, main{ width: 100%; ; } 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{ width: fit-content; display: block; margin: 0 ; clear: both; break-after: always; font-size: 1em; line-height: 1.2em; font-weight: 400 } 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{ width: fit-content; max-width: 80ch; clear: both; display: block; padding: 0; margin: 0;font-weight: lighter; position: relative; line-height: 1.5em; font-style: normal; padding-bottom: 1.3em; } p a{ text-decoration: underline; 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; } /* /^^ /^^ /^^ /^^ /^/^ /^ /^^ /^^ /^^ /^^^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^^ /^^ /^^ */ .nopacity{ opacity: 0;} /* /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^/^ /^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^^ /^^ /^^^ /^^ /^^ /^^/^^ /^^ /^^ */ #app{ width: 100vw; height: 100vh; overflow: hidden; } /* /^^ /^^ /^ /^ /^^ /^ /^/^ /^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^ /^^ /^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^ /^^^^^ /^^ /^ /^^ /^^ /^^ /^^ /^^ /^^ /^ /^^ /^ /^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^^^ /^^ /^^ /^^/^^ /^^ */ .main_logo{ padding: 60px; position: fixed; top: 0; left: 0; z-index: 2; display: flex; align-items: center;} .main_logo .nekosan{ width: 1em; height:1em; margin-right: 10px; } .main_logo .nekosan path{ fill: rgba(217,217,217,0.4); fill-opacity: 1; } .bt_about{ padding: 60px; position: fixed; top: 0; right: 0; z-index: 2; } .footer{ padding: 60px; position: fixed; bottom: 0; left: 0; z-index: 2; } .showtime .main_logo{ opacity: 0; animation : fadeIn 1.6s cubic-bezier(.17,.67,.32,.96) 1s 1 normal forwards; } .showtime .bt_about{ opacity: 0; animation : fadeIn 1.6s cubic-bezier(.17,.67,.32,.96) 1.2s 1 normal forwards; } .bg_nekosan{ width: 120vmin; height: 120vmin; opacity: 0; position: fixed; top: 0; left: 0; transform: translate(-5%, -5%); z-index: -1; } .bg_nekosan svg{ width: 100%; height: 100%; } #loader { display: flex; transition: all .5s 0s; position: fixed; background-color: var(--color_bg); top: 0; left: 0; width: 100vw; height: 100vh; z-index: 9;justify-content: center; align-items: center; flex-direction: column; } #loader.hidden{ opacity: 0; pointer-events: none; } #loader .nekosan_wrapper{ padding: 40px; } #loader .nekosan_wrapper svg{ width: 30px; height:30px; } #loader .nekosan_wrapper svg path{ fill: var(--color_txt); fill-opacity: 1;} #loader .loadBar{ width: 120px; height: 2px; background: rgba(217,217,217,0.4); } #loader .loadBar:after{ animation :loadBar 4s cubic-bezier(0.2, 0, 0.02, 0.93) .2s 1 normal forwards; background: white; content: ""; width: 0; height: 100%; position: absolute; left: 0; } /* /^^^ /^^^^^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^^ /^^ /^^ /^ /^^ /^^ /^^ /^/^ /^ /^^ /^^^^ /^^ /^ /^^ /^^ /^ /^^ /^ /^^ /^^ /^^ /^^ /^^ /^ /^^ /^^ /^^ /^^^^^ /^^ /^^ /^ /^^ /^ /^^ /^^ /^^ /^^ /^^ /^^^^^ /^^ /^^^ /^^ /^ /^^ /^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^ /^^ /^^ /^^^^ /^^^ /^ /^^ /^^ /^^^ /^^ /^^^ /^^ /^^^^ /^^ /^^ /^^ */ .project_item .cover_outline{ height: 580px; margin-bottom: 60px; transition: all 1s cubic-bezier(0.42, 0.1, 0, 0.96) .1s; width: 920px; box-sizing: border-box; background: rgba(0,0,0,.15); } .project_item .cover_wrapper { overflow: hidden; transition: all 1s cubic-bezier(0.42, 0.1, 0, 0.96) .3s; top:50%; opacity: 0; position: absolute; width: 100%; height: 0%; display: flex; align-items: center; } .swiper-slide-active .project_item .cover_wrapper{ opacity: 1; top: 0%; height: 100%; } .project_item .cover_wrapper::after { z-index: 2; opacity: 0.3; content: ""; position: absolute; width: 100%; height: 100%; background: #454a63; mix-blend-mode: multiply; display: block; top: 0; left: 0; } #matrix{ display: flex ; flex-wrap: wrap; font-size: 3vw; position: absolute; right: 60px; bottom: 60px; } .project_item .cover_wrapper img { transform: translateY(10%); transition: all 1s cubic-bezier(0.42, 0.1, 0, 0.96) .3s; width: 100%; height: 580px; max-width: none; max-height: none; object-fit: cover; } .swiper-slide-active .project_item .cover_wrapper img { transform: translateY(0%); } .project_item .img_wrapper{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; } .project_item .img_wrapper img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .project_item .img_wrapper { opacity: 0; transition: all 1s; } .project_item .img_wrapper.visible { opacity: 1; } .project_item .video_container{ opacity: 0; transition: all 1s .3s ease-out; position: absolute; width: 100%; height: 100%; } .project_item .video_container video{ width: 100%; height: 100%; object-fit: cover; } .project_item .video_container.activ{ opacity: 1; } .project_item .bt_play{ z-index: 2; display: flex; gap: 7px; align-items: center; } .project_item .bt_play:hover{ color: white; cursor: pointer; } .project_item .infos{ max-width: 35ch; } .swiper { width: 100vw; height: 100vh; position: fixed; } .swiper-pagination { position: fixed; } .swiper-slide { display: grid; height: 100vh; place-items: center; } .txt_wrapper{ display: grid; grid-template-columns: 30% 40% 30%; } .txt_wrapper .un{ padding: 0 20px; opacity: 0; } .txt_wrapper .dos{ padding: 0 20px; opacity: 0; } .txt_wrapper .tres{ padding: 0 20px; opacity: 0; display: flex; gap:10px; justify-content: flex-end; align-items: flex-start; } .swiper-slide-active .txt_wrapper .un{ animation : fadeIn 1.6s cubic-bezier(.17,.67,.32,.96) 1.2s 1 normal forwards; } .swiper-slide-active .txt_wrapper .dos{ animation : fadeIn 1.6s cubic-bezier(.17,.67,.32,.96) 1.4s 1 normal forwards; } .swiper-slide-active .txt_wrapper .tres{ animation : fadeIn 1.6s cubic-bezier(.17,.67,.32,.96) 1.6s 1 normal forwards; } .swiper-pagination-vertical.swiper-pagination-bullets, .swiper-vertical>.swiper-pagination-bullets{ right: 60px; } .swiper-pagination-bullet{ width: 30px; height:1px; opacity: 0.3!important;margin: 10px 0!important; background: none; transition: all .8s ease-in-out ; border:1px solid rgba(255,255,255,.35); border-radius: 1px; } .swiper-pagination-bullet-active{ background: rgba(0,0,0,.35); height: 20px; opacity: 0.75!important; margin: 20px 0!important; } .noise{ opacity: 0.15; z-index: -1; position: fixed; width: 100vw; height: 100vh;} #infos{ display: flex; transition: all .5s 0s; position: fixed; background-color: var(--color_bg); border: 2px solid red; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 9;justify-content: center; align-items: center; flex-direction: column; } .info{ display: grid; grid-template-columns: (50% 50%); width: 100%; } /* /^^^^^^^ /^^ /^^ /^^ /^^ /^^ /^^^^ /^ /^^ /^^^^ /^^ /^^ /^ /^^ /^ /^^ /^^ /^ /^^ /^^ /^^ /^^ /^^ /^^ /^^^^^ /^^ /^^^ /^ /^^ /^^^ /^^ /^^ /^^ /^^ /^ /^^ /^^ /^^ /^^ /^/^^ /^^ /^^ /^^^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ */ @media ( max-width: 1400px){ .project_item .cover_outline{ width: 720px; height: 420px; } } @media ( max-width: 1200px){ :root { --fontSize_unit: 12px; } } @media ( max-width: 800px){ .project_item .cover_outline{ width: 100vmin; box-sizing: border-box; background: rgba(0,0,0,0.2); } .swiper-slide-active .cover_outline { height:70vmin; } .project_item .cover_wrapper{ padding: 2vmin; } .project_item .video_container{ padding: 2vmin; } } @keyframes loadBar{ 0% { width: 0%; } 100% { width: 100%; } } @keyframes fadeIn{ to { opacity: 1; transform:translate3D(0,0,0) } } @keyframes ZoomAppear{ from { padding-top: 0px; opacity: 0; } to { padding-top: 0px; opacity: 1; } }