@charset "UTF-8"; /* * Converts pixels values to rem */ /* * Breakpoints */ /* * Default grid */ /* * Utilities */ /*** The new CSS reset - version 1.11.2 (last updated 15.11.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu, summary { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; -moz-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::-moz-placeholder { color: unset; } :-ms-input-placeholder { color: unset; } ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable="false"])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable="true"]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; box-sizing: border-box; } /* Remove details summary webkit styles */ ::-webkit-details-marker { display: none; } picture img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } #wpadminbar { background: none; } #wpadminbar ul.ab-top-menu:before { content: " "; background-color: rgba(29, 35, 39, 0.9); width: 10px; height: 46px; display: block; float: left; } @media (min-width: 782px) { #wpadminbar ul.ab-top-menu:before { height: 32px; } } #wpadminbar ul.ab-top-menu:after { content: " "; width: 40px; height: 46px; display: block; background: rgba(29, 35, 39, 0.9); border-radius: 0 0 10px 0; float: left; } @media (min-width: 782px) { #wpadminbar ul.ab-top-menu:after { height: 32px; } } #wpadminbar ul.ab-top-menu > li { background: rgba(29, 35, 39, 0.9); } #wpadminbar ul.ab-top-menu #wp-admin-bar-site-name a:after { content: " Dashboard"; } #wpadminbar ul.ab-top-menu #wp-admin-bar-site-name .ab-sub-wrapper { display: none; } #wpadminbar ul.ab-top-secondary { display: none; } html { max-width: 100vw; overflow-x: hidden; font-size: min(20px, 0.833vw); /* REM 16px at 1920px. Maximum of 1.25× larger. */ } @media (max-width: 1024px) { html { font-size: min(20px, 1.73vw); /* REM 16px at 925px. Maximum of 1.25× larger. */ } } @media (max-width: 650px) { html { font-size: min(18px, 4.103vw); /* REM 16px at 390px. Maximum of 1.125× larger. */ } } body { color: #201B25; background: #FFFDF5; } main { max-width: 100vw; overflow-x: hidden; overflow-y: scroll; } ::-moz-selection { color: #FFFDF5; background: #320461; } ::selection { color: #FFFDF5; background: #320461; } html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { -ms-scroll-chaining: none; overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } .lenis.lenis-scrolling iframe { pointer-events: none; } .line { overflow: hidden; padding: 0.625rem 0; margin: -0.625rem 0; } @font-face { font-family: "Favorit"; src: url("fonts/favorit-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Favorit"; src: url("fonts/favorit-medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Favorit"; src: url("fonts/favorit-regular-lining.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Favorit Mono"; src: url("fonts/favorit-mono-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } h1, h2, h3, h4, h5 { font-family: "Favorit", sans-serif; color: currentColor; font-weight: 400; font-kerning: none; line-height: 0.95; letter-spacing: -0.035em; } p, li, span, blockquote, figcaption { font-family: "Favorit", sans-serif; font-size: 1.125rem; color: currentColor; font-weight: 400; font-kerning: none; line-height: 1.25; letter-spacing: -0.01em; } strong { font-weight: 600; } .font-h1 { font-size: 6rem; letter-spacing: -0.03em; } @media (max-width: 1024px) { .font-h1 { font-size: 5.75rem; } } @media (max-width: 650px) { .font-h1 { font-size: 3rem; } } .font-h2 { font-size: 3rem; line-height: 1.16; } @media (max-width: 1024px) { .font-h2 { font-size: 2.75rem; } } @media (max-width: 650px) { .font-h2 { font-size: 2.125rem; } } .font-h3 { font-size: 2rem; line-height: 1.2; } @media (max-width: 650px) { .font-h3 { font-size: 1.625rem; } } .font-p { font-size: 1.125rem; } .font-pl { font-size: 1.5rem; letter-spacing: -0.03em; line-height: 1.2; } @media (max-width: 650px) { .font-pl { font-size: 1.25rem; } } .font-pxl { font-size: 1.75rem; letter-spacing: -0.03em; line-height: 1.14; } @media (max-width: 650px) { .font-pxl { font-size: 1.5rem; } } .tagline { font-size: 0.875rem; text-transform: uppercase; font-family: "Favorit Mono", monospace; letter-spacing: 0.02em; } .container { margin: 0 auto; width: calc(100% - 6rem); max-width: 120rem; } @media (max-width: 650px) { .container { width: calc(100% - 3.5rem); } } .grid-12 { display: grid; gap: 0; grid-template-columns: repeat(12, 1fr); } .grid-24 { display: grid; gap: 0; grid-template-columns: repeat(24, 1fr); } .button { display: inline-block; position: relative; font-weight: 500; font-size: 0.875rem; font-family: "Favorit", sans-serif; text-transform: uppercase; padding: 0.75rem 1.125rem; color: currentColor; border: 1px solid currentColor; display: inline-flex; align-items: center; } .button:hover:after { width: 100%; } .button:hover span, .button:hover:before { filter: invert(1); } .button span, .button:before { position: relative; transition: filter 0.4s; z-index: 2; } .button span { font-size: 0.875rem; } .button:before { content: "↳"; display: inline-block; margin: 0 0.625rem 0 0; } .button:after { content: ""; position: absolute; top: 0; left: 0; width: 0%; height: 100%; background: currentColor; transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1); } .richtext h2:first-child, .richtext h3:first-child { margin: 0 0 2.5rem; } @media (max-width: 650px) { .richtext h2:first-child, .richtext h3:first-child { margin: 0 0 1.875rem; } } .richtext h2:not(:first-child), .richtext h2:nth-of-type(n + 2), .richtext h3:not(:first-child), .richtext h3:nth-of-type(n + 2) { margin: 2.5rem 0 1.5rem; } @media (max-width: 650px) { .richtext h2:not(:first-child), .richtext h2:nth-of-type(n + 2), .richtext h3:not(:first-child), .richtext h3:nth-of-type(n + 2) { margin: 1.875rem 0 0.875rem; } } .richtext h2 { font-size: 1.75rem; letter-spacing: -0.03em; line-height: 1.14; } @media (max-width: 650px) { .richtext h2 { font-size: 1.5rem; } } .richtext h3 { font-size: 1.5rem; letter-spacing: -0.03em; line-height: 1.2; } @media (max-width: 650px) { .richtext h3 { font-size: 1.25rem; } } .richtext p { margin: 0 0 1.5rem; } .richtext strong { font-weight: 500; } .richtext em { font-style: italic; } .richtext img { width: 100%; height: auto; margin: 2.5rem 0; } .richtext ol, .richtext ul { margin: 2.5rem 0; padding: 0 0 0 2rem; } .richtext ol { list-style: auto; } .richtext ol ol { list-style: lower-alpha; margin: 1rem 0 1.5rem; } .richtext ul { list-style: disc; } .richtext li { font-family: "Favorit", sans-serif; font-size: 1.125rem; color: currentColor; font-weight: 400; font-kerning: none; line-height: 1.25; letter-spacing: -0.01em; margin: 0 0 0.75rem; } .richtext blockquote p { font-size: 1.75rem; letter-spacing: -0.03em; line-height: 1.14; color: #490AB2; } @media (max-width: 650px) { .richtext blockquote p { font-size: 1.5rem; } } .richtext blockquote p:before { content: "“"; } .richtext blockquote p:after { content: "”"; } .noise-fx { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; opacity: 0.75; pointer-events: none; transform: translateZ(0); pointer-events: none; } .noise-fx:after { content: ""; position: absolute; top: -10rem; left: -10rem; width: calc(100% + 20rem); height: calc(100% + 20rem); -webkit-animation: noise 1s steps(2) infinite; animation: noise 1s steps(2) infinite; background: url("images/noise.png"); background-position: 50%; will-change: transform; } @-webkit-keyframes noise { 0% { transform: translate3d(0, 9rem, 0); } 10% { transform: translate3d(-1rem, -4rem, 0); } 20% { transform: translate3d(-8rem, 2rem, 0); } 30% { transform: translate3d(9rem, -9rem, 0); } 40% { transform: translate3d(-2rem, 7rem, 0); } 50% { transform: translate3d(-9rem, -4rem, 0); } 60% { transform: translate3d(2rem, 6rem, 0); } 70% { transform: translate3d(7rem, -8rem, 0); } 80% { transform: translate3d(-9rem, 1rem, 0); } 90% { transform: translate3d(6rem, -5rem, 0); } to { transform: translate3d(-7rem, 0, 0); } } @keyframes noise { 0% { transform: translate3d(0, 9rem, 0); } 10% { transform: translate3d(-1rem, -4rem, 0); } 20% { transform: translate3d(-8rem, 2rem, 0); } 30% { transform: translate3d(9rem, -9rem, 0); } 40% { transform: translate3d(-2rem, 7rem, 0); } 50% { transform: translate3d(-9rem, -4rem, 0); } 60% { transform: translate3d(2rem, 6rem, 0); } 70% { transform: translate3d(7rem, -8rem, 0); } 80% { transform: translate3d(-9rem, 1rem, 0); } 90% { transform: translate3d(6rem, -5rem, 0); } to { transform: translate3d(-7rem, 0, 0); } } .about { position: relative; min-height: 100vh; padding: 28rem 0 26.25rem; background: #FFFDF5; } @media (max-width: 1024px) { .about { padding: 8.75rem 0 26.25rem; } } @media (max-width: 650px) { .about { padding: 4rem 0; } } .about__content { grid-column: span 5; position: relative; z-index: 3; } @media (max-width: 1024px) { .about__content { grid-column: 1/-1; } } .about__tagline { color: #320461; margin: 0 0 2.25rem; } .about__heading { color: #490AB2; margin: 0 0 4.5rem; } @media (max-width: 650px) { .about__heading { margin: 0 0 2.5rem; } } .about__text { margin: 0 0 3.125rem 9.375rem; } @media (max-width: 650px) { .about__text { margin: 0 0 3.125rem; } } .about__buttons { display: flex; gap: 3rem; margin: 0 0 0 9.375rem; } @media (max-width: 650px) { .about__buttons { margin: 0; gap: 1rem; flex-direction: column; } } @media (max-width: 650px) { .about__button { justify-content: center; } } .about__background { position: absolute; top: 0; left: 3rem; right: 3rem; height: 84.375rem; display: grid; grid-template-columns: repeat(24, 1fr); grid-template-rows: repeat(6, 1fr); z-index: 2; } @media (max-width: 1024px) { .about__background { position: relative; width: 200vw; left: -68vw; top: -6.25rem; height: 71.875rem; } } @media (max-width: 650px) { .about__background { width: 400vw; left: -215.7vw; height: 62.5rem; margin: 4rem 0 0; top: 0; } } .about__background div { position: relative; will-change: transform; background: linear-gradient(180deg, #FFECFB 0%, #FFFDF5 100%); z-index: 2; } .about__background div:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; mix-blend-mode: soft-light; background-size: cover; background-image: url("images/grain.png"); pointer-events: none; opacity: 0.75; } .about__background .shape-1 { grid-row: 1/span 2; grid-column: 3/span 2; } .about__background .shape-2 { grid-row: 1/span 2; grid-column: 7/span 2; } .about__background .shape-3 { grid-column: 15; } .about__background .shape-4 { grid-column: 17; } .about__background .shape-5 { grid-column: 19; } .about__background .shape-6 { grid-column: 23; } .about__background .shape-7 { grid-column: 11; } .about__background .shape-8 { grid-row: 2/span 2; grid-column: 14; } .about__background .shape-9 { grid-row: 2; grid-column: 16; } .about__background .shape-10 { grid-column: 20; background: linear-gradient(0deg, #FFECFB 0%, #FFFDF5 100%); } .about__background .shape-11 { grid-row: 3; grid-column: 19; right: -1px; } .about__background .shape-12 { grid-row: 3/span 2; grid-column: 21; } .about__image--1 { grid-row: 2; grid-column: 9/span 2; } .about__image--2 { grid-row: 2/span 2; grid-column: 16/span 4; } .about__image--3 { grid-row: 4; grid-column: 14/span 2; } .about__image--4 { grid-row: 5; grid-column: 16/span 2; } .article { color: #490AB2; padding: 11.25rem 0 7.5rem; } @media (max-width: 650px) { .article { padding: 8.75rem 0 2.25rem; } .article.remove-padding { padding-bottom: 0; } } .article.remove-padding { padding-bottom: 0; } .article__header { grid-column: span 6; margin: 0 0 6.25rem; } @media (max-width: 1024px) { .article__header { grid-column: 1/-1; } } @media (max-width: 650px) { .article__header { margin: 0 0 4rem; } } .article__date { display: block; margin: 0 0 2.25rem; } @media (max-width: 1024px) { .article__heading { font-size: 4.25rem; } } @media (max-width: 650px) { .article__heading { font-size: 2.5rem; } } .article__image { position: relative; grid-column: 1/-1; aspect-ratio: 1824/896; margin: 0 0 5.625rem; } @media (max-width: 650px) { .article__image { left: -1.75rem; margin: 0 0 4rem; min-width: calc(100% + 3.5rem); } } .article__image-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .article__author { color: #201B25; grid-column: 1/span 5; margin: 0 0 4rem; padding: 0 0 0 1.375rem; } @media (max-width: 1024px) { .article__author { grid-column: 1/-1; } } @media (max-width: 650px) { .article__author { margin: 0 0 2rem; } } .article__author span { display: block; position: relative; } .article__author span:before { content: "↳"; display: inline-block; position: absolute; top: 0; left: -1.375rem; } .article__content { color: #201B25; grid-column: 6/-2; } @media (max-width: 1024px) { .article__content { grid-column: 1/-1; } } .articles { padding: 11.25rem 0 2.25rem; } @media (max-width: 650px) { .articles { padding: 8.75rem 0 2.25rem; } } .articles__header { color: #490AB2; margin: 0 0 6rem; grid-column: 1/span 5; } @media (max-width: 1024px) { .articles__header { grid-column: 1/-3; } } @media (max-width: 650px) { .articles__header { grid-column: 1/-1; margin: 0 0 4rem; } } .articles__tagline { display: block; margin: 0 0 2.25rem; } .articles__listing { display: grid; gap: 0; grid-template-columns: repeat(3, 1fr); gap: 4.75rem; grid-column: 2/-2; pointer-events: none; } @media (max-width: 1024px) { .articles__listing { grid-column: 1/-1; gap: 4rem 2rem; } } @media (max-width: 650px) { .articles__listing { grid-template-columns: repeat(1, 1fr); } } .articles__listing > .card-news { transition: opacity 150ms linear 100ms, transform 150ms ease-in-out 100ms; pointer-events: auto; } .articles__listing:hover > .card-news { opacity: 0.5; } .articles__listing > .card-news:hover { opacity: 1; } .banner-about { color: #490AB2; background: #FFFDF5; min-height: 100vh; padding: 11.25rem 0 2.25rem; position: relative; overflow: hidden; } @media (max-width: 650px) { .banner-about { padding: 8.75rem 0 2.25rem; } } .banner-about .container { position: relative; align-content: baseline; min-height: calc(100vh - 13.5rem); } @media (max-width: 650px) { .banner-about .container { display: block; min-height: auto; } } .banner-about__tagline { display: block; margin: 0 0 2.25rem; grid-column: 1/span 6; z-index: 2; } @media (max-width: 650px) { .banner-about__tagline { grid-column: 1/-1; } } .banner-about__heading { grid-column: 1/span 6; z-index: 2; } @media (max-width: 650px) { .banner-about__heading { grid-column: 1/-1; margin: 0 0 2.5rem; } } .banner-about__image--1 { grid-row: 2; grid-column: 12/span 2; } .banner-about__image--2 { grid-row: 3; grid-column: 10/span 2; } .banner-about__image--3 { grid-row: 4/span 2; grid-column: 12/span 4; } .banner-about__text { position: absolute; bottom: 3rem; width: 100%; color: #201B25; max-width: 27.5rem; z-index: 2; } @media (max-width: 650px) { .banner-about__text { position: relative; top: 0; left: 0; grid-column: 1/-1; } } .banner-about__background { position: absolute; top: 0; left: 3rem; right: 3rem; height: 100vh; display: grid; grid-template-columns: repeat(8, 2fr) repeat(8, 1fr); grid-template-rows: repeat(5, 1fr); } @media (max-width: 1024px) { .banner-about__background { width: 200vw; left: -80vw; } } @media (max-width: 650px) { .banner-about__background { position: relative; width: 400vw; height: auto; left: -290vw; } } .banner-about__background div { position: relative; } .banner-about__background div:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; mix-blend-mode: soft-light; background-size: cover; background-image: url("images/grain.png"); pointer-events: none; opacity: 0.75; } .banner-about__background div.shape-1 { grid-column: 2; } .banner-about__background div.shape-2 { grid-column: 4; } .banner-about__background div.shape-3 { grid-column: 6; } .banner-about__background div.shape-4 { grid-column: 8; } .banner-about__background div.shape-5 { grid-column: 10; } .banner-about__background div.shape-6 { grid-column: 12; } .banner-about__background div.shape-7 { grid-column: 14; } .banner-about__background div.shape-8 { grid-column: 16; } .banner-about__background div.shape-9 { grid-column: 1; grid-row: span 2; } .banner-about__background div.shape-10 { grid-row: span 2; grid-column: 3; } .banner-about__background div.shape-11 { grid-row: span 2; grid-column: 5; } .banner-about__background div.shape-12 { grid-row: span 2; grid-column: 7; } .banner-about__background div.shape-13 { grid-column: 9; } .banner-about__background div.shape-14 { grid-column: 11; } .banner-about__background div.shape-15 { grid-column: 15; } .banner-about__background div.shape-16 { grid-column: 12; } .banner-about__background div.shape-17 { grid-column: 14; } .banner-about__background div.shape-18 { grid-column: 16; } .banner-about__background div.shape-19 { grid-row: span 2; grid-column: 2; } .banner-about__background div.shape-20 { grid-row: span 2; grid-column: 4; } .banner-about__background div.shape-21 { grid-row: span 2; grid-column: 6; } .banner-about__background div.shape-22 { grid-row: span 2; grid-column: 8; } .banner-about__background div.shape-23 { grid-column: 9; } .banner-about__background div.shape-24 { grid-column: 11; } .banner-about__background div.shape-25 { grid-row: 4; grid-column: 15; } .banner-about__background div.shape-26 { grid-column: 10; } .banner-about__background div.shape-27 { grid-row: 5; grid-column: 12; } .banner-about__background div.shape-28 { grid-column: 16; } .banner-about__background .gradient-1 { background: linear-gradient(180deg, #FFFDF5 0%, #FFECFB 100%); /* Pink top to bottom */ } .banner-about__background .gradient-2 { background: linear-gradient(180deg, #FFFDF5 0%, #FFECFB 100%); /* Purple top to bottom */ } .banner { position: relative; color: #FFFDF5; background: #320461; height: 100vh; overflow: hidden; } .banner__heading { position: absolute; top: 50%; left: 50%; translate: -50% -50%; text-align: center; width: 100%; max-width: 75rem; z-index: 2; } .banner__text { position: absolute; left: 3rem; bottom: 3rem; width: 100%; max-width: 27.5rem; z-index: 2; } @media (max-width: 650px) { .banner__text { width: auto; max-width: none; left: 2rem; right: 2rem; bottom: 2rem; } } .banner__image { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .banner__image--1 { grid-row: 2/span 3; grid-column: 16/span 7; } .banner__image--2 { grid-row: 5/span 2; grid-column: 11/span 5; } @media (max-width: 1024px) { .banner__image--2 { opacity: 0.5; } } @media (max-width: 650px) { .banner__image--2 { opacity: 0; } } .banner__background-group { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } @media (max-width: 1024px) { .banner__background-group { width: 170vw; left: -50vw; filter: brightness(0.9); } } @media (max-width: 650px) { .banner__background-group { width: 400vw; left: -215.7vw; } } .banner__background { position: absolute; top: 0; left: 3rem; right: 3rem; height: 100vh; display: grid; grid-template-columns: repeat(24, 1fr); grid-template-rows: repeat(5, 1fr); } .banner__background--top { transform: translateY(-100%); z-index: 2; } .banner__background--bottom { transform: translateY(100%); z-index: 2; } .banner__background .shape { position: relative; } .banner__background .shape:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; mix-blend-mode: soft-light; background-size: cover; background-image: url("images/grain.png"); pointer-events: none; opacity: 0.75; } .banner__background .gradient-1 { background: linear-gradient(180deg, #ffbadf 0%, #490ab2 100%); /* Pink top to bottom */ } .banner__background .gradient-2 { background: linear-gradient(0deg, #ffbadf 0%, #490ab2 100%); /* Purple top to bottom */ } .banner__background .shape-1 { grid-column: 1/span 2; } .banner__background .shape-2 { grid-column: 5/span 2; } .banner__background .shape-3 { grid-column: 9/span 2; } .banner__background .shape-4 { grid-column: 14; } .banner__background .shape-5 { grid-column: 16; } .banner__background .shape-6 { grid-column: 18; } .banner__background .shape-7 { grid-column: 20; } .banner__background .shape-8 { grid-column: 22; } .banner__background .shape-9 { grid-column: 24; } .banner__background .shape-10 { grid-row: span 2; grid-column: 3/span 2; } .banner__background .shape-11 { grid-row: span 2; grid-column: 7/span 2; } .banner__background .shape-12 { grid-row: span 2; grid-column: 11/span 2; } .banner__background .shape-14 { grid-column: 15; } .banner__background .shape-15 { grid-row: 2; grid-column: 17; } .banner__background .shape-16 { grid-row: 2; grid-column: 21; } .banner__background .shape-17 { grid-column: 23; } .banner__background .shape-18 { grid-column: 14; } .banner__background .shape-19 { grid-row: 3; grid-column: 16; } .banner__background .shape-20 { grid-column: 24; } .banner__background .shape-21 { grid-row: span 2; grid-column: 1/span 2; } .banner__background .shape-22 { grid-row: span 2; grid-column: 5/span 2; } .banner__background .shape-23 { grid-row: span 2; grid-column: 9/span 2; } .banner__background .shape-24 { grid-column: 13; } .banner__background .shape-25 { grid-column: 15; } .banner__background .shape-26 { grid-row: 4; grid-column: 19; } .banner__background .shape-27 { grid-row: 4; grid-column: 21; } .banner__background .shape-28 { grid-column: 23; } .banner__background .shape-29 { grid-column: 16; } .banner__background .shape-30 { grid-column: 18; } .banner__background .shape-31 { grid-column: 20; } .banner__background .shape-32 { grid-column: 22; } .banner__background .shape-33 { grid-column: 24; } .card-news { display: inline-block; align-self: start; overflow: hidden; } .card-news:hover .card-news__title { transform: translateX(1.875rem); } .card-news:hover .card-news__image img { scale: 1.1; } .card-news__image { display: block; margin: 0 0 1.125rem; overflow: hidden; } .card-news__image img { transition: scale 0.5s cubic-bezier(0.4, 0, 0.2, 1); } .card-news:nth-child(odd) picture { aspect-ratio: 456/320; } .card-news:nth-child(even) picture { aspect-ratio: 456/500; } .card-news__title { position: relative; padding: 0 1.875rem 0 0; transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); } .card-news__title:before { content: "↳"; display: inline-block; position: absolute; top: 0; left: -1.875rem; } .case-studies-meta { margin: 0 0 6rem; } .case-studies-meta .tagline { display: block; color: #490AB2; margin: 0 0 1.5rem; } .case-studies-meta .meta-logo { grid-column: 1/-1; } @media (min-width: 782px) { .case-studies-meta .meta-logo { grid-column: 1/span 4; } } .case-studies-meta .meta-logo img { width: 12.5rem; height: 6.25rem; -o-object-position: left center; object-position: left center; -o-object-fit: contain; object-fit: contain; display: block; } .case-studies-meta .tags { grid-column: 1/-1; margin: 2.25rem 0 0; } @media (min-width: 782px) { .case-studies-meta .tags { margin: 0; grid-column: 6/span 4; } } .case-studies-meta .tags ul { display: flex; flex-wrap: wrap; } .case-studies-meta .tags li { display: inline-block; position: relative; font-weight: 500; font-size: 0.875rem; font-family: "Favorit", sans-serif; text-transform: uppercase; padding: 0.75rem 1.125rem; color: #201B25; border: 1px solid #201B25; align-items: center; margin: 0 0.75rem 0.75rem 0; } .contact { color: #FFBAF0; background: #490AB2; padding: 11.25rem 0 2.25rem; overflow: hidden; } .contact.background-orange { background: #ff7038; color: #FFFDF5; } .contact.background-orange .gform_submission_error, .contact.background-orange .gfield_description { color: #FFFDF5 !important; } .contact.background-orange + .footer { background: #ff7038; color: #FFFDF5; } .contact.background-orange + .footer .footer__heading, .contact.background-orange + .footer .gform_submission_error, .contact.background-orange + .footer .gfield_description { color: #FFFDF5 !important; } .contact.background-orange .gform_wrapper form .gfield--type-choice label:before { border-color: #FFFDF5 !important; } @media (max-width: 650px) { .contact { padding: 8.75rem 0 2.25rem; } } .contact__upper { grid-column: span 5; margin: 0.75rem 0 0; } @media (max-width: 1024px) { .contact__upper { grid-column: 1/-1; margin: 0.75rem 0 4rem; } } @media (max-width: 650px) { .contact__upper { margin: 0.75rem 0 2.5rem; } } .contact__detail { margin: 1.5rem 0 0; max-width: 37.5rem; } @media (max-width: 1024px) { .contact__detail { max-width: none; } } .contact .case-study-options { margin: 0 0 3.75rem; grid-column: 1/-1; display: flex; flex-wrap: wrap; } @media (max-width: 650px) { .contact .case-study-options { margin: 0; } } .contact .case-study-options .prompt { font-size: 2rem; line-height: 1.2; max-width: 22.5rem; margin: 0 0 3rem; } @media (max-width: 650px) { .contact .case-study-options .prompt { font-size: 1.625rem; } } @media (max-width: 1024px) { .contact .case-study-options .prompt { margin: 0 0 1.5rem; } } .contact .case-study-options .item { display: flex; align-items: flex-start; flex-direction: column; margin: 0 3.75rem 2.8125rem 0; } .contact .case-study-options .button { margin: auto 0 0; } @media (max-width: 650px) { .contact .case-study-options .button { margin: 0 0.75rem 0.75rem 0; } } .contact .hbspt-form, .contact .gform_wrapper, .contact .gform_confirmation_wrapper { grid-column: 8/-1; } @media (max-width: 1024px) { .contact .hbspt-form, .contact .gform_wrapper, .contact .gform_confirmation_wrapper { grid-column: 1/-1; } } .contact__info { grid-column: 1/-1; margin: 4rem 0 0; } @media (max-width: 1024px) { .contact__info { margin: 8rem 0 0; } } @media (max-width: 650px) { .contact__info { margin: 4rem 0 0; } } .contact__title { margin: 0 0 2.75rem; } .contact__links li { margin: 0 0 0.625rem; overflow: hidden; } .contact__link { line-height: 1; display: inline-block; transform: translateX(-6.25rem); transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); } @media (max-width: 1024px) { .contact__link { font-size: 4.375rem; transform: translateX(-5rem); } } @media (max-width: 650px) { .contact__link { transform: translateX(0); font-size: 1.625rem; } } .contact__link:hover { transform: translateX(0); } .contact__link:before { content: "↳"; display: inline-block; margin: 0 1.25rem 0 0; } @media (max-width: 650px) { .contact__link:before { margin: 0 0.625rem 0 0; } } .cookies { display: flex; position: fixed; left: 3rem; right: 3rem; bottom: 3rem; padding: 2.625rem 3rem; background: #EDFFC7; align-items: center; justify-content: space-between; opacity: 0; pointer-events: none; transform: translateY(6.25rem); transition: opacity 0.6s, transform 0.8s cubic-bezier(0.4, 0, 0.2, 1); z-index: 99; } @media (max-width: 650px) { .cookies { left: 0.75rem; right: 0.75rem; bottom: 0.75rem; padding: 1.5rem; } } .cookies.visible { opacity: 1; transform: translateY(0); pointer-events: auto; transition: opacity 0.6s 2s, transform 0.8s 2s cubic-bezier(0.4, 0, 0.2, 1); } .cookies__buttons { display: flex; gap: 1.5rem; } .cookies__button { cursor: pointer; } .cookies__button.decline { border: 0; } .cta { color: #FFFDF5; background: #FFFDF5; position: relative; } .cta__inner { display: block; padding: 2.75rem 3rem; transition: color 0.4s; position: relative; overflow: hidden; } @media (max-width: 650px) { .cta__inner { padding: 2rem; } } .cta__inner:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; background: #070707; mix-blend-mode: soft-light; } .cta__inner:after { content: ""; position: absolute; top: -10rem; left: -10rem; width: calc(100% + 20rem); height: calc(100% + 20rem); -webkit-animation: noise 1s steps(2) infinite; animation: noise 1s steps(2) infinite; background: url("images/noise.png"); background-position: 50%; pointer-events: none; will-change: transform; } .cta__inner:hover { color: #490AB2; } .cta__inner:hover .cta__background { transform: translateY(-50%); } .cta__tagline, .cta__heading, .cta__arrow { position: relative; z-index: 2; } .cta__heading { margin: 1.5rem 0 7rem; } @media (max-width: 1024px) { .cta__heading br { display: none; } } @media (max-width: 650px) { .cta__heading { margin: 1.5rem 0 4rem; } } .cta__arrow { width: 3.125rem; } .cta__background { position: absolute; top: 0; left: 0; width: 100%; height: 200%; background: linear-gradient(180deg, #490AB2 0%, #FFBADF 50%, #FFECFB 100%); transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); } .error { color: #490AB2; background: #FFBAF0; min-height: 100vh; padding: 11.25rem 0 2.25rem; } @media (max-width: 650px) { .error { padding: 8.75rem 0 2.25rem; } } .error .container { position: relative; z-index: 4; } .error__tagline { display: block; margin: 0 0 2.25rem; } .error__heading { max-width: 62.5rem; margin: 0 0 5.5rem; } .error__button-holder { overflow: hidden; } .error__button { font-family: "Favorit", sans-serif; color: currentColor; font-weight: 400; font-kerning: none; line-height: 0.95; letter-spacing: -0.035em; font-size: 6rem; letter-spacing: -0.03em; display: inline-block; transform: translateX(-6.25rem); transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); } @media (max-width: 1024px) { .error__button { font-size: 5.75rem; } } @media (max-width: 650px) { .error__button { font-size: 3rem; } } @media (max-width: 650px) { .error__button { font-size: 2.5rem; transform: translateX(0); } } .error__button:hover { transform: translateX(0); } .error__button:before { content: "↳"; display: inline-block; margin: 0 1.25rem 0 0; } @media (max-width: 650px) { .error__button:before { margin: 0 0.625rem 0 0; } } .error__background { position: absolute; top: 0; left: 3rem; right: 3rem; height: 100vh; display: grid; grid-template-columns: repeat(8, 2fr) repeat(8, 1fr); grid-template-rows: repeat(5, 1fr); } @media (max-width: 1024px) { .error__background { width: 170vw; left: -50vw; } } @media (max-width: 650px) { .error__background { width: 400vw; left: -215.7vw; } } .error__background div { position: relative; background: white; } .error__background div:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; mix-blend-mode: soft-light; background-size: cover; background-image: url("images/grain.png"); pointer-events: none; opacity: 0.5; } .error__background div.shape-10, .error__background div.shape-11, .error__background div.shape-12, .error__background div.shape-13, .error__background div.shape-22, .error__background div.shape-23, .error__background div.shape-24, .error__background div.shape-25 { grid-row: span 2; } .error__background div.shape-1 { grid-column: 2; } .error__background div.shape-2 { grid-column: 4; } .error__background div.shape-3 { grid-column: 6; } .error__background div.shape-4 { grid-column: 8; } .error__background div.shape-5 { grid-column: 10; } .error__background div.shape-6 { grid-column: 12; } .error__background div.shape-7 { grid-column: 14; } .error__background div.shape-8 { grid-column: 16; } .error__background div.shape-9 { grid-column: 18; } .error__background div.shape-11 { grid-column: 3; } .error__background div.shape-12 { grid-column: 5; } .error__background div.shape-13 { grid-column: 7; } .error__background div.shape-14 { grid-column: 9; } .error__background div.shape-15 { grid-column: 11; } .error__background div.shape-16 { grid-column: 13; } .error__background div.shape-17 { grid-column: 15; } .error__background div.shape-18 { grid-column: 10; } .error__background div.shape-19 { grid-column: 12; } .error__background div.shape-20 { grid-column: 14; } .error__background div.shape-21 { grid-column: 16; } .error__background div.shape-22 { grid-column: 2; } .error__background div.shape-23 { grid-column: 4; } .error__background div.shape-24 { grid-column: 6; } .error__background div.shape-25 { grid-column: 8; } .error__background div.shape-26 { grid-column: 9; } .error__background div.shape-27 { grid-column: 11; } .error__background div.shape-28 { grid-column: 13; } .error__background div.shape-29 { grid-column: 15; } .error__background div.shape-30 { grid-column: 10; } .error__background div.shape-31 { grid-column: 12; } .error__background div.shape-32 { grid-column: 14; } .error__background div.shape-33 { grid-column: 16; } .error__background div.gradient-1 { background: linear-gradient(180deg, #ffbaf0 0%, #ffecfb 100%); } .error__background div.gradient-2 { background: linear-gradient(180deg, #ffecfb 0%, #ffa4eb 100%); } .features { position: relative; color: #201B25; } .features__pin { margin: -1px 0 0; height: 100vh; padding: 9.259vh 0; background: #FFFDF5; } @media (max-width: 1024px) { .features__pin { height: auto; } } .features .container { height: 100%; display: flex; flex-direction: column; justify-content: space-between; position: relative; z-index: 2; } .features__header { max-width: 62.5rem; } @media (max-width: 1024px) { .features__header { margin: 0 0 4rem; max-width: 45.3125rem; } } .features__tagline { display: block; margin: 0 0 2.25rem; } .features__list-scroll { overflow: hidden; } .features__item { padding: 2.963vh 0; background: linear-gradient(180deg, #FFBAF0 0%, #FFFDF5 100%); position: relative; counter-increment: count; } @media (max-width: 1024px) { .features__item { display: block; padding: 1.5rem; } } .features__item:before { display: block; grid-column: 2; content: counters(count, "", decimal-leading-zero); font-size: 1.5rem; letter-spacing: -0.03em; line-height: 1.2; } @media (max-width: 650px) { .features__item:before { font-size: 1.25rem; } } @media (max-width: 650px) { .features__item:before { margin: 0 0 1.5rem; } } .features__item:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; background: #070707; mix-blend-mode: soft-light; } .features__item .noise-fx { opacity: 0.4; } .features__title { grid-column: 7/-2; position: relative; z-index: 2; } .flex-carousel { padding: 0 0 3.75rem; } @media (min-width: 782px) { .flex-carousel { padding: 0 0 7.5rem; } } .flex-carousel .left { grid-column: 1/-1; } @media (min-width: 782px) { .flex-carousel .left { grid-column: 1/span 4; } } .flex-carousel .left .tagline { display: block; color: #490AB2; margin: 0 0 1.5rem; } .flex-carousel .left h2 { color: #490AB2; } .flex-carousel .right { margin: 1.5rem 0 0; grid-column: 1/-1; } @media (min-width: 782px) { .flex-carousel .right { margin: 0; grid-column: 6/span 5; } } .flex-carousel .right h3 { color: #490AB2; } .flex-carousel .right .detail { margin: 2.25rem 0 0; } .flex-carousel .right .detail p { font-size: 1.125rem; } .flex-carousel .right .detail p:nth-child(n+2) { margin: 0.75rem 0 0; } .flex-carousel .swiper-container { margin: 3.75rem 0 0; grid-column: 1/span 12; } @media (min-width: 782px) { .flex-carousel .swiper-container { margin: 7.5rem 0 0; } } .flex-carousel .swiper-container .swiper-wrapper { align-items: flex-start; } .flex-carousel .swiper-container .swiper-slide { position: relative; height: auto; width: 16rem; } @media (min-width: 782px) { .flex-carousel .swiper-container .swiper-slide { width: 21.375rem; } } .flex-carousel .swiper-container .swiper-slide:nth-child(n+2) { margin: 0 0 0 1.5rem; } @media (min-width: 782px) { .flex-carousel .swiper-container .swiper-slide:nth-child(n+2) { margin: 0 0 0 4.5rem; } } @media (min-width: 782px) { .flex-carousel .swiper-container .swiper-slide { width: 28.5rem; } } .flex-carousel .swiper-container img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-position: center; object-position: center; -o-object-fit: cover; object-fit: cover; display: block; } .flex-detail-grid { margin: 0 0 3.75rem; } @media (min-width: 782px) { .flex-detail-grid { margin: 0 0 7.5rem; } } @media (min-width: 782px) { .flex-detail-grid .upper { grid-column: 1/span 4; } } .flex-detail-grid .upper h2 { color: #490AB2; } .flex-detail-grid .items-outer { overflow: hidden; grid-column: 1/span 12; margin: 3rem 0 0; } @media (min-width: 782px) { .flex-detail-grid .items-outer { margin: 7.5rem 0 0; } } @media (min-width: 782px) { .flex-detail-grid .items { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; } } .flex-detail-grid .item { overflow: hidden; position: relative; background: #320461; padding: 1.125rem 1.125rem 2.25rem; } .flex-detail-grid .item:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; background: #070707; mix-blend-mode: soft-light; z-index: 2; } .flex-detail-grid .item:after { content: ""; position: absolute; top: -10rem; left: -10rem; width: calc(100% + 20rem); height: calc(100% + 20rem); -webkit-animation: noise 1s steps(2) infinite; animation: noise 1s steps(2) infinite; background: url("images/noise.png"); background-position: 50%; pointer-events: none; will-change: transform; z-index: 2; } @media (min-width: 782px) { .flex-detail-grid .item:hover { color: #490AB2; } .flex-detail-grid .item:hover .background { transform: translateY(-50%); } } .flex-detail-grid .item .background { position: absolute; top: 0; left: 0; width: 100%; height: 200%; display: block; background: linear-gradient(180deg, #490AB2 0%, #FFBADF 50%, #FFECFB 100%); transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); z-index: 1; } .flex-detail-grid .item .label { position: relative; font-size: 1.125rem; line-height: 1.4; color: rgba(255, 253, 245, 0.5); z-index: 10; } .flex-detail-grid .item .detail { position: relative; color: #FFFDF5; display: block; z-index: 10; } .flex-detail-grid .item .detail p { font-size: 1.125rem; line-height: 1.4; } .flex-detail-grid .item .detail ul { list-style-type: none; list-style-position: outside; } .flex-detail-grid .item .detail li { position: relative; line-height: 1.4; font-size: 1.125rem; padding: 0 0 0 1.125rem; } .flex-detail-grid .item .detail li:before { content: "↳"; position: absolute; top: 0; left: 0; } .flex-detail-icons { position: relative; background: #320461; padding: 3rem 0 4.5rem; margin: 0 0 7.5rem; overflow: hidden; } @media (min-width: 782px) { .flex-detail-icons { margin: 0 0 22.5rem; padding: 6rem 0 9rem; } } .flex-detail-icons:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; background: #070707; mix-blend-mode: soft-light; z-index: 2; } .flex-detail-icons:after { content: ""; position: absolute; top: -10rem; left: -10rem; width: calc(100% + 20rem); height: calc(100% + 20rem); transform: translateY(-50%); -webkit-animation: noise 1s steps(2) infinite; animation: noise 1s steps(2) infinite; background: url("images/noise.png"); background-position: 50%; pointer-events: none; will-change: transform; z-index: 2; } .flex-detail-icons .background { position: absolute; top: 0; left: 0; width: 100%; height: 200%; display: block; background: linear-gradient(180deg, #490AB2 0%, #FFBADF 50%, #FFECFB 100%); transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); z-index: 1; } .flex-detail-icons .container { position: relative; z-index: 5; } .flex-detail-icons .left { grid-column: 1/-1; } @media (min-width: 782px) { .flex-detail-icons .left { grid-column: 1/span 4; } } .flex-detail-icons .left .tagline { display: block; color: #490AB2; margin: 0 0 1.5rem; } .flex-detail-icons .left h2 { color: #FFFDF5; } .flex-detail-icons .right { grid-column: 1/-1; margin: 1.5rem 0 0; } @media (min-width: 782px) { .flex-detail-icons .right { grid-column: 6/span 6; margin: 0; } } .flex-detail-icons .right p { color: #FFFDF5; } .flex-detail-icons .items { margin: 3.75rem 0 0; grid-column: 1/span 12; } @media (min-width: 782px) { .flex-detail-icons .items { display: grid; gap: 0; grid-template-columns: repeat(4, 1fr); margin: 15rem 0 0; gap: 6rem; } } .flex-detail-icons .items .item { color: #FFFDF5; } @media (max-width: 782px) { .flex-detail-icons .items .item:nth-child(n+2) { margin: 4.5rem 0 0; } } .flex-detail-icons .items img { width: 6rem; height: 6rem; -o-object-position: left center; object-position: left center; -o-object-fit: contain; object-fit: contain; display: block; margin: 0 0 1.5rem; } @media (min-width: 782px) { .flex-detail-icons .items img { margin: 0 0 6.75rem; } } .flex-detail-icons .items h3 { font-size: 3.5rem; line-height: 1.16; } @media (min-width: 782px) { .flex-detail-icons .items h3 { min-height: 10rem; } } @media (max-width: 1024px) { .flex-detail-icons .items h3 { font-size: 3.25rem; } } @media (max-width: 650px) { .flex-detail-icons .items h3 { font-size: 1.625rem; } } .flex-detail-icons .items p { font-size: 1.125rem; } @media (max-width: 782px) { .flex-detail-icons .items p { margin: 1.5rem 0 0; } } .flex-detail-list { padding: 0 0 3.75rem; } @media (min-width: 782px) { .flex-detail-list { padding: 0 0 7.5rem; } } .flex-detail-list .left { grid-column: 1/-1; } @media (min-width: 782px) { .flex-detail-list .left { grid-column: 1/span 4; } } .flex-detail-list .left .tagline { display: block; color: #490AB2; margin: 0 0 1.5rem; } .flex-detail-list .left h2 { color: #490AB2; } .flex-detail-list .right { grid-column: 1/-1; margin: 1.5rem 0 0; } @media (min-width: 782px) { .flex-detail-list .right { grid-column: 6/span 5; margin: 0; } } .flex-detail-list .right h3 { color: #490AB2; } .flex-detail-list .right .detail { margin: 1.5rem 0 0; } @media (min-width: 782px) { .flex-detail-list .right .detail { margin: 2.25rem 0 0; } } .flex-detail-list .right .detail p { font-size: 1.125rem; } .flex-detail-list .right .detail p:nth-child(n+2) { margin: 0.75rem 0 0; } .flex-detail-list .items-outer { grid-column: 1/-1; margin: 3rem 0 0; overflow: hidden; } @media (min-width: 782px) { .flex-detail-list .items-outer { margin: 3.75rem 0 0; grid-column: 6/span 7; } } .flex-detail-list .items { counter-reset: item; } .flex-detail-list .items[data-animation-status=active] .item-inner { transform: translateY(0); } .flex-detail-list .item { position: relative; overflow: hidden; } .flex-detail-list .item:nth-child(1) .item-inner { transition-delay: 0s; } .flex-detail-list .item:nth-child(2) .item-inner { transition-delay: 0.2s; } .flex-detail-list .item:nth-child(3) .item-inner { transition-delay: 0.4s; } .flex-detail-list .item:nth-child(4) .item-inner { transition-delay: 0.6s; } .flex-detail-list .item:nth-child(5) .item-inner { transition-delay: 0.8s; } .flex-detail-list .item:nth-child(6) .item-inner { transition-delay: 1s; } .flex-detail-list .item:nth-child(7) .item-inner { transition-delay: 1.2s; } .flex-detail-list .item:nth-child(8) .item-inner { transition-delay: 1.4s; } .flex-detail-list .item:nth-child(9) .item-inner { transition-delay: 1.6s; } .flex-detail-list .item:nth-child(10) .item-inner { transition-delay: 1.8s; } .flex-detail-list .item .item-inner { position: relative; background: #320461; counter-increment: item; padding: 1.875rem 1.875rem 1.875rem 4.875rem; transform: translateY(100%); transition: transform 0.8s; } @media (min-width: 782px) { .flex-detail-list .item .item-inner:hover { color: #490AB2; } .flex-detail-list .item .item-inner:hover .background { transform: translateY(-50%); } } .flex-detail-list .item .item-inner:before { position: absolute; top: 1.875rem; left: 1.875rem; content: counter(item, decimal-leading-zero) ". "; display: block; font-size: 1.5rem; letter-spacing: -0.03em; line-height: 1.2; line-height: 1.4; color: #201B25; z-index: 100; } @media (max-width: 650px) { .flex-detail-list .item .item-inner:before { font-size: 1.25rem; } } .flex-detail-list .item .background { position: absolute; top: 0; left: 0; width: 100%; height: 200%; display: block; background: linear-gradient(180deg, #FFBAF0 0%, #FFFDF5 50%, #ffdcf7 100%); transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); z-index: 1; } .flex-detail-list .item .label { position: relative; font-size: 1.5rem; letter-spacing: -0.03em; line-height: 1.2; line-height: 1.4; color: #201B25; z-index: 10; } @media (max-width: 650px) { .flex-detail-list .item .label { font-size: 1.25rem; } } .flex-detail-list .item .detail { position: relative; color: #201B25; display: block; margin: 1.5rem 0 0; z-index: 10; } .flex-detail-list .item .detail p { font-size: 1.125rem; line-height: 1.4; } .flex-introduction { padding: 0 0 3.75rem; } @media (min-width: 782px) { .flex-introduction { padding: 0 0 7.5rem; } } .flex-introduction .left { grid-column: 1/-1; } @media (min-width: 782px) { .flex-introduction .left { grid-column: 1/span 4; } } .flex-introduction .left .tagline { display: block; color: #490AB2; margin: 0 0 1.5rem; } .flex-introduction .left h2 { color: #490AB2; } .flex-introduction .right { grid-column: 1/-1; margin: 1.5rem 0 0; } @media (min-width: 782px) { .flex-introduction .right { margin: 0; padding: 2.25rem 0 0; grid-column: 6/span 5; } } .flex-introduction .right h3 { color: #490AB2; } .flex-introduction .right .detail { margin: 1.5rem 0 0; } @media (min-width: 782px) { .flex-introduction .right .detail { margin: 6rem 0 0; } } .flex-introduction .right .detail p { font-size: 1.125rem; } .flex-introduction .right .detail p:nth-child(n+2) { margin: 0.75rem 0 0; } .flex-media { padding: 0 0 3.75rem; } @media (min-width: 782px) { .flex-media { padding: 0 0 22.5rem; } } .flex-media .left { grid-column: 1/-1; } @media (min-width: 782px) { .flex-media .left { grid-column: 1/span 4; } } .flex-media .left h2 { color: #490AB2; } .flex-media .right { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 0.75rem; grid-column: 1/-1; margin: 1.5rem 0 0; } @media (min-width: 782px) { .flex-media .right { grid-column: 6/span 7; grid-gap: 4.5rem; margin: 0; } } .flex-media .item { position: relative; grid-column: span 2; } .flex-media .item:nth-child(2), .flex-media .item:nth-child(3) { grid-column: span 1; } .flex-media .item img, .flex-media .item iframe, .flex-media .item object, .flex-media .item embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; display: block; } .flex-testimonial { padding: 0 0 11.25rem; } @media (min-width: 782px) { .flex-testimonial { padding: 0 0 22.5rem; } } .flex-testimonial .container { position: relative; } .flex-testimonial blockquote { grid-column: 1/-1; } @media (min-width: 782px) { .flex-testimonial blockquote { grid-column: 1/span 10; } } .flex-testimonial blockquote .tagline { display: block; color: #490AB2; margin: 0 0 1.5rem; } .flex-testimonial blockquote p { font-size: 3rem; color: #490AB2; line-height: 1.16; } @media (max-width: 1024px) { .flex-testimonial blockquote p { font-size: 1.75rem; } } @media (max-width: 650px) { .flex-testimonial blockquote p { font-size: 1.25rem; } } .flex-testimonial blockquote p:before { content: " "; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='54' height='39' viewBox='0 0 54 39' fill='none'%3E%3Cpath d='M48.1 0H53.28V9.62H48.1C42.18 9.62 39.22 12.58 39.22 18.5V20.72H48.1V38.48H30.34V17.76C30.34 5.92 37 0 48.1 0ZM17.76 0H22.94V9.62H17.76C11.84 9.62 8.88 12.58 8.88 18.5V20.72H17.76V38.48H0V17.76C0 5.92 6.66 0 17.76 0Z' fill='%23490AB2'/%3E%3C/svg%3E"); background-position: center; background-size: contain; background-repeat: no-repeat; display: block; width: 1.6875rem; height: 1.25rem; margin: 0 0 1.5rem; } @media (min-width: 782px) { .flex-testimonial blockquote p:before { width: 3.375rem; height: 2.5rem; } } .flex-testimonial blockquote .author { position: relative; padding: 0 0 0 1.5rem; font-size: 1.125rem; margin: 1.5rem 0 0; } @media (min-width: 1024px) { .flex-testimonial blockquote .author { margin: 3.75rem 0 0; } } .flex-testimonial blockquote .author:before { content: "↳"; position: absolute; top: 0; left: 0; } .flex-testimonial img { display: none; } @media (min-width: 782px) { .flex-testimonial img { position: absolute; bottom: 0; right: 0; width: 14rem; height: auto; display: block; -o-object-fit: contain; object-fit: contain; } } .flex-text-content { padding: 0 0 3.75rem; } @media (min-width: 782px) { .flex-text-content { padding: 0 0 15rem; } } .flex-text-content .left { grid-column: 1/-1; } @media (min-width: 782px) { .flex-text-content .left { grid-column: 1/span 4; } } .flex-text-content .left .tagline { display: block; color: #490AB2; margin: 0 0 1.5rem; } .flex-text-content .left h2 { color: #490AB2; } .flex-text-content .right { grid-column: 1/-1; margin: 1.5rem 0 0; } @media (min-width: 782px) { .flex-text-content .right { grid-column: 6/span 5; margin: 0; } } .flex-text-content .right h3 { color: #490AB2; } .flex-text-content .right .detail { margin: 2.25rem 0 0; } .flex-text-content .right .detail p { font-size: 1.125rem; } .flex-text-content .right .detail p:nth-child(n+2) { margin: 0.75rem 0 0; } .flex-text-content .right .detail blockquote:nth-child(n+2) { margin: 3rem 0 0; } .flex-text-content .right .detail blockquote p { font-size: 3rem; color: #490AB2; line-height: 1.16; } @media (max-width: 1024px) { .flex-text-content .right .detail blockquote p { font-size: 2.75rem; } } @media (max-width: 650px) { .flex-text-content .right .detail blockquote p { font-size: 2.125rem; } } .flex-text-content .right .detail blockquote p:before { content: "“"; display: inline; } .flex-text-content .right .detail blockquote p:after { content: "”"; display: inline; } .flexible-content { background-image: url("svg/background.svg"); background-repeat: repeat-y; background-attachment: fixed; background-position: top right; background-size: 58.33% auto; margin: 0 auto; width: calc(100% - 6rem); max-width: 120rem; } @media (max-width: 650px) { .flexible-content { width: calc(100% - 3.5rem); } } .flexible-content .inner { margin: calc(50% - 50vw); width: 100vw; } .footer { background: #FFFDF5; position: relative; padding: 200px 0; } @media (max-width: 650px) { .footer { padding: 8.75rem 0; } } .footer__newsletter { color: #201B25; grid-column: 1/span 4; } @media (max-width: 1024px) { .footer__newsletter { grid-column: 1/-1; } } .footer__newsletter .gfield_label { display: none; } .footer__newsletter .gform_wrapper { position: relative; max-width: 31.25rem; } .footer__newsletter .gfield--type-honeypot { display: none; } .footer__newsletter .gform_footer { position: absolute; top: 0; right: 0; height: 100%; width: 3.125rem; } .footer__newsletter .gform_fields .gfield input[type=email] { width: 100%; font-weight: 500; font-family: "Favorit", sans-serif; text-transform: uppercase; color: currentColor !important; font-size: 0.875rem; padding: 0.75rem 1.125rem; color: #201B25; border: 1px solid; } .footer__newsletter .gform_fields .gfield input[type=email]::-moz-placeholder { color: #201B25; } .footer__newsletter .gform_fields .gfield input[type=email]:-ms-input-placeholder { color: #201B25; } .footer__newsletter .gform_fields .gfield input[type=email]::placeholder { color: #201B25; } .footer__newsletter .gform_wrapper form .gform_footer { top: 0; margin: 0; } .footer__newsletter .gform_wrapper form .gfield_validation_message { position: absolute; bottom: -2.125rem; left: 0; } .footer__newsletter .gform_validation_errors { display: none; } .footer__newsletter button { width: 100%; height: 100%; border: 0; padding: 0; font-size: 1.125rem; background: transparent; justify-content: center; transition: background 0.3s, color 0.3s; cursor: pointer; } .footer__newsletter button:hover { color: #FFFDF5; background: #201B25; } .footer__newsletter button:before { margin: 0; } .footer__newsletter button span { display: none; } .footer__heading { color: #490AB2; margin: 0 0 2.75rem; } @media (max-width: 1024px) { .footer__heading { max-width: 34.375rem; } } .footer__nav { grid-column: 7/-1; } @media (max-width: 1024px) { .footer__nav { grid-column: 1/-1; margin: 4.5rem 0 0; } } .footer__nav .menu { display: grid; gap: 0; grid-template-columns: repeat(3, 1fr); } @media (max-width: 650px) { .footer__nav .menu { gap: 2rem 0; grid-template-columns: repeat(2, 1fr); } } .footer__nav .menu > li > a { font-size: 0.875rem; text-transform: uppercase; font-family: "Favorit Mono", monospace; letter-spacing: 0.02em; display: block; margin: 0 0 2rem; pointer-events: none; } .footer__nav .sub-menu li { overflow: hidden; } @media (max-width: 650px) { .footer__nav .sub-menu li { overflow: visible; } } .footer__nav .sub-menu li a { display: inline-block; transform: translateX(-1.125rem); transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); } @media (max-width: 650px) { .footer__nav .sub-menu li a { transform: translateX(0); } } .footer__nav .sub-menu li a:hover { transform: translateX(0); } .footer__nav .sub-menu li a:before { content: "↳"; display: inline-block; margin: 0 0.375rem 0 0; } @media (max-width: 650px) { .footer__nav .sub-menu li a:before { display: none; } } .footer__nav .sub-menu li { margin: 0 0 0.375rem; } .footer__nav .sub-menu a { letter-spacing: -0.03em; } [data-load-namespace=contact] .footer, [data-load-namespace=flexible-case-study] .footer { color: #FFFDF5; background: #490AB2; } [data-load-namespace=contact] .footer .footer__heading, [data-load-namespace=flexible-case-study] .footer .footer__heading { color: #FFBAF0; } [data-load-namespace=contact] .footer .footer__newsletter .gform_fields .gfield input[type=email], [data-load-namespace=flexible-case-study] .footer .footer__newsletter .gform_fields .gfield input[type=email] { color: #FFFDF5 !important; } [data-load-namespace=contact] .footer .footer__newsletter .gform_fields .gfield input[type=email]::-moz-placeholder, [data-load-namespace=flexible-case-study] .footer .footer__newsletter .gform_fields .gfield input[type=email]::-moz-placeholder { color: #FFFDF5 !important; } [data-load-namespace=contact] .footer .footer__newsletter .gform_fields .gfield input[type=email]:-ms-input-placeholder, [data-load-namespace=flexible-case-study] .footer .footer__newsletter .gform_fields .gfield input[type=email]:-ms-input-placeholder { color: #FFFDF5 !important; } [data-load-namespace=contact] .footer .footer__newsletter .gform_fields .gfield input[type=email]::placeholder, [data-load-namespace=flexible-case-study] .footer .footer__newsletter .gform_fields .gfield input[type=email]::placeholder { color: #FFFDF5 !important; } .footer .site-by-bgn { position: absolute; bottom: 3rem; left: 3rem; overflow: hidden; } @media (max-width: 650px) { .footer .site-by-bgn { overflow: visible; bottom: 1.75rem; left: 1.75rem; } } .footer .site-by-bgn a { display: block; transform: translateX(-1.125rem); transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); } @media (max-width: 650px) { .footer .site-by-bgn a { transform: translateX(0); } } .footer .site-by-bgn a:hover { transform: translateX(0); } .footer .site-by-bgn a:before { content: "↳"; display: inline-block; margin: 0 0.375rem 0 0; } @media (max-width: 650px) { .footer .site-by-bgn a:before { display: none; } } .footer .site-by-bgn a { letter-spacing: -0.03em; } .gform_wrapper form .gfield { margin: 0 0 2.125rem; } @media (max-width: 650px) { .gform_wrapper form .gfield { margin: 0 0 1.5rem; } } .gform_wrapper form .gfield_label { display: none; } .gform_wrapper form .gfield_validation_message { font-family: "Favorit", sans-serif; font-size: 1.125rem; color: currentColor; font-weight: 400; font-kerning: none; line-height: 1.25; letter-spacing: -0.01em; color: #ff8787; display: inline-block; font-size: 0.875rem; padding: 0.5rem 0; } .gform_wrapper form .gfield input[type=text], .gform_wrapper form .gfield input[type=email], .gform_wrapper form .gfield input[type=tel], .gform_wrapper form .gfield textarea { width: 100%; font-family: "Favorit", sans-serif; font-size: 1.125rem; color: currentColor; font-weight: 400; font-kerning: none; line-height: 1.25; letter-spacing: -0.01em; color: #FFFDF5; font-size: 1.25rem; border-bottom: 1px solid; padding: 0.75rem 0.125rem; transition: border-color 0.3s; } @media (max-width: 650px) { .gform_wrapper form .gfield input[type=text], .gform_wrapper form .gfield input[type=email], .gform_wrapper form .gfield input[type=tel], .gform_wrapper form .gfield textarea { font-size: 1rem; } } .gform_wrapper form .gfield input[type=text]::-moz-placeholder, .gform_wrapper form .gfield input[type=email]::-moz-placeholder, .gform_wrapper form .gfield input[type=tel]::-moz-placeholder, .gform_wrapper form .gfield textarea::-moz-placeholder { color: #FFFDF5; opacity: 1; -moz-transition: color 0.3s; transition: color 0.3s; } .gform_wrapper form .gfield input[type=text]:-ms-input-placeholder, .gform_wrapper form .gfield input[type=email]:-ms-input-placeholder, .gform_wrapper form .gfield input[type=tel]:-ms-input-placeholder, .gform_wrapper form .gfield textarea:-ms-input-placeholder { color: #FFFDF5; opacity: 1; -ms-transition: color 0.3s; transition: color 0.3s; } .gform_wrapper form .gfield input[type=text]::placeholder, .gform_wrapper form .gfield input[type=email]::placeholder, .gform_wrapper form .gfield input[type=tel]::placeholder, .gform_wrapper form .gfield textarea::placeholder { color: #FFFDF5; opacity: 1; transition: color 0.3s; } .gform_wrapper form .gfield input[type=text]:active, .gform_wrapper form .gfield input[type=text]:focus, .gform_wrapper form .gfield input[type=email]:active, .gform_wrapper form .gfield input[type=email]:focus, .gform_wrapper form .gfield input[type=tel]:active, .gform_wrapper form .gfield input[type=tel]:focus, .gform_wrapper form .gfield textarea:active, .gform_wrapper form .gfield textarea:focus { border-color: #FFBAF0; } .gform_wrapper form .gfield input[type=text]:active::-moz-placeholder, .gform_wrapper form .gfield input[type=text]:focus::-moz-placeholder, .gform_wrapper form .gfield input[type=email]:active::-moz-placeholder, .gform_wrapper form .gfield input[type=email]:focus::-moz-placeholder, .gform_wrapper form .gfield input[type=tel]:active::-moz-placeholder, .gform_wrapper form .gfield input[type=tel]:focus::-moz-placeholder, .gform_wrapper form .gfield textarea:active::-moz-placeholder, .gform_wrapper form .gfield textarea:focus::-moz-placeholder { color: #FFBAF0; } .gform_wrapper form .gfield input[type=text]:active:-ms-input-placeholder, .gform_wrapper form .gfield input[type=text]:focus:-ms-input-placeholder, .gform_wrapper form .gfield input[type=email]:active:-ms-input-placeholder, .gform_wrapper form .gfield input[type=email]:focus:-ms-input-placeholder, .gform_wrapper form .gfield input[type=tel]:active:-ms-input-placeholder, .gform_wrapper form .gfield input[type=tel]:focus:-ms-input-placeholder, .gform_wrapper form .gfield textarea:active:-ms-input-placeholder, .gform_wrapper form .gfield textarea:focus:-ms-input-placeholder { color: #FFBAF0; } .gform_wrapper form .gfield input[type=text]:active::placeholder, .gform_wrapper form .gfield input[type=text]:focus::placeholder, .gform_wrapper form .gfield input[type=email]:active::placeholder, .gform_wrapper form .gfield input[type=email]:focus::placeholder, .gform_wrapper form .gfield input[type=tel]:active::placeholder, .gform_wrapper form .gfield input[type=tel]:focus::placeholder, .gform_wrapper form .gfield textarea:active::placeholder, .gform_wrapper form .gfield textarea:focus::placeholder { color: #FFBAF0; } .gform_wrapper form .gfield textarea { height: 8.875rem; } .gform_wrapper form .gfield .ginput_container { font-size: 0; } .gform_wrapper form .gfield--type-choice input:checked + label { color: #FFFDF5; } .gform_wrapper form .gfield--type-choice input:checked + label:before { background: #FFFDF5; border-color: #FFFDF5; } .gform_wrapper form .gfield--type-choice label { font-family: "Favorit", sans-serif; font-size: 1.125rem; color: currentColor; font-weight: 400; font-kerning: none; line-height: 1.25; letter-spacing: -0.01em; font-size: 1.125rem; display: flex; align-items: center; cursor: pointer; } .gform_wrapper form .gfield--type-choice label:before { content: " "; display: block; margin: 0 0.625rem 0 0; border: 2px solid #FFBAF0; border-radius: 50%; width: 0.875rem; min-width: 0.875rem; height: 0.875rem; min-height: 0.875rem; transition: background 0.3s, border 0.3s; } .gform_wrapper form .gform_footer { color: #FFFDF5; display: inline-block; margin: 0.75rem 0 0; } .gform_confirmation_message { font-size: 2rem; line-height: 1.2; color: currentColor; font-family: "Favorit", sans-serif; } @media (max-width: 650px) { .gform_confirmation_message { font-size: 1.625rem; } } .gform_validation_errors h2.gform_submission_error { font-size: 2rem; line-height: 1.2; color: #ff8787; margin: 0 0 2rem; } @media (max-width: 650px) { .gform_validation_errors h2.gform_submission_error { font-size: 1.625rem; } } .gform_validation_errors ol { display: none; } .header { position: absolute; top: 0; left: 0; width: 100vw; padding: 2.625rem 0; color: #FFFDF5; transition: color 0.3s; z-index: 999; } [data-header=black] .header { color: #320461; } .nav-open .header { color: #FFFDF5; } .header .container { display: flex; justify-content: space-between; } @media (max-width: 650px) { .header__nav { position: absolute; top: 0; left: 0; width: 100%; background: #490AB2; padding: 8.75rem 1.75rem 4rem; -webkit-clip-path: inset(0 0 100% 0); clip-path: inset(0 0 100% 0); transition: -webkit-clip-path 0.6s cubic-bezier(0.4, 0, 0.2, 1); transition: clip-path 0.6s cubic-bezier(0.4, 0, 0.2, 1); transition: clip-path 0.6s cubic-bezier(0.4, 0, 0.2, 1), -webkit-clip-path 0.6s cubic-bezier(0.4, 0, 0.2, 1); z-index: -1; } .nav-open .header__nav { -webkit-clip-path: inset(0 0 0% 0); clip-path: inset(0 0 0% 0); } } .header__nav .menu { display: flex; gap: 4.5rem; pointer-events: none; } @media (max-width: 650px) { .header__nav .menu { gap: 0; flex-direction: column; } } .header__nav .menu > li { transition: opacity 150ms linear 100ms, transform 150ms ease-in-out 100ms; pointer-events: auto; } .header__nav .menu:hover > li { opacity: 0.5; } .header__nav .menu > li:hover { opacity: 1; } .header__nav .menu li { overflow: hidden; } @media (max-width: 650px) { .header__nav .menu li { overflow: visible; } } .header__nav .menu li a { display: inline-block; transform: translateX(-1.125rem); transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); } @media (max-width: 650px) { .header__nav .menu li a { font-size: 2.125rem; color: #FFBAF0; transform: none; } } .header__nav .menu li a:hover { transform: translateX(0); } .header__nav .menu li a:before { content: "↳"; display: inline-block; margin: 0 0.375rem 0 0; } .header__home { display: inline-block; } .header__logo { width: 9.5rem; height: auto; } .header__menu-button { position: relative; cursor: pointer; transition: transform 0.45s ease-in-out; } @media (min-width: 651px) { .header__menu-button { display: none; } } .header__menu-button .menu-icon { position: relative; } .header__menu-button .icon { width: 2.25rem; height: 1.125rem; position: relative; display: flex; align-items: center; justify-content: center; } .header__menu-button .icon span, .header__menu-button .icon span:before, .header__menu-button .icon span:after { left: 0; width: 100%; height: 2px; background: currentColor; transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .header__menu-button .icon span:before, .header__menu-button .icon span:after { content: ""; position: absolute; } .header__menu-button .icon span:before { top: 0; } .header__menu-button .icon span:after { bottom: 0; right: 0; left: auto; } .nav-open .header__menu-button .icon--open span, .nav-open .header__menu-button .icon--open span:before, .nav-open .header__menu-button .icon--open span:after { width: 0; } .header__menu-button .icon--open span { transition-delay: 0.3s; } .nav-open .header__menu-button .icon--open span { transition-delay: 0s; } .header__menu-button .icon--open span:before { transition-delay: 0.4s; } .nav-open .header__menu-button .icon--open span:before { transition-delay: 0.05s; } .header__menu-button .icon--open span:after { transition-delay: 0.5s; } .nav-open .header__menu-button .icon--open span:after { transition-delay: 0.1s; } .header__menu-button .icon--close { position: absolute; top: 50%; left: 50%; translate: -50% -50%; } .header__menu-button .icon--close span { width: 0; } .header__menu-button .icon--close span:before, .header__menu-button .icon--close span:after { position: absolute; top: 50%; left: 50%; bottom: auto; width: 0%; transform-origin: 0%; transform: rotate(45deg) translate(-50%, -50%); } .nav-open .header__menu-button .icon--close span:before, .nav-open .header__menu-button .icon--close span:after { width: 100%; } .header__menu-button .icon--close span:before { transform: rotate(-45deg) translate(-50%, -50%); } .nav-open .header__menu-button .icon--close span:before { width: 100%; transition-delay: 0.3s; } .header__menu-button .icon--close span:after { transition-delay: 0.15s; } .nav-open .header__menu-button .icon--close span:after { width: 100%; transition-delay: 0.45s; } .logos { padding: 3.375rem 0; background: #FFFDF5; position: relative; } .logos__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 5.125rem; } @media (max-width: 650px) { .logos__bar { gap: 3.25rem; } } .logos__bar picture { filter: grayscale(1) brightness(0); } .logos__bar picture img { width: 10rem; height: 3.875rem; -o-object-fit: contain; object-fit: contain; } @media (max-width: 650px) { .logos__bar picture img { width: 7.5rem; height: 3.625rem; } } .partners { position: relative; color: #201B25; padding: 8.75rem 0 12.5rem; background: linear-gradient(180deg, #FFECFB 0%, #FFFDF5 100%); } @media (max-width: 650px) { .partners { padding: 4rem 0; } } .partners__header { max-width: 56.5625rem; margin: 0 0 8.75rem; grid-column: 1/-1; } @media (max-width: 650px) { .partners__header { margin: 0 0 4rem; } } .partners__tagline { display: block; margin: 0 0 2.25rem; } .partners__entries { grid-column: 2/-2; display: grid; gap: 0; grid-template-columns: repeat(2, 1fr); gap: 18.75rem; } @media (max-width: 1024px) { .partners__entries { gap: 4rem; grid-column: 1/-1; } } .partners__entry { display: flex; align-items: start; flex-direction: column; } @media (max-width: 650px) { .partners__entry { grid-column: 1/-1; } } .partners__logo { width: 21.875rem; height: 5.625rem; -o-object-fit: contain; object-fit: contain; } @media (max-width: 1024px) { .partners__logo { width: 16.25rem; height: 3.125rem; } } @media (max-width: 650px) { .partners__logo { width: 12.5rem; height: 2.875rem; } } .partners__text { margin: 1.625rem 0 auto; } .partners__button { margin: 3.125rem 0 0; } .policy { padding: 11.25rem 0 2.25rem; } @media (max-width: 650px) { .policy { padding: 8.75rem 0 2.25rem; } } .policy__heading, .policy__content { grid-column: 3/-3; } @media (max-width: 1024px) { .policy__heading, .policy__content { grid-column: 2/-2; } } @media (max-width: 650px) { .policy__heading, .policy__content { grid-column: 1/-1; } } .policy__heading { color: #490AB2; margin: 0 0 4rem; } .process { position: relative; color: #201B25; } .process__pin { margin: -1px 0 0; height: 100vh; padding: 6.25rem 0; background: linear-gradient(180deg, #FFBAF0 0%, #FFFDF5 100%); } @media (max-width: 1024px) { .process__pin { height: auto; } } .process__pin:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; background: #070707; mix-blend-mode: soft-light; -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0), black); mask-image: linear-gradient(to top, rgba(0, 0, 0, 0), black); } .process .container { height: 100%; display: flex; flex-direction: column; justify-content: space-between; position: relative; z-index: 2; } .process__header { max-width: 62.5rem; } @media (max-width: 1024px) { .process__header { margin: 0 0 4rem; max-width: 45.3125rem; } } .process__tagline { display: block; margin: 0 0 2.25rem; } .process__list { display: grid; grid-template-columns: repeat(auto-fit, 1fr); grid-column: 1/-1; } @media (max-width: 1024px) { .process__list { display: block; } } .process__item { background: #FFFDF5; padding: 0.75rem 0.75rem 3.5rem; } @media (max-width: 1024px) { .process__item { margin: 0 0 1rem; padding: 1.5rem; display: grid; gap: 0; grid-template-columns: repeat(2, 1fr); } } @media (max-width: 650px) { .process__item { display: block; } } .process__item:nth-child(1) { grid-row: 1; grid-column: 1; } .process__item:nth-child(2) { grid-row: 2; grid-column: 2; } .process__item:nth-child(3) { grid-row: 3; grid-column: 3; } .process__item:nth-child(4) { grid-row: 4; grid-column: 4; } .process__item:nth-child(5) { grid-row: 5; grid-column: 5; } .process__item:nth-child(6) { grid-row: 6; grid-column: 6; } .process__item-text { grid-column: 2; grid-row: 1/span 3; } @media (min-width: 1025px) { .process__item-text { display: none; } } @media (max-width: 650px) { .process__item-text { margin: 1.5rem 0 0; } } .process__count { display: block; color: #490AB2; margin: 0 0 0.375rem; opacity: 0.5; } @media (max-width: 1024px) { .process__count { grid-row: 1; grid-column: 1; } } .process__title { color: #490AB2; position: relative; } @media (max-width: 1024px) { .process__title { grid-row: 2; grid-column: 1; } } .process__title:before { content: "↳"; display: inline-block; margin: 0 0.375rem 0 0; } .process__content { grid-column: 1/-1; display: grid; gap: 0; grid-template-columns: repeat(3, 1fr); } @media (max-width: 1024px) { .process__content-title { display: none; } } .process__text { display: grid; } @media (max-width: 1024px) { .process__text { display: none; } } .process__text p { grid-row: 1; grid-column: 1; } .process__button-holder { text-align: right; } @media (max-width: 1024px) { .process__button-holder { grid-column: 1/-1; margin: 2rem 0 0; text-align: center; } } .process .noise-fx { -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0), black); mask-image: linear-gradient(to top, rgba(0, 0, 0, 0), black); } .process[data-theme=light] .process__pin { background: #FFFDF5; } .process[data-theme=light] .process__pin:after { display: none; } .process[data-theme=light] .process__item { background: #490AB2; } .process[data-theme=light] .process__count, .process[data-theme=light] .process__title, .process[data-theme=light] .process__item-text { color: #FFFDF5; } .process[data-theme=light] .noise-fx { display: none; } .related { padding: 3.125rem 0; } .related__entries { grid-column: 2/-2; } @media (max-width: 1024px) { .related__entries { grid-column: 1/-1; } } @media (min-width: 1025px) { .related__entries .swiper-wrapper { display: grid; gap: 0; grid-template-columns: repeat(3, 1fr); gap: 4.75rem; } } @media (min-width: 1025px) { .related__entries .swiper-slide { width: auto !important; } } @media (max-width: 1024px) { .related__entries .swiper-slide { opacity: 0.5; transition: opacity 0.3s; } .related__entries .swiper-slide.swiper-slide-next, .related__entries .swiper-slide.swiper-slide-active { opacity: 1; } } @media (max-width: 650px) { .related__entries .swiper-slide.swiper-slide-next { opacity: 0.5; } } .related__entries .card-news__image { aspect-ratio: 456/320 !important; } .services { color: #FFFDF5; background: linear-gradient(180deg, #490AB2 0%, #FFBAF0 100%); padding: 8.75rem 0; position: relative; } @media (max-width: 650px) { .services { padding: 4rem 0; } } .services:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; background: #070707; mix-blend-mode: soft-light; } .services .container { position: relative; z-index: 2; } .services__tagline { grid-column: 1/-1; margin: 0 0 2.25rem; } .services__heading { grid-column: 1/span 6; } @media (max-width: 1024px) { .services__heading { grid-column: 1/span 8; } } @media (max-width: 650px) { .services__heading { grid-column: 1/-1; margin: 0 0 2.5rem; } } .services__button-wrap { grid-column: 7/-1; text-align: right; } @media (max-width: 1024px) { .services__button-wrap { grid-column: 9/-1; } } @media (max-width: 650px) { .services__button-wrap { grid-column: 1/-1; text-align: left; } } .services__button:before { filter: brightness(100); } .services__list { grid-column: 1/-1; gap: 4rem 0; margin: 8.75rem 0 0; } @media (max-width: 650px) { .services__list { margin: 5rem 0; } } .services__item { display: flex; flex-direction: column; justify-content: space-between; grid-column: span 2; border-left: 1px solid; padding: 0 6.25rem 0 0.625rem; } @media (max-width: 1024px) { .services__item { grid-column: span 4; } } @media (max-width: 650px) { .services__item { grid-column: span 6; padding: 0 2rem 0 0.625rem; } } .services__item img { width: 2.875rem; height: 2.875rem; -o-object-fit: contain; object-fit: contain; margin: 0 0 6.25rem; } .testimonial { color: #201B25; } .testimonial .container { border-top: 1px solid; padding: 3rem 0 15rem; } @media (max-width: 650px) { .testimonial .container { padding: 3rem 0 4rem; } } .testimonial__author { grid-column: span 3; padding: 0 0 0 1.375rem; } @media (max-width: 650px) { .testimonial__author { order: 2; grid-column: 1/-1; margin: 2.5rem 0 0; } } .testimonial__author span { display: block; position: relative; } .testimonial__author span:before { content: "↳"; display: inline-block; position: absolute; top: 0; left: -1.375rem; } .testimonial__quote { grid-column: 5/-2; color: #490AB2; } @media (max-width: 650px) { .testimonial__quote { grid-column: 1/-1; } } .transition { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; z-index: 998; } .transition__inner { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; display: grid; grid-template-columns: repeat(6, 2fr) repeat(12, 1fr); grid-template-rows: repeat(5, 1fr); padding: 0 3rem; } @media (max-width: 650px) { .transition__inner { position: absolute; top: 50%; left: 50%; translate: -50% -50%; width: 400vw; } } .transition .shape { position: relative; will-change: transform; opacity: 0; background: currentColor; margin: -2px; } .transition .shape.shape-19, .transition .shape.shape-20, .transition .shape.shape-21, .transition .shape.shape-22, .transition .shape.shape-23, .transition .shape.shape-24, .transition .shape.shape-49, .transition .shape.shape-50, .transition .shape.shape-51, .transition .shape.shape-52, .transition .shape.shape-53, .transition .shape.shape-54 { grid-row: span 2; } .transition .shape-left { position: absolute; top: 0; left: 0; width: 3rem; height: 100%; } .transition .shape-right { position: absolute; top: 0; right: 0; width: 3rem; height: 100%; } .usps { position: relative; color: #201B25; background: #FFFDF5; padding: 8.75rem 0 11.5rem; z-index: 2; } @media (max-width: 650px) { .usps { padding: 4rem 0; } } .usps__header { color: #490AB2; max-width: 56.5625rem; margin: 0 0 8.75rem; } .usps__tagline { display: block; margin: 0 0 2.25rem; } .usps__list { display: grid; gap: 0; grid-template-columns: repeat(4, 1fr); gap: 4rem 0; } .usps__item { counter-increment: count; border-left: 1px solid #201B25; padding: 0 3.125rem 0 0.625rem; } @media (max-width: 1024px) { .usps__item { grid-column: span 2; } .usps__item br { display: none; } } @media (max-width: 650px) { .usps__item { grid-column: 1/-1; padding: 0 0 0 0.625rem; } } .usps__item:before { display: block; content: counters(count, "", decimal-leading-zero); margin: 0 0 3.25rem; font-size: 1.5rem; letter-spacing: -0.03em; line-height: 1.2; } @media (max-width: 650px) { .usps__item:before { font-size: 1.25rem; } } .usps__title { margin: 0 0 7.5rem; height: 3.75rem; } @media (max-width: 650px) { .usps__title { height: auto; margin: 0 0 2rem; } } .video { padding: 4rem 0 7.5rem; position: relative; z-index: 2; } .video iframe { width: 100%; height: auto; aspect-ratio: 16/9; }