:root {
--scm-ink: #0e0e10;
--scm-ink-2: #16161a;
--scm-text: #f4f4f3;
--scm-muted: #9d9da4;
--scm-line: rgba(255, 255, 255, 0.16);
--scm-accent: #ff600f;
--magno-surface: #edeee6;
--magno-text: #1a1a16;
--magno-muted: #6b6b62;
--magno-line: rgba(13, 13, 13, 0.18);
--magno-accent: #0d0d0d;
--font-sport: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
--font-lux: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
--font-body: 'Space Grotesk', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
--logo-h: 62px;
}
body {
font-family: var(--font-body);
background: var(--scm-ink);
color: var(--scm-text);
}
.hub-header {
position: fixed;
inset: 0 0 auto 0;
z-index: 50;
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
padding: var(--space-lg) 0;
pointer-events: none;
}
.hub-header > * {
pointer-events: auto;
}
.hub-header__group {
padding-left: clamp(1.5rem, 5vw, 5rem);
font-family: var(--font-sport);
font-weight: 700;
font-size: 0.68rem;
letter-spacing: 0.34em;
text-transform: uppercase;
color: rgba(244, 244, 243, 0.72);
}
.hub-header__controls {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--space-md);
padding-right: clamp(1.5rem, 5vw, 5rem);
color: var(--magno-text);
--lang-active-fg: #edeee6;
}
.hub-header__social {
display: flex;
align-items: center;
gap: 0.4rem;
}
.hub-header__social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border: 1px solid currentColor;
border-radius: 50%;
opacity: 0.55;
transition: opacity 0.3s var(--ease);
}
.hub-header__social a:hover {
opacity: 1;
}
.hub-header__social svg {
width: 15px;
height: 15px;
}
@media (max-width: 899px) {
.hub-header {
grid-template-columns: 1fr;
}
.hub-header__group {
display: none;
}
.hub-header__controls {
color: var(--scm-text);
--lang-active-fg: #0e0e10;
}
}
@media (max-width: 520px) {
.hub-header__social {
display: none;
}
}
.split {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows:
minmax(6.5rem, 1fr)
auto
auto
auto
auto
auto
auto
minmax(3.5rem, 1fr);
min-height: 100svh;
}
.panel {
grid-row: 1 / -1;
display: grid;
grid-template-rows: subgrid;
grid-template-columns: minmax(0, 1fr);
--panel-pad: clamp(1.5rem, 5vw, 5rem);
padding-inline: var(--panel-pad);
position: relative;
isolation: isolate;
text-decoration: none;
overflow: hidden;
}
.panel__bg,
.panel__veil {
grid-area: 1 / 1 / -1 / -1;
position: absolute;
inset: 0;
margin-inline: calc(-1 * var(--panel-pad));
}
.panel__bg {
z-index: -2;
background-size: cover;
background-position: center;
transition: transform 1.4s var(--ease);
}
.panel__veil {
z-index: -1;
}
.panel:hover .panel__bg,
.panel:focus-visible .panel__bg {
transform: scale(1.04);
}
.panel--scm {
color: var(--scm-text);
background: var(--scm-ink);
}
.panel--scm .panel__bg {
background-color: var(--scm-ink);
background-image: var(--photo-scm, none);
}
.panel--scm .panel__veil {
background:
radial-gradient(120% 90% at 72% 0%, rgba(255, 255, 255, 0.06) 0%, transparent 60%),
linear-gradient(90deg, rgba(14, 14, 16, 0.9) 0%, rgba(14, 14, 16, 0.62) 55%, rgba(14, 14, 16, 0.42) 100%),
linear-gradient(180deg, rgba(14, 14, 16, 0.7) 0%, rgba(14, 14, 16, 0.55) 38%, rgba(14, 14, 16, 0.95) 100%);
}
.panel--magno {
color: var(--magno-text);
background: var(--magno-surface);
border-left: 1px solid rgba(13, 13, 13, 0.12);
}
.panel--magno .panel__bg {
background-color: var(--magno-surface);
background-image: var(--photo-magno, none);
}
.panel--magno .panel__veil {
background: linear-gradient(180deg, rgba(237, 238, 230, 0.38) 0%, rgba(237, 238, 230, 0.9) 62%);
}
.panel__logo {
grid-row: 2;
align-self: end;
justify-self: start;
height: var(--logo-h);
width: auto;
object-fit: contain;
}
.panel--magno .panel__logo {
height: calc(var(--logo-h) * 1.15);
}
.panel__rule {
grid-row: 3;
align-self: center;
width: 54px;
height: 2px;
margin-block: var(--space-lg);
}
.panel--scm .panel__rule {
background: var(--scm-accent);
}
.panel--magno .panel__rule {
background: var(--magno-accent);
}
.panel__eyebrow {
grid-row: 4;
align-self: end;
font-size: 0.64rem;
letter-spacing: 0.32em;
text-transform: uppercase;
margin-bottom: var(--space-md);
}
.panel--scm .panel__eyebrow {
color: var(--scm-muted);
}
.panel--magno .panel__eyebrow {
color: var(--magno-muted);
}
.panel__title {
grid-row: 5;
align-self: end;
font-size: clamp(1.9rem, 3.6vw, 3.1rem);
margin-bottom: var(--space-lg);
}
.panel--scm .panel__title {
font-family: var(--font-sport);
font-weight: 800;
letter-spacing: -0.035em;
text-transform: uppercase;
line-height: 0.95;
}
.panel--magno .panel__title {
font-family: var(--font-lux);
font-weight: 300;
letter-spacing: 0.01em;
line-height: 1.02;
}
.panel__desc {
grid-row: 6;
align-self: start;
max-width: 34ch;
font-size: clamp(0.92rem, 1.05vw, 1rem);
line-height: 1.75;
margin-bottom: var(--space-xl);
}
.panel--scm .panel__desc {
color: var(--scm-muted);
}
.panel--magno .panel__desc {
color: var(--magno-muted);
}
.panel__cta {
grid-row: 7;
align-self: start;
justify-self: start;
display: inline-flex;
align-items: center;
gap: 0.75rem;
font-size: 0.68rem;
letter-spacing: 0.24em;
text-transform: uppercase;
font-weight: 600;
padding-bottom: 0.55rem;
border-bottom: 1px solid currentColor;
transition: gap 0.35s var(--ease);
}
.panel:hover .panel__cta,
.panel:focus-visible .panel__cta {
gap: 1.5rem;
}
.panel__cta svg {
width: 20px;
height: 10px;
}
@media (min-width: 900px) and (hover: hover) {
.panel {
transition: flex-grow 0.6s var(--ease);
}
.split {
grid-template-columns: 1fr 1fr;
transition: grid-template-columns 0.6s var(--ease);
}
.split:has(.panel--scm:hover) {
grid-template-columns: 1.08fr 0.92fr;
}
.split:has(.panel--magno:hover) {
grid-template-columns: 0.92fr 1.08fr;
}
}
@media (max-width: 899px) {
.split {
display: block;
min-height: 0;
}
.panel {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
min-height: 78svh;
padding-block: clamp(5rem, 12vh, 8rem) clamp(3rem, 8vh, 5rem);
}
.panel--magno {
border-left: none;
border-top: 1px solid rgba(13, 13, 13, 0.12);
}
.panel > * {
grid-row: auto;
align-self: auto;
justify-self: auto;
}
.panel__rule {
margin-block: var(--space-lg);
}
}
.group {
background: var(--scm-ink-2);
color: var(--scm-text);
border-top: 1px solid var(--scm-line);
}
.group__eyebrow {
display: inline-flex;
align-items: center;
gap: 0.75rem;
font-size: 0.64rem;
font-weight: 600;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--scm-muted);
margin-bottom: var(--space-lg);
}
.group__eyebrow::before {
content: '';
width: 34px;
height: 2px;
background: var(--scm-accent);
}
.group__lead {
font-family: var(--font-sport);
font-weight: 800;
text-transform: uppercase;
letter-spacing: -0.035em;
line-height: 1;
font-size: clamp(1.7rem, 4vw, 3rem);
margin-bottom: var(--space-lg);
}
.group__lead em {
font-style: normal;
box-shadow: inset 0 -0.14em 0 var(--scm-accent);
}
.group__text {
color: var(--scm-muted);
max-width: 64ch;
margin-bottom: var(--space-md);
line-height: 1.75;
}
.group__points {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: var(--space-xl);
margin-top: var(--space-2xl);
}
.group__point h3 {
font-family: var(--font-sport);
font-size: 0.7rem;
letter-spacing: 0.22em;
text-transform: uppercase;
font-weight: 700;
color: var(--scm-text);
margin-bottom: var(--space-sm);
padding-top: var(--space-md);
border-top: 2px solid var(--scm-line);
}
.group__point p {
color: var(--scm-muted);
font-size: 0.94rem;
line-height: 1.7;
}
.hub-footer {
background: var(--scm-ink);
color: var(--scm-muted);
border-top: 1px solid var(--scm-line);
padding-block: var(--space-xl);
font-size: 0.84rem;
}
.hub-footer__row {
display: flex;
flex-wrap: wrap;
gap: var(--space-md) var(--space-xl);
align-items: center;
justify-content: space-between;
}
.hub-footer a {
text-decoration: none;
transition: color 0.3s var(--ease);
}
.hub-footer a:hover {
color: var(--scm-text);
}
body {
font-stretch: 110%;
}
.panel__title {
font-stretch: 120%;
}
.panel--magno {
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 900' fill='none'%3E%3Cg stroke='%230a0a0b'%3E%3Ccircle cx='450' cy='450' r='444' stroke-opacity='0.07' stroke-width='1.5'/%3E%3Ccircle cx='450' cy='450' r='330' stroke-opacity='0.045' stroke-width='1'/%3E%3Ccircle cx='450' cy='450' r='210' stroke-opacity='0.055' stroke-width='1' stroke-dasharray='3 10'/%3E%3Ccircle cx='450' cy='450' r='5' fill='%230a0a0b' fill-opacity='0.09' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right -300px bottom -320px;
background-size: 860px 860px;
}
.group {
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 900' fill='none'%3E%3Cg stroke='%23ffffff'%3E%3Ccircle cx='450' cy='450' r='444' stroke-opacity='0.08' stroke-width='1.5'/%3E%3Ccircle cx='450' cy='450' r='330' stroke-opacity='0.05' stroke-width='1'/%3E%3Ccircle cx='450' cy='450' r='210' stroke-opacity='0.06' stroke-width='1' stroke-dasharray='3 10'/%3E%3C/g%3E%3C/svg%3E"),
radial-gradient(55% 42% at 90% 0%, rgba(255, 255, 255, 0.05), transparent 62%);
background-repeat: no-repeat, no-repeat;
background-position: right -280px top -280px, center;
background-size: 840px 840px, cover;
}
.panel::after {
content: '';
position: absolute;
inset: 0;
margin-inline: calc(-1 * var(--panel-pad));
z-index: 1;
pointer-events: none;
background:
linear-gradient(
115deg,
transparent 36%,
rgba(255, 255, 255, 0.1) 50%,
transparent 63%
),
conic-gradient(
from 210deg at 80% -10%,
transparent 0deg,
rgba(255, 255, 255, 0.06) 10deg,
transparent 24deg
);
background-size: 260% 100%, 100% 100%;
background-position: 132% 0, 0 0;
}
@media (prefers-reduced-motion: no-preference) {
.panel:hover::after,
.panel:focus-visible::after {
transition: background-position 1.1s cubic-bezier(0.45, 0, 0.35, 1);
background-position: -32% 0, 0 0;
}
}
body {
font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
}
.panel__title,
.group__lead {
font-stretch: 75%;
}