@charset "UTF-8";
/*
Theme Name: LS302 Starter
Description: Thème WordPress optimisé avec ACF et Gutenberg.
Theme URI: https://traqpad.fr
Author: M. CORENTIN GOULOUMY pour TRAQPAD
...
*/
@import 'https://use.typekit.net/olh7ard.css';
:root {
--primary: #FF6600;
--primary-rgb: 255, 102, 0;
--secondary: #FFB65A;
--secondary-rgb: 255, 182, 90;
--white: #FFFFFF;
--white-rgb: 255, 255, 255;
--black: #101010;
--black-rgb: 16, 16, 16;
--black-light: #201F1F;
--black-light-rgb: 32, 31, 31;
--layout-transition: 1s;
--overlay: url('/app/themes/ls302-starter/assets/img/overlay.webp');
--logo-url: url('data:image/svg+xml,');
--picto-url: url('data:image/svg+xml,');
}
:root .theme-ls302 {
--color-title: rgba(var(--white-rgb), .95);
--color-paragraph: rgba(var(--white-rgb), .7);
--color-between: rgba(var(--white-rgb), .5);
--color-less: rgba(var(--white-rgb), .35);
--color-background: var(--black);
--color-border: rgba(var(--white-rgb), .5) ;
}
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
text-size-adjust: 100%;
}
h1, h2, h3, h4, h5, h6, p {
margin: 0;
font-weight: normal;
}
button {
cursor: pointer;
background: none;
}
a {
text-decoration: none;
color: inherit;
}
html ::-webkit-scrollbar {
width: 4px;
height: 4px;
}
html ::-webkit-scrollbar-track {
background: transparent;
}
html ::-webkit-scrollbar-thumb {
background: rgba(var(--white-rgb), 0.1);
border-radius: 4px;
transition: 0.25s ease;
}
html ::-webkit-scrollbar-thumb:hover {
background: rgba(var(--white-rgb), 0.25);
}
html ::selection {
background: var(--primary);
color: var(--color-title);
}
html,
html > body {
margin: 0;
padding: 0;
box-sizing: border-box;
height: 100%;
}
html,
html > body {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
html > body {
background: var(--color-background);
overflow: hidden;
--ratio-container-compensation: calc((100vw - (100vw * (var(--ratio-container)))) / 2);
--clip-path: circle(calc(var(--page-transition) * 1.5%) at var(--clip-x, 50) var(--clip-y, 50));
}
html > body.is-dragging-video {
user-select: none !important;
-webkit-user-select: none !important;
cursor: grabbing !important;
}
html > body .header-content,
html > body .site-container,
html > body .body-overlay,
html > body .site-overlay {
position: absolute;
inset: 0;
z-index: 10;
width: 100%;
height: 100%;
will-change: transform, opacity;
transform-origin: center center;
transition: var(--layout-transition, 0) ease-in-out;
overflow: visible;
}
html > body .site-content {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
html > body .site-content > main {
width: 100%;
height: 100%;
position: relative;
transition: 0.5s;
overflow: hidden;
}
html > body .site-content > main:before {
content: "";
position: absolute;
inset: 0;
width: 100%;
height: 100%;
background: var(--overlay) no-repeat center center/cover;
opacity: 0;
z-index: 100;
pointer-events: none;
transition: background-image 1s;
}
html > body .site-content > main > .container {
width: 100%;
height: 100%;
position: relative;
min-height: 60dvh;
display: flex;
flex-direction: column;
align-items: center;
overflow-y: auto;
scroll-behavior: smooth;
filter: grayscale(0);
}
html > body .site-content > main.home > .container {
overflow: hidden;
}
html > body .header-content {
z-index: 100;
pointer-events: none;
}
html > body .site-content.is-leaving > main, html > body .site-content.is-entering > main {
transition: background-color 1s;
}
html > body .site-content.is-leaving {
z-index: 49;
}
html > body .site-content.is-leaving > main {
animation: backgroundTransition 3s infinite;
}
html > body .site-content.is-entering {
z-index: 51;
}
html > body .site-content.is-entering > main {
background-color: var(--color-background);
clip-path: var(--clip-path);
}
html > body .site-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 50;
transition: background 0.5s;
pointer-events: none;
clip-path: var(--clip-path);
}
html > body .body-overlay {
background: transparent;
}
@media screen and (min-width: 1024px) {
html > body.leftbar-active, html > body.rightbar-active, html > body.downbar-active, html > body.frontbar-active {
--side-distance: 30.5rem;
}
}
html > body.leftbar-active .header-content,
html > body.leftbar-active .site-content,
html > body.leftbar-active .body-overlay, html > body.rightbar-active .header-content,
html > body.rightbar-active .site-content,
html > body.rightbar-active .body-overlay, html > body.downbar-active .header-content,
html > body.downbar-active .site-content,
html > body.downbar-active .body-overlay, html > body.frontbar-active .header-content,
html > body.frontbar-active .site-content,
html > body.frontbar-active .body-overlay {
overflow: visible;
pointer-events: none;
}
html > body.leftbar-active .site-content > main, html > body.rightbar-active .site-content > main, html > body.downbar-active .site-content > main, html > body.frontbar-active .site-content > main {
border-radius: 1rem;
}
html > body.leftbar-active .site-content > main:before, html > body.rightbar-active .site-content > main:before, html > body.downbar-active .site-content > main:before, html > body.frontbar-active .site-content > main:before {
opacity: 1;
}
html > body.leftbar-active .site-content > main > .container, html > body.rightbar-active .site-content > main > .container, html > body.downbar-active .site-content > main > .container, html > body.frontbar-active .site-content > main > .container {
transition: filter 1s;
filter: grayscale(1);
}
html > body.leftbar-active .body-overlay, html > body.rightbar-active .body-overlay, html > body.downbar-active .body-overlay, html > body.frontbar-active .body-overlay {
content: "";
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 2000;
display: block;
mix-blend-mode: luminosity;
cursor: pointer;
pointer-events: all;
background-color: rgba(var(--white-rgb), 0.025);
border-radius: 1rem;
}
html > body.frontbar-active .header-content,
html > body.frontbar-active .site-container,
html > body.frontbar-active .body-overlay {
transform: scale(calc(var(--ratio-container, 1) * 0.66));
}
html > body.frontbar-active .frontbar {
opacity: 1;
--lottie-scale: var(--ratio-container-compensate, 1);
}
html > body.frontbar-active .downbar,
html > body.frontbar-active .leftbar,
html > body.frontbar-active .sidebar {
opacity: 0;
}
html > body.leftbar-active .header-content,
html > body.leftbar-active .site-container,
html > body.leftbar-active .body-overlay {
transform: translateX(calc(var(--sidebar-width) - var(--ratio-container-compensation))) scale(var(--ratio-container, 1));
}
html > body.leftbar-active .downbar {
opacity: 0;
}
html > body.rightbar-active .header-content,
html > body.rightbar-active .site-container,
html > body.rightbar-active .body-overlay {
transform: translateX(calc(-1 * var(--sidebar-width) + var(--ratio-container-compensation))) scale(var(--ratio-container, 1));
}
html > body.rightbar-active .downbar {
opacity: 0;
}
html > body.downbar-active .header-content,
html > body.downbar-active .site-container,
html > body.downbar-active .body-overlay {
transform: scale(var(--ratio-container, 1)) translateY(-80dvh);
}
html > body.downbar-active .leftbar {
opacity: 0;
}
.img-container {
position: relative;
}
.img-container[class*=panim] {
line-height: 0;
--transition-1: 1s;
--transition-2: .95s;
}
.img-container[class*=panim]:before, .img-container[class*=panim]:after {
content: "";
display: block;
position: absolute;
right: 0;
top: 0;
height: var(--img-height, 100%);
width: 100%;
}
.img-container[class*=panim]:before {
z-index: 10;
mix-blend-mode: overlay;
background: rgba(var(--primary-rgb), 1);
transition: width var(--transition-1) ease-in-out, height var(--transition-1) ease-in-out;
}
.img-container[class*=panim]:after {
z-index: 15;
background: #282828;
transition: width var(--transition-2) ease-in-out, height var(--transition-2) ease-in-out;
}
@media screen and (min-width: 1024px) {
.img-container[class*=panim].panim-long {
--transition-1: 1s;
--transition-2: .95s;
}
.img-container[class*=panim].panim-long:before, .img-container[class*=panim].panim-long:after {
height: 100%;
width: var(--img-height, 100%);
}
.img-container[class*=panim].panim-long:before {
z-index: 10;
mix-blend-mode: overlay;
background: rgba(var(--primary-rgb), 1);
transition: width 1.5s ease-in-out;
}
.img-container[class*=panim].panim-long:after {
z-index: 15;
background: #282828;
transition: width 1.45s ease-in-out;
}
}
footer {
width: 100%;
}
@keyframes backgroundTransition {
0% {
background-color: var(--color-background);
}
50% {
background-color: rgba(var(--white-rgb), 0.05);
}
100% {
background-color: var(--color-background);
}
}
:root {
--website-padding: 1.5rem;
--box-padding: 1rem;
--font-size: 16px;
font-size: var(--font-size);
}
@media (min-width: 375px) {
:root {
--font-size: calc(16px + 0.0213 * (100vw - 375px));
}
}
@media (min-width: 768px) {
:root {
--font-size: 16px;
--website-padding: calc((48 * (1px - (((1440px - 100vw)*100)/(1440 - 768)/100)) + 1.5rem));
--box-padding: calc((16 * (1px - (((1440px - 100vw)*100)/(1440 - 768)/100)) + 1rem));
}
}
@media (min-width: 1440px) {
:root {
--website-padding: 4.5rem;
--box-padding: 2rem;
--font-size: calc(16px + ((18 - 16) / (1680 - 1440)) * (100vw - 1440px));
}
}
@media (min-width: 1680px) {
:root {
--font-size: 18px;
}
}
[class^=section],
section {
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
padding-left: var(--website-padding);
padding-right: var(--website-padding);
padding-top: calc(var(--padding-top) * 0.625);
padding-bottom: calc(var(--padding-bottom) * 0.625);
--padding-top: 8rem;
--padding-bottom: 8rem;
--layout-max-width: 42rem;
color: var(--color-paragraph, inherit);
position: relative;
}
@media screen and (min-width: 1024px) {
[class^=section],
section {
padding-top: var(--padding-top);
padding-bottom: var(--padding-bottom);
--layout-max-width: 92rem;
}
}
[class^=section] > .container,
section > .container {
position: relative;
align-self: center;
width: 100%;
max-width: var(--layout-max-width);
}
[class^=section].section-full,
section.section-full {
--layout-max-width: 100%;
}
body {
font-family: "Gotham", sans-serif;
font-style: normal;
font-weight: 400;
color: var(--color-paragraph, inherit);
font-size: 1.0669249896rem;
line-height: 1.3040194318rem;
}
@media screen and (min-width: 768px) {
body {
font-size: 1.125rem;
line-height: 1.375rem;
}
}
@media screen and (min-width: 1024px) {
body {
font-size: 1.125rem;
line-height: 1.375rem;
}
}
body {
line-height: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
html > body > .site-content > main p a,
html > body > .site-content > main ul a {
color: var(--color-paragraph);
text-decoration: underline;
transition: 0.25s;
}
html > body > .site-content > main p a:hover,
html > body > .site-content > main ul a:hover {
color: var(--color-title);
}
html > body > .site-content > main strong {
font-weight: bold;
}
.surtitle {
font-family: "Playfair Display", sans-serif;
font-style: italic;
font-size: 1.2498278345rem;
line-height: 1.6664371127rem;
letter-spacing: -0.0249965567rem;
}
@media screen and (min-width: 768px) {
.surtitle {
font-size: 1.5rem;
line-height: 2rem;
letter-spacing: -0.03rem;
}
}
@media screen and (min-width: 1024px) {
.surtitle {
font-size: 1.5rem;
line-height: 2rem;
letter-spacing: -0.03rem;
}
}
.surtitle {
font-weight: 400;
color: var(--color-between);
margin-left: 2.625rem;
margin-bottom: 0.5rem;
position: relative;
width: fit-content;
max-width: 100%;
}
.surtitle:before {
content: "";
position: absolute;
left: -2.625rem;
top: 50%;
width: 2rem;
height: 0.0625rem;
transform: translateY(-50%);
background: var(--color-title);
opacity: 0.25;
}
.surtitle.small {
font-size: 1.0669249896rem;
line-height: 1.4225666529rem;
letter-spacing: -0.0213384998rem;
}
@media screen and (min-width: 768px) {
.surtitle.small {
font-size: 1.125rem;
line-height: 1.5rem;
letter-spacing: -0.0225rem;
}
}
@media screen and (min-width: 1024px) {
.surtitle.small {
font-size: 1.125rem;
line-height: 1.5rem;
letter-spacing: -0.0225rem;
}
}
.surtitle.small {
margin-left: 1.625rem;
margin-bottom: 0.25rem;
}
.surtitle.small:before {
left: -1.625rem;
width: 1rem;
}
.credit {
font-family: "Gotham", sans-serif;
font-style: normal;
font-size: 0.875rem;
line-height: 1.09375rem;
letter-spacing: -0.0175rem;
}
@media screen and (min-width: 768px) {
.credit {
font-size: 0.875rem;
line-height: 1.09375rem;
letter-spacing: -0.0175rem;
}
}
@media screen and (min-width: 1024px) {
.credit {
font-size: 0.875rem;
line-height: 1.09375rem;
letter-spacing: -0.0175rem;
}
}
.credit {
font-weight: 700;
color: var(--color-title);
text-transform: uppercase;
}
.pitch {
font-family: "Gotham", sans-serif;
font-style: normal;
font-size: 0.75rem;
line-height: 0.875rem;
}
@media screen and (min-width: 768px) {
.pitch {
font-size: 0.75rem;
line-height: 0.875rem;
}
}
@media screen and (min-width: 1024px) {
.pitch {
font-size: 0.75rem;
line-height: 0.875rem;
}
}
.pitch {
font-weight: 400;
color: var(--color-paragraph);
text-transform: uppercase;
}
.button {
font-family: "Gotham", sans-serif;
font-style: normal;
font-size: 1.0669249896rem;
line-height: 1.4225666529rem;
}
@media screen and (min-width: 768px) {
.button {
font-size: 1.125rem;
line-height: 1.5rem;
}
}
@media screen and (min-width: 1024px) {
.button {
font-size: 1.125rem;
line-height: 1.5rem;
}
}
.button {
font-style: normal;
font-weight: 700;
}
.button.button-secondary {
font-size: 0.875rem;
line-height: 1.5rem;
}
@media screen and (min-width: 768px) {
.button.button-secondary {
font-size: 0.875rem;
line-height: 1.5rem;
}
}
@media screen and (min-width: 1024px) {
.button.button-secondary {
font-size: 0.875rem;
line-height: 1.5rem;
}
}
.button.button-secondary {
font-weight: 400;
}
h1,
.h1 {
font-family: "Gotham", sans-serif;
font-style: normal;
font-size: 1.8298550549rem;
line-height: 2.6837874139rem;
letter-spacing: -0.0365971011rem;
}
@media screen and (min-width: 768px) {
h1,
.h1 {
font-size: 3rem;
line-height: 4.4rem;
letter-spacing: -0.06rem;
}
}
@media screen and (min-width: 1024px) {
h1,
.h1 {
font-size: 3rem;
line-height: 4.4rem;
letter-spacing: -0.06rem;
}
}
h1,
.h1 {
font-weight: 700;
text-wrap: balance;
color: var(--color-title);
}
h1 > em,
.h1 > em {
font-family: "Playfair Display", sans-serif;
font-style: italic;
font-size: 2.1435469251rem;
line-height: 2.3579016176rem;
letter-spacing: -0.0428709385rem;
}
@media screen and (min-width: 768px) {
h1 > em,
.h1 > em {
font-size: 4rem;
line-height: 4.4rem;
letter-spacing: -0.08rem;
}
}
@media screen and (min-width: 1024px) {
h1 > em,
.h1 > em {
font-size: 4rem;
line-height: 4.4rem;
letter-spacing: -0.08rem;
}
}
h1 > em,
.h1 > em {
display: block;
font-weight: 400;
font-style: italic;
}
.h1bis {
font-family: "Gotham", sans-serif;
font-style: normal;
font-size: 1.7002826345rem;
line-height: 2.1253532931rem;
letter-spacing: -0.0340056527rem;
}
@media screen and (min-width: 768px) {
.h1bis {
font-size: 2.625rem;
line-height: 3.28125rem;
letter-spacing: -0.0525rem;
}
}
@media screen and (min-width: 1024px) {
.h1bis {
font-size: 2.625rem;
line-height: 3.28125rem;
letter-spacing: -0.0525rem;
}
}
.h1bis {
font-weight: 700;
text-wrap: balance;
}
h2,
.h2 {
font-family: "Gotham", sans-serif;
font-style: normal;
font-size: 1.4640856959rem;
line-height: 1.8301071199rem;
letter-spacing: -0.0292817139rem;
}
@media screen and (min-width: 768px) {
h2,
.h2 {
font-size: 2rem;
line-height: 2.5rem;
letter-spacing: -0.04rem;
}
}
@media screen and (min-width: 1024px) {
h2,
.h2 {
font-size: 2rem;
line-height: 2.5rem;
letter-spacing: -0.04rem;
}
}
h2,
.h2 {
font-weight: 700;
text-wrap: balance;
color: var(--color-title);
}
h2.mobile-small,
.h2.mobile-small {
font-size: 1.1305779399rem;
line-height: 1.3566935279rem;
letter-spacing: -0.0271338706rem;
}
@media screen and (min-width: 768px) {
h2.mobile-small,
.h2.mobile-small {
font-size: 2rem;
line-height: 2.5rem;
letter-spacing: -0.04rem;
}
}
@media screen and (min-width: 1024px) {
h2.mobile-small,
.h2.mobile-small {
font-size: 2rem;
line-height: 2.5rem;
letter-spacing: -0.04rem;
}
}
h3,
.h3 {
font-family: "Gotham", sans-serif;
font-style: normal;
font-size: 1.2498278345rem;
line-height: 1.6664371127rem;
}
@media screen and (min-width: 768px) {
h3,
.h3 {
font-size: 1.5rem;
line-height: 2rem;
}
}
@media screen and (min-width: 1024px) {
h3,
.h3 {
font-size: 1.5rem;
line-height: 2rem;
}
}
h3,
.h3 {
font-weight: 700;
color: var(--color-title);
}
h4,
.h4 {
font-family: "Gotham", sans-serif;
font-style: normal;
font-size: 1.1305779399rem;
line-height: 1.5828091159rem;
}
@media screen and (min-width: 768px) {
h4,
.h4 {
font-size: 1.25rem;
line-height: 1.75rem;
}
}
@media screen and (min-width: 1024px) {
h4,
.h4 {
font-size: 1.25rem;
line-height: 1.75rem;
}
}
h4,
.h4 {
font-weight: 700;
color: var(--color-title);
}
h5,
.h5 {
font-family: "Gotham", sans-serif;
font-style: normal;
font-size: 1.0669249896rem;
line-height: 1.4225666529rem;
}
@media screen and (min-width: 768px) {
h5,
.h5 {
font-size: 1.125rem;
line-height: 1.5rem;
}
}
@media screen and (min-width: 1024px) {
h5,
.h5 {
font-size: 1.125rem;
line-height: 1.5rem;
}
}
h5,
.h5 {
font-weight: 700;
color: var(--color-title);
}
h6,
.h6 {
font-family: "Gotham", sans-serif;
font-style: normal;
font-size: 1rem;
line-height: 1.375rem;
}
@media screen and (min-width: 768px) {
h6,
.h6 {
font-size: 1rem;
line-height: 1.375rem;
}
}
@media screen and (min-width: 1024px) {
h6,
.h6 {
font-size: 1rem;
line-height: 1.375rem;
}
}
h6,
.h6 {
font-weight: 700;
color: var(--color-title);
}
.leftbar h1,
.leftbar .h1 {
font-family: "Gotham", sans-serif;
font-style: normal;
font-size: 1.2498278345rem;
line-height: 1.6664371127rem;
}
@media screen and (min-width: 768px) {
.leftbar h1,
.leftbar .h1 {
font-size: 1.5rem;
line-height: 2rem;
}
}
@media screen and (min-width: 1024px) {
.leftbar h1,
.leftbar .h1 {
font-size: 1.5rem;
line-height: 2rem;
}
}
.leftbar h1,
.leftbar .h1 {
font-weight: 700;
color: var(--color-title);
}
.leftbar h2,
.leftbar .h2 {
font-family: "Gotham", sans-serif;
font-style: normal;
font-size: 1.1305779399rem;
line-height: 1.5828091159rem;
}
@media screen and (min-width: 768px) {
.leftbar h2,
.leftbar .h2 {
font-size: 1.25rem;
line-height: 1.75rem;
}
}
@media screen and (min-width: 1024px) {
.leftbar h2,
.leftbar .h2 {
font-size: 1.25rem;
line-height: 1.75rem;
}
}
.leftbar h2,
.leftbar .h2 {
font-weight: 700;
color: var(--color-title);
}
.leftbar h3,
.leftbar .h3 {
font-family: "Gotham", sans-serif;
font-style: normal;
font-size: 1.0669249896rem;
line-height: 1.4225666529rem;
}
@media screen and (min-width: 768px) {
.leftbar h3,
.leftbar .h3 {
font-size: 1.125rem;
line-height: 1.5rem;
}
}
@media screen and (min-width: 1024px) {
.leftbar h3,
.leftbar .h3 {
font-size: 1.125rem;
line-height: 1.5rem;
}
}
.leftbar h3,
.leftbar .h3 {
font-weight: 700;
color: var(--color-title);
}
.leftbar h4,
.leftbar .h4 {
font-family: "Gotham", sans-serif;
font-style: normal;
font-size: 1rem;
line-height: 1.375rem;
}
@media screen and (min-width: 768px) {
.leftbar h4,
.leftbar .h4 {
font-size: 1rem;
line-height: 1.375rem;
}
}
@media screen and (min-width: 1024px) {
.leftbar h4,
.leftbar .h4 {
font-size: 1rem;
line-height: 1.375rem;
}
}
.leftbar h4,
.leftbar .h4 {
font-weight: 700;
color: var(--color-title);
}
.formatting {
word-break: break-word;
}
.formatting p, .formatting span, .formatting ul, .formatting ol, .formatting li, .formatting h1, .formatting h2, .formatting h3, .formatting h4, .formatting h5, .formatting h6,
.formatting blockquote, .formatting q, .formatting dl, .formatting dt, .formatting dd, .formatting figure, .formatting figcaption,
.formatting main, .formatting section, .formatting article, .formatting aside, .formatting footer, .formatting header, .formatting nav,
.formatting table, .formatting caption, .formatting th, .formatting tr, .formatting thead, .formatting tbody, .formatting tfoot, .formatting pre {
margin: 0;
padding: 0;
}
.formatting h1 {
margin: 3rem 0 2rem 0;
}
.formatting h2 {
margin: 2.5rem 0 1.75rem 0;
}
.formatting h3 {
margin: 2rem 0 1.5rem 0;
}
.formatting h4, .formatting h5, .formatting h6 {
margin: 2rem 0 1.25rem 0;
}
.formatting p {
margin: 1.125rem 0;
}
.formatting ul, .formatting ol {
margin: 0.75rem 0 1.5rem 0;
list-style: revert;
list-style-position: inside;
padding: revert;
padding-left: 0.75rem;
}
.formatting li {
margin-bottom: 0.5rem;
}
.formatting ul ul, .formatting ul ol, .formatting ol ul, .formatting ol ol {
margin: 0.5rem 0;
}
.formatting a:not(.button) {
color: var(--link-color, inherit);
text-decoration: underline;
transition: 0.25s;
}
.formatting a:not(.button):hover {
color: var(--link-hover-color, inherit);
}
.formatting blockquote {
margin: 1.5rem 0;
padding-left: 1.5rem;
border-left: 0.125rem solid var(--main-color);
opacity: 0.8;
}
.formatting q {
quotes: '"' '"' "" " " "";
}
.formatting dl {
margin: 1rem 0 1.5rem 0;
}
.formatting dt {
font-weight: 600;
margin: 1rem 0 0.5rem 0;
}
.formatting dd {
margin-left: 1.5rem;
margin-bottom: 0.5rem;
}
.formatting figure {
margin: 1.5rem 0;
}
.formatting figcaption {
margin-top: 0.75rem;
opacity: 0.7;
}
.formatting table {
width: 100%;
border-collapse: collapse;
}
.formatting thead, .formatting tbody, .formatting tfoot {
border-bottom: 1px solid currentColor;
}
.formatting th {
text-align: left;
font-weight: 600;
padding: 0.75rem;
}
.formatting td {
padding: 0.75rem;
}
.formatting tr:not(:last-child) {
position: relative;
}
.formatting tr:not(:last-child) td, .formatting tr:not(:last-child) th {
position: relative;
}
.formatting tr:not(:last-child) td:after, .formatting tr:not(:last-child) th:after {
content: "";
position: absolute;
bottom: -1px;
left: 0;
right: 0;
height: 1px;
background-color: var(--main-color);
opacity: 0.25;
}
.formatting caption {
caption-side: bottom;
margin-top: 0.5rem;
}
.formatting pre {
margin: 1.5rem 0;
padding: 1rem;
overflow-x: auto;
}
.formatting > *:first-child {
margin-top: 0;
}
.formatting > *:last-child {
margin-bottom: 0;
}
@font-face {
font-family: "Playfair Display";
font-style: italic;
font-weight: 400;
src: url("assets/fonts/PlayfairDisplay-Italic.woff2") format("woff2-variations");
font-display: swap;
}
section.section-home-slider {
height: 100dvh;
overflow: hidden;
justify-content: flex-end;
user-select: none;
-webkit-user-select: none;
touch-action: none;
-webkit-tap-highlight-color: transparent;
}
section.section-home-slider .videos-list {
position: absolute;
inset: 0;
height: 100dvh;
width: 100%;
scroll-snap-type: y mandatory;
scrollbar-width: none;
}
section.section-home-slider .videos-list .video-item {
list-style: none;
width: 100%;
height: 100dvh;
scroll-snap-align: start;
scroll-snap-stop: always;
}
section.section-home-slider .videos-list .video-item:before {
display: none;
}
section.section-home-slider .videos-list .video-item figure {
width: 100%;
height: 100%;
position: relative;
}
section.section-home-slider .videos-list .video-item figure > .container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
}
section.section-home-slider .section-fixed {
position: fixed;
inset: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
--padding-bottom: 2rem;
pointer-events: none;
}
section.section-home-slider .section-fixed > .container {
display: flex;
flex-direction: column;
gap: 4rem;
}
@media screen and (min-width: 1024px) {
section.section-home-slider .section-fixed > .container {
gap: 8rem;
}
}
section.section-home-slider .section-fixed > .container .videos-titles-carousel {
--video-item-height: 2rem;
height: calc(var(--video-item-height) * 3);
overflow: hidden;
position: relative;
display: flex;
align-items: center;
mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 50%, rgba(0, 0, 0, 0) 100%);
mask-repeat: no-repeat;
mask-size: 100% 100%;
opacity: 0;
}
@media screen and (min-width: 1024px) {
section.section-home-slider .section-fixed > .container .videos-titles-carousel {
--video-item-height: 3.25rem;
}
}
section.section-home-slider .section-fixed > .container .videos-titles-carousel .videos-information {
list-style: none;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
position: relative;
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
transform-origin: top center;
pointer-events: none;
}
@media screen and (max-width: 1023px) {
section.section-home-slider .section-fixed > .container .videos-titles-carousel .videos-information {
max-width: 70vw;
}
}
section.section-home-slider .section-fixed > .container .videos-titles-carousel .videos-information .video-item {
height: var(--video-item-height);
display: flex;
margin: 0;
padding: 0;
opacity: 0.5;
text-align: left;
text-transform: uppercase;
mix-blend-mode: multiply;
position: relative;
}
section.section-home-slider .section-fixed > .container .videos-titles-carousel .videos-information .video-item.is-active {
opacity: 1;
mix-blend-mode: normal;
}
section.section-home-slider .section-fixed > .container .videos-titles-carousel .videos-information .video-item > span {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
section.section-home-slider .section-fixed > .container .actions {
z-index: 1;
display: flex;
flex-direction: row-reverse;
}
section.section-home-slider .section-fixed > .container .actions .nav-button {
pointer-events: all;
max-width: max-content;
}
section.section-home-slider .progress {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0.3125rem;
background: linear-gradient(-90deg, var(--secondary) 0%, var(--primary) 50%);
z-index: 10;
pointer-events: none;
}
section.section-home-slider video {
width: 100%;
height: 100%;
object-position: center center;
object-fit: cover;
pointer-events: none;
opacity: 0;
transition: opacity 0.8s ease-in-out;
}
section.section-home-slider video .is-loaded {
opacity: 1;
}
section.section-project-hero {
min-height: 120dvh;
height: 100%;
position: sticky;
top: 0;
}
@media screen and (min-width: 1024px) {
section.section-project-hero {
min-height: 150dvh;
}
}
section.section-project-hero > .container.heading {
text-align: center;
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%);
max-width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
max-width: calc(45rem + var(--website-padding) * 2);
opacity: var(--opacity, 1);
padding-left: var(--website-padding);
padding-right: var(--website-padding);
}
section.section-project-hero > .container.heading > .title {
text-transform: uppercase;
}
section.section-project-hero > .container.heading > .description {
margin-top: 0.5rem;
color: var(--color-paragraph);
font-size: 0.75rem;
font-style: normal;
font-weight: 400;
line-height: normal;
max-width: 80%;
text-transform: uppercase;
text-wrap: balance;
}
section.section-project-hero > .container.heading > .tags {
margin-top: 1rem;
justify-content: center;
}
section.section-project-hero .container.has-thumbnail {
pointer-events: none;
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%) translateZ(0);
width: 100%;
max-width: 100%;
height: 100vh;
z-index: -1;
overflow: hidden;
display: flex;
justify-content: center;
--img-width: 100vw;
will-change: transform;
filter: blur(var(--blur, 0px));
will-change: transform, filter;
}
section.section-project-hero .container.has-thumbnail:before {
content: "";
position: absolute;
inset: 0;
width: 100%;
height: 100%;
background-color: var(--color-background);
opacity: calc(var(--overlay-opacity, 0.5) + var(--overlay-opacity-more, 0));
z-index: 1;
transform: scale(var(--scale, 1));
pointer-events: none;
will-change: transform, opacity;
}
section.section-project-hero .container.has-thumbnail > img {
width: 100%;
max-width: var(--img-width);
height: 100%;
object-fit: cover;
transform: scale(var(--scale, 1)) translate3d(0, 0, 0);
z-index: -1;
will-change: transform;
backface-visibility: hidden;
perspective: 1000px;
}
section.section-project-archive-hero > .container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 4rem;
}
section.section-project-archive-hero > .container .project-sorter {
overflow-x: auto;
overflow-y: hidden;
width: 100%;
padding-top: 2rem;
max-width: 92rem;
}
section.section-project-archive-hero > .container .project-sorter ul {
list-style: none;
display: flex;
flex-direction: row;
min-width: fit-content;
gap: 2rem;
}
@media screen and (min-width: 1024px) {
section.section-project-archive-hero > .container .project-sorter ul {
gap: 4rem;
}
}
section.section-project-archive-hero > .container .project-sorter ul > li {
min-width: fit-content;
overflow: visible;
padding-bottom: 0.5rem;
cursor: pointer;
position: relative;
}
section.section-project-archive-hero > .container .project-sorter ul > li:after {
content: "";
bottom: 0;
left: 0;
width: 0%;
height: 0.0625rem;
position: absolute;
background: var(--primary);
transition: width 1s ease-in-out;
}
section.section-project-archive-hero > .container .project-sorter ul > li span, section.section-project-archive-hero > .container .project-sorter ul > li h1 {
transition: color 0.25s ease-in-out;
}
section.section-project-archive-hero > .container .project-sorter ul > li:not(.active) span, section.section-project-archive-hero > .container .project-sorter ul > li:not(.active) h1 {
color: var(--color-between);
}
section.section-project-archive-hero > .container .project-sorter ul > li:hover span, section.section-project-archive-hero > .container .project-sorter ul > li:hover h1 {
color: var(--color-title);
}
section.section-project-archive-hero > .container .project-sorter ul > li.active:after {
width: 100%;
}
section.section-project-archive-hero > .container .project-sorter {
text-transform: uppercase;
}
section.section-project-archive-hero > .container .project-grid {
display: grid;
grid-template-columns: 1fr;
column-gap: 1.5rem;
row-gap: 1.5rem;
max-width: 100%;
width: 100%;
}
@media (min-width: 768px) {
section.section-project-archive-hero > .container .project-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
section.section-project-archive-hero > .container .project-grid {
grid-template-columns: repeat(3, 1fr);
}
}
section.section-hero > .container .h1 {
position: relative;
z-index: 2;
padding: 0 var(--website-padding);
}
@media screen and (min-width: 1024px) {
section.section-hero > .container .h1 {
padding: 0 calc(var(--website-padding) / 1.125);
}
}
section.section-hero > .container .h1.blend {
mix-blend-mode: difference;
}
section.section-hero > .container .h1.blend.twin {
position: absolute;
top: 0;
mix-blend-mode: overlay;
pointer-events: none;
}
section.section-hero > .container .img-container {
position: relative;
z-index: 1;
aspect-ratio: 630/787.5;
margin-top: -1.5rem;
}
@media screen and (min-width: 1024px) {
section.section-hero > .container .img-container {
aspect-ratio: 1296/630;
margin-top: -3rem;
}
}
section.section-hero > .container .img-container img {
width: 100%;
height: 100%;
object-fit: cover;
}
section.section-content > .container {
max-width: calc(var(--layout-max-width) - 8rem);
display: flex;
flex-direction: column;
align-items: center;
}
section.section-content > .container > .content {
max-width: 45rem;
width: 100%;
}
section.section-headband {
padding-left: 0;
padding-right: 0;
--padding-top: 4rem;
--padding-bottom: 4rem;
color: var(--color-title);
}
section.section-headband > .container {
max-width: 100%;
}
section.section-headband > .container .row-items {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
overflow-x: hidden;
}
section.section-headband > .container .row-items .items {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
width: max-content;
gap: 14.4375rem;
overflow-y: clip;
overflow-x: hidden;
}
section.section-headband > .container .row-items .items .item {
display: flex;
justify-content: center;
align-items: center;
position: relative;
gap: 0.625rem;
}
section.section-headband > .container .row-items .items .item:before {
content: "";
position: absolute;
left: -10.4375rem;
width: 6.4375rem;
height: 0.0625rem;
top: 50%;
transform: translateY(-50%);
background: var(--color-title);
opacity: 0.25;
}
section.section-headband > .container .row-items .items .item:nth-child(odd) {
font-size: 1.4640856959rem;
line-height: 1.8301071199rem;
letter-spacing: -0.0292817139rem;
}
@media screen and (min-width: 768px) {
section.section-headband > .container .row-items .items .item:nth-child(odd) {
font-size: 2rem;
line-height: 2.5rem;
letter-spacing: -0.04rem;
}
}
@media screen and (min-width: 1024px) {
section.section-headband > .container .row-items .items .item:nth-child(odd) {
font-size: 2rem;
line-height: 2.5rem;
letter-spacing: -0.04rem;
}
}
section.section-headband > .container .row-items .items .item:nth-child(odd) {
font-weight: 700;
font-style: normal;
text-transform: uppercase;
}
section.section-headband > .container .row-items .items .item:nth-child(even) {
font-family: "Playfair Display", sans-serif;
font-size: 1.7149263669rem;
line-height: 2.1436563506rem;
letter-spacing: -0.0342888794rem;
}
@media screen and (min-width: 768px) {
section.section-headband > .container .row-items .items .item:nth-child(even) {
font-size: 2.66625rem;
line-height: 3.33281rem;
letter-spacing: -0.05331rem;
}
}
@media screen and (min-width: 1024px) {
section.section-headband > .container .row-items .items .item:nth-child(even) {
font-size: 2.66625rem;
line-height: 3.33281rem;
letter-spacing: -0.05331rem;
}
}
section.section-headband > .container .row-items .items .item:nth-child(even) {
font-weight: 400;
font-style: italic;
}
section.section-headband > .container .row-items .items .item .icon {
--icon-color: var(--button-background);
}
section.section-headband > .container .row-items .items .item .text {
display: flex;
align-items: center;
width: fit-content;
height: 3.31rem;
}
section.section-headband > .container .row-items .items .item .text > * {
font-size: inherit;
}
section.section-headband > .container .row-items .items .item .ref {
margin-right: 0.3125rem;
}
section.section-introduction > .container {
display: flex;
flex-direction: column;
justify-content: center;
gap: 1.5rem;
}
@media screen and (min-width: 1024px) {
section.section-introduction > .container {
flex-direction: row;
gap: 3rem;
}
}
section.section-introduction > .container > .col {
max-width: 31.875rem;
width: 100%;
display: flex;
flex-direction: column;
}
@media screen and (min-width: 1024px) {
section.section-introduction > .container > .col:first-child {
align-items: flex-end;
text-align: right;
}
}
section.section-text-rich-medias > .container {
display: flex;
flex-direction: column;
--col: 22.8395061728%;
--gap: 3rem;
gap: var(--gap);
}
@media screen and (min-width: 1024px) {
section.section-text-rich-medias > .container {
flex-direction: row;
}
}
section.section-text-rich-medias > .container > .col-heading {
display: flex;
flex-direction: column;
gap: 1.5rem;
width: 100%;
}
@media screen and (min-width: 1024px) {
section.section-text-rich-medias > .container > .col-heading {
min-width: var(--col);
max-width: var(--col);
}
}
section.section-text-rich-medias > .container > .col-medias {
display: flex;
flex-direction: column;
--col-gap: 2rem;
gap: var(--col-gap);
width: 100%;
max-width: 100%;
}
@media screen and (min-width: 1024px) {
section.section-text-rich-medias > .container > .col-medias {
flex-direction: row;
max-width: calc(100% - var(--col) - var(--gap));
}
}
section.section-text-rich-medias > .container > .col-medias > .media {
width: 100%;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
section.section-text-rich-medias > .container > .col-medias > .media > img {
max-width: 100%;
width: 100%;
object-fit: cover;
height: auto;
aspect-ratio: 296/370;
}
section.section-text-rich-medias > .container > .col-medias > .media > figcaption {
line-height: normal;
}
section.section-text-rich-medias > .container > .col-medias > .media > figcaption .description {
margin-top: 0.25rem;
}
@media screen and (min-width: 1024px) {
section.section-text-rich-medias > .container > .col-medias > .media {
max-width: 100%;
}
section.section-text-rich-medias > .container > .col-medias > .media > img {
aspect-ratio: revert;
height: 35.125rem;
}
}
section.section-keypoints {
--padding-top: 4rem;
--padding-bottom: 4rem;
}
section.section-keypoints > .container .items .item {
display: flex;
flex-direction: column;
gap: 1.5rem;
justify-content: center;
padding-top: 4rem;
padding-bottom: 4rem;
position: relative;
}
@media screen and (min-width: 1024px) {
section.section-keypoints > .container .items .item {
flex-direction: row;
gap: 3rem;
}
}
section.section-keypoints > .container .items .item:before, section.section-keypoints > .container .items .item:after {
content: "";
position: absolute;
width: 100%;
height: 0.0625rem;
background: var(--white);
opacity: 0.125;
left: 0;
}
section.section-keypoints > .container .items .item:before {
top: 0;
}
section.section-keypoints > .container .items .item:after {
display: none;
bottom: 0;
}
section.section-keypoints > .container .items .item:last-child:after {
display: revert;
}
section.section-keypoints > .container .items .item .head {
max-width: 31rem;
width: 100%;
}
section.section-keypoints > .container .items .item .description {
max-width: 31rem;
width: 100%;
}
main.single-project section.section-media-grid {
--padding-top: 0;
--padding-bottom: 0;
}
section.section-media-grid {
--grid-gap: 1rem;
}
@media screen and (min-width: 1024px) {
section.section-media-grid {
--grid-gap: 2rem;
}
}
section.section-media-grid > .container {
display: flex;
flex-direction: column;
gap: var(--grid-gap);
}
section.section-media-grid > .container > * {
line-height: 0;
}
section.section-media-grid > .container figure.img-container {
width: 100%;
}
section.section-media-grid > .container figure.img-container img, section.section-media-grid > .container figure.img-container video, section.section-media-grid > .container figure.img-container iframe {
max-width: 100%;
width: 100%;
height: 100%;
object-fit: cover;
}
section.section-media-grid > .container figure.img-container img {
object-fit: cover;
height: 100%;
}
section.section-media-grid > .container figure.img-container iframe {
height: fit-content;
}
section.section-media-grid > .container .row {
display: flex;
flex-direction: column;
gap: var(--grid-gap);
max-width: 100%;
--aspect-ratio: 4 / 5;
--aspect-ratio-portrait: 9 / 16;
--aspect-ratio-square: 1 / 1;
--aspect-ratio-landscape: 16 / 9;
--aspect-ratio-landcape-auto: auto;
}
@media screen and (min-width: 1024px) {
section.section-media-grid > .container .row {
flex-direction: row;
}
}
section.section-media-grid > .container .row:not(:has(:nth-child(2))) {
--aspect-ratio: var(--aspect-ratio-landscape);
}
section.section-media-grid > .container .row:not(:has(:nth-child(2))):has(img) {
--aspect-ratio: var(--aspect-ratio-auto);
}
section.section-media-grid > .container .row:not(:has(:nth-child(2))):has(video) {
--aspect-ratio: var(--aspect-ratio-landcape-auto);
}
section.section-media-grid > .container .row:not(:has(:nth-child(2))):has(iframe) {
--aspect-ratio: var(--aspect-ratio-landscape);
}
section.section-media-grid > .container .row .item {
aspect-ratio: var(--aspect-ratio);
width: 100%;
max-width: 100%;
}
section.section-media-grid > .container .row .item:before {
content: "";
position: absolute;
display: var(--is-protection, none);
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background: transparent;
}
section.section-media-grid > .container .row .item:not(:has(figure)) {
background-color: rgba(var(--white-rgb), 0.2);
min-height: 2rem;
}
section.section-media-grid > .container .row figure {
aspect-ratio: var(--aspect-ratio);
width: 100%;
}
section.section-media-grid > .container .row figure:has(iframe) iframe {
aspect-ratio: var(--aspect-ratio-landscape);
}
section.section-media-grid > .container .row:has(:nth-child(2)) figure iframe {
aspect-ratio: var(--aspect-ratio-portrait);
}
section.section-media-grid > .container .row.square {
--aspect-ratio: var(--aspect-ratio-square);
}
section.section-media-grid > .container .row.portrait {
--aspect-ratio: var(--aspect-ratio-portrait);
}
section.section-media-grid.layout-full {
padding-left: 0;
padding-right: 0;
}
section.section-media-grid.layout-full > .container {
max-width: 100%;
}
section.section-media-grid.layout-no-spacing > .container {
gap: 0;
}
section.section-media-grid.layout-no-spacing > .container .row {
gap: 0;
}
body.is-scrolling {
--is-protection: block;
}
section.section-partners {
padding-left: 0;
padding-right: 0;
display: flex;
flex-direction: column;
gap: 4rem;
}
section.section-partners > .container.content {
padding-left: var(--website-padding);
padding-right: var(--website-padding);
max-width: calc(var(--layout-max-width) + var(--website-padding) * 2);
}
section.section-partners > .container.content > .content {
display: flex;
flex-direction: column;
gap: 2rem;
}
@media screen and (min-width: 1024px) {
section.section-partners > .container.content > .content {
flex-direction: row;
}
}
section.section-partners > .container.content > .content > .heading {
width: 100%;
}
section.section-partners > .container.content > .content > .description {
width: 100%;
max-width: 39.75rem;
}
section.section-partners > .container.slider {
max-width: 100%;
line-height: 0;
}
section.section-partners > .container.slider .row-items {
padding: 2rem 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
overflow-x: hidden;
}
section.section-partners > .container.slider .row-items:before, section.section-partners > .container.slider .row-items:after {
content: "";
position: absolute;
width: calc(100% - var(--website-padding) * 2);
left: 50%;
transform: translateX(-50%);
height: 0.0625rem;
background: rgba(var(--white-rgb), 0.125);
max-width: var(--layout-max-width);
}
section.section-partners > .container.slider .row-items:before {
top: 0;
}
section.section-partners > .container.slider .row-items:after {
bottom: 0;
}
section.section-partners > .container.slider .row-items .items {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
width: max-content;
gap: 4rem;
overflow-y: clip;
overflow-x: hidden;
}
section.section-partners > .container.slider .row-items .items .item {
display: flex;
justify-content: center;
align-items: center;
position: relative;
min-width: 18rem;
max-width: 18rem;
width: 100%;
aspect-ratio: 288/139;
}
section.section-partners > .container.slider .row-items .items .item > img,
section.section-partners > .container.slider .row-items .items .item .mask {
width: 100%;
height: 100%;
transform: scale(var(--scale, 1));
object-fit: contain;
}
section.section-partners > .container.slider .row-items .items .item img {
opacity: 0;
pointer-events: none;
}
section.section-partners > .container.slider .row-items .items .item .mask {
position: absolute;
inset: 0;
background: var(--white);
mask: var(--mask) center/contain no-repeat;
}
section.section-related-projects > .container {
display: flex;
flex-direction: column;
gap: 4rem;
}
section.section-related-projects > .container .row-title {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 2rem;
}
@media screen and (min-width: 1024px) {
section.section-related-projects > .container .row-title {
flex-direction: row;
}
}
section.section-related-projects > .container .project-grid {
display: grid;
grid-template-columns: 1fr;
column-gap: 1.5rem;
row-gap: 3rem;
}
@media (min-width: 768px) {
section.section-related-projects > .container .project-grid {
grid-template-columns: repeat(2, 1fr);
}
}
section.section-credits > .container {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 1.5rem;
}
@media screen and (min-width: 1024px) {
section.section-credits > .container {
flex-direction: row;
gap: 3rem;
}
}
section.section-credits > .container > .col.heading {
max-width: 45rem;
}
section.section-credits > .container > .col.credits {
max-width: 32.5rem;
width: 100%;
}
section.section-credits > .container > .col.credits .credits {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
section.section-credits > .container > .col.credits .credits .item {
grid-column: span 2;
}
@media screen and (min-width: 1024px) {
section.section-credits > .container > .col.credits .credits .item.col-default {
grid-column: span 1;
}
section.section-credits > .container > .col.credits .credits .item.col-2 {
grid-column: span 2;
}
}
section.section-credits > .container > .col.credits .credits .item .heading {
color: var(--color-between);
}
section.section-credits > .container > .col.credits .credits .item .description {
margin-top: 0.625rem;
color: var(--color-title);
opacity: 0.85;
}
section.section-navigation {
--padding-top:1rem;
--padding-bottom:1rem;
}
@media screen and (max-width: 1023px) {
section.section-navigation {
padding-left: 0;
padding-right: 0;
}
}
@media screen and (min-width: 1024px) {
section.section-navigation {
--padding-top:2rem;
--padding-bottom:2rem;
}
}
section.section-navigation ul li {
list-style: none;
cursor: pointer;
}
section.section-navigation ul li:before {
display: none;
}
section.section-navigation .col-more {
display: flex;
align-items: center;
transition: all 2s cubic-bezier(0.16, 1, 0.3, 1);
}
section.section-navigation .col-more:not(.ada) {
width: 0%;
opacity: 0;
pointer-events: none;
}
section.section-navigation .col-more:not(.ada) > .nav-button {
pointer-events: none;
}
section.section-navigation .col-more.ada {
width: 100%;
}
section.section-navigation .col-more > .nav-button {
position: absolute;
}
section.section-navigation .site-logo {
min-width: 2rem;
width: 2rem;
height: 2rem;
max-height: 2rem;
background: var(--color-title);
--mask: var(--picto-url) center / contain no-repeat;
-webkit-mask: var(--mask);
mask: var(--mask);
transition: 0.25s ease-in-out;
}
section.section-navigation .site-logo:hover {
background: var(--primary);
}
section.section-navigation .pointer-safe {
pointer-events: auto;
}
section.section-navigation i {
cursor: pointer;
}
section.section-navigation > .container .menu-items .menu-item .item-tag {
transition: 0.25s ease-in-out;
font-weight: 700;
text-transform: uppercase;
opacity: var(--opacity, 0.5);
color: var(--color, var(--color-title));
border: 2px solid transparent;
}
section.section-navigation > .container .menu-items .menu-item.current-menu-item {
--opacity:1;
}
section.section-navigation > .container .menu-items .menu-item:hover:not(.current-menu-item) {
--opacity:1;
--color: var(--primary);
}
section.section-navigation > .container .menu-items:not(:has(.current-menu-item)) {
--opacity:1;
}
section.section-navigation > .container .navigation {
display: flex;
width: 100%;
}
section.section-navigation > .container .navigation > .container {
width: 100%;
display: flex;
}
section.section-navigation > .container .navigation > .container .col-logo {
display: flex;
align-items: center;
}
section.section-navigation > .container .navigation > .container .col-navigation {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
section.section-navigation > .container .navigation > .container .col-navigation ul {
display: flex;
position: relative;
}
section.section-navigation > .container .navigation > .container .col-navigation ul li > .item-tag {
display: flex;
}
section.section-navigation > .container {
/**
* Navigation Mobile
*/
}
@media screen and (max-width: 1023px) {
section.section-navigation > .container {
font-size: 1rem;
}
section.section-navigation > .container #navigation-mobile {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
section.section-navigation > .container #navigation-mobile > .col-more .leftbar-opener {
width: calc(3rem + var(--website-padding));
height: 3rem;
display: flex;
align-items: center;
justify-content: flex-start;
padding-left: var(--website-padding);
}
section.section-navigation > .container #navigation-mobile > .site-logo {
margin: 0 var(--website-padding);
}
section.section-navigation > .container #navigation-mobile > .col-burger {
width: 100%;
display: flex;
justify-content: flex-end;
}
section.section-navigation > .container #navigation-mobile > .col-burger .rightbar-opener {
display: flex;
align-items: center;
justify-content: flex-end;
width: calc(3rem + var(--website-padding));
height: 3rem;
padding-right: var(--website-padding);
}
section.section-navigation > .container .menu-item {
max-width: 20rem;
width: 100%;
position: relative;
}
section.section-navigation > .container .menu-item:not(:last-child):after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background: rgba(var(--white-rgb), 0.025);
}
section.section-navigation > .container .menu-item .item-tag {
padding: 2rem 1rem;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
section.section-navigation > .container .menu-item.mobile-fallback .item-tag > .title {
width: 100%;
text-align: center;
padding-right: 1.5rem;
}
section.section-navigation > .container .navigation {
position: fixed;
justify-content: center;
overflow: hidden;
overflow-y: auto;
}
section.section-navigation > .container .navigation.nav-active {
display: flex;
}
section.section-navigation > .container .navigation > .container {
flex-direction: column;
}
section.section-navigation > .container .navigation > .container .col-logo {
justify-content: space-between;
}
section.section-navigation > .container .navigation > .container .col-navigation ul {
flex-direction: column;
align-items: center;
width: 100%;
}
section.section-navigation > .container .navigation > .container .col-more {
display: none;
}
section.section-navigation > .container .navigation > .container .col-more .title {
display: none;
}
}
section.section-navigation > .container {
/**
* Navigation Desktop
*/
}
@media screen and (min-width: 1024px) {
section.section-navigation > .container #navigation-mobile {
display: none;
}
section.section-navigation > .container > .navigation > .container .col-logo {
max-width: 2rem;
}
section.section-navigation > .container > .navigation > .container .col-logo .icon {
display: none;
}
section.section-navigation > .container > .navigation > .container .col-navigation {
justify-content: flex-end;
}
section.section-navigation > .container > .navigation > .container .col-navigation .mobile-fallback {
display: none;
}
section.section-navigation > .container > .navigation > .container .col-more {
justify-content: flex-start;
}
section.section-navigation > .container > .navigation > .container .col-more .nav-button {
opacity: 0.5;
}
section.section-navigation > .container > .navigation > .container .col-more .nav-button:hover {
opacity: 1;
}
section.section-navigation > .container .menu-item {
position: relative;
z-index: 1;
}
section.section-navigation > .container .menu-item .item-tag {
padding: 0.5rem 1.125rem;
font-size: 0.75rem;
display: flex;
}
}
body.is-transitioning section.section-navigation .pointer-safe {
pointer-events: none;
}
.section-footer {
--padding-top:4rem;
--padding-bottom:2rem;
overflow-x: hidden;
gap: 4rem;
}
@media screen and (min-width: 1024px) {
.section-footer {
gap: 8rem;
}
}
.section-footer ul {
list-style: none;
display: flex;
--color-inactive: var(--color-less);
--color-active: var(--color-paragraph);
}
.section-footer ul li {
font-size: 0.875rem;
font-style: normal;
font-weight: 400;
line-height: normal;
color: var(--color-active);
transition: 0.25s;
}
.section-footer ul li > a {
color: var(--color-active);
transition: 0.25s;
}
.section-footer ul:has(:hover) {
--color-after: var(--color-inactive);
}
.section-footer ul:has(:hover) li:not(:hover) {
--color-active: var(--color-inactive);
}
.section-footer ul.has-vertical-separator {
flex-direction: column;
row-gap: 0.5rem;
}
@media (min-width: 1024px) {
.section-footer ul.has-vertical-separator {
flex-direction: row;
flex-wrap: wrap;
}
.section-footer ul.has-vertical-separator > li:not(:last-child):after {
content: " | ";
color: var(--color-after);
}
}
.section-footer ul.has-vertical-separator a {
text-decoration: underline;
}
.section-footer ul.has-horizontal-separator {
flex-direction: row;
gap: 0.75rem;
}
@media (min-width: 1024px) {
.section-footer ul.has-horizontal-separator {
flex-wrap: wrap;
gap: 0;
}
.section-footer ul.has-horizontal-separator > li:not(:last-child):after {
content: " - ";
color: var(--color-after);
}
}
.section-footer .fond-studios {
width: 100vw;
transform: translateX(calc(var(--website-padding) * -1));
height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
--logo-w: 14.466875rem;
--logo-h: 1.16125rem;
--gap-x: 0.6534375rem;
--gap-y: 0.41375rem;
mask-image: linear-gradient(to bottom, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%);
-webkit-mask-image: linear-gradient(to bottom, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%);
margin-bottom: -8rem;
pointer-events: none;
}
@media screen and (min-width: 1024px) {
.section-footer .fond-studios {
--logo-w: 28.93375rem;
--logo-h: 2.3225rem;
--gap-x: 1.306875rem;
--gap-y: 0.8275rem;
margin-bottom: -14rem;
}
}
.section-footer .fond-studios span {
display: block;
flex-shrink: 0;
width: 200%;
height: var(--logo-h);
margin-bottom: var(--gap-y);
opacity: 0.1;
mask-image: var(--logo-url);
mask-repeat: repeat-x;
mask-size: calc(var(--logo-w) + var(--gap-x)) var(--logo-h);
mask-position: center;
mask-origin: content-box;
padding-right: var(--gap-x);
background-color: var(--white);
}
.section-footer .fond-studios span:nth-child(even) {
transform: translateX(calc((var(--logo-w) + (var(--gap-x)) * 2) / -2));
}
.section-footer > .container > [class^=row-] {
display: flex;
flex-direction: column;
gap: 2rem;
}
.section-footer > .container > [class^=row-].row-mentions, .section-footer > .container > [class^=row-].row-contact {
gap: 1rem;
}
@media (min-width: 1024px) {
.section-footer > .container > [class^=row-] {
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 2rem;
}
}
@media (min-width: 1024px) {
.section-footer > .container > .row-content {
flex-direction: row;
justify-content: space-between;
align-items: center;
}
}
.section-footer > .container > .row-content > .col-pitch {
color: var(--color-title);
max-width: 45rem;
}
.section-footer > .container > .row-ls302 {
margin-bottom: 1rem;
}
@media (min-width: 1024px) {
.section-footer > .container > .row-ls302 {
flex-direction: row;
justify-content: space-between;
align-items: center;
}
}
.section-footer > .container > .row-ls302 .site-logo {
max-width: 30.59188rem;
width: 100%;
aspect-ratio: 30.59/2.5;
background: var(--logo-url) no-repeat center/contain;
}
.section-footer > .container > .row-ls302 .sortlist-logo a {
display: block;
line-height: 0;
}
.section-footer > .container > .row-ls302 .sortlist-logo a img {
width: 8.75rem;
aspect-ratio: 7/2;
object-fit: contain;
}
.section-footer > .container > .row-contact {
padding: 0.75rem 0;
}
.section-footer > .container > .row-contact ul.socials {
gap: 0.75rem;
}
.section-footer > .container > .row-mentions {
padding: 0.75rem 0;
}
.section-footer > .container > .row-mentions ul.has-horizontal-separator {
--color-inactive: var(--color-less);
--color-active: var(--color-between);
flex-wrap: wrap;
}
.section-footer > .container > .row-mentions .copyright {
font-size: 0.875rem;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.section-footer > .container > .row-mentions .copyright > span:not(:first-child) {
margin-left: 0.75rem;
}
.section-footer > .container > .row-mentions .copyright > span.traqpad {
color: var(--color-less);
}
.section-footer > .container > .row-mentions .copyright > span.traqpad > a {
background: linear-gradient(96deg, currentColor 0%, currentColor 100%);
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent;
text-decoration: underline;
transition: 0.25s;
}
.section-footer > .container > .row-mentions .copyright > span.traqpad > a:hover {
background: linear-gradient(96deg, #FF512F 0%, #DD2476 100%);
}
@keyframes footerEven {
0% {
transform: translateX(calc((var(--logo-w) + (var(--gap-x)) * 2) / -2));
}
100% {
transform: translateX(calc((var(--logo-w) + (var(--gap-x)) * 2) / -2 + var(--gap-x) + var(--logo-w)));
}
}
@keyframes footerOdd {
0% {
transform: translateX(0);
}
100% {
transform: translateX(calc((var(--gap-x) + var(--logo-w)) * -1));
}
}
:root {
--sidebar-width: calc(22.5rem + (1.5 * var(--website-padding) * 2));
--sidebar-distance: 4rem;
}
@media screen and (max-width: 1023px) {
:root {
--sidebar-width: min(85vw, 22.5rem);
--sidebar-distance: 2rem;
}
}
.bar-close {
cursor: pointer;
}
.frontbar {
position: fixed;
pointer-events: all;
z-index: 2000;
width: 100%;
height: 100%;
background: var(--color-background);
opacity: 0;
transition: opacity var(--loading-timer, 1000ms) ease-in-out;
cursor: none;
--lottie-scale: calc(var(--ratio-container) * 3);
}
@media sceen and (min-width: 1024px) {
.frontbar {
--lottie-scale: var(--ratio-container);
}
}
.frontbar #lottie-container {
display: block;
width: 100vw;
height: 100vh;
transition: transform var(--loading-timer, 1000ms) ease-in-out;
transform-origin: center;
aspect-ratio: 1/1;
transform: scale(var(--lottie-scale, 1));
}
.frontbar.is-leaving {
animation: loaderLeave var(--loading-timer, 1000ms) ease-in-out forwards;
}
.frontbar.is-leaving #lottie-container {
animation: loaderLeaveLottie var(--loading-timer, 1000ms) ease-in-out forwards;
transform: scale(calc(var(--lottie-scale, 1) * 1.125));
}
@keyframes loaderLeave {
0% {
opacity: 1;
}
20% {
opacity: 1;
}
50% {
opacity: 0;
pointer-events: none;
}
100% {
opacity: 0;
pointer-events: none;
}
}
@keyframes loaderLeaveLottie {
0% {
opacity: 1;
}
20% {
opacity: 1;
}
33% {
opacity: 0;
}
100% {
opacity: 0;
}
}
.leftbar {
position: fixed;
pointer-events: all;
z-index: 1000;
width: 100%;
display: flex;
transition: opacity 1s;
}
.leftbar > .container {
overflow-y: auto;
display: flex;
flex-direction: column;
width: 100%;
}
.leftbar {
height: 100%;
max-width: var(--sidebar-width);
top: 0;
--icon-color: var(--color-title);
}
.leftbar > .container {
padding: calc(1.5 * var(--website-padding));
padding-top: 3rem;
gap: 1.5rem;
}
@media screen and (min-width: 1024px) {
.leftbar > .container {
padding: var(--website-padding);
padding-top: 6rem;
}
}
.leftbar > .container > header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
.leftbar > .container .content img {
width: 100%;
margin: 0.5rem 0 1rem;
}
.leftbar {
left: 0;
transform: scale(var(--ratio-bar, 1)) translateX(-100%);
transform-origin: left;
}
.leftbar .site-logo-long {
width: 13.76638rem;
height: 1.125rem;
background: var(--logo-url) no-repeat center/contain;
}
.leftbar img {
max-width: 100%;
margin-bottom: 0 !important;
}
.leftbar .button {
margin-top: 0.75rem;
}
@media screen and (max-width: 1023px) {
.rightbar {
position: fixed;
pointer-events: all;
z-index: 1000;
width: 100%;
display: flex;
transition: opacity 1s;
}
.rightbar > .container {
overflow-y: auto;
display: flex;
flex-direction: column;
width: 100%;
}
.rightbar {
height: 100%;
max-width: var(--sidebar-width);
top: 0;
--icon-color: var(--color-title);
}
.rightbar > .container {
padding: calc(1.5 * var(--website-padding));
padding-top: 3rem;
gap: 1.5rem;
}
.rightbar {
right: 0;
transform: scale(var(--ratio-bar, 1)) translateX(100%);
transform-origin: right;
}
}
@media screen and (max-width: 1023px) and (min-width: 1024px) {
.rightbar > .container {
padding: var(--website-padding);
padding-top: 6rem;
}
}
@media screen and (max-width: 1023px) {
.rightbar > .container > header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
.rightbar > .container .content img {
width: 100%;
margin: 0.5rem 0 1rem;
}
}
.downbar {
position: fixed;
pointer-events: all;
z-index: 1000;
width: 100%;
display: flex;
transition: opacity 1s;
}
.downbar > .container {
overflow-y: auto;
display: flex;
flex-direction: column;
width: 100%;
}
.downbar {
bottom: 0;
transform: scale(var(--ratio-bar, 1)) translateY(100%);
transform-origin: bottom;
max-height: 80dvh;
overflow-y: auto;
mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgb(0, 0, 0) 4rem);
-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgb(0, 0, 0) 4rem);
/* Optionnel : pour éviter que le masque ne se répète */
mask-repeat: no-repeat;
padding-bottom: 2rem;
}
i {
display: block;
background: var(--icon-color, currentColor);
flex-shrink: 0;
width: 0.5rem;
height: 0.5rem;
}
i.s16 {
width: 1rem;
height: 1rem;
}
i.s24 {
width: 1.5rem;
height: 1.5rem;
}
i.s32 {
width: 2rem;
height: 2rem;
}
i.s64 {
width: 4rem;
height: 4rem;
}
a:has(.icon):not(.in-button) > .icon {
transition: 0.25s ease-in-out;
}
a:has(.icon):not(.in-button):hover > .icon {
transform: scale(1.1);
}
.tags {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
.tags .tag {
padding: 0.5rem;
border: 1px solid var(--color-border);
border-radius: 0.25rem;
font-size: 0.625rem;
font-style: normal;
font-weight: 400;
line-height: normal;
text-transform: uppercase;
color: var(--color-title);
}
.tags .tag.has-bg {
background: linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%), rgba(255, 102, 0, 0.1);
}
.button {
padding: calc(1rem - 2px) calc(2rem - 2px);
text-transform: uppercase;
display: inline-flex;
gap: 0.25rem;
border-radius: 0.5rem;
position: relative;
color: var(--color-title);
text-align: center;
transition: 0.25s ease;
--btn-color: var(--primary);
--btn-color-2: var(--secondary);
--btn-color-rgb: var(--primary-rgb);
box-shadow: 0 0 15px rgba(var(--btn-color-rgb), 0);
z-index: 1;
max-width: fit-content;
}
.button.button-light {
--btn-color-rgb: var(--white-rgb);
--btn-color: var(--white);
--btn-color-2: var(--white);
}
.button:before {
content: "";
position: absolute;
top: -1px;
left: -1px;
right: -1px;
bottom: -1px;
background: linear-gradient(90deg, var(--btn-color) 0%, var(--btn-color) 25%, var(--btn-color-2) 50%, var(--btn-color-2) 100%);
border-radius: calc(0.5rem + 1px);
z-index: -2;
opacity: 1;
background-size: 200% auto;
transition: 0.5s ease;
}
.button:after {
content: "";
position: absolute;
inset: 0;
background: rgba(var(--black-light-rgb), 1);
border-radius: 0.5rem;
z-index: -1;
transition: 0.5s ease;
}
.button:hover {
color: var(--black);
box-shadow: 0 0 15px rgba(var(--btn-color-rgb), 1);
}
.button:hover:before {
background-position: right center;
}
.button:hover:after {
background: rgba(var(--black-light-rgb), 0);
}
.nav-button {
display: flex;
font-weight: 700;
font-size: 0.75rem;
text-transform: uppercase;
align-items: center;
cursor: pointer;
gap: 0.5rem;
padding: 0.5rem 1.125rem;
border-radius: 0.5rem;
border: 2px solid transparent;
transition: 0.25s ease-in-out;
color: var(--color-title, currentColor);
min-width: fit-content;
max-width: 100%;
}
.nav-button.left:hover {
border-left: 2px solid var(--primary);
}
.nav-button.down:hover {
border-bottom: 2px solid var(--primary);
}
@media screen and (min-width: 1024px) {
[data-magic-cursor] {
cursor: none !important;
}
.magic-dot, .magic-cursor {
position: fixed;
pointer-events: none;
z-index: 9999;
/* Très important : le transform ne doit servir qu'à l'animation et au centrage */
transform: translate(-50%, -50%);
will-change: left, top, transform, opacity, clip-path;
}
.magic-dot {
width: 1.75rem;
height: 1.75rem;
border: 0.125rem solid var(--primary);
border-radius: 50%;
opacity: 1;
transition: width 0.5s ease-in-out, height 0.5s ease-in-out;
}
.magic-dot.is-moving {
width: 1rem;
height: 1rem;
}
.magic-cursor {
z-index: 10001;
padding: 0.5rem 1rem;
background: linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%), rgba(255, 102, 0, 0.1);
color: white;
font-size: 0.875rem;
font-weight: 700;
text-transform: uppercase;
border-radius: 0.25rem;
white-space: nowrap;
backdrop-filter: blur(24px);
}
}
.card-project {
--zoom: .75rem;
--aspect-ratio: 4 / 5;
}
.card-project.hidden {
display: none;
}
.card-project > a {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
}
.card-project > a > figure {
line-height: 0;
aspect-ratio: var(--aspect-ratio);
width: 100%;
padding: var(--zoom);
transition: padding 0.25s ease-in-out;
margin-bottom: -3rem;
z-index: 0;
mask: linear-gradient(0deg, rgba(var(--black-rgb), 0) 0%, rgba(var(--black-rgb), 1) 50%);
}
.card-project > a > figure > video {
width: 100%;
height: 100%;
object-fit: cover;
aspect-ratio: var(--aspect-ratio);
}
.card-project > a > .information {
padding: 0 0.75rem;
z-index: 1;
max-width: 100%;
}
.card-project > a > .information > .title {
text-transform: uppercase;
text-wrap: wrap;
max-width: 100%;
}
.card-project > a > .information > .pitch {
margin-top: 0.5rem;
}
.card-project > a > .information > .tags {
margin-top: 0.75rem;
}
.card-project:hover {
--zoom: 0;
}
.card-project.square {
--aspect-ratio: 1 / 1;
}
.card-project .image-gallery {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.card-project .image-gallery .gallery-item {
position: absolute;
inset: 0;
opacity: 0;
z-index: 1;
}
.card-project .image-gallery .gallery-item .item-container {
position: absolute;
inset: 0;
}
.card-project .image-gallery .gallery-item.is-entering, .card-project .image-gallery .gallery-item.is-active, .card-project .image-gallery .gallery-item.is-leaving {
opacity: 1;
}
.card-project .image-gallery .gallery-item.is-entering .item-container, .card-project .image-gallery .gallery-item.is-active .item-container, .card-project .image-gallery .gallery-item.is-leaving .item-container {
animation: powerfulZoom 10s linear infinite;
}
.card-project .image-gallery .gallery-item.is-active {
z-index: 3;
}
.card-project .image-gallery .gallery-item.is-leaving {
z-index: 5;
}
.card-project .image-gallery .gallery-item.is-leaving:nth-child(odd) {
animation: shrinkWidth 0.5s ease-in-out forwards;
}
.card-project .image-gallery .gallery-item.is-leaving:nth-child(even) {
animation: shrinkHeight 0.5s ease-in-out forwards;
}
.card-project .image-gallery .gallery-image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
will-change: transform;
}
@keyframes shrinkWidth {
0% {
clip-path: inset(0 0 0 0);
}
100% {
clip-path: inset(0 100% 0 0);
}
}
@keyframes shrinkHeight {
0% {
clip-path: inset(0 0 0 0);
}
100% {
clip-path: inset(100% 0 0 0);
}
}
@keyframes powerfulZoom {
0% {
transform: scale(1);
}
100% {
transform: scale(1.33);
}
}
.modals {
position: fixed;
inset: 0;
opacity: 0;
pointer-events: none;
overflow: hidden;
z-index: 3000;
transition: opacity 0.25s ease;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.modals:has(.modal.is-active) {
opacity: 1;
pointer-events: all;
}
.modals:has(.modal.is-leaving) {
transition: opacity 0.5s ease;
opacity: 0;
pointer-events: none;
}
.modals:before {
content: "";
position: absolute;
inset: 0;
background: rgba(var(--black-light-rgb), 0.8);
z-index: 1;
}
.modals .modal {
position: relative;
z-index: 2;
max-width: 74rem;
width: 100%;
margin: 4rem 4rem;
max-height: calc(100% - 8rem);
background: var(--color-background);
border-radius: 1rem;
border: 0.0625rem solid var(--black-light);
opacity: 0;
transform: translateY(20%);
transition: 0.25s opacity ease-in-out, 0.5s transform ease-in-out;
margin: var(--website-padding);
display: flex;
flex-direction: column;
gap: 2rem;
overflow-x: hidden;
overflow-y: auto;
padding: var(--website-padding);
}
@media screen and (min-width: 1024px) {
.modals .modal {
padding: 4rem var(--website-padding);
}
}
.modals .modal.is-active {
opacity: 1;
transform: translateY(0);
}
.modals .modal.is-leaving {
opacity: 0;
transform: translateY(40%);
}
.modals .modal > .headline {
color: var(--color-title);
display: flex;
gap: 2rem;
justify-content: space-between;
}
.modals .modal > .headline > .title {
max-width: 45rem;
}
.modals .modal > .headline > .modal-close {
cursor: pointer;
}
.modals .modal#modal-contact > .main {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
@media screen and (min-width: 1024px) {
.modals .modal#modal-contact > .main {
flex-direction: row;
}
}
.modals .modal#modal-contact > .main > .col-main,
.modals .modal#modal-contact > .main > .col-second {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
gap: 2rem;
padding: 1.5rem 0;
}
@media screen and (min-width: 1024px) {
.modals .modal#modal-contact > .main > .col-main,
.modals .modal#modal-contact > .main > .col-second {
padding: 3rem 0;
}
}
.modals .modal#modal-contact > .main > .col-main > .headline,
.modals .modal#modal-contact > .main > .col-main > .bisdev {
display: flex;
flex-direction: column;
gap: 1rem;
align-items: center;
justify-content: center;
}
.modals .modal#modal-contact > .main > .col-main > .headline {
color: var(--color-title);
text-transform: uppercase;
font-weight: 700;
text-align: center;
}
.modals .modal#modal-contact > .main > .col-main > .bisdev .dev {
display: flex;
flex-direction: row;
gap: 0.5rem;
align-items: center;
justify-content: center;
}
.modals .modal#modal-contact > .main > .col-main > .bisdev .dev .img-container {
width: 2rem;
height: 2rem;
border-radius: 50%;
overflow: hidden;
}
.modals .modal#modal-contact > .main > .col-main > .bisdev .dev .img-container > img {
width: 100%;
height: 100%;
object-fit: cover;
}
.modals .modal#modal-contact > .main > .col-main > .bisdev .dev .information {
display: flex;
flex-direction: column;
line-height: 1;
}
.modals .modal#modal-contact > .main > .col-main > .bisdev .dev .information .firstname {
color: var(--color-title);
text-transform: uppercase;
font-weight: 700;
}
.modals .modal#modal-contact > .main > .col-sep {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-weight: 700;
position: relative;
}
.modals .modal#modal-contact > .main > .col-sep:before {
content: "";
position: absolute;
left: 50%;
transform: translateX(-50%);
display: block;
background: var(--white);
opacity: 0.25;
z-index: -2;
height: 0.0625rem;
width: 100%;
}
@media screen and (min-width: 1024px) {
.modals .modal#modal-contact > .main > .col-sep:before {
width: 0.0625rem;
height: 100%;
}
}
.modals .modal#modal-contact > .main > .col-sep:after {
content: "";
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
display: block;
background: var(--color-background);
z-index: -1;
height: 100%;
width: 2.625rem;
}
@media screen and (min-width: 1024px) {
.modals .modal#modal-contact > .main > .col-sep:after {
width: 100%;
height: 2.625rem;
}
}
.modals .modal#modal-contact > .main > .col-second > .title {
color: var(--color-title);
text-transform: uppercase;
font-weight: 700;
text-align: center;
}
.modals .modal#modal-contact > .main > .col-second > .buttons {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.75rem;
}
figure:has(video.js-video:not(.is-loaded)) {
background-size: 200% 100%;
animation: backgroundVideoLoading 2s infinite ease-in-out;
}
figure:has(video.js-video:not(.is-loaded)) video.js-video {
opacity: 0;
}
figure video.js-video {
opacity: 1;
transition: opacity 0.3s ease;
}
@keyframes backgroundVideoLoading {
0% {
background-color: rgba(var(--black-light-rgb), 1);
background-image: linear-gradient(120deg, transparent 30%, rgba(var(--white-rgb), 0.05) 50%, transparent 70%);
background-position: 200% 0;
}
50% {
background-color: rgba(var(--black-light-rgb), 0.25);
background-image: linear-gradient(120deg, transparent 30%, rgba(var(--white-rgb), 0.05) 50%, transparent 70%);
background-position: 50% 0;
}
100% {
background-color: rgba(var(--black-light-rgb), 1);
background-image: linear-gradient(120deg, transparent 30%, rgba(var(--white-rgb), 0.05) 50%, transparent 70%);
background-position: -200% 0;
}
}