@font-face {
font-family: 'PP Neue Montreal';
src: url('../fonts/ppneuemontreal-book.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'PP Neue Montreal';
src: url('../fonts/ppneuemontreal-italic.woff2') format('woff2');
font-weight: 400;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'PP Neue Montreal';
src: url('../fonts/ppneuemontreal-medium.woff2') format('woff2');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'PP Neue Montreal';
src: url('../fonts/ppneuemontreal-bold.woff2') format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Bitblast Sans';
src: url('../fonts/bitblastsans-regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'PP Neue Montreal repli';
src: local('Arial'), local('ArialMT');
font-weight: 400;
font-style: normal;
size-adjust: 92.97%;
ascent-override: 103.04%;
descent-override: 26.03%;
line-gap-override: 0%;
}
@font-face {
font-family: 'PP Neue Montreal repli';
src: local('Arial'), local('ArialMT');
font-weight: 500;
font-style: normal;
size-adjust: 96.01%;
ascent-override: 99.78%;
descent-override: 25.21%;
line-gap-override: 0%;
}
@font-face {
font-family: 'PP Neue Montreal repli';
src: local('Arial Bold'), local('Arial-BoldMT');
font-weight: 700;
font-style: normal;
size-adjust: 94.67%;
ascent-override: 101.19%;
descent-override: 25.56%;
line-gap-override: 0%;
}
@font-face {
font-family: 'Bitblast Sans repli';
src: local('Arial'), local('ArialMT');
font-weight: 400;
font-style: normal;
size-adjust: 77.50%;
ascent-override: 154.84%;
descent-override: 38.71%;
line-gap-override: 64.52%;
}
:root {
--color-primary: #4122ED;
--color-primary-on-dark: #6773F9;
--color-coral: #FD9CA8;
--color-error: #C62828;
--color-black: #131415;
--color-white: #FFFFFF;
--color-gray-50: #F7F6F5;
--color-gray-100: #F1F0EE;
--color-gray-200: #E4E3E0;
--color-gray-300: #C9C7C4;
--color-gray-400: #A3A09C;
--color-gray-500: #7D7974;
--color-gray-600: #5C5955;
--color-gray-700: #3D3B38;
--color-gray-800: #242322;
--font-body: 'PP Neue Montreal', 'PP Neue Montreal repli', -apple-system, BlinkMacSystemFont, sans-serif;
--font-display: 'Bitblast Sans', 'Bitblast Sans repli', sans-serif;
--text-xs: 0.75rem;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-md: 1.125rem;
--text-lg: 1.25rem;
--text-xl: 1.5rem;
--text-2xl: 2rem;
--text-3xl: 2.5rem;
--text-4xl: 3.5rem;
--text-5xl: 4.5rem;
--text-6xl: 6rem;
--font-weight-book: 400;
--font-weight-medium: 500;
--font-weight-bold: 700;
--leading-tight: 1.1;
--leading-snug: 1.25;
--leading-normal: 1.5;
--leading-relaxed: 1.75;
--space-xs: 0.5rem;
--space-sm: 1rem;
--space-md: 1.5rem;
--space-lg: 2rem;
--space-xl: 3rem;
--space-2xl: 4rem;
--space-3xl: 6rem;
--space-4xl: 8rem;
--container-max: 1440px;
--container-padding: var(--space-sm);
--vp-unit: 1vh;
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 16px;
--radius-xl: 24px;
--radius-full: 9999px;
--border-thin: 1px solid var(--color-gray-200);
--border-dark: 1px solid var(--color-black);
--duration-fast: 150ms;
--duration-base: 300ms;
--duration-slow: 500ms;
--easing-default: cubic-bezier(0.4, 0, 0.2, 1);
--easing-in: cubic-bezier(0.4, 0, 1, 1);
--easing-out: cubic-bezier(0, 0, 0.2, 1);
--header-padding-x: 48px;
--header-padding-y: 48px;
--header-height: 44px;
--header-z-index: 150;
--glass-bg: rgba(255, 255, 255, 0.33);
--glass-border: rgba(255, 255, 255, 0.33);
--glass-blur: blur(4px);
--glass-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
--pill-image-bg: color-mix(in srgb, var(--color-black) 60%, transparent);
--pill-image-border: color-mix(in srgb, var(--color-white) 20%, transparent);
--shadow-card: 0 4px 16px color-mix(in srgb, var(--color-black) 10%, transparent);
}
@media (hover: none) {
:root {
--vp-unit: 1svh;
}
}
.reveal-letter {
transition: opacity 150ms linear;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
* {
margin: 0;
padding: 0;
}
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: calc(var(--header-height) + 32px + var(--space-sm));
}
body {
min-height: 100vh;
font-family: var(--font-body);
font-size: var(--text-base);
font-weight: var(--font-weight-book);
line-height: var(--leading-normal);
color: var(--color-black);
background-color: var(--color-white);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img,
picture,
video,
svg {
display: block;
max-width: 100%;
height: auto;
}
a {
color: inherit;
text-decoration: none;
}
button {
font: inherit;
color: inherit;
background: none;
border: none;
cursor: pointer;
}
ul,
ol {
list-style: none;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-display);
font-weight: var(--font-weight-book);
line-height: var(--leading-tight);
text-transform: uppercase;
color: var(--color-black);
}
.u-no-uppercase {
text-transform: none;
}
h1 {
font-size: var(--text-5xl);
}
h2 {
font-size: var(--text-4xl);
}
h3 {
font-size: var(--text-3xl);
}
h4 {
font-size: var(--text-2xl);
}
h5 {
font-size: var(--text-xl);
}
h6 {
font-size: var(--text-lg);
}
p {
font-size: var(--text-md);
line-height: var(--leading-normal);
}
.container {
width: 100%;
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--container-padding);
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
html.lenis,
html.lenis body {
height: auto;
}
html.lenis {
scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
overscroll-behavior: contain;
}
.lenis.lenis-stopped {
overflow: hidden;
}