@font-face {
font-family: 'Playfair Display';
font-style: normal;
font-weight: 400 900;
font-display: swap;
src: url('/assets/fonts/playfair-latin-var.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Playfair Display';
font-style: italic;
font-weight: 400 900;
font-display: swap;
src: url('/assets/fonts/playfair-latin-var-italic.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('/assets/fonts/montserrat-latin-var.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
color-scheme: dark;
--c-black: #08080a;
--c-bg: #0b0b0d;
--c-surface-1: #111114;
--c-surface-2: #16161a;
--c-surface-3: #1d1d22;
--c-line: rgb(255 255 255 / 0.08);
--c-line-strong: rgb(255 255 255 / 0.16);
--c-text: #f2f2f3;
--c-text-muted: #b4b4bb;
--c-text-faint: #85858d;
--c-red: #d4202a;
--c-red-hover: #e2333c;
--c-red-text: #ea4a52;
--c-red-deep: #8f141b;
--c-red-soft: rgb(212 32 42 / 0.14);
--c-red-line: rgb(212 32 42 / 0.55);
--c-red-glow: rgb(212 32 42 / 0.28);
--c-badge-lead: #b51d25;
--c-badge-admin: #1f4fa3;
--c-badge-staff: #1f7a3d;
--font-display: 'Playfair Display', 'Times New Roman', Georgia, serif;
--font-sans: 'Montserrat', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
--fs-xs: 0.75rem;
--fs-sm: 0.875rem;
--fs-base: 1rem;
--fs-md: 1.125rem;
--fs-lg: 1.375rem;
--fs-xl: clamp(1.75rem, 1.3rem + 1.6vw, 2.375rem);
--fs-hero-tagline: clamp(0.95rem, 0.8rem + 0.7vw, 1.375rem);
--fs-hero: clamp(3.1rem, 1rem + 5.2vw, 7rem);
--tracking-label: 0.14em;
--tracking-eyebrow: 0.42em;
--tracking-tagline: 0.34em;
--sp-1: 0.25rem;
--sp-2: 0.5rem;
--sp-3: 0.75rem;
--sp-4: 1rem;
--sp-5: 1.5rem;
--sp-6: 2rem;
--sp-7: 3rem;
--sp-8: 4rem;
--sp-9: 6rem;
--section-y: clamp(4rem, 2.5rem + 5vw, 7rem);
--gutter: clamp(1rem, 0.4rem + 2.6vw, 3.5rem);
--container: 1440px;
--header-h: 84px;
--radius-sm: 3px;
--radius: 6px;
--shadow-card: 0 18px 40px -22px rgb(0 0 0 / 0.9);
--shadow-lift: 0 26px 50px -24px rgb(0 0 0 / 0.95);
--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
--dur-fast: 160ms;
--dur: 280ms;
--dur-slow: 700ms;
}
@media (max-width: 1100px) {
:root {
--header-h: 64px;
}
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: calc(var(--header-h) + 16px);
background: var(--c-bg);
overflow-x: clip;
}
body {
margin: 0;
min-height: 100vh;
background: var(--c-bg);
color: var(--c-text);
font-family: var(--font-sans);
font-size: var(--fs-base);
line-height: 1.6;
font-weight: 400;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: clip;
}
img,
svg {
display: block;
max-width: 100%;
}
img {
height: auto;
}
h1,
h2,
h3,
h4,
p,
ul,
ol,
figure {
margin: 0;
}
ul[role='list'],
ol[role='list'] {
list-style: none;
padding: 0;
}
a {
color: inherit;
text-decoration: none;
}
button {
font: inherit;
color: inherit;
}
:focus-visible {
outline: 2px solid var(--c-red-hover);
outline-offset: 3px;
border-radius: var(--radius-sm);
}
::selection {
background: var(--c-red);
color: #fff;
}
.visually-hidden {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.skip-link {
position: fixed;
top: var(--sp-3);
left: var(--sp-3);
z-index: 100;
padding: var(--sp-3) var(--sp-4);
background: var(--c-red);
color: #fff;
font-weight: 600;
font-size: var(--fs-sm);
border-radius: var(--radius-sm);
transform: translateY(-200%);
transition: transform var(--dur-fast) var(--ease);
}
.skip-link:focus {
transform: none;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
.container {
width: 100%;
max-width: var(--container);
margin-inline: auto;
padding-inline: var(--gutter);
}
.section {
position: relative;
padding-block: var(--section-y);
}
.section--tight {
padding-block: clamp(3rem, 2rem + 3vw, 4.5rem);
}
.section--alt {
background:
linear-gradient(180deg, rgb(255 255 255 / 0.018), rgb(255 255 255 / 0)),
var(--c-black);
border-block: 1px solid var(--c-line);
}
main:focus {
outline: none;
}
.site-header {
position: fixed;
inset: 0 0 auto;
z-index: 50;
height: var(--header-h);
background: linear-gradient(180deg, rgb(6 6 8 / 0.92), rgb(6 6 8 / 0.78));
border-bottom: 1px solid transparent;
transition:
background-color var(--dur) var(--ease),
border-color var(--dur) var(--ease),
box-shadow var(--dur) var(--ease);
}
.site-header.is-scrolled {
background: rgb(9 9 11 / 0.97);
border-bottom-color: var(--c-line);
box-shadow: 0 10px 30px -20px rgb(0 0 0 / 0.9);
}
.site-header__inner {
height: 100%;
display: flex;
align-items: center;
gap: var(--sp-6);
}
.brand {
display: inline-flex;
flex-direction: column;
align-items: center;
line-height: 1;
flex-shrink: 0;
color: var(--c-text);
}
.brand--logo {
display: block;
line-height: 0;
}
.brand__logo {
display: block;
width: auto;
height: 4.4rem;
max-width: 100%;
object-fit: contain;
}
@media (max-width: 1100px) {
.brand__logo {
height: 3.15rem;
}
}
@media (max-width: 380px) {
.brand__logo {
height: 2.8rem;
}
}
.site-footer .brand__logo {
height: 4.5rem;
}
.brand__name {
font-family: var(--font-display);
font-weight: 700;
font-size: 2.15rem;
letter-spacing: 0.04em;
text-transform: uppercase;
background: linear-gradient(180deg, #ffffff 0%, #e9e9ec 55%, #b9b9c0 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.brand__sub {
display: flex;
align-items: center;
gap: 0.6rem;
margin-top: 0.3rem;
font-family: var(--font-sans);
font-size: 0.62rem;
font-weight: 600;
letter-spacing: 0.55em;
text-transform: uppercase;
color: var(--c-text-muted);
padding-left: 0.55em;
}
.brand__sub::before,
.brand__sub::after {
content: '';
width: 2.1rem;
height: 1px;
background: var(--c-red);
}
.site-nav {
margin-inline: auto;
}
.site-nav__list {
display: flex;
align-items: center;
gap: clamp(1rem, 0.2rem + 1.6vw, 2.4rem);
}
.site-nav__link {
position: relative;
display: inline-block;
padding-block: 0.6rem;
font-size: 0.78rem;
font-weight: 600;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: rgb(242 242 243 / 0.82);
transition: color var(--dur-fast) var(--ease);
}
.site-nav__link::after {
content: '';
position: absolute;
left: 50%;
bottom: 0;
width: 2.2rem;
height: 2px;
background: var(--c-red);
transform: translateX(-50%) scaleX(0);
transition: transform var(--dur) var(--ease);
}
.site-nav__link:hover,
.site-nav__link[aria-current='true'] {
color: #fff;
}
.site-nav__link[aria-current='true']::after {
transform: translateX(-50%) scaleX(1);
}
.site-header .site-nav__cta {
display: none;
}
.nav-toggle {
display: none;
}
@media (max-width: 1100px) {
.site-header__inner {
gap: var(--sp-4);
}
.brand__name {
font-size: 1.5rem;
}
.site-header__cta {
margin-left: auto;
}
.nav-toggle {
display: inline-grid;
place-items: center;
width: 44px;
height: 44px;
order: 3;
background: transparent;
border: 1px solid var(--c-line-strong);
border-radius: var(--radius-sm);
cursor: pointer;
flex-shrink: 0;
}
.nav-toggle__close,
.nav-open .nav-toggle__open {
display: none;
}
.nav-open .nav-toggle__close {
display: block;
}
.site-nav {
position: fixed;
inset: var(--header-h) 0 0;
margin: 0;
padding: var(--sp-6) var(--gutter) var(--sp-7);
background: var(--c-black);
border-top: 1px solid var(--c-line);
overflow-y: auto;
display: none;
}
.nav-open .site-nav {
display: block;
animation: nav-in var(--dur) var(--ease);
}
.nav-open body {
overflow: hidden;
}
.site-nav__list {
flex-direction: column;
align-items: stretch;
gap: 0;
}
.site-nav__link {
display: block;
padding: 1.05rem 0;
font-size: 0.95rem;
border-bottom: 1px solid var(--c-line);
}
.site-nav__link::after {
left: 0;
bottom: -1px;
transform: scaleX(0);
transform-origin: left;
}
.site-nav__link[aria-current='true']::after {
transform: scaleX(1);
}
.site-header .site-nav__cta {
display: inline-flex;
margin-top: var(--sp-6);
}
}
@media (max-width: 600px) {
.site-header .site-header__cta {
display: none;
}
.nav-toggle {
margin-left: auto;
}
}
@keyframes nav-in {
from {
opacity: 0;
transform: translateY(-8px);
}
}
.site-footer {
background: var(--c-black);
border-top: 1px solid var(--c-line);
color: var(--c-text-muted);
font-size: var(--fs-sm);
}
.site-footer__inner {
display: grid;
grid-template-columns: 1.2fr 2fr 1fr;
gap: var(--sp-7);
padding-block: var(--sp-8) var(--sp-7);
}
.brand--footer {
align-items: flex-start;
}
.brand--footer .brand__sub {
padding-left: 0;
}
.site-footer__claim {
margin-top: var(--sp-4);
color: var(--c-text-faint);
}
.site-footer__nav ul {
display: grid;
grid-template-columns: repeat(2, minmax(0, max-content));
column-gap: var(--sp-8);
row-gap: var(--sp-3);
padding: 0;
list-style: none;
}
.site-footer__meta ul {
display: grid;
gap: var(--sp-3);
padding: 0;
list-style: none;
}
.site-footer a {
transition: color var(--dur-fast) var(--ease);
}
.site-footer a:hover {
color: #fff;
}
.site-footer__note {
margin-top: var(--sp-4);
font-size: var(--fs-xs);
color: var(--c-text-faint);
max-width: 24em;
}
.site-footer__base {
position: relative;
padding-block: var(--sp-5);
font-size: var(--fs-xs);
color: var(--c-text-faint);
}
.site-footer__base::before {
content: "";
position: absolute;
top: 0;
inset-inline: var(--gutter);
border-top: 1px solid var(--c-line);
}
@media (max-width: 900px) {
.site-footer__inner {
grid-template-columns: 1fr 1fr;
}
.site-footer__brand {
grid-column: 1 / -1;
}
}
@media (max-width: 480px) {
.site-footer__inner {
grid-template-columns: 1fr;
gap: var(--sp-6);
}
.site-footer__nav ul {
column-gap: var(--sp-6);
}
}
.icon {
width: 1.5rem;
height: 1.5rem;
flex-shrink: 0;
}
.icon--sm {
width: 1.05rem;
height: 1.05rem;
}
.eyebrow {
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--c-red-text);
}
.eyebrow--line {
display: flex;
align-items: center;
gap: 1rem;
font-size: clamp(0.8rem, 0.7rem + 0.4vw, 1rem);
letter-spacing: var(--tracking-eyebrow);
}
.eyebrow--line::after {
content: '';
width: clamp(4rem, 2rem + 10vw, 14rem);
height: 1px;
background: linear-gradient(90deg, var(--c-red), rgb(212 32 42 / 0));
}
.section-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--sp-5);
margin-bottom: clamp(1.75rem, 1rem + 2vw, 2.75rem);
}
.section-head__text {
flex: 1 1 auto;
display: grid;
gap: var(--sp-3);
max-width: 72rem;
}
.section-title {
display: flex;
align-items: center;
gap: 1.25rem;
font-family: var(--font-display);
font-weight: 700;
font-size: var(--fs-xl);
line-height: 1.15;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--c-text);
}
.section-title::after {
content: '';
flex: 1 0 3rem;
max-width: 16rem;
height: 1px;
background: linear-gradient(90deg, var(--c-red-line), rgb(212 32 42 / 0));
}
@media (max-width: 600px) {
.section-title {
display: block;
}
.section-title::after {
display: block;
width: 3.5rem;
margin-top: 0.85rem;
}
}
.section-intro {
color: var(--c-text-muted);
max-width: 40rem;
}
.subhead {
margin: clamp(2.5rem, 2rem + 2vw, 3.5rem) 0 var(--sp-5);
font-size: 0.85rem;
font-weight: 700;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--c-text);
}
.tag {
display: inline-block;
padding: 0.22rem 0.6rem;
font-size: 0.66rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--c-text-muted);
border: 1px solid var(--c-line-strong);
border-radius: 999px;
white-space: nowrap;
}
.link-arrow {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--c-text);
transition: color var(--dur-fast) var(--ease);
}
.link-arrow .icon {
color: var(--c-red);
transition: transform var(--dur) var(--ease);
}
.link-arrow:hover {
color: #fff;
}
.link-arrow:hover .icon {
transform: translateX(3px);
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
min-height: 3.25rem;
padding: 0.85rem 1.6rem;
font-family: var(--font-sans);
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 0.12em;
line-height: 1.2;
text-transform: uppercase;
white-space: nowrap;
border: 1px solid transparent;
border-radius: var(--radius-sm);
cursor: pointer;
transition:
background-color var(--dur-fast) var(--ease),
border-color var(--dur-fast) var(--ease),
color var(--dur-fast) var(--ease),
transform var(--dur-fast) var(--ease),
box-shadow var(--dur) var(--ease);
}
.btn--sm {
min-height: 2.5rem;
padding: 0.55rem 1.1rem;
font-size: 0.72rem;
}
.btn--primary {
background: var(--c-red);
color: #fff;
box-shadow: 0 12px 30px -16px var(--c-red-glow);
}
.btn--primary:hover {
background: var(--c-red-hover);
box-shadow: 0 16px 34px -14px rgb(212 32 42 / 0.45);
transform: translateY(-1px);
}
.btn--ghost {
background: rgb(0 0 0 / 0.28);
color: #fff;
border-color: rgb(255 255 255 / 0.55);
}
.btn--ghost:hover {
background: rgb(255 255 255 / 0.07);
border-color: #fff;
transform: translateY(-1px);
}
.btn--outline {
background: transparent;
color: var(--c-red-text);
border-color: var(--c-red);
}
.btn--outline:hover {
background: var(--c-red);
color: #fff;
}
.site-header__cta {
min-height: 2.75rem;
padding-inline: 1.5rem;
font-size: 0.78rem;
}
.hero {
position: relative;
isolation: isolate;
overflow: hidden;
min-height: clamp(560px, 66svh, 720px);
display: flex;
align-items: center;
background: var(--c-black);
}
.hero__media {
position: absolute;
inset: -48px;
z-index: -3;
background: var(--c-black);
}
.hero__image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 62% 50%;
filter: blur(7px) saturate(1.05) brightness(1);
transform: scale(1.04);
}
.hero__shade {
position: absolute;
inset: 0;
z-index: -2;
background:
linear-gradient(180deg, rgb(6 6 8 / 0.7) 0%, rgb(6 6 8 / 0) 22%, rgb(6 6 8 / 0) 68%, var(--c-bg) 100%),
linear-gradient(90deg, rgb(6 6 8 / 0.9) 0%, rgb(6 6 8 / 0.72) 30%, rgb(6 6 8 / 0.22) 60%, rgb(6 6 8 / 0.08) 100%);
}
.hero__glow {
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background:
radial-gradient(42rem 22rem at 86% 88%, rgb(212 32 42 / 0.16), transparent 70%),
radial-gradient(28rem 16rem at 4% 100%, rgb(212 32 42 / 0.1), transparent 70%);
}
.hero__content {
position: relative;
padding-top: calc(var(--header-h) + clamp(2rem, 0.5rem + 4vh, 3.5rem));
padding-bottom: clamp(5.5rem, 4rem + 4vh, 7rem);
}
.hero__content > * {
max-width: 44rem;
}
.hero__title {
display: flex;
flex-direction: column;
margin-top: clamp(1rem, 0.6rem + 1vw, 1.5rem);
font-family: var(--font-display);
font-size: var(--fs-hero);
line-height: 0.92;
text-transform: uppercase;
}
.hero__title-main {
font-weight: 700;
letter-spacing: -0.012em;
background: linear-gradient(180deg, #ffffff 0%, #f1f1f3 40%, #b7b7be 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
filter: drop-shadow(0 6px 24px rgb(0 0 0 / 0.55));
}
.hero__title-accent {
margin-top: 0.05em;
font-style: italic;
font-weight: 800;
letter-spacing: -0.01em;
color: var(--c-red);
filter: drop-shadow(0 6px 24px rgb(0 0 0 / 0.6));
}
.hero__tagline {
margin-top: clamp(1.25rem, 0.8rem + 1.2vw, 2rem);
font-size: var(--fs-hero-tagline);
font-weight: 500;
line-height: 1.55;
letter-spacing: var(--tracking-tagline);
text-transform: uppercase;
color: #ececee;
}
.hero__lead {
margin-top: var(--sp-4);
font-size: clamp(1rem, 0.92rem + 0.35vw, 1.15rem);
color: #cfcfd4;
max-width: 34rem !important;
}
.hero__actions {
display: flex;
flex-wrap: wrap;
gap: var(--sp-4);
margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
}
.hero__content > * {
animation: rise var(--dur-slow) var(--ease) both;
}
.hero__content > :nth-child(2) {
animation-delay: 80ms;
}
.hero__content > :nth-child(3) {
animation-delay: 160ms;
}
.hero__content > :nth-child(4),
.hero__content > :nth-child(5) {
animation-delay: 240ms;
}
@keyframes rise {
from {
opacity: 0;
transform: translateY(12px);
}
}
@media (max-width: 900px) {
.hero__image {
object-position: 70% 50%;
}
.hero__shade {
background:
linear-gradient(180deg, rgb(6 6 8 / 0.75) 0%, rgb(6 6 8 / 0.35) 30%, rgb(6 6 8 / 0.55) 70%, var(--c-bg) 100%),
linear-gradient(90deg, rgb(6 6 8 / 0.82) 0%, rgb(6 6 8 / 0.5) 100%);
}
}
@media (max-width: 600px) {
.hero {
min-height: auto;
}
.hero__image {
filter: blur(5px) saturate(1.05) brightness(0.95);
}
.hero__content {
padding-bottom: 5.5rem;
}
.hero__tagline {
letter-spacing: 0.2em;
}
.hero__actions .btn {
flex: 1 1 100%;
min-width: 0;
padding-inline: 1.1rem;
letter-spacing: 0.08em;
white-space: normal;
text-align: center;
}
.hero__actions .btn > .icon:last-child {
display: none;
}
}
.stats {
position: relative;
z-index: 2;
margin-top: -4.25rem;
}
.stats__list {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
background: rgb(10 10 12 / 0.86);
border-block: 1px solid var(--c-line);
}
.stats__item {
display: flex;
align-items: center;
gap: var(--sp-4);
padding: 1.35rem clamp(1rem, 0.4rem + 1.4vw, 2rem);
}
.stats__item + .stats__item {
border-left: 1px solid var(--c-line-strong);
}
.stats__icon {
width: 2rem;
height: 2rem;
color: var(--c-red);
}
.stats__text {
display: grid;
gap: 0.15rem;
min-width: 0;
}
.stats__value {
font-size: 1rem;
font-weight: 700;
line-height: 1.25;
color: var(--c-text);
}
.stats__label {
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--c-text-muted);
}
@media (max-width: 1100px) {
.stats__list {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.stats__item:nth-child(n + 4) {
border-top: 1px solid var(--c-line);
}
.stats__item:nth-child(4) {
border-left: 0;
}
}
@media (max-width: 600px) {
.stats {
margin-top: -2.5rem;
}
.stats__list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.stats__item {
padding: 1rem 0.85rem;
gap: var(--sp-3);
}
.stats__item:nth-child(n) {
border-left: 0;
border-top: 1px solid var(--c-line);
}
.stats__item:nth-child(-n + 2) {
border-top: 0;
}
.stats__item:nth-child(even) {
border-left: 1px solid var(--c-line);
}
.stats__item:last-child {
grid-column: 1 / -1;
border-left: 0;
}
.stats__icon {
width: 1.6rem;
height: 1.6rem;
}
}
.features {
padding-top: clamp(1.75rem, 1rem + 1.5vw, 2.5rem);
}
.features__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(1rem, 0.6rem + 0.8vw, 1.5rem);
}
.feature-card {
position: relative;
}
.feature-card__link {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
background: var(--c-surface-1);
border: 1px solid var(--c-line);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-card);
transition:
transform var(--dur) var(--ease),
border-color var(--dur) var(--ease),
box-shadow var(--dur) var(--ease);
}
.feature-card__link::after {
content: '';
position: absolute;
inset: auto 0 0;
height: 2px;
background: linear-gradient(90deg, rgb(212 32 42 / 0), var(--c-red-line) 30%, var(--c-red-line) 70%, rgb(212 32 42 / 0));
opacity: 0.7;
transition: opacity var(--dur) var(--ease);
}
.feature-card__media {
position: relative;
display: block;
aspect-ratio: 2 / 1.05;
overflow: hidden;
background: var(--c-surface-2);
}
.feature-card__media::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgb(17 17 20 / 0) 35%, var(--c-surface-1) 100%);
}
.feature-card__media--empty {
display: grid;
place-items: center;
background:
radial-gradient(70% 90% at 80% 100%, rgb(212 32 42 / 0.16), transparent 70%),
linear-gradient(160deg, var(--c-surface-3), var(--c-surface-1));
}
.feature-card__watermark {
width: 4.5rem;
height: 4.5rem;
color: rgb(255 255 255 / 0.07);
stroke-width: 1;
}
.feature-card__image {
width: 100%;
height: 100%;
object-fit: cover;
filter: brightness(0.8) saturate(1.05);
transition:
transform var(--dur-slow) var(--ease),
filter var(--dur) var(--ease);
}
.feature-card__body {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: start;
gap: var(--sp-4);
padding: 0.25rem 1.35rem 1.4rem;
margin-top: -1.6rem;
position: relative;
}
.feature-card__icon {
width: 2.1rem;
height: 2.1rem;
color: var(--c-red);
}
.feature-card__text {
display: grid;
gap: 0.45rem;
}
.feature-card__title {
font-size: 0.92rem;
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--c-text);
}
.feature-card__desc {
font-size: 0.85rem;
line-height: 1.55;
color: var(--c-text-muted);
}
.feature-card__arrow {
align-self: end;
color: var(--c-text-muted);
transition:
transform var(--dur) var(--ease),
color var(--dur) var(--ease);
}
@media (hover: hover) {
.feature-card__link:hover {
transform: translateY(-4px);
border-color: var(--c-line-strong);
box-shadow: var(--shadow-lift);
}
.feature-card__link:hover::after {
opacity: 1;
}
.feature-card__link:hover .feature-card__image {
transform: scale(1.04);
filter: brightness(0.92) saturate(1.1);
}
.feature-card__link:hover .feature-card__arrow {
color: var(--c-red-text);
transform: translateX(3px);
}
}
@media (max-width: 1100px) {
.features__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 600px) {
.features__grid {
grid-template-columns: 1fr;
}
}
.slider {
position: relative;
}
.slider__track {
display: flex;
gap: 1.25rem;
margin: 0;
padding: 0.25rem 0.1rem 0.5rem;
list-style: none;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-padding-inline: 0.1rem;
scrollbar-width: none;
overscroll-behavior-x: contain;
}
.slider__track::-webkit-scrollbar {
display: none;
}
.slider__btn {
position: absolute;
top: 50%;
z-index: 2;
display: none;
place-items: center;
width: 2.5rem;
height: 2.75rem;
margin-top: -1.375rem;
background: transparent;
border: 0;
color: var(--c-text);
cursor: pointer;
transition:
color var(--dur-fast) var(--ease),
opacity var(--dur-fast) var(--ease);
}
.slider__btn .icon {
width: 1.9rem;
height: 1.9rem;
}
.slider__btn:hover {
color: var(--c-red-text);
}
.slider__btn:disabled {
opacity: 0.25;
cursor: default;
}
.slider__btn--prev {
left: calc(-1 * min(2.75rem, var(--gutter)));
}
.slider__btn--next {
right: calc(-1 * min(2.75rem, var(--gutter)));
}
.js .slider.is-scrollable .slider__btn {
display: grid;
}
@media (max-width: 600px) {
.js .slider.is-scrollable .slider__btn {
display: none;
}
.team-card {
flex-basis: 82%;
}
}
@media (max-width: 1280px) {
.slider__btn--prev {
left: -0.6rem;
}
.slider__btn--next {
right: -0.6rem;
}
.slider__btn {
background: rgb(10 10 12 / 0.85);
border: 1px solid var(--c-line-strong);
border-radius: 50%;
}
.slider__btn .icon {
width: 1.3rem;
height: 1.3rem;
}
}
.team-card {
--ring: var(--c-badge-staff);
position: relative;
flex: 0 0 clamp(16rem, 22vw, 17.25rem);
display: flex;
align-items: center;
gap: 1.1rem;
padding: 1.25rem 1.25rem 1.25rem 1.1rem;
scroll-snap-align: start;
background: linear-gradient(160deg, var(--c-surface-2), var(--c-surface-1));
border: 1px solid var(--c-line);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-card);
transition:
transform var(--dur) var(--ease),
border-color var(--dur) var(--ease);
}
.team-card--lead {
--ring: var(--c-red);
}
.team-card--admin {
--ring: #2f6fd6;
}
.team-card--staff {
--ring: #27a052;
}
@media (hover: hover) {
.team-card:hover {
transform: translateY(-3px);
border-color: var(--c-line-strong);
}
}
.team-card__avatar {
display: grid;
place-items: center;
flex-shrink: 0;
width: 4.75rem;
height: 4.75rem;
overflow: hidden;
border-radius: 50%;
border: 2px solid var(--ring);
box-shadow:
0 0 0 3px rgb(0 0 0 / 0.6),
0 0 18px -6px var(--ring);
background: radial-gradient(circle at 50% 35%, #2a2a30, #121215);
}
.team-card__avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.team-card__silhouette {
width: 2.6rem;
height: 2.6rem;
color: rgb(255 255 255 / 0.32);
}
.team-card__body {
display: grid;
justify-items: start;
gap: 0.45rem;
min-width: 0;
}
.team-card__name {
font-size: 1rem;
font-weight: 700;
color: var(--c-text);
}
.team-card__area {
font-size: 0.78rem;
line-height: 1.45;
color: var(--c-text-muted);
}
.team-card__social {
position: absolute;
top: 0.75rem;
right: 0.75rem;
display: grid;
place-items: center;
width: 1.9rem;
height: 1.9rem;
color: var(--c-text-muted);
background: rgb(255 255 255 / 0.05);
border-radius: var(--radius-sm);
}
.team-card__social:hover {
color: #fff;
}
.team-card--placeholder .team-card__name {
color: var(--c-text-muted);
font-weight: 600;
}
.team-card__flag {
padding: 0.1rem 0.45rem;
font-size: 0.58rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--c-text-faint);
border: 1px dashed rgb(255 255 255 / 0.22);
border-radius: 2px;
}
.badge {
display: inline-block;
padding: 0.2rem 0.6rem;
font-size: 0.7rem;
font-weight: 600;
line-height: 1.3;
color: #fff;
border-radius: 3px;
white-space: nowrap;
}
.badge--lead {
background: var(--c-badge-lead);
}
.badge--admin {
background: var(--c-badge-admin);
}
.badge--staff {
background: var(--c-badge-staff);
}
.about {
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: clamp(2rem, 1rem + 5vw, 6rem);
align-items: start;
}
.about__text p {
color: var(--c-text-muted);
max-width: 38rem;
}
.about__text p + p {
margin-top: var(--sp-4);
}
.about__pillars {
margin: 0;
padding: 0;
list-style: none;
border-top: 1px solid var(--c-line);
}
.pillar {
display: flex;
gap: var(--sp-5);
padding-block: var(--sp-5);
border-bottom: 1px solid var(--c-line);
}
.pillar__icon {
width: 1.9rem;
height: 1.9rem;
color: var(--c-red);
}
.pillar__title {
font-size: 0.9rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.pillar__text {
margin-top: 0.3rem;
font-size: 0.9rem;
color: var(--c-text-muted);
}
@media (max-width: 900px) {
.about {
grid-template-columns: 1fr;
}
}
.factions__grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: clamp(1rem, 0.6rem + 0.8vw, 1.5rem);
margin: 0;
padding: 0;
list-style: none;
}
.faction-card {
display: flex;
flex-direction: column;
gap: var(--sp-4);
padding: 1.5rem 1.4rem 1.35rem;
background: linear-gradient(180deg, var(--c-surface-2), var(--c-surface-1));
border: 1px solid var(--c-line);
border-radius: var(--radius-sm);
transition:
transform var(--dur) var(--ease),
border-color var(--dur) var(--ease);
}
@media (hover: hover) {
.faction-card:hover {
transform: translateY(-3px);
border-color: rgb(212 32 42 / 0.35);
}
}
.faction-card__top {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-3);
}
.faction-card__emblem {
display: grid;
place-items: center;
width: 3.25rem;
height: 3.25rem;
color: var(--c-red-text);
background: var(--c-red-soft);
border: 1px solid rgb(212 32 42 / 0.3);
border-radius: var(--radius-sm);
}
.faction-card__title {
font-family: var(--font-display);
font-size: 1.3rem;
font-weight: 700;
line-height: 1.2;
}
.faction-card__desc {
flex: 1;
font-size: 0.875rem;
color: var(--c-text-muted);
}
.faction-card__more {
display: grid;
gap: 0.2rem;
padding-top: var(--sp-4);
border-top: 1px solid var(--c-line);
}
.faction-card__more-label {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--c-text-faint);
}
.faction-card__soon {
font-size: 0.75rem;
color: var(--c-text-faint);
}
@media (max-width: 1280px) {
.factions__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 900px) {
.factions__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 560px) {
.factions__grid {
grid-template-columns: 1fr;
gap: 0.75rem;
}
.faction-card {
display: grid;
grid-template-columns: auto 1fr;
column-gap: var(--sp-4);
row-gap: var(--sp-2);
padding: 1.1rem;
}
.faction-card__top {
display: contents;
}
.faction-card__emblem {
grid-row: 1 / span 2;
width: 2.75rem;
height: 2.75rem;
}
.faction-card__top .tag {
grid-column: 2;
grid-row: 1;
justify-self: start;
}
.faction-card__title,
.faction-card__desc,
.faction-card__more {
grid-column: 2;
}
.faction-card__title {
font-size: 1.15rem;
}
.faction-card__more {
padding-top: var(--sp-3);
}
}
.steps {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(1rem, 0.5rem + 1.5vw, 2rem);
margin: 0;
padding: 0;
list-style: none;
counter-reset: none;
}
.step {
display: grid;
align-content: start;
gap: var(--sp-3);
padding-top: var(--sp-5);
border-top: 1px solid var(--c-line-strong);
}
@media (min-width: 1101px) {
.step:last-child {
grid-column: 1 / -1;
grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
grid-template-columns: subgrid;
grid-template-rows: auto auto 1fr;
column-gap: clamp(1rem, 0.5rem + 1.5vw, 2rem);
}
.step:last-child > * {
grid-column: 1;
}
.step:last-child > .connect {
grid-column: 2 / -1;
grid-row: 1 / span 3;
max-width: 34rem;
}
}
.step__num {
font-family: var(--font-display);
font-size: 2.25rem;
font-style: italic;
font-weight: 700;
line-height: 1;
color: var(--c-red);
}
.step__title {
font-size: 0.95rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.step__text {
font-size: 0.9rem;
color: var(--c-text-muted);
}
.step__hint {
font-size: 0.8rem;
color: var(--c-text-muted);
}
.step__hint a {
color: var(--c-red-text);
text-decoration: underline;
text-underline-offset: 3px;
}
.step__pending {
display: inline-flex;
align-items: center;
gap: 0.45rem;
font-size: 0.78rem;
color: var(--c-text-faint);
}
.connect {
display: grid;
gap: var(--sp-3);
min-width: 0;
}
.connect__btn {
justify-self: start;
min-height: 2.75rem;
}
.connect__label {
margin-top: var(--sp-1);
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--c-text-faint);
}
.connect__address {
display: flex;
flex-wrap: wrap;
align-items: stretch;
gap: var(--sp-2);
min-width: 0;
}
.connect__code {
flex: 1 1 auto;
min-width: 0;
padding: 0.55rem 0.75rem;
font-family: var(--font-sans);
font-size: 0.85rem;
font-weight: 600;
font-variant-numeric: tabular-nums;
letter-spacing: 0.04em;
color: var(--c-text);
background: var(--c-surface-1);
border: 1px solid var(--c-line-strong);
border-left: 2px solid var(--c-red);
border-radius: var(--radius-sm);
overflow-wrap: anywhere;
user-select: all;
}
.connect__copy {
display: inline-flex;
align-items: center;
gap: 0.4rem;
min-height: 2.75rem;
padding: 0.45rem 0.8rem;
font-family: var(--font-sans);
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--c-text);
background: transparent;
border: 1px solid var(--c-line-strong);
border-radius: var(--radius-sm);
cursor: pointer;
transition: border-color 0.2s ease, color 0.2s ease;
}
.connect__copy:hover {
border-color: var(--c-red);
color: #fff;
}
.no-js .connect__copy {
display: none;
}
.connect__cmd,
.step__hint kbd {
padding: 0.05rem 0.3rem;
font-family: var(--font-sans);
font-size: 0.95em;
font-weight: 600;
color: var(--c-text);
background: var(--c-surface-2);
border: 1px solid var(--c-line);
border-radius: var(--radius-sm);
overflow-wrap: anywhere;
}
.connect__note {
display: flex;
align-items: flex-start;
gap: 0.45rem;
}
.connect__note .icon {
flex: none;
margin-top: 0.1rem;
}
@media (prefers-reduced-motion: reduce) {
.connect__copy {
transition: none;
}
}
@media (max-width: 1100px) {
.steps {
grid-template-columns: repeat(2, minmax(0, 1fr));
row-gap: var(--sp-6);
}
}
@media (max-width: 560px) {
.steps {
grid-template-columns: 1fr;
}
}
.rules__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(1rem, 0.6rem + 0.8vw, 1.5rem);
margin: 0;
padding: 0;
list-style: none;
}
.rule-card {
display: grid;
justify-items: start;
gap: var(--sp-3);
padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
background: linear-gradient(135deg, var(--c-surface-2), var(--c-surface-1) 60%);
border: 1px solid var(--c-line);
border-left: 2px solid var(--c-red);
border-radius: var(--radius-sm);
}
.rule-card__head {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
.rule-card__icon {
width: 2rem;
height: 2rem;
color: var(--c-red);
}
.rule-card__title {
font-family: var(--font-display);
font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.75rem);
font-weight: 700;
}
.rule-card__meta {
margin-bottom: var(--sp-3);
font-size: 0.875rem;
color: var(--c-text-muted);
}
@media (max-width: 760px) {
.rules__grid {
grid-template-columns: 1fr;
}
}
.tiles,
.support__grid,
.news__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(1rem, 0.6rem + 0.8vw, 1.5rem);
margin: 0;
padding: 0;
list-style: none;
}
.tile,
.support-card,
.news-card {
display: grid;
align-content: start;
justify-items: start;
gap: var(--sp-3);
padding: 1.5rem;
background: var(--c-surface-1);
border: 1px solid var(--c-line);
border-radius: var(--radius-sm);
}
.tile__icon,
.support-card__icon {
width: 1.9rem;
height: 1.9rem;
color: var(--c-red);
}
.tile__title,
.support-card__title,
.news-card__title {
font-size: 0.95rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.tile__text,
.support-card__text,
.news-card__teaser {
font-size: 0.9rem;
color: var(--c-text-muted);
}
.support-card__text {
flex: 1;
}
.news-card__meta {
display: flex;
align-items: center;
gap: var(--sp-3);
font-size: 0.78rem;
color: var(--c-text-faint);
}
.empty-state {
display: flex;
align-items: center;
gap: var(--sp-5);
padding: 1.5rem 1.75rem;
border: 1px dashed var(--c-line-strong);
border-radius: var(--radius-sm);
background: rgb(255 255 255 / 0.015);
}
.empty-state__icon {
width: 2.1rem;
height: 2.1rem;
color: var(--c-text-faint);
}
.empty-state__title {
font-weight: 700;
}
.empty-state__text {
font-size: 0.9rem;
color: var(--c-text-muted);
}
@media (max-width: 900px) {
.tiles,
.support__grid,
.news__grid {
grid-template-columns: 1fr;
}
.section-head {
flex-direction: column;
align-items: flex-start;
}
}
.cta-band {
position: relative;
overflow: hidden;
padding-block: clamp(3rem, 2rem + 3vw, 4.5rem);
background:
radial-gradient(40rem 14rem at 85% 50%, rgb(212 32 42 / 0.14), transparent 70%),
var(--c-bg);
}
.cta-band__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-6);
flex-wrap: wrap;
}
.cta-band__text {
font-family: var(--font-display);
font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.6rem);
font-weight: 700;
line-height: 1.2;
}
.cta-band__accent {
font-style: italic;
color: var(--c-red);
}
.error-page {
min-height: 78vh;
display: flex;
align-items: center;
background:
radial-gradient(36rem 20rem at 80% 70%, rgb(212 32 42 / 0.12), transparent 70%),
var(--c-bg);
}
.error-page__inner {
display: grid;
justify-items: start;
gap: var(--sp-5);
padding-top: calc(var(--header-h) + 3rem);
padding-bottom: 4rem;
}
.error-page__title {
font-family: var(--font-display);
font-size: clamp(2.5rem, 1.5rem + 4vw, 5rem);
font-weight: 700;
line-height: 1;
}
.error-page__text {
max-width: 34rem;
color: var(--c-text-muted);
}
.reveal {
opacity: 0;
transform: translateY(16px);
transition:
opacity var(--dur-slow) var(--ease),
transform var(--dur-slow) var(--ease);
}
.reveal.is-visible {
opacity: 1;
transform: none;
}
@media (prefers-reduced-motion: reduce) {
.hero__content > * {
animation: none;
}
.reveal {
opacity: 1;
transform: none;
}
}
.legal {
padding-top: calc(var(--header-h) + var(--sp-8));
padding-bottom: var(--section-y);
}
.legal__inner {
max-width: 52rem;
}
.legal__title {
margin: var(--sp-3) 0 var(--sp-6);
font-family: var(--font-display);
font-size: clamp(2.2rem, 1.6rem + 2vw, 3.25rem);
font-weight: 700;
line-height: 1.1;
}
.legal h2 {
margin: var(--sp-6) 0 var(--sp-3);
font-size: 1rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.legal p {
color: var(--c-text-muted);
}
.legal p + p {
margin-top: var(--sp-3);
}
.legal ul {
margin: var(--sp-3) 0 0;
padding-left: 1.25rem;
color: var(--c-text-muted);
}
.legal li + li {
margin-top: var(--sp-1);
}
.legal strong {
color: var(--c-text);
}
.legal a {
color: var(--c-red-text);
text-decoration: underline;
text-underline-offset: 3px;
}