/* ======= EWA 2026, Home ======= */
@import url('https://api.fontshare.com/v2/css?f[]=clash-display@400,500,600,700&f[]=geist@400,500,600,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@500;700;800;900&family=Space+Grotesk:wght@400;500;600;700&display=swap');
/* Tusker Grotesk 3600, brand-mandated display face. CDN fallback. */
@font-face {
font-family: 'Tusker Grotesk';
src: url('https://fonts.cdnfonts.com/s/97211/TuskerGrotesk-3600Medium.woff') format('woff'),
url('https://fonts.cdnfonts.com/s/97211/TuskerGrotesk-3600Medium.woff2') format('woff2');
font-weight: 500;
font-display: swap;
}
@font-face {
font-family: 'Tusker Grotesk';
src: url('https://fonts.cdnfonts.com/s/97211/TuskerGrotesk-3700Bold.woff') format('woff');
font-weight: 700;
font-display: swap;
}
@font-face {
font-family: 'Tusker Grotesk';
src: url('https://fonts.cdnfonts.com/s/97211/TuskerGrotesk-3800Super.woff') format('woff');
font-weight: 800;
font-display: swap;
}
:root {
/* core */
--black: #000000;
--white: #ffffff;
--purple-deep: #3D0178;
--pink: #E99BD3;
--yellow: #EFEF51;
--red: #FF4343;
--cyan: #24D2DB;
--green: #489B79;
/* accents */
--peach: #FFC978;
--lime: #76FF86;
--aqua: #00F4FF;
--teal: #00847D;
--hot-pink: #FF0075;
--neon-yellow: #EBFF00;
--violet: #7439B4;
--lavender: #AF66FA;
--magenta: #B924B1;
--rose: #F960AF;
--coral: #FA5657;
--orange: #FA7E56;
/* surfaces */
--bg: #07060a;
--bg-2: #0d0a14;
--ink: #f4f1ea;
--ink-soft: #b9b3c4;
--line: rgba(255,255,255,0.10);
--line-strong: rgba(255,255,255,0.22);
/* type */
--display: 'Tusker Grotesk', 'Big Shoulders Display', 'Anton', 'Bebas Neue', sans-serif;
--serif: 'Clash Display', 'Geist', sans-serif;
--sans: 'Geist', 'Space Grotesk', system-ui, sans-serif;
--mono: 'Space Grotesk', monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
/* Responsive hardening: grid/flex items default to min-width:auto (=min-content),
which lets oversized display type blow out tracks and force horizontal scroll.
Resetting to 0 lets tracks shrink and wrap correctly on every screen size. */
*, *::before, *::after { min-width: 0; }
html, body { background: var(--bg); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
/* clip (not hidden) so position:sticky scroll-driven sections keep working,
while off-canvas drawers / decorative transforms can't widen the page. */
html { overflow-x: clip; }
body { overflow-x: clip; }
/* Long single words in huge display headings should wrap, never overflow/clip. */
.display, [class*="-title"], [class*="-headline"], [class*="-text"], h1, h2 { overflow-wrap: break-word; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img { display: block; max-width: 100%; }
::selection { background: var(--hot-pink); color: var(--black); }
/* utility */
.eyebrow {
font-family: var(--sans);
font-size: 11px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--ink-soft);
font-weight: 500;
}
.display {
font-family: var(--display);
font-weight: 800;
letter-spacing: -0.005em;
line-height: 1.02;
text-transform: uppercase;
}
.script-italic { font-family: var(--serif); font-style: normal; font-weight: 500; letter-spacing: -0.02em; }
.container { width: min(1320px, 92vw); margin-inline: auto; }
.divider { height: 1px; background: var(--line); width: 100%; }
/* ======= HEADER ======= */
.site-header {
position: fixed; top: 0; left: 0; right: 0;
z-index: 80;
display: flex; align-items: center; justify-content: space-between;
padding: 18px clamp(20px, 4vw, 48px);
transition: background 350ms ease, backdrop-filter 350ms ease, border-color 350ms ease;
border-bottom: 1px solid transparent;
}
.site-header.scrolled {
background: rgba(7,6,10,0.72);
backdrop-filter: blur(18px) saturate(140%);
-webkit-backdrop-filter: blur(18px) saturate(140%);
border-bottom: 1px solid var(--line);
}
.brand-lockup { display: flex; align-items: center; gap: 12px; }
.brand-logo { display: block; height: 36px; width: auto; object-fit: contain; max-width: 180px; }
.brand-logo.dark { display: none; }
.section-light .brand-logo.light { display: none; }
.section-light .brand-logo.dark { display: block; }
.nav-list {
display: flex; gap: 2px; list-style: none;
background: rgba(255,255,255,0.04);
border: 1px solid var(--line);
border-radius: 0;
padding: 4px;
}
.nav-list a {
display: inline-flex; align-items: center;
padding: 8px 11px;
font-size: 12px; font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
border-radius: 0;
color: var(--ink);
position: relative;
transition: color 220ms, background 220ms;
}
.nav-list a:hover { background: rgba(255,255,255,0.08); }
.nav-list a.active {
background: linear-gradient(135deg, var(--hot-pink), var(--violet));
color: var(--white);
}
/* More dropdown */
.nav-more { position: relative; display: inline-flex; }
.nav-more-trigger {
display: inline-flex; align-items: center; gap: 5px;
padding: 8px 11px;
background: transparent;
border: 0;
cursor: pointer;
color: rgba(255,255,255,0.78);
font-family: inherit;
font-size: 12px;
letter-spacing: 0.1em;
text-transform: uppercase;
font-weight: 600;
white-space: nowrap;
transition: color 220ms, background 220ms;
}
.nav-more-trigger:hover { background: rgba(255,255,255,0.08); color: var(--white); }
.nav-more-trigger.is-open { background: rgba(255,255,255,0.08); color: var(--white); }
.nav-more-trigger svg { transition: transform 220ms ease; }
.nav-more-trigger.is-open svg { transform: rotate(180deg); }
.nav-more-menu {
position: absolute;
top: calc(100% + 10px);
right: 0;
min-width: 200px;
display: flex;
flex-direction: column;
background: rgba(12,8,20,0.95);
backdrop-filter: blur(14px);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 10px;
padding: 6px;
opacity: 0;
transform: translateY(-6px) scale(0.98);
pointer-events: none;
transition: opacity 200ms ease, transform 220ms cubic-bezier(0.22,1,0.36,1);
z-index: 50;
box-shadow: 0 24px 48px rgba(0,0,0,0.45);
}
.nav-more-menu.align-left { left: 0; right: auto; }
.nav-more-menu.is-open {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
.nav-more-menu a {
display: block;
padding: 10px 14px;
font-family: inherit;
font-size: 12px;
letter-spacing: 0.16em;
text-transform: uppercase;
font-weight: 600;
color: rgba(255,255,255,0.78);
text-decoration: none;
border-radius: 6px;
white-space: nowrap;
transition: background 180ms ease, color 180ms ease;
}
.nav-more-menu a:hover { background: rgba(255,255,255,0.08); color: var(--white); }
/* Sub-sub menu, third-level flyout (e.g. Markets & Deal Room » Desks) */
.nav-sub { position: relative; }
.nav-sub-label {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 10px 14px;
font-family: inherit; font-size: 12px; letter-spacing: 0.16em;
text-transform: uppercase; font-weight: 600;
color: rgba(255,255,255,0.78);
border-radius: 6px; white-space: nowrap; cursor: default;
transition: background 180ms ease, color 180ms ease;
}
.nav-sub:hover > .nav-sub-label,
.nav-sub:focus-within > .nav-sub-label { background: rgba(255,255,255,0.08); color: var(--white); }
.nav-sub-caret { flex: none; opacity: 0.55; transition: transform 200ms ease; }
.nav-sub:hover > .nav-sub-label .nav-sub-caret { transform: translateX(2px); opacity: 0.9; }
.nav-sub-menu {
position: absolute;
top: -7px; left: 100%;
min-width: 230px;
display: flex; flex-direction: column;
background: rgba(12,8,20,0.95);
backdrop-filter: blur(14px);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 10px; padding: 6px;
opacity: 0; transform: translateX(-6px);
pointer-events: none;
transition: opacity 180ms ease, transform 200ms cubic-bezier(0.22,1,0.36,1);
z-index: 60;
box-shadow: 0 24px 48px rgba(0,0,0,0.5);
}
.nav-sub:hover > .nav-sub-menu,
.nav-sub:focus-within > .nav-sub-menu { opacity: 1; transform: translateX(0); pointer-events: auto; }
/* transparent bridge so the cursor never crosses a dead gap (which dropped :hover) */
.nav-sub-menu::before { content: ''; position: absolute; top: 0; left: -14px; width: 16px; height: 100%; }
.nav-more-menu.flyout-left .nav-sub-menu::before { left: auto; right: -14px; }
.nav-sub-menu a {
display: block;
padding: 10px 14px;
font-family: inherit; font-size: 12px; letter-spacing: 0.16em;
text-transform: uppercase; font-weight: 600;
color: rgba(255,255,255,0.78);
text-decoration: none; border-radius: 6px; white-space: nowrap;
transition: background 180ms ease, color 180ms ease;
}
.nav-sub-menu a:hover { background: rgba(255,255,255,0.08); color: var(--white); }
/* Flip the flyout to the left when the parent dropdown sits near the viewport edge */
.nav-more-menu.flyout-left .nav-sub-menu { left: auto; right: 100%; transform: translateX(6px); }
.nav-more-menu.flyout-left .nav-sub:hover > .nav-sub-menu,
.nav-more-menu.flyout-left .nav-sub:focus-within > .nav-sub-menu { transform: translateX(0); }
/* Light section variants */
.section-light .nav-more-trigger { color: rgba(10,5,16,0.7); }
.section-light .nav-more-trigger:hover,
.section-light .nav-more-trigger.is-open { background: rgba(10,5,16,0.06); color: #0a0510; }
.section-light .nav-more-menu {
background: rgba(255,255,255,0.97);
backdrop-filter: blur(14px);
border-color: rgba(10,5,16,0.12);
}
.section-light .nav-more-menu a { color: rgba(10,5,16,0.75); }
.section-light .nav-more-menu a:hover { background: rgba(10,5,16,0.06); color: #0a0510; }
.header-actions { display: flex; align-items: center; gap: 10px; }
.btn {
position: relative;
display: inline-flex; align-items: center; gap: 8px;
padding: 14px 22px;
font-family: var(--sans);
font-size: 13px; font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
border-radius: 0;
cursor: pointer;
transition: background 220ms ease, color 220ms ease, border-color 220ms ease;
white-space: nowrap;
border: 1px solid transparent;
}
.btn:hover { transform: none; }
.btn-primary {
background: #ffffff;
color: #0a0510;
border-color: #ffffff;
}
.btn-primary:hover { background: #0a0510; color: #ffffff; border-color: #0a0510; }
.btn-ghost {
background: #ffffff;
border-color: #ffffff;
color: #0a0510;
}
.btn-ghost:hover { background: transparent; color: #ffffff; border-color: #ffffff; }
.btn-outline {
background: transparent;
border-color: #ffffff;
color: #ffffff;
}
.btn-outline:hover { background: #ffffff; color: #0a0510; }
.btn-solid-yellow { background: var(--neon-yellow); color: #0c0014; border-color: var(--neon-yellow); }
.btn-solid-yellow:hover { background: #0a0510; color: var(--neon-yellow); }
/* On light sections, invert the defaults */
.section-light .btn-primary,
.section-light .btn-ghost {
background: #0a0510; color: #ffffff; border-color: #0a0510;
}
.section-light .btn-primary:hover,
.section-light .btn-ghost:hover {
background: #ffffff; color: #0a0510; border-color: #0a0510;
}
.section-light .btn-outline { border-color: #0a0510; color: #0a0510; background: transparent; }
.section-light .btn-outline:hover { background: #0a0510; color: #ffffff; }
.btn-arrow {
width: 22px; height: 22px;
display: inline-grid; place-items: center;
border-radius: 0;
background: currentColor;
color: inherit;
}
.btn-arrow svg { color: #fff; mix-blend-mode: difference; }
.menu-toggle { display: none; background: none; border: 0; padding: 6px 4px; color: currentColor; cursor: pointer; align-items: center; justify-content: center; }
.menu-toggle svg { width: 30px; height: 18px; display: block; }
@media (max-width: 1280px) {
.nav-list { display: none; }
.menu-toggle { display: inline-flex; }
}
/* ======= HERO ======= */
.hero {
position: relative;
min-height: 100vh;
/* bottom padding must clear the 79px-tall absolute marquee + leave a gap */
padding: 104px clamp(20px, 4vw, 48px) clamp(152px, 17vh, 220px);
overflow: hidden;
isolation: isolate;
}
#hero-canvas {
position: absolute; inset: 0;
width: 100%; height: 100%;
z-index: 0;
}
.hero-grain {
position: absolute; inset: 0; pointer-events: none; z-index: 2;
background-image: url("data:image/svg+xml;utf8,");
opacity: 0.22; mix-blend-mode: overlay;
}
.hero-vignette {
position: absolute; inset: 0; pointer-events: none; z-index: 1;
background:
radial-gradient(ellipse at 50% 110%, rgba(116, 57, 180, 0.55), transparent 55%),
radial-gradient(ellipse at 90% 0%, rgba(0, 244, 255, 0.18), transparent 50%),
linear-gradient(180deg, transparent 60%, var(--bg) 100%);
}
.hero-inner {
position: relative; z-index: 3;
display: grid;
grid-template-rows: auto 1fr auto;
gap: 24px;
min-height: calc(100vh - 290px);
}
.hero-meta {
display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start;
gap: 14px;
}
.hero-edition {
display: flex; align-items: center; gap: 10px;
padding: 8px 14px;
border: 1px solid var(--line-strong);
border-radius: 999px;
font-size: 12px; letter-spacing: 0.08em;
backdrop-filter: blur(8px);
}
.hero-edition .dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--lime);
box-shadow: 0 0 12px var(--lime);
animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: 0.4; transform: scale(0.85); } }
.hero-locale { text-align: left; font-size: 12px; letter-spacing: 0.16em; padding-left: 2px; }
.hero-locale strong { display: block; font-weight: 600; font-size: 14px; letter-spacing: 0.12em; }
.hero-locale span { color: var(--ink-soft); }
.hero-headline {
align-self: end;
font-family: var(--display);
font-weight: 800;
/* height-aware so all three lines always fit the viewport (no top-line clipping) */
font-size: clamp(40px, min(9vw, 12vh), 160px);
line-height: 1.03;
letter-spacing: -0.01em;
text-transform: uppercase;
text-wrap: balance;
padding-bottom: 0.08em;
}
.hero-headline .line { display: block; padding: 0.04em 0; }
.hero-headline .line { display: block; }
.hero-headline .ink-gradient {
background: linear-gradient(115deg, #ffeaff 0%, #ff5aa0 28%, #ffb96e 52%, #5be1ff 78%, #d8b1ff 100%);
background-size: 220% 100%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: hueShift 12s linear infinite;
}
.hero-headline .outline {
-webkit-text-stroke: 2px rgba(255,255,255,0.85);
color: transparent;
}
.hero-headline em {
font-family: var(--serif);
font-style: normal;
font-weight: 500;
letter-spacing: -0.04em;
text-transform: none;
background: linear-gradient(115deg, #ffeaff, #ff6ad5, #b388ff);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
padding-right: 8px;
}
/* --- Google-Translate safety net ---
Translate wraps text nodes in tags, which breaks
background-clip:text and text-stroke (the fill renders transparent →
invisible). When is in a translated state, restore solid,
readable colours so every hero line stays visible. */
html.translated-ltr .hero-headline .ink-gradient,
html.translated-rtl .hero-headline .ink-gradient {
-webkit-text-fill-color: #ff7ab8; color: #ff7ab8; background: none; animation: none;
}
html.translated-ltr .hero-headline .outline,
html.translated-rtl .hero-headline .outline {
-webkit-text-fill-color: #ffffff; color: #ffffff; -webkit-text-stroke: 0;
}
html.translated-ltr .hero-headline em,
html.translated-rtl .hero-headline em {
-webkit-text-fill-color: #ff8fd0; color: #ff8fd0; background: none;
}
/* Google Translate / Chrome translate wrap each text run in tags. Those
children don't inherit the gradient background, so background-clip:text makes
them render transparent. Force the injected tags to a solid colour,
this fires regardless of how translation is triggered. */
.hero-headline .ink-gradient font { -webkit-text-fill-color: #ff7ab8 !important; color: #ff7ab8 !important; }
.hero-headline .outline font { -webkit-text-fill-color: #ffffff !important; color: #ffffff !important; -webkit-text-stroke: 0 !important; }
.hero-headline em font { -webkit-text-fill-color: #ff8fd0 !important; color: #ff8fd0 !important; }
.hero-foot {
display: grid;
grid-template-columns: 1.1fr auto;
align-items: end;
gap: 32px;
}
.hero-foot .hero-cta-row { justify-content: flex-end; }
.hero-sub {
max-width: 520px;
font-size: 17px; line-height: 1.45;
color: var(--ink-soft);
}
.hero-sub strong { color: var(--ink); font-weight: 500; }
.hero-cta-row { display: flex; gap: 10px; flex-wrap: wrap; }
.hero-scroll {
display: flex; align-items: center; gap: 10px;
font-size: 11px; letter-spacing: 0.24em;
color: var(--ink-soft);
text-transform: uppercase;
}
.hero-scroll-bar {
width: 1px; height: 56px;
background: linear-gradient(180deg, transparent, var(--ink-soft), transparent);
position: relative; overflow: hidden;
}
.hero-scroll-bar::after {
content: ''; position: absolute;
top: 0; left: 0; right: 0; height: 30%;
background: var(--white);
animation: scrollPulse 1.8s ease-in-out infinite;
}
@keyframes scrollPulse {
0% { transform: translateY(-100%); }
100% { transform: translateY(380%); }
}
/* MARQUEE bottom of hero */
.hero-marquee {
position: absolute; bottom: 0; left: 0; right: 0;
z-index: 3;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
background: rgba(7,6,10,0.55);
backdrop-filter: blur(12px);
overflow: hidden;
padding: 18px 0;
}
.marquee-track {
display: flex; gap: 56px;
animation: marquee 20s linear infinite;
white-space: nowrap;
width: max-content;
}
.marquee-track > span {
font-family: var(--display); font-weight: 800;
font-size: 28px; letter-spacing: 0.04em;
text-transform: uppercase;
display: inline-flex; align-items: center; gap: 56px;
}
.marquee-track .star {
display: inline-flex; align-items: center;
color: var(--hot-pink); font-size: 0.72em;
}
@keyframes marquee { to { transform: translateX(-50%); } }
@media (max-width: 760px) {
.hero-foot { grid-template-columns: 1fr; }
.hero-scroll { display: none; }
}
/* ======= AUDIENCE SELECTOR ======= */
.audience {
padding: 120px clamp(20px, 4vw, 48px) 120px;
background: var(--bg);
position: relative;
}
.audience-header {
display: flex; justify-content: space-between; align-items: end;
gap: 30px; margin-bottom: 48px;
}
.audience-title {
font-family: var(--display); font-weight: 800;
font-size: clamp(40px, 6vw, 88px);
line-height: 1.0; text-transform: uppercase;
letter-spacing: -0.01em;
max-width: 12ch;
padding-bottom: 0.08em;
}
.audience-title em {
font-family: var(--display); font-style: normal;
font-weight: 800;
text-transform: uppercase;
letter-spacing: -0.01em;
background: linear-gradient(115deg, var(--pink), var(--hot-pink), var(--lavender));
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.audience-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
.audience-chip {
position: relative;
padding: 28px 24px;
border: 1px solid var(--line);
background: rgba(255,255,255,0.02);
border-radius: 18px;
cursor: pointer;
overflow: hidden;
transition: transform 380ms cubic-bezier(0.2,0.8,0.2,1), border-color 280ms;
}
.audience-chip::before {
content: ''; position: absolute; inset: 0;
background: var(--c, var(--hot-pink));
transform: translateY(101%);
transition: transform 480ms cubic-bezier(0.2,0.8,0.2,1);
}
.audience-chip:hover::before { transform: translateY(0); }
.audience-chip:hover { border-color: transparent; transform: translateY(-4px); }
.audience-chip:hover .ac-label,
.audience-chip:hover .ac-arrow,
.audience-chip:hover .ac-num { color: #07060a; }
.audience-chip:hover .ac-arrow svg path { stroke: #07060a; }
.ac-inner { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 36px; height: 100%; }
.ac-top { display: flex; justify-content: flex-end; align-items: flex-start; }
.ac-num {
font-family: var(--sans); font-size: 11px; letter-spacing: 0.2em;
color: var(--ink-soft); transition: color 280ms;
}
.ac-arrow { transition: color 280ms; }
.ac-arrow svg path { transition: stroke 280ms; }
.ac-label {
font-family: var(--display); font-weight: 700;
font-size: clamp(22px, 2.4vw, 32px);
line-height: 1; text-transform: uppercase;
letter-spacing: 0.01em;
transition: color 280ms;
}
@media (max-width: 900px) { .audience-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .audience-grid { grid-template-columns: 1fr; } .audience-header { flex-direction: column; align-items: flex-start; } }
/* ======= WHAT IS EWA ======= */
.what {
padding: 140px clamp(20px, 4vw, 48px) 140px;
position: relative;
background:
radial-gradient(ellipse at 80% 20%, rgba(116,57,180,0.25), transparent 50%),
radial-gradient(ellipse at 0% 80%, rgba(36,210,219,0.15), transparent 50%),
var(--bg);
}
.what-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 80px;
align-items: start;
}
.what-eyebrow-row { display: flex; align-items: center; gap: 16px; margin-bottom: 32px; }
.what-text {
font-family: var(--display);
font-size: clamp(40px, 5vw, 76px);
line-height: 1.0;
text-transform: uppercase;
font-weight: 700;
letter-spacing: -0.01em;
padding-bottom: 0.08em;
}
.what-text em {
font-family: var(--display);
font-style: normal;
font-weight: 800;
text-transform: uppercase;
background: linear-gradient(115deg, var(--neon-yellow), var(--peach), var(--hot-pink));
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.what-text .stroke { -webkit-text-stroke: 2px var(--ink); color: transparent; }
.what-detail { padding-top: 80px; }
.what-detail h3 {
font-family: var(--serif);
font-size: 22px;
font-weight: 500;
letter-spacing: -0.01em;
margin-bottom: 16px;
}
.what-detail p {
font-size: 18px;
line-height: 1.6;
color: var(--ink-soft);
max-width: none;
}
.what-stats {
margin-top: 36px;
display: grid; grid-template-columns: 1fr 1fr 1fr;
gap: 12px;
}
.what-stat {
padding: 18px;
border: 1px solid var(--line);
border-radius: 12px;
background: rgba(255,255,255,0.02);
}
.what-stat .num {
font-family: var(--display);
font-size: 36px; line-height: 1;
background: linear-gradient(115deg, var(--aqua), var(--lavender));
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.what-stat .label {
font-size: 11px; letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-soft);
margin-top: 8px;
}
@media (max-width: 900px) { .what-grid { grid-template-columns: 1fr; gap: 40px; } .what-detail { padding-top: 0; } }
/* ======= THEME : CLOSING THE GAP ======= */
.theme {
padding: 140px clamp(20px, 4vw, 48px);
background: #0a0510;
position: relative;
overflow: hidden;
}
.theme::before {
content: ''; position: absolute; inset: 0;
background:
radial-gradient(circle at 20% 30%, rgba(255,0,117,0.18), transparent 40%),
radial-gradient(circle at 80% 70%, rgba(0,244,255,0.18), transparent 40%);
pointer-events: none;
}
.theme-head {
position: relative; z-index: 2;
display: grid; grid-template-columns: 1.4fr 1fr; gap: 60px; align-items: end;
margin-bottom: 80px;
}
.theme-title {
font-family: var(--display); font-weight: 800;
font-size: clamp(60px, 11vw, 180px);
line-height: 1.07;
text-transform: uppercase;
letter-spacing: -0.02em;
padding-bottom: 0.08em;
}
.theme-title em {
font-family: var(--display); font-style: normal; font-weight: 800;
text-transform: uppercase; letter-spacing: -0.02em;
background: linear-gradient(115deg, var(--neon-yellow), var(--peach), var(--hot-pink), var(--lavender));
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.theme-title .between {
-webkit-text-stroke: 2px var(--ink-soft); color: transparent;
}
.theme-kicker { font-size: clamp(14px, 1.6vw, 22px); display: inline; letter-spacing: 0.12em; }
.theme-blurb { font-size: 18px; line-height: 1.6; color: var(--ink-soft); max-width: 42ch; text-wrap: pretty; }
/* CLOSING THE GAP: white words that slide in from left/right to meet a vertical
gradient seam on scroll. Keeps the original left-aligned title structure. */
.theme-title-cg { display: inline-flex; align-items: center; gap: clamp(10px, 1.4vw, 22px); font-size: clamp(56px, 8.5vw, 128px); line-height: 0.9; }
.theme-title-cg .tcg-word {
display: inline-block; color: #fff;
font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: -0.02em;
will-change: transform, opacity;
transition: transform .95s cubic-bezier(.16,.84,.3,1), opacity .8s ease;
}
.theme-title-cg .tcg-l { transform: translateX(-60px); opacity: 0; }
.theme-title-cg .tcg-r { transform: translateX(60px); opacity: 0; }
.theme.is-in .theme-title-cg .tcg-l, .theme.is-in .theme-title-cg .tcg-r { transform: translateX(0); opacity: 1; }
.theme-title-cg .tcg-seam {
flex: none; width: clamp(4px, 0.5vw, 7px); align-self: stretch; min-height: 0.72em;
border-radius: 99px;
background: linear-gradient(180deg, #FF0075 0%, #AF66FA 50%, #00F4FF 100%);
box-shadow: 0 0 22px rgba(175,102,250,0.55);
transform: scaleY(0); transform-origin: center;
transition: transform .7s cubic-bezier(.16,.84,.3,1) .1s;
}
.theme.is-in .theme-title-cg .tcg-seam { transform: scaleY(1); }
.gap-grid {
position: relative; z-index: 2;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
.gap-card {
position: relative;
padding: 32px;
border: 1px solid var(--line);
border-radius: 16px;
background: rgba(255,255,255,0.03);
overflow: hidden;
min-height: 220px;
transition: transform 400ms cubic-bezier(0.2,0.8,0.2,1), border-color 280ms;
isolation: isolate;
}
.gap-card:hover { transform: translateY(-6px); border-color: var(--c, var(--white)); }
.gap-card .gap-num {
font-family: var(--display); font-weight: 800;
font-size: 12px; letter-spacing: 0.18em;
color: var(--ink-soft);
}
.gap-card .gap-name {
font-family: var(--display); font-weight: 800;
font-size: 32px; text-transform: uppercase;
line-height: 1; letter-spacing: -0.01em;
margin-top: 18px;
}
.gap-card .gap-desc {
margin-top: 10px;
font-size: 13px; color: var(--ink-soft); line-height: 1.5;
}
.gap-card .gap-glow {
position: absolute; right: -40px; bottom: -40px;
width: 140px; height: 140px;
background: radial-gradient(circle, var(--c, var(--hot-pink)) 0%, transparent 65%);
filter: blur(20px);
opacity: 0.55;
z-index: -1;
transition: opacity 400ms, transform 400ms;
}
.gap-card:hover .gap-glow { opacity: 1; transform: scale(1.4); }
@media (max-width: 900px) { .theme-head { grid-template-columns: 1fr; } .gap-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .gap-grid { grid-template-columns: 1fr; } }
/* ======= TRACKS ======= */
.tracks {
scroll-margin-top: 96px;
padding: 100px clamp(20px, 4vw, 48px);
background: var(--bg);
}
.tracks-head {
display: flex; justify-content: space-between; align-items: end; gap: 30px;
margin-bottom: 40px;
}
.tracks-title {
font-family: var(--display); font-weight: 800;
font-size: clamp(48px, 7vw, 110px);
line-height: 1.1; text-transform: uppercase;
letter-spacing: -0.01em;
padding-bottom: 0.08em;
}
.tracks-title em {
font-family: var(--display); font-style: normal; font-weight: 800;
text-transform: uppercase; letter-spacing: -0.02em;
}
.tracks-sub { max-width: 38ch; color: var(--ink-soft); font-size: 17px; line-height: 1.55; }
.tracks-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 16px;
}
.track-card {
position: relative;
border-radius: 22px;
overflow: hidden;
min-height: clamp(220px, 26vh, 300px);
cursor: pointer;
background: #15101e;
isolation: isolate;
display: flex; flex-direction: column; justify-content: flex-end;
transform-style: preserve-3d;
perspective: 1000px;
transition: transform 500ms cubic-bezier(0.2,0.8,0.2,1);
}
.track-card::after {
content: ''; position: absolute; inset: 0; z-index: 2;
background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.85) 100%);
pointer-events: none;
}
.track-img {
position: absolute; inset: 0; z-index: 1;
background-size: cover; background-position: center;
transition: transform 700ms ease, opacity 500ms ease;
filter: saturate(1.15) contrast(1.05);
opacity: 0;
}
.track-card { background: var(--c); }
.track-card:hover .track-img { transform: scale(1.06); opacity: 1; }
.track-meta {
position: relative; z-index: 3;
padding: 22px 12px 22px 22px;
display: flex; flex-direction: column; gap: 14px;
}
.track-tag {
position: absolute; top: 18px; left: 18px;
z-index: 4;
padding: 6px 12px;
font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
background: rgba(0,0,0,0.5); backdrop-filter: blur(8px);
border-radius: 999px;
border: 1px solid var(--line-strong);
}
.track-color-bar {
width: 32px; height: 4px; border-radius: 2px;
background: var(--c, var(--hot-pink));
margin-bottom: 4px;
}
.track-name {
font-family: var(--display); font-weight: 800;
font-size: 36px; line-height: 1.07;
text-transform: uppercase;
letter-spacing: -0.01em;
}
.track-desc { font-size: 13px; color: rgba(255,255,255,0.7); line-height: 1.5; max-width: 42ch; }
.track-cta {
display: inline-flex; align-items: center; gap: 8px;
font-size: 12px; font-weight: 600; letter-spacing: 0.1em;
text-transform: uppercase;
align-self: flex-start;
}
.track-cta .arr {
width: 24px; height: 24px; border-radius: 50%;
display: inline-grid; place-items: center;
background: #fff;
color: var(--c, var(--hot-pink));
transition: transform 250ms, background 250ms ease, color 250ms ease;
}
.track-card:hover .track-cta .arr { transform: translate(2px,-2px) rotate(-12deg); background: var(--c, var(--hot-pink)); color: #fff; }
/* ===== Homepage Tracks grid: per-track colour + ink treatment =====
Resting state shows the flat track colour with black or white text
(set via data-ink). On hover a dark veil fades in and all text/CTA
turns white. Scoped to .tracks-grid so track detail pages are untouched. */
.tracks-grid .track-card[data-ink="dark"] { --tk-ink: #111214; }
.tracks-grid .track-card[data-ink="light"] { --tk-ink: #ffffff; }
/* resting: no dark gradient — pure colour behind the ink text */
.tracks-grid .track-card::after {
background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.55) 100%);
opacity: 0;
transition: opacity 450ms ease;
}
.tracks-grid .track-card .track-name,
.tracks-grid .track-card .track-cta { color: var(--tk-ink); }
.tracks-grid .track-card .track-desc { color: var(--tk-ink); opacity: 0.82; }
/* CTA arrow button: bg matches the ink, glyph in the card colour */
.tracks-grid .track-card .track-cta .arr { background: var(--tk-ink); color: var(--c); }
/* tag chip stays a legible dark pill on every colour */
.tracks-grid .track-card .track-tag { background: rgba(0,0,0,0.5); color: #fff; border-color: rgba(255,255,255,0.2); }
/* hover: darken the card, everything white */
.tracks-grid .track-card:hover::after { opacity: 1; background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.88) 100%); }
.tracks-grid .track-card:hover .track-name,
.tracks-grid .track-card:hover .track-desc,
.tracks-grid .track-card:hover .track-cta { color: #fff; opacity: 1; }
.tracks-grid .track-card:hover .track-cta .arr { transform: translate(2px,-2px) rotate(-12deg); background: #fff; color: #111214; }
/* sizes: alternating big-small pattern, 12-col base */
.tracks-grid { grid-template-columns: repeat(12, 1fr); }
.track-card.size-lg { grid-column: span 7; }
.track-card.size-md { grid-column: span 5; }
.track-card.size-sm { grid-column: span 5; }
.track-card.size-wide { grid-column: span 7; }
.track-card.size-q { grid-column: span 3; }
.track-card.size-t { grid-column: span 4; }
@media (max-width: 900px) {
.track-card.size-lg, .track-card.size-md, .track-card.size-sm, .track-card.size-wide { grid-column: span 12; }
.track-card.size-q, .track-card.size-t { grid-column: span 6; }
}
/* ======= EXPERIENCES, 3D CYLINDER CAROUSEL (light) ======= */
.experiences {
padding: 130px clamp(20px, 4vw, 48px) 160px;
background: #f4f1ea;
color: #0a0510;
position: relative;
overflow: hidden;
}
.experiences * { color: inherit; }
.experiences .eyebrow { color: rgba(10,5,16,0.55); }
.experiences-head {
display: flex; justify-content: space-between; align-items: end;
margin-bottom: 60px;
gap: 24px; flex-wrap: wrap;
}
.experiences-title {
font-family: var(--display); font-weight: 800;
font-size: clamp(40px, 6vw, 90px);
text-transform: uppercase;
line-height: 1.06;
letter-spacing: -0.005em;
max-width: 14ch;
padding-bottom: 0.1em;
}
.experiences-title em {
font-family: var(--display); font-style: normal; font-weight: 800;
text-transform: uppercase;
background: linear-gradient(115deg, #FF0075, #7439B4, #00847D);
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.xp-stage {
position: relative;
height: 540px;
perspective: 1600px;
perspective-origin: 50% 50%;
margin: 0 auto;
max-width: 1200px;
}
.xp-ring {
position: absolute; inset: 0;
transform-style: preserve-3d;
transition: transform 900ms cubic-bezier(0.2,0.8,0.2,1);
will-change: transform;
}
.xp-slot {
position: absolute;
top: 50%; left: 50%;
width: 320px; height: 440px;
margin: -220px 0 0 -160px;
transform-style: preserve-3d;
}
.xp-slot-inner {
position: relative;
width: 100%; height: 100%;
background: #ffffff;
border: 1px solid rgba(10,5,16,0.18);
padding: 28px;
display: flex; flex-direction: column;
justify-content: space-between;
box-shadow: 0 30px 80px -30px rgba(0,0,0,0.35);
transition: background 320ms, color 320ms;
overflow: hidden;
}
.xp-slot.is-front .xp-slot-inner {
background: #0a0510; color: #ffffff;
box-shadow: 0 40px 110px -20px rgba(0,0,0,0.55);
}
.xp-slot-inner::after {
content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 6px;
background: var(--c, #FF0075);
}
.xp-num {
font-family: var(--display); font-weight: 800;
font-size: 84px; line-height: 1; letter-spacing: -0.02em;
color: var(--c, #FF0075);
}
.xp-tag-pill {
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 12px;
border: 1px solid currentColor;
font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
align-self: flex-start;
margin-top: 14px;
}
.xp-tag-pill .pip { width: 8px; height: 8px; background: var(--c, #FF0075); }
.xp-title-big {
font-family: var(--display); font-weight: 800;
font-size: clamp(26px, 2.2vw, 34px);
line-height: 1.06; text-transform: uppercase;
letter-spacing: -0.005em;
margin-top: 20px;
padding-bottom: 0.08em;
}
.xp-desc-card {
font-size: 14px; line-height: 1.55;
color: rgba(10,5,16,0.7);
margin-top: 12px;
}
.xp-slot.is-front .xp-desc-card { color: rgba(255,255,255,0.75); }
.xp-link {
margin-top: auto;
font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 700;
display: inline-flex; gap: 8px; align-items: center;
}
.xp-controls {
position: relative;
display: flex; gap: 12px; justify-content: center; align-items: center;
margin-top: 60px;
}
.xp-arrow {
width: 60px; height: 60px;
background: #0a0510; color: #fff;
display: grid; place-items: center;
cursor: pointer;
border: 1px solid #0a0510;
transition: background 220ms, color 220ms;
}
.xp-arrow:hover { background: #fff; color: #0a0510; }
.xp-counter {
font-family: var(--display); font-weight: 700;
font-size: 14px; letter-spacing: 0.16em;
padding: 0 24px;
min-width: 160px; text-align: center;
}
.xp-counter strong { font-size: 26px; }
.xp-dots {
display: flex; gap: 6px; flex-wrap: wrap; justify-content: center;
margin-top: 30px;
}
.xp-dots button {
width: 22px; height: 4px;
background: rgba(10,5,16,0.2);
transition: background 220ms, transform 220ms;
border: 0; cursor: pointer; padding: 0;
}
.xp-dots button.active { background: #0a0510; transform: scaleY(1.6); }
@media (max-width: 720px) {
.xp-stage { height: 480px; }
.xp-slot { width: 270px; height: 380px; margin: -190px 0 0 -135px; }
}
/* ======= WHO ATTENDS, marquee strip ======= */
.who {
padding: 100px 0;
background: var(--bg);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
overflow: hidden;
}
.who-eyebrow { text-align: center; margin-bottom: 32px; }
.who-marquee {
display: flex; gap: 60px;
animation: marquee 42s linear infinite;
width: max-content;
white-space: nowrap;
}
.who-marquee span {
font-family: var(--display);
font-weight: 800;
font-size: clamp(50px, 8vw, 110px);
text-transform: uppercase;
-webkit-text-stroke: 1.5px var(--ink);
color: transparent;
letter-spacing: -0.01em;
}
.who-marquee span.solid {
-webkit-text-stroke: 0; color: var(--ink);
background: linear-gradient(115deg, var(--neon-yellow), var(--hot-pink), var(--aqua));
-webkit-background-clip: text; background-clip: text;
}
.who-marquee .dot {
align-self: center; width: 16px; height: 16px; border-radius: 50%;
background: var(--hot-pink);
-webkit-text-stroke: 0;
}
/* ======= IMPACT ======= */
.impact {
padding: 140px clamp(20px, 4vw, 48px);
background:
radial-gradient(ellipse at 50% 0%, rgba(116,57,180,0.25), transparent 50%),
var(--bg);
}
.impact-head { text-align: center; margin-bottom: 80px; }
.impact-title {
font-family: var(--display); font-weight: 800;
font-size: clamp(48px, 7vw, 110px);
text-transform: uppercase; line-height: 1.0;
letter-spacing: -0.01em;
padding-bottom: 0.08em;
}
.impact-title em {
font-family: var(--display); font-style: normal; font-weight: 800;
text-transform: uppercase;
background: linear-gradient(115deg, var(--neon-yellow), var(--peach));
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.impact-sub { color: var(--ink-soft); font-size: 18px; max-width: 50ch; margin: 18px auto 0; }
.impact-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
background: transparent;
border: 0;
border-radius: 0;
overflow: visible;
}
.impact-tile {
background: transparent;
padding: 24px 28px;
position: relative;
min-height: auto;
display: flex; flex-direction: column; justify-content: flex-start; gap: 16px;
border: 1px solid rgba(255,255,255,0.18);
margin: -1px 0 0 -1px;
}
.impact-num {
font-family: var(--display); font-weight: 800;
font-size: clamp(48px, 6vw, 88px);
line-height: 1; letter-spacing: -0.02em;
background: linear-gradient(115deg, var(--white), var(--ink-soft));
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.impact-num .suffix { font-size: 0.5em; vertical-align: top; margin-left: 2px; color: var(--c, var(--hot-pink)); -webkit-text-fill-color: var(--c, var(--hot-pink));}
.impact-label {
font-size: 12px; letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-soft);
max-width: 18ch;
}
.impact-tile .badge {
position: absolute; top: 18px; right: 18px;
width: 32px; height: 32px;
border-radius: 50%;
background: var(--c, var(--hot-pink));
display: grid; place-items: center;
color: #0c0014; font-size: 11px; font-weight: 700;
}
@media (max-width: 900px) { .impact-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .impact-grid { grid-template-columns: 1fr; } }
/* ======= JOIN CTA, INTERACTIVE NET ======= */
.cta-join {
position: relative;
min-height: 100vh;
padding: clamp(80px, 12vh, 140px) clamp(20px, 4vw, 56px);
background: var(--hot-pink);
color: #0a0510;
overflow: hidden;
isolation: isolate;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
/* Net */
.join-net {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
}
.join-net-svg {
width: 100%;
height: 100%;
overflow: visible;
}
.join-net-svg polyline {
fill: none;
stroke: #050308;
stroke-width: 0.55;
vector-effect: non-scaling-stroke;
opacity: 1;
}
/* Pulsating idle orb */
.apply-orb {
position: relative;
z-index: 3;
display: inline-flex;
align-items: center;
justify-content: center;
width: 120px;
height: 120px;
border-radius: 50%;
background: #0a0510;
color: var(--hot-pink);
text-decoration: none;
font-family: var(--display);
font-weight: 800;
font-size: 20px;
letter-spacing: 0.16em;
text-transform: uppercase;
cursor: pointer;
overflow: hidden;
animation: orb-breathe 2.0s ease-in-out infinite;
transition:
width 900ms cubic-bezier(0.22,1,0.36,1),
height 900ms cubic-bezier(0.22,1,0.36,1),
box-shadow 600ms ease;
will-change: width, height, transform;
}
@keyframes orb-breathe {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.18); }
}
.apply-orb-default,
.apply-orb-expanded {
position: absolute;
inset: 0;
display: grid;
place-items: center;
}
.apply-orb-default {
transition: opacity 240ms ease, transform 600ms cubic-bezier(0.22,1,0.36,1);
}
.apply-orb-expanded {
opacity: 0;
transform: scale(0.6);
transition: opacity 360ms ease, transform 720ms cubic-bezier(0.22,1,0.36,1);
overflow: hidden;
}
/* Hover state: stop breathing, expand */
.apply-orb:hover {
width: clamp(420px, 50vmin, 640px);
height: clamp(420px, 50vmin, 640px);
animation: none;
}
.apply-orb:hover .apply-orb-default {
opacity: 0;
transform: scale(1.8);
}
.apply-orb:hover .apply-orb-expanded {
opacity: 1;
transform: scale(1);
}
.apply-orb:active { animation: none; transform: scale(0.98); transition: transform 120ms ease; }
/* Words container inside expanded orb */
.orb-words {
position: relative;
z-index: 2;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
column-gap: 0;
row-gap: 0.04em;
line-height: 1.04;
font-family: var(--display);
font-weight: 900;
font-size: clamp(68px, 11vmin, 148px);
letter-spacing: -0.02em;
text-transform: uppercase;
color: var(--hot-pink);
text-align: center;
max-width: 78%;
}
.orb-break {
flex-basis: 100%;
height: 0;
}
.orb-char {
display: inline-block;
transform-origin: center 70%;
animation: char-wave 1.7s ease-in-out infinite;
will-change: transform;
}
@keyframes char-wave {
0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
30% { transform: translateY(-12%) rotate(-5deg) scale(1.05); }
60% { transform: translateY(4%) rotate(3deg) scale(0.97); }
}
/* Stars + glitter inside hover orb */
.orb-glitter {
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0;
transition: opacity 400ms ease 180ms;
}
.apply-orb:hover .orb-glitter { opacity: 1; }
.orb-stars {
width: 100%;
height: 100%;
}
.orb-star {
transform-origin: center;
transform-box: fill-box;
animation: star-twinkle 2.4s ease-in-out infinite;
}
@keyframes star-twinkle {
0%, 100% { opacity: 0.25; transform: scale(0.6) rotate(0deg); }
50% { opacity: 1; transform: scale(1.15) rotate(45deg); }
}
@media (max-width: 720px) {
.apply-orb { width: 96px; height: 96px; font-size: 16px; }
.apply-orb:hover { width: 80vmin; height: 80vmin; }
.orb-stack { font-size: clamp(52px, 14vmin, 96px); }
}
/* ======= /JOIN CTA ======= */
/* ===================================================================
LIBO, the EWA mascot bot
=================================================================== */
.libo-root { position: fixed; right: 22px; bottom: 22px; z-index: 75; }
.libo-launcher {
position: relative;
width: 64px; height: 64px;
border: none; cursor: pointer;
border-radius: 22px;
background: linear-gradient(150deg, #FF2E92 0%, #FF0075 60%, #D60063 100%);
box-shadow: 0 14px 30px rgba(255,0,117,0.4), 0 4px 10px rgba(0,0,0,0.3);
display: grid; place-items: center;
animation: libo-bob 4.5s ease-in-out infinite;
transition: transform 200ms ease, border-radius 300ms ease;
}
.libo-launcher:hover { transform: scale(1.07) rotate(-3deg); }
.libo-launcher.is-open { border-radius: 50%; }
@keyframes libo-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.libo-pulse {
position: absolute; inset: 0; border-radius: inherit;
box-shadow: 0 0 0 0 rgba(255,0,117,0.5);
animation: libo-pulse 2.6s ease-out infinite;
}
@keyframes libo-pulse {
0% { box-shadow: 0 0 0 0 rgba(255,0,117,0.5); }
70% { box-shadow: 0 0 0 18px rgba(255,0,117,0); }
100% { box-shadow: 0 0 0 0 rgba(255,0,117,0); }
}
/* Libo's face (artwork) */
.libo-img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* Libo blinks: eyes squash shut for a beat every few seconds */
.libo-eyes { transform-box: fill-box; transform-origin: 50% 50%; animation: libo-blink 5.6s infinite; }
@keyframes libo-blink {
0%, 91.5%, 96.5%, 100% { transform: scaleY(1); }
93.5%, 94.5% { transform: scaleY(0.06); }
}
@media (prefers-reduced-motion: reduce) { .libo-eyes { animation: none; } }
.libo-launcher .libo-img { width: 72%; height: 72%; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.22)); }
.libo-badge {
flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
background: #FF0075; display: grid; place-items: center;
}
.libo-badge .libo-img { width: 74%; height: 74%; }
/* first-visit nudge */
.libo-nudge {
position: absolute; right: 76px; bottom: 14px;
white-space: nowrap;
background: #0a0510; color: #fff; border: 1px solid rgba(255,255,255,0.18);
padding: 10px 14px; border-radius: 4px 4px 4px 0;
font-size: 13px; font-weight: 600; cursor: pointer;
box-shadow: 0 10px 26px rgba(0,0,0,0.4);
animation: libo-nudge-in 400ms cubic-bezier(0.22,1,0.36,1);
}
.libo-nudge::after {
content: ''; position: absolute; right: -7px; left: auto; bottom: 0;
border-top: 8px solid transparent; border-left: 8px solid #0a0510;
}
@keyframes libo-nudge-in { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
/* panel */
.libo-panel {
position: absolute; right: 0; left: auto; bottom: 78px;
width: 300px; max-width: calc(100vw - 44px);
background: rgba(12,9,18,0.96);
backdrop-filter: blur(14px);
border: 1px solid rgba(255,255,255,0.14);
border-radius: 8px;
box-shadow: 0 24px 60px rgba(0,0,0,0.55);
overflow: hidden;
animation: libo-panel-in 360ms cubic-bezier(0.22,1,0.36,1);
}
@keyframes libo-panel-in { from { opacity: 0; transform: translateY(12px) scale(0.97); } to { opacity: 1; transform: none; } }
.libo-panel-head {
display: flex; align-items: center; gap: 10px;
padding: 14px 14px 12px;
background: linear-gradient(120deg, rgba(255,0,117,0.22), rgba(175,102,250,0.14));
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.libo-panel-head .libo-face { width: 34px; height: 34px; flex: 0 0 auto; }
.libo-panel-id { display: flex; flex-direction: column; line-height: 1.1; flex: 1; }
.libo-panel-id strong { font-family: var(--display); font-weight: 800; font-size: 16px; letter-spacing: 0.02em; color: #fff; }
.libo-panel-id span { font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-top: 2px; }
.libo-close {
background: transparent; border: none; color: rgba(255,255,255,0.6); cursor: pointer;
width: 26px; height: 26px; display: grid; place-items: center; border-radius: 4px;
}
.libo-close:hover { background: rgba(255,255,255,0.1); color: #fff; }
.libo-bubble { padding: 16px 16px 6px; }
.libo-say {
color: #fff; font-size: 14.5px; line-height: 1.5; min-height: 3em;
border-left: 2px solid var(--rc, #00F4FF); padding-left: 11px;
}
.libo-caret {
display: inline-block; width: 7px; height: 15px; vertical-align: -2px;
background: var(--rc, #00F4FF); margin-left: 2px;
animation: libo-caret 0.9s steps(1) infinite;
}
@keyframes libo-caret { 50% { opacity: 0; } }
.libo-actions { padding: 6px 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.libo-cta {
width: 100%; text-align: center; justify-content: center;
background: var(--hot-pink, #FF0075); color: #0a0510;
font-weight: 700; padding: 12px 16px; border: none; cursor: pointer;
border-radius: 2px; font-size: 14px;
display: inline-flex; align-items: center; gap: 8px;
}
.libo-cta:hover { filter: brightness(1.08); }
.libo-cta:disabled { opacity: 0.6; cursor: default; }
.libo-chiprow { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 2px; }
.libo-chip {
flex: 1; min-width: 80px; text-align: center;
background: rgba(255,255,255,0.06); color: #fff; text-decoration: none;
border: 1px solid rgba(255,255,255,0.14); border-radius: 2px;
padding: 9px 10px; font-size: 12.5px; font-weight: 600; cursor: pointer;
transition: background 180ms ease;
}
.libo-chip:hover { background: rgba(255,255,255,0.13); }
.libo-chip-alert { background: var(--hot-pink, #FF0075); color: #0a0510; border-color: var(--hot-pink, #FF0075); font-weight: 700; }
.libo-chip-alert:hover { background: #fff; border-color: #fff; color: #0a0510; }
/* Apply quick link — pink card, black label (colours editable in the backend) */
.libo-chip-apply { background: var(--hot-pink, #FF0075); color: #000; border-color: var(--hot-pink, #FF0075); font-weight: 700; }
.libo-chip-apply:hover { filter: brightness(1.12); }
@media (max-width: 520px) {
.libo-root { right: 14px; bottom: 14px; }
.libo-launcher { width: 56px; height: 56px; }
.libo-face { width: 36px; height: 36px; }
}
@media (prefers-reduced-motion: reduce) {
.libo-launcher, .libo-pulse, .libo-eye, .libo-antenna::after { animation: none; }
}
/* ===================================================================
CATCH LIBO, the mascot minigame
=================================================================== */
.libo-game-scrim {
position: fixed; inset: 0; z-index: 90;
background: rgba(10,5,16,0.62);
display: grid; place-items: center; padding: 20px;
animation: libo-scrim-in 220ms ease;
}
@keyframes libo-scrim-in { from { opacity: 0; } to { opacity: 1; } }
.libo-game {
width: min(460px, 94vw); height: min(560px, 84vh);
display: flex; flex-direction: column;
background: #f4f1ea; color: #0a0510;
border-radius: 10px; overflow: hidden;
box-shadow: 0 40px 100px rgba(0,0,0,0.5);
border: 1px solid rgba(10,5,16,0.12);
animation: libo-game-in 320ms cubic-bezier(0.22,1,0.36,1);
}
@keyframes libo-game-in { from { opacity: 0; transform: translateY(16px) scale(0.97); } to { opacity: 1; transform: none; } }
.libo-game-top {
display: flex; align-items: center; gap: 12px;
padding: 14px; background: var(--hot-pink); color: #0a0510;
}
.libo-game-id { display: flex; flex-direction: column; flex: 1; line-height: 1.15; min-width: 0; }
.libo-game-title { font-family: var(--display); font-weight: 800; font-size: 19px; letter-spacing: 0.01em; text-transform: uppercase; }
.libo-game-hint { font-size: 12px; font-weight: 600; opacity: 0.8; margin-top: 2px; }
.libo-game-misses { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; background: rgba(10,5,16,0.14); padding: 4px 9px; border-radius: 999px; white-space: nowrap; }
.libo-game-close { color: #0a0510; flex: 0 0 auto; }
.libo-game-close:hover { background: rgba(10,5,16,0.14); color: #0a0510; }
.libo-field {
position: relative; flex: 1; overflow: hidden; cursor: crosshair;
background-color: #f4f1ea;
background-image:
linear-gradient(rgba(10,5,16,0.07) 1px, transparent 1px),
linear-gradient(90deg, rgba(10,5,16,0.07) 1px, transparent 1px);
background-size: 34px 34px;
touch-action: none;
}
.libo-sprite {
position: absolute; top: 0; left: 0;
width: 46px; height: 46px; padding: 0; border: none; background: transparent;
cursor: pointer; -webkit-tap-highlight-color: transparent;
transition: transform 520ms cubic-bezier(0.34,1.4,0.5,1);
will-change: transform;
filter: drop-shadow(0 8px 12px rgba(10,5,16,0.25));
}
.libo-sprite.is-wobble { transition: transform 300ms cubic-bezier(0.5,0,0.5,1); }
.libo-sprite .libo-img { width: 100%; height: 100%; pointer-events: none; animation: libo-bob 1.8s ease-in-out infinite; }
.libo-sprite.is-wobble .libo-img { animation: libo-wobble 300ms ease; }
@keyframes libo-bob { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-5px) rotate(3deg); } }
@keyframes libo-wobble { 0%,100% { transform: none; } 25% { transform: rotate(-16deg) scale(1.06); } 75% { transform: rotate(16deg) scale(1.06); } }
.libo-win {
position: absolute; inset: 0; z-index: 4;
display: flex; flex-direction: column; align-items: center; justify-content: center;
text-align: center; padding: 24px;
background: #ffffff; color: #0a0510;
animation: libo-scrim-in 360ms ease;
}
.libo-win-libo { width: 72px; height: 72px; display: block; margin-bottom: 4px; animation: libo-win-pop 520ms cubic-bezier(0.22,1,0.36,1); }
.libo-win-libo .libo-img { width: 100%; height: 100%; }
@keyframes libo-win-pop { 0% { transform: scale(0.4) rotate(-22deg); } 60% { transform: scale(1.12) rotate(8deg); } 100% { transform: none; } }
.libo-win-kick { font-family: var(--display); font-weight: 800; font-size: 18px; letter-spacing: 0.04em; color: #0a0510; }
.libo-win-lead { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: #0a0510; margin-top: 14px; margin-bottom: 9px; }
.libo-win-rule { width: 54px; height: 4px; background: var(--rc, #FF0075); border-radius: 2px; margin: 12px 0 2px; }
.libo-win-name { font-family: var(--display); font-weight: 800; font-size: clamp(30px, 8vw, 48px); line-height: 0.98; text-transform: uppercase; letter-spacing: -0.01em; color: #0a0510; }
.libo-win-sub { margin-top: 10px; color: rgba(10,5,16,0.7); font-size: 14px; line-height: 1.45; max-width: 290px; }
.libo-win-actions { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; width: min(290px, 82%); }
.libo-win-apply { background: #ffffff; color: #0a0510; border: 1.6px solid #0a0510; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; padding: 13px 18px; border-radius: 2px; }
.libo-win-apply:hover { background: #0a0510; color: #fff; }
.libo-win-again { background: #ffffff; color: #0a0510; border: 1px solid rgba(10,5,16,0.3); padding: 11px 18px; border-radius: 2px; cursor: pointer; font-weight: 600; font-size: 13px; letter-spacing: 0.04em; }
.libo-win-again:hover { background: rgba(10,5,16,0.06); }
/* confetti (shared) */
.ewa-confetti { position: absolute; inset: 0; overflow: visible; pointer-events: none; z-index: 0; }
.ewa-confetti-bit { position: absolute; top: 8%; border-radius: 1px; animation: ewa-confetti-fall linear forwards; transform: rotate(var(--rot)); }
@keyframes ewa-confetti-fall {
0% { opacity: 1; transform: translate(0,0) rotate(var(--rot)); }
100% { opacity: 0; transform: translate(var(--xend), 360px) rotate(calc(var(--rot) + 540deg)); }
}
@media (prefers-reduced-motion: reduce) {
.libo-sprite { transition: none; }
.libo-sprite .libo-img, .libo-win-libo { animation: none; }
.ewa-confetti { display: none; }
}
/* ======= FEATURED LINEUP, DRAG WHEEL ======= */
.lineup {
background: #0a0510;
color: #ffffff;
padding: clamp(96px, 14vh, 160px) clamp(20px, 4vw, 56px) clamp(80px, 10vh, 120px);
position: relative;
overflow: hidden;
}
.lineup-head {
display: grid;
grid-template-columns: 1.1fr auto;
gap: 48px;
align-items: end;
margin-bottom: 56px;
max-width: 1480px;
margin-left: auto;
margin-right: auto;
}
.lineup-eyebrow {
color: rgba(255,255,255,0.55);
margin-bottom: 18px;
}
.lineup-title {
font-family: var(--display);
font-weight: 800;
font-size: clamp(48px, 6vw, 96px);
line-height: 1.07;
letter-spacing: -0.015em;
text-transform: uppercase;
margin: 0;
padding-bottom: 0.08em;
text-wrap: balance;
color: #ffffff;
}
.lineup-title em {
font-family: var(--display);
font-style: normal;
font-weight: 800;
text-transform: uppercase;
}
.lineup-meta {
display: flex;
justify-content: flex-end;
align-items: flex-end;
}
.lineup-cta {
font-family: var(--display);
font-weight: 700;
font-size: 12px;
letter-spacing: 0.16em;
text-transform: uppercase;
}
/* Stage */
.lu-stage {
position: relative;
height: clamp(420px, 54vh, 560px);
width: 100%;
perspective: 1600px;
perspective-origin: 50% 60%;
user-select: none;
}
.lu-track {
position: absolute;
inset: 0;
display: block;
cursor: grab;
transform-style: preserve-3d;
}
.lu-track.is-dragging { cursor: grabbing; }
.lu-track.is-dragging .lu-card { transition: none; }
.lu-card {
position: absolute;
left: 50%;
top: 8%;
width: clamp(220px, 19vw, 300px);
height: clamp(300px, 26vw, 420px);
background: #15101c;
border-radius: 14px;
box-shadow:
0 30px 60px rgba(0,0,0,0.55),
0 2px 8px rgba(0,0,0,0.4),
0 0 0 1px rgba(255,255,255,0.06) inset;
overflow: hidden;
transform-origin: center 75%;
transform: translate3d(-50%, 0, 0);
transition: transform 760ms cubic-bezier(0.22,1,0.36,1), opacity 540ms ease, box-shadow 540ms ease, filter 540ms ease;
will-change: transform, opacity;
cursor: pointer;
isolation: isolate;
filter: brightness(0.55) saturate(0.65);
}
.lu-img {
position: absolute;
inset: 0;
background-size: cover;
background-position: center top;
filter: grayscale(45%) contrast(1.02);
transition: transform 800ms cubic-bezier(0.22,1,0.36,1), filter 540ms ease;
z-index: 1;
}
.lu-shade {
position: absolute;
inset: 0;
z-index: 2;
background:
linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,0.78) 100%);
}
.lu-name {
position: absolute;
left: 18px;
right: 18px;
bottom: 18px;
z-index: 3;
color: #fff;
font-family: var(--display);
font-weight: 800;
font-size: clamp(20px, 1.5vw, 26px);
line-height: 1.0;
letter-spacing: -0.01em;
text-transform: uppercase;
text-wrap: balance;
opacity: 0;
transform: translateY(8px);
transition: opacity 360ms ease, transform 480ms cubic-bezier(0.22,1,0.36,1);
}
.lu-card.is-active {
filter: brightness(1) saturate(1);
box-shadow:
0 50px 110px rgba(255,0,117,0.32),
0 30px 60px rgba(0,0,0,0.7),
0 0 0 1px rgba(255,255,255,0.18) inset;
}
.lu-card.is-active .lu-img { filter: grayscale(0%) contrast(1.08); transform: scale(1.04); }
.lu-card.is-active .lu-name { opacity: 1; transform: translateY(0); }
/* Prev/next arrow controls */
.lu-controls {
margin-top: 24px;
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
}
.lu-nav {
width: 44px; height: 44px;
display: inline-grid;
place-items: center;
background: transparent;
border: 1px solid rgba(255,255,255,0.32);
color: #ffffff;
cursor: pointer;
border-radius: 0;
transition: background 200ms ease, color 200ms ease, border-color 200ms ease, opacity 200ms ease;
}
.lu-nav:hover:not(:disabled) {
background: #ffffff;
color: #0a0510;
border-color: #ffffff;
}
.lu-nav:disabled { opacity: 0.3; cursor: not-allowed; }
.lu-counter {
font-family: var(--mono);
font-size: 12px;
letter-spacing: 0.22em;
color: #ffffff;
min-width: 72px;
text-align: center;
}
.lu-counter span { color: rgba(255,255,255,0.5); }
/* Active info */
.lu-active-info {
margin-top: 28px;
display: flex;
align-items: baseline;
justify-content: center;
gap: 18px;
flex-wrap: wrap;
text-align: center;
}
.lu-active-name {
font-family: var(--display);
font-weight: 800;
font-size: clamp(22px, 2vw, 32px);
letter-spacing: -0.01em;
text-transform: uppercase;
color: #ffffff;
}
.lu-active-role {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.26em;
text-transform: uppercase;
color: rgba(255,255,255,0.6);
position: relative;
padding-left: 22px;
}
.lu-active-role::before {
content: '';
position: absolute;
left: 0;
top: 50%;
width: 12px;
height: 1px;
background: rgba(255,255,255,0.4);
}
@media (max-width: 900px) {
.lineup-head { grid-template-columns: 1fr; gap: 28px; }
.lineup-meta { justify-content: flex-start; }
.lu-card { width: clamp(180px, 56vw, 260px); height: clamp(260px, 78vw, 360px); }
}
/* ======= /FEATURED LINEUP ======= */
.cta-pair {
padding: 60px clamp(20px, 4vw, 48px) 140px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
}
.cta-block {
position: relative;
padding: 60px 44px;
border-radius: 24px;
min-height: 460px;
overflow: hidden;
display: flex; flex-direction: column; justify-content: space-between;
isolation: isolate;
}
.cta-block .cta-bg { position: absolute; inset: 0; z-index: 0; }
.cta-partner .cta-bg {
background:
radial-gradient(circle at 80% 30%, var(--hot-pink) 0%, transparent 50%),
radial-gradient(circle at 10% 80%, var(--lavender) 0%, transparent 50%),
linear-gradient(135deg, #3D0178 0%, #1a0240 100%);
}
.cta-apply .cta-bg {
background:
radial-gradient(circle at 20% 30%, var(--aqua) 0%, transparent 50%),
radial-gradient(circle at 90% 80%, var(--lime) 0%, transparent 50%),
linear-gradient(135deg, #002b2a 0%, #001a18 100%);
}
.cta-block .cta-noise {
position: absolute; inset: 0; z-index: 1;
background-image: url("data:image/svg+xml;utf8,");
mix-blend-mode: overlay;
opacity: 0.35;
}
.cta-content { position: relative; z-index: 2; }
.cta-tag {
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 12px;
border-radius: 999px;
background: rgba(0,0,0,0.35);
border: 1px solid rgba(255,255,255,0.2);
font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
backdrop-filter: blur(6px);
}
.cta-title {
font-family: var(--display); font-weight: 800;
font-size: clamp(40px, 5.5vw, 76px);
text-transform: uppercase;
line-height: 1.0;
letter-spacing: -0.01em;
margin: 30px 0 24px;
max-width: 14ch;
padding-bottom: 0.08em;
}
.cta-title em {
font-family: var(--display); font-style: normal; font-weight: 800;
text-transform: uppercase;
}
.cta-block p { font-size: 15px; line-height: 1.55; color: rgba(255,255,255,0.85); max-width: 36ch; }
.cta-actions { position: relative; z-index: 2; display: flex; gap: 10px; flex-wrap: wrap; margin-top: 32px; }
/* 3D floating shape inside CTA */
.cta-shape {
position: absolute;
z-index: 1;
pointer-events: none;
filter: drop-shadow(0 20px 40px rgba(0,0,0,0.45));
}
.cta-partner .cta-shape { right: -60px; top: 20px; width: 280px; animation: float-y 6s ease-in-out infinite; }
.cta-apply .cta-shape { right: -40px; bottom: 0; width: 240px; animation: float-y 7s ease-in-out infinite reverse; }
@keyframes float-y { 50% { transform: translateY(-22px) rotate(8deg); } }
@media (max-width: 900px) { .cta-pair { grid-template-columns: 1fr; } }
/* ======= REWIND TIMELINE ======= */
.rewind {
padding: 140px clamp(20px, 4vw, 48px);
background: var(--bg);
}
.rewind-head {
display: flex; justify-content: space-between; align-items: end; gap: 30px;
margin-bottom: 60px;
}
.rewind-title {
font-family: var(--display); font-weight: 800;
font-size: clamp(48px, 7vw, 110px);
text-transform: uppercase; line-height: 1.0;
letter-spacing: -0.01em;
padding-bottom: 0.08em;
}
.rewind-title em {
font-family: var(--display); font-style: normal; font-weight: 800;
text-transform: uppercase;
}
.timeline {
position: relative;
display: grid; grid-template-columns: repeat(5, 1fr);
gap: 14px;
}
.year-card {
position: relative;
padding: 24px;
border: 1px solid var(--line);
border-radius: 18px;
background: rgba(255,255,255,0.03);
min-height: 280px;
overflow: hidden;
transition: transform 350ms;
display: flex; flex-direction: column; justify-content: space-between;
}
.year-card:hover { transform: translateY(-6px); }
.year-card.future {
background: linear-gradient(135deg, var(--purple-deep) 0%, var(--hot-pink) 100%);
border-color: var(--hot-pink);
}
.year-card.future::before {
content: ''; position: absolute; inset: 0;
background-image: url("data:image/svg+xml;utf8,");
mix-blend-mode: overlay;
opacity: 0.35;
}
.year-card > * { position: relative; z-index: 1; }
.year-num {
font-family: var(--display); font-weight: 800;
font-size: 64px; line-height: 0.97;
letter-spacing: -0.02em;
}
.year-tag {
font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
color: var(--ink-soft);
margin-top: 8px;
}
.year-card.future .year-tag { color: rgba(255,255,255,0.85); }
.year-meta { font-size: 13px; color: var(--ink-soft); line-height: 1.5; }
.year-card.future .year-meta { color: rgba(255,255,255,0.92); }
.year-key {
font-family: var(--serif); font-size: 18px; line-height: 1.25; margin-top: 16px;
}
@media (max-width: 900px) { .timeline { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .timeline { grid-template-columns: 1fr; } }
/* ======= STORIES ======= */
.stories {
padding: 140px clamp(20px, 4vw, 48px);
background: var(--bg);
}
.stories-head {
display: flex; justify-content: space-between; align-items: end;
margin-bottom: 56px; gap: 30px;
}
.stories-title {
font-family: var(--display); font-weight: 800;
font-size: clamp(48px, 7vw, 110px);
text-transform: uppercase; line-height: 1.0;
letter-spacing: -0.01em;
padding-bottom: 0.08em;
}
.stories-title em {
font-family: var(--display); font-style: normal; font-weight: 800;
text-transform: uppercase;
}
.stories-grid {
display: grid;
grid-template-columns: 1.6fr 1fr 1fr;
gap: 16px;
}
.story-card {
border-radius: 20px;
overflow: hidden;
background: #15101e;
position: relative;
min-height: 360px;
display: flex; flex-direction: column; justify-content: flex-end;
cursor: pointer;
border: 1px solid var(--line);
transition: transform 350ms;
}
.story-card.featured { grid-row: span 2; min-height: 740px; }
.story-card:hover { transform: translateY(-4px); }
.story-img {
position: absolute; inset: 0;
background-size: cover; background-position: center;
transition: transform 700ms ease;
}
.story-card:hover .story-img { transform: scale(1.04); }
.story-card::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.9) 100%);
}
.story-meta {
position: relative; z-index: 2;
padding: 24px;
display: flex; flex-direction: column; gap: 12px;
}
.story-tag {
display: inline-flex;
font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
padding: 6px 10px;
background: rgba(0,0,0,0.5);
border: 1px solid var(--line-strong);
border-radius: 999px;
backdrop-filter: blur(6px);
align-self: flex-start;
}
.story-card.featured .story-title {
font-family: var(--display);
font-weight: 800;
font-size: 44px; text-transform: uppercase;
line-height: 1.07;
letter-spacing: -0.01em;
}
.story-title {
font-family: var(--display);
font-weight: 700;
font-size: 24px; text-transform: uppercase;
line-height: 1;
}
.story-byline {
font-size: 12px; color: rgba(255,255,255,0.65);
letter-spacing: 0.12em; text-transform: uppercase;
}
@media (max-width: 900px) {
.stories-grid { grid-template-columns: 1fr 1fr; }
.story-card.featured { grid-row: auto; min-height: 360px; grid-column: span 2; }
}
@media (max-width: 520px) {
.stories-grid { grid-template-columns: 1fr; }
.story-card.featured { grid-column: auto; }
}
/* ======= NEWSLETTER ======= */
.newsletter {
padding: 80px clamp(20px, 4vw, 48px) 80px;
background: var(--bg);
}
.newsletter-card {
position: relative;
border-radius: 28px;
padding: 64px clamp(28px, 4vw, 60px);
overflow: hidden;
border: 1px solid var(--line-strong);
background:
radial-gradient(circle at 90% 110%, var(--hot-pink), transparent 55%),
radial-gradient(circle at 10% -10%, var(--aqua), transparent 55%),
#0a0510;
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 40px; align-items: center;
}
.newsletter-card::before {
content: ''; position: absolute; inset: 0;
background-image: url("data:image/svg+xml;utf8,");
mix-blend-mode: overlay; opacity: 0.3;
pointer-events: none;
}
.newsletter h2 {
position: relative;
font-family: var(--display); font-weight: 800;
font-size: clamp(40px, 5vw, 76px);
text-transform: uppercase;
line-height: 1.0; letter-spacing: -0.01em;
max-width: 14ch;
padding-bottom: 0.08em;
}
.newsletter h2 em {
font-family: var(--display); font-style: normal; font-weight: 800;
text-transform: uppercase;
}
.newsletter p { position: relative; margin-top: 16px; color: rgba(255,255,255,0.8); font-size: 15px; max-width: 38ch; }
.newsletter-form { position: relative; display: flex; flex-direction: column; gap: 12px; }
.newsletter-row {
display: flex;
background: rgba(255,255,255,0.06);
border: 1px solid var(--line-strong);
border-radius: 0;
padding: 6px;
align-items: center;
}
.newsletter-row input {
flex: 1; min-width: 0;
padding: 14px 18px;
background: transparent; border: 0; outline: none;
color: var(--white); font-size: 14px;
font-family: var(--sans);
border-radius: 0;
}
.newsletter-row input::placeholder { color: rgba(255,255,255,0.55); }
.newsletter-row .btn-primary { padding: 12px 20px; }
.newsletter-segments {
display: flex; gap: 6px; flex-wrap: wrap;
margin-top: 4px;
}
.seg-chip {
padding: 8px 14px;
font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
border-radius: 0;
border: 1px solid var(--line-strong);
cursor: pointer;
transition: background 220ms;
}
.seg-chip:hover { background: rgba(255,255,255,0.1); }
.seg-chip.active {
background: var(--white); color: #0c0014; border-color: var(--white);
}
@media (max-width: 900px) { .newsletter-card { grid-template-columns: 1fr; } }
/* ======= FOOTER ======= */
.site-footer {
background: var(--bg);
border-top: 1px solid var(--line);
position: relative;
overflow: hidden;
padding-top: 80px;
}
.footer-grid {
padding: 0 clamp(20px, 4vw, 48px);
display: grid;
grid-template-columns: minmax(200px, 1.6fr) repeat(var(--fcols, 4), minmax(0, 1fr));
gap: 40px;
margin-bottom: 70px;
}
.footer-brand { display: flex; flex-direction: column; gap: 16px; max-width: 320px; }
.footer-brand p { font-size: 16px; color: var(--ink-soft); line-height: 1.55; }
.footer-col h4 {
font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
color: var(--ink-soft); margin-bottom: 18px; font-weight: 500;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-col li a {
font-size: 16px; color: var(--ink);
transition: color 200ms;
}
.footer-col li a:hover { color: var(--neon-yellow); }
.footer-socials { display: grid; grid-template-columns: repeat(6, 40px); gap: 10px; margin-top: 4px; justify-content: start; }
.footer-socials a {
width: 40px; height: 40px;
border-radius: 50%;
display: grid; place-items: center;
border: 1px solid var(--line-strong);
transition: background 220ms, border-color 220ms;
}
.footer-socials a:hover { background: var(--white); color: #0c0014; border-color: var(--white); }
.footer-massive {
padding: 72px 0 12px;
text-align: center;
overflow: hidden;
position: relative;
}
.footer-massive svg {
display: block; width: 100%; height: auto;
}
.footer-base {
display: flex; justify-content: space-between; align-items: center;
padding: 28px clamp(20px, 4vw, 48px);
border-top: 1px solid var(--line);
font-size: 12px; color: var(--ink-soft);
letter-spacing: 0.08em;
}
.footer-base span strong { color: var(--ink); font-weight: 600; }
.footer-livespot { color: var(--neon-yellow); font-weight: 600; transition: opacity 200ms; }
.footer-livespot:hover { opacity: 0.75; text-decoration: underline; }
.footer-locales { display: flex; gap: 24px; align-items: center; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } .footer-base { flex-direction: column; gap: 10px; } }
/* mobile menu drawer */
.menu-drawer {
position: fixed; inset: 0;
z-index: 90;
background: rgba(7,6,10,0.9);
backdrop-filter: blur(20px);
display: flex; flex-direction: column;
padding: 90px clamp(20px, 4vw, 48px) 40px;
transform: translateX(100%);
transition: transform 380ms cubic-bezier(0.7,0,0.2,1);
}
.menu-drawer.open { transform: translateX(0); }
.mdrawer-nav {
list-style: none; display: flex; flex-direction: column; align-items: stretch;
text-align: center; margin-bottom: auto; overflow-y: auto; padding-right: 4px;
}
.mdrawer-link, .mdrawer-acc {
font-family: var(--serif); font-weight: 600; font-size: 21px;
letter-spacing: -0.01em; line-height: 1.2; color: #fff; text-transform: none;
width: 100%; text-align: center; background: none; border: 0;
border-bottom: 1px solid rgba(255,255,255,0.1); cursor: pointer;
padding: 15px 0; display: flex; align-items: center; justify-content: center; gap: 8px;
}
.mdrawer-link:hover, .mdrawer-acc:hover { color: var(--hot-pink); }
.mdrawer-chev { flex: none; opacity: 0.6; transition: transform 260ms cubic-bezier(0.4,0,0.2,1); }
.mdrawer-group.open > .mdrawer-acc > .mdrawer-chev,
.mdrawer-subgroup.open > .mdrawer-acc > .mdrawer-chev { transform: rotate(180deg); }
.mdrawer-sub { display: none; flex-direction: column; padding: 4px 0 10px; }
.mdrawer-group.open > .mdrawer-sub { display: flex; }
.mdrawer-sub a, .mdrawer-acc-sub {
font-family: var(--serif); font-weight: 500; font-size: 15.5px; text-transform: none;
letter-spacing: 0; color: rgba(255,255,255,0.82); background: none; border: 0;
width: 100%; text-align: center; cursor: pointer;
padding: 11px 0; display: flex; align-items: center; justify-content: center; gap: 8px;
}
.mdrawer-sub a:hover, .mdrawer-acc-sub:hover { color: #fff; }
.mdrawer-subsub { display: none; flex-direction: column; padding: 2px 0 6px; }
.mdrawer-subgroup.open > .mdrawer-subsub { display: flex; }
.mdrawer-subsub a {
font-size: 14px; color: rgba(255,255,255,0.66); padding: 9px 0; border: 0;
}
/* legacy big-list styles (kept for any old markup) */
.menu-drawer ul {
list-style: none; display: flex; flex-direction: column; gap: 6px;
margin-bottom: auto;
}
.menu-drawer li a {
font-family: var(--display); font-weight: 800;
font-size: 44px; text-transform: uppercase; line-height: 1.05;
letter-spacing: -0.01em;
}
.menu-close {
position: absolute; top: 26px; right: clamp(20px, 4vw, 48px);
width: 44px; height: 44px;
display: grid; place-items: center;
border-radius: 0; border: 0; background: none; color: #fff; cursor: pointer;
}
.menu-drawer-foot {
display: flex; flex-direction: column; gap: 14px;
padding-top: 30px;
}
/* ======= LIGHT SECTIONS ======= */
.section-light {
background: #f4f1ea;
color: #0a0510;
}
.section-light * { color: inherit; }
.section-light .eyebrow { color: rgba(10,5,16,0.6); }
.section-light p { color: rgba(10,5,16,0.7); }
.section-light .what-stat { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.1); }
.section-light .what-stat .label { color: rgba(10,5,16,0.6); }
.section-light .gap-card { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.1); }
.section-light .gap-card .gap-num,
.section-light .gap-card .gap-desc { color: rgba(10,5,16,0.65); }
.section-light .btn-ghost { background: rgba(0,0,0,0.06); border-color: rgba(0,0,0,0.15); color: #0a0510; }
.section-light .btn-outline { border-color: #0a0510; color: #0a0510; }
/* ======= PARTNERS STRIP (light) ======= */
.partners {
background: #f4f1ea;
color: #0a0510;
padding: 80px clamp(20px, 4vw, 48px);
}
.partners-head {
display: flex; justify-content: space-between; align-items: flex-end;
gap: 20px; margin-bottom: 0; flex-wrap: wrap;
width: 100%;
}
.partners-title {
font-family: var(--display); font-weight: 800;
font-size: clamp(34px, 4vw, 56px);
line-height: 1.0; text-transform: uppercase;
letter-spacing: -0.01em;
padding-bottom: 0.08em;
max-width: 18ch;
}
.partners-title em { font-family: var(--display); font-style: normal; font-weight: 800; text-transform: uppercase; }
.partners .btn-ghost { background: #fff; border: 1px solid #0a0510; color: #0a0510; transition: background 220ms, color 220ms; }
.partners .btn-ghost:hover { background: #0a0510; color: #fff; }
/* ── Ruled ledger logo grid (gridlines on the lite background) ── */
.partners-logogrid {
margin-top: 64px;
display: grid;
grid-template-columns: repeat(6, 1fr);
border-top: 1px solid rgba(10,5,16,0.16);
border-left: 1px solid rgba(10,5,16,0.16);
}
.plogo-cell {
position: relative;
aspect-ratio: 16 / 10;
display: grid; place-items: center;
padding: clamp(18px, 2vw, 30px);
border-right: 1px solid rgba(10,5,16,0.16);
border-bottom: 1px solid rgba(10,5,16,0.16);
color: #0a0510;
transition: background 260ms ease;
}
.plogo-cell svg {
width: auto; height: auto; max-width: 78%; max-height: 48px;
filter: grayscale(100%) brightness(0.55) contrast(1.1);
opacity: 0.9;
transition: opacity 260ms ease, filter 260ms ease, transform 260ms ease;
}
.plogo-cell .partner-img {
width: auto; height: auto; max-width: 78%; max-height: 48px; object-fit: contain;
filter: grayscale(100%) brightness(0.55) contrast(1.1);
opacity: 0.9;
transition: opacity 260ms ease, filter 260ms ease, transform 260ms ease;
}
.plogo-cell .partner-name {
font-family: var(--display); font-weight: 800; text-transform: uppercase;
font-size: clamp(15px, 1.5vw, 21px); letter-spacing: 0.05em;
color: #0a0510;
transition: color 260ms ease, transform 260ms ease;
}
.plogo-cell:hover { background: #fff; }
.plogo-cell:hover svg,
.plogo-cell:hover .partner-img { filter: grayscale(100%) brightness(0.12) contrast(1.2) drop-shadow(0 3px 16px rgba(10,5,16,0.35)); opacity: 1; transform: scale(1.07); }
.plogo-cell:hover .partner-name { color: #0a0510; transform: scale(1.05); }
@media (max-width: 900px) { .partners-logogrid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .partners-logogrid { grid-template-columns: repeat(2, 1fr); } }
/* ============================================================
2026 REFINEMENTS, responsiveness, CMS-rich content, layout
============================================================ */
/* Hero marquee divider: star glyph -> solid block */
.marquee-track .star { font-size: 0 !important; }
.marquee-track .star::before { content: ''; display: block; width: 11px; height: 11px; background: var(--hot-pink); }
/* Gradient text utility, wrap any word in from the CMS */
.grad {
background: linear-gradient(115deg, #ff5aa0 0%, #ffb96e 38%, #5be1ff 72%, #d8b1ff 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
}
/* Orphan control: keep a healthy minimum of words on a wrapped line */
.what-detail h3, .theme-blurb, .tracks-sub, .partners-title,
.what-text, .tracks-title, .theme-title, .impact-label,
.audience-title, .what-detail .what-body { text-wrap: balance; }
/* Rich CMS body (rendered HTML) matches the old paragraph styling */
.what-detail .what-body { font-size: 18px; line-height: 1.6; color: var(--ink-soft); max-width: none; }
.what-detail .what-body p { margin: 0 0 14px; }
.what-detail .what-body p:last-child { margin-bottom: 0; }
/* Section blurbs aligned with the big heading line (not the kicker) */
.theme-head { align-items: end; }
.theme-blurb { padding-bottom: 0.5em; margin-bottom: 0; }
.tracks-head { align-items: flex-end; }
.tracks-sub { padding-bottom: 0.5em; margin-bottom: 0; }
/* Impact labels held to ~two lines */
.impact-label { max-width: 22ch; }
/* Trusted-by-partners: taller section */
.partners { padding-top: 120px; padding-bottom: 140px; }
.partner-cell { min-height: 168px; }
/* Wide screens: let fixed-width headings use the space instead of wrapping */
.what-text, .theme-title { width: auto !important; max-width: 100%; }
/* Tertiary hero CTA */
.hero-cta-row .btn-line { background: transparent; border: 0; color: #fff; opacity: 0.82; }
.hero-cta-row .btn-line:hover { opacity: 1; }
.hero-cta-row .btn-line .btn-arrow { display: inline-flex; margin-left: 6px; }
/* ======= MANIFESTO (light) ======= */
.manifesto {
background: #f4f1ea;
color: #0a0510;
padding: 140px clamp(20px, 4vw, 48px);
position: relative;
overflow: hidden;
}
.manifesto-inner { max-width: 1080px; margin: 0 auto; }
.manifesto-eyebrow { color: rgba(10,5,16,0.55); margin-bottom: 30px; }
.manifesto-text {
font-family: var(--display);
font-weight: 800;
font-size: clamp(38px, 5vw, 80px);
line-height: 1.02;
text-transform: uppercase;
letter-spacing: -0.015em;
padding-bottom: 0.08em;
}
.manifesto-text em {
font-family: var(--display); font-style: normal; font-weight: 800;
text-transform: uppercase;
background: linear-gradient(115deg, #FF0075, #7439B4, #00847D);
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.manifesto-text .stroke {
-webkit-text-stroke: 2px #0a0510; color: transparent;
}
.manifesto-foot {
margin-top: 60px;
display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
}
.manifesto-sig {
font-family: var(--serif);
font-style: normal;
font-size: 18px;
color: rgba(10,5,16,0.65);
}
/* ======= HERO V2 (image grid) ======= */
/* ======= HERO V2 (video background) ======= */
.hero.hero-v2 {
background: #07060a;
padding: 130px clamp(20px, 4vw, 48px) 110px;
}
.hero-v2-video {
position: absolute;
top: 50%; left: 50%;
min-width: 100%;
min-height: 100%;
width: auto; height: auto;
transform: translate(-50%, -50%);
object-fit: cover;
z-index: 0;
filter: brightness(0.55) saturate(1.05);
}
.hero-v2-overlay {
position: absolute; inset: 0; z-index: 1;
background:
linear-gradient(180deg, rgba(7,6,10,0.72) 0%, rgba(7,6,10,0.3) 30%, rgba(7,6,10,0.55) 68%, rgba(7,6,10,0.94) 100%),
radial-gradient(ellipse at 50% 80%, rgba(7,6,10,0.65), transparent 70%);
}
.hero-v2-overlay::after {
content: ''; position: absolute; inset: 0;
background: radial-gradient(circle at 50% 60%, rgba(116,57,180,0.32), transparent 55%),
radial-gradient(circle at 80% 20%, rgba(255,0,117,0.22), transparent 55%);
mix-blend-mode: screen;
}
/* reveal on scroll */
.fade-up { opacity: 0; transform: translateY(28px); transition: opacity 700ms ease, transform 700ms cubic-bezier(0.2,0.8,0.2,1); }
.fade-up.in { opacity: 1; transform: translateY(0); }
/* ======= 3D scroll transitions ======= */
.fx-3d {
perspective: 1400px;
perspective-origin: 50% 30%;
}
.fx-3d > * {
opacity: 0;
transform: translateY(60px) translateZ(-200px) rotateX(14deg) scale(0.96);
transform-origin: 50% 0%;
transition: opacity 900ms cubic-bezier(0.16,0.84,0.32,1),
transform 1100ms cubic-bezier(0.16,0.84,0.32,1);
will-change: opacity, transform;
}
.fx-3d.in > * {
opacity: 1;
transform: translateY(0) translateZ(0) rotateX(0) scale(1);
}
.fx-flip {
perspective: 1600px;
}
.fx-flip > * {
opacity: 0;
transform: rotateY(-22deg) translateZ(-300px) translateX(-60px);
transform-origin: 0% 50%;
transition: opacity 900ms cubic-bezier(0.16,0.84,0.32,1),
transform 1100ms cubic-bezier(0.16,0.84,0.32,1);
}
.fx-flip.in > * {
opacity: 1;
transform: rotateY(0) translateZ(0) translateX(0);
}
.fx-slide-up {
perspective: 1200px;
}
.fx-slide-up > * {
opacity: 0;
transform: translateY(120px) rotateX(8deg);
transform-origin: 50% 100%;
transition: opacity 1000ms cubic-bezier(0.16,0.84,0.32,1),
transform 1200ms cubic-bezier(0.16,0.84,0.32,1);
}
.fx-slide-up.in > * {
opacity: 1;
transform: translateY(0) rotateX(0);
}
.fx-curtain {
clip-path: inset(0 50% 0 50%);
transition: clip-path 1200ms cubic-bezier(0.7,0,0.2,1);
}
.fx-curtain.in {
clip-path: inset(0 0 0 0);
}
/* ======= COVERFLOW CAROUSEL (Experiences v2) ======= */
.cf-shell {
position: relative;
margin: 0 auto;
max-width: 1400px;
display: flex; align-items: center;
gap: 24px;
padding: 0 20px;
}
.cf-stage {
position: relative;
height: 540px;
margin: 0 auto;
flex: 1;
perspective: 1800px;
perspective-origin: 50% 50%;
}
.cf-track {
position: absolute; inset: 0;
transform-style: preserve-3d;
}
.cf-card {
position: absolute;
top: 50%; left: 50%;
width: 420px; height: 500px;
margin: -250px 0 0 -210px;
background: #fff;
border: 1px solid rgba(10,5,16,0.18);
overflow: hidden;
cursor: pointer;
transition: transform 700ms cubic-bezier(0.2,0.8,0.2,1), opacity 500ms ease, box-shadow 400ms;
box-shadow: 0 30px 80px -30px rgba(0,0,0,0.35);
display: flex; flex-direction: column;
}
.cf-card.is-active { box-shadow: 0 50px 120px -20px rgba(0,0,0,0.55); }
.cf-card .cf-img {
position: relative;
height: 60%;
background-size: cover; background-position: center;
filter: grayscale(60%) brightness(0.85);
transition: filter 600ms;
}
.cf-card.is-active .cf-img { filter: grayscale(0%) brightness(1); }
.cf-shade {
position: absolute; left: 0; right: 0; top: 0; height: 60%;
background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.6));
}
.cf-icon {
position: absolute; top: 18px; left: 22px; z-index: 2;
width: 44px; height: 44px;
background: rgba(0,0,0,0.5);
backdrop-filter: blur(12px);
border: 1px solid rgba(255,255,255,0.3);
display: grid; place-items: center;
color: var(--c, #FF0075);
}
.cf-icon svg { width: 24px; height: 24px; }
.cf-body {
padding: 22px 24px; position: relative;
display: flex; flex-direction: column; gap: 8px;
flex: 1;
}
.cf-body::before {
content: ''; position: absolute; left: 0; right: 0; top: 0; height: 5px;
background: var(--c, #FF0075);
}
.cf-tag {
display: inline-flex; align-items: center; gap: 8px;
font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
color: rgba(10,5,16,0.6);
}
.cf-tag .pip-icon {
width: 14px; height: 14px;
color: var(--c, #FF0075);
display: inline-flex; align-items: center; justify-content: center;
}
.cf-tag .pip-icon svg { width: 100%; height: 100%; }
.cf-title {
font-family: var(--display); font-weight: 800;
font-size: 28px; line-height: 1.05; text-transform: uppercase;
letter-spacing: -0.005em;
padding-bottom: 0.08em;
}
.cf-desc { font-size: 13px; line-height: 1.5; color: rgba(10,5,16,0.65); }
.cf-link {
margin-top: auto;
font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
}
.cf-nav {
flex-shrink: 0;
z-index: 30;
width: 64px; height: 64px;
border-radius: 50%;
background: #0a0510; color: #fff; border: 0;
display: grid; place-items: center; cursor: pointer;
transition: background 220ms, color 220ms, transform 220ms;
}
.cf-nav:hover { background: #fff; color: #0a0510; outline: 1px solid #0a0510; transform: scale(1.08); }
@media (max-width: 720px) {
.cf-shell { gap: 8px; padding: 0 6px; }
.cf-nav { width: 48px; height: 48px; }
}
.cf-bar {
display: grid; grid-template-columns: auto 1fr auto;
gap: 24px; align-items: center;
margin-top: 40px;
padding: 0 60px;
}
.cf-counter { font-family: var(--display); font-weight: 700; font-size: 14px; letter-spacing: 0.16em; display: flex; gap: 6px; align-items: baseline; }
.cf-counter strong { font-size: 32px; }
.cf-counter span { color: rgba(10,5,16,0.55); }
.cf-progress { height: 2px; background: rgba(10,5,16,0.15); position: relative; }
.cf-progress-fill { position: absolute; left: 0; top: 0; bottom: 0; background: #0a0510; transition: width 500ms cubic-bezier(0.2,0.8,0.2,1); }
.cf-name { font-family: var(--display); font-weight: 700; font-size: 18px; letter-spacing: 0.04em; text-transform: uppercase; }
@media (max-width: 720px) {
.cf-stage { height: 460px; }
.cf-card { width: 260px; height: 380px; margin: -190px 0 0 -130px; }
.cf-bar { padding: 0 20px; grid-template-columns: 1fr; text-align: center; }
.cf-card .cf-img { height: 50%; }
.cf-title { font-size: 22px; }
}
/* ======= HERO V3 to 3D VIDEO ======= */
.hero.hero-v3-video {
position: relative;
min-height: 100vh;
padding: 130px clamp(20px, 4vw, 48px) 110px;
background: #07060a;
overflow: hidden;
perspective: 1400px;
}
.hv3-video-wrap {
position: absolute; inset: 0;
z-index: 0;
transform-style: preserve-3d;
overflow: hidden;
}
.hv3-video {
position: absolute;
top: 50%; left: 50%;
width: 110%; height: 110%;
min-width: 110%; min-height: 110%;
object-fit: cover;
transform: translate(-50%, -50%) rotateX(2deg) scale(1.1);
filter: saturate(1.2) contrast(1.05);
}
.hv3-grade {
position: absolute; inset: 0; z-index: 1;
background:
radial-gradient(ellipse at 50% 90%, rgba(7,6,10,0.95), rgba(7,6,10,0.6) 40%, rgba(7,6,10,0.35) 70%, transparent 100%),
linear-gradient(180deg, rgba(7,6,10,0.7) 0%, transparent 30%, rgba(7,6,10,0.85) 100%),
radial-gradient(circle at 80% 20%, rgba(255,0,117,0.32), transparent 55%),
radial-gradient(circle at 20% 80%, rgba(116,57,180,0.32), transparent 55%);
mix-blend-mode: normal;
}
.hv3-inner {
position: relative; z-index: 3;
display: grid;
grid-template-rows: auto 1fr auto;
gap: 36px;
min-height: calc(100vh - 280px);
}
.hv3-headline-stage {
position: relative;
align-self: center;
transform-style: preserve-3d;
perspective: 1200px;
}
.hv3-headline {
font-family: var(--display);
font-weight: 800;
font-size: clamp(80px, 14vw, 260px);
line-height: 1.0;
letter-spacing: -0.02em;
text-transform: uppercase;
padding-bottom: 0.08em;
text-wrap: balance;
transform: translateZ(60px);
}
.hv3-line { display: block; }
.hv3-line.l1 {
background: linear-gradient(110deg, #fff 0%, #ffb8e0 40%, #fff 100%);
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.hv3-line.l2 { -webkit-text-stroke: 3px #fff; color: transparent; }
.hv3-tagline {
display: block;
margin-top: 18px;
font-family: var(--sans);
font-size: clamp(16px, 1.4vw, 22px);
font-weight: 400; letter-spacing: 0.02em; text-transform: none;
color: rgba(255,255,255,0.8);
}
.hv3-tagline em { font-family: var(--serif); font-style: normal; font-weight: 500; color: var(--neon-yellow); }
.hv3-tagline strong { font-weight: 700; color: #fff; }
.hv3-side-card {
position: absolute;
background: rgba(255,255,255,0.06);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255,255,255,0.18);
padding: 16px 22px;
display: flex; flex-direction: column; gap: 4px;
transform-style: preserve-3d;
animation: floatXY 9s ease-in-out infinite;
}
.hv3-side-num { font-family: var(--display); font-weight: 800; font-size: 36px; line-height: 1; }
.hv3-side-label { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.6); }
.hv3-side-1 { top: 6%; right: 4%; transform: translateZ(120px) rotate(-3deg); }
.hv3-side-2 { top: 50%; right: -2%; transform: translateZ(80px) rotate(2deg); animation-delay: -3s; }
.hv3-side-3 { bottom: 4%; right: 8%; transform: translateZ(140px) rotate(-2deg); animation-delay: -6s; }
@keyframes floatXY {
50% { transform: translateZ(120px) translateY(-12px) rotate(-3deg); }
}
@media (max-width: 900px) {
.hv3-side-card { display: none; }
}
/* ======= HERO CREATIVE, CINEMATIC GAP (video + GSAP) ======= */
.hero-creative {
position: relative;
height: 320vh;
background: #03020a;
isolation: isolate;
}
.cr-sticky {
position: sticky;
top: 0;
height: 100vh;
width: 100%;
overflow: hidden;
color: #ffffff;
--close: 0;
--collide: 0;
--reveal: 0;
--exit: 0;
background: #03020a;
opacity: calc(1 - var(--exit) * 0.85);
}
/* Background video */
.cr-video {
position: absolute;
top: 50%; left: 50%;
min-width: 100%;
min-height: 100%;
width: auto; height: auto;
transform: translate(-50%, -50%);
object-fit: cover;
z-index: 0;
will-change: transform, filter, opacity;
filter: brightness(0.55);
}
.cr-grade {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background:
radial-gradient(70% 60% at 50% 55%, rgba(255,0,117,calc(0.06 + 0.14 * var(--close))) 0%, transparent 70%),
radial-gradient(circle at 50% 50%, transparent 30%, rgba(3,2,10,0.72) 78%),
linear-gradient(180deg, rgba(3,2,10,0.78) 0%, transparent 28%, rgba(3,2,10,0.88) 100%);
}
.hero-creative .hero-grain {
position: absolute; inset: 0;
z-index: 2; pointer-events: none;
opacity: 0.07;
}
/* Top film-strip marquee */
.cr-strip {
position: absolute;
top: 0;
left: 0; right: 0;
height: 36px;
z-index: 10;
overflow: hidden;
border-bottom: 1px solid rgba(255,255,255,0.12);
background: rgba(3,2,10,0.55);
backdrop-filter: blur(6px);
display: flex; align-items: center;
opacity: calc(1 - var(--collide) * 0.7);
}
.cr-strip-track {
display: inline-flex;
white-space: nowrap;
animation: cr-strip 38s linear infinite;
}
.cr-strip-line {
display: inline-flex;
align-items: center;
gap: 26px;
padding-right: 26px;
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: rgba(255,255,255,0.85);
}
.cr-strip-line i {
font-style: normal;
color: #FF0075;
text-shadow: 0 0 8px rgba(255,0,117,0.7);
}
@keyframes cr-strip { to { transform: translateX(-50%); } }
/* Corner meta labels */
.cr-corner {
position: absolute;
top: clamp(60px, 7vh, 88px);
z-index: 10;
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(255,255,255,0.78);
opacity: calc(1 - var(--collide) * 0.7);
}
.cr-corner-tl { left: clamp(24px, 4vw, 48px); }
.cr-corner-tr { right: clamp(24px, 4vw, 48px); }
.cr-corner .dot {
width: 8px; height: 8px;
border-radius: 50%;
background: #FF0075;
box-shadow: 0 0 14px #FF0075;
animation: cr-dot 1.6s ease-in-out infinite;
}
.cr-corner .div { color: rgba(255,255,255,0.4); }
@keyframes cr-dot {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.45; transform: scale(0.85); }
}
/* Headline */
.cr-headline {
position: absolute;
top: 50%; left: 0; right: 0;
transform: translateY(calc(-50% - 4vh));
z-index: 6;
display: flex;
align-items: baseline;
justify-content: center;
flex-wrap: nowrap;
white-space: nowrap;
font-family: var(--display);
font-weight: 900;
font-size: clamp(56px, 14vw, 260px);
line-height: 1;
letter-spacing: -0.035em;
text-transform: uppercase;
margin: 0;
padding: 0 clamp(16px, 4vw, 56px);
text-shadow: 0 18px 60px rgba(0,0,0,0.75);
pointer-events: none;
opacity: calc(1 - var(--collide) * 0.92);
will-change: transform, opacity;
}
.cr-word-frame {
display: inline-flex;
position: relative;
overflow: hidden;
padding-bottom: 0.12em;
will-change: transform;
}
.cr-word-frame-l {
transform: translateX(calc(-28vw * (1 - var(--close))));
transition: transform 90ms linear;
}
.cr-word-frame-r {
transform: translateX(calc(28vw * (1 - var(--close))));
transition: transform 90ms linear;
}
.cr-word { display: inline-block; }
.cr-word-l { color: #ffffff; }
.cr-word-r {
color: transparent;
-webkit-text-stroke: 2.4px #ffffff;
}
.cr-char-l, .cr-char-r {
display: inline-block;
will-change: transform, opacity;
transform-origin: center;
}
/* Center seam, vertical bar with the gap-closing period */
.cr-seam {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 0.22em;
height: 1em;
flex-shrink: 0;
}
.cr-seam-bar {
position: absolute;
top: -0.2em; bottom: -0.2em;
left: 50%;
width: 1.5px;
transform: translateX(-50%);
background: linear-gradient(180deg, transparent 0%, #FF0075 30%, #FF0075 70%, transparent 100%);
box-shadow:
0 0 calc(20px + 60px * var(--close)) #FF0075,
0 0 calc(60px + 140px * var(--close)) rgba(255,0,117,0.45);
transform-origin: center;
opacity: calc(0.15 + 0.75 * var(--close) - var(--collide));
}
.cr-period {
display: inline-block;
width: 0.16em;
height: 0.16em;
border-radius: 50%;
background: #FF0075;
box-shadow:
0 0 calc(40px + 90px * var(--close)) #FF0075,
0 0 calc(80px + 180px * var(--close)) rgba(255,0,117,0.6);
position: relative;
z-index: 7;
}
/* Burst at collision */
.cr-burst {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 14px; height: 14px;
border-radius: 50%;
background: #fff;
box-shadow:
0 0 80px 40px #FFC978,
0 0 220px 100px rgba(255,0,117,0.78),
0 0 420px 200px rgba(175,102,250,0.5);
opacity: 0;
pointer-events: none;
z-index: 8;
}
/* Scroll hint */
.cr-hint {
position: absolute;
bottom: clamp(36px, 5vh, 60px);
left: 50%;
transform: translateX(-50%);
z-index: 8;
display: flex; flex-direction: column; align-items: center; gap: 12px;
pointer-events: none;
opacity: calc(1 - var(--close) * 0.9 - var(--collide));
transition: opacity 220ms linear;
}
.cr-hint-text {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.32em;
text-transform: uppercase;
color: rgba(255,255,255,0.85);
}
.cr-hint-line {
width: 1px;
height: 36px;
background: linear-gradient(180deg, #FF0075, transparent);
animation: cr-hint-line 1.6s ease-in-out infinite;
}
@keyframes cr-hint-line {
0%, 100% { opacity: 0.5; transform: translateY(0); }
50% { opacity: 1; transform: translateY(8px); }
}
/* Post-collision reveal block (subtitle + CTAs) */
.cr-reveal {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, calc(-50% + 14vh));
z-index: 11;
text-align: center;
width: clamp(280px, 56vw, 720px);
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
pointer-events: auto;
}
.cr-reveal > * { will-change: transform, opacity, filter; }
.cr-reveal-eyebrow {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.32em;
text-transform: uppercase;
color: #FF0075;
margin: 0 0 14px;
}
.cr-reveal-sub {
font-size: clamp(14px, 1.1vw, 16px);
line-height: 1.6;
color: rgba(255,255,255,0.86);
max-width: 56ch;
margin: 0 0 28px;
}
.cr-reveal-row {
display: inline-flex;
gap: 12px;
flex-wrap: wrap;
justify-content: center;
}
@media (max-width: 720px) {
.hero-creative { height: 260vh; }
.cr-headline { font-size: clamp(48px, 18vw, 96px); }
.cr-word-frame-l { transform: translateX(calc(-20vw * (1 - var(--close)))); }
.cr-word-frame-r { transform: translateX(calc(20vw * (1 - var(--close)))); }
.cr-corner { font-size: 9px; gap: 6px; }
}
/* ======= /HERO CREATIVE ======= */
/* ======= HERO STORY, COSMIC GAP / PORTAL ======= */
.hero-story {
position: relative;
height: 300vh;
background: #03020a;
isolation: isolate;
}
.story-sticky {
position: sticky;
top: 0;
height: 100vh;
width: 100%;
overflow: hidden;
color: #ffffff;
--close: 0;
--bridge: 0;
--portal: 0;
--mx: 0;
--my: 0;
perspective: 1800px;
perspective-origin: 50% 55%;
background: #03020a;
}
/* Cosmic nebula backdrop */
.story-nebula {
position: absolute;
inset: -8%;
z-index: 0;
pointer-events: none;
background:
radial-gradient(60% 45% at 20% 35%, rgba(116,57,180,0.45) 0%, transparent 70%),
radial-gradient(50% 40% at 82% 70%, rgba(0,80,180,0.40) 0%, transparent 70%),
radial-gradient(40% 30% at 50% 50%, rgba(255,0,117,calc(0.08 + 0.18 * var(--bridge))) 0%, transparent 75%),
radial-gradient(70% 70% at 50% 50%, transparent 35%, rgba(3,2,10,0.95) 85%);
filter: blur(40px);
transform: scale(calc(1.05 + 0.1 * (1 - var(--close))));
transition: transform 120ms linear;
}
.hero-story .hero-grain {
position: absolute; inset: 0;
z-index: 1; pointer-events: none;
opacity: 0.08;
}
/* Top meta */
.story-meta-top {
position: absolute;
top: clamp(28px, 4vh, 56px);
left: clamp(24px, 4vw, 48px);
right: clamp(24px, 4vw, 48px);
display: flex;
justify-content: space-between;
z-index: 10;
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(255,255,255,0.78);
flex-wrap: wrap;
gap: 24px;
opacity: calc(1 - var(--portal) * 0.85);
transition: opacity 0.3s ease;
}
.story-pill { display: inline-flex; align-items: center; gap: 10px; }
.story-pill .dot {
width: 8px; height: 8px;
border-radius: 50%;
background: #FF0075;
box-shadow: 0 0 14px #FF0075;
animation: story-dot 1.6s ease-in-out infinite;
}
.story-pill .div { color: rgba(255,255,255,0.4); }
@keyframes story-dot {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.45; transform: scale(0.85); }
}
/* Stage (3D) */
.story-stage {
position: absolute;
inset: 0;
z-index: 4;
transform-style: preserve-3d;
transform:
translate3d(calc(var(--mx) * 20px), calc(var(--my) * 14px), 0)
scale(calc(1 + 4 * var(--portal)));
transform-origin: 50% 50%;
transition: transform 120ms linear;
pointer-events: none;
}
/* Particle field */
.story-particles {
position: absolute;
inset: 0;
transform-style: preserve-3d;
}
.story-particle {
position: absolute;
top: 50%; left: 50%;
border-radius: 50%;
/* Interpolate from start → target as close goes 0 → 1 */
transform:
translate(-50%, -50%)
translate(
calc(var(--sx, 0vw) + (var(--tx, 0vw) - var(--sx, 0vw)) * var(--close)),
calc(var(--sy, 0vh) + (var(--ty, 0vh) - var(--sy, 0vh)) * var(--close))
)
translateZ(
calc(var(--sz, 0px) + (var(--tz, 0px) - var(--sz, 0px)) * var(--close))
);
box-shadow:
0 0 calc(8px + 16px * var(--close)) currentColor,
0 0 calc(20px + 40px * var(--close)) currentColor;
opacity: var(--b, 1);
will-change: transform, opacity;
transition: transform 120ms linear, box-shadow 200ms linear, opacity 300ms linear;
}
/* The glowing arc bridge */
.story-arc {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(calc(0.9 + 0.15 * var(--bridge)));
width: 80%;
height: 50%;
opacity: calc(var(--bridge) * (1 - var(--portal) * 0.8));
pointer-events: none;
filter: drop-shadow(0 0 calc(20px + 30px * var(--bridge)) rgba(255, 0, 117, 0.6));
}
/* Portal ring */
.story-portal {
position: absolute;
top: 50%; left: 50%;
width: clamp(220px, 30vw, 440px);
height: clamp(220px, 30vw, 440px);
transform: translate(-50%, -50%) scale(calc(0.4 + var(--portal) * 1.4));
opacity: var(--portal);
pointer-events: none;
transition: opacity 0.3s ease;
}
.story-portal-ring {
position: absolute;
inset: 0;
border-radius: 50%;
border: 2px solid #ffffff;
box-shadow:
0 0 60px rgba(255, 0, 117, 0.9),
0 0 140px rgba(175, 102, 250, 0.7),
0 0 240px rgba(0, 244, 255, 0.4),
inset 0 0 80px rgba(255, 200, 120, 0.55),
inset 0 0 30px rgba(255, 255, 255, 0.55);
animation: story-portal-spin 8s linear infinite;
}
.story-portal-core {
position: absolute;
inset: 18%;
border-radius: 50%;
background:
radial-gradient(circle, #ffffff 0%, #FFC978 18%, #FF0075 38%, #AF66FA 65%, transparent 90%);
filter: blur(2px);
animation: story-portal-pulse 2.4s ease-in-out infinite;
}
@keyframes story-portal-spin {
to { transform: rotate(360deg); }
}
@keyframes story-portal-pulse {
0%, 100% { transform: scale(0.94); opacity: 0.85; }
50% { transform: scale(1.06); opacity: 1; }
}
/* Headline */
.story-headline {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, calc(-50% + 30vh));
z-index: 6;
width: clamp(300px, 52vw, 720px);
text-align: center;
pointer-events: auto;
opacity: calc(1 - var(--portal));
transition: opacity 0.3s ease;
}
.story-headline h1 {
font-family: var(--display);
font-weight: 900;
font-size: clamp(40px, 5vw, 76px);
line-height: 1.07;
letter-spacing: -0.015em;
text-transform: uppercase;
color: #fff;
margin: 0 0 16px;
text-shadow: 0 16px 50px rgba(0,0,0,0.55);
}
.story-headline h1 span { display: inline-block; }
.story-headline em {
font-family: var(--serif);
font-style: italic;
font-weight: 500;
text-transform: none;
background: linear-gradient(115deg, #EBFF00 0%, #FF0075 50%, #AF66FA 100%);
-webkit-background-clip: text; background-clip: text;
color: transparent;
}
.story-headline p {
font-size: clamp(13px, 1.05vw, 15px);
line-height: 1.6;
color: rgba(255,255,255,0.78);
margin: 0 auto 22px;
max-width: 48ch;
}
.story-cta-row {
display: inline-flex;
gap: 10px;
flex-wrap: wrap;
justify-content: center;
}
/* Scroll hint */
.story-meta-bot {
position: absolute;
bottom: 32px;
left: 50%;
transform: translateX(-50%);
z-index: 8;
display: flex; flex-direction: column; align-items: center; gap: 10px;
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.3em;
color: rgba(255,255,255,0.5);
opacity: calc(1 - var(--portal));
transition: opacity 0.3s ease;
}
.story-scroll-line {
width: 1px;
height: 36px;
background: linear-gradient(180deg, #FF0075, transparent);
animation: story-scroll 1.6s ease-in-out infinite;
}
@keyframes story-scroll {
0%, 100% { opacity: 0.45; transform: translateY(0); }
50% { opacity: 1; transform: translateY(8px); }
}
@media (max-width: 720px) {
.hero-story { height: 260vh; }
.story-meta-top { font-size: 9px; flex-direction: column; align-items: flex-start; gap: 10px; }
.story-headline { transform: translate(-50%, calc(-50% + 22vh)); }
}
/* ======= /HERO STORY ======= */
.hero.hero-v3 {
background: #0a0510;
padding: 120px clamp(20px, 4vw, 48px) 110px;
min-height: 100vh;
}
.hero-v3-bg {
position: absolute; inset: 0;
background:
radial-gradient(ellipse at 80% 50%, rgba(255,0,117,0.28), transparent 50%),
radial-gradient(ellipse at 20% 30%, rgba(116,57,180,0.35), transparent 50%),
radial-gradient(ellipse at 50% 90%, rgba(0,244,255,0.18), transparent 55%),
#0a0510;
}
.hero-v3-bg::after {
content: ''; position: absolute; inset: 0;
background-image: url("data:image/svg+xml;utf8,");
mix-blend-mode: overlay; opacity: 0.25;
}
.hero-v3-grid {
position: relative; z-index: 2;
display: grid;
grid-template-columns: 1.05fr 0.95fr;
gap: 60px;
align-items: stretch;
min-height: calc(100vh - 280px);
}
.hero-v3-left { display: flex; flex-direction: column; justify-content: space-between; }
.hero-v3-eyebrow {
display: flex; gap: 12px; align-items: center;
font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase;
color: var(--ink-soft);
}
.hero-v3-eyebrow .pill {
padding: 6px 12px;
border: 1px solid var(--line-strong);
display: inline-flex; align-items: center; gap: 8px;
}
.hero-v3-eyebrow .live {
width: 8px; height: 8px;
background: var(--lime);
box-shadow: 0 0 12px var(--lime);
animation: pulse 1.6s infinite;
}
.hero-v3-headline {
font-family: var(--display);
font-weight: 800;
font-size: clamp(80px, 13vw, 240px);
line-height: 1.04;
letter-spacing: -0.025em;
text-transform: uppercase;
padding-bottom: 0.05em;
margin: 30px 0;
}
.hero-v3-headline .line { display: block; }
.hero-v3-headline .l1 {
background: linear-gradient(110deg, #fff 0%, #ffb8e0 40%, #fff 100%);
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-v3-headline .l2 { -webkit-text-stroke: 2.5px #fff; color: transparent; }
.hero-v3-headline .l3 em {
font-family: var(--serif); font-style: normal; font-weight: 500;
text-transform: none; letter-spacing: -0.04em;
background: linear-gradient(110deg, #EBFF00, #FF0075, #AF66FA);
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-v3-meta-bar {
display: flex; gap: 30px; flex-wrap: wrap;
padding-top: 24px;
border-top: 1px solid var(--line);
}
.hero-v3-meta-bar div { display: flex; flex-direction: column; gap: 6px; }
.hero-v3-meta-bar small { font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-soft); }
.hero-v3-meta-bar strong { font-family: var(--display); font-weight: 700; font-size: 22px; letter-spacing: 0.02em; text-transform: uppercase; }
.hero-v3-cta-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 28px; }
.hero-v3-right { position: relative; min-height: 560px; }
.hero-v3-stage {
position: absolute; inset: 0;
perspective: 1200px;
transform-style: preserve-3d;
}
.hero-v3-card {
position: absolute;
border-radius: 0;
overflow: hidden;
box-shadow: 0 30px 80px -20px rgba(0,0,0,0.6);
transform-style: preserve-3d;
transition: transform 600ms cubic-bezier(0.2,0.8,0.2,1);
}
.hero-v3-card .img { position: absolute; inset: 0; background-size: cover; background-position: center; }
.hero-v3-card .label {
position: absolute; left: 0; bottom: 0; right: 0;
padding: 14px 16px;
background: linear-gradient(180deg, transparent, rgba(0,0,0,0.85));
display: flex; justify-content: space-between; align-items: center;
font-family: var(--display); font-weight: 700;
font-size: 16px; letter-spacing: 0.08em; text-transform: uppercase;
}
.hero-v3-card .label .dot { width: 10px; height: 10px; background: var(--c, var(--hot-pink)); }
.hero-v3-card.c1 { width: 58%; height: 68%; top: 6%; left: 8%; transform: rotate(-6deg) translateZ(60px); animation: floatA 8s ease-in-out infinite; }
.hero-v3-card.c2 { width: 50%; height: 52%; top: 18%; right: 4%; transform: rotate(4deg) translateZ(30px); animation: floatB 9s ease-in-out infinite; }
.hero-v3-card.c3 { width: 44%; height: 42%; bottom: 4%; left: 14%; transform: rotate(-3deg) translateZ(90px); animation: floatC 10s ease-in-out infinite; }
.hero-v3-card.c4 { width: 32%; height: 32%; bottom: 18%; right: 16%; transform: rotate(8deg) translateZ(40px); animation: floatD 7s ease-in-out infinite; }
@keyframes floatA { 50% { transform: rotate(-6deg) translateZ(60px) translateY(-14px); } }
@keyframes floatB { 50% { transform: rotate(4deg) translateZ(30px) translateY(12px); } }
@keyframes floatC { 50% { transform: rotate(-3deg) translateZ(90px) translateY(-10px); } }
@keyframes floatD { 50% { transform: rotate(8deg) translateZ(40px) translateY(10px); } }
.hero-v3-stamp {
position: absolute; right: -20px; top: -20px; z-index: 4;
width: 140px; height: 140px;
background: var(--neon-yellow);
color: #0a0510;
display: grid; place-items: center;
text-align: center;
font-family: var(--display); font-weight: 800;
font-size: 18px; letter-spacing: 0.04em; text-transform: uppercase;
line-height: 1;
padding: 14px;
animation: spinSlow 22s linear infinite;
}
@keyframes spinSlow { to { transform: rotate(360deg); } }
.hero-v3-stamp svg { position: absolute; inset: 0; width: 100%; height: 100%; }
@media (max-width: 900px) {
.hero-v3-grid { grid-template-columns: 1fr; gap: 40px; }
.hero-v3-right { min-height: 460px; }
}
/* ============ STACK CAROUSEL ============ */
.sk-shell { position: relative; max-width: 1280px; margin: 0 auto; display: flex; align-items: center; gap: 24px; padding: 0 20px; }
.sk-stage { position: relative; flex: 1; height: 560px; perspective: 1400px; user-select: none; cursor: grab; }
.sk-stage:active { cursor: grabbing; }
.sk-card {
position: absolute; top: 50%; left: 50%;
width: 460px; height: 520px;
margin: 0; transform-origin: center;
background: #fff; overflow: hidden;
border: 1px solid rgba(10,5,16,0.18);
box-shadow: 0 30px 80px -30px rgba(0,0,0,0.5);
display: flex; flex-direction: column;
will-change: transform;
}
.sk-card.is-exiting { transition: transform 420ms cubic-bezier(0.4,0,0.2,1), opacity 420ms; opacity: 0 !important; }
.sk-img { height: 55%; background-size: cover; background-position: center; position: relative; pointer-events: none; }
.sk-shade { position: absolute; left: 0; right: 0; top: 0; height: 55%; background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.6)); pointer-events: none; }
.sk-icon {
position: absolute; top: 18px; left: 22px; z-index: 2;
width: 52px; height: 52px;
background: rgba(0,0,0,0.55); backdrop-filter: blur(12px);
border: 1px solid rgba(255,255,255,0.3);
display: grid; place-items: center;
color: var(--c, #FF0075);
}
.sk-icon svg { width: 28px; height: 28px; }
.sk-meta { position: absolute; top: 22px; right: 22px; z-index: 2; color: #fff; display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.sk-num { font-family: var(--display); font-weight: 700; font-size: 16px; letter-spacing: 0.1em; }
.sk-tag { font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; background: var(--c); color: #0a0510; padding: 4px 10px; }
.sk-body { padding: 24px 28px; flex: 1; display: flex; flex-direction: column; gap: 10px; position: relative; }
.sk-body::before { content:''; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--c); }
.sk-title { font-family: var(--display); font-weight: 800; font-size: 30px; line-height: 1.04; text-transform: uppercase; letter-spacing: -0.01em; padding-bottom: 0.06em; }
.sk-desc { font-size: 13px; line-height: 1.5; color: rgba(10,5,16,0.65); }
.sk-actions { margin-top: auto; display: flex; justify-content: space-between; align-items: center; }
.sk-link { font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; }
.sk-hint { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(10,5,16,0.4); font-weight: 600; }
.sk-stamp {
position: absolute; top: 80px; padding: 10px 24px;
font-family: var(--display); font-weight: 800; font-size: 36px; letter-spacing: 0.06em;
border: 4px solid currentColor; pointer-events: none;
text-transform: uppercase;
}
.sk-yes { right: 24px; transform: rotate(12deg); color: #00847D; }
.sk-no { left: 24px; transform: rotate(-12deg); color: #FF0075; }
.sk-thumbs {
margin-top: 36px;
display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
padding: 0 20px;
}
.sk-thumb {
width: 64px; height: 64px;
background: #fff; border: 1px solid rgba(10,5,16,0.15);
display: grid; place-items: center; cursor: pointer;
position: relative; color: rgba(10,5,16,0.55);
transition: all 220ms ease;
}
.sk-thumb:hover { color: var(--c); border-color: var(--c); transform: translateY(-2px); }
.sk-thumb.active { background: var(--c); color: #0a0510; border-color: var(--c); transform: translateY(-4px); box-shadow: 0 12px 24px -10px rgba(0,0,0,0.3); }
.sk-thumb-icon { display: grid; place-items: center; }
.sk-thumb-icon svg { width: 24px; height: 24px; }
.sk-thumb-num { position: absolute; bottom: 4px; right: 6px; font-size: 9px; font-weight: 700; letter-spacing: 0.1em; opacity: 0.55; }
@media (max-width: 720px) {
.sk-shell { gap: 6px; padding: 0 6px; }
.sk-stage { height: 500px; }
.sk-card { width: 280px; height: 440px; }
.sk-title { font-size: 22px; }
.sk-thumb { width: 48px; height: 48px; }
.sk-thumb-icon svg { width: 18px; height: 18px; }
}
/* ============ ORBIT CAROUSEL ============ */
.experiences-orbit .ob-shell { position: relative; max-width: 1400px; margin: 0 auto; display: flex; align-items: center; gap: 16px; padding: 0 20px; }
.ob-stage {
position: relative; flex: 1;
width: 100%; aspect-ratio: 1.4 / 1;
max-width: 980px; margin: 0 auto;
display: grid; place-items: center;
}
.ob-ring {
position: absolute; inset: 0;
width: 600px; height: 600px;
margin: auto;
transition: transform 900ms cubic-bezier(0.2,0.8,0.2,1);
pointer-events: none;
}
.ob-rail { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; transform: rotate(-90deg); }
.ob-node {
position: absolute; top: 50%; left: 50%;
width: 64px; height: 64px;
margin: -32px 0 0 -32px;
background: #fff; border: 1px solid rgba(10,5,16,0.2);
display: grid; place-items: center;
cursor: pointer; pointer-events: auto;
color: rgba(10,5,16,0.55);
transition: background 280ms, color 280ms, border-color 280ms, box-shadow 280ms;
box-shadow: 0 10px 24px -12px rgba(0,0,0,0.3);
}
.ob-node:hover { color: var(--c); border-color: var(--c); }
.ob-node.active {
background: var(--c); color: #0a0510;
border-color: var(--c);
width: 76px; height: 76px; margin: -38px 0 0 -38px;
box-shadow: 0 16px 36px -10px rgba(0,0,0,0.4);
}
.ob-node-inner { display: grid; place-items: center; }
.ob-node-inner svg { width: 28px; height: 28px; }
.ob-node.active .ob-node-inner svg { width: 34px; height: 34px; }
.ob-node-num { position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; color: rgba(10,5,16,0.55); }
.ob-node.active .ob-node-num { color: #0a0510; font-weight: 800; }
.ob-center {
position: relative;
width: 340px; height: 340px;
border-radius: 50%;
overflow: visible;
display: grid; place-items: center;
}
.ob-center-img {
position: absolute; inset: 0; border-radius: 50%;
background-size: cover; background-position: center;
transition: background-image 600ms ease;
}
.ob-center-grade {
position: absolute; inset: 0; border-radius: 50%;
background: radial-gradient(circle, transparent 30%, rgba(10,5,16,0.85) 75%);
}
.ob-center-card {
position: absolute; top: 100%; left: 50%; transform: translate(-50%, -40%);
width: 380px;
background: #0a0510; color: #fff;
padding: 22px 24px 24px;
border: 1px solid var(--c);
box-shadow: 0 24px 60px -20px rgba(0,0,0,0.55);
display: flex; flex-direction: column; gap: 10px;
z-index: 4;
}
.ob-center-card::before {
content:''; position: absolute; top: -1px; left: 0; right: 0; height: 4px; background: var(--c);
}
.ob-center-head { display: flex; justify-content: space-between; align-items: center; }
.ob-center-tag { display: inline-flex; align-items: center; gap: 8px; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 700; }
.ob-center-num { font-family: var(--display); font-size: 12px; letter-spacing: 0.16em; color: rgba(255,255,255,0.55); }
.ob-center-num strong { font-size: 24px; color: #fff; }
.ob-center-title { font-family: var(--display); font-weight: 800; font-size: 28px; line-height: 1.04; text-transform: uppercase; letter-spacing: -0.005em; padding-bottom: 0.04em; }
.ob-center-desc { font-size: 13px; line-height: 1.55; color: rgba(255,255,255,0.7); }
.ob-legend { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 140px; padding: 0 20px; }
.ob-leg {
font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700;
background: transparent; border: 1px solid rgba(10,5,16,0.2);
padding: 6px 12px; color: rgba(10,5,16,0.6);
display: inline-flex; gap: 8px; align-items: center; cursor: pointer;
transition: all 220ms;
}
.ob-leg:hover { color: var(--c); border-color: var(--c); }
.ob-leg span { font-family: var(--display); font-weight: 800; color: var(--c); }
.ob-leg.active { background: var(--c); color: #0a0510; border-color: var(--c); }
.ob-leg.active span { color: #0a0510; }
@media (max-width: 900px) {
.ob-stage { aspect-ratio: 1 / 1.1; }
.ob-ring { width: 460px; height: 460px; }
.ob-rail { width: 460px; height: 460px; }
.ob-node { width: 48px; height: 48px; margin: -24px 0 0 -24px; }
.ob-node.active { width: 56px; height: 56px; margin: -28px 0 0 -28px; }
.ob-node-inner svg { width: 22px; height: 22px; }
.ob-center { width: 240px; height: 240px; }
.ob-center-card { width: 90vw; max-width: 360px; transform: translate(-50%, -20%); }
.ob-legend { margin-top: 180px; }
}
@media (max-width: 540px) {
.ob-ring, .ob-rail { width: 380px; height: 380px; }
}
/* ============ SIGNATURE EXPERIENCES — MARQUEE MODES (horizontal / vertical) ============ */
.xpm {
position: relative;
width: 100%;
overflow: hidden;
padding: 16px 0 8px;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.xpm-vertical {
height: clamp(420px, 56vh, 620px);
-webkit-mask-image: linear-gradient(180deg, transparent, #000 8%, #000 92%, transparent);
mask-image: linear-gradient(180deg, transparent, #000 8%, #000 92%, transparent);
}
.xpm-track {
display: flex;
gap: clamp(14px, 1.6vw, 24px);
width: max-content;
will-change: transform;
animation: xpm-scroll-x linear infinite;
}
.xpm-vertical .xpm-track {
flex-direction: column;
width: clamp(220px, 22vw, 300px);
margin: 0 auto;
animation-name: xpm-scroll-y;
}
.xpm-hoverable:hover .xpm-track { animation-play-state: paused; }
@keyframes xpm-scroll-x { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes xpm-scroll-y { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@media (prefers-reduced-motion: reduce) {
.xpm-track { animation: none !important; }
.xpm { -webkit-mask-image: none; mask-image: none; }
.xpm-horizontal .xpm-track { flex-wrap: nowrap; overflow-x: auto; }
}
.xpm-card {
position: relative;
flex: 0 0 auto;
width: clamp(220px, 22vw, 300px);
height: clamp(300px, 30vw, 400px);
border-radius: 18px;
overflow: hidden;
background: #100819;
box-shadow: 0 30px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06) inset;
text-decoration: none;
display: block;
transition: transform 360ms cubic-bezier(0.16,0.84,0.32,1), box-shadow 360ms ease;
}
.xpm-vertical .xpm-card { width: 100%; height: clamp(240px, 24vw, 320px); }
.xpm-card:hover {
transform: translateY(-4px) scale(1.015);
box-shadow: 0 40px 80px rgba(255,0,117,0.26), 0 30px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.2) inset;
}
.xpm-img { position: absolute; inset: 0; background-size: cover; background-position: center; background-color: #190a28; filter: saturate(0.9); transition: filter 360ms ease; }
.xpm-card:hover .xpm-img { filter: saturate(1.1); }
.xpm-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.4) 62%, rgba(0,0,0,0.78) 100%), linear-gradient(180deg, rgba(116,57,180,0.0), rgba(116,57,180,0.16)); }
.xpm-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 8px; z-index: 2; }
.xpm-title { font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: -0.005em; font-size: clamp(16px, 1.5vw, 21px); line-height: 1.05; color: #fff; text-wrap: balance; }
.xpm-cta { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--neon-yellow); }
/* ============ 3D SCROLL CYLINDER (Signature Experiences) ============ */
.experiences-cyl {
position: relative;
background: #050307;
color: var(--ink);
/* arrow-navigated carousel, normal-height section (no scroll hijack) */
height: auto;
--cyl-card-w: clamp(140px, 13vw, 210px);
--cyl-card-h: clamp(200px, 18vw, 290px);
/* tangent radius, spans full viewport so side cards reach the edges */
--cyl-radius: calc(50vw - var(--cyl-card-w) / 2);
--cyl-active-scale: 1.28;
}
.experiences-cyl::before {
content: '';
position: absolute; inset: 0;
background:
radial-gradient(ellipse 60% 50% at 50% 50%, rgba(116,57,180,0.18), transparent 60%),
radial-gradient(ellipse 50% 40% at 10% 90%, rgba(255,0,117,0.10), transparent 60%),
radial-gradient(ellipse 50% 40% at 90% 10%, rgba(0,244,255,0.08), transparent 60%);
pointer-events: none;
}
.cyl-sticky {
position: relative;
width: 100%;
overflow: hidden;
display: grid;
grid-template-rows: auto auto auto;
align-items: center;
padding: 60px 0 80px;
}
/* Section heading row */
.cyl-head {
position: relative; z-index: 4;
display: flex; justify-content: space-between; align-items: flex-end;
gap: 24px; flex-wrap: wrap;
padding: 36px clamp(20px, 4vw, 48px) 0;
}
.cyl-head .eyebrow { color: rgba(255,255,255,0.55); }
.cyl-section-title {
font-family: var(--display); font-weight: 800;
font-size: clamp(36px, 5vw, 72px);
text-transform: uppercase;
line-height: 1.0;
letter-spacing: -0.01em;
padding-bottom: 0.1em;
}
.cyl-section-title em {
font-family: var(--display); font-style: normal; font-weight: 800;
text-transform: uppercase;
background: linear-gradient(115deg, #FF0075, #7439B4, #00847D);
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.cyl-schedule { background: transparent; border: 1px solid rgba(255,255,255,0.4); color: var(--ink); }
.cyl-schedule:hover { background: var(--neon-yellow); color: #0c0014; border-color: var(--neon-yellow); }
.cyl-blurb { margin-top: 14px; max-width: 52ch; font-size: clamp(15px, 1.3vw, 18px); line-height: 1.55; color: rgba(255,255,255,0.62); text-wrap: pretty; }
/* Scene & ring */
.cyl-scene {
position: relative;
width: 100%;
height: 100%;
display: grid;
place-items: center;
perspective: 1800px;
perspective-origin: 50% 45%;
z-index: 2;
}
.cyl-ring {
position: relative;
width: var(--cyl-card-w);
height: var(--cyl-card-h);
transform-style: preserve-3d;
/* rotation set inline */
will-change: transform;
}
.cyl-slot {
position: absolute;
inset: 0;
width: var(--cyl-card-w);
height: var(--cyl-card-h);
transform-style: preserve-3d;
/* rotation + translateZ set inline */
will-change: transform;
}
.cyl-card {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border-radius: 18px;
overflow: hidden;
background: #100819;
box-shadow:
0 30px 60px rgba(0,0,0,0.55),
0 0 0 1px rgba(255,255,255,0.06) inset;
backface-visibility: hidden;
will-change: transform;
transform: scale(1);
transition:
transform 520ms cubic-bezier(0.16,0.84,0.32,1),
filter 400ms ease,
box-shadow 400ms ease;
}
.cyl-img {
position: absolute; inset: 0;
background-size: cover;
background-position: center;
background-color: #190a28;
filter: saturate(0.85);
}
.cyl-shade {
position: absolute; inset: 0;
background:
linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.35) 60%, rgba(0,0,0,0.7) 100%),
linear-gradient(180deg, rgba(116,57,180,0.0), rgba(116,57,180,0.18));
}
.cyl-num {
position: absolute; left: 18px; bottom: 16px;
font-family: var(--mono);
font-size: 11px; letter-spacing: 0.22em;
color: rgba(255,255,255,0.78);
padding: 5px 9px;
background: rgba(10,5,16,0.55);
backdrop-filter: blur(4px);
border: 1px solid rgba(255,255,255,0.18);
border-radius: 0;
}
.cyl-card.is-active {
transform: scale(var(--cyl-active-scale));
z-index: 2;
box-shadow:
0 50px 100px rgba(255,0,117,0.30),
0 30px 60px rgba(0,0,0,0.65),
0 0 0 1px rgba(255,255,255,0.22) inset;
}
.cyl-card.is-active .cyl-img { filter: saturate(1.1); }
/* Arrow navigation (replaces scroll-driven rotation) */
.cyl-ring { transition: transform 720ms cubic-bezier(0.22,1,0.36,1); }
.cyl-card { cursor: pointer; }
.cyl-nav {
position: absolute; top: 50%; transform: translateY(-50%);
z-index: 6; width: 56px; height: 56px; display: grid; place-items: center;
border: 1px solid rgba(255,255,255,0.4); color: #fff; background: rgba(10,5,16,0.5);
-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
cursor: pointer; border-radius: 50%;
transition: background 200ms, color 200ms, border-color 200ms;
}
.cyl-nav:hover { background: var(--neon-yellow); color: #0c0014; border-color: var(--neon-yellow); }
.cyl-nav-prev { left: clamp(12px, 4vw, 56px); }
.cyl-nav-next { right: clamp(12px, 4vw, 56px); }
@media (max-width: 540px) {
.cyl-nav { width: 46px; height: 46px; }
}
/* Center title overlay */
.cyl-center {
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%);
z-index: 5;
display: flex;
flex-direction: column;
align-items: center;
gap: 28px;
pointer-events: none;
width: 100%;
max-width: 1100px;
padding: 0 24px;
text-align: center;
}
.cyl-titles {
position: relative;
width: 100%;
height: clamp(80px, 11vw, 160px);
}
.cyl-title-overlay {
position: absolute;
inset: 0;
display: flex; align-items: center; justify-content: center;
font-family: var(--display);
font-weight: 800;
text-transform: uppercase;
font-size: clamp(48px, 8.5vw, 140px);
line-height: 1.07;
letter-spacing: -0.02em;
background: linear-gradient(115deg, #EBFF00 0%, #FF0075 35%, #AF66FA 70%, #00F4FF 100%);
-webkit-background-clip: text; background-clip: text;
color: transparent;
opacity: 0;
transform: translateY(20px);
transition: opacity 460ms ease, transform 600ms cubic-bezier(0.16,0.84,0.32,1);
white-space: nowrap;
text-shadow: 0 0 40px rgba(0,0,0,0.4);
filter: drop-shadow(0 10px 30px rgba(10,5,16,0.6));
}
.cyl-title-overlay.is-active {
opacity: 1;
transform: translateY(0);
}
.cyl-cta {
pointer-events: auto;
display: inline-flex; align-items: center; gap: 14px;
padding: 16px 26px;
font-family: var(--display); font-weight: 700;
font-size: 13px; letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ink);
background: rgba(10,5,16,0.5);
border: 1px solid rgba(255,255,255,0.25);
border-radius: 0;
backdrop-filter: blur(10px);
transition: background 240ms, color 240ms, border-color 240ms, transform 240ms;
}
.cyl-cta:hover {
background: var(--neon-yellow);
color: #0c0014;
border-color: var(--neon-yellow);
transform: translateY(-2px);
}
.cyl-cta svg { transition: transform 240ms; }
.cyl-cta:hover svg { transform: translateX(4px); }
/* Bottom meter */
.cyl-meter {
position: relative; z-index: 4;
display: flex; align-items: center; gap: 16px;
padding: 80px clamp(20px, 4vw, 48px) 32px;
max-width: 720px;
margin: 0 auto;
width: 100%;
}
.cyl-meter-num {
font-family: var(--display); font-weight: 800;
font-size: 22px; letter-spacing: -0.01em;
color: var(--ink);
min-width: 36px;
}
.cyl-meter-total {
font-family: var(--mono);
font-size: 11px; letter-spacing: 0.2em;
color: rgba(255,255,255,0.5);
}
.cyl-meter-bar {
flex: 1;
height: 1px;
background: rgba(255,255,255,0.18);
position: relative;
overflow: hidden;
}
.cyl-meter-bar > div {
position: absolute; left: 0; top: 0; bottom: 0;
background: linear-gradient(90deg, #EBFF00, #FF0075, #AF66FA);
transition: width 360ms cubic-bezier(0.4,0,0.2,1);
}
/* Scroll hint */
.cyl-scroll-hint {
position: absolute;
right: clamp(20px, 4vw, 48px);
bottom: 80px;
display: flex; flex-direction: column; align-items: center; gap: 10px;
font-family: var(--mono);
font-size: 10px; letter-spacing: 0.28em;
color: rgba(255,255,255,0.5);
z-index: 4;
animation: cyl-hint 2.4s ease-in-out infinite;
}
.cyl-scroll-hint span { writing-mode: vertical-rl; transform: rotate(180deg); }
@keyframes cyl-hint {
0%, 100% { transform: translateY(0); opacity: 0.5; }
50% { transform: translateY(8px); opacity: 0.9; }
}
@media (max-width: 900px) {
.experiences-cyl {
height: auto;
--cyl-card-w: clamp(170px, 34vw, 240px);
--cyl-card-h: clamp(240px, 48vw, 340px);
--cyl-radius: calc(var(--cyl-card-w) * 2.55);
--cyl-active-scale: 1.25;
}
.cyl-scroll-hint { display: none; }
.cyl-head { padding-top: 8px; }
.cyl-title-overlay { font-size: clamp(36px, 11vw, 80px); }
}
@media (max-width: 540px) {
.experiences-cyl {
--cyl-card-w: 150px;
--cyl-card-h: 215px;
--cyl-radius: calc(var(--cyl-card-w) * 2.4);
--cyl-active-scale: 1.22;
}
.cyl-titles { height: 60px; }
.cyl-title-overlay { font-size: 40px; }
.cyl-meter { padding-bottom: 24px; }
}
/* ===================================================================
LANGUAGE SWITCHER (i18n)
=================================================================== */
.lang-switch { position: relative; display: inline-flex; }
.lang-trigger {
display: inline-flex; align-items: center; gap: 7px;
padding: 9px 11px;
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 0;
cursor: pointer;
color: var(--ink, #fff);
font-family: inherit;
font-size: 11px; font-weight: 700;
letter-spacing: 0.12em; text-transform: uppercase;
transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.lang-trigger:hover { border-color: rgba(255, 255, 255, 0.55); }
.lang-trigger.is-open { border-color: var(--ink, #fff); background: rgba(255, 255, 255, 0.06); }
.lang-trigger svg:first-child { opacity: 0.85; }
.lang-cur { line-height: 1; }
.lang-caret { opacity: 0.7; transition: transform 0.24s ease; }
.lang-trigger.is-open .lang-caret { transform: rotate(180deg); }
/* header colour adaptivity: when header is light (scrolled), use ink */
.site-header.scrolled .lang-trigger { border-color: rgba(10, 5, 16, 0.25); color: var(--ink, #0a0510); }
.site-header.scrolled .lang-trigger:hover { border-color: rgba(10, 5, 16, 0.6); }
.lang-menu {
position: absolute;
top: calc(100% + 10px);
right: 0;
min-width: 230px;
background: rgba(12, 8, 20, 0.97);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 12px;
padding: 10px;
opacity: 0;
transform: translateY(-6px) scale(0.98);
transform-origin: top right;
pointer-events: none;
transition: opacity 0.2s ease, transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
z-index: 70;
box-shadow: 0 28px 56px rgba(0, 0, 0, 0.5);
}
.lang-menu.is-open { opacity: 1; transform: none; pointer-events: auto; }
.lang-group + .lang-group { margin-top: 6px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.lang-group-label {
font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase;
color: rgba(255, 255, 255, 0.45); font-weight: 700;
padding: 4px 10px 8px;
}
.lang-opt {
display: flex; align-items: center; gap: 10px;
width: 100%;
padding: 10px 12px;
background: transparent; border: 0; border-radius: 7px;
cursor: pointer;
color: rgba(255, 255, 255, 0.82);
font-family: inherit; font-size: 13px; font-weight: 600;
text-align: left;
transition: background 0.16s ease, color 0.16s ease;
}
.lang-opt:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
.lang-opt.is-on { background: rgba(255, 255, 255, 0.06); color: #fff; }
.lang-native { flex: 1; }
.lang-short {
font-size: 9px; letter-spacing: 0.14em; font-weight: 700;
color: rgba(255, 255, 255, 0.4);
border: 1px solid rgba(255, 255, 255, 0.18);
padding: 3px 6px; border-radius: 4px;
}
.lang-opt.is-on .lang-short { color: #07060a; background: var(--neon-yellow, #EBFF00); border-color: var(--neon-yellow, #EBFF00); }
.lang-check { color: var(--neon-yellow, #EBFF00); display: inline-flex; }
/* mobile drawer language row */
.menu-drawer-lang {
display: flex; align-items: center; justify-content: space-between;
gap: 14px; margin-top: auto; padding: 18px 0 14px;
border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.menu-drawer-lang-label {
font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
color: rgba(255, 255, 255, 0.5); font-weight: 700;
}
.menu-drawer-lang .lang-menu { left: 0; right: auto; top: auto; bottom: calc(100% + 10px); transform-origin: bottom left; max-width: calc(100vw - 40px); }
@media (max-width: 900px) {
/* keep the switcher visible on small screens; hide the desktop nav as usual */
.lang-switch { order: -1; }
}
/* ===================================================================
RTL (Arabic), chrome polish
=================================================================== */
html[dir="rtl"] .lang-menu,
html[dir="rtl"] .nav-more-menu { right: auto; left: 0; transform-origin: top left; }
html[dir="rtl"] .lang-opt,
html[dir="rtl"] .nav-more-menu a { text-align: right; }
html[dir="rtl"] .lang-trigger,
html[dir="rtl"] .lang-opt { flex-direction: row-reverse; }
html[dir="rtl"] .lang-native { text-align: right; }
html[dir="rtl"] .hero-edition,
html[dir="rtl"] .hero-locale { direction: rtl; }
html[dir="rtl"] .footer-base { direction: rtl; }
html[dir="rtl"] .btn-arrow svg { transform: scaleX(-1); }
/* ===================================================================
MOBILE RESPONSIVENESS PASS
=================================================================== */
@media (max-width: 768px) {
/* Header: hamburger is the only entry point; hide CTA + inline lang
(the language switcher lives inside the full-screen drawer). */
.header-actions .btn-primary { display: none; }
.header-actions > .lang-switch { display: none; }
.brand-logo { height: 30px; }
/* Hero: the two CTAs sit inline as equal columns. */
.hero-cta-row { flex-wrap: nowrap; gap: 8px; }
.hero-cta-row .btn { flex: 1 1 0; justify-content: center; text-align: center; font-size: 11.5px; letter-spacing: 0.02em; padding: 12px 12px; gap: 6px; min-width: 0; }
.hero-cta-row .btn-arrow { width: 16px; height: 16px; }
.hero-cta-row .btn-line { display: none; }
/* Tracks: heading on its own row, blurb underneath. */
.tracks-head { flex-direction: column; align-items: flex-start; gap: 12px; }
.tracks-sub { padding-bottom: 0; max-width: none; }
/* Tracks: 1.5-card horizontal carousel that bleeds to the right edge —
the half-visible card signals it scrolls (no arrows needed). */
.tracks-grid {
display: grid; grid-auto-flow: column; grid-template-columns: none;
grid-auto-columns: 66%;
gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch; scrollbar-width: none;
margin-left: calc(-1 * clamp(20px, 4vw, 48px));
margin-right: calc(-1 * clamp(20px, 4vw, 48px));
padding: 4px clamp(20px, 4vw, 48px);
}
.tracks-grid::-webkit-scrollbar { display: none; }
.tracks-grid .track-card { grid-column: auto !important; scroll-snap-align: start; min-height: 290px; }
/* Rewind: title on its own row, blurb underneath. */
.rewind-head { flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: 40px; }
/* Stories & Insights: title moves up, the "All Reports" button drops below it. */
.stories-head { flex-direction: column; align-items: flex-start; gap: 18px; margin-bottom: 32px; }
/* Apply / CTA band (pink orb section): trim the full-viewport height on mobile. */
.cta-join { min-height: 62vh; padding-top: clamp(48px, 8vh, 80px); padding-bottom: clamp(48px, 8vh, 80px); }
/* Apply / CTA band: trim the very tall bottom padding. */
.cta-pair { padding-top: 24px; padding-bottom: 56px; gap: 16px; }
}
/* ======= PARTNERSHIP DECK, gated download modal ======= */
.deckm-scrim {
position: fixed; inset: 0; z-index: 2200;
display: flex; align-items: center; justify-content: center; padding: 20px;
background: rgba(8,6,12,0.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
animation: deckm-in 200ms ease;
}
@keyframes deckm-in { from { opacity: 0; } to { opacity: 1; } }
.deckm-card {
position: relative; width: min(520px, 94vw); max-height: 92vh; overflow-y: auto;
background: #fff; color: #12101a; border-radius: 20px; padding: clamp(26px, 4vw, 40px);
box-shadow: 0 40px 120px rgba(0,0,0,0.45); animation: deckm-pop 260ms cubic-bezier(.16,.84,.3,1);
}
@keyframes deckm-pop { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.deckm-close {
position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border-radius: 50%;
display: grid; place-items: center; cursor: pointer; color: #12101a;
background: rgba(0,0,0,0.05); border: 1px solid rgba(0,0,0,0.08); transition: background 160ms ease;
}
.deckm-close:hover { background: rgba(0,0,0,0.1); }
.deckm-kicker { font-family: var(--mono, monospace); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--hot-pink, #FF0075); margin-bottom: 8px; }
.deckm-h { font-family: var(--display); font-weight: 800; font-size: clamp(24px, 3.4vw, 32px); line-height: 1.05; text-transform: uppercase; letter-spacing: -0.01em; margin: 0 0 8px; }
.deckm-blurb { font-size: 14.5px; line-height: 1.55; color: #4a4658; margin: 0 0 20px; }
.deckm-form { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.deckm-field { display: flex; flex-direction: column; gap: 6px; grid-column: span 6; }
.deckm-consent, .deckm-err, .deckm-submit { grid-column: span 6; }
.deckm-field select { font: inherit; font-size: 15px; padding: 12px 14px; border-radius: 11px; border: 1px solid rgba(0,0,0,0.14); background: #fafafb; color: #12101a; width: 100%; }
.deckm-field select:focus { outline: none; border-color: var(--hot-pink, #FF0075); background: #fff; }
.deckm-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.deckm-opt { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; text-transform: none; letter-spacing: 0; font-weight: 500; color: #2a2733; padding: 7px 12px; border: 1px solid rgba(0,0,0,0.14); border-radius: 999px; cursor: pointer; }
.deckm-opt input { width: 15px; height: 15px; accent-color: var(--hot-pink, #FF0075); }
@media (max-width: 560px) { .deckm-field { grid-column: span 6 !important; } }
.deckm-field span { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #6a6678; }
.deckm-field input, .deckm-field textarea {
font: inherit; font-size: 15px; padding: 12px 14px; border-radius: 11px;
border: 1px solid rgba(0,0,0,0.14); background: #fafafb; color: #12101a; width: 100%;
}
.deckm-field textarea { min-height: 84px; resize: vertical; }
.deckm-field input:focus, .deckm-field textarea:focus { outline: none; border-color: var(--hot-pink, #FF0075); background: #fff; }
.deckm-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; line-height: 1.5; color: #4a4658; }
.deckm-consent input { margin-top: 3px; width: 16px; height: 16px; flex: none; accent-color: var(--hot-pink, #FF0075); }
.deckm-consent a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.deckm-err { font-size: 13px; color: #d92b3f; }
/* Buttons inside the modal: explicit colours so they always read on the white
card — .btn-primary is white-on-dark elsewhere and vanished here. */
.deckm-card .btn-primary, .deckm-card .deckm-submit {
background: var(--hot-pink, #FF0075); border-color: var(--hot-pink, #FF0075); color: #ffffff;
}
.deckm-card .btn-primary:hover, .deckm-card .deckm-submit:hover {
background: #d60063; border-color: #d60063; color: #ffffff;
}
.deckm-card .btn-outline {
background: transparent; border: 1.5px solid rgba(10, 5, 16, 0.8); color: #12101a;
}
.deckm-card .btn-outline:hover { background: #12101a; border-color: #12101a; color: #ffffff; }
.deckm-submit { margin-top: 4px; align-self: flex-start; }
.deckm-done { text-align: center; padding: 8px 0 4px; }
.deckm-check { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; margin-bottom: 14px; color: #1f8a5b; background: rgba(31,138,91,0.12); }
.deckm-done h3 { font-family: var(--display); font-weight: 800; font-size: 24px; text-transform: uppercase; margin: 0 0 8px; }
.deckm-done p { font-size: 14.5px; line-height: 1.55; color: #4a4658; margin: 0 0 18px; }
/* newsletter success state */
.newsletter-done { display: flex; gap: 14px; align-items: flex-start; padding: 20px 22px; border-radius: 16px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16); }
.newsletter-tick { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: #0b0a0f; background: #76FF86; }
.newsletter-done strong { display: block; font-size: 16px; margin-bottom: 4px; }
.newsletter-done p { font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,0.78); margin: 0; }
/* ===================================================================
LIBO NEWS — the “what’s happening” ticker (right side; Libo sits left)
=================================================================== */
.libo-news-root { position: fixed; right: 22px; bottom: 96px; z-index: 76; }
.libo-news {
width: 296px; max-width: calc(100vw - 44px);
background: #fff; color: #16121c;
border-radius: 18px; border: 1px solid rgba(10,5,16,0.08);
box-shadow: 0 18px 50px rgba(10,5,16,0.38);
overflow: hidden;
animation: liboNewsIn 340ms cubic-bezier(0.22,1,0.36,1);
}
@keyframes liboNewsIn { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: none; } }
.libo-news-head { display: flex; align-items: center; gap: 10px; padding: 12px 12px 10px; }
.libo-news-face { width: 34px; height: 34px; border-radius: 11px; background: var(--hot-pink, #FF0075); display: grid; place-items: center; flex: none; animation: liboNewsBob 3.4s ease-in-out infinite; }
.libo-news-face svg, .libo-news-face img { width: 24px; height: 24px; }
@keyframes liboNewsBob { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-3px) rotate(-5deg); } }
.libo-news-id { display: flex; flex-direction: column; line-height: 1.2; flex: 1; min-width: 0; }
.libo-news-id strong { font-size: 13.5px; font-weight: 800; letter-spacing: 0.01em; }
.libo-news-live { font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(22,18,28,0.55); display: inline-flex; align-items: center; gap: 5px; margin-top: 1px; }
.libo-news-live i { width: 6px; height: 6px; border-radius: 50%; background: #FF0075; animation: liboNewsPulse 1.6s ease-in-out infinite; }
@keyframes liboNewsPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.7); } }
.libo-news-min { width: 26px; height: 26px; border-radius: 8px; border: 0; background: rgba(10,5,16,0.06); color: #16121c; display: grid; place-items: center; cursor: pointer; flex: none; }
.libo-news-min:hover { background: rgba(10,5,16,0.12); }
.libo-news-stage { position: relative; }
.libo-news-slide { display: block; text-decoration: none; color: inherit; }
.libo-news-slide.is-on { animation: liboNewsSlide 320ms cubic-bezier(0.22,1,0.36,1); }
/* hidden slides stay mounted (videos keep playing) but are invisible & inert */
.libo-news-slide:not(.is-on) { position: absolute; inset: 0 0 auto 0; opacity: 0; visibility: hidden; pointer-events: none; }
@keyframes liboNewsSlide { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
.libo-news-img { position: relative; display: block; height: 122px; background-size: cover; background-position: center; background-color: #efeef2; overflow: hidden; }
.libo-news-img video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* YouTube slides: the frame fills the slot; clicks pass through to the slide link */
.libo-news-img iframe { width: 100%; height: 100%; border: 0; display: block; pointer-events: none; }
/* per-slide sound toggle (videos always start muted) */
.libo-news-mute {
position: absolute; right: 8px; bottom: 8px; z-index: 2;
width: 30px; height: 30px; border-radius: 50%; border: 0;
background: rgba(10,5,16,0.62); color: #fff;
display: grid; place-items: center; cursor: pointer;
-webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
transition: background 160ms ease, transform 160ms ease;
}
.libo-news-mute:hover { background: rgba(10,5,16,0.85); transform: scale(1.06); }
.libo-news-mute.is-live { background: #FF0075; }
.libo-news-body { display: flex; flex-direction: column; gap: 5px; padding: 12px 14px 2px; }
.libo-news-tag { font-size: 9.5px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: #FF0075; }
.libo-news-title { font-size: 15.5px; font-weight: 800; line-height: 1.28; }
.libo-news-sub { font-size: 12.5px; line-height: 1.52; color: rgba(22,18,28,0.66); }
.libo-news-slide:hover .libo-news-title { text-decoration: underline; text-underline-offset: 3px; }
.libo-news-foot { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 12px; }
.libo-news-dots { display: flex; gap: 5px; }
.libo-news-dot { width: 6px; height: 6px; border-radius: 99px; border: 0; padding: 0; background: rgba(10,5,16,0.18); cursor: pointer; transition: width 200ms ease, background 200ms ease; }
.libo-news-dot.is-on { width: 18px; background: #FF0075; }
.libo-news-navs { display: flex; gap: 6px; }
.libo-news-nav { width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(10,5,16,0.16); background: #fff; color: #16121c; display: grid; place-items: center; cursor: pointer; transition: background 160ms ease, color 160ms ease, border-color 160ms ease; }
.libo-news-nav:hover { background: #16121c; color: #fff; border-color: #16121c; }
/* collapsed pill */
.libo-news-fab {
position: relative; display: inline-flex; align-items: center; gap: 8px;
padding: 10px 16px 10px 11px; border-radius: 999px;
border: 1px solid rgba(10,5,16,0.1); background: #fff; color: #16121c;
cursor: pointer; box-shadow: 0 12px 34px rgba(10,5,16,0.32);
font-weight: 800; font-size: 11.5px; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap;
transition: transform 180ms ease;
}
.libo-news-fab:hover { transform: translateY(-2px); }
.libo-news-fab svg, .libo-news-fab img { width: 24px; height: 24px; }
.libo-news-fab-dot { position: absolute; top: -2px; right: -2px; width: 11px; height: 11px; border-radius: 50%; background: #FF0075; border: 2px solid #fff; animation: liboNewsPulse 1.6s ease-in-out infinite; }
@media (max-width: 520px) {
.libo-news-root { right: 12px; bottom: 84px; }
.libo-news { width: min(296px, calc(100vw - 24px)); }
.libo-news-img { height: 104px; }
}
@media (prefers-reduced-motion: reduce) {
.libo-news, .libo-news-slide, .libo-news-face, .libo-news-live i, .libo-news-fab-dot { animation: none; }
}
/* Libo suite: second action in the panel (opens the What’s-happening ticker) */
.libo-cta-news { background: #fff; color: #0a0510; margin-top: 0; }
.libo-cta-news:hover { background: #ece9f1; filter: none; }
/* Site-wide smooth gliding for anchor jumps (wheel glide lives in gamify.jsx) */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* ===================================================================
IMAGE-TILE HAIRLINE FIX
Cards that clip a zooming image inside rounded corners can show a
sub-pixel seam between the image layer and the card edge on some
screens (fractional-DPR rounding) — the image looks “cut” inside
its border. Bleed those layers 1px outward so they always reach
the clipped edge; the overflow is invisible.
=================================================================== */
.track-img,
.story-img,
.hero-v3-card .img,
.xpm-img,
.cyl-img,
.lu-img { inset: -1px; }
/* image-tile shells get a matching dark base so any residual seam
disappears instead of reading as a bright/cut edge */
.story-card, .xpm-card, .cyl-card, .lu-card { background-color: #100b17; }
/* ===================================================================
LIBO CHAT — light-theme chat window (part of the Libo suite)
=================================================================== */
.libo-chat-root { position: fixed; right: 22px; bottom: 96px; z-index: 89; }
.libo-chat {
width: 352px; max-width: calc(100vw - 32px);
height: min(540px, calc(100vh - 150px));
display: flex; flex-direction: column;
background: #fff; color: #16121c;
border-radius: 20px; border: 1px solid rgba(10,5,16,0.08);
box-shadow: 0 24px 70px rgba(10,5,16,0.4);
overflow: hidden;
animation: liboChatIn 320ms cubic-bezier(0.22,1,0.36,1);
}
@keyframes liboChatIn { from { opacity: 0; transform: translateY(16px) scale(0.97); } to { opacity: 1; transform: none; } }
.libo-chat-head { display: flex; align-items: center; gap: 10px; padding: 12px 12px 11px 14px; border-bottom: 1px solid rgba(10,5,16,0.07); }
.libo-chat-face { width: 36px; height: 36px; border-radius: 12px; background: var(--hot-pink, #FF0075); display: grid; place-items: center; flex: none; animation: liboChatBob 3.4s ease-in-out infinite; }
.libo-chat-face .libo-img { width: 24px; height: 24px; }
@keyframes liboChatBob { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-3px) rotate(-5deg); } }
.libo-chat-id { display: flex; flex-direction: column; line-height: 1.25; flex: 1; min-width: 0; }
.libo-chat-id strong { font-size: 13.5px; font-weight: 800; }
.libo-chat-status { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(22,18,28,0.55); display: inline-flex; align-items: center; gap: 5px; }
.libo-chat-status i { width: 6px; height: 6px; border-radius: 50%; background: #1fbf5f; animation: liboChatPulse 1.8s ease-in-out infinite; }
@keyframes liboChatPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.libo-chat-hbtn { width: 27px; height: 27px; border-radius: 9px; border: 0; background: rgba(10,5,16,0.06); color: #16121c; display: grid; place-items: center; cursor: pointer; flex: none; transition: background 150ms ease; }
.libo-chat-hbtn:hover { background: rgba(10,5,16,0.13); }
.libo-chat-body { flex: 1; overflow-y: auto; padding: 14px; background: #f7f6f9; display: flex; flex-direction: column; gap: 10px; scrollbar-width: thin; }
.libo-msg { display: flex; flex-direction: column; max-width: 88%; }
.libo-msg.from-bot { align-self: flex-start; align-items: flex-start; }
.libo-msg.from-user { align-self: flex-end; align-items: flex-end; }
.libo-msg-bubble { padding: 10px 13px; font-size: 13.5px; line-height: 1.52; border-radius: 15px; animation: liboMsgIn 240ms cubic-bezier(0.22,1,0.36,1); }
.from-bot .libo-msg-bubble { background: #fff; border: 1px solid rgba(10,5,16,0.08); border-bottom-left-radius: 5px; }
.from-user .libo-msg-bubble { background: var(--hot-pink, #FF0075); color: #fff; border-bottom-right-radius: 5px; }
@keyframes liboMsgIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.libo-msg-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.libo-msg-chip {
display: inline-flex; align-items: center; padding: 6px 12px;
border-radius: 999px; border: 1px solid rgba(255,0,117,0.4);
background: #fff; color: var(--hot-pink, #FF0075);
font-size: 11.5px; font-weight: 700; cursor: pointer; text-decoration: none;
transition: background 150ms ease, color 150ms ease, transform 150ms ease;
}
.libo-msg-chip:hover { background: var(--hot-pink, #FF0075); color: #fff; transform: translateY(-1px); }
.libo-chat-starters { margin-top: -2px; }
.libo-typing { display: inline-flex; gap: 4px; align-items: center; padding: 12px 14px; }
.libo-typing i { width: 6px; height: 6px; border-radius: 50%; background: rgba(22,18,28,0.4); animation: liboTyping 1.1s ease-in-out infinite; }
.libo-typing i:nth-child(2) { animation-delay: 0.15s; }
.libo-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes liboTyping { 0%, 100% { transform: translateY(0); opacity: 0.45; } 50% { transform: translateY(-4px); opacity: 1; } }
.libo-chat-form { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid rgba(10,5,16,0.07); background: #fff; }
.libo-chat-form input {
flex: 1; min-width: 0; padding: 10px 15px; border-radius: 999px;
border: 1px solid rgba(10,5,16,0.14); background: #fff; color: #16121c;
font: inherit; font-size: 13.5px; outline: none;
transition: border-color 150ms ease, box-shadow 150ms ease;
}
.libo-chat-form input:focus { border-color: var(--hot-pink, #FF0075); box-shadow: 0 0 0 3px rgba(255,0,117,0.14); }
.libo-chat-send {
width: 40px; height: 40px; border-radius: 50%; border: 0; flex: none;
background: var(--hot-pink, #FF0075); color: #fff;
display: grid; place-items: center; cursor: pointer;
transition: transform 150ms ease, opacity 150ms ease;
}
.libo-chat-send:hover { transform: scale(1.07); }
.libo-chat-send:disabled { opacity: 0.35; cursor: default; transform: none; }
@media (max-width: 520px) {
.libo-chat-root { left: 12px; right: 12px; bottom: 88px; }
.libo-chat { width: 100%; max-width: none; height: min(500px, calc(100vh - 130px)); }
}
@media (prefers-reduced-motion: reduce) {
.libo-chat, .libo-msg-bubble, .libo-chat-face, .libo-chat-status i, .libo-typing i { animation: none; }
}
/* Libo suite: chat + game share the brand yellow and stack flush (no row gap);
the What’s-happening button keeps its 8px separation. */
.libo-cta-chat { background: var(--lime, #76FF86); }
.libo-cta-chat:hover { background: #93ffa0; filter: none; }
/* Libo Chat: inline lead-capture card (A/B: ask-first vs mid-chat) */
.libo-lead { align-self: stretch; background: var(--lime, #76FF86); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 8px; animation: liboMsgIn 240ms cubic-bezier(0.22,1,0.36,1); }
.libo-lead-t { font-weight: 800; font-size: 13.5px; color: #0a0510; }
.libo-lead-s { font-size: 12px; color: rgba(10,5,16,0.72); line-height: 1.45; }
.libo-lead input { padding: 9px 13px; border-radius: 10px; border: 1px solid rgba(10,5,16,0.22); background: #fff; color: #0a0510; font: inherit; font-size: 13px; outline: none; }
.libo-lead input:focus { border-color: #0a0510; }
.libo-lead-err { font-size: 11.5px; color: #a1150d; font-weight: 700; }
.libo-lead-go { margin-top: 2px; padding: 10px 14px; border-radius: 999px; border: 0; background: #0a0510; color: #fff; font-weight: 800; font-size: 12.5px; cursor: pointer; transition: background 150ms ease; }
.libo-lead-go:hover { background: #241a2e; }
.libo-lead-skip { background: none; border: 0; color: rgba(10,5,16,0.6); font-size: 11.5px; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; padding: 2px; }
.libo-chat-form input:disabled { background: rgba(10,5,16,0.04); cursor: not-allowed; }