/* ------------------------------------------------------------------- */ /* Variables */ /* ------------------------------------------------------------------- */ :root { --animation-default-fast: 0.3s cubic-bezier(0.625, 0.05, 0, 1); --animation-default: 0.6s cubic-bezier(0.625, 0.05, 0, 1); --animation-default-slow: 0.9s cubic-bezier(0.625, 0.05, 0, 1); --animation-shrink: 0.6s cubic-bezier(0.35, 1.5, 0.6, 1); --animation-shrink-slow: 0.8s cubic-bezier(0.35, 1.2, 0.65, 1); --animation-ease: 0.2s ease-in-out; --animation-ease-slow: 0.6s ease-in-out; --shrink-size: 5px } [data-opacity] { opacity: var(--opacity, 0) } [data-opacity="0"] { --opacity: 0 } [data-opacity="0.1"] { --opacity: 0.1 } [data-opacity="0.2"] { --opacity: 0.2 } [data-opacity="0.3"] { --opacity: 0.3 } [data-opacity="0.4"] { --opacity: 0.4 } [data-opacity="0.5"] { --opacity: 0.5 } [data-opacity="0.6"] { --opacity: 0.6 } [data-opacity="0.7"] { --opacity: 0.7 } [data-opacity="0.8"] { --opacity: 0.8 } [data-opacity="0.9"] { --opacity: 0.9 } [data-opacity="1"] { --opacity: 1 } [data-number="-1"] { --number: initial } [data-number="0"] { --number: 0 } [data-number="1"] { --number: 1 } [data-number="2"] { --number: 2 } [data-number="3"] { --number: 3 } [data-number="4"] { --number: 4 } [data-number="5"] { --number: 5 } [data-number="6"] { --number: 6 } [data-number="7"] { --number: 7 } [data-number="8"] { --number: 8 } [data-number="9"] { --number: 9 } [data-number="10"] { --number: 10 } [data-number="11"] { --number: 11 } [data-number="12"] { --number: 12 } [data-number="13"] { --number: 13 } [data-number="14"] { --number: 14 } [data-number="15"] { --number: 15 } [data-number="16"] { --number: 16 } [data-number="17"] { --number: 17 } [data-number="18"] { --number: 18 } [data-number="19"] { --number: 19 } [data-number="20"] { --number: 20 } [data-number="21"] { --number: 21 } [data-number="22"] { --number: 22 } [data-number="23"] { --number: 23 } [data-number="24"] { --number: 24 } [data-number="25"] { --number: 25 } [data-number="26"] { --number: 26 } [data-number="27"] { --number: 27 } [data-number="28"] { --number: 28 } [data-number="29"] { --number: 29 } [data-number="30"] { --number: 30 } [data-number="31"] { --number: 31 } [data-number="32"] { --number: 32 } [data-number="33"] { --number: 33 } [data-number="34"] { --number: 34 } [data-number="35"] { --number: 35 } [data-number="36"] { --number: 36 } [data-number="37"] { --number: 37 } [data-number="38"] { --number: 38 } [data-number="39"] { --number: 39 } [data-number="40"] { --number: 40 } [data-number="41"] { --number: 41 } [data-number="42"] { --number: 42 } [data-number="43"] { --number: 43 } [data-number="44"] { --number: 44 } [data-number="45"] { --number: 45 } [data-number="46"] { --number: 46 } [data-number="47"] { --number: 47 } [data-number="48"] { --number: 48 } [data-number="49"] { --number: 49 } [data-number="50"] { --number: 50 } [data-number="51"] { --number: 51 } [data-number="52"] { --number: 52 } [data-number="53"] { --number: 53 } [data-number="54"] { --number: 54 } [data-number="55"] { --number: 55 } [data-number="56"] { --number: 56 } [data-number="57"] { --number: 57 } [data-number="58"] { --number: 58 } [data-number="59"] { --number: 59 } [data-number="60"] { --number: 60 } [data-number="61"] { --number: 61 } [data-number="62"] { --number: 62 } [data-number="63"] { --number: 63 } [data-number="64"] { --number: 64 } [data-number="65"] { --number: 65 } [data-number="66"] { --number: 66 } [data-number="67"] { --number: 67 } [data-number="68"] { --number: 68 } [data-number="69"] { --number: 69 } [data-number="70"] { --number: 70 } [data-number="71"] { --number: 71 } [data-number="72"] { --number: 72 } [data-number="73"] { --number: 73 } [data-number="74"] { --number: 74 } [data-number="75"] { --number: 75 } [data-number="76"] { --number: 76 } [data-number="77"] { --number: 77 } [data-number="78"] { --number: 78 } [data-number="79"] { --number: 79 } [data-number="80"] { --number: 80 } [data-number="81"] { --number: 81 } [data-number="82"] { --number: 82 } [data-number="83"] { --number: 83 } [data-number="84"] { --number: 84 } [data-number="85"] { --number: 85 } [data-number="86"] { --number: 86 } [data-number="87"] { --number: 87 } [data-number="88"] { --number: 88 } [data-number="89"] { --number: 89 } [data-number="90"] { --number: 90 } [data-number="91"] { --number: 91 } [data-number="92"] { --number: 92 } [data-number="93"] { --number: 93 } [data-number="94"] { --number: 94 } [data-number="95"] { --number: 95 } [data-number="96"] { --number: 96 } [data-number="97"] { --number: 97 } [data-number="98"] { --number: 98 } [data-number="99"] { --number: 99 } [data-number="100"] { --number: 100 } /* ------------------------------------------------------------------- */ /* Scaling */ /* ------------------------------------------------------------------- */ :root { --size-unit: 16; --scale-strength: 1; --size-container-ideal: 1728; --size-container-min: 992px; --size-container-max: 1920px; --size-container: clamp(var(--size-container-min), 100vw, var(--size-container-max)); --size-font-fluid: calc(var(--size-container)/(var(--size-container-ideal)/var(--size-unit))); --size-font: calc(var(--size-unit)*1px + (var(--size-font-fluid) - (var(--size-unit)*1px))*var(--scale-strength)) } @media screen and (max-width:991px) { :root { --size-container-ideal: 834; --size-container-min: 768px; --size-container-max: 991px } } @media screen and (max-width:767px) { :root { --size-container-ideal: 550; --size-container-min: 480px; --size-container-max: 767px } } @media screen and (max-width:479px) { :root { --size-container-ideal: 390; --size-container-min: 320px; --size-container-max: 479px } } /* ------------------------------------------------------------------- */ /* Base */ /* ------------------------------------------------------------------- */ :after, :before { box-sizing: border-box } body, html { -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; -o-font-smoothing: antialiased } html { font-size: var(--size-font) } textarea { resize: none } video { -o-object-fit: cover; object-fit: cover; width: 100% } svg { max-width: 100% } strong { font-weight: 600 } a { color: inherit; text-decoration: none } a:not([class]) { text-decoration: underline } a:focus-visible, button:focus-visible { outline: 1px solid var(--color-red) } button { background-color: unset; border: none; margin: unset; padding: unset; text-align: inherit } button:not(.is-disabled), button:not(:disabled) { cursor: pointer } button.is-disabled, button:disabled { opacity: .1; pointer-events: none } [data-disabled] { cursor: not-allowed } [data-hover] { cursor: pointer } :where([tabindex]), a, button, input { outline-offset: .5em; transition: outline-offset var(--animation-default-fast) } [tabindex]:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible { outline-color: var(--_color---brand--midnight-navy); outline-offset: .125em; outline-style: solid; outline-width: .125em } ::selection { background-color: var(--theme--selection-background); color: var(--theme--selection-text); text-shadow: none } ::-moz-selection { background-color: var(--theme--selection-background); color: var(--theme--selection-text); text-shadow: none } img::-moz-selection { background: transparent } .button, button, img::selection { background: transparent } /* ------------------------------------------------------------------- */ /* Scrollbar */ /* ------------------------------------------------------------------- */ * { scrollbar-color: rgba(0, 0, 0, .25) transparent; scrollbar-width: thin } ::-webkit-scrollbar { height: .25rem; width: .25rem } ::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, .25); border-radius: 100vw } ::-webkit-scrollbar-track { background: transparent } body::-webkit-scrollbar, html::-webkit-scrollbar { display: none } body, html { scrollbar-width: none } body { -ms-overflow-style: none; overscroll-behavior: none; scroll-behavior: auto } /* ------------------------------------------------------------------- */ /* Webflow Reset */ /* ------------------------------------------------------------------- */ .w-embed:after, .w-embed:before, .w-richtext:after, .w-richtext:before { content: unset } .w-richtext>:first-child { margin-top: 0 } .w-richtext>:last-child { margin-bottom: 0 } .w-richtext a { position: relative; z-index: 4 } [data-visible=""] { display: none } /* ------------------------------------------------------------------- */ /* Utilities */ /* ------------------------------------------------------------------- */ .u-hide-if-empty-cms:not(:has(.w-dyn-item)), .u-hide-if-empty:empty, .u-hide-if-empty:has(>*):not(:has(>:not(.w-condition-invisible))) { display: none !important } [class*=u-text-clamp].w-richtext>*, [class*=u-text-clamp]:not(.w-richtext) { display: -webkit-box; line-clamp: 1; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden } [class*=u-text-clamp].w-richtext>:not(:first-child) { display: none } .u-text-clamp-2.w-richtext>*, .u-text-clamp-2:not(.w-richtext) { line-clamp: 2; -webkit-line-clamp: 2 } .u-text-clamp-3.w-richtext>*, .u-text-clamp-3:not(.w-richtext) { line-clamp: 3; -webkit-line-clamp: 3 } .u-text-clamp-4.w-richtext>*, .u-text-clamp-4:not(.w-richtext) { line-clamp: 4; -webkit-line-clamp: 4 } .u-mask-to-bottom { -webkit-mask-image: linear-gradient(180deg, #000 0, #000 20%, transparent); mask-image: linear-gradient(180deg, #000 0, #000 20%, transparent) } /* ------------------------------------------------------------------- */ /* Lenis */ /* ------------------------------------------------------------------- */ .lenis { -ms-overflow-style: none; scrollbar-width: none } html.lenis, html.lenis body { height: auto } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain } .lenis.lenis-stopped { overflow: clip } .lenis.lenis-smooth iframe { pointer-events: none } /* ------------------------------------------------------------------- */ /* Page Background Parallax */ /* ------------------------------------------------------------------- */ .page-background__parallax { -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent) } .page-background__parallax:nth-of-type(2) { -webkit-mask-image: linear-gradient(transparent, #000 30%); mask-image: linear-gradient(transparent, #000 30%) } .page-background__parallax:nth-of-type(2) .page-background__inner { transform: rotate(180deg) } /* ------------------------------------------------------------------- */ /* FOUC */ /* ------------------------------------------------------------------- */ @media screen and (min-width:992px) { html:not(.wf-design-mode, .w-editor) [data-reveal-group], html:not(.wf-design-mode, .w-editor) [data-reveal-text] { opacity: 0 } } .line-mask { padding-bottom: 0.2em; margin-bottom: -0.2em; } /* ------------------------------------------------------------------- */ /* Cursor */ /* ------------------------------------------------------------------- */ .cursor { transition: opacity var(--animation-default) } body:has([data-cursor]:hover) .cursor { opacity: 1 } body:has([data-cursor=""]:hover) .cursor { opacity: 0 } /* ------------------------------------------------------------------- */ /* Buttons */ /* ------------------------------------------------------------------- */ .button__icon>div { align-items: center; display: flex; justify-content: center; position: absolute; transition: transform var(--animation-default) } .button__icon>div:first-child { transform: translateX(0) translateY(0) } .button__icon>div:last-child { transform: translateX(-1em) translateY(1em) } .button__icon:after { content: ""; display: block; height: 1em; width: 1em } .button__bg { inset: 0; transition: inset var(--animation-default) } .button [data-button-animate-chars] { display: inline-block; overflow: hidden; position: relative } .button [data-button-animate-chars] span { display: inline-block; position: relative; text-shadow: 0 1.3em currentColor; transform: translateY(0) rotate(.001deg); transition: transform var(--animation-default) } @media (hover:hover) and (pointer:fine) { .button:is(:hover, :focus-visible, :focus-within) .button__icon>div { transform: translateX(1em) translateY(-1em) } .button:is(:hover, :focus-visible, :focus-within) .button__icon>div:last-child { transform: translateX(0) translateY(0) } .button:is(:hover, :focus-visible, :focus-within) .button__bg { inset: .125em } .button:is(:hover, :focus-visible, :focus-within) [data-button-animate-chars] span { transform: translateY(-1.3em) rotate(.001deg) } } /* ------------------------------------------------------------------- */ /* Text Links */ /* ------------------------------------------------------------------- */ [data-underline-link] { cursor: pointer; position: relative; text-decoration: none } [data-underline-link=alt]:after, [data-underline-link=alt]:before, [data-underline-link]:before { background-color: currentColor; bottom: -.0625em; content: ""; height: .0625em; left: 0; position: absolute; transform: scaleX(0) rotate(.001deg); transform-origin: right; transition: transform var(--animation-default); width: 100% } [data-underline-link=alt]:before { transform: scaleX(1) rotate(.001deg); transform-origin: left; transition-delay: .3s } [data-underline-link=alt]:after { transform: scaleX(0) rotate(.001deg); transform-origin: right; transition-delay: 0s } @media (hover:hover) and (pointer:fine) { [data-hover]:hover [data-underline-link]:before, [data-underline-link]:hover:before { transform: scaleX(1) rotate(.001deg); transform-origin: left } [data-hover]:hover [data-underline-link=alt]:before, [data-underline-link=alt]:hover:before { transform: scaleX(0) rotate(.001deg); transform-origin: right; transition-delay: 0s } [data-hover]:hover [data-underline-link=alt]:after, [data-underline-link=alt]:hover:after { transform: scaleX(1) rotate(.001deg); transform-origin: left; transition-delay: .3s } } /* ------------------------------------------------------------------- */ /* Navigation */ /* ------------------------------------------------------------------- */ .sidenav__button-bg { inset: 0; transition: inset var(--animation-default) } .sidenav__menu-list-item { transition: opacity var(--animation-ease), transform var(--animation-default) } .sidenav__address-email { transition: opacity var(--animation-ease) } @media (hover:hover) and (pointer:fine) { .sidenav__menu-list-item:is(:hover, :focus-visible, :focus-within) { opacity: 1; transform: translate(1rem) } .sidenav__address-email:is(:hover, :focus-visible, :focus-within) { opacity: 1 } @media (hover:hover) and (pointer:fine) { .sidenav .sidenav__button:hover .sidenav__button-bg { inset: .125em } } } /* ------------------------------------------------------------------- */ /* Page Background */ /* ------------------------------------------------------------------- */ .page-background { -webkit-mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent); mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent) } .page-background[data-wf--global---background-gradients--variants-rotation=rotate--90], .page-background[data-wf--global---background-gradients--variants-rotation=rotate-90] { -webkit-mask-image: linear-gradient(270deg, transparent, #000 25%, #000 75%, transparent); mask-image: linear-gradient(270deg, transparent, #000 25%, #000 75%, transparent) } /* ------------------------------------------------------------------- */ /* Swiper */ /* ------------------------------------------------------------------- */ .swiper { --swiper-pagination-color: currentColor; --swiper-pagination-bottom: auto; --swiper-pagination-bullet-size: 0.5em; --swiper-pagination-bullet-inactive-color: currentColor; --swiper-pagination-bullet-inactive-opacity: 0.15; --swiper-pagination-bullet-horizontal-gap: 0.25em; --swiper-wrapper-transition-timing-function: cubic-bezier(0.625, 0.05, 0, 1) } .swiper-slide { --gap: 0; padding-bottom: var(--gap) } .swiper-slide:last-of-type { margin-bottom: calc(var(--gap)*-1) } .swiper-navigation__button { transition: opacity .2s ease } .swiper-button-disabled { opacity: 0; pointer-events: none } /* ------------------------------------------------------------------- */ /* Cover */ /* ------------------------------------------------------------------- */ html:not(.wf-design-mode, .w-editor) .cover-infos__header, html:not(.wf-design-mode, .w-editor) .cover-infos__item, html:not(.wf-design-mode, .w-editor) .cover-infos__item.cc-fade { opacity: 0; transform: translateY(1rem); transition: opacity var(--animation-ease), transform var(--animation-ease-slow) } html:not(.wf-design-mode, .w-editor) .cover-infos__header.is-visible, html:not(.wf-design-mode, .w-editor) .cover-infos__item.is-visible { opacity: 1; transform: translateY(0) } html:not(.wf-design-mode, .w-editor) .cover-infos__header.is-visible.cc-fade, html:not(.wf-design-mode, .w-editor) .cover-infos__item.is-visible.cc-fade { opacity: .4 } html:not(.wf-design-mode, .w-editor) .cover-infos__header.is-leaving, html:not(.wf-design-mode, .w-editor) .cover-infos__item.is-leaving { opacity: 0; transform: translateY(1rem); transition: opacity var(--animation-ease), transform var(--animation-ease-slow) } html:not(.wf-design-mode, .w-editor) .swiper-slide:nth-child(2n) .cover-infos__bg { transform: rotate(180deg) } html:is(.wf-design-mode, .w-editor) .intro__target { height: 0 } :is(.wf-design-mode, .w-editor) [data-horizontal-scroll-wrap] { flex-flow: column } /* ------------------------------------------------------------------- */ /* Team */ /* ------------------------------------------------------------------- */ .team-row:last-of-type { border-width: 0 } /* ------------------------------------------------------------------- */ /* Image Cycle */ /* ------------------------------------------------------------------- */ [data-image-cycle-item=active] { opacity: 1; transition: opacity .4s ease 0s, visibility 0s ease 0s; visibility: visible; z-index: 3 } [data-image-cycle-item=previous] { opacity: 0; transition: opacity .4s ease .4s, visibility 0s ease .4s; visibility: visible; z-index: 2 } [data-image-cycle-item=not-active] { opacity: 0; visibility: hidden; z-index: 1 } /* ------------------------------------------------------------------- */ /* Projects */ /* ------------------------------------------------------------------- */ .button-filter { transition: color var(--animation-default), background-color var(--animation-default) } .button-filter[data-filter-status=active] { background-color: var(--theme--accent); color: var(--theme--text) } .projects__item[data-filter-status=active] { opacity: 1; position: relative; transform: scale(1) rotate(.001deg); transition: opacity var(--animation-default), transform var(--animation-default); visibility: visible } .projects__item[data-filter-status=transition-out] { opacity: 0; transform: scale(.98) rotate(.001deg); transition: opacity var(--animation-default-fast), transform var(--animation-default-fast); visibility: visible } .projects__item[data-filter-status=not-active] { opacity: 0; position: absolute; transform: scale(.98) rotate(.001deg); visibility: hidden } html:not(.wf-design-mode, .w-editor) .card-project__overlay { opacity: 0; transition: opacity var(--animation-default), transform var(--animation-default) } html:not(.wf-design-mode, .w-editor) .card-project .movie-info__item, html:not(.wf-design-mode, .w-editor) .card-project .movie-info__title { opacity: 0; transform: translateY(1rem); transition: opacity var(--animation-default), transform var(--animation-default); transition-delay: .05s } html:not(.wf-design-mode, .w-editor) .card-project .movie-info__item:nth-child(2) { transition-delay: .1s } html:not(.wf-design-mode, .w-editor) .card-project .movie-info__item:nth-child(3) { transition-delay: .15s } html:not(.wf-design-mode, .w-editor) .card-project .movie-info__item:nth-child(4) { transition-delay: .2s } html:not(.wf-design-mode, .w-editor) .card-project .movie-info__item:nth-child(5) { transition-delay: .25s } html:not(.wf-design-mode, .w-editor) .card-project .movie-info__item:nth-child(6) { transition-delay: .3s } html:not(.wf-design-mode, .w-editor) .card-project .movie-info__item:nth-child(7) { transition-delay: .35s } @media (hover:hover) and (pointer:fine) { html:not(.wf-design-mode, .w-editor) .card-project:is(:hover, :focus-visible, :focus-within) .card-project__overlay { opacity: 1 } html:not(.wf-design-mode, .w-editor) .card-project:is(:hover, :focus-visible, :focus-within) .movie-info__item, html:not(.wf-design-mode, .w-editor) .card-project:is(:hover, :focus-visible, :focus-within) .movie-info__title { opacity: 1; transform: translateY(0) } } /* ------------------------------------------------------------------- */ /* Gallery */ /* ------------------------------------------------------------------- */ @media screen and (min-width:992px) { .gallery-grid { display: grid; grid-auto-rows: clamp(18rem, 26vw, 38rem) 17vw 17vw 22vw 10vw 10vw 10vw clamp(18rem, 26vw, 38rem) 17vw; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: unset } .gallery-item:nth-child(14n+1) { grid-column: span 5 } .gallery-item:nth-child(14n+2) { grid-column: span 7 } .gallery-item:nth-child(14n+3) { grid-column: span 8; grid-row: span 2 } .gallery-item:nth-child(14n+4), .gallery-item:nth-child(14n+5), .gallery-item:nth-child(14n+6) { grid-column: span 4 } .gallery-item:nth-child(14n+7) { grid-column: span 8 } .gallery-item:nth-child(14n+8) { grid-column: span 6; grid-row: span 3 } .gallery-item:nth-child(14n+9) { grid-column: span 6; grid-row: span 2 } .gallery-item:nth-child(14n+10) { grid-column: span 6 } .gallery-item:nth-child(14n+11) { grid-column: span 5 } .gallery-item:nth-child(14n+12), .gallery-item:nth-child(14n+13) { grid-column: span 7 } .gallery-item:nth-child(14n+14) { grid-column: span 5 } @media (max-width:767px) { .gallery-grid { grid-auto-rows: auto; grid-template-columns: 1fr } .gallery-item:nth-child(n) { grid-column: span 1; grid-row: span 1 } } } /* ------------------------------------------------------------------- */ /* Aurora */ /* ------------------------------------------------------------------- */ .aurora { --aurora-color-1: #23cac0; --aurora-color-2: #2398ca; --aurora-color-3: #6d1d81 } .aurora__layer:first-child { animation: color1 19s ease-in-out infinite; background-color: rgba(35, 202, 192, .86) } .aurora__layer:nth-child(2) { animation: color2 25s ease-in-out infinite; background-color: rgba(35, 152, 202, .4) } .aurora__layer:nth-child(3) { animation: color3 15s ease-in-out infinite; background-color: rgba(109, 29, 129, .55) } .aurora__overlay { backdrop-filter: blur(10rem); background-color: rgba(15, 23, 32, .92) } @keyframes hue-rotate { to { filter: hue-rotate(1turn) } } @keyframes color1 { 0% { left: 0; top: 0 } 25% { left: 0 } 50% { top: 100vh } 75% { left: 100vw } to { left: 0; top: 0 } } @keyframes color2 { 0% { left: 100vw; top: 50vh } 25% { top: 100vh } 50% { left: 0 } 75% { top: 0 } to { left: 100vw; top: 50vh } } @keyframes color3 { 0% { left: 50vw; top: 100vh } 25% { left: 100vw } 50% { top: 0 } 75% { left: 0 } to { left: 50vw; top: 100vh } }