/* ============================================================
SPORTECH 2027 — Cinematic Black + Neon Edition
Background: pure black · Accents: brand blue / pink / yellow
Heavy glow, motion, and interactive treatments
============================================================ */
:root {
/* Surfaces */
--bg: #000000;
--bg-1: #050510;
--bg-2: #0A0A1A;
--bg-card: rgba(255,255,255,0.035);
--bg-card-2: rgba(255,255,255,0.06);
--border: rgba(255,255,255,0.08);
--border-2: rgba(255,255,255,0.18);
/* Brand neon palette (logo: blue + pink + yellow) */
--blue: #00A8B5;
--blue-deep: #008D9A;
--pink: #E91E63;
--pink-deep: #E91E80;
--yellow: #FFC400;
--yellow-deep: #B59100;
/* Text */
--text: #FFFFFF;
--text-soft: #D8DEE8;
--text-mute: #8A92A4;
/* Glows — used in box-shadow / text-shadow / drop-shadow */
--glow-blue: 0 0 14px rgba(0,168,181,0.55), 0 0 38px rgba(0,168,181,0.28);
--glow-pink: 0 0 14px rgba(233,30,99,0.55), 0 0 38px rgba(233,30,99,0.28);
--glow-yellow: 0 0 14px rgba(255,196,0,0.55), 0 0 38px rgba(255,196,0,0.28);
--glow-multi: 0 0 22px rgba(0,168,181,0.35), 0 0 60px rgba(233,30,99,0.22);
/* Type */
--f-head: 'Montserrat', 'Inter', system-ui, -apple-system, Segoe UI, Arial, sans-serif;
--f-body: 'Inter', 'Poppins', system-ui, -apple-system, Segoe UI, Arial, sans-serif;
/* Layout */
--maxw: 1280px;
--pad-x: clamp(20px, 4vw, 64px);
--gap: clamp(20px, 3vw, 40px);
--radius: 20px;
--radius-sm: 12px;
}
* { box-sizing: border-box; }
html {
scroll-behavior: smooth;
background: var(--bg);
scrollbar-color: rgba(0,168,181,0.4) #000;
scrollbar-width: thin;
}
html::-webkit-scrollbar { width: 8px; }
html::-webkit-scrollbar-track { background: #000; }
html::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, var(--blue), var(--pink), var(--yellow));
border-radius: 6px;
}
body {
margin: 0;
font-family: var(--f-body);
color: var(--text);
background: var(--bg);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
body.has-custom-cursor { cursor: none; }
body.has-custom-cursor a, body.has-custom-cursor button, body.has-custom-cursor .btn { cursor: none; }
@media (max-width: 700px) {
body, body.has-custom-cursor { cursor: auto !important; }
.cursor, .cursor-trail { display: none !important; }
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5 {
font-family: var(--f-head);
font-weight: 800;
letter-spacing: -0.01em;
line-height: 1.1;
margin: 0 0 0.5em;
}
h1 { font-size: clamp(2.6rem, 6vw, 6rem); font-weight: 900; letter-spacing: -0.02em; }
h2 { font-size: clamp(2rem, 4vw, 3.4rem); font-weight: 800; }
h3 { font-size: clamp(1.2rem, 1.9vw, 1.7rem); }
p { margin: 0 0 1em; }
::selection { background: var(--pink); color: #000; }
.container {
max-width: var(--maxw);
margin: 0 auto;
padding-left: var(--pad-x);
padding-right: var(--pad-x);
}
/* ============================================================
AMBIENT BACKGROUND (animated orbs + grid)
============================================================ */
.ambient {
position: fixed;
inset: 0;
z-index: -2;
pointer-events: none;
overflow: hidden;
background: var(--bg);
}
.ambient::before {
content: '';
position: absolute; inset: 0;
background:
radial-gradient(circle at 50% 50%, rgba(255,255,255,0.06) 1px, transparent 1.5px) 0 0/56px 56px,
linear-gradient(180deg, var(--bg) 0%, var(--bg-1) 100%);
opacity: 0.6;
mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, #000 0%, transparent 80%);
-webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, #000 0%, transparent 80%);
}
.ambient__orb {
position: absolute;
width: 50vmax; height: 50vmax;
border-radius: 50%;
filter: blur(90px);
opacity: 0.42;
will-change: transform;
}
.ambient__orb--blue { background: radial-gradient(circle, var(--blue) 0%, transparent 65%); top: -20%; left: -10%; animation: drift1 26s ease-in-out infinite; }
.ambient__orb--pink { background: radial-gradient(circle, var(--pink) 0%, transparent 65%); bottom: -25%; right: -10%; animation: drift2 32s ease-in-out infinite; }
.ambient__orb--yellow { background: radial-gradient(circle, var(--yellow) 0%, transparent 65%); top: 40%; left: 50%; opacity: 0.18; animation: drift3 38s ease-in-out infinite; }
@keyframes drift1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(15vw,12vh) scale(1.1); } }
@keyframes drift2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-12vw,-10vh) scale(1.15); } }
@keyframes drift3 { 0%,100% { transform: translate(0,0) scale(0.9); } 50% { transform: translate(-8vw,8vh) scale(1.05); } }
/* Custom cursor (desktop only) */
.cursor {
position: fixed;
top: 0; left: 0;
width: 16px; height: 16px;
border-radius: 50%;
background: var(--blue);
box-shadow: 0 0 12px var(--blue), 0 0 28px rgba(0,168,181,0.55), 0 0 50px rgba(0,168,181,0.3);
transform: translate(-50%, -50%);
pointer-events: none;
z-index: 9999;
mix-blend-mode: screen;
transition: width 0.25s, height 0.25s, background 0.25s, box-shadow 0.25s;
will-change: transform;
}
.cursor.is-hover {
width: 50px; height: 50px;
background: rgba(0,168,181,0.15);
border: 1.5px solid var(--blue);
box-shadow: 0 0 18px var(--blue), 0 0 40px rgba(0,168,181,0.5);
}
.cursor-trail {
position: fixed;
top: 0; left: 0;
width: 56px; height: 56px;
border-radius: 50%;
border: 1px solid rgba(0,168,181,0.35);
transform: translate(-50%, -50%);
pointer-events: none;
z-index: 9998;
mix-blend-mode: screen;
will-change: transform;
}
/* Top scroll progress bar */
.scroll-progress {
position: fixed;
top: 0; left: 0; right: 0;
height: 3px;
z-index: 200;
pointer-events: none;
}
.scroll-progress__fill {
height: 100%;
width: 0%;
background: linear-gradient(90deg, var(--blue), var(--pink), var(--yellow));
box-shadow: 0 0 10px var(--blue), 0 0 20px var(--pink);
transition: width 0.08s linear;
}
/* Reveal animations */
.reveal {
opacity: 0;
transform: translateY(40px) scale(0.98);
transition: opacity 0.9s cubic-bezier(.2,.8,.2,1), transform 0.9s cubic-bezier(.2,.8,.2,1);
will-change: opacity, transform;
}
.reveal.visible { opacity: 1; transform: translateY(0) scale(1); }
.reveal.delay-1 { transition-delay: 0.12s; }
.reveal.delay-2 { transition-delay: 0.22s; }
.reveal.delay-3 { transition-delay: 0.32s; }
.reveal.delay-4 { transition-delay: 0.42s; }
@media (prefers-reduced-motion: reduce) {
.reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
html { scroll-behavior: auto; }
.ambient__orb { animation: none !important; }
}
/* ============================================================
NAV
============================================================ */
.nav {
position: fixed; top: 0; left: 0; right: 0;
display: flex; align-items: center; justify-content: space-between;
padding: 16px var(--pad-x);
z-index: 100;
background: rgba(0,0,0,0.55);
backdrop-filter: blur(20px) saturate(140%);
-webkit-backdrop-filter: blur(20px) saturate(140%);
border-bottom: 1px solid var(--border);
transition: background 0.3s ease, padding 0.3s ease;
}
.nav.scrolled {
background: rgba(0,0,0,0.85);
padding: 10px var(--pad-x);
}
.nav__logo { display: flex; align-items: center; gap: 10px; font-family: var(--f-head); font-weight: 900; letter-spacing: 1px; }
.nav__logo img, .nav__logo svg, .nav__logo object {
height: 120px; width: auto; max-width: 240px;
object-fit: contain;
pointer-events: none;
display: block;
}
.nav.scrolled .nav__logo img,
.nav.scrolled .nav__logo svg,
.nav.scrolled .nav__logo object {
height: 88px; max-width: 180px;
transition: height 0.3s ease, max-width 0.3s ease;
}
@media (max-width: 768px) {
.nav__logo img, .nav__logo svg, .nav__logo object { height: 84px; max-width: 170px; }
.nav.scrolled .nav__logo img,
.nav.scrolled .nav__logo svg,
.nav.scrolled .nav__logo object { height: 68px; max-width: 140px; }
}
.nav__links { display: flex; gap: 28px; list-style: none; padding: 0; margin: 0; }
.nav__links a {
font-size: 0.86rem; font-weight: 600; color: var(--text-soft);
position: relative; padding: 8px 2px;
transition: color 0.2s, text-shadow 0.2s;
}
.nav__links a:hover { color: var(--blue); text-shadow: 0 0 12px rgba(0,168,181,0.7); }
.nav__links a.active { color: #fff; }
.nav__links a.active::after {
content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px;
background: linear-gradient(90deg, var(--blue), var(--pink), var(--yellow));
border-radius: 2px;
box-shadow: 0 0 10px var(--blue);
}
.nav__cta {
padding: 11px 24px; border-radius: 999px; font-weight: 700; font-size: 0.85rem;
background: linear-gradient(135deg, var(--pink), var(--pink-deep));
color: #fff;
box-shadow: 0 0 0 1px rgba(233,30,99,0.6), 0 0 22px rgba(233,30,99,0.6), 0 8px 30px rgba(233,30,99,0.35);
white-space: nowrap;
transition: transform 0.2s, box-shadow 0.2s;
}
.nav__cta:hover {
transform: translateY(-2px);
box-shadow: 0 0 0 1px rgba(233,30,99,0.8), 0 0 32px rgba(233,30,99,0.85), 0 12px 40px rgba(233,30,99,0.5);
}
@media (max-width: 920px) { .nav__links { display: none; } }
/* Theme toggle button in nav */
.nav__theme {
display: inline-grid; place-items: center;
width: 40px; height: 40px;
border-radius: 999px;
background: rgba(255,255,255,0.04);
border: 1px solid var(--border-2);
color: var(--text-soft);
cursor: pointer;
transition: color 0.2s, background 0.2s, border-color 0.2s, transform 0.2s, box-shadow 0.2s;
margin-right: 12px;
flex: 0 0 auto;
}
.nav__theme:hover {
color: var(--yellow);
border-color: rgba(255,196,0,0.5);
background: rgba(255,196,0,0.08);
box-shadow: 0 0 18px rgba(255,196,0,0.35);
transform: translateY(-1px);
}
.nav__theme-icon { width: 18px; height: 18px; }
/* Default (dark theme): show SUN (suggesting "switch to light") */
.nav__theme-icon--moon { display: none; }
.nav__theme-icon--sun { display: block; }
/* Light theme: show MOON (suggesting "switch to dark") */
html[data-theme="light"] .nav__theme-icon--sun { display: none; }
html[data-theme="light"] .nav__theme-icon--moon { display: block; }
/* ============================================================
SECTION FRAME
============================================================ */
section {
position: relative;
padding: clamp(80px, 10vw, 50px) 0;
}
.section-eyebrow {
display: inline-flex; align-items: center; gap: 8px;
font-size: 0.78rem; font-weight: 700; letter-spacing: 4px;
text-transform: uppercase;
padding: 7px 16px; border-radius: 999px;
background: rgba(255,255,255,0.04);
border: 1px solid var(--border-2);
margin-bottom: 22px;
}
.section-eyebrow::before {
content: ''; width: 6px; height: 6px; border-radius: 50%;
}
.section-eyebrow--blue { color: var(--blue); border-color: rgba(0,168,181,0.4); text-shadow: 0 0 10px rgba(0,168,181,0.5); }
.section-eyebrow--blue::before { background: var(--blue); box-shadow: var(--glow-blue); }
.section-eyebrow--pink { color: var(--pink); border-color: rgba(233,30,99,0.4); text-shadow: 0 0 10px rgba(233,30,99,0.5); }
.section-eyebrow--pink::before { background: var(--pink); box-shadow: var(--glow-pink); }
.section-eyebrow--yellow { color: var(--yellow); border-color: rgba(255,196,0,0.4); text-shadow: 0 0 10px rgba(255,196,0,0.5); }
.section-eyebrow--yellow::before { background: var(--yellow); box-shadow: var(--glow-yellow); }
.section-title { max-width: 920px; margin-bottom: 12px; }
.section-lead {
max-width: 840px;
font-size: clamp(1.05rem, 1.4vw, 1.2rem);
color: var(--text-soft);
line-height: 1.75;
}
/* Glowing word helpers */
.g-blue { color: var(--blue); text-shadow: 0 0 18px rgba(0,168,181,0.65), 0 0 40px rgba(0,168,181,0.4); }
.g-pink { color: var(--pink); text-shadow: 0 0 18px rgba(233,30,99,0.65), 0 0 40px rgba(233,30,99,0.4); }
.g-yellow { color: var(--yellow); text-shadow: 0 0 18px rgba(255,196,0,0.65), 0 0 40px rgba(255,196,0,0.4); }
/* Marquee divider */
.marquee {
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
padding: 18px 0;
overflow: hidden;
white-space: nowrap;
background: linear-gradient(180deg, transparent, rgba(0,168,181,0.04), transparent);
}
.marquee__track {
display: inline-block;
animation: marquee 38s linear infinite;
font-family: var(--f-head); font-weight: 800; font-size: clamp(1.4rem, 3vw, 2.2rem);
letter-spacing: 0.06em;
}
.marquee__track span { margin: 0 32px; }
.marquee__track .dot { color: var(--blue); }
.marquee__track .dot:nth-child(3n+2) { color: var(--pink); }
.marquee__track .dot:nth-child(3n) { color: var(--yellow); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* ============================================================
HERO
============================================================ */
.hero {
min-height: 100vh;
padding-top: 110px;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
overflow: hidden;
}
.hero__bg {
position: absolute; inset: 0;
background:
linear-gradient(180deg, #000 0%, transparent 35%, transparent 65%, #000 100%),
url('../assets/img/hero-cover.jpg') center/cover no-repeat;
opacity: 0.55;
z-index: 0;
}
.hero__bg::after {
content: '';
position: absolute; inset: 0;
background: radial-gradient(ellipse 60% 60% at 50% 50%, transparent 0%, rgba(0,0,0,0.7) 100%);
}
.hero__inner {
position: relative; z-index: 2;
max-width: 920px;
margin: 0 auto;
text-align: center;
}
.hero__inner .hero__org { margin-left: auto; margin-right: auto; }
.hero__inner .hero__subtitle { margin-left: auto; margin-right: auto; }
.hero__inner .hero__meta { justify-content: center; }
.hero__inner .hero__cta-row { justify-content: center; }
.hero__org {
display: inline-flex; align-items: center; gap: 18px;
font-size: 0.86rem; font-weight: 600; letter-spacing: 3px; text-transform: uppercase;
color: var(--text-soft); margin-bottom: 32px;
padding: 12px 28px 12px 22px; border-radius: 999px;
}
.hero__org-text { display: inline-flex; align-items: center; }
.hero__org-text::after {
content: ':'; margin-left: 4px;
}
.hero__org-logo {
height: 60px; width: auto; display: block;
filter: drop-shadow(0 0 10px rgba(255,255,255,0.3));
pointer-events: none;
}
.hero__org::before {
content: ''; width: 8px; height: 8px; border-radius: 50%;
background: var(--blue);
box-shadow: var(--glow-blue);
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.55; transform: scale(1.4); }
}
.hero__title {
color: #fff;
margin-bottom: 26px;
text-shadow: 0 0 60px rgba(0,168,181,0.25);
}
.hero__title .word {
display: inline-block;
opacity: 0;
transform: translateY(20px);
animation: heroWordIn 1s cubic-bezier(.2,.8,.2,1) forwards;
}
.hero__title .word:nth-child(1) { animation-delay: 0.1s; }
.hero__title .word:nth-child(2) { animation-delay: 0.25s; }
.hero__title .word:nth-child(3) { animation-delay: 0.4s; }
.hero__title .word:nth-child(4) { animation-delay: 0.55s; }
.hero__title .word:nth-child(5) { animation-delay: 0.7s; }
@keyframes heroWordIn {
to { opacity: 1; transform: translateY(0); }
}
.hero__title .accent {
background: linear-gradient(120deg, var(--blue) 0%, var(--pink) 50%, var(--yellow) 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 0 18px rgba(0,168,181,0.4)) drop-shadow(0 0 32px rgba(233,30,99,0.3));
}
.hero__subtitle {
font-size: clamp(1.05rem, 1.4vw, 1.27rem);
color: var(--text-soft);
max-width: 700px;
margin-bottom: 36px;
line-height: 1.75;
}
.hero__meta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 38px; }
.hero__chip {
display: inline-flex; align-items: center; gap: 10px;
padding: 11px 20px; border-radius: 999px;
background: rgba(0,0,0,0.5);
border: 1px solid var(--border-2);
font-size: 0.92rem; font-weight: 600;
backdrop-filter: blur(8px);
transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.hero__chip:hover { transform: translateY(-3px); }
.hero__chip:nth-child(1):hover { border-color: var(--blue); box-shadow: var(--glow-blue); }
.hero__chip:nth-child(2):hover { border-color: var(--pink); box-shadow: var(--glow-pink); }
.hero__chip:nth-child(3):hover { border-color: var(--yellow); box-shadow: var(--glow-yellow); }
.hero__chip .dot { width: 8px; height: 8px; border-radius: 50%; }
.hero__chip .dot--blue { background: var(--blue); box-shadow: var(--glow-blue); }
.hero__chip .dot--pink { background: var(--pink); box-shadow: var(--glow-pink); }
.hero__chip .dot--yellow { background: var(--yellow); box-shadow: var(--glow-yellow); }
.hero__cta-row { display: flex; gap: 16px; flex-wrap: wrap; }
.btn {
display: inline-flex; align-items: center; gap: 10px;
padding: 16px 30px; border-radius: 999px;
font-weight: 700; font-size: 0.95rem;
border: 1px solid transparent;
transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
cursor: pointer;
position: relative;
overflow: hidden;
}
.btn::after {
content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
background: linear-gradient(110deg, transparent, rgba(255,255,255,0.4), transparent);
transition: left 0.6s;
}
.btn:hover::after { left: 100%; }
.btn:hover { transform: translateY(-3px); }
.btn--primary {
background: linear-gradient(135deg, var(--pink), var(--pink-deep));
color: #fff;
box-shadow: 0 0 0 1px rgba(233,30,99,0.6), 0 0 30px rgba(233,30,99,0.55), 0 14px 40px rgba(233,30,99,0.35);
}
.btn--primary:hover { box-shadow: 0 0 0 1px rgba(233,30,99,0.9), 0 0 50px rgba(233,30,99,0.85), 0 18px 50px rgba(233,30,99,0.5); }
.btn--ghost {
background: rgba(255,255,255,0.04);
border-color: var(--border-2);
color: var(--text);
}
.btn--ghost:hover {
background: rgba(0,168,181,0.08);
border-color: var(--blue);
box-shadow: var(--glow-blue);
}
@keyframes orbPulse {
0%, 100% { transform: scale(1); opacity: 0.7; }
50% { transform: scale(1.08); opacity: 0.9; }
}
@keyframes ringSpin { to { transform: rotate(360deg); } }
.hero__scroll {
position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%);
display: flex; flex-direction: column; align-items: center; gap: 8px;
font-size: 0.74rem; letter-spacing: 4px; color: var(--text-mute);
text-transform: uppercase;
z-index: 2;
}
.hero__scroll-dot {
width: 26px; height: 42px; border-radius: 14px;
border: 2px solid rgba(0,168,181,0.5);
position: relative;
box-shadow: 0 0 14px rgba(0,168,181,0.4);
}
.hero__scroll-dot::after {
content: ''; position: absolute; left: 50%; top: 8px; transform: translateX(-50%);
width: 4px; height: 8px; border-radius: 2px;
background: var(--blue);
box-shadow: 0 0 8px var(--blue);
animation: scrollDot 1.6s ease-in-out infinite;
}
@keyframes scrollDot {
0%, 100% { transform: translate(-50%, 0); opacity: 1; }
50% { transform: translate(-50%, 16px); opacity: 0.3; }
}
@media (max-width: 880px) {
.hero { text-align: center; }
.hero__inner { margin: 0 auto; }
.hero__org { margin-left: auto; margin-right: auto; }
.hero__meta, .hero__cta-row { justify-content: center; }
.hero__subtitle { margin-left: auto; margin-right: auto; }
}
/* ============================================================
WELCOME (Section 2) — stat pills with neon
============================================================ */
.welcome { background: linear-gradient(180deg, var(--bg) 0%, #02030A 50%, var(--bg) 100%); }
.welcome__intro {
max-width: 920px; margin: 0 auto 60px;
text-align: center; font-size: clamp(1.05rem, 1.4vw, 1.2rem);
color: var(--text-soft); line-height: 1.85;
}
.welcome__intro strong { color: var(--text); font-weight: 700; }
.stat-grid {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: var(--gap);
margin-bottom: 50px;
}
.stat-pill {
position: relative;
background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.005));
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 36px 30px;
overflow: hidden;
transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.stat-pill::before {
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
background: linear-gradient(90deg, transparent, var(--blue), var(--pink), var(--yellow), transparent);
box-shadow: 0 0 14px var(--blue);
}
.stat-pill::after {
content: ''; position: absolute; right: -50px; top: -50px; width: 120px; height: 120px;
border-radius: 50%; filter: blur(40px); opacity: 0.35;
}
.stat-pill:nth-child(3n+1)::after { background: var(--blue); }
.stat-pill:nth-child(3n+2)::after { background: var(--pink); }
.stat-pill:nth-child(3n)::after { background: var(--yellow); }
.stat-pill:hover {
transform: translateY(-6px);
border-color: var(--border-2);
box-shadow: 0 20px 60px rgba(0,168,181,0.15), var(--glow-blue);
}
.stat-pill__num {
font-family: var(--f-head); font-weight: 900;
font-size: clamp(2.6rem, 4.5vw, 4rem);
line-height: 1;
margin-bottom: 12px;
position: relative;
}
.stat-pill:nth-child(3n+1) .stat-pill__num { color: var(--blue); text-shadow: var(--glow-blue); }
.stat-pill:nth-child(3n+2) .stat-pill__num { color: var(--pink); text-shadow: var(--glow-pink); }
.stat-pill:nth-child(3n) .stat-pill__num { color: var(--yellow); text-shadow: var(--glow-yellow); }
.stat-pill__label { font-size: 0.95rem; color: var(--text-soft); line-height: 1.6; position: relative; }
@media (max-width: 880px) { .stat-grid { grid-template-columns: 1fr; } }
.exhibit-tagline {
text-align: center; padding: 42px;
border-radius: var(--radius);
border: 1px solid var(--border-2);
background: linear-gradient(135deg, rgba(0,168,181,0.06), rgba(233,30,99,0.06), rgba(255,196,0,0.04));
position: relative;
overflow: hidden;
}
.exhibit-tagline strong {
display: block; font-family: var(--f-head); font-weight: 900;
font-size: clamp(1.6rem, 2.6vw, 2.4rem); margin-bottom: 10px;
background: linear-gradient(120deg, var(--blue), var(--pink), var(--yellow));
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 0 14px rgba(0,168,181,0.35));
}
/* ============================================================
DOME (Section 3)
============================================================ */
.dome { background: var(--bg); }
.dome__grid {
display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--gap);
align-items: center;
}
.dome__photo {
border-radius: var(--radius);
overflow: hidden;
position: relative;
border: 1px solid var(--border-2);
box-shadow: 0 20px 60px rgba(0,168,181,0.15), 0 0 0 1px rgba(0,168,181,0.15);
}
.dome__photo::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.6) 100%);
pointer-events: none;
}
.dome__photo img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16/10; transition: transform 0.6s; }
.dome__photo:hover img { transform: scale(1.04); }
.dome__highlights { display: flex; flex-direction: column; gap: 18px; margin-top: 32px; }
.dome__hl {
display: flex; gap: 18px; align-items: flex-start;
padding: 22px 26px; border-radius: var(--radius-sm);
background: var(--bg-card); border: 1px solid var(--border);
transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.dome__hl:hover { transform: translateX(8px); }
.dome__hl-icon {
flex: 0 0 50px; width: 50px; height: 50px; border-radius: 14px;
display: grid; place-items: center;
font-weight: 900;
position: relative;
}
.dome__hl-icon svg { width: 24px; height: 24px; display: block; }
.dome__hl:nth-child(1) .dome__hl-icon { background: var(--blue); color: #000; box-shadow: var(--glow-blue); }
.dome__hl:nth-child(2) .dome__hl-icon { background: var(--pink); color: #fff; box-shadow: var(--glow-pink); }
.dome__hl:nth-child(3) .dome__hl-icon { background: var(--yellow); color: #000; box-shadow: var(--glow-yellow); }
.dome__hl:nth-child(1):hover { border-color: var(--blue); box-shadow: 0 0 30px rgba(0,168,181,0.18); }
.dome__hl:nth-child(2):hover { border-color: var(--pink); box-shadow: 0 0 30px rgba(233,30,99,0.18); }
.dome__hl:nth-child(3):hover { border-color: var(--yellow); box-shadow: 0 0 30px rgba(255,196,0,0.18); }
.dome__hl h4 { font-size: 1.05rem; margin-bottom: 4px; }
.dome__hl p { margin: 0; color: var(--text-soft); font-size: 0.94rem; }
@media (max-width: 880px) { .dome__grid { grid-template-columns: 1fr; } }
/* ============================================================
GROWTH (Section 4)
============================================================ */
.growth { background: linear-gradient(180deg, var(--bg) 0%, #02050A 50%, var(--bg) 100%); }
.growth__cards {
display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap);
margin-bottom: 40px;
}
.growth__card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 36px;
position: relative;
overflow: hidden;
transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.growth__card::before {
content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 3px;
}
.growth__card:nth-child(1)::before { background: var(--blue); box-shadow: 0 0 16px var(--blue); }
.growth__card:nth-child(2)::before { background: var(--pink); box-shadow: 0 0 16px var(--pink); }
.growth__card:nth-child(3)::before { background: var(--yellow); box-shadow: 0 0 16px var(--yellow); }
.growth__card:nth-child(4)::before { background: linear-gradient(180deg, var(--blue), var(--pink)); box-shadow: 0 0 16px var(--blue); }
.growth__card:hover { transform: translateY(-6px); border-color: var(--border-2); }
.growth__card:nth-child(1):hover { box-shadow: 0 20px 60px rgba(0,168,181,0.18); }
.growth__card:nth-child(2):hover { box-shadow: 0 20px 60px rgba(233,30,99,0.18); }
.growth__card:nth-child(3):hover { box-shadow: 0 20px 60px rgba(255,196,0,0.18); }
.growth__card:nth-child(4):hover { box-shadow: 0 20px 60px rgba(0,168,181,0.18); }
.growth__card h4 {
font-size: 0.82rem; font-weight: 700; letter-spacing: 3px;
text-transform: uppercase; color: var(--text-mute);
margin-bottom: 16px;
}
.growth__progress {
display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
margin-bottom: 14px;
}
.growth__progress .from { font-family: var(--f-head); font-weight: 700; font-size: 1.15rem; color: var(--text-soft); }
.growth__progress .arrow { color: var(--text-mute); font-size: 1.1rem; }
.growth__progress .to {
font-family: var(--f-head); font-weight: 900;
font-size: clamp(2rem, 3.5vw, 3rem);
line-height: 1;
}
.growth__card:nth-child(1) .growth__progress .to { color: var(--blue); text-shadow: var(--glow-blue); }
.growth__card:nth-child(2) .growth__progress .to { color: var(--pink); text-shadow: var(--glow-pink); }
.growth__card:nth-child(3) .growth__progress .to { color: var(--yellow); text-shadow: var(--glow-yellow); }
.growth__card:nth-child(4) .growth__progress .to { color: var(--blue); text-shadow: var(--glow-blue); }
.growth__card p { font-size: 0.95rem; color: var(--text-soft); margin: 0; }
@media (max-width: 880px) { .growth__cards { grid-template-columns: 1fr; } }
.growth__table-wrap {
overflow-x: auto; border-radius: var(--radius);
border: 1px solid var(--border);
background: var(--bg-card);
}
.growth__table { width: 100%; border-collapse: collapse; }
.growth__table th, .growth__table td {
padding: 18px 22px; text-align: left;
border-bottom: 1px solid var(--border);
font-size: 0.94rem;
}
.growth__table th {
font-family: var(--f-head); font-weight: 700;
background: rgba(0,0,0,0.5);
color: var(--text-soft); letter-spacing: 1.5px; text-transform: uppercase;
font-size: 0.74rem;
}
.growth__table tr:last-child td { border-bottom: none; }
.growth__table tr:hover td { background: rgba(0,168,181,0.04); }
.growth__table td:first-child { font-weight: 700; color: var(--text); }
.growth__table .num-blue { color: var(--blue); font-weight: 700; text-shadow: 0 0 8px rgba(0,168,181,0.5); }
.growth__table .num-pink { color: var(--pink); font-weight: 700; text-shadow: 0 0 8px rgba(233,30,99,0.5); }
.growth__table .num-yellow { color: var(--yellow); font-weight: 700; text-shadow: 0 0 8px rgba(255,196,0,0.5); }
/* ============================================================
VISION (Section 5)
============================================================ */
.vision { background: var(--bg); }
.vision__heads {
display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap);
margin-bottom: 70px;
}
.vision__head {
padding: 42px;
border-radius: var(--radius);
background: var(--bg-card);
border: 1px solid var(--border);
position: relative;
overflow: hidden;
transition: transform 0.4s, border-color 0.4s;
}
.vision__head::after {
content: ''; position: absolute; right: -60px; top: -60px;
width: 240px; height: 240px; border-radius: 50%;
filter: blur(60px); opacity: 0.5;
transition: opacity 0.4s, transform 0.4s;
}
.vision__head--vision::after { background: var(--blue); }
.vision__head--mission::after { background: var(--pink); }
.vision__head:hover { transform: translateY(-6px); border-color: var(--border-2); }
.vision__head--vision:hover { box-shadow: 0 20px 60px rgba(0,168,181,0.2); }
.vision__head--mission:hover { box-shadow: 0 20px 60px rgba(233,30,99,0.2); }
.vision__head:hover::after { opacity: 0.75; transform: scale(1.1); }
.vision__head h3 {
font-size: 0.82rem; font-weight: 700; letter-spacing: 5px; text-transform: uppercase;
margin-bottom: 14px; position: relative;
}
.vision__head--vision h3 { color: var(--blue); text-shadow: 0 0 14px rgba(0,168,181,0.5); }
.vision__head--mission h3 { color: var(--pink); text-shadow: 0 0 14px rgba(233,30,99,0.5); }
.vision__head p { font-size: 1.1rem; color: var(--text); margin: 0; line-height: 1.75; position: relative; }
@media (max-width: 880px) { .vision__heads { grid-template-columns: 1fr; } }
.objectives {
display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap);
margin-bottom: 70px;
}
.objective {
padding: 34px 30px;
border-radius: var(--radius);
background: var(--bg-card);
border: 1px solid var(--border);
position: relative;
transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
overflow: hidden;
}
.objective::before {
content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
transform: scaleX(0); transform-origin: left; transition: transform 0.4s;
}
.objective:nth-child(1)::before, .objective:nth-child(4)::before { background: var(--blue); box-shadow: 0 0 12px var(--blue); }
.objective:nth-child(2)::before, .objective:nth-child(5)::before { background: var(--pink); box-shadow: 0 0 12px var(--pink); }
.objective:nth-child(3)::before { background: var(--yellow); box-shadow: 0 0 12px var(--yellow); }
.objective:hover { transform: translateY(-6px); border-color: var(--border-2); }
.objective:hover::before { transform: scaleX(1); }
.objective:nth-child(1):hover, .objective:nth-child(4):hover { box-shadow: 0 16px 50px rgba(0,168,181,0.18); }
.objective:nth-child(2):hover, .objective:nth-child(5):hover { box-shadow: 0 16px 50px rgba(233,30,99,0.18); }
.objective:nth-child(3):hover { box-shadow: 0 16px 50px rgba(255,196,0,0.18); }
.objective__num {
font-family: var(--f-head); font-weight: 900; font-size: 2.4rem;
line-height: 1; margin-bottom: 18px;
}
.objective:nth-child(1) .objective__num, .objective:nth-child(4) .objective__num { color: var(--blue); text-shadow: var(--glow-blue); }
.objective:nth-child(2) .objective__num, .objective:nth-child(5) .objective__num { color: var(--pink); text-shadow: var(--glow-pink); }
.objective:nth-child(3) .objective__num { color: var(--yellow); text-shadow: var(--glow-yellow); }
.objective h4 { margin-bottom: 10px; font-size: 1.15rem; }
.objective p { margin: 0; color: var(--text-soft); font-size: 0.93rem; line-height: 1.65; }
@media (max-width: 1100px) { .objectives { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .objectives { grid-template-columns: 1fr; } }
.venue-highlights {
display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap);
padding: 42px;
border-radius: var(--radius);
background: linear-gradient(135deg, rgba(0,168,181,0.05), rgba(233,30,99,0.05), rgba(255,196,0,0.04));
border: 1px solid var(--border-2);
position: relative;
overflow: hidden;
}
.venue-highlights::before {
content: ''; position: absolute; inset: 0;
background:
radial-gradient(circle at 20% 50%, rgba(0,168,181,0.15), transparent 50%),
radial-gradient(circle at 80% 50%, rgba(233,30,99,0.15), transparent 50%);
pointer-events: none;
}
.venue-h { position: relative; }
.venue-h__num {
font-family: var(--f-head); font-weight: 900;
font-size: clamp(2rem, 3.8vw, 3rem);
line-height: 1; margin-bottom: 10px;
}
.venue-h:nth-child(1) .venue-h__num { color: var(--blue); text-shadow: var(--glow-blue); }
.venue-h:nth-child(2) .venue-h__num { color: var(--pink); text-shadow: var(--glow-pink); }
.venue-h:nth-child(3) .venue-h__num { color: var(--yellow); text-shadow: var(--glow-yellow); }
.venue-h__label { font-size: 0.95rem; color: var(--text-soft); }
@media (max-width: 880px) { .venue-highlights { grid-template-columns: 1fr; } }
/* ============================================================
TIMING + AUDIENCES (Section 6)
============================================================ */
.timing { background: linear-gradient(180deg, var(--bg) 0%, #02030A 60%, var(--bg) 100%); }
.timing__grid {
display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap);
margin-bottom: 90px;
}
.timing__card {
padding: 32px 28px;
border-radius: var(--radius);
background: var(--bg-card-2);
border: 1px solid var(--border);
position: relative;
overflow: hidden;
transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.timing__card:hover { transform: translateY(-8px); border-color: var(--border-2); }
.timing__card:nth-child(1):hover { box-shadow: 0 20px 60px rgba(0,168,181,0.2); border-color: rgba(0,168,181,0.4); }
.timing__card:nth-child(2):hover { box-shadow: 0 20px 60px rgba(233,30,99,0.2); border-color: rgba(233,30,99,0.4); }
.timing__card:nth-child(3):hover { box-shadow: 0 20px 60px rgba(255,196,0,0.2); border-color: rgba(255,196,0,0.4); }
.timing__card:nth-child(4):hover { box-shadow: 0 20px 60px rgba(0,168,181,0.2); border-color: rgba(0,168,181,0.4); }
.timing__card .icon {
width: 56px; height: 56px; border-radius: 14px;
display: grid; place-items: center;
margin-bottom: 22px;
}
.timing__card .icon svg { width: 26px; height: 26px; display: block; }
.timing__card:nth-child(1) .icon { background: var(--blue); color: #000; box-shadow: var(--glow-blue); }
.timing__card:nth-child(2) .icon { background: var(--pink); color: #fff; box-shadow: var(--glow-pink); }
.timing__card:nth-child(3) .icon { background: var(--yellow); color: #000; box-shadow: var(--glow-yellow); }
.timing__card:nth-child(4) .icon { background: linear-gradient(135deg, var(--blue), var(--pink)); color: #fff; box-shadow: var(--glow-multi); }
.timing__card h4 { font-size: 1.05rem; margin-bottom: 12px; }
.timing__card p { margin: 0; color: var(--text-soft); font-size: 0.93rem; line-height: 1.65; }
@media (max-width: 1100px) { .timing__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .timing__grid { grid-template-columns: 1fr; } }
.audiences {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
}
.audience {
padding: 22px;
border-radius: var(--radius-sm);
background: var(--bg-card);
border: 1px solid var(--border);
display: flex; align-items: flex-start; gap: 14px;
transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.audience:hover { transform: translateY(-4px); border-color: var(--border-2); }
.audience__dot {
flex: 0 0 12px; width: 12px; height: 12px; border-radius: 50%;
margin-top: 6px;
}
.audience:nth-child(8n+1) .audience__dot { background: var(--blue); box-shadow: var(--glow-blue); }
.audience:nth-child(8n+2) .audience__dot { background: var(--pink); box-shadow: var(--glow-pink); }
.audience:nth-child(8n+3) .audience__dot { background: var(--yellow); box-shadow: var(--glow-yellow); }
.audience:nth-child(8n+4) .audience__dot { background: var(--blue); box-shadow: var(--glow-blue); }
.audience:nth-child(8n+5) .audience__dot { background: var(--pink); box-shadow: var(--glow-pink); }
.audience:nth-child(8n+6) .audience__dot { background: var(--yellow); box-shadow: var(--glow-yellow); }
.audience:nth-child(8n+7) .audience__dot { background: var(--blue); box-shadow: var(--glow-blue); }
.audience:nth-child(8n) .audience__dot { background: var(--pink); box-shadow: var(--glow-pink); }
.audience p { margin: 0; font-size: 1rem; color: var(--text); line-height: 1.55; }
@media (max-width: 1100px) { .audiences { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .audiences { grid-template-columns: 1fr; } }
/* ============================================================
FIGURES ONE (Social-One inspired — dual marquee + center logo)
============================================================ */
.figures-one {
position: relative;
z-index: 10;
padding: clamp(80px, 9vw, 120px) 0 clamp(100px, 11vw, 150px);
background: var(--bg);
isolation: isolate;
overflow: hidden;
}
.figures-one__bg-shadow {
position: absolute; inset: 0;
/* background:
radial-gradient(ellipse 60% 60% at 50% 30%, rgba(0,168,181,0.10), transparent 70%),
radial-gradient(ellipse 70% 60% at 50% 100%, rgba(233,30,99,0.10), transparent 70%); */
z-index: 0;
}
.figures-one > .container { position: relative; z-index: 2; }
/* Title block */
.sec-title-one {
margin-bottom: 70px;
}
.sec-title-one.centered { text-align: center; }
.sec-title-one__title {
display: inline-block;
font-family: var(--f-head);
font-weight: 700;
font-size: 0.84rem;
letter-spacing: 4px;
text-transform: uppercase;
color: var(--yellow);
text-shadow: 0 0 12px rgba(255,196,0,0.5);
margin-bottom: 18px;
padding: 7px 16px;
border-radius: 999px;
border: 1px solid rgba(255,196,0,0.4);
background: rgba(255,196,0,0.06);
}
.sec-title-one__heading {
font-family: var(--f-head);
font-weight: 800;
font-size: clamp(2rem, 4vw, 3.4rem);
line-height: 1.15;
margin: 0;
color: #fff;
}
.sec-title-one__heading span {
background: linear-gradient(120deg, var(--blue), var(--pink), var(--yellow));
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 0 14px rgba(0,168,181,0.4));
}
/* Inner container — full-bleed band that holds the marquee rows */
.figures-one__inner {
position: relative;
width: 100%;
padding: 80px 0;
background:
linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.005));
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
overflow: hidden;
min-height: 360px;
}
.figures-one__inner::before {
/* subtle inner glow */
content: ''; position: absolute; inset: 0;
background:
radial-gradient(ellipse 50% 100% at 50% 50%, rgba(0,168,181,0.10), transparent 70%);
pointer-events: none;
}
/* Side fade patterns (left + right) */
.figures-one__bg-pattern {
position: absolute;
left: 0; top: 0; bottom: 0;
width: clamp(100px, 18vw, 240px);
z-index: 4;
pointer-events: none;
background:
linear-gradient(90deg, var(--bg) 0%, var(--bg) 35%, transparent 100%),
repeating-linear-gradient(135deg,
rgba(0,168,181,0.06) 0px, rgba(0,168,181,0.06) 1px,
transparent 1px, transparent 9px);
}
.figures-one__bg-pattern--right {
left: auto; right: 0;
background:
linear-gradient(270deg, var(--bg) 0%, var(--bg) 35%, transparent 100%),
repeating-linear-gradient(45deg,
rgba(233,30,99,0.06) 0px, rgba(233,30,99,0.06) 1px,
transparent 1px, transparent 9px);
}
/* Center logo badge */
.figures-one__logo {
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%);
width: clamp(150px, 22vw, 10px);
height: clamp(150px, 22vw, 10px);
border-radius: 50%;
z-index: 6;
display: grid; place-items: center;
/* Solid opaque base + colored glow tints stacked on top */
background:
radial-gradient(circle at 30% 30%, rgba(0,168,181,0.30), transparent 60%),
radial-gradient(circle at 70% 70%, rgba(233,30,99,0.22), transparent 60%),
radial-gradient(circle at 50% 0%, rgba(255,196,0,0.15), transparent 65%),
#000000;
border: 2px solid rgba(255,255,255,0.10);
box-shadow:
0 0 0 1px rgba(255,255,255,0.04),
0 0 60px rgba(0,168,181,0.35),
0 0 120px rgba(233,30,99,0.18),
inset 0 0 50px rgba(0,168,181,0.18);
animation: logoBadgePulse 6s ease-in-out infinite;
pointer-events: none;
isolation: isolate;
}
.figures-one__logo::before {
content: ''; position: absolute; inset: -2px;
border-radius: inherit;
background: conic-gradient(from 0deg,
var(--blue), var(--pink), var(--yellow), var(--blue));
z-index: -1;
filter: blur(20px); opacity: 0.5;
animation: logoBadgeSpin 16s linear infinite;
}
@keyframes logoBadgeSpin { to { transform: rotate(360deg); } }
@keyframes logoBadgePulse {
0%, 100% { box-shadow: 0 0 0 1px rgba(255,255,255,0.04), 0 0 60px rgba(0,168,181,0.35), 0 0 120px rgba(233,30,99,0.18), inset 0 0 50px rgba(0,168,181,0.15); }
50% { box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 0 80px rgba(0,168,181,0.55), 0 0 150px rgba(233,30,99,0.30), inset 0 0 70px rgba(0,168,181,0.25); }
}
.figures-one__logo span {
position: relative;
display: inline-block;
z-index: 2;
}
.figures-one__logo img {
width: 70%; height: auto;
display: block;
margin: 0 auto;
filter: drop-shadow(0 0 20px rgba(0,168,181,0.5));
}
/* Marquee rows */
.figures-one__row {
position: relative;
width: 100%;
overflow: hidden;
padding: 18px 0;
}
.figures-one__row--top { margin-bottom: 90px; }
.figures-one__row--bottom { margin-top: 0; }
.figures-one__track {
display: flex;
gap: 32px;
width: max-content;
will-change: transform;
}
.figures-one__track--left { animation: marqueeLeft 44s linear infinite; }
.figures-one__track--right { animation: marqueeRight 50s linear infinite; }
@keyframes marqueeLeft {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@keyframes marqueeRight {
from { transform: translateX(-50%); }
to { transform: translateX(0); }
}
.figures-one__row:hover .figures-one__track { animation-play-state: paused; }
/* Pill */
.fig-pill {
position: relative;
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 22px;
padding: 26px 42px;
border-radius: 999px;
background:
linear-gradient(180deg,
rgba(var(--accent-rgb), 0.18) 0%,
rgba(var(--accent-rgb), 0.04) 100%);
border: 1px solid rgba(var(--accent-rgb), 0.35);
white-space: nowrap;
transition: transform 0.3s, border-color 0.3s, background 0.3s;
}
.fig-pill::before {
content: ''; position: absolute;
left: 14px; top: 50%; transform: translateY(-50%);
width: 8px; height: 8px; border-radius: 50%;
background: var(--accent);
display: none;
}
.fig-pill:hover {
transform: translateY(-4px) scale(1.04);
border-color: rgba(var(--accent-rgb), 0.7);
background:
linear-gradient(180deg,
rgba(var(--accent-rgb), 0.25) 0%,
rgba(var(--accent-rgb), 0.08) 100%);
}
.fig-pill__num {
display: inline-flex;
align-items: baseline;
font-family: var(--f-head);
font-weight: 900;
font-size: clamp(2.2rem, 3vw, 3rem);
line-height: 1;
color: var(--accent);
letter-spacing: -0.02em;
}
.fig-pill__num i {
font-style: normal;
font-size: 0.6em;
margin: 0 4px;
opacity: 0.6;
font-weight: 700;
}
.fig-pill__num sup {
font-size: 0.55em;
margin-left: 2px;
font-weight: 800;
}
.fig-pill__label {
font-family: var(--f-body);
font-size: 1rem;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
color: rgba(255,255,255,0.85);
}
/* Bottom row uses ghost (lower contrast) styling */
.fig-pill--ghost {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.08);
padding: 22px 38px;
}
.fig-pill--ghost:hover {
border-color: rgba(var(--accent-rgb), 0.6);
background: rgba(var(--accent-rgb), 0.08);
transform: translateY(-3px) scale(1.03);
}
.fig-pill--ghost .fig-pill__num {
font-size: clamp(1.8rem, 2.4vw, 2.4rem);
color: rgba(255,255,255,0.95);
}
.fig-pill--ghost .fig-pill__label {
font-size: 0.9rem;
color: rgba(255,255,255,0.55);
letter-spacing: 1.5px;
}
/* Responsive */
@media (max-width: 880px) {
.figures-one__inner { padding: 60px 0; min-height: 280px; }
.figures-one__row--top { margin-bottom: 60px; }
.figures-one__logo {
width: 140px; height: 140px;
}
.figures-one__bg-pattern { width: 60px; }
}
@media (max-width: 560px) {
.figures-one__logo { width: 110px; height: 110px; }
.fig-pill { padding: 18px 26px; gap: 14px; }
.fig-pill__num { font-size: 1.7rem; }
.fig-pill__label { font-size: 0.84rem; }
}
/* ============================================================
FIGURES PRO (legacy — kept for backward compat, no longer used)
============================================================ */
.figures-pro {
position: relative;
background: var(--bg);
padding: clamp(90px, 11vw, 160px) 0;
overflow: hidden;
isolation: isolate;
}
.figures-pro__bg {
position: absolute; inset: 0; pointer-events: none; z-index: -1;
}
.figures-pro__bg::before {
content: ''; position: absolute; inset: 0;
background: url('../assets/img/stadium-tech.jpg') center/cover no-repeat;
opacity: 0.06;
filter: grayscale(0.7) contrast(1.1);
}
.figures-pro__bg::after {
content: ''; position: absolute; inset: 0;
background:
radial-gradient(ellipse 50% 50% at 50% 0%, rgba(255,196,0,0.10), transparent 70%),
radial-gradient(ellipse 60% 60% at 50% 100%, rgba(0,168,181,0.10), transparent 70%);
}
.figures-pro__grid-bg {
position: absolute; inset: 0;
background-image:
linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
background-size: 56px 56px;
mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 0%, transparent 80%);
-webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 0%, transparent 80%);
opacity: 0.6;
}
.figures-pro__beam {
position: absolute;
width: 1px; height: 60%;
background: linear-gradient(180deg, transparent, rgba(0,168,181,0.4), transparent);
filter: blur(0.5px);
animation: beam 8s ease-in-out infinite;
}
.figures-pro__beam--1 { left: 18%; top: 0; animation-delay: 0s; }
.figures-pro__beam--2 { right: 18%; top: 0; animation-delay: 4s; background: linear-gradient(180deg, transparent, rgba(233,30,99,0.4), transparent); }
@keyframes beam {
0%, 100% { transform: translateY(-30%); opacity: 0; }
50% { transform: translateY(60%); opacity: 1; }
}
.figures-pro__head {
text-align: center;
max-width: 880px; margin: 0 auto 80px;
}
.figures-pro__head .section-eyebrow { margin-bottom: 24px; }
.figures-pro__grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: clamp(18px, 1.6vw, 28px);
position: relative;
}
.figures-pro__grid::before {
/* connecting horizontal line behind cards */
content: ''; position: absolute;
top: 50%; left: 6%; right: 6%; height: 1px;
background: linear-gradient(90deg,
transparent 0%,
rgba(0,168,181,0.18) 12%,
rgba(233,30,99,0.18) 32%,
rgba(255,196,0,0.30) 50%,
rgba(0,168,181,0.18) 68%,
rgba(233,30,99,0.18) 88%,
transparent 100%);
z-index: 0;
pointer-events: none;
}
@media (max-width: 1100px) {
.figures-pro__grid { grid-template-columns: repeat(2, 1fr); }
.figures-pro__grid::before { display: none; }
}
@media (max-width: 560px) { .figures-pro__grid { grid-template-columns: 1fr; } }
/* CARD */
.fpro {
position: relative;
padding: 36px 22px 30px;
border-radius: 22px;
background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.012));
border: 1px solid rgba(255,255,255,0.08);
overflow: hidden;
transition: transform 0.4s cubic-bezier(.2,.8,.2,1), border-color 0.3s, background 0.3s, opacity 0.9s, box-shadow 0.4s;
text-align: center;
z-index: 1;
opacity: 0;
transform: translateY(34px) scale(0.97);
}
.fpro.visible { opacity: 1; transform: translateY(0) scale(1); }
.fpro.visible.fpro--featured { transform: translateY(-12px) scale(1.04); }
.fpro:nth-child(2) { transition-delay: 0.08s; }
.fpro:nth-child(3) { transition-delay: 0.16s; }
.fpro:nth-child(4) { transition-delay: 0.24s; }
.fpro:nth-child(5) { transition-delay: 0.32s; }
/* gradient border on hover */
.fpro::before {
content: ''; position: absolute; inset: -1px; border-radius: inherit;
padding: 1px;
background: linear-gradient(135deg,
rgba(var(--accent-rgb), 0.65) 0%,
rgba(var(--accent-rgb), 0) 50%,
rgba(var(--accent-rgb), 0.65) 100%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
transition: opacity 0.3s;
pointer-events: none;
}
/* corner glow */
.fpro::after {
content: ''; position: absolute;
bottom: -50%; left: 50%; transform: translateX(-50%);
width: 120%; height: 70%;
background: radial-gradient(ellipse at center, rgba(var(--accent-rgb), 0.32), transparent 70%);
opacity: 0;
transition: opacity 0.4s;
pointer-events: none;
z-index: -1;
}
.fpro:hover {
transform: translateY(-10px);
border-color: rgba(var(--accent-rgb), 0.45);
background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
}
.fpro:hover::before { opacity: 1; }
.fpro:hover::after { opacity: 1; }
.fpro:hover .fpro__ring-fill { stroke-width: 4; }
.fpro:hover .fpro__ring-dash { animation-duration: 5s; }
.fpro:hover .fpro__icon {
transform: translateY(-4px);
box-shadow: 0 10px 30px rgba(var(--accent-rgb), 0.4),
0 0 0 1px rgba(var(--accent-rgb), 0.6),
0 0 24px rgba(var(--accent-rgb), 0.6);
}
/* Featured (middle) card */
.fpro--featured {
background: linear-gradient(180deg,
rgba(var(--accent-rgb), 0.12) 0%,
rgba(var(--accent-rgb), 0.04) 60%,
rgba(255,255,255,0.02) 100%);
border-color: rgba(var(--accent-rgb), 0.35);
}
.fpro--featured::after { opacity: 0.55; }
.fpro.visible.fpro--featured:hover { transform: translateY(-20px) scale(1.06); }
.fpro__badge {
position: absolute; top: 14px; right: 14px;
font-size: 0.62rem; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase;
padding: 4px 10px; border-radius: 999px;
background: rgba(var(--accent-rgb), 0.15);
color: var(--accent);
border: 1px solid rgba(var(--accent-rgb), 0.4);
text-shadow: 0 0 10px rgba(var(--accent-rgb), 0.6);
}
/* Icon */
.fpro__icon {
width: 48px; height: 48px; margin: 0 auto 18px;
border-radius: 14px;
display: grid; place-items: center;
background: rgba(var(--accent-rgb), 0.12);
border: 1px solid rgba(var(--accent-rgb), 0.3);
color: var(--accent);
transition: transform 0.3s, box-shadow 0.3s;
box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.2),
0 0 14px rgba(var(--accent-rgb), 0.3);
}
.fpro__icon svg { width: 22px; height: 22px; }
/* Ring (SVG progress) */
.fpro__ring {
position: relative;
width: clamp(150px, 14vw, 180px);
aspect-ratio: 1/1;
margin: 8px auto 22px;
display: grid; place-items: center;
}
.fpro__ring-svg {
position: absolute; inset: 0;
width: 100%; height: 100%;
transform: rotate(-90deg);
}
.fpro__ring-track {
fill: none;
stroke: rgba(255,255,255,0.06);
stroke-width: 2;
}
.fpro__ring-fill {
fill: none;
stroke: var(--accent);
stroke-width: 3;
stroke-linecap: round;
filter: drop-shadow(0 0 8px var(--accent));
transform-origin: 50% 50%;
stroke-dashoffset: 100;
transition: stroke-dashoffset 1.6s cubic-bezier(.2,.8,.2,1) 0.4s, stroke-width 0.3s;
}
.fpro.visible .fpro__ring-fill { stroke-dashoffset: 0; }
.fpro__ring-dash {
fill: none;
stroke: var(--accent);
stroke-width: 1;
stroke-dasharray: 2 6;
opacity: 0.45;
animation: dashSpin 18s linear infinite;
transform-origin: 50% 50%;
transform-box: fill-box;
}
@keyframes dashSpin {
to { transform: rotate(360deg); }
}
/* Number inside ring */
.fpro__num {
position: relative; z-index: 2;
font-family: var(--f-head);
font-weight: 900;
font-size: clamp(2.2rem, 3.6vw, 3rem);
line-height: 1;
color: var(--accent);
text-shadow: 0 0 18px rgba(var(--accent-rgb), 0.65),
0 0 38px rgba(var(--accent-rgb), 0.35);
letter-spacing: -0.02em;
}
.fpro__num-sub {
position: absolute;
bottom: 18%; left: 50%; transform: translateX(-50%);
font-size: 0.66rem; font-weight: 700; letter-spacing: 1.5px;
text-transform: uppercase;
color: rgba(var(--accent-rgb), 0.85);
white-space: nowrap;
}
/* Label & subtitle */
.fpro__label {
font-size: 1.02rem;
font-weight: 700;
margin: 0 0 6px;
color: #fff;
line-height: 1.3;
}
.fpro__sub {
margin: 0;
font-size: 0.82rem;
color: var(--text-mute);
line-height: 1.5;
min-height: 2.4em;
}
/* Footer caption with decorative lines */
.figures-pro__caption {
display: flex; align-items: center; justify-content: center; gap: 24px;
margin-top: 80px;
text-align: center;
font-size: 0.78rem; font-weight: 700; letter-spacing: 4px; text-transform: uppercase;
color: var(--text-mute);
}
.figures-pro__caption-line {
flex: 1; max-width: 180px; height: 1px;
background: linear-gradient(90deg, transparent, rgba(255,196,0,0.5), transparent);
}
@media (max-width: 600px) {
.figures-pro__caption-line { max-width: 60px; }
}
.figures {
background: var(--bg);
position: relative;
overflow: hidden;
}
.figures::before {
content: ''; position: absolute; inset: 0;
background: url('../assets/img/stadium-tech.jpg') center/cover no-repeat;
opacity: 0.08;
filter: grayscale(0.5);
}
.figures::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(180deg, var(--bg), transparent 30%, transparent 70%, var(--bg));
}
.figures > .container { position: relative; z-index: 1; }
.figures__grid {
display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px;
}
.figure {
text-align: center;
padding: 42px 20px;
border-radius: var(--radius);
background: var(--bg-card);
border: 1px solid var(--border);
position: relative;
overflow: hidden;
transition: transform 0.3s, border-color 0.3s;
}
.figure:hover { transform: translateY(-8px); border-color: var(--border-2); }
.figure__ring {
width: 130px; height: 130px; margin: 0 auto 22px;
border-radius: 50%;
border: 2px solid;
display: grid; place-items: center;
position: relative;
transition: transform 0.4s;
}
.figure:hover .figure__ring { transform: rotate(8deg) scale(1.05); }
.figure__ring::before {
content: ''; position: absolute; inset: -8px;
border-radius: 50%;
border: 1px dashed;
opacity: 0.5;
animation: ringSpin 16s linear infinite;
}
.figure:nth-child(1) .figure__ring { border-color: var(--blue); box-shadow: var(--glow-blue), inset 0 0 25px rgba(0,168,181,0.2); }
.figure:nth-child(2) .figure__ring { border-color: var(--pink); box-shadow: var(--glow-pink), inset 0 0 25px rgba(233,30,99,0.2); }
.figure:nth-child(3) .figure__ring { border-color: var(--yellow); box-shadow: var(--glow-yellow), inset 0 0 25px rgba(255,196,0,0.2); }
.figure:nth-child(4) .figure__ring { border-color: var(--blue); box-shadow: var(--glow-blue), inset 0 0 25px rgba(0,168,181,0.2); }
.figure:nth-child(5) .figure__ring { border-color: var(--pink); box-shadow: var(--glow-pink), inset 0 0 25px rgba(233,30,99,0.2); }
.figure:nth-child(1) .figure__ring::before, .figure:nth-child(4) .figure__ring::before { border-color: var(--blue); }
.figure:nth-child(2) .figure__ring::before, .figure:nth-child(5) .figure__ring::before { border-color: var(--pink); }
.figure:nth-child(3) .figure__ring::before { border-color: var(--yellow); }
.figure__num {
font-family: var(--f-head); font-weight: 900;
font-size: 1.5rem;
line-height: 1;
}
.figure:nth-child(1) .figure__num, .figure:nth-child(4) .figure__num { color: var(--blue); text-shadow: var(--glow-blue); }
.figure:nth-child(2) .figure__num, .figure:nth-child(5) .figure__num { color: var(--pink); text-shadow: var(--glow-pink); }
.figure:nth-child(3) .figure__num { color: var(--yellow); text-shadow: var(--glow-yellow); }
.figure__label {
font-size: 0.92rem; color: var(--text-soft); margin: 0;
font-weight: 600;
}
@media (max-width: 1100px) { .figures__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .figures__grid { grid-template-columns: 1fr; } }
/* ============================================================
CATEGORIES (Section 8)
============================================================ */
.categories { background: linear-gradient(180deg, var(--bg) 0%, #02030A 50%, var(--bg) 100%); }
.cat-grid {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px;
}
.cat {
padding: 32px 28px;
border-radius: var(--radius);
background: var(--bg-card);
border: 1px solid var(--border);
position: relative;
overflow: hidden;
transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s, background 0.3s;
}
.cat::before {
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
}
.cat:nth-child(8n+1)::before { background: var(--blue); box-shadow: 0 0 14px var(--blue); }
.cat:nth-child(8n+2)::before { background: var(--pink); box-shadow: 0 0 14px var(--pink); }
.cat:nth-child(8n+3)::before { background: var(--yellow); box-shadow: 0 0 14px var(--yellow); }
.cat:nth-child(8n+4)::before { background: linear-gradient(90deg, var(--blue), var(--pink)); box-shadow: 0 0 14px var(--blue); }
.cat:nth-child(8n+5)::before { background: linear-gradient(90deg, var(--pink), var(--yellow)); box-shadow: 0 0 14px var(--pink); }
.cat:nth-child(8n+6)::before { background: linear-gradient(90deg, var(--yellow), var(--blue)); box-shadow: 0 0 14px var(--yellow); }
.cat:nth-child(8n+7)::before { background: var(--blue); box-shadow: 0 0 14px var(--blue); }
.cat:nth-child(8n)::before { background: var(--pink); box-shadow: 0 0 14px var(--pink); }
.cat:hover { transform: translateY(-8px); border-color: var(--border-2); background: var(--bg-card-2); }
.cat:nth-child(8n+1):hover { box-shadow: 0 16px 50px rgba(0,168,181,0.18); }
.cat:nth-child(8n+2):hover { box-shadow: 0 16px 50px rgba(233,30,99,0.18); }
.cat:nth-child(8n+3):hover { box-shadow: 0 16px 50px rgba(255,196,0,0.18); }
.cat h4 { font-size: 1.08rem; margin-bottom: 16px; line-height: 1.3; }
.cat ul { list-style: none; padding: 0; margin: 0; }
.cat li {
font-size: 0.86rem; color: var(--text-soft);
padding: 6px 0 6px 18px; position: relative; line-height: 1.5;
}
.cat li::before {
content: ''; position: absolute; left: 0; top: 13px;
width: 6px; height: 6px; border-radius: 50%;
background: var(--blue);
box-shadow: 0 0 8px var(--blue);
}
.cat:nth-child(8n+2) li::before { background: var(--pink); box-shadow: 0 0 8px var(--pink); }
.cat:nth-child(8n+3) li::before { background: var(--yellow); box-shadow: 0 0 8px var(--yellow); }
@media (max-width: 1100px) { .cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .cat-grid { grid-template-columns: 1fr; } }
/* ============================================================
FLOOR PLAN (Section 9)
============================================================ */
.floor { background: var(--bg); }
.floor__plan {
border-radius: var(--radius);
overflow: hidden;
border: 1px solid var(--border-2);
background: #000;
margin-bottom: 30px;
box-shadow: 0 30px 80px rgba(0,168,181,0.12);
}
.floor__plan svg { width: 100%; height: auto; display: block; }
.floor__legend {
display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px;
}
.legend {
padding: 18px 14px;
border-radius: var(--radius-sm);
background: var(--bg-card); border: 1px solid var(--border);
text-align: center;
transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.legend:hover { transform: translateY(-4px); }
.legend__swatch {
width: 40px; height: 40px; border-radius: 10px;
margin: 0 auto 10px;
display: grid; place-items: center;
font-weight: 900; font-size: 0.85rem; color: #000;
}
.legend:nth-child(odd) .legend__swatch { box-shadow: var(--glow-blue); }
.legend:nth-child(even) .legend__swatch { box-shadow: var(--glow-pink); }
.legend__label { font-size: 0.78rem; color: var(--text-soft); }
@media (max-width: 1000px) { .floor__legend { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .floor__legend { grid-template-columns: repeat(2, 1fr); } }
/* ============================================================
BOOTH SIZES (Section 10)
============================================================ */
.booth { background: linear-gradient(180deg, var(--bg) 0%, #02030A 50%, var(--bg) 100%); }
.booth__visual {
display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--gap);
align-items: center; margin-bottom: 70px;
}
.booth__diagram {
position: relative; aspect-ratio: 1/1; max-width: 480px; margin: 0 auto;
width: 100%;
}
.booth__sq {
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
border: 2px dashed; border-radius: 14px;
font-family: var(--f-head); font-weight: 900;
}
.booth__sq--3 { width: 30%; height: 30%; border-color: var(--blue); color: var(--blue); font-size: 1rem; box-shadow: inset 0 0 30px rgba(0,168,181,0.15), 0 0 30px rgba(0,168,181,0.2); }
.booth__sq--4 { width: 55%; height: 55%; border-color: var(--pink); color: var(--pink); font-size: 1.05rem; box-shadow: inset 0 0 30px rgba(233,30,99,0.1), 0 0 30px rgba(233,30,99,0.15); }
.booth__sq--6 { width: 90%; height: 90%; border-color: var(--yellow); color: var(--yellow); font-size: 1.1rem; box-shadow: inset 0 0 30px rgba(255,196,0,0.08), 0 0 30px rgba(255,196,0,0.15); }
.booth__sq span {
position: absolute;
background: var(--bg);
padding: 4px 10px;
white-space: nowrap;
}
.booth__sq--3 span { left: 50%; top: 50%; transform: translate(-50%, -50%); }
.booth__sq--4 span { top: -10px; left: 16px; }
.booth__sq--6 span { top: -10px; left: 16px; }
.booth__sizes-list { display: flex; flex-direction: column; gap: 18px; }
.booth__size-row {
display: grid; grid-template-columns: 110px 1fr; gap: 18px;
padding: 22px 26px;
border-radius: var(--radius-sm);
background: var(--bg-card); border: 1px solid var(--border);
transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.booth__size-row strong { font-family: var(--f-head); font-weight: 900; font-size: 1.05rem; }
.booth__size-row p { margin: 4px 0 0; color: var(--text-soft); font-size: 0.9rem; }
.booth__size-row:nth-child(1) strong { color: var(--blue); text-shadow: var(--glow-blue); }
.booth__size-row:nth-child(2) strong { color: var(--pink); text-shadow: var(--glow-pink); }
.booth__size-row:nth-child(3) strong { color: var(--yellow); text-shadow: var(--glow-yellow); }
.booth__size-row:hover { transform: translateX(8px); }
.booth__size-row:nth-child(1):hover { border-color: var(--blue); box-shadow: var(--glow-blue); }
.booth__size-row:nth-child(2):hover { border-color: var(--pink); box-shadow: var(--glow-pink); }
.booth__size-row:nth-child(3):hover { border-color: var(--yellow); box-shadow: var(--glow-yellow); }
@media (max-width: 880px) { .booth__visual { grid-template-columns: 1fr; } }
.booth__prices { margin-top: 24px; }
.price-table-wrap {
border-radius: var(--radius);
overflow: hidden;
border: 1px solid var(--border);
background: var(--bg-card);
}
.price-table { width: 100%; border-collapse: collapse; }
.price-table th, .price-table td {
padding: 16px 22px; text-align: left; border-bottom: 1px solid var(--border);
font-size: 0.94rem;
}
.price-table th {
background: rgba(0,0,0,0.55);
font-family: var(--f-head); font-weight: 700;
font-size: 0.74rem; text-transform: uppercase; letter-spacing: 1.5px;
color: var(--text-soft);
}
.price-table tr:last-child td { border-bottom: none; }
.price-table tr:hover td { background: rgba(0,168,181,0.04); }
.price-table td:first-child { font-weight: 700; }
.price-table .price { color: var(--blue); font-weight: 700; font-family: var(--f-head); text-shadow: 0 0 8px rgba(0,168,181,0.45); }
/* ============================================================
CONSTRUCTION (Section 11)
============================================================ */
.construction { background: var(--bg); }
.construction__grid {
display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--gap);
align-items: center;
}
.construction__photo {
border-radius: var(--radius);
overflow: hidden;
border: 1px solid var(--border-2);
box-shadow: 0 20px 60px rgba(0,168,181,0.12);
}
.construction__photo img { width: 100%; aspect-ratio: 16/9; object-fit: cover; transition: transform 0.6s; }
.construction__photo:hover img { transform: scale(1.05); }
.construction__tiers { display: flex; flex-direction: column; gap: 14px; }
.tier {
display: grid; grid-template-columns: 50px 1fr auto; gap: 20px;
align-items: center;
padding: 20px 24px;
border-radius: var(--radius-sm);
background: var(--bg-card); border: 1px solid var(--border);
transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}
.tier:hover { border-color: var(--border-2); transform: translateX(8px); }
.tier__num {
font-family: var(--f-head); font-weight: 900; font-size: 1.6rem;
text-align: center;
}
.tier:nth-child(1) .tier__num { color: var(--blue); text-shadow: var(--glow-blue); }
.tier:nth-child(2) .tier__num { color: var(--pink); text-shadow: var(--glow-pink); }
.tier:nth-child(3) .tier__num { color: var(--yellow); text-shadow: var(--glow-yellow); }
.tier:nth-child(4) .tier__num { color: var(--blue); text-shadow: var(--glow-blue); }
.tier:nth-child(5) .tier__num { color: var(--pink); text-shadow: var(--glow-pink); }
.tier:nth-child(1):hover { box-shadow: 0 0 30px rgba(0,168,181,0.18); }
.tier:nth-child(2):hover { box-shadow: 0 0 30px rgba(233,30,99,0.18); }
.tier:nth-child(3):hover { box-shadow: 0 0 30px rgba(255,196,0,0.18); }
.tier:nth-child(4):hover { box-shadow: 0 0 30px rgba(0,168,181,0.18); }
.tier:nth-child(5):hover { box-shadow: 0 0 30px rgba(233,30,99,0.18); }
.tier__name { font-weight: 700; font-size: 1.05rem; }
.tier__price {
font-family: var(--f-head); font-weight: 900; font-size: 1.2rem;
white-space: nowrap;
color: var(--blue);
text-shadow: 0 0 10px rgba(0,168,181,0.4);
}
@media (max-width: 880px) { .construction__grid { grid-template-columns: 1fr; } }
/* ============================================================
PACKAGES (Section 12)
============================================================ */
.packages { background: linear-gradient(180deg, var(--bg) 0%, #02030A 50%, var(--bg) 100%); }
.packages__cols {
display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap);
}
.pkg-card {
padding: 36px;
border-radius: var(--radius);
background: var(--bg-card);
border: 1px solid var(--border);
transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.pkg-card:hover { transform: translateY(-6px); border-color: var(--border-2); }
.pkg-card.early h3 { color: var(--pink); text-shadow: 0 0 14px rgba(233,30,99,0.5); }
.pkg-card.included h3 { color: var(--blue); text-shadow: 0 0 14px rgba(0,168,181,0.5); }
.pkg-card.extras h3 { color: var(--yellow); text-shadow: 0 0 14px rgba(255,196,0,0.5); }
.pkg-card.terms h3 { color: var(--blue); text-shadow: 0 0 14px rgba(0,168,181,0.5); }
.pkg-card.early:hover { box-shadow: 0 16px 50px rgba(233,30,99,0.18); }
.pkg-card.included:hover { box-shadow: 0 16px 50px rgba(0,168,181,0.18); }
.pkg-card.extras:hover { box-shadow: 0 16px 50px rgba(255,196,0,0.18); }
.pkg-card.terms:hover { box-shadow: 0 16px 50px rgba(0,168,181,0.18); }
.pkg-card h3 {
font-size: 0.84rem; font-weight: 700; letter-spacing: 4px; text-transform: uppercase;
margin-bottom: 24px;
}
.pkg-discount {
display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
padding: 22px 26px; border-radius: var(--radius-sm);
background: rgba(233,30,99,0.08); border: 1px solid rgba(233,30,99,0.3);
margin-bottom: 14px;
position: relative;
overflow: hidden;
}
.pkg-discount::before {
content: ''; position: absolute; right: -30px; top: -30px; width: 100px; height: 100px;
border-radius: 50%; background: var(--pink); filter: blur(40px); opacity: 0.3;
}
.pkg-discount .pct {
font-family: var(--f-head); font-weight: 900;
font-size: 2.4rem; line-height: 1; color: var(--pink);
text-shadow: var(--glow-pink); position: relative;
}
.pkg-discount p { margin: 0; color: var(--text-soft); font-size: 0.93rem; position: relative; }
.pkg-discount.discount-2 { background: rgba(255,196,0,0.07); border-color: rgba(255,196,0,0.3); }
.pkg-discount.discount-2::before { background: var(--yellow); }
.pkg-discount.discount-2 .pct { color: var(--yellow); text-shadow: var(--glow-yellow); }
.pkg-list { list-style: none; padding: 0; margin: 0; }
.pkg-list li {
padding: 9px 0 9px 24px; position: relative;
color: var(--text-soft); font-size: 0.93rem; line-height: 1.55;
}
.pkg-list li::before {
content: '✓'; position: absolute; left: 0; top: 8px;
color: var(--blue); font-weight: 900;
text-shadow: 0 0 8px rgba(0,168,181,0.6);
}
.pkg-card.extras .pkg-list li::before { content: '+'; color: var(--yellow); text-shadow: 0 0 8px rgba(255,196,0,0.6); }
.pkg-card.terms .pkg-list li::before { content: '◆'; color: var(--pink); text-shadow: 0 0 8px rgba(233,30,99,0.6); }
@media (max-width: 880px) { .packages__cols { grid-template-columns: 1fr; } }
/* ============================================================
SPONSORS (Section 13)
============================================================ */
.sponsors { background: var(--bg); }
.sponsor-tiers {
display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px;
margin-bottom: 36px;
}
.tier-card {
padding: 26px 16px;
text-align: center;
border-radius: var(--radius);
background: var(--bg-card);
border: 1px solid var(--border);
position: relative; overflow: hidden;
transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.tier-card:hover { transform: translateY(-6px); border-color: var(--border-2); }
.tier-card::before {
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
}
.tier-card:nth-child(1)::before { background: linear-gradient(90deg, var(--blue), var(--pink), var(--yellow)); box-shadow: 0 0 16px var(--blue); }
.tier-card:nth-child(2)::before { background: var(--blue); box-shadow: 0 0 14px var(--blue); }
.tier-card:nth-child(3)::before { background: linear-gradient(90deg, var(--pink), var(--blue)); box-shadow: 0 0 14px var(--pink); }
.tier-card:nth-child(4)::before { background: var(--yellow); box-shadow: 0 0 14px var(--yellow); }
.tier-card:nth-child(5)::before { background: rgba(255,255,255,0.7); box-shadow: 0 0 14px rgba(255,255,255,0.4); }
.tier-card:nth-child(6)::before { background: #c98756; box-shadow: 0 0 14px rgba(201,135,86,0.4); }
.tier-card:nth-child(1):hover { box-shadow: 0 14px 40px rgba(0,168,181,0.2); }
.tier-card:nth-child(2):hover { box-shadow: 0 14px 40px rgba(0,168,181,0.18); }
.tier-card:nth-child(3):hover { box-shadow: 0 14px 40px rgba(233,30,99,0.18); }
.tier-card:nth-child(4):hover { box-shadow: 0 14px 40px rgba(255,196,0,0.18); }
.tier-card__name {
font-family: var(--f-head); font-weight: 900;
font-size: 1.05rem; letter-spacing: 1px; margin-bottom: 8px;
text-transform: uppercase;
}
.tier-card:nth-child(1) .tier-card__name {
background: linear-gradient(120deg, var(--blue), var(--pink), var(--yellow));
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 0 12px rgba(0,168,181,0.4));
}
.tier-card:nth-child(2) .tier-card__name { color: var(--blue); text-shadow: var(--glow-blue); }
.tier-card:nth-child(3) .tier-card__name { color: var(--pink); text-shadow: var(--glow-pink); }
.tier-card:nth-child(4) .tier-card__name { color: var(--yellow); text-shadow: var(--glow-yellow); }
.tier-card:nth-child(5) .tier-card__name { color: #fff; }
.tier-card:nth-child(6) .tier-card__name { color: #c98756; }
.tier-card__sub { font-size: 0.78rem; color: var(--text-mute); }
@media (max-width: 1100px) { .sponsor-tiers { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .sponsor-tiers { grid-template-columns: repeat(2, 1fr); } }
.benefits-table-wrap {
overflow-x: auto;
border-radius: var(--radius);
border: 1px solid var(--border);
background: var(--bg-card);
}
.benefits-table { width: 100%; border-collapse: collapse; min-width: 720px; }
.benefits-table th, .benefits-table td {
padding: 12px 16px; text-align: center;
border-bottom: 1px solid var(--border);
font-size: 0.86rem;
}
.benefits-table th {
background: rgba(0,0,0,0.55);
font-family: var(--f-head); font-weight: 700;
font-size: 0.72rem; text-transform: uppercase; letter-spacing: 1.5px;
color: var(--text-soft);
white-space: nowrap;
}
.benefits-table td:first-child, .benefits-table th:first-child {
text-align: left; font-weight: 700; min-width: 280px;
}
.benefits-table tr.group-head td {
background: rgba(0,168,181,0.04); color: var(--blue);
font-family: var(--f-head); font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
font-size: 0.78rem; padding: 14px 16px;
text-shadow: 0 0 10px rgba(0,168,181,0.4);
}
.benefits-table tr:not(.group-head):hover td { background: rgba(255,255,255,0.03); }
.benefits-table tr:last-child td { border-bottom: none; }
.benefits-table .yes {
color: transparent;
font-size: 0;
position: relative;
height: 18px;
}
.benefits-table .yes::before {
content: '';
display: inline-block;
width: 18px; height: 18px;
background: var(--blue);
filter: drop-shadow(0 0 6px rgba(0,168,181,0.7));
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
vertical-align: middle;
}
.benefits-table .yes::after {
/* Preserve some text content for accessibility */
content: 'Yes';
position: absolute;
width: 1px; height: 1px;
overflow: hidden;
clip: rect(0,0,0,0);
}
/* ============================================================
FOOTER / CONTACT
============================================================ */
.footer {
background: linear-gradient(180deg, var(--bg) 0%, #000 100%);
padding: 100px 0 50px;
border-top: 1px solid var(--border);
position: relative;
overflow: hidden;
}
.footer::before {
content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
width: 60%; height: 1px;
background: linear-gradient(90deg, transparent, var(--blue), var(--pink), var(--yellow), transparent);
box-shadow: 0 0 20px var(--blue);
}
.footer__grid {
display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: var(--gap);
margin-bottom: 60px;
}
.footer__brand img, .footer__brand svg, .footer__brand object {
height: 120px; width: auto; max-width: 240px;
object-fit: contain;
margin-bottom: 20px;
pointer-events: none;
display: block;
}
.footer__brand p { color: var(--text-soft); font-size: 0.95rem; max-width: 360px; line-height: 1.7; }
.footer__col h4 {
font-size: 0.78rem; font-weight: 700; letter-spacing: 4px; text-transform: uppercase;
color: var(--blue); margin-bottom: 18px; text-shadow: 0 0 10px rgba(0,168,181,0.4);
}
.footer__col ul { list-style: none; padding: 0; margin: 0; }
.footer__col li { padding: 6px 0; color: var(--text-soft); font-size: 0.93rem; }
.footer__col a:hover { color: var(--blue); text-shadow: 0 0 10px rgba(0,168,181,0.5); }
.footer__bottom {
display: flex; justify-content: space-between; align-items: center;
padding-top: 32px;
border-top: 1px solid var(--border);
font-size: 0.85rem; color: var(--text-mute);
}
.footer__social { display: flex; gap: 12px; }
.footer__social a {
width: 40px; height: 40px; border-radius: 50%;
display: grid; place-items: center;
background: rgba(255,255,255,0.04); border: 1px solid var(--border);
transition: background 0.3s, border-color 0.3s, color 0.3s, box-shadow 0.3s, transform 0.3s;
font-weight: 700;
}
.footer__social a:hover {
background: var(--blue); border-color: var(--blue); color: #000;
box-shadow: var(--glow-blue);
transform: translateY(-3px);
}
.footer__social a:nth-child(2):hover { background: var(--pink); border-color: var(--pink); box-shadow: var(--glow-pink); }
.footer__social a:nth-child(3):hover { background: var(--yellow); border-color: var(--yellow); box-shadow: var(--glow-yellow); }
@media (max-width: 880px) {
.footer__grid { grid-template-columns: 1fr; }
.footer__bottom { flex-direction: column; gap: 14px; text-align: center; }
}
/* ============================================================
LIGHT THEME (data-theme="light")
White surfaces · brand neon kept · darker text · softened glows
============================================================ */
html[data-theme="light"] {
/* Surfaces */
--bg: #FFFFFF;
--bg-1: #F6F8FB;
--bg-2: #EEF1F7;
--bg-card: rgba(0,0,0,0.025);
--bg-card-2: rgba(0,0,0,0.05);
--border: rgba(0,0,0,0.10);
--border-2: rgba(0,0,0,0.18);
/* Text — near-black for warm contrast */
--text: #0B1020;
--text-soft: #2E3445;
--text-mute: #5A6276;
/* Glows — disabled in light mode (clean flat look) */
--glow-blue: none;
--glow-pink: none;
--glow-yellow: none;
--glow-multi: none;
}
/* Kill ALL text-shadow + neon drop-shadow filters in light mode */
html[data-theme="light"] *,
html[data-theme="light"] *::before,
html[data-theme="light"] *::after {
text-shadow: none !important;
}
html[data-theme="light"] body { background: var(--bg); color: var(--text); }
html[data-theme="light"] { scrollbar-color: rgba(0,168,181,0.5) #EEF1F7; }
html[data-theme="light"]::-webkit-scrollbar-track { background: #EEF1F7; }
html[data-theme="light"] ::selection { background: var(--pink); color: #fff; }
/* NAV */
html[data-theme="light"] .nav {
background: rgba(255,255,255,0.7);
border-bottom: 1px solid var(--border);
}
html[data-theme="light"] .nav.scrolled {
background: rgba(255,255,255,0.92);
box-shadow: 0 2px 30px rgba(0,0,0,0.06);
}
html[data-theme="light"] .nav__links a { color: var(--text-soft); }
html[data-theme="light"] .nav__links a:hover { color: var(--blue-deep); text-shadow: 0 0 10px rgba(0,168,181,0.35); }
html[data-theme="light"] .nav__links a.active { color: var(--text); }
html[data-theme="light"] .nav__theme {
background: rgba(0,0,0,0.04);
color: var(--text-soft);
}
html[data-theme="light"] .nav__theme:hover {
color: var(--blue-deep);
border-color: rgba(0,168,181,0.4);
background: rgba(0,168,181,0.08);
box-shadow: none;
}
/* CTA — replace neon pink glow with subtle elevation */
html[data-theme="light"] .nav__cta {
box-shadow: 0 4px 14px rgba(233,30,99,0.25);
}
html[data-theme="light"] .nav__cta:hover {
box-shadow: 0 6px 22px rgba(233,30,99,0.35);
}
/* Drop-shadow filters that paint neon onto images / SVGs */
html[data-theme="light"] .hero__org-logo,
html[data-theme="light"] .figures-one__logo img,
html[data-theme="light"] .nav__logo img {
filter: none;
}
html[data-theme="light"] .figures-one__logo img {
filter: drop-shadow(0 2px 6px rgba(0,0,0,0.10));
}
/* Hero title accent words — were neon glow words, become flat brand color */
html[data-theme="light"] .hero__title .accent {
filter: none;
}
/* Section eyebrow chip — needs darker tint background on white */
html[data-theme="light"] .section-eyebrow {
background: rgba(0,0,0,0.04);
}
html[data-theme="light"] .section-eyebrow--blue { color: var(--blue-deep); text-shadow: 0 0 6px rgba(0,168,181,0.25); }
html[data-theme="light"] .section-eyebrow--pink { color: #C2185B; text-shadow: 0 0 6px rgba(233,30,99,0.25); }
html[data-theme="light"] .section-eyebrow--yellow { color: #B58900; text-shadow: 0 0 6px rgba(255,196,0,0.30); }
/* Glowing word helpers */
html[data-theme="light"] .g-blue { color: var(--blue-deep); text-shadow: 0 0 10px rgba(0,168,181,0.30); }
html[data-theme="light"] .g-pink { color: #C2185B; text-shadow: 0 0 10px rgba(233,30,99,0.30); }
html[data-theme="light"] .g-yellow { color: #B58900; text-shadow: 0 0 10px rgba(255,196,0,0.35); }
/* Section dark gradients → white gradients with subtle brand wash */
html[data-theme="light"] .welcome,
html[data-theme="light"] .growth,
html[data-theme="light"] .timing,
html[data-theme="light"] .categories,
html[data-theme="light"] .booth,
html[data-theme="light"] .packages {
background: linear-gradient(180deg, var(--bg) 0%, var(--bg-1) 50%, var(--bg) 100%);
}
/* Hero overlay tint — was dark vignette, soften to barely-there */
html[data-theme="light"] .hero__bg::after {
background: radial-gradient(ellipse 60% 60% at 50% 50%, transparent 0%, rgba(0, 0, 0, 0.7) 100%);
}
/* Cards / pills using rgba(255,255,255,0.0X) → invert to dark tints on white */
html[data-theme="light"] .stat-pill,
html[data-theme="light"] .timing-card,
html[data-theme="light"] .audience-pill,
html[data-theme="light"] .cat,
html[data-theme="light"] .obj,
html[data-theme="light"] .pillar,
html[data-theme="light"] .construction-tier,
html[data-theme="light"] .sponsor-tier,
html[data-theme="light"] .figure,
/* html[data-theme="light"] .venue-h, */
html[data-theme="light"] .objective,
html[data-theme="light"] .growth__card,
html[data-theme="light"] .booth__size-row,
html[data-theme="light"] .hero__chip {
background: #FFFFFF;
border-color: var(--border);
box-shadow: 0 4px 16px rgba(11,16,32,0.05);
}
/* Disable hover-glow on cards — keep clean elevation only */
html[data-theme="light"] .stat-pill:hover,
html[data-theme="light"] .timing-card:hover,
html[data-theme="light"] .audience-pill:hover,
html[data-theme="light"] .cat:hover,
html[data-theme="light"] .obj:hover,
html[data-theme="light"] .pillar:hover,
html[data-theme="light"] .construction-tier:hover,
html[data-theme="light"] .sponsor-tier:hover,
html[data-theme="light"] .figure:hover,
/* html[data-theme="light"] .venue-h:hover, */
html[data-theme="light"] .objective:hover,
html[data-theme="light"] .growth__card:hover,
html[data-theme="light"] .hero__chip:hover {
box-shadow: 0 8px 28px rgba(11,16,32,0.10);
}
/* Figures-one full-bleed band */
html[data-theme="light"] .figures-one {
background: var(--bg);
}
html[data-theme="light"] .figures-one__bg-shadow {
/* background:
radial-gradient(ellipse 60% 60% at 50% 30%, rgba(0,168,181,0.06), transparent 70%),
radial-gradient(ellipse 70% 60% at 50% 100%, rgba(233,30,99,0.06), transparent 70%); */
}
html[data-theme="light"] .figures-one__inner {
background: linear-gradient(180deg, rgba(0,0,0,0.025), rgba(0,0,0,0.005));
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
html[data-theme="light"] .figures-one__inner::before {
background: radial-gradient(ellipse 50% 100% at 50% 50%, rgba(0,168,181,0.06), transparent 70%);
}
/* Side fade patterns — invert the fade-to-bg colour to white */
html[data-theme="light"] .figures-one__bg-pattern {
background:
linear-gradient(90deg, var(--bg) 0%, var(--bg) 35%, transparent 100%),
repeating-linear-gradient(135deg,
rgba(0,168,181,0.10) 0px, rgba(0,168,181,0.10) 1px,
transparent 1px, transparent 9px);
}
html[data-theme="light"] .figures-one__bg-pattern--right {
background:
linear-gradient(270deg, var(--bg) 0%, var(--bg) 35%, transparent 100%),
repeating-linear-gradient(45deg,
rgba(233,30,99,0.10) 0px, rgba(233,30,99,0.10) 1px,
transparent 1px, transparent 9px);
}
/* Center logo badge — was solid black, becomes white with brand glow */
html[data-theme="light"] .figures-one__logo {
background:
radial-gradient(circle at 30% 30%, rgba(0,168,181,0.16), transparent 60%),
radial-gradient(circle at 70% 70%, rgba(233,30,99,0.12), transparent 60%),
radial-gradient(circle at 50% 0%, rgba(255,196,0,0.10), transparent 65%),
#FFFFFF;
border: 2px solid rgba(0,0,0,0.06);
box-shadow:
0 0 0 1px rgba(0,0,0,0.04),
0 0 40px rgba(0,168,181,0.20),
0 0 80px rgba(233,30,99,0.10),
inset 0 0 30px rgba(0,168,181,0.10);
}
html[data-theme="light"] .figures-one__logo::before { opacity: 0.25; filter: blur(28px); }
html[data-theme="light"] .figures-one__logo img { filter: drop-shadow(0 0 12px rgba(0,168,181,0.30)); }
/* Marquee pills — accent variant (no glow on white) */
html[data-theme="light"] .fig-pill {
background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.10) 0%, rgba(var(--accent-rgb), 0.02) 100%);
border: 1px solid rgba(var(--accent-rgb), 0.45);
box-shadow: 0 4px 16px rgba(11,16,32,0.05);
}
html[data-theme="light"] .fig-pill:hover {
border-color: rgba(var(--accent-rgb), 0.7);
box-shadow: 0 8px 24px rgba(11,16,32,0.10);
}
html[data-theme="light"] .fig-pill__label { color: var(--text); }
/* Ghost variant */
html[data-theme="light"] .fig-pill--ghost {
background: #FFFFFF;
border: 1px solid var(--border);
box-shadow: 0 4px 14px rgba(11,16,32,0.04);
}
html[data-theme="light"] .fig-pill--ghost:hover {
border-color: rgba(var(--accent-rgb), 0.5);
background: rgba(var(--accent-rgb), 0.04);
box-shadow: 0 6px 20px rgba(11,16,32,0.08);
}
html[data-theme="light"] .fig-pill--ghost .fig-pill__num { color: var(--text); }
html[data-theme="light"] .fig-pill--ghost .fig-pill__label { color: var(--text-mute); }
/* Ambient orbs — kill them entirely on white background (would tint everything) */
html[data-theme="light"] .ambient,
html[data-theme="light"] .ambient__orb { display: none; }
/* Floor plan glow shadow → flat elevation */
html[data-theme="light"] .floor__plan { box-shadow: 0 12px 40px rgba(11,16,32,0.08); }
/* Brand-colored numbers (stat-pill, growth, objective, venue-h, figure, booth-size, tier)
— keep brand color, no glow */
html[data-theme="light"] .stat-pill__num,
html[data-theme="light"] .growth__progress .to,
html[data-theme="light"] .objective__num,
html[data-theme="light"] .venue-h__num,
html[data-theme="light"] .figure__num,
html[data-theme="light"] .booth__size-row strong,
html[data-theme="light"] .tier__num,
html[data-theme="light"] .price-table .price,
html[data-theme="light"] .growth__table .num-blue,
html[data-theme="light"] .growth__table .num-pink,
html[data-theme="light"] .growth__table .num-yellow,
html[data-theme="light"] .vision__head h3 {
filter: none;
}
/* Active nav link underline — keep brand gradient bar but drop the glow */
html[data-theme="light"] .nav__links a.active::after {
box-shadow: none;
}
/* Section title gradient span — keep gradient text, drop drop-shadow filter */
html[data-theme="light"] .sec-title-one__heading span,
html[data-theme="light"] .section-title span {
filter: none;
}
/* Floor plan — was solid black tile, becomes light */
html[data-theme="light"] .floor__plan {
background: #FFFFFF;
border: 1px solid var(--border-2);
box-shadow: 0 20px 60px rgba(0,168,181,0.08);
}
/* Footer */
html[data-theme="light"] .footer {
background: linear-gradient(180deg, var(--bg) 0%, #F6F8FB 100%);
border-top: 1px solid var(--border);
}
/* Tables (growth comparison + benefits) */
html[data-theme="light"] table { color: var(--text); }
html[data-theme="light"] thead { background: rgba(0,0,0,0.03); }
html[data-theme="light"] tbody tr:nth-child(even) { background: rgba(0,0,0,0.015); }
/* Section title heading retain its gradient — no override needed */
/* Headings stay near-black from --text, colored spans keep brand neon */
html[data-theme="light"] h1, html[data-theme="light"] h2, html[data-theme="light"] h3, html[data-theme="light"] h4, html[data-theme="light"] h5 { color: var(--text); }
/* Custom cursor — switch to yellow in light mode (screen blend would erase it on white) */
html[data-theme="light"] .cursor {
background: var(--yellow);
box-shadow: 0 0 10px rgba(255,196,0,0.7), 0 0 22px rgba(255,196,0,0.45);
mix-blend-mode: normal;
}
html[data-theme="light"] .cursor.is-hover {
background: rgba(255,196,0,0.25);
border-color: var(--yellow);
box-shadow: 0 0 14px rgba(255,196,0,0.7), 0 0 30px rgba(255,196,0,0.45);
}
html[data-theme="light"] .cursor-trail {
border-color: rgba(255,196,0,0.55);
mix-blend-mode: normal;
}
/* Smooth transition when toggling */
html, body, .nav, .nav__theme, .stat-pill, .timing-card, .audience-pill, .cat, .obj, .pillar,
.construction-tier, .sponsor-tier, .figure, .hero__chip, .figures-one__inner,
.figures-one__logo, .fig-pill, .floor__plan, .footer {
transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}