@font-face { font-family: sf-pro-text; src: url("/font/sf-pro-text-regular-webfont-ca8f5fd3fe345b0ca21ea26787413ea4.woff2") format("woff2"), url("/font/sf-pro-text-regular-webfont-4265d1fb91c598a850599db1096f39b4.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: sf-pro-text; src: url("/font/sf-pro-text-semibold-webfont-a39fded8d555ba37dfd52d1a5d751e41.woff2") format("woff2"), url("/font/sf-pro-text-semibold-webfont-0b0d3f40c275e2f06357bd903f2e58b5.woff") format("woff"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: sf-pro-display; src: url("/font/sf-pro-display-regular-webfont-003b43d8df82097acd943b9138175cdc.woff2") format("woff2"), url("/font/sf-pro-display-regular-webfont-e1b2ea46a9158492c888517b3dfb3b1a.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: fk-olympikus; src: url("/font/fk-olympikus-4bb5de1f421a3a6bb6e68f169778e0b1.woff2") format("woff2"), url("/font/fk-olympikus-a5d395881e72aa388e132941f30e2a04.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; } :root { --br: 16px; --br2: 8px; --pd: 16px; --pd2: 8px; --pd3: 4px; --color-black: #000; --color-white: #e2e6e3; --color-blue: #007aff; --color-gray10: hsla(135,7%,89%,.1); --color-gray20: hsla(135,7%,89%,.2); --color-gray50: hsla(135,7%,89%,.5); --color-white-hover: hsla(135,7%,89%,.5); --color-gray10-hover: hsla(135,7%,89%,.2); --color-gray50-hover: #e2e6e3; --font-size-display: 23px; --letter-spacing-display: 0.45px; --line-height-display: 27px; --cs-spec-sidebar: 300px; --cs-slice-min-height: 520px; --nav-sticky-top: 80px; --text-align-body: justify; } html.light { --color-black: #fff; --color-white: #000; --color-gray10: rgba(0,0,0,.04); --color-gray20: rgba(0,0,0,.2); --color-gray50: rgba(0,0,0,.5); --color-white-hover: rgba(0,0,0,.5); --color-gray10-hover: rgba(0,0,0,.08); --color-gray50-hover: #000; } @media (max-width: 768px) { :root { --br: 12px; } } .case__study__gallery .case__study__gallery__item, .case__study__text { align-items: center; display: flex; justify-content: center; } .nav:not(.has-blur) .nav__card__inner::after, .nav__card__bg { height: 100%; left: 0px; position: absolute; top: 0px; width: 100%; } .case__study__text h2, .case__study__text__author, body, input[type="email"], input[type="tel"], input[type="text"], select, textarea { font-family: sf-pro-text, sans-serif; font-size: 14px; font-weight: 400; letter-spacing: 0px; line-height: 125%; } @media (max-width: 768px) { .case__study__text h2, .case__study__text__author, body, input[type="email"], input[type="tel"], input[type="text"], select, textarea { font-size: 13.5px; letter-spacing: -0.31px; line-height: 125%; } } .case__study__media__text__number h3, .case__study__media__text__numbers h2, .case__study__media__texts2.featured .case__study__media__text__text__text2, .case__study__text__text { font-family: sf-pro-display, sans-serif; font-size: 23px; font-weight: 400; letter-spacing: 0.45px; line-height: 27px; } @media (max-width: 768px) { .case__study__media__text__number h3, .case__study__media__text__numbers h2, .case__study__media__texts2.featured .case__study__media__text__text__text2, .case__study__text__text { font-size: 16px; letter-spacing: 0.25px; line-height: 130%; } } @property --start { syntax: ""; inherits: false; initial-value: rgba(27,27,27,0); } @property --end { syntax: ""; inherits: false; initial-value: rgba(27,27,27,.9); } *, ::after, ::before { box-sizing: border-box; } ol[class], ul[class] { padding: 0px; } blockquote, body, dd, dl, figcaption, figure, h1, h2, h3, h4, h5, li, ol[class], p, ul[class] { margin: 0px; padding: 0px; } body { scroll-behavior: smooth; text-rendering: optimizespeed; } ol, ol[class], ul, ul[class] { margin: 0px; padding-inline-start: 3.2rem; } a:not([class]) { text-decoration-skip-ink: auto; } a { color: inherit; display: inline-block; position: relative; text-decoration: none; } h1, h2, h3, h4, h5, h6 { border: 0px; font-size: inherit; font-weight: inherit; margin: 0px; outline: 0px; vertical-align: baseline; } a, a:focus { color: inherit; outline: 0px; text-decoration: none; } em { font-style: normal; } html { font-size: 0.520833vw; -webkit-tap-highlight-color: transparent; overflow: hidden scroll; } @media (max-width: 656px) { html { font-size: 2.5641vw; } } body { min-width: 360px; -webkit-font-smoothing: antialiased; background-color: var(--color-black); color: var(--color-white); transition: background-color 0.5s, opacity 0.5s; } html:not(.visible) body { height: 0px; opacity: 0; overflow: hidden; } body[data-template="slice-simulator"] { opacity: 1; } body a, body h2, body h3, body p, body p > a, body ul { transition: color 0.5s; } @media (max-width: 768px) { html.device-android body[data-template="index"] { height: 100dvh; overflow: hidden; } } main.wrapper { display: flex; } @media (max-width: 656px) { main.wrapper { flex-flow: column; } } .nav { flex-shrink: 0; } .content { flex: 1 1 auto; } .page__container { padding: var(--pd2); } @media (max-width: 656px) { .page__container { padding-top: 2px; } body[data-template="about-openings-uid"] .page__container, body[data-template="about-team-uid"] .page__container, body[data-template="all"] .page__container { padding-top: var(--pd2); } } .page-enter-active { transition: opacity 0.5s; } main.wrapper.no-transition .page-enter-active { transition: none; } .page-enter-from { opacity: 0; } .page-enter-to { opacity: 1; } .page-leave-active { transition: opacity 0.5s; } main.wrapper.no-transition .page-leave-active { transition: none; } .page-leave-from { opacity: 1; } .page-leave-to { opacity: 0; } .page__cards { display: grid; gap: var(--pd2); grid-template-columns: 1fr 1fr; } .page__cards .page__card { grid-column: span 1; } .page__card { background-color: var(--color-gray10); border-radius: var(--br2); padding: var(--pd); transition: background-color 0.5s; } .page__card p { text-align: var(--text-align-body); } .page__nav__horizontal { display: flex; margin: var(--pd) 0 32px; } .page__nav__horizontal__wrapper { column-gap: 12px; display: flex; overflow: scroll hidden; scrollbar-width: none; } .page__nav__horizontal__button { align-items: center; cursor: pointer; display: flex; } .page__nav__horizontal__button.selected { pointer-events: none; } .page__nav__horizontal__button.selected h3 { color: var(--color-white); } .page__nav__horizontal__button h3 { color: var(--color-gray50); white-space: nowrap; } input[type="email"], input[type="tel"], input[type="text"], select, textarea { appearance: none; background-color: var(--color-gray10); border: none; border-radius: var(--br2); color: var(--color-white); height: 40px; outline: none; padding: 0px 12px; transition: background-color 0.5s, border-color 0.5s, color 0.5s; width: 100%; } input[type="email"].placeholder, input[type="tel"].placeholder, input[type="text"].placeholder, select.placeholder, textarea.placeholder { color: var(--color-gray50); transition: color 0.5s; } input[type="email"]::-webkit-input-placeholder, input[type="tel"]::-webkit-input-placeholder, input[type="text"]::-webkit-input-placeholder, select::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: var(--color-gray50); transition: color 0.5s; } @media (max-width: 768px) { input[type="email"], input[type="tel"], input[type="text"], select, textarea { height: 30px; } } input:-webkit-autofill, select:-webkit-autofill, textarea:-webkit-autofill { transition: background-color 5000s ease-in-out; box-shadow: transparent 0px 0px 0px 1000px inset !important; -webkit-text-fill-color: var(--color-white) !important; } .nav__card { pointer-events: none; } .nav__card__inner { border-radius: 10px; column-gap: 12px; display: flex; height: 98px; overflow: hidden; padding: 16px; pointer-events: auto; position: relative; transition: background-color 0.5s; will-change: transform, opacity; } .case__study__list .nav__card__inner, .nav:not(.has-blur) .nav__card__inner { background-color: rgb(26, 26, 26); } html.light .case__study__list .nav__card__inner, html.light .nav:not(.has-blur) .nav__card__inner { background-color: rgb(245, 245, 245); } .nav.has-blur .nav__card__inner { backdrop-filter: blur(50px); background-color: var(--color-gray10); } @media (max-width: 768px) { .nav__card__inner { column-gap: 9px; height: 80px; padding: 12px; } } .nav:not(.has-blur) .nav__card__inner::after { background-color: var(--color-gray10); content: ""; opacity: 0; transition: background-color 0.5s, opacity 0.5s; z-index: -1; } @property --start2 { syntax: ""; inherits: false; initial-value: #4e4e4e; } @property --end2 { syntax: ""; inherits: false; initial-value: #242424; } .nav__card__bg { transition: --start2 0.5s, --end2 0.5s; } html.light .nav__card__bg { --start2: #d9d6d5; --end2: #efefef; } .nav__card__bg { background: radial-gradient(76.17% 129.78% at 23.83% 65.4%,var(--start2) 0,var(--end2) 100%); } .nav__card__img { background-color: var(--color-gray10); border-radius: 10px; flex-shrink: 0; height: 65px; overflow: hidden; position: relative; width: 65px; } .nav__card__img img { height: 100%; width: 100%; object-fit: contain; } @media (max-width: 768px) { .nav__card__img { height: 56px; width: 56px; } } .nav__card__info { position: relative; } .nav__card__about .nav__card__info { display: flex; flex-flow: column; } .nav__card__info h2 { color: var(--color-white); } .nav__card__info p { color: var(--color-gray50); } .case__study__list .case__study__gallery__item { grid-column: 1 / -1; } .case__study__list .case__study__gallery__item .has-gallery { cursor: pointer; } .case__study__list .case__study__gallery__item.desktop-mobile.split { grid-area: span 2 / span 1; } .case__study__list .case__study__gallery__item.desktop-mobile.split-rows { grid-area: span 1 / span 1; } .case__study__list .case__study__gallery__item.desktop-mobile.split-rows .case__study__gallery__item__inner { height: 100%; } .case__study__list .case__study__gallery__item.desktop-mobile.split-rows .case__study__gallery__item__inner .landscape-small { height: 100%; position: relative; aspect-ratio: auto !important; } .case__study__list .case__study__gallery__item.desktop-mobile.split-rows .case__study__gallery__item__inner .landscape-small img, .case__study__list .case__study__gallery__item.desktop-mobile.split-rows .case__study__gallery__item__inner .landscape-small video { height: 100%; object-fit: cover; object-position: center center; position: absolute; } .slice-simulator .case__study__list .case__study__gallery__item.desktop-mobile.split-rows .case__study__gallery__item__inner .landscape-small img, .slice-simulator .case__study__list .case__study__gallery__item.desktop-mobile.split-rows .case__study__gallery__item__inner .landscape-small video { width: 100%; } .case__study__list .case__study__gallery__item.desktop-mobile.position-left { grid-column: 1 / 2; } .case__study__list .case__study__gallery__item.desktop-mobile.position-right { grid-column: 2 / -1; } @media (min-width: 769px) { .case__study__list .case__study__gallery__item.split { grid-area: span 2 / span 1; } .case__study__list .case__study__gallery__item.split-rows { grid-area: span 1 / span 1; } .case__study__list .case__study__gallery__item.split-rows .case__study__gallery__item__inner { height: 100%; } .case__study__list .case__study__gallery__item.split-rows .case__study__gallery__item__inner .landscape-small { height: 100%; position: relative; aspect-ratio: auto !important; } .case__study__list .case__study__gallery__item.split-rows .case__study__gallery__item__inner .landscape-small img, .case__study__list .case__study__gallery__item.split-rows .case__study__gallery__item__inner .landscape-small video { height: 100%; object-fit: cover; object-position: center center; position: absolute; } .slice-simulator .case__study__list .case__study__gallery__item.split-rows .case__study__gallery__item__inner .landscape-small img, .slice-simulator .case__study__list .case__study__gallery__item.split-rows .case__study__gallery__item__inner .landscape-small video { width: 100%; } .case__study__list .case__study__gallery__item.position-left { grid-column: 1 / 2; } .case__study__list .case__study__gallery__item.position-right { grid-column: 2 / -1; } } .case__study__gallery__item__inner:not(.has-text) { grid-template-columns: 1fr; } .case__study__gallery .case__study__gallery__item { background-color: var(--color-black); height: 100%; width: 100vw; } @media (min-width: 769px) { .case__study__gallery .case__study__gallery__item { will-change: opacity; } .case__study__gallery .case__study__gallery__item:not(.swiper-slide-prev):not(.swiper-slide-active):not(.swiper-slide-next) .case__study__gallery__item__inner { display: none; } } .case__study__media__text { align-items: flex-start; } @media (min-width: 769px) { .case__study__media__text.text-media .case__study__media__text__media { grid-area: 1 / 2 / 2 / 3; } .case__study__media__text.text-media .case__study__media__text__text { grid-area: 1 / 1 / 2 / 2; } } .case__study__text { aspect-ratio: 1496 / 998; } @media (max-width: 768px) { .case__study__list .case__study__text { aspect-ratio: 1 / 1; } } .case__study__text__inner { align-items: center; display: flex; flex-flow: column; text-align: center; width: 52%; } @media (max-width: 1280px) { .case__study__text__inner { width: 68%; } } @media (max-width: 1024px) { .case__study__text__inner { width: 76%; } } @media (max-width: 768px) { .case__study__text__inner { width: 90%; } } .case__study__text__inner:has(.text24px) { width: 55%; } @media (max-width: 1280px) { .case__study__text__inner:has(.text24px) { width: 80%; } } @media (max-width: 1024px) { .case__study__text__inner:has(.text24px) { width: 90%; } } @media (max-width: 768px) { .case__study__text__inner:has(.text24px) { width: auto; } } .case__study__text h2 { color: var(--color-gray50); margin-bottom: var(--pd2); } @media (max-width: 768px) { .case__study__text h2 { margin-bottom: var(--pd3); } } .case__study__media__text__text { padding-bottom: calc(var(--pd)*1.5); } .case__study__media__text__text h2 { color: var(--color-gray50); margin-bottom: var(--pd2); } @media (max-width: 768px) { .case__study__media__text__text h2 { margin-bottom: var(--pd3); } .case__study__media__text__text { padding-bottom: 48px; padding-right: 24px; } } .case__study__media__text__numbers { display: flex; flex-flow: column; margin-top: 32px; row-gap: 48px; } @media (max-width: 768px) { .case__study__media__text__numbers { margin-top: 16px; row-gap: 24px; } .case__study__media__text__number h3 { font-size: 22px; } } .case__study__media__text__number p { color: var(--color-gray50); } @media (max-width: 768px) { .case__study__media__text__number p { margin-top: 4px; } } .case__study__text__text { letter-spacing: 0.25px; } .case__study__text__author { color: var(--color-gray50); margin-top: var(--pd2); } @media (max-width: 768px) { .case__study__text__author { margin-top: var(--pd3); } } .case__study__spotify { display: flex; padding: initial; } .case__study__gallery__item__inner:not(.has-text).case__study__media__texts2 { display: grid; gap: var(--pd2); grid-template-columns: 1fr 1fr; } @media (max-width: 768px) { .case__study__gallery__item__inner:not(.has-text).case__study__media__texts2 { grid-template-columns: 1fr; } } .case__study__media__text__text2 { grid-column: span 1; } .case__study__media__texts2.featured .case__study__media__text__text2 { min-height: 450px; } @media (min-width: 769px) { .case__study__media__texts2.featured .case__study__media__text__text2 { padding: 24px; } } @media (max-width: 768px) { .case__study__media__texts2.featured .case__study__media__text__text2 { min-height: clamp(200px, -92.8571px + 44.6429vw, 250px); } } @media (min-width: 769px) { .case__study__media__texts2.align-to-right .case__study__media__text__text2 { grid-column: 2 / -1; } } .case__study__media__text__text2 h2 { color: var(--color-gray50); margin-bottom: var(--pd2); } .case__study__media__texts2.featured .case__study__media__text__text__text2 { letter-spacing: 0.25px; } .case__study__media__text__text__text2 strong { font-weight: 700; } .case__study__media__text__text__text2 em { font-style: italic; } .case__study__media__text__text__text2 a { text-decoration: underline; } html:not(.has-link-arrow) .about__contact a, html:not(.has-link-arrow) .about__openings a, html:not(.has-link-arrow) .about__openings__page__opening__opening__openings a, html:not(.has-link-arrow) .case__study__info a { text-decoration: underline 0.75px rgba(255, 255, 255, 0.5); text-underline-offset: 4px; } html:not(.has-link-arrow) .about__contact a html.light, html:not(.has-link-arrow) .about__openings a html.light, html:not(.has-link-arrow) .about__openings__page__opening__opening__openings a html.light, html:not(.has-link-arrow) .case__study__info a html.light { text-decoration-color: rgba(0, 0, 0, 0.5); } html:not(.has-link-arrow) .about__contact a svg, html:not(.has-link-arrow) .about__openings a svg, html:not(.has-link-arrow) .about__openings__page__opening__opening__openings a svg, html:not(.has-link-arrow) .case__study__info a svg { display: none; } html.has-link-arrow .about__contact a svg, html.has-link-arrow .about__openings a svg, html.has-link-arrow .about__openings__page__opening__opening__openings a svg, html.has-link-arrow .case__study__info a svg { aspect-ratio: 1 / 1; height: auto; margin-bottom: -2px; width: 8.5px; } html:not(.has-link-arrow) .case__study__info a::after { bottom: 0px; } html.has-link-arrow .about__openings a, html.has-link-arrow .about__openings__page__opening__opening__openings a { display: flex; } html.device-mouse .about__agenda__items .page__card:hover, html.device-mouse .home__cards .page__card:hover, html.device-mouse .page__button:hover { background-color: var(--color-gray10-hover); } html.device-mouse .page__button.white:hover { background-color: var(--color-white-hover); } html.device-mouse .nav__light__mode:hover, html.device-mouse .nav__top__top__gallery__mode:hover, html.device-mouse .page__button__close:hover { background-color: rgba(255, 255, 255, 0.24); } html.device-mouse .about__team__member:hover p, html.device-mouse .page__nav__horizontal__button:hover h3 { color: var(--color-white); } html.device-mouse .about__agenda_item.has-link:hover h3, html.device-mouse .about__contact a:hover, html.device-mouse .about__openings a:hover, html.device-mouse .about__openings__page__opening__opening__openings a:hover, html.device-mouse .case__studies__filters__category:hover p, html.device-mouse .case__study__info a:hover, html.device-mouse .nav__top__middle__logo:hover { color: var(--color-white-hover); } html.device-mouse .case__studies__card:hover p { color: var(--color-gray50-hover); } html.device-mouse .about__team__member:hover p span, html.device-mouse a.nav__card__inner:hover::after { opacity: 1; } html.device-mouse.light .nav__light__mode:hover, html.device-mouse.light .nav__top__top__gallery__mode:hover, html.device-mouse.light .page__button__close:hover { background-color: rgba(0, 0, 0, 0.12); } :root { --br: 16px; --br2: 8px; --pd: 16px; --pd2: 8px; --pd3: 4px; --color-black: #000; --color-white: #e2e6e3; --color-blue: #007aff; --color-gray10: hsla(135,7%,89%,.1); --color-gray20: hsla(135,7%,89%,.2); --color-gray50: hsla(135,7%,89%,.5); --color-white-hover: hsla(135,7%,89%,.5); --color-gray10-hover: hsla(135,7%,89%,.2); --color-gray50-hover: #e2e6e3; } html.light { --color-black: #fff; --color-white: #000; --color-gray10: rgba(0,0,0,.04); --color-gray20: rgba(0,0,0,.2); --color-gray50: rgba(0,0,0,.5); --color-white-hover: rgba(0,0,0,.5); --color-gray10-hover: rgba(0,0,0,.08); --color-gray50-hover: #000; } @media (max-width: 768px) { :root { --br: 12px; } } .error { align-items: center; display: flex; justify-content: center; } .error__message { font-family: sf-pro-text, sans-serif; font-size: 14px; font-weight: 400; letter-spacing: 0px; line-height: 125%; } @media (max-width: 768px) { .error__message { font-size: 13.5px; letter-spacing: -0.31px; line-height: 125%; } } .error__title { font-family: sf-pro-display, sans-serif; font-size: 23px; font-weight: 400; letter-spacing: 0.45px; line-height: 27px; } @media (max-width: 768px) { .error__title { font-size: 16px; letter-spacing: 0.25px; line-height: 130%; } } @property --start { syntax: ""; inherits: false; initial-value: rgba(27,27,27,0); } @property --end { syntax: ""; inherits: false; initial-value: rgba(27,27,27,.9); } .error { flex-flow: column; min-height: calc(100svh - var(--pd) - var(--pd)); } .error__message { color: var(--color-gray50); margin-bottom: calc(var(--pd)*2); margin-top: var(--pd); padding: 0px 32px; text-align: center; text-wrap: balance; } @media (max-width: 768px) { .error__message { margin-bottom: calc(var(--pd)*1.5); margin-top: var(--pd); } } .page__button { align-items: center; background-color: var(--color-gray10); border-radius: 40px; column-gap: var(--pd2); cursor: pointer; display: flex; height: 40px; justify-content: center; padding: 0px 16px; transition: background-color 0.5s; } :root { --br: 16px; --br2: 8px; --pd: 16px; --pd2: 8px; --pd3: 4px; --color-black: #000; --color-white: #e2e6e3; --color-blue: #007aff; --color-gray10: hsla(135,7%,89%,.1); --color-gray20: hsla(135,7%,89%,.2); --color-gray50: hsla(135,7%,89%,.5); --color-white-hover: hsla(135,7%,89%,.5); --color-gray10-hover: hsla(135,7%,89%,.2); --color-gray50-hover: #e2e6e3; } html.light { --color-black: #fff; --color-white: #000; --color-gray10: rgba(0,0,0,.04); --color-gray20: rgba(0,0,0,.2); --color-gray50: rgba(0,0,0,.5); --color-white-hover: rgba(0,0,0,.5); --color-gray10-hover: rgba(0,0,0,.08); --color-gray50-hover: #000; } @media (max-width: 768px) { :root { --br: 12px; } } .nav__top__top__gallery__mode { align-items: center; display: flex; justify-content: center; } .nav__top__middle__logo { cursor: pointer; margin: -10px; padding: 10px; } @property --start { syntax: ""; inherits: false; initial-value: rgba(27,27,27,0); } @property --end { syntax: ""; inherits: false; initial-value: rgba(27,27,27,.9); } .nav { max-height: 100svh; overflow-y: auto; padding: var(--pd2); scrollbar-width: none; } @media (min-width: 657px) { .nav { padding-right: 0px; position: sticky; top: 0px; } } @media (max-width: 656px) { html[data-template="index"] .nav { position: sticky; top: 0px; } html.device-android .nav { max-height: 100dvh; } } .nav__inner { width: clamp(368px, 346.667px + 2.77778vw, 400px); } @media (max-width: 656px) { .nav__inner { width: auto; } } .nav__top__inner { display: flex; flex-flow: column; } .nav__top__top { align-items: center; display: flex; flex: 1 1 0%; justify-content: space-between; } .nav__top__top__right { display: flex; position: relative; } .nav__light__mode { transition: background-color 0.5s, transform 0.5s; will-change: transform; } .nav__top__top__right.has-gallery .nav__light__mode { transform: translate(-42px); } @media (max-width: 768px) { .nav__top__top__right.has-gallery .nav__light__mode { transform: translate(-37px); } } .nav__top__top__gallery__mode { background-color: rgba(255, 255, 255, 0.12); border-radius: 50%; cursor: pointer; height: 38px; position: absolute; right: 0px; top: 0px; transition: background-color 0.5s, opacity 0.3s 0.25s; width: 38px; will-change: opacity; } html.light .nav__top__top__gallery__mode { background-color: rgba(0, 0, 0, 0.08); } @media (max-width: 768px) { .nav__top__top__gallery__mode { height: 33px; width: 33px; } } .nav__top__top__right:not(.has-gallery) .nav__top__top__gallery__mode { opacity: 0; pointer-events: none; transition: background-color 0.5s, opacity 0.2s; } .nav__top__top__gallery__mode__play { border-color: transparent transparent transparent var(--color-white); border-style: solid; border-width: 4.5px 0px 4.5px 7.5px; height: 0px; transform: translate(1px); transition: border-color 0.5s; width: 0px; } @media (max-width: 768px) { .nav__top__top__gallery__mode__play { border-width: 3.5px 0px 3.5px 5.5px; } } .nav__top__middle { align-items: center; display: flex; flex: 1 1 auto; flex-flow: column; row-gap: 48px; } .nav.is-responsive .nav__top__middle { height: 100%; justify-content: center; } .nav:not(.is-responsive) .nav__top__middle { padding: 44px 0px; } @media (max-width: 768px) { .nav:not(.is-responsive) .nav__top__middle { padding: 68px 0px; } .nav__top__middle { row-gap: 24px; } } .nav__top__middle__logo h1 { display: flex; } .nav__top__middle__logo svg { aspect-ratio: 146 / 15; height: auto; width: 146px; } @media (max-width: 768px) { .nav__top__middle__logo svg { width: 124px; } } .nav__top__bottom { display: flex; justify-content: flex-end; } .nav__cards { display: flex; flex-flow: column; row-gap: 8px; } @media (max-width: 768px) { .nav__cards { row-gap: 6px; } } .nav__card__end { height: 40px; } :root { --br: 16px; --br2: 8px; --pd: 16px; --pd2: 8px; --pd3: 4px; --color-black: #000; --color-white: #e2e6e3; --color-blue: #007aff; --color-gray10: hsla(135,7%,89%,.1); --color-gray20: hsla(135,7%,89%,.2); --color-gray50: hsla(135,7%,89%,.5); --color-white-hover: hsla(135,7%,89%,.5); --color-gray10-hover: hsla(135,7%,89%,.2); --color-gray50-hover: #e2e6e3; } html.light { --color-black: #fff; --color-white: #000; --color-gray10: rgba(0,0,0,.04); --color-gray20: rgba(0,0,0,.2); --color-gray50: rgba(0,0,0,.5); --color-white-hover: rgba(0,0,0,.5); --color-gray10-hover: rgba(0,0,0,.08); --color-gray50-hover: #000; } @media (max-width: 768px) { :root { --br: 12px; } } .home__hero__img { height: 100%; left: 0px; position: absolute; top: 0px; width: 100%; } @property --start { syntax: ""; inherits: false; initial-value: rgba(27,27,27,0); } @property --end { syntax: ""; inherits: false; initial-value: rgba(27,27,27,.9); } .page__container { padding-bottom: 0px; } @media (max-width: 656px) { .page__container { display: none; } } .home__hero { aspect-ratio: 1496 / 998; overflow: hidden; padding: initial; position: relative; width: 100%; } .home__hero__img { display: flex; } .home__hero__img:not(.selected) { visibility: hidden; } .home__hero__img img { height: auto; width: 100%; } .home__cards { column-gap: var(--pd2); display: grid; grid-template-columns: 1fr 1fr 1fr; margin-top: var(--pd2); transition: opacity 0.5s; width: 100%; } .home__cards.loading { opacity: 0; } @media (max-width: 1280px) { .home__cards { grid-template-columns: 1fr 1fr; } } @media (max-width: 1024px) { .home__cards { grid-template-columns: 1fr; } } @media (max-width: 1280px) { .home__cards__column.grid-col--3 { display: none; } } @media (max-width: 1024px) { .home__cards__column.grid-col--2 { display: none; } } :root { --br: 16px; --br2: 8px; --pd: 16px; --pd2: 8px; --pd3: 4px; --color-black: #000; --color-white: #e2e6e3; --color-blue: #007aff; --color-gray10: hsla(135,7%,89%,.1); --color-gray20: hsla(135,7%,89%,.2); --color-gray50: hsla(135,7%,89%,.5); --color-white-hover: hsla(135,7%,89%,.5); --color-gray10-hover: hsla(135,7%,89%,.2); --color-gray50-hover: #e2e6e3; } html.light { --color-black: #fff; --color-white: #000; --color-gray10: rgba(0,0,0,.04); --color-gray20: rgba(0,0,0,.2); --color-gray50: rgba(0,0,0,.5); --color-white-hover: rgba(0,0,0,.5); --color-gray10-hover: rgba(0,0,0,.08); --color-gray50-hover: #000; } @media (max-width: 768px) { :root { --br: 12px; } } @property --start { syntax: ""; inherits: false; initial-value: rgba(27,27,27,0); } @property --end { syntax: ""; inherits: false; initial-value: rgba(27,27,27,.9); } .page__button { align-items: center; background-color: var(--color-gray10); border-radius: 40px; column-gap: var(--pd2); cursor: pointer; display: flex; height: 40px; justify-content: center; padding: 0px 16px; transition: background-color 0.5s; } .page__button.small-border-radius { border-radius: var(--br2); } .page__button.white { background-color: var(--color-white); color: var(--color-black); } .page__button__icon__back { border-top-color: ; border-top-style: ; border-top-width: ; border-right-color: ; border-right-style: ; border-right-width: ; border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; border-bottom: none; border-left: none; flex-shrink: 0; height: 7px; margin-top: 3px; transform: rotate(-45deg); transition: border-color 0.5s; width: 7px; } :root { --br: 16px; --br2: 8px; --pd: 16px; --pd2: 8px; --pd3: 4px; --color-black: #000; --color-white: #e2e6e3; --color-blue: #007aff; --color-gray10: hsla(135,7%,89%,.1); --color-gray20: hsla(135,7%,89%,.2); --color-gray50: hsla(135,7%,89%,.5); --color-white-hover: hsla(135,7%,89%,.5); --color-gray10-hover: hsla(135,7%,89%,.2); --color-gray50-hover: #e2e6e3; } html.light { --color-black: #fff; --color-white: #000; --color-gray10: rgba(0,0,0,.04); --color-gray20: rgba(0,0,0,.2); --color-gray50: rgba(0,0,0,.5); --color-white-hover: rgba(0,0,0,.5); --color-gray10-hover: rgba(0,0,0,.08); --color-gray50-hover: #000; } @media (max-width: 768px) { :root { --br: 12px; } } @property --start { syntax: ""; inherits: false; initial-value: rgba(27,27,27,0); } @property --end { syntax: ""; inherits: false; initial-value: rgba(27,27,27,.9); } .nav__light__mode { background-color: rgba(255, 255, 255, 0.12); border-radius: 38px; cursor: pointer; height: 38px; padding: 3px; transition: background-color 0.5s; width: 62px; } html.light .nav__light__mode { background-color: rgba(0, 0, 0, 0.08); } @media (max-width: 768px) { .nav__light__mode { height: 33px; width: 55px; } } .nav__light__mode__knob { aspect-ratio: 1 / 1; background-color: var(--color-gray10); border-radius: 50%; height: 100%; transition: background-color 0.5s, transform 0.5s; } html.dark .nav__light__mode__knob { transform: translate(23px); } @media (max-width: 768px) { html.dark .nav__light__mode__knob { transform: translate(22px); } } html.light .nav__light__mode__knob { background-color: var(--color-black); } :root { --br: 16px; --br2: 8px; --pd: 16px; --pd2: 8px; --pd3: 4px; --color-black: #000; --color-white: #e2e6e3; --color-blue: #007aff; --color-gray10: hsla(135,7%,89%,.1); --color-gray20: hsla(135,7%,89%,.2); --color-gray50: hsla(135,7%,89%,.5); --color-white-hover: hsla(135,7%,89%,.5); --color-gray10-hover: hsla(135,7%,89%,.2); --color-gray50-hover: #e2e6e3; } html.light { --color-black: #fff; --color-white: #000; --color-gray10: rgba(0,0,0,.04); --color-gray20: rgba(0,0,0,.2); --color-gray50: rgba(0,0,0,.5); --color-white-hover: rgba(0,0,0,.5); --color-gray10-hover: rgba(0,0,0,.08); --color-gray50-hover: #000; } @media (max-width: 768px) { :root { --br: 12px; } } @property --start { syntax: ""; inherits: false; initial-value: rgba(27,27,27,0); } @property --end { syntax: ""; inherits: false; initial-value: rgba(27,27,27,.9); } .nav__clock { cursor: default; font-family: sf-pro-display, sans-serif; font-size: 23px; font-weight: 400; letter-spacing: 0.45px; line-height: 27px; text-align: center; } :root { --br: 16px; --br2: 8px; --pd: 16px; --pd2: 8px; --pd3: 4px; --color-black: #000; --color-white: #e2e6e3; --color-blue: #007aff; --color-gray10: hsla(135,7%,89%,.1); --color-gray20: hsla(135,7%,89%,.2); --color-gray50: hsla(135,7%,89%,.5); --color-white-hover: hsla(135,7%,89%,.5); --color-gray10-hover: hsla(135,7%,89%,.2); --color-gray50-hover: #e2e6e3; } html.light { --color-black: #fff; --color-white: #000; --color-gray10: rgba(0,0,0,.04); --color-gray20: rgba(0,0,0,.2); --color-gray50: rgba(0,0,0,.5); --color-white-hover: rgba(0,0,0,.5); --color-gray10-hover: rgba(0,0,0,.08); --color-gray50-hover: #000; } @media (max-width: 768px) { :root { --br: 12px; } } @property --start { syntax: ""; inherits: false; initial-value: rgba(27,27,27,0); } @property --end { syntax: ""; inherits: false; initial-value: rgba(27,27,27,.9); } .slice-simulator .nav__card { width: 400px; } :root { --br: 16px; --br2: 8px; --pd: 16px; --pd2: 8px; --pd3: 4px; --color-black: #000; --color-white: #e2e6e3; --color-blue: #007aff; --color-gray10: hsla(135,7%,89%,.1); --color-gray20: hsla(135,7%,89%,.2); --color-gray50: hsla(135,7%,89%,.5); --color-white-hover: hsla(135,7%,89%,.5); --color-gray10-hover: hsla(135,7%,89%,.2); --color-gray50-hover: #e2e6e3; } html.light { --color-black: #fff; --color-white: #000; --color-gray10: rgba(0,0,0,.04); --color-gray20: rgba(0,0,0,.2); --color-gray50: rgba(0,0,0,.5); --color-white-hover: rgba(0,0,0,.5); --color-gray10-hover: rgba(0,0,0,.08); --color-gray50-hover: #000; } @media (max-width: 768px) { :root { --br: 12px; } } .home__card__img { align-items: center; display: flex; justify-content: center; } .home__card__title { font-family: sf-pro-display, sans-serif; font-size: 23px; font-weight: 400; letter-spacing: 0.45px; line-height: 27px; } @media (max-width: 768px) { .home__card__title { font-size: 16px; letter-spacing: 0.25px; line-height: 130%; } } @property --start { syntax: ""; inherits: false; initial-value: rgba(27,27,27,0); } @property --end { syntax: ""; inherits: false; initial-value: rgba(27,27,27,.9); } .home__card { margin-bottom: var(--pd2); width: 100%; } .home__card__date { color: var(--color-gray50); } .home__card__text, .home__card__title { margin-top: var(--pd2); } .home__card__text { color: var(--color-gray50); } .home__card__img { border-radius: var(--br2); height: auto; margin-top: 20px; overflow: hidden; position: relative; width: 100%; } .home__card__img img, .home__card__img picture { display: flex; width: 100%; } .home__card__img img { height: auto; } .home__card__map__marker { background-color: var(--color-blue); border: 3px solid var(--color-white); border-radius: 50%; height: 19px; position: absolute; transition: border-color 0.5s; width: 19px; } @media (max-width: 768px) { .home__card__map__marker { border-width: 2px; height: 15px; width: 15px; } } :root { --br: 16px; --br2: 8px; --pd: 16px; --pd2: 8px; --pd3: 4px; --color-black: #000; --color-white: #e2e6e3; --color-blue: #007aff; --color-gray10: hsla(135,7%,89%,.1); --color-gray20: hsla(135,7%,89%,.2); --color-gray50: hsla(135,7%,89%,.5); --color-white-hover: hsla(135,7%,89%,.5); --color-gray10-hover: hsla(135,7%,89%,.2); --color-gray50-hover: #e2e6e3; } html.light { --color-black: #fff; --color-white: #000; --color-gray10: rgba(0,0,0,.04); --color-gray20: rgba(0,0,0,.2); --color-gray50: rgba(0,0,0,.5); --color-white-hover: rgba(0,0,0,.5); --color-gray10-hover: rgba(0,0,0,.08); --color-gray50-hover: #000; } @media (max-width: 768px) { :root { --br: 12px; } } .error { align-items: center; display: flex; justify-content: center; } .error__message { font-family: sf-pro-text, sans-serif; font-size: 14px; font-weight: 400; letter-spacing: 0px; line-height: 125%; } @media (max-width: 768px) { .error__message { font-size: 13.5px; letter-spacing: -0.31px; line-height: 125%; } } .error__title { font-family: sf-pro-display, sans-serif; font-size: 23px; font-weight: 400; letter-spacing: 0.45px; line-height: 27px; } @media (max-width: 768px) { .error__title { font-size: 16px; letter-spacing: 0.25px; line-height: 130%; } } @property --start { syntax: ""; inherits: false; initial-value: rgba(27,27,27,0); } @property --end { syntax: ""; inherits: false; initial-value: rgba(27,27,27,.9); } .error { flex-flow: column; min-height: calc(100svh - var(--pd) - var(--pd)); } .error__message { color: var(--color-gray50); margin-bottom: calc(var(--pd)*2); margin-top: var(--pd); padding: 0px 32px; text-align: center; text-wrap: balance; } @media (max-width: 768px) { .error__message { margin-bottom: calc(var(--pd)*1.5); margin-top: var(--pd); } } .page__button { align-items: center; background-color: var(--color-gray10); border-radius: 40px; column-gap: var(--pd2); cursor: pointer; display: flex; height: 40px; justify-content: center; padding: 0px 16px; transition: background-color 0.5s; } :root { --br: 16px; --br2: 8px; --pd: 16px; --pd2: 8px; --pd3: 4px; --color-black: #000; --color-white: #e2e6e3; --color-blue: #007aff; --color-gray10: hsla(135,7%,89%,.1); --color-gray20: hsla(135,7%,89%,.2); --color-gray50: hsla(135,7%,89%,.5); --color-white-hover: hsla(135,7%,89%,.5); --color-gray10-hover: hsla(135,7%,89%,.2); --color-gray50-hover: #e2e6e3; } html.light { --color-black: #fff; --color-white: #000; --color-gray10: rgba(0,0,0,.04); --color-gray20: rgba(0,0,0,.2); --color-gray50: rgba(0,0,0,.5); --color-white-hover: rgba(0,0,0,.5); --color-gray10-hover: rgba(0,0,0,.08); --color-gray50-hover: #000; } @media (max-width: 768px) { :root { --br: 12px; } } .nav__light__mode { background-color: rgba(255, 255, 255, 0.12); border-radius: 38px; cursor: pointer; height: 38px; padding: 3px; transition: background-color 0.5s; width: 62px; } html.light .nav__light__mode { background-color: rgba(0, 0, 0, 0.08); } @media (max-width: 768px) { .nav__light__mode { height: 33px; width: 55px; } } .nav__light__mode__knob { aspect-ratio: 1 / 1; background-color: var(--color-gray10); border-radius: 50%; height: 100%; transition: background-color 0.5s, transform 0.5s; } html.dark .nav__light__mode__knob { transform: translate(23px); } @media (max-width: 768px) { html.dark .nav__light__mode__knob { transform: translate(22px); } } html.light .nav__light__mode__knob { background-color: var(--color-black); } :root { --br: 16px; --br2: 8px; --pd: 16px; --pd2: 8px; --pd3: 4px; --color-black: #000; --color-white: #e2e6e3; --color-blue: #007aff; --color-gray10: hsla(135,7%,89%,.1); --color-gray20: hsla(135,7%,89%,.2); --color-gray50: hsla(135,7%,89%,.5); --color-white-hover: hsla(135,7%,89%,.5); --color-gray10-hover: hsla(135,7%,89%,.2); --color-gray50-hover: #e2e6e3; } html.light { --color-black: #fff; --color-white: #000; --color-gray10: rgba(0,0,0,.04); --color-gray20: rgba(0,0,0,.2); --color-gray50: rgba(0,0,0,.5); --color-white-hover: rgba(0,0,0,.5); --color-gray10-hover: rgba(0,0,0,.08); --color-gray50-hover: #000; } @media (max-width: 768px) { :root { --br: 12px; } } .nav__clock { cursor: default; font-family: sf-pro-display, sans-serif; font-size: 23px; font-weight: 400; letter-spacing: 0.45px; line-height: 27px; text-align: center; } :root { --br: 16px; --br2: 8px; --pd: 16px; --pd2: 8px; --pd3: 4px; --color-black: #000; --color-white: #e2e6e3; --color-blue: #007aff; --color-gray10: hsla(135,7%,89%,.1); --color-gray20: hsla(135,7%,89%,.2); --color-gray50: hsla(135,7%,89%,.5); --color-white-hover: hsla(135,7%,89%,.5); --color-gray10-hover: hsla(135,7%,89%,.2); --color-gray50-hover: #e2e6e3; } html.light { --color-black: #fff; --color-white: #000; --color-gray10: rgba(0,0,0,.04); --color-gray20: rgba(0,0,0,.2); --color-gray50: rgba(0,0,0,.5); --color-white-hover: rgba(0,0,0,.5); --color-gray10-hover: rgba(0,0,0,.08); --color-gray50-hover: #000; } @media (max-width: 768px) { :root { --br: 12px; } } .nav__top__top__gallery__mode { align-items: center; display: flex; justify-content: center; } .nav__top__middle__logo { cursor: pointer; margin: -10px; padding: 10px; } @property --start { syntax: ""; inherits: false; initial-value: rgba(27,27,27,0); } @property --end { syntax: ""; inherits: false; initial-value: rgba(27,27,27,.9); } .nav { max-height: 100svh; overflow-y: auto; padding: var(--pd2); scrollbar-width: none; } @media (min-width: 657px) { .nav { padding-right: 0px; position: sticky; top: 0px; } } @media (max-width: 656px) { html[data-template="index"] .nav { position: sticky; top: 0px; } html.device-android .nav { max-height: 100dvh; } } .nav__inner { width: clamp(368px, 346.667px + 2.77778vw, 400px); } @media (max-width: 656px) { .nav__inner { width: auto; } } .nav__top__inner { display: flex; flex-flow: column; } .nav__top__top { align-items: center; display: flex; flex: 1 1 0%; justify-content: space-between; } .nav__top__top__right { display: flex; position: relative; } .nav__light__mode { transition: background-color 0.5s, transform 0.5s; will-change: transform; } .nav__top__top__right.has-gallery .nav__light__mode { transform: translate(-42px); } @media (max-width: 768px) { .nav__top__top__right.has-gallery .nav__light__mode { transform: translate(-37px); } } .nav__top__top__gallery__mode { background-color: rgba(255, 255, 255, 0.12); border-radius: 50%; cursor: pointer; height: 38px; position: absolute; right: 0px; top: 0px; transition: background-color 0.5s, opacity 0.3s 0.25s; width: 38px; will-change: opacity; } html.light .nav__top__top__gallery__mode { background-color: rgba(0, 0, 0, 0.08); } @media (max-width: 768px) { .nav__top__top__gallery__mode { height: 33px; width: 33px; } } .nav__top__top__right:not(.has-gallery) .nav__top__top__gallery__mode { opacity: 0; pointer-events: none; transition: background-color 0.5s, opacity 0.2s; } .nav__top__top__gallery__mode__play { border-color: transparent transparent transparent var(--color-white); border-style: solid; border-width: 4.5px 0px 4.5px 7.5px; height: 0px; transform: translate(1px); transition: border-color 0.5s; width: 0px; } @media (max-width: 768px) { .nav__top__top__gallery__mode__play { border-width: 3.5px 0px 3.5px 5.5px; } } .nav__top__middle { align-items: center; display: flex; flex: 1 1 auto; flex-flow: column; row-gap: 48px; } .nav.is-responsive .nav__top__middle { height: 100%; justify-content: center; } .nav:not(.is-responsive) .nav__top__middle { padding: 44px 0px; } @media (max-width: 768px) { .nav:not(.is-responsive) .nav__top__middle { padding: 68px 0px; } .nav__top__middle { row-gap: 24px; } } .nav__top__middle__logo h1 { display: flex; } .nav__top__middle__logo svg { aspect-ratio: 146 / 15; height: auto; width: 146px; } @media (max-width: 768px) { .nav__top__middle__logo svg { width: 124px; } } .nav__top__bottom { display: flex; justify-content: flex-end; } .nav__cards { display: flex; flex-flow: column; row-gap: 8px; } @media (max-width: 768px) { .nav__cards { row-gap: 6px; } } .nav__card__end { height: 40px; } :root { --br: 16px; --br2: 8px; --pd: 16px; --pd2: 8px; --pd3: 4px; --color-black: #000; --color-white: #e2e6e3; --color-blue: #007aff; --color-gray10: hsla(135,7%,89%,.1); --color-gray20: hsla(135,7%,89%,.2); --color-gray50: hsla(135,7%,89%,.5); --color-white-hover: hsla(135,7%,89%,.5); --color-gray10-hover: hsla(135,7%,89%,.2); --color-gray50-hover: #e2e6e3; } html.light { --color-black: #fff; --color-white: #000; --color-gray10: rgba(0,0,0,.04); --color-gray20: rgba(0,0,0,.2); --color-gray50: rgba(0,0,0,.5); --color-white-hover: rgba(0,0,0,.5); --color-gray10-hover: rgba(0,0,0,.08); --color-gray50-hover: #000; } @media (max-width: 768px) { :root { --br: 12px; } } @property --start { syntax: ""; inherits: false; initial-value: rgba(27,27,27,0); } @property --end { syntax: ""; inherits: false; initial-value: rgba(27,27,27,.9); } .page__button { align-items: center; background-color: var(--color-gray10); border-radius: 40px; column-gap: var(--pd2); cursor: pointer; display: flex; height: 40px; justify-content: center; padding: 0px 16px; transition: background-color 0.5s; } .page__button.small-border-radius { border-radius: var(--br2); } .page__button.white { background-color: var(--color-white); color: var(--color-black); } .page__button__icon__back { border-top-color: ; border-top-style: ; border-top-width: ; border-right-color: ; border-right-style: ; border-right-width: ; border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; border-bottom: none; border-left: none; flex-shrink: 0; height: 7px; margin-top: 3px; transform: rotate(-45deg); transition: border-color 0.5s; width: 7px; } :root { --br: 16px; --br2: 8px; --pd: 16px; --pd2: 8px; --pd3: 4px; --color-black: #000; --color-white: #e2e6e3; --color-blue: #007aff; --color-gray10: hsla(135,7%,89%,.1); --color-gray20: hsla(135,7%,89%,.2); --color-gray50: hsla(135,7%,89%,.5); --color-white-hover: hsla(135,7%,89%,.5); --color-gray10-hover: hsla(135,7%,89%,.2); --color-gray50-hover: #e2e6e3; } html.light { --color-black: #fff; --color-white: #000; --color-gray10: rgba(0,0,0,.04); --color-gray20: rgba(0,0,0,.2); --color-gray50: rgba(0,0,0,.5); --color-white-hover: rgba(0,0,0,.5); --color-gray10-hover: rgba(0,0,0,.08); --color-gray50-hover: #000; } @media (max-width: 768px) { :root { --br: 12px; } } @property --start { syntax: ""; inherits: false; initial-value: rgba(27,27,27,0); } @property --end { syntax: ""; inherits: false; initial-value: rgba(27,27,27,.9); } video { object-fit: cover; opacity: 0; transition: opacity 0.5s; will-change: opacity; } video.is-loaded { opacity: 1; } :root { --br: 16px; --br2: 8px; --pd: 16px; --pd2: 8px; --pd3: 4px; --color-black: #000; --color-white: #e2e6e3; --color-blue: #007aff; --color-gray10: hsla(135,7%,89%,.1); --color-gray20: hsla(135,7%,89%,.2); --color-gray50: hsla(135,7%,89%,.5); --color-white-hover: hsla(135,7%,89%,.5); --color-gray10-hover: hsla(135,7%,89%,.2); --color-gray50-hover: #e2e6e3; } html.light { --color-black: #fff; --color-white: #000; --color-gray10: rgba(0,0,0,.04); --color-gray20: rgba(0,0,0,.2); --color-gray50: rgba(0,0,0,.5); --color-white-hover: rgba(0,0,0,.5); --color-gray10-hover: rgba(0,0,0,.08); --color-gray50-hover: #000; } @media (max-width: 768px) { :root { --br: 12px; } } @property --start { syntax: ""; inherits: false; initial-value: rgba(27,27,27,0); } @property --end { syntax: ""; inherits: false; initial-value: rgba(27,27,27,.9); } .preload { opacity: 0; transition: opacity 0.5s; will-change: opacity; } .preload.loaded { opacity: 1; } :root { --br: 16px; --br2: 8px; --pd: 16px; --pd2: 8px; --pd3: 4px; --color-black: #000; --color-white: #e2e6e3; --color-blue: #007aff; --color-gray10: hsla(135,7%,89%,.1); --color-gray20: hsla(135,7%,89%,.2); --color-gray50: hsla(135,7%,89%,.5); --color-white-hover: hsla(135,7%,89%,.5); --color-gray10-hover: hsla(135,7%,89%,.2); --color-gray50-hover: #e2e6e3; } html.light { --color-black: #fff; --color-white: #000; --color-gray10: rgba(0,0,0,.04); --color-gray20: rgba(0,0,0,.2); --color-gray50: rgba(0,0,0,.5); --color-white-hover: rgba(0,0,0,.5); --color-gray10-hover: rgba(0,0,0,.08); --color-gray50-hover: #000; } @media (max-width: 768px) { :root { --br: 12px; } } .home__hero__img { height: 100%; left: 0px; position: absolute; top: 0px; width: 100%; } @property --start { syntax: ""; inherits: false; initial-value: rgba(27,27,27,0); } @property --end { syntax: ""; inherits: false; initial-value: rgba(27,27,27,.9); } .page__container { padding-bottom: 0px; } @media (max-width: 656px) { .page__container { display: none; } } .home__hero { aspect-ratio: 1496 / 998; overflow: hidden; padding: initial; position: relative; width: 100%; } .home__hero__img { display: flex; } .home__hero__img:not(.selected) { visibility: hidden; } .home__hero__img img { height: auto; width: 100%; } .home__cards { column-gap: var(--pd2); display: grid; grid-template-columns: 1fr 1fr 1fr; margin-top: var(--pd2); transition: opacity 0.5s; width: 100%; } .home__cards.loading { opacity: 0; } @media (max-width: 1280px) { .home__cards { grid-template-columns: 1fr 1fr; } } @media (max-width: 1024px) { .home__cards { grid-template-columns: 1fr; } } @media (max-width: 1280px) { .home__cards__column.grid-col--3 { display: none; } } @media (max-width: 1024px) { .home__cards__column.grid-col--2 { display: none; } } :root { --br: 16px; --br2: 8px; --pd: 16px; --pd2: 8px; --pd3: 4px; --color-black: #000; --color-white: #e2e6e3; --color-blue: #007aff; --color-gray10: hsla(135,7%,89%,.1); --color-gray20: hsla(135,7%,89%,.2); --color-gray50: hsla(135,7%,89%,.5); --color-white-hover: hsla(135,7%,89%,.5); --color-gray10-hover: hsla(135,7%,89%,.2); --color-gray50-hover: #e2e6e3; } html.light { --color-black: #fff; --color-white: #000; --color-gray10: rgba(0,0,0,.04); --color-gray20: rgba(0,0,0,.2); --color-gray50: rgba(0,0,0,.5); --color-white-hover: rgba(0,0,0,.5); --color-gray10-hover: rgba(0,0,0,.08); --color-gray50-hover: #000; } @media (max-width: 768px) { :root { --br: 12px; } } @property --start { syntax: ""; inherits: false; initial-value: rgba(27,27,27,0); } @property --end { syntax: ""; inherits: false; initial-value: rgba(27,27,27,.9); } .slice-simulator .nav__card { width: 400px; } :root { --br: 16px; --br2: 8px; --pd: 16px; --pd2: 8px; --pd3: 4px; --color-black: #000; --color-white: #e2e6e3; --color-blue: #007aff; --color-gray10: hsla(135,7%,89%,.1); --color-gray20: hsla(135,7%,89%,.2); --color-gray50: hsla(135,7%,89%,.5); --color-white-hover: hsla(135,7%,89%,.5); --color-gray10-hover: hsla(135,7%,89%,.2); --color-gray50-hover: #e2e6e3; } html.light { --color-black: #fff; --color-white: #000; --color-gray10: rgba(0,0,0,.04); --color-gray20: rgba(0,0,0,.2); --color-gray50: rgba(0,0,0,.5); --color-white-hover: rgba(0,0,0,.5); --color-gray10-hover: rgba(0,0,0,.08); --color-gray50-hover: #000; } @media (max-width: 768px) { :root { --br: 12px; } } .home__card__img { align-items: center; display: flex; justify-content: center; } .home__card__title { font-family: sf-pro-display, sans-serif; font-size: 23px; font-weight: 400; letter-spacing: 0.45px; line-height: 27px; } @media (max-width: 768px) { .home__card__title { font-size: 16px; letter-spacing: 0.25px; line-height: 130%; } } @property --start { syntax: ""; inherits: false; initial-value: rgba(27,27,27,0); } @property --end { syntax: ""; inherits: false; initial-value: rgba(27,27,27,.9); } .home__card { margin-bottom: var(--pd2); width: 100%; } .home__card__date { color: var(--color-gray50); } .home__card__text, .home__card__title { margin-top: var(--pd2); } .home__card__text { color: var(--color-gray50); } .home__card__img { border-radius: var(--br2); height: auto; margin-top: 20px; overflow: hidden; position: relative; width: 100%; } .home__card__img img, .home__card__img picture { display: flex; width: 100%; } .home__card__img img { height: auto; } .home__card__map__marker { background-color: var(--color-blue); border: 3px solid var(--color-white); border-radius: 50%; height: 19px; position: absolute; transition: border-color 0.5s; width: 19px; } @media (max-width: 768px) { .home__card__map__marker { border-width: 2px; height: 15px; width: 15px; } } :root { --br: 16px; --br2: 8px; --pd: 16px; --pd2: 8px; --pd3: 4px; --color-black: #000; --color-white: #e2e6e3; --color-blue: #007aff; --color-gray10: hsla(135,7%,89%,.1); --color-gray20: hsla(135,7%,89%,.2); --color-gray50: hsla(135,7%,89%,.5); --color-white-hover: hsla(135,7%,89%,.5); --color-gray10-hover: hsla(135,7%,89%,.2); --color-gray50-hover: #e2e6e3; } html.light { --color-black: #fff; --color-white: #000; --color-gray10: rgba(0,0,0,.04); --color-gray20: rgba(0,0,0,.2); --color-gray50: rgba(0,0,0,.5); --color-white-hover: rgba(0,0,0,.5); --color-gray10-hover: rgba(0,0,0,.08); --color-gray50-hover: #000; } @media (max-width: 768px) { :root { --br: 12px; } } .page__button__close { align-items: center; background-color: rgba(255, 255, 255, 0.12); border-radius: 50%; color: var(--color-white); cursor: pointer; display: flex; height: 40px; justify-content: center; position: relative; transition: background-color 0.5s, color 0.5s; width: 40px; } @property --start { syntax: ""; inherits: false; initial-value: rgba(27,27,27,0); } @property --end { syntax: ""; inherits: false; initial-value: rgba(27,27,27,.9); } .page__button__close svg { height: 30px; width: 30px; } @media (max-width: 768px) { .page__button__close svg { width: 22.5px; } } html.light .page__button__close { background-color: rgba(0, 0, 0, 0.08); } @media (max-width: 768px) { .page__button__close { height: 30px; width: 30px; } } :root { --br: 16px; --br2: 8px; --pd: 16px; --pd2: 8px; --pd3: 4px; --color-black: #000; --color-white: #e2e6e3; --color-blue: #007aff; --color-gray10: hsla(135,7%,89%,.1); --color-gray20: hsla(135,7%,89%,.2); --color-gray50: hsla(135,7%,89%,.5); --color-white-hover: hsla(135,7%,89%,.5); --color-gray10-hover: hsla(135,7%,89%,.2); --color-gray50-hover: #e2e6e3; } html.light { --color-black: #fff; --color-white: #000; --color-gray10: rgba(0,0,0,.04); --color-gray20: rgba(0,0,0,.2); --color-gray50: rgba(0,0,0,.5); --color-white-hover: rgba(0,0,0,.5); --color-gray10-hover: rgba(0,0,0,.08); --color-gray50-hover: #000; } @media (max-width: 768px) { :root { --br: 12px; } } .case__studies__filters__top__submit { cursor: pointer; margin: -10px; padding: 10px; } @property --start { syntax: ""; inherits: false; initial-value: rgba(27,27,27,0); } @property --end { syntax: ""; inherits: false; initial-value: rgba(27,27,27,.9); } .page__container { transition: opacity 0.5s; } .page__container.loading { opacity: 0; } .case__studies__filters { left: 0px; padding: var(--pd2); position: fixed; right: 0px; top: 0px; z-index: 1; } .case__studies__filters::before { background: linear-gradient(rgba(0, 0, 0, 0.5), transparent); content: ""; height: 125%; left: 0px; pointer-events: none; position: absolute; right: 0px; top: 0px; transition: background-color 0.5s; } html.light .case__studies__filters::before { background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)); } .case__studies__filters__top { column-gap: var(--pd2); display: grid; grid-template-columns: repeat(4, 1fr); position: relative; } .case__studies__filters__top form { width: 100%; } .case__studies__filters__top form input[type="submit"] { display: none; } @media (max-width: 1024px) { .case__studies__filters__top { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 656px) { .case__studies__filters__top { grid-template-columns: repeat(3, 1fr); } } .case__studies__filters__top__inner { align-items: center; display: flex; grid-column: 1 / 2; position: relative; } @media (max-width: 768px) { .case__studies__filters__top__inner { width: 290px; } } .case__studies__filters__top input[type="text"] { backdrop-filter: blur(50px); } .case__studies__filters__top__submit { position: absolute; right: 12px; } .case__studies__filters__categories { backdrop-filter: blur(50px); background-color: var(--color-gray10); border-radius: var(--br2); left: 0px; margin-top: var(--pd2); position: absolute; top: 100%; width: 100%; } @media (max-width: 768px) { .case__studies__filters__categories { width: 290px; } } .case__studies__filters__category { cursor: pointer; padding: var(--pd2) var(--pd); } .case__studies__filters__category:first-child { padding-top: var(--pd); } .case__studies__filters__category:last-child { padding-bottom: var(--pd); } .case__studies__filters__category p { color: rgb(226, 230, 227); } .case__studies__filters__top > a { position: absolute; right: 0px; } .case__studies__filters__top .page__button__close { backdrop-filter: blur(50px); } .case__studies__cards { column-gap: var(--pd2); display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; margin-top: calc(40px + var(--pd2)); width: 100%; } @media (max-width: 1024px) { .case__studies__cards { grid-template-columns: 1fr 1fr 1fr; } } @media (max-width: 768px) { .case__studies__cards { margin-top: calc(30px + var(--pd2)); } } @media (max-width: 656px) { .case__studies__cards { grid-template-columns: 1fr; } } @media (max-width: 1024px) { .case__studies__column.grid-col--4 { display: none; } } @media (max-width: 656px) { .case__studies__column.grid-col--2, .case__studies__column.grid-col--3 { display: none; } } .case__studies__card { flex: 1 1 0%; margin-bottom: 24px; width: 100%; } .case__studies__card__media { background-color: var(--color-gray10); border-radius: var(--br2); display: flex; overflow: hidden; transition: background-color 0.5s; width: 100%; } .case__studies__card__media img { height: auto; width: 100%; } .case__studies__card h2 { margin-top: var(--pd3); } .case__studies__card p { color: var(--color-gray50); } :root { --br: 16px; --br2: 8px; --pd: 16px; --pd2: 8px; --pd3: 4px; --color-black: #000; --color-white: #e2e6e3; --color-blue: #007aff; --color-gray10: hsla(135,7%,89%,.1); --color-gray20: hsla(135,7%,89%,.2); --color-gray50: hsla(135,7%,89%,.5); --color-white-hover: hsla(135,7%,89%,.5); --color-gray10-hover: hsla(135,7%,89%,.2); --color-gray50-hover: #e2e6e3; } html.light { --color-black: #fff; --color-white: #000; --color-gray10: rgba(0,0,0,.04); --color-gray20: rgba(0,0,0,.2); --color-gray50: rgba(0,0,0,.5); --color-white-hover: rgba(0,0,0,.5); --color-gray10-hover: rgba(0,0,0,.08); --color-gray50-hover: #000; } @media (max-width: 768px) { :root { --br: 12px; } } .about__clients h2 { color: var(--color-gray50); } .about__clients { padding-bottom: 28px; } .about__clients__list { column-count: 3; list-style: none; padding-inline-start: 0px !important; } .about__clients__list li { color: var(--color-white); opacity: 0.25; transition: opacity 0.4s, color 0.5s; } .about__clients__list li.selected { opacity: 1; } @media (min-width: 1025px) and (max-width: 1280px) { .about__clients__list { column-count: 2; } } @media (max-width: 896px) { .about__clients__list { column-count: 2; } } :root { --br: 16px; --br2: 8px; --pd: 16px; --pd2: 8px; --pd3: 4px; --color-black: #000; --color-white: #e2e6e3; --color-blue: #007aff; --color-gray10: hsla(135,7%,89%,.1); --color-gray20: hsla(135,7%,89%,.2); --color-gray50: hsla(135,7%,89%,.5); --color-white-hover: hsla(135,7%,89%,.5); --color-gray10-hover: hsla(135,7%,89%,.2); --color-gray50-hover: #e2e6e3; } html.light { --color-black: #fff; --color-white: #000; --color-gray10: rgba(0,0,0,.04); --color-gray20: rgba(0,0,0,.2); --color-gray50: rgba(0,0,0,.5); --color-white-hover: rgba(0,0,0,.5); --color-gray10-hover: rgba(0,0,0,.08); --color-gray50-hover: #000; } @media (max-width: 768px) { :root { --br: 12px; } } .about__locations { display: grid; gap: var(--pd2); grid-template-columns: 1fr 1fr; } .about__location { display: flex; flex-flow: column; grid-column: span 1; row-gap: var(--pd2); --size: 38px; } @media (max-width: 896px) { .about__location { grid-column: span 2; } } .about__location__img { display: flex; overflow: hidden; padding: initial; } .about__location__img img { height: auto; width: 100%; } .about__location__info { column-gap: var(--pd); display: flex; flex: 1 1 auto; } .about__location__info__clock { border: 1px solid var(--color-white); border-radius: 50%; flex-shrink: 0; height: var(--size); position: relative; transition: border-color 0.5s; width: var(--size); } .hand { background: var(--color-white); bottom: 50%; left: 50%; position: absolute; transform: translate(-50%) rotate(0deg); transform-origin: 50% 100%; transition: background 0.5s; width: 1px; } .hand.hour { background: red; } .hand.hour, .hand.minute { height: calc(var(--size)*.36); } .about__location__info__inner { display: flex; flex: 1 1 auto; flex-flow: column; } .about__location__info__inner p { color: var(--color-gray50); } :root { --br: 16px; --br2: 8px; --pd: 16px; --pd2: 8px; --pd3: 4px; --color-black: #000; --color-white: #e2e6e3; --color-blue: #007aff; --color-gray10: hsla(135,7%,89%,.1); --color-gray20: hsla(135,7%,89%,.2); --color-gray50: hsla(135,7%,89%,.5); --color-white-hover: hsla(135,7%,89%,.5); --color-gray10-hover: hsla(135,7%,89%,.2); --color-gray50-hover: #e2e6e3; } html.light { --color-black: #fff; --color-white: #000; --color-gray10: rgba(0,0,0,.04); --color-gray20: rgba(0,0,0,.2); --color-gray50: rgba(0,0,0,.5); --color-white-hover: rgba(0,0,0,.5); --color-gray10-hover: rgba(0,0,0,.08); --color-gray50-hover: #000; } @media (max-width: 768px) { :root { --br: 12px; } } .about__offerings__offering__description { font-family: sf-pro-display, sans-serif; font-size: 23px; font-weight: 400; letter-spacing: 0.45px; line-height: 27px; } @media (max-width: 768px) { .about__offerings__offering__description { font-size: 16px; letter-spacing: 0.25px; line-height: 130%; } } .about__offerings { overflow: hidden; position: relative; } .about__offerings h2 { color: var(--color-gray50); } .about__offerings__offering { display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; } .about__offerings__offering__inner { display: flex; flex-flow: column; grid-area: 1 / 1 / -1 / -1; justify-content: space-between; opacity: 0; row-gap: clamp(32px, -5.33333px + 4.86111vw, 88px); transition: opacity 0.2s; } .about__offerings__offering__inner.selected { opacity: 1; transition: opacity 0.5s 0.2s; } .about__offerings__offering__description { padding-right: 13%; } @media (max-width: 1280px) { .about__offerings__offering__description { padding-right: 7.5%; } } @media (max-width: 896px) { .about__offerings__offering__description { padding-right: 0px; } } .about__offerings__offering__services { color: var(--color-gray50); } :root { --br: 16px; --br2: 8px; --pd: 16px; --pd2: 8px; --pd3: 4px; --color-black: #000; --color-white: #e2e6e3; --color-blue: #007aff; --color-gray10: hsla(135,7%,89%,.1); --color-gray20: hsla(135,7%,89%,.2); --color-gray50: hsla(135,7%,89%,.5); --color-white-hover: hsla(135,7%,89%,.5); --color-gray10-hover: hsla(135,7%,89%,.2); --color-gray50-hover: #e2e6e3; } html.light { --color-black: #fff; --color-white: #000; --color-gray10: rgba(0,0,0,.04); --color-gray20: rgba(0,0,0,.2); --color-gray50: rgba(0,0,0,.5); --color-white-hover: rgba(0,0,0,.5); --color-gray10-hover: rgba(0,0,0,.08); --color-gray50-hover: #000; } @media (max-width: 768px) { :root { --br: 12px; } } .about__team__profile__img { height: 100%; left: 0px; position: absolute; top: 0px; width: 100%; } .about__team { overflow: hidden; padding: initial; position: relative; } .about__team::after, .about__team::before { content: ""; height: 112px; left: 0px; pointer-events: none; position: absolute; right: 0px; transition: --start 0.5s, --end 0.5s, opacity 0.3s; z-index: 1; } html.light .about__team::after, html.light .about__team::before { --start: hsla(0,0%,96%,0); --end: hsla(0,0%,96%,.9); } .about__team::before { background: linear-gradient(180deg,var(--end) 0,var(--start) 100%); top: 0px; } .about__team::after { background: linear-gradient(180deg,var(--start) 0,var(--end) 100%); bottom: 0px; } .hide-bottom-indicator.about__team::after, .hide-top-indicator.about__team::before { opacity: 0; } .about__team__inner { height: 498px; overflow-y: scroll; padding: var(--br); scrollbar-width: none; } .about__team__inner h2 { color: var(--color-gray50); } .about__team__list { margin-top: var(--pd2); } .about__team__member { border-bottom: 1px solid var(--color-gray10); color: var(--color-gray50); column-gap: var(--pd2); cursor: default; display: grid; grid-template-columns: 2.5fr 4fr 2.87fr; padding: 12px 0px; } .about__team__member p:first-child { color: var(--color-white); } .about__team__member p:first-child span { margin-left: 3px; opacity: 0; transition: opacity 0.4s; } @media (max-width: 1280px) { .about__team__member p:nth-child(3) { text-align: right; } } @media (max-width: 896px) { .about__team__member { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; } .about__team__member p:first-child { grid-area: 1 / 1 / 2 / 2; } .about__team__member p:nth-child(3) { grid-area: 1 / 2 / 2 / -1; text-align: right; } .about__team__member p:nth-child(2) { grid-area: 2 / 1 / -1 / -1; } } .about__team__profile__imgs { aspect-ratio: 120 / 120; border-radius: var(--br2); height: auto; margin-top: calc(-1 * clamp(40px, 0px + 3.125vw, 60px)); opacity: 0; overflow: hidden; pointer-events: none; position: absolute; right: var(--br); top: 0px; transition: opacity 0.2s; width: clamp(80px, 0px + 6.25vw, 120px); } .about__team__profile__imgs.show { opacity: 1; } @media (max-width: 1280px) { .about__team__profile__imgs { display: none; } } html.device-touch .about__team__profile__imgs { display: none; } .about__team__profile__img { display: flex; visibility: hidden; z-index: 0; } .about__team__profile__img img { height: 100%; object-fit: cover; width: 100%; } .about__team__profile__img.selected { visibility: visible; } :root { --br: 16px; --br2: 8px; --pd: 16px; --pd2: 8px; --pd3: 4px; --color-black: #000; --color-white: #e2e6e3; --color-blue: #007aff; --color-gray10: hsla(135,7%,89%,.1); --color-gray20: hsla(135,7%,89%,.2); --color-gray50: hsla(135,7%,89%,.5); --color-white-hover: hsla(135,7%,89%,.5); --color-gray10-hover: hsla(135,7%,89%,.2); --color-gray50-hover: #e2e6e3; } html.light { --color-black: #fff; --color-white: #000; --color-gray10: rgba(0,0,0,.04); --color-gray20: rgba(0,0,0,.2); --color-gray50: rgba(0,0,0,.5); --color-white-hover: rgba(0,0,0,.5); --color-gray10-hover: rgba(0,0,0,.08); --color-gray50-hover: #000; } @media (max-width: 768px) { :root { --br: 12px; } } .about__agenda { overflow: hidden; padding: initial; position: relative; } .about__agenda::after, .about__agenda::before { content: ""; height: 112px; left: 0px; pointer-events: none; position: absolute; right: 0px; transition: --start 0.5s, --end 0.5s, opacity 0.3s; z-index: 1; } html.light .about__agenda::after, html.light .about__agenda::before { --start: hsla(0,0%,96%,0); --end: hsla(0,0%,96%,.9); } .about__agenda::before { background: linear-gradient(180deg,var(--end) 0,var(--start) 100%); top: 0px; } .about__agenda::after { background: linear-gradient(180deg,var(--start) 0,var(--end) 100%); bottom: 0px; } .hide-bottom-indicator.about__agenda::after, .hide-top-indicator.about__agenda::before { opacity: 0; } @media (max-width: 1024px) { .about__agenda { grid-column: 1 / -1; } } .about__agenda__inner { max-height: 548px; overflow-y: scroll; padding: var(--br); scrollbar-width: none; } .about__agenda__inner h2 { color: var(--color-gray50); margin-bottom: var(--br); padding-bottom: var(--br); } .about__agenda__items { display: flex; flex-flow: column; } .about__agenda_item { border-bottom: 1px solid var(--color-gray10); padding: var(--br) 0; } .about__agenda_item:first-child { padding-top: 0px; } .about__agenda_item:last-child { border-bottom: initial; padding-bottom: 0px; } .about__agenda_item p { color: var(--color-gray50); } .about__agenda__item__header { column-gap: var(--pd2); display: flex; justify-content: space-between; } .about__agenda__item__header p { white-space: nowrap; } @media (min-width: 1025px) and (max-width: 1280px) { .about__agenda__item__header { flex-flow: column; } } .about__agenda__item__info { display: flex; flex-flow: column; padding-right: var(--pd); row-gap: 1em; } :root { --br: 16px; --br2: 8px; --pd: 16px; --pd2: 8px; --pd3: 4px; --color-black: #000; --color-white: #e2e6e3; --color-blue: #007aff; --color-gray10: hsla(135,7%,89%,.1); --color-gray20: hsla(135,7%,89%,.2); --color-gray50: hsla(135,7%,89%,.5); --color-white-hover: hsla(135,7%,89%,.5); --color-gray10-hover: hsla(135,7%,89%,.2); --color-gray50-hover: #e2e6e3; } html.light { --color-black: #fff; --color-white: #000; --color-gray10: rgba(0,0,0,.04); --color-gray20: rgba(0,0,0,.2); --color-gray50: rgba(0,0,0,.5); --color-white-hover: rgba(0,0,0,.5); --color-gray10-hover: rgba(0,0,0,.08); --color-gray50-hover: #000; } @media (max-width: 768px) { :root { --br: 12px; } } .about__our__studio__text { font-family: sf-pro-display, sans-serif; font-size: 23px; font-weight: 400; letter-spacing: 0.45px; line-height: 27px; } @media (max-width: 768px) { .about__our__studio__text { font-size: 16px; letter-spacing: 0.25px; line-height: 130%; } } @property --start { syntax: ""; inherits: false; initial-value: rgba(27,27,27,0); } @property --end { syntax: ""; inherits: false; initial-value: rgba(27,27,27,.9); } .about__hero { aspect-ratio: 1496 / 998; display: flex; height: auto; overflow: hidden; padding: initial; } .about__hero img { height: 100%; width: 100%; object-fit: cover; object-position: center; } .about__content { display: grid; gap: var(--pd2); grid-template-columns: 1fr 1fr 1fr; margin-top: var(--pd2); } .about__content__left, .about__content__right { display: flex; flex-flow: column; row-gap: var(--pd2); } .about__content__left { grid-column: 1 / 3; } @media (max-width: 1024px) { .about__content__left { grid-column: 1 / -1; } } .about__our__studio h2 { color: var(--color-gray50); } .about__our__studio__text { margin-top: var(--pd2); padding-right: 13%; } @media (max-width: 1280px) { .about__our__studio__text { padding-right: 7.5%; } } @media (max-width: 896px) { .about__our__studio__text { padding-right: 0px; } } @media (min-width: 657px) { .about__getintouch { display: none; } } .about__content__right { grid-column: 3 / -1; } @media (min-width: 1025px) { .about__content__right { align-self: flex-end; bottom: var(--pd2); position: sticky; } } @media (max-width: 1024px) { .about__content__right { grid-column: 1 / -1; } } @media (min-width: 897px) and (max-width: 1024px) { .about__content__right { display: grid; gap: var(--pd2); grid-template-columns: 1fr 1fr; } } .about__founders { display: grid; gap: var(--pd2); grid-template-columns: 1fr 1fr; } .about__founder { display: flex; flex-flow: column; row-gap: var(--pd2); } @media (max-width: 896px) { .about__founder { grid-column: 1 / -1; } } .about__founder__img { display: flex; overflow: hidden; padding: initial; } .about__founder__img img { height: auto; width: 100%; } .founder-slider { position: relative; overflow: hidden; cursor: ew-resize; user-select: none; touch-action: pan-y; width: 100%; pointer-events: auto; } .founder-slider__business, .founder-slider__hacker { display: block; width: 100%; height: auto; pointer-events: none; } .founder-slider__hacker { position: absolute; inset: 0; clip-path: inset(0 50% 0 0); } .founder-slider__handle { position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); pointer-events: none; } .founder-slider__line { position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: 2px; background: rgba(255,255,255,0.8); } .founder-slider__grip { width: 36px; height: 36px; border-radius: 50%; background: white; border: 2px solid rgba(0,0,0,0.15); box-shadow: 0 2px 8px rgba(0,0,0,0.3); position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .about__founder__info { flex: 1 1 auto; } .about__founder__info p { color: var(--color-gray50); } .about__founder__info__bio { margin-top: var(--pd); padding-right: var(--pd); } .about__agenda, .about__contact, .about__openings { display: flex; flex-flow: column; row-gap: var(--br); } .about__agenda h2, .about__contact h2, .about__openings h2 { color: var(--color-gray50); margin-bottom: var(--br); } .about__contact, .about__openings { padding-bottom: 24px; } .about__contact h3 { color: var(--color-gray50); } .about__contact .about__contact__item > p { transition: none; } .about__contact .about__contact__item span { transition: color 0.5s; } .about__openings { align-items: flex-start; } .about__shop__img { display: flex; margin: 0 calc(var(--br)*-1); } .about__shop__img img { height: auto; width: 100%; } .about__shop__info { align-items: center; column-gap: var(--pd2); display: flex; justify-content: space-between; } .about__shop__info__inner h2 { color: var(--color-gray50); } .case__study__list .case__study__media.hidden img, .case__study__list .case__study__media.hidden video { display: none; } .case__study__media, .case__study__media__text__media { aspect-ratio: 1496 / 998; display: flex; overflow: hidden; padding: initial; } .case__study__media.portrait, .case__study__media__text__media.portrait { aspect-ratio: 744 / 998; } .case__study__media img, .case__study__media__text__media img { height: auto; width: 100%; } .case__study__list .case__study__gallery__item.split .case__study__media img, .case__study__list .case__study__gallery__item.split .case__study__media__text__media img { height: 100%; } .case__study__media video, .case__study__media__text__media video { height: 100%; width: 100%; } .case__study__media.blank, .case__study__media[data-slice-type="case_one_media"][data-slice-variation="video"], .case__study__media__text[data-slice-type="case_media_text"][data-slice-variation="videoXText"] .case__study__media__text__media, .case__study__medias[data-slice-type="case_two_medias"][data-slice-variation="imageXVideo"] .case__study__media, .case__study__medias[data-slice-type="case_two_medias"][data-slice-variation="videoXVideo"] .case__study__media { aspect-ratio: auto; } :root { --br: 16px; --br2: 8px; --pd: 16px; --pd2: 8px; --pd3: 4px; --color-black: #000; --color-white: #e2e6e3; --color-blue: #007aff; --color-gray10: hsla(135,7%,89%,.1); --color-gray20: hsla(135,7%,89%,.2); --color-gray50: hsla(135,7%,89%,.5); --color-white-hover: hsla(135,7%,89%,.5); --color-gray10-hover: hsla(135,7%,89%,.2); --color-gray50-hover: #e2e6e3; } html.light { --color-black: #fff; --color-white: #000; --color-gray10: rgba(0,0,0,.04); --color-gray20: rgba(0,0,0,.2); --color-gray50: rgba(0,0,0,.5); --color-white-hover: rgba(0,0,0,.5); --color-gray10-hover: rgba(0,0,0,.08); --color-gray50-hover: #000; } @media (max-width: 768px) { :root { --br: 12px; } } .page__cursor { align-items: center; aspect-ratio: 1 / 1; background-color: rgb(31, 31, 31); border-radius: 50%; display: flex; justify-content: center; left: 0px; margin: -20px; opacity: 0; pointer-events: none; position: fixed; top: 0px; transition: background-color 0.5s; width: 40px; z-index: 3; } .page__cursor.previous { padding-left: 4px; } .page__cursor.next { padding-right: 4px; } .page__cursor.next.visible, .page__cursor.previous.visible { opacity: 1; } html.light .page__cursor { background-color: rgb(235, 235, 235); } .page__cursor__inner { aspect-ratio: 1 / 1; border-top-color: ; border-top-style: ; border-top-width: ; border-right-color: ; border-right-style: ; border-right-width: ; border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; border-bottom: none; border-left: none; transition: border-color 0.5s; width: 10px; } .page__cursor.previous .page__cursor__inner { transform: rotate(-135deg); } .page__cursor.next .page__cursor__inner { transform: rotate(45deg); } @font-face { font-family: swiper-icons; font-style: normal; font-weight: 400; src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA"); } :root { --swiper-theme-color: #007aff; } :host { display: block; margin-left: auto; margin-right: auto; position: relative; z-index: 1; } .swiper { display: block; list-style: none; margin-left: auto; margin-right: auto; overflow: hidden; padding: 0px; position: relative; z-index: 1; } .swiper-vertical > .swiper-wrapper { flex-direction: column; } .swiper-wrapper { box-sizing: content-box; display: flex; height: 100%; position: relative; transition-property: transform; transition-timing-function: var(--swiper-wrapper-transition-timing-function,initial); width: 100%; z-index: 1; } .swiper-android .swiper-slide, .swiper-ios .swiper-slide, .swiper-wrapper { transform: translateZ(0px); } .swiper-horizontal { touch-action: pan-y; } .swiper-vertical { touch-action: pan-x; } .swiper-slide { display: block; flex-shrink: 0; height: 100%; position: relative; transition-property: transform; width: 100%; } .swiper-slide-invisible-blank { visibility: hidden; } .swiper-autoheight, .swiper-autoheight .swiper-slide { height: auto; } .swiper-autoheight .swiper-wrapper { align-items: flex-start; transition-property: transform, height; } .swiper-backface-hidden .swiper-slide { backface-visibility: hidden; transform: translateZ(0px); } .swiper-3d.swiper-css-mode .swiper-wrapper { perspective: 1200px; } .swiper-3d .swiper-wrapper { transform-style: preserve-3d; } .swiper-3d { perspective: 1200px; } .swiper-3d .swiper-cube-shadow, .swiper-3d .swiper-slide { transform-style: preserve-3d; } .swiper-css-mode > .swiper-wrapper { overflow: auto; scrollbar-width: none; } .swiper-css-mode > .swiper-wrapper::-webkit-scrollbar { display: none; } .swiper-css-mode > .swiper-wrapper > .swiper-slide { scroll-snap-align: start; } .swiper-css-mode.swiper-horizontal > .swiper-wrapper { scroll-snap-type: x mandatory; } .swiper-css-mode.swiper-vertical > .swiper-wrapper { scroll-snap-type: y mandatory; } .swiper-css-mode.swiper-free-mode > .swiper-wrapper { scroll-snap-type: none; } .swiper-css-mode.swiper-free-mode > .swiper-wrapper > .swiper-slide { scroll-snap-align: none; } .swiper-css-mode.swiper-centered > .swiper-wrapper::before { content: ""; flex-shrink: 0; order: 9999; } .swiper-css-mode.swiper-centered > .swiper-wrapper > .swiper-slide { scroll-snap-align: center; scroll-snap-stop: always; } .swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child { margin-inline-start: var(--swiper-centered-offset-before); } .swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper::before { height: 100%; min-height: 1px; width: var(--swiper-centered-offset-after); } .swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child { margin-block-start: var(--swiper-centered-offset-before); } .swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper::before { height: var(--swiper-centered-offset-after); min-width: 1px; width: 100%; } .swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-bottom, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top { height: 100%; left: 0px; pointer-events: none; position: absolute; top: 0px; width: 100%; z-index: 10; } .swiper-3d .swiper-slide-shadow { background: rgba(0, 0, 0, 0.15); } .swiper-3d .swiper-slide-shadow-left { background-image: linear-gradient(270deg, rgba(0, 0, 0, 0.5), transparent); } .swiper-3d .swiper-slide-shadow-right { background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.5), transparent); } .swiper-3d .swiper-slide-shadow-top { background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), transparent); } .swiper-3d .swiper-slide-shadow-bottom { background-image: linear-gradient(rgba(0, 0, 0, 0.5), transparent); } .swiper-lazy-preloader { border-right-color: ; border-right-style: ; border-right-width: ; border-bottom-color: ; border-bottom-style: ; border-bottom-width: ; border-left-color: ; border-left-style: ; border-left-width: ; border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; border-radius: 50%; border-top: 4px solid transparent; box-sizing: border-box; height: 42px; left: 50%; margin-left: -21px; margin-top: -21px; position: absolute; top: 50%; transform-origin: 50% center; width: 42px; z-index: 10; } .swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader, .swiper:not(.swiper-watch-progress) .swiper-lazy-preloader { animation: 1s linear 0s infinite normal none running swiper-preloader-spin; } .swiper-lazy-preloader-white { --swiper-preloader-color: #fff; } .swiper-lazy-preloader-black { --swiper-preloader-color: #000; } @keyframes swiper-preloader-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(1turn); } } .swiper-pagination { position: absolute; text-align: center; transform: translateZ(0px); transition: opacity 0.3s; z-index: 10; } .swiper-pagination.swiper-pagination-hidden { opacity: 0; } .swiper-pagination-disabled > .swiper-pagination, .swiper-pagination.swiper-pagination-disabled { display: none !important; } .swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction { bottom: var(--swiper-pagination-bottom,8px); left: 0px; top: var(--swiper-pagination-top,auto); width: 100%; } .swiper-pagination-bullets-dynamic { font-size: 0px; overflow: hidden; } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { position: relative; transform: scale(0.33); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active, .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main { transform: scale(1); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev { transform: scale(0.66); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev { transform: scale(0.33); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next { transform: scale(0.66); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next { transform: scale(0.33); } .swiper-pagination-bullet { background: var(--swiper-pagination-bullet-inactive-color,#000); border-radius: var(--swiper-pagination-bullet-border-radius,50%); display: inline-block; height: var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,8px)); opacity: var(--swiper-pagination-bullet-inactive-opacity,.2); width: var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,8px)); } button.swiper-pagination-bullet { appearance: none; border: none; box-shadow: none; margin: 0px; padding: 0px; } .swiper-pagination-clickable .swiper-pagination-bullet { cursor: pointer; } .swiper-pagination-bullet:only-child { display: none !important; } .swiper-pagination-bullet-active { background: var(--swiper-pagination-color,var(--swiper-theme-color)); opacity: var(--swiper-pagination-bullet-opacity,1); } .swiper-pagination-vertical.swiper-pagination-bullets, .swiper-vertical > .swiper-pagination-bullets { left: var(--swiper-pagination-left,auto); right: var(--swiper-pagination-right,8px); top: 50%; transform: translate3d(0px, -50%, 0px); } .swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet { display: block; margin: var(--swiper-pagination-bullet-vertical-gap,6px) 0; } .swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic { top: 50%; transform: translateY(-50%); width: 8px; } .swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, .swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { display: inline-block; transition: transform 0.2s, top 0.2s; } .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 var(--swiper-pagination-bullet-horizontal-gap,4px); } .swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic { left: 50%; transform: translate(-50%); white-space: nowrap; } .swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transition: transform 0.2s, left 0.2s; } .swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transition: transform 0.2s, right 0.2s; } .swiper-pagination-fraction { color: var(--swiper-pagination-fraction-color,inherit); } .swiper-pagination-progressbar { background: var(--swiper-pagination-progressbar-bg-color,rgba(0,0,0,.25)); position: absolute; } .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background: var(--swiper-pagination-color,var(--swiper-theme-color)); height: 100%; left: 0px; position: absolute; top: 0px; transform: scale(0); transform-origin: left top; width: 100%; } .swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { transform-origin: right top; } .swiper-horizontal > .swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-horizontal, .swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite, .swiper-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite { height: var(--swiper-pagination-progressbar-size,4px); left: 0px; top: 0px; width: 100%; } .swiper-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-vertical, .swiper-vertical > .swiper-pagination-progressbar { height: 100%; left: 0px; top: 0px; width: var(--swiper-pagination-progressbar-size,4px); } .swiper-pagination-lock { display: none; } .swiper-fade.swiper-free-mode .swiper-slide { transition-timing-function: ease-out; } .swiper-fade .swiper-slide { pointer-events: none; transition-property: opacity; } .swiper-fade .swiper-slide .swiper-slide { pointer-events: none; } .swiper-fade .swiper-slide-active, .swiper-fade .swiper-slide-active .swiper-slide-active { pointer-events: auto; } :root { --br: 16px; --br2: 8px; --pd: 16px; --pd2: 8px; --pd3: 4px; --color-black: #000; --color-white: #e2e6e3; --color-blue: #007aff; --color-gray10: hsla(135,7%,89%,.1); --color-gray20: hsla(135,7%,89%,.2); --color-gray50: hsla(135,7%,89%,.5); --color-white-hover: hsla(135,7%,89%,.5); --color-gray10-hover: hsla(135,7%,89%,.2); --color-gray50-hover: #e2e6e3; } html.light { --color-black: #fff; --color-white: #000; --color-gray10: rgba(0,0,0,.04); --color-gray20: rgba(0,0,0,.2); --color-gray50: rgba(0,0,0,.5); --color-white-hover: rgba(0,0,0,.5); --color-gray10-hover: rgba(0,0,0,.08); --color-gray50-hover: #000; } @media (max-width: 768px) { :root { --br: 12px; } } .case__study__gallery__pagination { align-items: center; display: flex; justify-content: center; } .case__study__gallery__nav { height: 100%; left: 0px; position: absolute; top: 0px; width: 100%; } :root .case__study__gallery { --swiper-pagination-top: auto; --swiper-pagination-bottom: auto; --swiper-pagination-bullet-width: 8px; --swiper-pagination-bullet-height: 8px; --swiper-pagination-bullet-size: 8px; --swiper-pagination-bullet-horizontal-gap: 4px; --swiper-pagination-color: var(--color-white); --swiper-pagination-bullet-inactive-color: var(--color-white); } .case__study__gallery { background-color: var(--color-black); left: 0px; width: 100%; z-index: 1; } html.device-mouse .case__study__gallery { position: fixed; height: 100dvh !important; top: 0px !important; } html.device-touch .case__study__gallery { position: absolute; } html.device-touch .case__study__gallery::before { background-color: var(--color-black); content: ""; height: 50px; left: 0px; position: absolute; right: 0px; top: -50px; } html.device-touch .case__study__gallery::after { background-color: var(--color-black); content: ""; height: 100px; left: 0px; position: absolute; right: 0px; top: 100%; } .case__study__gallery__inner { display: grid; grid-template-rows: 56px 1fr 56px; height: 100dvh; will-change: opacity; } .case__study__gallery__top { align-items: center; display: flex; justify-content: flex-end; padding: var(--pd2); } .case__study__gallery__wrapper { overflow: hidden; width: 100%; } .case__study__gallery__wrapper__inner { height: 100%; width: max-content; } .case__study__gallery__pagination__buttons { height: 10px; } .case__study__gallery__nav { display: flex; z-index: 1; } html.device-touch .case__study__gallery__nav { display: none; } .case__study__gallery__nav__button { flex: 1 1 0%; height: 100%; } .case__study__gallery__nav__button.swiper-button-disabled { cursor: default !important; visibility: hidden; } .case__study__gallery__nav__button:hover { cursor: none; } :root { --br: 16px; --br2: 8px; --pd: 16px; --pd2: 8px; --pd3: 4px; --color-black: #000; --color-white: #e2e6e3; --color-blue: #007aff; --color-gray10: hsla(135,7%,89%,.1); --color-gray20: hsla(135,7%,89%,.2); --color-gray50: hsla(135,7%,89%,.5); --color-white-hover: hsla(135,7%,89%,.5); --color-gray10-hover: hsla(135,7%,89%,.2); --color-gray50-hover: #e2e6e3; } html.light { --color-black: #fff; --color-white: #000; --color-gray10: rgba(0,0,0,.04); --color-gray20: rgba(0,0,0,.2); --color-gray50: rgba(0,0,0,.5); --color-white-hover: rgba(0,0,0,.5); --color-gray10-hover: rgba(0,0,0,.08); --color-gray50-hover: #000; } @media (max-width: 768px) { :root { --br: 12px; } } @property --start { syntax: ""; inherits: false; initial-value: rgba(27,27,27,0); } @property --end { syntax: ""; inherits: false; initial-value: rgba(27,27,27,.9); } .swiper-pagination-bullet.swiper-pagination-bullet-active-main { transition: opacity 0.5s, transform 0.2s, left 0.2s !important; } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next, .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev { transform: scale(0.75); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next, .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev { transform: scale(0.5); } :root { --br: 16px; --br2: 8px; --pd: 16px; --pd2: 8px; --pd3: 4px; --color-black: #000; --color-white: #e2e6e3; --color-blue: #007aff; --color-gray10: hsla(135,7%,89%,.1); --color-gray20: hsla(135,7%,89%,.2); --color-gray50: hsla(135,7%,89%,.5); --color-white-hover: hsla(135,7%,89%,.5); --color-gray10-hover: hsla(135,7%,89%,.2); --color-gray50-hover: #e2e6e3; } html.light { --color-black: #fff; --color-white: #000; --color-gray10: rgba(0,0,0,.04); --color-gray20: rgba(0,0,0,.2); --color-gray50: rgba(0,0,0,.5); --color-white-hover: rgba(0,0,0,.5); --color-gray10-hover: rgba(0,0,0,.08); --color-gray50-hover: #000; } @media (max-width: 768px) { :root { --br: 12px; } } .case__study__info { align-items: flex-start; display: grid; gap: var(--pd2); grid-template-columns: 2fr 1fr; margin-top: var(--pd2); } .case__study__info__left, .case__study__info__right { display: flex; flex-flow: column; row-gap: var(--pd2); } .case__study__info__left { display: grid; gap: var(--pd2); grid-column: 1 / 2; grid-template-columns: 1fr 1fr; } @media (max-width: 768px) { .case__study__info__left { grid-template-columns: 1fr; } } .case__study__info__project__information { grid-column: 1 / -1; } @media (max-width: 768px) { .case__study__info__project__information h2 { margin-bottom: 4px; } } @media (min-width: 657px) { .case__study__info__project__information__text, .case__study__info__testimonials__text { padding-right: 10%; } } .case__study__info__results:not(.has-testimonials), .case__study__info__testimonials:not(.has-results) { grid-column: 1 / -1; } .case__study__info__results.has-testimonials .case__study__info__results__text, .case__study__info__testimonials.has-results .case__study__info__testimonials__text { padding-right: 0px; } .case__study__info__right { grid-column: 2 / -1; } @media (max-width: 1024px) { .case__study__info__left, .case__study__info__right { grid-column: 1 / -1; } } .case__study__info__project__images svg { aspect-ratio: auto !important; display: initial !important; height: auto !important; margin-bottom: -1px !important; width: 9px !important; } :root { --br: 16px; --br2: 8px; --pd: 16px; --pd2: 8px; --pd3: 4px; --color-black: #000; --color-white: #e2e6e3; --color-blue: #007aff; --color-gray10: hsla(135,7%,89%,.1); --color-gray20: hsla(135,7%,89%,.2); --color-gray50: hsla(135,7%,89%,.5); --color-white-hover: hsla(135,7%,89%,.5); --color-gray10-hover: hsla(135,7%,89%,.2); --color-gray50-hover: #e2e6e3; } html.light { --color-black: #fff; --color-white: #000; --color-gray10: rgba(0,0,0,.04); --color-gray20: rgba(0,0,0,.2); --color-gray50: rgba(0,0,0,.5); --color-white-hover: rgba(0,0,0,.5); --color-gray10-hover: rgba(0,0,0,.08); --color-gray50-hover: #000; } @media (max-width: 768px) { :root { --br: 12px; } } .case__study__info h2 { color: var(--color-gray50); margin-bottom: 8px; } .case__study__info h2:not(:first-child) { margin-top: 32px; } .case__study__info p:not(:last-child) { margin-bottom: 12px; } .case__study__info__testimonials__text em { color: var(--color-gray50); } .case__study__info__credits h2:first-child { margin-bottom: var(--pd); } .case__study__info__credits p { line-height: 140%; } .no-break-group { display: inline-block; white-space: nowrap; } .case-study-link { display: inline; } :root { --br: 16px; --br2: 8px; --pd: 16px; --pd2: 8px; --pd3: 4px; --color-black: #000; --color-white: #e2e6e3; --color-blue: #007aff; --color-gray10: hsla(135,7%,89%,.1); --color-gray20: hsla(135,7%,89%,.2); --color-gray50: hsla(135,7%,89%,.5); --color-white-hover: hsla(135,7%,89%,.5); --color-gray10-hover: hsla(135,7%,89%,.2); --color-gray50-hover: #e2e6e3; } html.light { --color-black: #fff; --color-white: #000; --color-gray10: rgba(0,0,0,.04); --color-gray20: rgba(0,0,0,.2); --color-gray50: rgba(0,0,0,.5); --color-white-hover: rgba(0,0,0,.5); --color-gray10-hover: rgba(0,0,0,.08); --color-gray50-hover: #000; } @media (max-width: 768px) { :root { --br: 12px; } } @property --start { syntax: ""; inherits: false; initial-value: rgba(27,27,27,0); } @property --end { syntax: ""; inherits: false; initial-value: rgba(27,27,27,.9); } .case__study__list .nav__card { padding-bottom: var(--pd2); } @media (min-width: 657px) { .case__study__list .nav__card { display: none; } } .case__study__slices { display: grid; gap: var(--pd2); grid-template-columns: 1fr 1fr; } /* nav__top__inner height is set dynamically by JS ResizeObserver in Nav.astro Formula: (vh - 53) mod 106 + 212 — matches live portorocha.com exactly. Mobile fallback for before JS runs: */ @media (max-width: 656px) { .nav__top__inner { min-height: 317px; } }