/* ---------------------------------------------------------------
KLOUDERS � style.css
Template: Xtract-inspired � Brand: Dark Aurora
--------------------------------------------------------------- */
/* 1. RESET
--------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scrollbar-color: rgba(139, 92, 246, 0.55) rgba(8, 10, 24, 0.85); scrollbar-width: thin; }
img, svg { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { cursor: pointer; background: none; border: none; font: inherit; }
details summary { cursor: pointer; }
/* Themed scrollbar (Aurora) */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track {
background: linear-gradient(180deg, #060713, #0B0C1F);
border-left: 1px solid rgba(255,255,255,0.04);
}
::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, #22D3EE 0%, #8B5CF6 50%, #EC4899 100%);
border-radius: 999px;
border: 3px solid #080A18;
box-shadow: 0 0 8px rgba(139, 92, 246, 0.45);
}
::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, #67E8F9 0%, #A78BFA 50%, #F472B6 100%);
box-shadow: 0 0 12px rgba(236, 72, 153, 0.55);
}
::-webkit-scrollbar-corner { background: #080A18; }
/* 2. DESIGN TOKENS
--------------------------------------------------------------- */
:root {
/* Background */
--bg: #080A18;
--bg-2: #0C0D1C;
--bg-card: #0F1025;
--bg-card-h:#141535;
--bg-alt: #0B0C1F;
/* Borders */
--border: rgba(255,255,255,0.07);
--border-h: rgba(255,255,255,0.14);
--border-a: rgba(34,211,238,0.22);
/* Text */
--t1: #FAFAFA;
--t2: rgba(250,250,250,0.58);
--t3: rgba(250,250,250,0.3);
/* Brand colors */
--cyan: #22D3EE;
--violet: #8B5CF6;
--magenta: #EC4899;
--green: #22C55E;
--orange: #F97316;
/* Gradient */
--grad: linear-gradient(135deg, #22D3EE 0%, #8B5CF6 50%, #EC4899 100%);
/* Shape */
--r-sm: 8px;
--r: 14px;
--r-lg: 20px;
--r-full: 9999px;
/* Transitions */
--ease: cubic-bezier(0.16, 1, 0.3, 1);
--duration: 0.28s;
/* Layout */
--max-w: 1200px;
--px: 24px;
}
/* 3. BASE
--------------------------------------------------------------- */
body {
background: var(--bg);
color: var(--t1);
font-family: 'Inter', system-ui, sans-serif;
font-size: 15px;
line-height: 1.6;
overflow-x: hidden;
}
/* 4. TYPOGRAPHY CLASSES
--------------------------------------------------------------- */
.h-display {
font-family: 'Space Grotesk', system-ui, sans-serif;
font-size: clamp(42px, 6vw, 76px);
font-weight: 700;
line-height: 1.06;
letter-spacing: -2.5px;
}
.h-section {
font-family: 'Space Grotesk', system-ui, sans-serif;
font-size: clamp(30px, 4vw, 48px);
font-weight: 700;
line-height: 1.12;
letter-spacing: -1.5px;
}
/* 5. GRADIENT TEXT
--------------------------------------------------------------- */
.grad {
background: var(--grad);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* 6. LAYOUT
--------------------------------------------------------------- */
.container {
max-width: var(--max-w);
margin: 0 auto;
padding: 0 var(--px);
}
.section {
padding: 100px 0;
}
.section-alt {
background: var(--bg-alt);
}
.section-head {
max-width: 680px;
margin-bottom: 60px;
}
.section-sub {
margin-top: 16px;
color: var(--t2);
font-size: 16px;
line-height: 1.75;
}
/* 7. EYEBROW / BADGE
--------------------------------------------------------------- */
.eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 11px;
font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--cyan);
background: rgba(34,211,238,0.08);
border: 1px solid rgba(34,211,238,0.22);
border-radius: var(--r-full);
padding: 5px 14px;
margin-bottom: 20px;
}
.eyebrow--center {
display: flex;
width: fit-content;
margin: 0 auto 24px;
}
.eyebrow-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--cyan);
flex-shrink: 0;
animation: dot-pulse 2.4s ease-in-out infinite;
}
@keyframes dot-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.35; transform: scale(0.6); }
}
/* 8. BUTTONS
--------------------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
border-radius: var(--r);
font-family: 'Space Grotesk', system-ui, sans-serif;
font-size: 14px;
font-weight: 600;
transition: all var(--duration) var(--ease);
border: 1px solid transparent;
white-space: nowrap;
line-height: 1;
}
.btn-primary {
background: var(--cyan);
color: #080A18;
border-color: var(--cyan);
}
.btn-primary:hover {
background: #38E8F8;
border-color: #38E8F8;
transform: translateY(-1px);
box-shadow: 0 8px 28px rgba(34,211,238,0.28);
}
.btn-ghost {
background: transparent;
color: var(--t1);
border-color: var(--border-h);
}
.btn-ghost:hover {
border-color: rgba(255,255,255,0.26);
background: rgba(255,255,255,0.04);
}
.btn-xl {
padding: 16px 36px;
font-size: 16px;
}
/* 9. NAVBAR
--------------------------------------------------------------- */
.navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
padding: 0 24px;
transition: background var(--duration) var(--ease),
backdrop-filter var(--duration) var(--ease),
border-color var(--duration) var(--ease);
border-bottom: 1px solid transparent;
}
.navbar.scrolled {
background: rgba(8,10,24,0.88);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border-bottom-color: var(--border);
}
.nav-inner {
max-width: var(--max-w);
margin: 0 auto;
height: 64px;
display: flex;
align-items: center;
gap: 32px;
}
.nav-logo {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
.nav-logo img {
width: 30px;
height: 30px;
}
.nav-logo span {
font-family: 'Space Grotesk', system-ui, sans-serif;
font-size: 14px;
font-weight: 700;
letter-spacing: 2.5px;
color: var(--t1);
}
.nav-links {
display: flex;
gap: 2px;
margin-left: auto;
}
.nav-link {
color: var(--t2);
font-size: 14px;
font-weight: 500;
padding: 7px 14px;
border-radius: var(--r-sm);
transition: color var(--duration) var(--ease),
background var(--duration) var(--ease);
}
.nav-link:hover,
.nav-link.active {
color: var(--t1);
background: rgba(255,255,255,0.06);
}
.nav-end {
display: flex;
align-items: center;
gap: 6px;
}
.nav-icon {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--r-sm);
color: var(--t2);
transition: color var(--duration) var(--ease),
background var(--duration) var(--ease);
}
.nav-icon:hover {
color: var(--t1);
background: rgba(255,255,255,0.07);
}
.nav-cta {
background: rgba(34,211,238,0.1);
border: 1px solid rgba(34,211,238,0.25);
color: var(--cyan);
font-size: 13px;
font-weight: 600;
padding: 8px 16px;
border-radius: var(--r);
font-family: 'Space Grotesk', system-ui, sans-serif;
transition: all var(--duration) var(--ease);
}
.nav-cta:hover {
background: rgba(34,211,238,0.18);
border-color: rgba(34,211,238,0.45);
}
/* Secondary "Support" link in navbar (external, for current users) */
.nav-support {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 13px;
font-weight: 600;
color: var(--violet);
font-family: 'Space Grotesk', system-ui, sans-serif;
padding: 7px 14px;
border-radius: var(--r);
border: 1px solid rgba(139,92,246,0.4);
background: rgba(139,92,246,0.07);
box-shadow: 0 0 12px -4px rgba(139,92,246,0.25);
transition: color var(--duration) var(--ease),
background var(--duration) var(--ease),
border-color var(--duration) var(--ease),
box-shadow var(--duration) var(--ease);
}
.nav-support svg { opacity: 1; transition: transform 0.4s var(--ease); }
.nav-support:hover {
color: #fff;
background: rgba(60,0,180,0.7);
border-color: rgba(139,92,246,0.7);
box-shadow: 0 0 20px -4px rgba(139,92,246,0.45);
}
.nav-support:hover svg { transform: rotate(-12deg); }
.nav-support:focus-visible {
outline: 2px solid var(--violet);
outline-offset: 2px;
}
.hamburger {
display: none;
width: 36px;
height: 36px;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
background: none;
border: 1px solid var(--border-h);
border-radius: var(--r-sm);
padding: 0;
}
.hamburger span {
display: block;
width: 18px;
height: 1.5px;
background: var(--t1);
border-radius: 99px;
transition: all var(--duration) var(--ease);
}
.hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
/* 10. HERO
--------------------------------------------------------------- */
.hero {
position: relative;
min-height: 100svh;
display: flex;
align-items: center;
padding: 96px 0 72px;
overflow: hidden;
}
.hero-glow {
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(ellipse 80% 60% at 65% 40%, rgba(139,92,246,0.13) 0%, transparent 60%),
radial-gradient(ellipse 55% 45% at 25% 75%, rgba(34,211,238,0.08) 0%, transparent 55%),
radial-gradient(ellipse 40% 35% at 80% 75%, rgba(236,72,153,0.07) 0%, transparent 55%);
}
.hero-grid {
display: grid;
grid-template-columns: 1fr 480px;
gap: 48px;
align-items: center;
width: 100%;
}
.hero-copy {
max-width: 580px;
}
.hero-sub {
margin-top: 20px;
color: var(--t2);
font-size: 17px;
line-height: 1.75;
max-width: 500px;
}
.hero-actions {
margin-top: 32px;
display: flex;
gap: 12px;
flex-wrap: wrap;
}
/* --- BOLD HERO (new design) ----------------------------------- */
.hero--bold {
min-height: 100svh;
padding: 0;
flex-direction: column;
justify-content: flex-start;
align-items: center;
text-align: center;
isolation: isolate;
border-bottom: 1px solid var(--border);
}
.hero--bold .hero-container {
flex: 0 0 100svh;
box-sizing: border-box;
padding: 96px 24px 48px;
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
margin-top: auto;
margin-bottom: auto;
}
/* Layered animated background */
.hero-bg {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
}
.hero-grid-bg {
position: absolute;
inset: -10% -5% -25% -5%;
background-image:
linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
background-size: 56px 56px;
transform: perspective(900px) rotateX(58deg);
transform-origin: center 80%;
mask-image: radial-gradient(ellipse 75% 90% at 50% 60%, #000 0%, #000 35%, transparent 75%);
-webkit-mask-image: radial-gradient(ellipse 75% 90% at 50% 60%, #000 0%, #000 35%, transparent 75%);
opacity: 0.55;
}
.hero-aurora {
position: absolute;
inset: -20%;
background:
radial-gradient(ellipse 45% 55% at 22% 30%, rgba(34,211,238,0.22) 0%, transparent 60%),
radial-gradient(ellipse 50% 60% at 78% 28%, rgba(139,92,246,0.28) 0%, transparent 60%),
radial-gradient(ellipse 55% 50% at 50% 80%, rgba(236,72,153,0.18) 0%, transparent 65%);
filter: blur(20px) saturate(1.15);
animation: hero-aurora-drift 22s ease-in-out infinite alternate;
}
@keyframes hero-aurora-drift {
0% { transform: translate3d(-2%, -1%, 0) scale(1); }
50% { transform: translate3d( 3%, 2%, 0) scale(1.06); }
100% { transform: translate3d(-1%, 3%, 0) scale(1.02); }
}
.hero-orb {
position: absolute;
border-radius: 50%;
filter: blur(60px);
opacity: 0.55;
mix-blend-mode: screen;
animation: hero-orb-float 14s ease-in-out infinite;
}
.hero-orb--1 {
width: 460px; height: 460px;
top: -8%; left: -6%;
background: radial-gradient(circle, rgba(34,211,238,0.55) 0%, transparent 70%);
animation-delay: 0s;
}
.hero-orb--2 {
width: 520px; height: 520px;
top: 20%; right: -10%;
background: radial-gradient(circle, rgba(139,92,246,0.6) 0%, transparent 70%);
animation-duration: 18s;
animation-delay: -4s;
}
.hero-orb--3 {
width: 380px; height: 380px;
bottom: -10%; left: 35%;
background: radial-gradient(circle, rgba(236,72,153,0.45) 0%, transparent 70%);
animation-duration: 20s;
animation-delay: -8s;
}
@keyframes hero-orb-float {
0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
50% { transform: translate3d(40px, -30px, 0) scale(1.1); }
}
.hero-noise {
position: absolute;
inset: 0;
opacity: 0.035;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
}
/* Eyebrow pill */
.hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 16px 8px 14px;
margin-bottom: 28px;
font-family: 'Inter', system-ui, sans-serif;
font-size: 13px;
font-weight: 500;
color: var(--t2);
letter-spacing: 0.2px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 100px;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.06),
0 6px 24px -8px rgba(34,211,238,0.25);
}
.hero-eyebrow-dot {
width: 7px; height: 7px;
border-radius: 50%;
background: #22D3EE;
box-shadow: 0 0 10px rgba(34,211,238,0.9), 0 0 20px rgba(34,211,238,0.5);
animation: hero-dot-pulse 2.4s ease-in-out infinite;
}
@keyframes hero-dot-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.55; transform: scale(0.85); }
}
/* Massive title */
.hero--bold .hero-title {
font-size: clamp(48px, 8.4vw, 112px);
line-height: 0.98;
letter-spacing: -3px;
margin: 0;
max-width: 14ch;
text-wrap: balance;
position: relative;
}
/* Subtle animated background glow behind the title */
.hero--bold .hero-title::before {
content: '';
position: absolute;
inset: -80px -140px;
background:
radial-gradient(ellipse 55% 50% at 20% 55%, rgba(34,211,238,0.13) 0%, transparent 65%),
radial-gradient(ellipse 50% 55% at 80% 45%, rgba(139,92,246,0.13) 0%, transparent 65%);
filter: blur(28px);
border-radius: 50%;
pointer-events: none;
animation: hero-title-glow 12s ease-in-out infinite alternate;
z-index: -1;
will-change: transform, opacity;
}
@keyframes hero-title-glow {
0% { opacity: 0.55; transform: scale(1) translate3d(-1%, 0, 0); }
50% { opacity: 0.95; transform: scale(1.08) translate3d( 1%, -1%, 0); }
100% { opacity: 0.70; transform: scale(1.04) translate3d( 0%, 1%, 0); }
}
/* Animated reveal on page load */
.hero-title--anim .hero-title-line {
display: block;
overflow: hidden;
padding-bottom: 0.06em;
}
.hero-title--anim .hero-title-inner {
display: inline-block;
transform: translateY(110%);
opacity: 0;
will-change: transform, opacity;
animation: hero-title-rise 1.05s cubic-bezier(0.16, 1, 0.3, 1) 0.15s forwards;
}
.hero-title--anim .hero-title-line:nth-child(2) .hero-title-inner {
animation-delay: 0.32s;
}
@keyframes hero-title-rise {
0% { transform: translateY(110%); opacity: 0; filter: blur(8px); }
60% { opacity: 1; filter: blur(0); }
100% { transform: translateY(0); opacity: 1; filter: blur(0); }
}
/* Gradient sweep on the second line, synchronized with the rise */
.hero-title--anim .hero-title-inner.grad {
background-size: 200% 100%;
background-position: 100% 50%;
animation:
hero-title-rise 1.05s cubic-bezier(0.16, 1, 0.3, 1) 0.32s forwards,
hero-title-grad 1.6s cubic-bezier(0.16, 1, 0.3, 1) 0.42s forwards;
}
@keyframes hero-title-grad {
0% { background-position: 100% 50%; filter: brightness(0.8); }
60% { filter: brightness(1.18); }
100% { background-position: 0% 50%; filter: brightness(1); }
}
.no-js .hero-title--anim .hero-title-inner {
transform: none;
opacity: 1;
filter: none;
animation: none;
}
@media (prefers-reduced-motion: reduce) {
.hero-title--anim .hero-title-inner {
transform: none;
opacity: 1;
filter: none;
animation: none;
}
.hero--bold .hero-title::before {
animation: none;
}
}
.hero--bold .hero-sub {
margin: 28px auto 0;
text-align: center;
font-size: clamp(16px, 1.4vw, 19px);
line-height: 1.65;
color: var(--t2);
max-width: 620px;
}
.hero--bold .hero-actions {
margin-top: 40px;
justify-content: center;
}
.btn-lg {
padding: 16px 28px;
font-size: 15px;
border-radius: 14px;
}
.btn-primary.btn-lg {
box-shadow:
0 1px 0 rgba(255,255,255,0.18) inset,
0 10px 40px -10px rgba(139,92,246,0.55),
0 6px 24px -8px rgba(34,211,238,0.4);
}
/* Stats strip */
.hero-stats {
list-style: none;
margin: 72px 0 0;
padding: 24px 8px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
width: 100%;
max-width: 880px;
border-top: 1px solid rgba(255,255,255,0.06);
border-bottom: 1px solid rgba(255,255,255,0.06);
position: relative;
}
.hero-stats::before,
.hero-stats::after {
content: "";
position: absolute;
left: 50%;
width: 50%;
height: 1px;
transform: translateX(-50%);
background: linear-gradient(90deg, transparent, rgba(139,92,246,0.5), transparent);
}
.hero-stats::before { top: -1px; }
.hero-stats::after { bottom: -1px; }
.hero-stat {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 0 8px;
}
.hero-stat-num {
font-family: 'Space Grotesk', system-ui, sans-serif;
font-size: clamp(30px, 3.4vw, 44px);
font-weight: 700;
line-height: 1;
letter-spacing: -1.5px;
display: inline-flex;
align-items: baseline;
}
.hero-stat-suffix {
font-size: 0.55em;
font-weight: 600;
margin-left: 2px;
color: var(--t2);
-webkit-text-fill-color: var(--t2);
}
.hero-stat-lo {
font-size: 12px;
font-weight: 500;
color: var(--t3);
letter-spacing: 0.4px;
text-transform: uppercase;
}
/* Scroll indicator */
.hero-scroll {
position: absolute;
left: 50%;
bottom: 18px;
transform: translateX(-50%);
width: 28px;
height: 44px;
border: 1px solid rgba(255,255,255,0.18);
border-radius: 100px;
display: flex;
justify-content: center;
padding-top: 8px;
opacity: 0.6;
transition: opacity .3s var(--ease);
}
.hero-scroll:hover { opacity: 1; }
.hero-scroll-line {
display: block;
width: 2px;
height: 8px;
border-radius: 2px;
background: linear-gradient(180deg, #22D3EE, transparent);
animation: hero-scroll-tick 1.6s ease-in-out infinite;
}
@keyframes hero-scroll-tick {
0% { transform: translateY(0); opacity: 1; }
60% { transform: translateY(14px); opacity: 0; }
61% { transform: translateY(0); opacity: 0; }
100% { transform: translateY(0); opacity: 1; }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.hero-aurora,
.hero-orb,
.hero-eyebrow-dot,
.hero-scroll-line { animation: none; }
}
/* Trust strip (legacy, no longer rendered) */
.trust-strip {
margin-top: 48px;
padding-top: 32px;
border-top: 1px solid var(--border);
}
.trust-label {
display: block;
font-size: 11px;
font-weight: 500;
color: var(--t3);
letter-spacing: 1.2px;
text-transform: uppercase;
margin-bottom: 18px;
}
.trust-logos {
display: flex;
align-items: center;
gap: 18px;
flex-wrap: wrap;
}
.trust-sep {
color: var(--t3);
font-size: 20px;
line-height: 1;
}
.trust-logo {
height: 30px;
opacity: 0.38;
filter: brightness(0) invert(1);
transition: opacity var(--duration) var(--ease),
filter var(--duration) var(--ease);
}
.trust-logo:hover { opacity: 0.7; }
.trust-logo-advans:hover {
filter: brightness(2) saturate(1.1);
}
.trust-logo svg {
height: 26px;
width: auto;
max-width: 130px;
color: white;
}
.trust-logo img {
height: 26px;
width: auto;
max-width: 130px;
object-fit: contain;
}
/* Hero visual */
.hero-visual {
display: flex;
justify-content: center;
align-items: center;
}
/* 11. FEATURES BENTO
--------------------------------------------------------------- */
.bento {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 14px;
}
.bento-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 28px;
transition: border-color var(--duration) var(--ease),
background var(--duration) var(--ease);
overflow: hidden;
}
.bento-card:hover {
border-color: var(--border-h);
background: var(--bg-card-h);
}
/* Large card: 4 cols, 2-column internal grid */
.bento-card--large {
grid-column: span 4;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
align-items: start;
}
/* Wide card: 6 cols full width, 2-column internal grid */
.bento-card--wide {
grid-column: span 6;
display: grid;
grid-template-columns: 1fr 1.5fr;
gap: 32px;
align-items: center;
}
/* Standard 2-col card */
.bento-card:not(.bento-card--large):not(.bento-card--wide) {
grid-column: span 2;
display: flex;
flex-direction: column;
gap: 12px;
}
.bento-top {
display: flex;
flex-direction: column;
}
.bento-icon {
width: 44px;
height: 44px;
border-radius: var(--r);
background: color-mix(in srgb, var(--ic, var(--cyan)) 10%, transparent);
border: 1px solid color-mix(in srgb, var(--ic, var(--cyan)) 22%, transparent);
display: flex;
align-items: center;
justify-content: center;
color: var(--ic, var(--cyan));
margin-bottom: 16px;
flex-shrink: 0;
}
.bento-title {
font-family: 'Space Grotesk', system-ui, sans-serif;
font-size: 16px;
font-weight: 600;
letter-spacing: -0.3px;
}
.bento-desc {
color: var(--t2);
font-size: 14px;
line-height: 1.6;
margin-top: 8px;
}
.bento-tag {
margin-top: auto;
font-size: 11px;
font-weight: 600;
color: var(--t3);
letter-spacing: 0.8px;
text-transform: uppercase;
padding: 4px 10px;
border: 1px solid var(--border-h);
border-radius: var(--r-full);
display: inline-block;
align-self: flex-start;
}
/* Bento mock terminal UI */
.bento-mock {
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--r);
overflow: hidden;
font-family: 'Space Grotesk', system-ui, sans-serif;
}
.mock-topbar {
padding: 10px 14px;
display: flex;
align-items: center;
gap: 8px;
border-bottom: 1px solid var(--border);
}
.mock-dots {
display: flex;
gap: 5px;
}
.mock-dots span {
width: 9px;
height: 9px;
border-radius: 50%;
}
.mock-dots span:nth-child(1) { background: #FF5F57; }
.mock-dots span:nth-child(2) { background: #FEBC2E; }
.mock-dots span:nth-child(3) { background: #28C840; }
.mock-label {
font-size: 11px;
color: var(--t2);
font-weight: 600;
margin-left: 4px;
}
.mock-status {
margin-left: auto;
font-size: 10px;
color: var(--green);
letter-spacing: 0.3px;
}
.mock-rows {
padding: 14px;
display: flex;
flex-direction: column;
gap: 10px;
}
.mock-row {
display: flex;
align-items: center;
gap: 8px;
font-size: 11px;
color: var(--t3);
}
.mock-row span:first-child {
width: 28px;
font-weight: 600;
color: var(--t2);
}
.mock-track {
flex: 1;
height: 4px;
background: rgba(255,255,255,0.06);
border-radius: 2px;
overflow: hidden;
}
.mock-fill {
height: 100%;
border-radius: 2px;
}
.mock-row span:last-child {
width: 28px;
text-align: right;
font-size: 10px;
}
.mock-terminal {
padding: 10px 14px;
font-family: 'Courier New', monospace;
font-size: 11px;
color: var(--cyan);
background: rgba(34,211,238,0.04);
}
.mock-cursor {
animation: blink 1.2s step-end infinite;
}
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
/* Bento dashboard stats */
.bento-dash {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
.dash-stat {
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--r);
padding: 16px 14px;
}
.dash-num {
display: block;
font-family: 'Space Grotesk', system-ui, sans-serif;
font-size: 20px;
font-weight: 700;
letter-spacing: -0.5px;
}
.dash-lo {
display: block;
font-size: 11px;
color: var(--t2);
margin-top: 4px;
}
/* 12. PROCESS STEPS
--------------------------------------------------------------- */
.process-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.process-step {
position: relative;
padding: 36px 28px 36px 0;
border-top: 1px solid var(--border);
}
.process-step + .process-step {
padding-left: 28px;
border-left: 1px solid var(--border);
}
.process-step::before {
content: '';
position: absolute;
top: -1px;
left: 0;
height: 2px;
width: 0;
background: var(--grad);
border-radius: 1px;
transition: width 0.9s var(--ease);
}
.process-step.in-view::before {
width: 100%;
}
.step-num {
font-family: 'Space Grotesk', system-ui, sans-serif;
font-size: 42px;
font-weight: 700;
color: rgba(255,255,255,0.06);
letter-spacing: -3px;
line-height: 1;
margin-bottom: 20px;
user-select: none;
}
.process-step h3 {
font-family: 'Space Grotesk', system-ui, sans-serif;
font-size: 16px;
font-weight: 600;
margin-bottom: 10px;
letter-spacing: -0.2px;
}
.process-step p {
color: var(--t2);
font-size: 14px;
line-height: 1.7;
}
/* 13. CAMPUS CASE STUDY
--------------------------------------------------------------- */
.section-campus {
background: var(--bg-2);
}
.case-card {
display: grid;
grid-template-columns: 1fr 420px;
gap: 64px;
align-items: center;
}
.case-left h2 {
font-family: 'Space Grotesk', system-ui, sans-serif;
font-size: clamp(28px, 3.5vw, 42px);
font-weight: 700;
letter-spacing: -1.5px;
line-height: 1.15;
}
.case-left > p {
margin-top: 18px;
color: var(--t2);
font-size: 15px;
line-height: 1.8;
max-width: 480px;
}
.case-stats {
display: flex;
gap: 40px;
margin-top: 36px;
}
.case-stat {
display: flex;
flex-direction: column;
gap: 4px;
}
.stat-num {
font-family: 'Space Grotesk', system-ui, sans-serif;
font-size: 38px;
font-weight: 700;
letter-spacing: -1.5px;
line-height: 1;
color: var(--t1);
}
.stat-lo {
font-size: 11px;
color: var(--t3);
text-transform: uppercase;
letter-spacing: 0.8px;
font-weight: 500;
}
.campus-quote-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 32px;
}
.campus-logo-row {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 24px;
}
.campus-y-letter {
width: 40px;
height: 40px;
border-radius: var(--r);
background: rgba(34,211,238,0.1);
border: 1px solid rgba(34,211,238,0.22);
display: flex;
align-items: center;
justify-content: center;
font-family: 'Space Grotesk', system-ui, sans-serif;
font-size: 20px;
font-weight: 700;
color: var(--cyan);
flex-shrink: 0;
}
.campus-name {
display: block;
font-family: 'Space Grotesk', system-ui, sans-serif;
font-weight: 600;
font-size: 14px;
}
.campus-city {
display: block;
font-size: 12px;
color: var(--t2);
margin-top: 1px;
}
.campus-quote-card blockquote {
font-size: 14px;
line-height: 1.8;
color: var(--t2);
font-style: italic;
margin: 0 0 24px;
padding-left: 14px;
border-left: 2px solid rgba(34,211,238,0.3);
}
.campus-chips {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.campus-chips span {
font-size: 11px;
color: var(--t2);
border: 1px solid var(--border-h);
border-radius: var(--r-full);
padding: 4px 11px;
}
/* 14. BENEFITS GRID
--------------------------------------------------------------- */
.benefits-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.benefit-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 28px;
transition: border-color var(--duration) var(--ease),
transform var(--duration) var(--ease);
}
.benefit-card:hover {
border-color: var(--border-h);
transform: translateY(-2px);
}
.benefit-icon {
width: 44px;
height: 44px;
border-radius: var(--r);
background: color-mix(in srgb, var(--bi-c, var(--violet)) 10%, transparent);
border: 1px solid color-mix(in srgb, var(--bi-c, var(--violet)) 22%, transparent);
display: flex;
align-items: center;
justify-content: center;
color: var(--bi-c, var(--violet));
margin-bottom: 18px;
}
.benefit-card h3 {
font-family: 'Space Grotesk', system-ui, sans-serif;
font-size: 16px;
font-weight: 600;
margin-bottom: 8px;
letter-spacing: -0.2px;
}
.benefit-card p {
color: var(--t2);
font-size: 14px;
line-height: 1.65;
}
/* 15. TEAM
--------------------------------------------------------------- */
.team-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.team-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 28px 24px;
text-align: center;
transition: border-color var(--duration) var(--ease);
position: relative;
}
.team-filiere {
position: absolute;
bottom: -1px;
right: -1px;
width: 72px;
height: 72px;
border-radius: 0 0 var(--r-lg) 0;
object-fit: cover;
border-top: 1px solid rgba(255,255,255,0.12);
border-left: 1px solid rgba(255,255,255,0.12);
box-shadow: -4px -4px 16px rgba(0,0,0,0.3);
pointer-events: none;
}
.team-card:hover {
border-color: var(--border-h);
}
.team-avatar {
width: 64px;
height: 64px;
border-radius: 50%;
background: linear-gradient(135deg, var(--av-from, var(--cyan)), var(--av-to, var(--violet)));
display: flex;
align-items: center;
justify-content: center;
font-family: 'Space Grotesk', system-ui, sans-serif;
font-size: 18px;
font-weight: 700;
color: white;
margin: 0 auto 16px;
}
.team-name {
font-family: 'Space Grotesk', system-ui, sans-serif;
font-size: 15px;
font-weight: 600;
letter-spacing: -0.2px;
}
.team-role {
display: block;
font-size: 13px;
color: var(--t2);
margin-top: 4px;
}
.team-links {
display: flex;
justify-content: center;
gap: 8px;
margin-top: 16px;
}
.team-link {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--r-sm);
border: 1px solid var(--border);
color: var(--t2);
transition: all var(--duration) var(--ease);
}
.team-link:hover {
border-color: var(--border-h);
color: var(--t1);
background: rgba(255,255,255,0.05);
}
/* 16. SPONSORS MARQUEE
--------------------------------------------------------------- */
.hero-sponsors {
padding: 72px 0 0;
width: 100%;
align-self: stretch;
position: relative;
z-index: 1;
}
.sponsors-header {
display: flex;
align-items: center;
justify-content: center;
gap: 24px;
padding: 0 40px;
margin-bottom: 36px;
}
.sponsors-header::before,
.sponsors-header::after {
content: '';
flex: 1;
max-width: 100px;
height: 1px;
background: linear-gradient(to right, transparent, rgba(139,92,246,0.45));
}
.sponsors-header::after {
background: linear-gradient(to left, transparent, rgba(139,92,246,0.45));
}
.sponsors-label {
font-size: 11px;
background: linear-gradient(90deg, #22D3EE 0%, #8B5CF6 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
letter-spacing: 2.5px;
text-transform: uppercase;
font-weight: 600;
white-space: nowrap;
}
.sponsors-marquee-wrap {
overflow: hidden;
mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
-webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}
.sponsors-inner {
display: flex;
width: max-content;
animation: marquee 32s linear infinite;
will-change: transform;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
}
@media (prefers-reduced-motion: reduce) {
.sponsors-inner { animation: none; }
}
@keyframes marquee {
0% { transform: translate3d(0, 0, 0); }
100% { transform: translate3d(-25%, 0, 0); }
}
.sponsors-track {
display: flex;
align-items: center;
list-style: none;
margin: 0;
padding: 0;
flex-shrink: 0;
}
.sponsor-item {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 240px;
height: 80px;
}
.sponsor-logo-wrap {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
filter: brightness(0) invert(1);
opacity: 0.42;
transition: opacity 0.3s ease, filter 0.3s ease;
cursor: default;
}
.sponsor-logo-wrap:hover {
opacity: 0.9;
}
.sponsor-logo-advans {
filter: brightness(0) invert(1);
}
.sponsor-img {
height: 52px;
width: auto;
max-width: 180px;
object-fit: contain;
display: block;
user-select: none;
-webkit-user-drag: none;
}
.sponsor-img--ynov {
height: 52px;
max-width: 180px;
}
.sponsor-svg {
height: 38px;
width: auto;
max-width: 160px;
color: white;
}
/* 17. FAQ
--------------------------------------------------------------- */
.faq-list {
max-width: 720px;
}
.faq-item {
border-bottom: 1px solid var(--border);
}
.faq-q {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
padding: 22px 0;
font-family: 'Space Grotesk', system-ui, sans-serif;
font-size: 15px;
font-weight: 500;
color: var(--t1);
transition: color var(--duration) var(--ease);
user-select: none;
list-style: none;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q:hover {
color: var(--cyan);
}
.faq-toggle {
color: var(--t2);
flex-shrink: 0;
transition: transform var(--duration) var(--ease),
color var(--duration) var(--ease);
}
.faq-item[open] .faq-toggle {
transform: rotate(180deg);
color: var(--cyan);
}
.faq-a {
padding: 0 48px 22px 0;
color: var(--t2);
font-size: 14px;
line-height: 1.8;
}
/* 18. SPONSORS TIMELINE
--------------------------------------------------------------- */
.timeline {
display: flex;
flex-direction: column;
gap: 0;
max-width: 860px;
margin: 0 auto;
position: relative;
}
.timeline::before {
content: '';
position: absolute;
left: 88px;
top: 0;
bottom: 0;
width: 1px;
background: var(--border);
}
.timeline-item {
display: grid;
grid-template-columns: 88px 1fr;
gap: 0 28px;
padding: 0 0 40px;
position: relative;
}
.timeline-meta {
display: flex;
flex-direction: column;
align-items: flex-end;
padding-top: 22px;
gap: 6px;
position: relative;
}
.timeline-meta::after {
content: '';
position: absolute;
right: -35px;
top: 30px;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--cyan);
border: 2px solid var(--bg);
box-shadow: 0 0 0 1px var(--cyan);
}
.timeline-item--future .timeline-meta::after {
background: var(--border);
box-shadow: 0 0 0 1px var(--t3);
}
.timeline-date {
font-size: 12px;
font-weight: 600;
color: var(--t2);
letter-spacing: 0.5px;
}
.timeline-type {
font-size: 10px;
font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--cyan);
background: rgba(34, 211, 238, 0.08);
padding: 2px 6px;
border-radius: 4px;
border: 1px solid rgba(34, 211, 238, 0.2);
}
.timeline-type--open {
color: var(--t3);
background: rgba(255,255,255,0.04);
border-color: var(--border);
}
.timeline-card {
background: var(--glass);
border: 1px solid var(--border);
border-radius: 16px;
padding: 24px 28px;
display: flex;
align-items: flex-start;
gap: 20px;
transition: border-color var(--duration) var(--ease);
}
.timeline-card:hover {
border-color: rgba(34, 211, 238, 0.25);
}
.timeline-card--invite {
border-style: dashed;
background: rgba(255,255,255,0.02);
}
.timeline-card--invite:hover {
border-color: rgba(139, 92, 246, 0.4);
}
.timeline-logo {
flex-shrink: 0;
width: 64px;
height: 64px;
border-radius: 12px;
background: rgba(255,255,255,0.05);
border: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
padding: 10px;
}
.timeline-logo img {
width: 100%;
height: 100%;
object-fit: contain;
filter: brightness(0) invert(1);
opacity: 0.65;
}
.timeline-body {
flex: 1;
min-width: 0;
}
.timeline-body h3 {
font-size: 16px;
font-weight: 600;
color: var(--t1);
margin: 0 0 4px;
}
.timeline-contribution {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.5px;
color: var(--cyan);
margin: 0 0 8px;
}
.timeline-body p:not(.timeline-contribution) {
font-size: 14px;
color: var(--t2);
margin: 0;
line-height: 1.65;
}
/* 19. FINAL CTA
--------------------------------------------------------------- */
.cta-final {
padding: 100px 0;
position: relative;
overflow: hidden;
background: var(--bg-alt);
}
.cta-final::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 80% 120% at 50% 100%, rgba(139,92,246,0.14) 0%, transparent 65%),
radial-gradient(ellipse 60% 80% at 50% 0%, rgba(34,211,238,0.06) 0%, transparent 55%);
pointer-events: none;
}
.cta-inner {
position: relative;
max-width: 640px;
margin: 0 auto;
text-align: center;
}
.cta-inner p {
color: var(--t2);
font-size: 17px;
line-height: 1.7;
margin: 20px 0 36px;
}
/* 19. FOOTER
--------------------------------------------------------------- */
.footer {
padding: 64px 0 32px;
border-top: 1px solid var(--border);
}
.footer-grid {
display: grid;
grid-template-columns: 280px 1fr 1fr;
gap: 48px;
padding-bottom: 48px;
border-bottom: 1px solid var(--border);
}
.footer-logo {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 14px;
}
.footer-logo img {
width: 28px;
height: 28px;
}
.footer-logo span {
font-family: 'Space Grotesk', system-ui, sans-serif;
font-size: 13px;
font-weight: 700;
letter-spacing: 2.5px;
}
.footer-tagline {
font-size: 13px;
color: var(--t2);
line-height: 1.65;
margin-bottom: 20px;
max-width: 240px;
}
.footer-social {
display: flex;
gap: 8px;
}
.footer-soc-link {
width: 34px;
height: 34px;
border: 1px solid var(--border);
border-radius: var(--r-sm);
display: flex;
align-items: center;
justify-content: center;
color: var(--t2);
transition: all var(--duration) var(--ease);
}
.footer-soc-link:hover {
border-color: var(--border-h);
color: var(--t1);
background: rgba(255,255,255,0.04);
}
.footer-col-title {
font-family: 'Space Grotesk', system-ui, sans-serif;
font-size: 11px;
font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--t3);
margin-bottom: 18px;
}
.footer-links {
display: flex;
flex-direction: column;
gap: 12px;
}
.footer-link {
font-size: 14px;
color: var(--t2);
transition: color var(--duration) var(--ease);
}
.footer-link:hover {
color: var(--t1);
}
.footer-bottom {
padding-top: 24px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
.footer-copy {
font-size: 12px;
color: var(--t3);
}
/* 20. SCROLL REVEAL ANIMATIONS
--------------------------------------------------------------- */
.reveal {
opacity: 0;
transform: translateY(28px);
filter: blur(6px);
transition:
opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
filter 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.in-view {
opacity: 1;
transform: translateY(0);
filter: blur(0);
}
.no-js .reveal {
opacity: 1;
transform: none;
}
/* 23. COMPONENTS � Soon badge, Campus image, Team layout
----------------------------------------------------------------- */
.bento-title-row {
display: flex;
align-items: center;
gap: 10px;
}
.soon-badge {
font-size: 10px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
background: #831843;
border: 1px solid rgba(236, 72, 153, 0.55);
color: #ffffff;
padding: 3px 9px;
border-radius: 99px;
flex-shrink: 0;
}
.soon-overlay {
position: absolute;
top: -14px;
right: -14px;
z-index: 4;
width: 58px;
height: 58px;
border-radius: 50%;
background: #DC2626;
border: 2px solid rgba(255, 100, 100, 0.55);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
box-shadow: 0 4px 24px rgba(220, 38, 38, 0.55), 0 0 0 4px rgba(220, 38, 38, 0.15);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.75rem;
line-height: 1;
pointer-events: none;
user-select: none;
}
.campus-img-card {
position: relative;
border-radius: var(--r-lg);
overflow: hidden;
aspect-ratio: 4 / 3;
}
.campus-img {
width: 100%;
height: 100%;
object-fit: cover;
filter: blur(2px) brightness(0.35);
transform: scale(1.05);
}
.campus-img-overlay {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 28px;
gap: 16px;
text-decoration: none;
cursor: pointer;
transition: backdrop-filter .35s var(--ease), background .35s var(--ease);
}
a.campus-img-overlay:hover { background: rgba(8,10,24,0.18); }
a.campus-img-overlay:hover .campus-overlay-logo {
opacity: 1;
transform: scale(1.04);
}
.campus-overlay-logo {
height: 110px;
width: auto;
max-width: 80%;
filter: brightness(0) invert(1);
opacity: 0.92;
transition: opacity .35s var(--ease), transform .35s var(--ease);
}
/* Additional volets in #why */
#why .case-card + .case-card { margin-top: 72px; }
.case-card--reverse {
grid-template-columns: 420px 1fr;
}
.case-visual {
position: relative;
border-radius: var(--r-lg);
overflow: hidden;
aspect-ratio: 4 / 3;
border: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: center;
isolation: isolate;
}
.case-visual::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at 30% 30%, rgba(34,211,238,0.18) 0%, transparent 55%),
radial-gradient(circle at 75% 75%, rgba(139,92,246,0.22) 0%, transparent 55%);
z-index: 0;
}
.case-visual--pfe::before {
background:
radial-gradient(circle at 70% 30%, rgba(139,92,246,0.25) 0%, transparent 55%),
radial-gradient(circle at 30% 75%, rgba(34,211,238,0.22) 0%, transparent 55%);
}
/* ── Teaching visual — scrolling code lines + floating particles ─── */
.case-visual--teaching::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
background-image: repeating-linear-gradient(
0deg,
transparent 0px,
transparent 11px,
rgba(34,211,238,.05) 11px,
rgba(34,211,238,.05) 12px
);
animation: teach-lines 6s linear infinite;
}
@keyframes teach-lines {
from { background-position: 0 0; }
to { background-position: 0 -144px; }
}
.teach-particle {
position: absolute;
border-radius: 50%;
background: rgba(34,211,238,.75);
box-shadow: 0 0 6px rgba(34,211,238,.5), 0 0 12px rgba(34,211,238,.25);
opacity: 0;
pointer-events: none;
z-index: 0;
animation: teach-float linear infinite;
}
.teach-particle:nth-child(1) { width: 4px; height: 4px; left: 12%; bottom: -8px; animation-duration: 7s; animation-delay: 0s; }
.teach-particle:nth-child(2) { width: 6px; height: 6px; left: 30%; bottom: -8px; animation-duration: 9s; animation-delay: 1.2s; }
.teach-particle:nth-child(3) { width: 3px; height: 3px; left: 52%; bottom: -8px; animation-duration: 6s; animation-delay: 2.8s; }
.teach-particle:nth-child(4) { width: 5px; height: 5px; left: 70%; bottom: -8px; animation-duration: 8s; animation-delay: 0.6s; }
.teach-particle:nth-child(5) { width: 4px; height: 4px; left: 88%; bottom: -8px; animation-duration: 10s; animation-delay: 4s; }
@keyframes teach-float {
0% { transform: translateY(0) scale(1); opacity: 0; }
8% { opacity: 0.85; }
75% { opacity: 0.55; }
100% { transform: translateY(-280px) scale(0.3); opacity: 0; }
}
/* Radar sweep */
.case-visual--pfe::after {
content: '';
position: absolute;
inset: 0;
background: conic-gradient(
from 0deg at 50% 50%,
transparent 0deg,
rgba(34,211,238,.10) 20deg,
rgba(34,211,238,.04) 40deg,
transparent 40deg
);
animation: m2-radar 5s linear infinite;
z-index: 0;
pointer-events: none;
border-radius: inherit;
}
@keyframes m2-radar {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* Concentric pulse rings */
.m2-ring {
position: absolute;
top: 50%; left: 50%;
width: 120px; height: 120px;
margin: -60px 0 0 -60px;
border-radius: 50%;
border: 1px solid rgba(34,211,238,.45);
transform: scale(0.2);
opacity: 0;
pointer-events: none;
z-index: 0;
animation: m2-ring-pulse 4s ease-out infinite;
}
.m2-ring:nth-child(2) { animation-delay: 1.35s; }
.m2-ring:nth-child(3) { animation-delay: 2.70s; }
@keyframes m2-ring-pulse {
0% { transform: scale(0.2); opacity: 0.9; }
100% { transform: scale(3.2); opacity: 0; }
}
/* M2 quinconce cards */
.case-visual-inner--m2 {
position: relative;
z-index: 1;
width: 88%;
display: flex;
flex-direction: column;
gap: 0;
padding: 16px 0;
}
.m2-card {
background: transparent;
border-radius: 16px;
overflow: hidden;
position: relative;
width: 72%;
transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.m2-card img {
width: 100%;
height: auto;
display: block;
border-radius: 16px;
}
.m2-card--cyber {
align-self: flex-start;
border-color: rgba(139,92,246,0.35);
box-shadow: 0 8px 32px -8px rgba(139,92,246,0.3);
}
.m2-card--infra {
align-self: flex-end;
margin-top: 16px;
border-color: rgba(34,211,238,0.35);
box-shadow: 0 8px 32px -8px rgba(34,211,238,0.3);
}
.m2-card:hover { transform: translateY(-3px); }
.m2-card-body {
flex: 1;
display: flex;
flex-direction: column;
gap: 3px;
}
.m2-card-label {
font-family: 'Space Grotesk', sans-serif;
font-size: 14px;
font-weight: 700;
color: var(--t1);
letter-spacing: -0.2px;
}
.m2-card-sub {
font-size: 11.5px;
color: var(--t3);
letter-spacing: 0.02em;
}
.m2-card-badge {
font-family: 'Space Grotesk', sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.1em;
padding: 3px 9px;
border-radius: 999px;
border: 1px solid;
}
.m2-card--cyber .m2-card-badge { color: #a78bfa; border-color: rgba(139,92,246,0.5); background: #1a0c3d; }
.m2-card--infra .m2-card-badge { color: #22D3EE; border-color: rgba(34,211,238,0.5); background: #042a31; }
.case-visual-inner {
position: relative;
z-index: 1;
width: 62%;
filter: drop-shadow(0 8px 32px rgba(34,211,238,0.25));
}
.case-visual-inner svg { width: 100%; height: auto; display: block; }
@media (max-width: 1023px) {
.case-card--reverse { grid-template-columns: 1fr; }
.case-card--reverse .case-visual { order: -1; max-width: 420px; margin: 0 auto; width: 100%; }
}
/* Ydays featured benefit card */
.ydays-img-card {
position: relative;
border-radius: var(--r-lg);
overflow: hidden;
aspect-ratio: 4 / 3;
background: radial-gradient(ellipse at 60% 35%, rgba(139,92,246,0.28) 0%, rgba(8,10,24,0.96) 68%);
border: 1px solid rgba(139,92,246,0.25);
display: flex;
align-items: center;
justify-content: center;
}
/* Stars layer 1 — slow twinkle */
.ydays-img-card::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
background-image:
radial-gradient(1.5px 1.5px at 8% 12%, rgba(255,255,255,.90) 0%, transparent 100%),
radial-gradient(1px 1px at 22% 7%, rgba(255,255,255,.60) 0%, transparent 100%),
radial-gradient(1px 1px at 38% 22%, rgba(255,255,255,.70) 0%, transparent 100%),
radial-gradient(2px 2px at 55% 8%, rgba(200,180,255,.90) 0%, transparent 100%),
radial-gradient(1px 1px at 70% 18%, rgba(255,255,255,.50) 0%, transparent 100%),
radial-gradient(1.5px 1.5px at 85% 10%, rgba(255,255,255,.80) 0%, transparent 100%),
radial-gradient(1px 1px at 92% 25%, rgba(255,255,255,.60) 0%, transparent 100%),
radial-gradient(1px 1px at 15% 35%, rgba(255,255,255,.50) 0%, transparent 100%),
radial-gradient(2px 2px at 45% 42%, rgba(200,180,255,.70) 0%, transparent 100%),
radial-gradient(1px 1px at 78% 38%, rgba(255,255,255,.60) 0%, transparent 100%),
radial-gradient(1.5px 1.5px at 5% 55%, rgba(255,255,255,.70) 0%, transparent 100%),
radial-gradient(1px 1px at 30% 62%, rgba(255,255,255,.50) 0%, transparent 100%),
radial-gradient(1px 1px at 62% 58%, rgba(255,255,255,.60) 0%, transparent 100%),
radial-gradient(2px 2px at 88% 65%, rgba(200,180,255,.80) 0%, transparent 100%),
radial-gradient(1px 1px at 18% 78%, rgba(255,255,255,.50) 0%, transparent 100%),
radial-gradient(1.5px 1.5px at 50% 82%, rgba(255,255,255,.70) 0%, transparent 100%),
radial-gradient(1px 1px at 72% 75%, rgba(255,255,255,.40) 0%, transparent 100%),
radial-gradient(1px 1px at 95% 88%, rgba(255,255,255,.60) 0%, transparent 100%),
radial-gradient(2px 2px at 35% 90%, rgba(200,180,255,.70) 0%, transparent 100%),
radial-gradient(1px 1px at 12% 95%, rgba(255,255,255,.50) 0%, transparent 100%);
animation: ydays-stars-1 7s ease-in-out infinite alternate;
}
/* Stars layer 2 — offset twinkle */
.ydays-img-card::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
background-image:
radial-gradient(1px 1px at 42% 5%, rgba(255,255,255,.70) 0%, transparent 100%),
radial-gradient(2px 2px at 65% 14%, rgba(200,180,255,.90) 0%, transparent 100%),
radial-gradient(1.5px 1.5px at 82% 28%, rgba(255,255,255,.60) 0%, transparent 100%),
radial-gradient(1px 1px at 28% 48%, rgba(255,255,255,.50) 0%, transparent 100%),
radial-gradient(1px 1px at 57% 52%, rgba(255,255,255,.70) 0%, transparent 100%),
radial-gradient(2px 2px at 10% 68%, rgba(200,180,255,.80) 0%, transparent 100%),
radial-gradient(1px 1px at 48% 72%, rgba(255,255,255,.50) 0%, transparent 100%),
radial-gradient(1.5px 1.5px at 75% 85%, rgba(255,255,255,.70) 0%, transparent 100%),
radial-gradient(1px 1px at 20% 22%, rgba(255,255,255,.60) 0%, transparent 100%),
radial-gradient(1px 1px at 90% 45%, rgba(255,255,255,.50) 0%, transparent 100%),
radial-gradient(2px 2px at 33% 70%, rgba(200,180,255,.70) 0%, transparent 100%),
radial-gradient(1px 1px at 60% 30%, rgba(255,255,255,.60) 0%, transparent 100%);
animation: ydays-stars-2 11s ease-in-out infinite alternate;
}
@keyframes ydays-stars-1 {
0% { opacity: 0.45; }
50% { opacity: 1; }
100% { opacity: 0.55; }
}
@keyframes ydays-stars-2 {
0% { opacity: 0.80; }
60% { opacity: 0.25; }
100% { opacity: 0.95; }
}
/* Shooting stars — technique: Delroy Prithvi, MIT licence */
.ydays-shoot {
position: absolute;
width: 4px;
height: 4px;
background: #fff;
border-radius: 50%;
box-shadow: 0 0 0 4px rgba(255,255,255,.10),
0 0 0 8px rgba(255,255,255,.10),
0 0 20px rgba(255,255,255,.10);
animation: ydays-shoot linear infinite;
pointer-events: none;
z-index: 0;
}
.ydays-shoot::before {
content: '';
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 150px;
height: 1px;
background: linear-gradient(90deg, #fff, transparent);
}
.ydays-shoot:nth-child(1) { top: 0; right: 0; left: initial; animation-delay: 0s; animation-duration: 1s; }
.ydays-shoot:nth-child(2) { top: 0; right: 80px; left: initial; animation-delay: 0.4s; animation-duration: 2.5s; }
.ydays-shoot:nth-child(3) { top: 60px; right: 0; left: initial; animation-delay: 0.9s; animation-duration: 1.75s; }
@keyframes ydays-shoot {
0% { transform: rotate(315deg) translateX(0); opacity: 1; }
70% { opacity: 1; }
100% { transform: rotate(315deg) translateX(-500px); opacity: 0; }
}
.ydays-img {
width: 72%;
height: auto;
object-fit: contain;
position: relative;
z-index: 1;
filter: drop-shadow(0 0 28px rgba(139,92,246,0.45)) brightness(1.05);
}
.benefit-ydays-card:hover { border-color: rgba(139,92,246,0.6); }
.ydays-card-left {
display: flex;
align-items: flex-start;
gap: 24px;
flex: 1;
}
.ydays-klouders-logo {
width: 52px;
height: 52px;
object-fit: contain;
flex-shrink: 0;
}
.ydays-card-copy h3 {
font-family: 'Space Grotesk', system-ui, sans-serif;
font-size: 20px;
font-weight: 700;
margin-bottom: 12px;
letter-spacing: -0.3px;
}
.ydays-card-copy p {
color: var(--t2);
font-size: 14px;
line-height: 1.7;
max-width: 560px;
}
.ydays-card-stats {
display: flex;
flex-direction: column;
gap: 20px;
flex-shrink: 0;
min-width: 130px;
border-left: 1px solid var(--border);
padding-left: 36px;
}
.ydays-stat {
display: flex;
flex-direction: column;
gap: 3px;
}
.ydays-stat-num {
font-family: 'Space Grotesk', system-ui, sans-serif;
font-size: 22px;
font-weight: 700;
letter-spacing: -0.5px;
}
.ydays-stat-lo {
font-size: 11px;
color: var(--t3);
text-transform: uppercase;
letter-spacing: 0.8px;
}
.team-group-label {
text-align: center;
font-size: 11px;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--t3);
margin: 0 0 14px;
}
/* Organigramme :
Les deux niveaux partagent la m�me grille 3-colonnes pour que les
centres de cards s'alignent parfaitement (1/6, 3/6, 5/6).
- Niveau r�f�rents : 2 cards en colonnes 1 et 3.
- Niveau chefs de projets : 3 cards (cols 1, 2, 3).
Les ponts SVG (preserveAspectRatio="none") tracent les liens en %. */
.org-chart {
--org-line-top: rgba(139, 92, 246, 0.55);
--org-line-bot: rgba(34, 211, 238, 0.55);
display: flex;
flex-direction: column;
align-items: stretch;
margin: 0 auto;
max-width: 980px;
}
.team-founders,
.team-delegates {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin: 0;
max-width: none;
}
.team-founders > .team-card:nth-child(1) { grid-column: 1; }
.team-founders > .team-card:nth-child(2) { grid-column: 3; }
.org-bridge {
display: block;
width: 100%;
height: 28px;
fill: none;
overflow: visible;
}
.org-bridge--top {
stroke: var(--org-line-top);
}
.org-bridge--bot { stroke: var(--org-line-bot); }
.org-bridge line {
stroke-width: 1;
vector-effect: non-scaling-stroke;
}
.org-chip {
align-self: center;
display: inline-flex;
align-items: center;
padding: 6px 14px;
font-size: 11px;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--t2);
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--border);
border-radius: 999px;
margin: 0;
}
.inline-link {
color: var(--cyan);
text-decoration: underline;
text-decoration-color: rgba(34, 211, 238, 0.45);
text-underline-offset: 3px;
transition: color var(--duration) var(--ease);
}
.inline-link:hover { color: #67e8f9; text-decoration-color: #67e8f9; }
--------------------------------------------------------------- */
.iso-scene-wrap {
width: 460px;
height: 460px;
flex-shrink: 0;
position: relative;
}
.iso-scene {
width: 100%;
height: 100%;
overflow: visible;
}
.iso-cloud-node {
transform-box: fill-box;
transform-origin: center;
animation: iso-float 4s ease-in-out infinite;
}
.iso-shield {
animation: iso-shield-float 5.5s ease-in-out infinite 0.8s;
}
@keyframes iso-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-9px); }
}
@keyframes iso-shield-float {
0%, 100% { transform: translate(163px, 215px); }
50% { transform: translate(163px, 206px); }
}
.iso-led { animation: iso-led-blink 3s ease-in-out infinite; }
.iso-led-2 { animation: iso-led-blink 2.4s ease-in-out infinite 0.4s; }
.iso-led-3 { animation: iso-led-blink 3.6s ease-in-out infinite 1.2s; }
@keyframes iso-led-blink {
0%, 60%, 100% { opacity: 1; }
70%, 90% { opacity: 0.1; }
80% { opacity: 0.6; }
}
.iso-cable { animation: iso-dash 3.5s linear infinite; }
.iso-cable-2 { animation: iso-dash 2.8s linear infinite 0.5s; }
.iso-cable-3 { animation: iso-dash 4.5s linear infinite 1s; }
.iso-cable-4 { animation: iso-dash 3.8s linear infinite 1.5s; }
.iso-cable-5 { animation: iso-dash 2.5s linear infinite 0.3s; }
@keyframes iso-dash { to { stroke-dashoffset: -36; } }
circle.iso-p1, circle.iso-p2, circle.iso-p3,
circle.iso-p4, circle.iso-p5, circle.iso-p6,
circle.iso-p7, circle.iso-p8 {
transform-box: fill-box;
transform-origin: center;
}
circle.iso-p1 { animation: iso-ptcl 4.5s ease-in-out infinite; }
circle.iso-p2 { animation: iso-ptcl 5.5s ease-in-out infinite 0.6s; }
circle.iso-p3 { animation: iso-ptcl 4.8s ease-in-out infinite 1.2s; }
circle.iso-p4 { animation: iso-ptcl 6s ease-in-out infinite 0.3s; }
circle.iso-p5 { animation: iso-ptcl 5.2s ease-in-out infinite 1.8s; }
circle.iso-p6 { animation: iso-ptcl 4.2s ease-in-out infinite 2.4s; }
circle.iso-p7 { animation: iso-ptcl 5.8s ease-in-out infinite 0.9s; }
circle.iso-p8 { animation: iso-ptcl 4s ease-in-out infinite 1.5s; }
@keyframes iso-ptcl {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-14px); opacity: 0.1; }
}
.iso-fd1 { animation: iso-fd1-move 2.8s ease-in-out infinite; }
.iso-fd2 { animation: iso-fd2-move 2.2s ease-in-out infinite 0.7s; }
.iso-fd3 { animation: iso-fd3-move 3.2s ease-in-out infinite 1.4s; }
@keyframes iso-fd1-move {
0% { transform: translate(200px,338px); opacity: 0; }
8% { opacity: 1; }
92% { opacity: 0.85; }
100% { transform: translate(214px,373px); opacity: 0; }
}
@keyframes iso-fd2-move {
0% { transform: translate(228px,340px); opacity: 0; }
8% { opacity: 1; }
92% { opacity: 0.85; }
100% { transform: translate(228px,373px); opacity: 0; }
}
@keyframes iso-fd3-move {
0% { transform: translate(305px,328px); opacity: 0; }
8% { opacity: 1; }
92% { opacity: 0.85; }
100% { transform: translate(246px,372px); opacity: 0; }
}
.iso-rack-1 { animation: iso-shimmer 8s ease-in-out infinite; }
.iso-rack-2 { animation: iso-shimmer 8s ease-in-out infinite 1s; }
.iso-rack-3 { animation: iso-shimmer 8s ease-in-out infinite 2s; }
.iso-rack-4 { animation: iso-shimmer 8s ease-in-out infinite 3s; }
@keyframes iso-shimmer {
0%, 100% { opacity: 1; }
50% { opacity: 0.88; }
}
/* 22. RESPONSIVE
--------------------------------------------------------------- */
/* Tablet: 768px � 1023px */
@media (max-width: 1023px) {
.hero-grid { grid-template-columns: 1fr; gap: 56px; }
.hero-copy { max-width: 100%; }
.hero-visual { justify-content: center; }
.iso-scene-wrap { width: 380px; height: 380px; }
.bento-card--large { grid-column: span 6; }
.bento-card--wide { grid-column: span 6; grid-template-columns: 1fr; gap: 20px; }
.bento-card:not(.bento-card--large):not(.bento-card--wide) { grid-column: span 3; }
.bento-dash { grid-template-columns: repeat(2, 1fr); }
.process-grid { grid-template-columns: repeat(2, 1fr); }
.process-step + .process-step { border-left: none; padding-left: 0; }
.process-step:nth-child(n+3) { border-top: none; padding-top: 0; margin-top: 24px; }
.process-step:nth-child(2n) { border-left: 1px solid var(--border); padding-left: 28px; }
.case-card { grid-template-columns: 1fr; gap: 36px; }
.case-left > p { max-width: 100%; }
.benefits-grid { grid-template-columns: repeat(2, 1fr); }
.team-founders,
.team-delegates { grid-template-columns: 1fr; gap: 18px; }
.team-founders > .team-card:nth-child(1),
.team-founders > .team-card:nth-child(2) { grid-column: auto; }
.org-bridge { display: none; }
.org-chip { margin: 18px auto; }
.timeline::before { left: 72px; }
.timeline-item { grid-template-columns: 72px 1fr; }
.timeline-meta::after { right: -27px; }
.footer-grid { grid-template-columns: 1fr 1fr; }
.footer-brand { grid-column: span 2; }
}
/* Mobile: < 768px */
@media (max-width: 767px) {
:root { --px: 18px; }
.section { padding: 72px 0; }
.h-display { letter-spacing: -1.5px; }
.h-section { letter-spacing: -1px; }
/* Navbar mobile */
.hamburger { display: flex; }
.nav-links {
display: none;
position: fixed;
inset: 64px 0 0;
background: rgba(8,10,24,0.97);
backdrop-filter: blur(20px);
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
z-index: 99;
}
.nav-links.nav-open { display: flex; }
.nav-link { font-size: 20px; padding: 12px 24px; }
.nav-cta { display: none; }
.nav-support { display: none; }
/* Hero */
.hero { padding: 88px 0 60px; min-height: auto; }
.hero-grid { grid-template-columns: 1fr; gap: 40px; }
.hero-visual { display: none; }
.hero-sub { font-size: 15px; }
.hero-actions { gap: 10px; }
.hero-actions .btn { flex: 1; justify-content: center; }
/* Bold hero overrides */
.hero--bold { padding: 0; }
.hero--bold .hero-container { padding: 72px 16px 40px; }
.hero--bold .hero-title { letter-spacing: -1.5px; }
.hero-eyebrow { font-size: 12px; padding: 7px 14px 7px 12px; }
.hero-stats { grid-template-columns: repeat(2, 1fr); margin-top: 56px; gap: 24px 12px; }
.hero-scroll { display: none; }
/* Bento */
.bento { grid-template-columns: 1fr; gap: 12px; }
.bento-card,
.bento-card--large,
.bento-card--wide { grid-column: span 1; display: flex; flex-direction: column; gap: 16px; }
.bento-card--large { grid-template-columns: 1fr; }
.bento-card--wide { grid-template-columns: 1fr; }
.bento-dash { grid-template-columns: repeat(2, 1fr); }
/* Process */
.process-grid { grid-template-columns: 1fr; }
.process-step { padding: 28px 0; border-left: none !important; padding-left: 0 !important; }
.process-step:nth-child(n+3) { border-top: 1px solid var(--border) !important; padding-top: 28px !important; margin-top: 0 !important; }
/* Campus */
.case-card { grid-template-columns: 1fr; gap: 28px; }
.case-stats { gap: 24px; }
.stat-num { font-size: 30px; }
/* Benefits */
.benefits-grid { grid-template-columns: 1fr; }
.benefit-ydays-card { flex-direction: column; gap: 24px; }
.ydays-card-left { flex-direction: column; }
.ydays-card-stats { border-left: none; border-top: 1px solid var(--border); padding-left: 0; padding-top: 20px; flex-direction: row; flex-wrap: wrap; gap: 16px; }
/* Team */
.team-founders,
.team-delegates { grid-template-columns: 1fr; gap: 18px; }
.team-founders > .team-card:nth-child(1),
.team-founders > .team-card:nth-child(2) { grid-column: auto; }
.org-bridge { display: none; }
.org-chip { margin: 18px auto; }
.timeline::before { display: none; }
.timeline-item { grid-template-columns: 1fr; gap: 10px; }
.timeline-meta { flex-direction: row; align-items: center; padding-top: 0; }
.timeline-meta::after { display: none; }
.timeline-card { flex-direction: column; gap: 14px; }
/* Footer */
.footer-grid { grid-template-columns: 1fr; gap: 32px; }
.footer-brand { grid-column: span 1; }
.footer-bottom { flex-direction: column; text-align: center; }
}
/* Small mobile: < 480px */
@media (max-width: 479px) {
.team-founders,
.team-delegates { grid-template-columns: 1fr; }
.org-bridge { display: none; }
.trust-logos { gap: 12px; }
.case-stats { flex-direction: column; gap: 16px; }
}
/* ---------------------------------------------------------------------
20. SPONSORS PAGE � header, hardware, alternating timeline, animations
--------------------------------------------------------------------- */
/* Solid navbar variant for sub-pages */
.navbar--solid {
background: rgba(8, 10, 24, 0.85);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-bottom: 1px solid var(--border);
}
.nav-link--active {
color: var(--t1);
position: relative;
}
.nav-link--active::after {
content: '';
position: absolute;
left: 50%;
bottom: -6px;
width: 18px;
height: 2px;
border-radius: 2px;
background: linear-gradient(90deg, var(--cyan), var(--violet));
transform: translateX(-50%);
}
/* Page header */
.page-header {
position: relative;
padding: 160px 0 80px;
overflow: hidden;
background: var(--bg);
}
.page-header-glow {
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(800px 400px at 20% 10%, rgba(34, 211, 238, 0.10), transparent 60%),
radial-gradient(700px 360px at 85% 20%, rgba(139, 92, 246, 0.10), transparent 60%);
z-index: 0;
}
.page-header > .container { position: relative; z-index: 1; max-width: 880px; }
/* Floating back pill (replaces inline back-link) */
.back-pill {
position: fixed;
top: 84px;
left: 24px;
z-index: 90;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 16px 9px 12px;
font-size: 13px;
font-weight: 500;
color: var(--t2);
text-decoration: none;
background: rgba(8, 10, 24, 0.6);
border: 1px solid var(--border);
border-radius: 999px;
backdrop-filter: blur(14px) saturate(160%);
-webkit-backdrop-filter: blur(14px) saturate(160%);
opacity: 0;
transform: translateX(-12px);
pointer-events: none;
transition:
opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
color 0.3s ease,
border-color 0.3s ease,
background 0.3s ease;
}
.back-pill.is-visible {
opacity: 1;
transform: translateX(0);
pointer-events: auto;
}
.back-pill:hover {
color: var(--t1);
border-color: rgba(34, 211, 238, 0.4);
background: rgba(8, 10, 24, 0.85);
}
.back-pill svg {
transition: transform 0.3s ease;
}
.back-pill:hover svg {
transform: translateX(-3px);
}
@media (max-width: 767px) {
.back-pill { top: 72px; left: 12px; padding: 8px 14px 8px 10px; font-size: 12px; }
}
.page-eyebrow,
.section-eyebrow {
font-size: 11px;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--cyan);
margin: 0 0 14px;
display: inline-block;
padding: 4px 10px;
background: rgba(34, 211, 238, 0.08);
border: 1px solid rgba(34, 211, 238, 0.2);
border-radius: 999px;
}
.page-sub {
font-size: 17px;
color: var(--t2);
line-height: 1.7;
max-width: 640px;
margin-top: 22px;
}
/* Hardware grid */
.hardware-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: 16px;
}
.hw-card {
position: relative;
background: var(--glass);
border: 1px solid var(--border);
border-radius: 18px;
padding: 28px;
overflow: hidden;
transition: transform var(--duration) var(--ease),
border-color var(--duration) var(--ease),
box-shadow var(--duration) var(--ease);
}
.hw-card:hover {
transform: translateY(-4px);
border-color: rgba(34, 211, 238, 0.3);
box-shadow: 0 20px 50px -20px rgba(34, 211, 238, 0.18);
}
.hw-card-glow {
position: absolute;
top: -40%;
right: -20%;
width: 60%;
height: 70%;
background: radial-gradient(circle, rgba(139, 92, 246, 0.18), transparent 70%);
filter: blur(40px);
pointer-events: none;
opacity: 0;
transition: opacity 0.5s var(--ease);
}
.hw-card:hover .hw-card-glow { opacity: 1; }
.hw-card-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 18px;
position: relative;
z-index: 1;
}
.hw-icon {
width: 44px;
height: 44px;
border-radius: 12px;
background: linear-gradient(135deg, rgba(34, 211, 238, 0.15), rgba(139, 92, 246, 0.15));
border: 1px solid rgba(34, 211, 238, 0.25);
display: flex;
align-items: center;
justify-content: center;
color: var(--cyan);
transition: transform 0.5s var(--ease);
}
.hw-card:hover .hw-icon { transform: rotate(-6deg) scale(1.05); }
.hw-date {
font-size: 11px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--t3);
}
.hw-title {
font-family: 'Space Grotesk', sans-serif;
font-size: 22px;
font-weight: 600;
color: var(--t1);
margin: 0 0 6px;
position: relative;
z-index: 1;
}
.hw-donor {
font-size: 13px;
color: var(--t2);
margin: 0 0 14px;
position: relative;
z-index: 1;
}
.hw-donor strong { color: var(--t1); font-weight: 600; }
.hw-desc {
font-size: 14px;
color: var(--t2);
line-height: 1.65;
margin: 0 0 22px;
position: relative;
z-index: 1;
}
.hw-specs {
display: flex;
flex-wrap: wrap;
gap: 10px;
position: relative;
z-index: 1;
}
.hw-spec {
flex: 1 1 auto;
min-width: 90px;
padding: 10px 12px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--border);
border-radius: 10px;
display: flex;
flex-direction: column;
gap: 2px;
}
.hw-spec-num {
font-family: 'Space Grotesk', sans-serif;
font-size: 18px;
font-weight: 700;
color: var(--t1);
background: linear-gradient(90deg, var(--cyan), var(--violet));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.hw-spec-lo {
font-size: 11px;
color: var(--t3);
letter-spacing: 0.3px;
}
/* -- Alternating timeline (used on /SPONSORS) -- */
.page-sponsors .timeline {
max-width: 1040px;
}
.page-sponsors .timeline::before {
left: 50%;
transform: translateX(-50%);
background: linear-gradient(to bottom,
transparent,
rgba(34, 211, 238, 0.3) 8%,
rgba(139, 92, 246, 0.3) 92%,
transparent);
}
.page-sponsors .timeline-item {
grid-template-columns: 1fr 1fr;
gap: 0 60px;
padding-bottom: 50px;
}
.page-sponsors .timeline-item--left .timeline-meta {
grid-column: 1;
align-items: flex-end;
text-align: right;
}
.page-sponsors .timeline-item--left .timeline-card {
grid-column: 2;
}
.page-sponsors .timeline-item--right .timeline-meta {
grid-column: 2;
align-items: flex-start;
text-align: left;
order: 2;
}
.page-sponsors .timeline-item--right .timeline-card {
grid-column: 1;
order: 1;
}
.page-sponsors .timeline-item .timeline-meta::after {
right: auto;
left: 50%;
top: 24px;
transform: translateX(-50%);
}
.page-sponsors .timeline-item--left .timeline-meta::after {
right: -36px;
left: auto;
transform: none;
}
.page-sponsors .timeline-item--right .timeline-meta::after {
left: -36px;
right: auto;
transform: none;
}
/* Logo text fallback for missing Transvalor png */
.timeline-logo-text,
.sponsor-text {
font-family: 'Space Grotesk', sans-serif;
font-weight: 700;
font-size: 13px;
letter-spacing: 2px;
color: var(--t2);
white-space: nowrap;
}
.sponsor-text { font-size: 18px; opacity: 0.6; }
/* ---------------------------------------------------------------------
21. ANIMATIONS
--------------------------------------------------------------------- */
/* Hardware cards: fade-up + slight scale */
.hw-card.reveal {
opacity: 0;
transform: translateY(28px) scale(0.97);
transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.hw-card.reveal.in-view {
opacity: 1;
transform: translateY(0) scale(1);
}
.hardware-grid .hw-card:nth-child(1) { transition-delay: 0s; }
.hardware-grid .hw-card:nth-child(2) { transition-delay: 0.12s; }
.hardware-grid .hw-card:nth-child(3) { transition-delay: 0.24s; }
/* Timeline items: slide from sides on the alternating layout */
.page-sponsors .timeline-item.reveal {
opacity: 0;
transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.page-sponsors .timeline-item--left.reveal { transform: translateX(-40px); }
.page-sponsors .timeline-item--right.reveal { transform: translateX(40px); }
.page-sponsors .timeline-item.reveal.in-view {
opacity: 1;
transform: translateX(0);
}
/* Pulse on the active timeline dot */
@keyframes timeline-dot-pulse {
0%, 100% { box-shadow: 0 0 0 1px var(--cyan), 0 0 0 0 rgba(34, 211, 238, 0.5); }
50% { box-shadow: 0 0 0 1px var(--cyan), 0 0 0 8px rgba(34, 211, 238, 0); }
}
.page-sponsors .timeline-item:not(.timeline-item--future) .timeline-meta::after {
animation: timeline-dot-pulse 2.4s ease-in-out infinite;
}
/* Subtle floating glow on hw icons */
@keyframes hw-icon-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-3px); }
}
.hw-card .hw-icon {
animation: hw-icon-float 3.5s ease-in-out infinite;
}
.hw-card:nth-child(2) .hw-icon { animation-delay: -1s; }
.hw-card:nth-child(3) .hw-icon { animation-delay: -2s; }
/* Title gradient � one-shot reveal sweep (Apple-style) */
@keyframes grad-reveal {
0% { background-position: 200% 50%; filter: brightness(0.7); }
60% { filter: brightness(1.15); }
100% { background-position: 0% 50%; filter: brightness(1); }
}
.page-header .grad,
.section-head .grad,
.cta-inner .grad {
background-size: 200% 100%;
background-position: 0% 50%;
}
.page-header .h-display.in-view .grad,
.section-head .h-section.in-view .grad,
.cta-inner .h-section.in-view .grad {
animation: grad-reveal 1.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}
/* Reduced motion: kill animations */
@media (prefers-reduced-motion: reduce) {
.hw-card .hw-icon,
.page-sponsors .timeline-item:not(.timeline-item--future) .timeline-meta::after,
.page-header .h-display.in-view .grad,
.section-head .h-section.in-view .grad,
.cta-inner .h-section.in-view .grad {
animation: none;
}
.page-sponsors .timeline-item--left.reveal,
.page-sponsors .timeline-item--right.reveal {
transform: none;
}
}
/* Responsive � SPONSORS page */
@media (max-width: 980px) {
.hardware-grid { grid-template-columns: 1fr; max-width: 560px; margin-left: auto; margin-right: auto; }
/* Collapse alternating timeline back to single column */
.page-sponsors .timeline { max-width: 720px; }
.page-sponsors .timeline::before {
left: 88px;
transform: none;
background: var(--border);
}
.page-sponsors .timeline-item,
.page-sponsors .timeline-item--left,
.page-sponsors .timeline-item--right {
grid-template-columns: 88px 1fr;
gap: 0 28px;
}
.page-sponsors .timeline-item--left .timeline-meta,
.page-sponsors .timeline-item--right .timeline-meta {
grid-column: 1;
align-items: flex-end;
text-align: right;
order: 0;
}
.page-sponsors .timeline-item--left .timeline-card,
.page-sponsors .timeline-item--right .timeline-card {
grid-column: 2;
order: 0;
}
.page-sponsors .timeline-item .timeline-meta::after,
.page-sponsors .timeline-item--left .timeline-meta::after,
.page-sponsors .timeline-item--right .timeline-meta::after {
right: -35px;
left: auto;
top: 30px;
transform: none;
}
.page-sponsors .timeline-item--left.reveal,
.page-sponsors .timeline-item--right.reveal {
transform: translateY(28px);
}
.page-sponsors .timeline-item--left.reveal.in-view,
.page-sponsors .timeline-item--right.reveal.in-view {
transform: translateY(0);
}
}
@media (max-width: 767px) {
.page-header { padding: 130px 0 60px; }
.page-sponsors .timeline::before { display: none; }
.page-sponsors .timeline-item,
.page-sponsors .timeline-item--left,
.page-sponsors .timeline-item--right {
grid-template-columns: 1fr;
gap: 10px;
}
.page-sponsors .timeline-item--left .timeline-meta,
.page-sponsors .timeline-item--right .timeline-meta {
flex-direction: row;
align-items: center;
text-align: left;
padding-top: 0;
}
.page-sponsors .timeline-item .timeline-meta::after,
.page-sponsors .timeline-item--left .timeline-meta::after,
.page-sponsors .timeline-item--right .timeline-meta::after {
display: none;
}
}
/* ---------------------------------------------------------------------
22. RACK VISUALIZATION (42U, color-coded, side legend)
--------------------------------------------------------------------- */
.rack-stage {
display: grid;
grid-template-columns: minmax(280px, 380px) 1fr;
gap: 56px;
align-items: start;
margin-top: 16px;
}
/* Centered rack with legends on each side */
.rack-stage--centered {
--u-h: 20px;
grid-template-columns: minmax(220px, 290px) minmax(320px, 440px) minmax(220px, 290px);
gap: 36px;
justify-content: center;
align-items: start;
width: 100%;
max-width: 1180px;
margin-left: auto;
margin-right: auto;
}
.rack-stage--centered .rack { margin: 0 auto; }
.rack-stage--centered .rack-legend--left .rack-legend-item { text-align: right; grid-template-columns: 1fr 12px; }
.rack-stage--centered .rack-legend--left .legend-swatch { order: 2; }
.rack-stage--centered .rack-legend--left .legend-body { order: 1; }
.rack-stage--centered .rack-legend--left .rack-legend-item:hover { transform: translateX(-4px); }
@media (max-width: 1023px) {
.rack-stage--centered {
grid-template-columns: 1fr;
gap: 32px;
}
.rack-stage--centered .rack-legend--left .rack-legend-item { text-align: left; grid-template-columns: 12px 1fr; }
.rack-stage--centered .rack-legend--left .legend-swatch { order: 0; }
.rack-stage--centered .rack-legend--left .legend-body { order: 0; }
.rack-stage--centered .rack-legend--left .rack-legend-item:hover { transform: translateX(4px); }
}
/* -- Rack frame -- */
.rack {
--u-h: 20px;
--rack-cyan: #22D3EE;
--rack-violet: #8B5CF6;
--rack-magenta: #EC4899;
--rack-amber: #F59E0B;
--rack-emerald: #10B981;
--rack-red: #EF4444;
position: relative;
width: 100%;
max-width: 100%;
padding: 18px 18px 0;
background:
linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
border: 1px solid rgba(255,255,255,0.08);
border-radius: 14px 14px 4px 4px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.05),
0 30px 80px -30px rgba(0,0,0,0.6);
}
.rack-frame {
position: relative;
background: rgba(0,0,0,0.45);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 4px;
padding: 10px 8px;
}
.rack-units {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 1px;
}
.rack-u {
position: relative;
height: var(--u-h);
width: 100%;
display: flex;
align-items: center;
font-family: 'Space Grotesk', sans-serif;
font-size: 9px;
letter-spacing: 0.4px;
color: var(--t3);
border-radius: 2px;
overflow: hidden;
isolation: isolate;
}
.rack-u-num {
flex-shrink: 0;
width: 22px;
text-align: right;
padding-right: 8px;
font-size: 8.5px;
font-weight: 600;
color: rgba(255,255,255,0.28);
border-right: 1px dashed rgba(255,255,255,0.08);
margin-right: 8px;
height: 100%;
display: flex;
align-items: center;
justify-content: flex-end;
}
.rack-u-label {
font-size: 9.5px;
font-weight: 500;
color: rgba(255,255,255,0.92);
text-transform: uppercase;
letter-spacing: 0.6px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Empty units � dotted slot guides */
.rack-u--empty {
background: repeating-linear-gradient(
90deg,
transparent 0,
transparent 4px,
rgba(255,255,255,0.03) 4px,
rgba(255,255,255,0.03) 6px
);
}
.rack-u--empty::after {
content: '';
position: absolute;
left: 38px;
right: 8px;
top: 50%;
border-top: 1px dotted rgba(255,255,255,0.08);
}
/* Filled units � color-coded */
.rack-u--filled {
border: 1px solid;
background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.01));
}
.rack-u--filled[data-color="cyan"] { border-color: rgba(34,211,238,0.45); box-shadow: inset 0 0 18px rgba(34,211,238,0.10); }
.rack-u--filled[data-color="violet"] { border-color: rgba(139,92,246,0.45); box-shadow: inset 0 0 18px rgba(139,92,246,0.10); }
.rack-u--filled[data-color="magenta"] { border-color: rgba(236,72,153,0.45); box-shadow: inset 0 0 18px rgba(236,72,153,0.10); }
.rack-u--filled[data-color="amber"] { border-color: rgba(245,158,11,0.45); box-shadow: inset 0 0 18px rgba(245,158,11,0.10); }
.rack-u--filled[data-color="emerald"] { border-color: rgba(16,185,129,0.45); box-shadow: inset 0 0 18px rgba(16,185,129,0.10); }
.rack-u--filled[data-color="red"] { border-color: rgba(239,68,68,0.45); box-shadow: inset 0 0 18px rgba(239,68,68,0.10); }
/* Tiny status LED on filled units */
.rack-u--filled::before {
content: '';
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
width: 5px;
height: 5px;
border-radius: 50%;
background: currentColor;
z-index: 1;
}
.rack-u--filled[data-color="cyan"]::before { background: var(--rack-cyan); box-shadow: 0 0 8px var(--rack-cyan); }
.rack-u--filled[data-color="violet"]::before { background: var(--rack-violet); box-shadow: 0 0 8px var(--rack-violet); }
.rack-u--filled[data-color="magenta"]::before { background: var(--rack-magenta); box-shadow: 0 0 8px var(--rack-magenta); }
.rack-u--filled[data-color="amber"]::before { background: var(--rack-amber); box-shadow: 0 0 8px var(--rack-amber); }
.rack-u--filled[data-color="emerald"]::before { background: var(--rack-emerald); box-shadow: 0 0 8px var(--rack-emerald); }
.rack-u--filled[data-color="red"]::before { background: var(--rack-red); box-shadow: 0 0 8px var(--rack-red); }
/* Multi-U units: visually merge top/middle/bottom */
.rack-u--top {
border-bottom: none;
border-radius: 2px 2px 0 0;
}
.rack-u--bottom {
border-top: none;
border-radius: 0 0 2px 2px;
}
.rack-u--filled:not(.rack-u--top) {
border-top: none;
border-radius: 0;
}
.rack-u--filled:not(.rack-u--bottom):not(:last-child) {
border-bottom: none;
}
/* Re-bottom-radius on standalone (top + bottom both apply means single) */
.rack-u--filled.rack-u--top.rack-u--bottom { border-radius: 2px; }
/* Hide labels on middle/bottom rows of multi-U units */
.rack-u--filled:not(.rack-u--top):not(.rack-u--bottom) .rack-u-label,
.rack-u--bottom .rack-u-label { display: none; }
.rack-u--filled:not(.rack-u--top) .rack-u-label { display: none; }
/* Hide LED on middle rows; only show on top */
.rack-u--filled:not(.rack-u--top)::before { display: none; }
/* Rack base (foot) */
.rack-base {
height: 14px;
margin-top: 0;
background:
linear-gradient(180deg, rgba(255,255,255,0.05), rgba(0,0,0,0.4));
border: 1px solid rgba(255,255,255,0.06);
border-top: none;
border-radius: 0 0 14px 14px;
position: relative;
}
.rack-base::before,
.rack-base::after {
content: '';
position: absolute;
top: 100%;
width: 8px;
height: 6px;
background: rgba(255,255,255,0.06);
border-radius: 0 0 2px 2px;
}
.rack-base::before { left: 16px; }
.rack-base::after { right: 16px; }
.rack-caption {
margin: 18px 0 0;
text-align: center;
font-size: 11px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--t3);
font-weight: 600;
}
/* -- Side legend -- */
.rack-legend {
display: flex;
flex-direction: column;
gap: 14px;
padding-top: 8px;
}
/* Desktop only � grid-aligned legend: 42 rows mirror the rack U slots */
@media (min-width: 1024px) {
.rack-stage--centered .rack-legend {
--u-h: 20px;
display: grid;
grid-template-rows: repeat(42, var(--u-h));
row-gap: 1px;
/* Match the rack frame's top inset so row 1 aligns with U42 */
padding: 30px 0 0;
}
.rack-stage--centered .rack-legend-item {
grid-row: calc(43 - var(--u-top, 42)) / span var(--u-span, 1);
align-self: stretch;
margin: 0;
padding: 6px 14px;
align-items: center;
}
}
.rack-legend-title {
font-family: 'Space Grotesk', sans-serif;
font-size: 11px;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--t3);
margin: 0 0 6px;
}
.rack-legend-item {
display: grid;
grid-template-columns: 12px 1fr;
gap: 16px;
padding: 14px 16px;
background: var(--glass);
border: 1px solid var(--border);
border-radius: 12px;
transition: border-color 0.4s var(--ease), transform 0.4s var(--ease);
position: relative;
}
.rack-legend-item:hover { transform: translateX(4px); }
.legend-swatch {
width: 12px;
border-radius: 6px;
background: var(--swatch, var(--border));
box-shadow: 0 0 12px var(--swatch, transparent);
align-self: stretch;
}
.rack-legend-item[data-color="cyan"] { --swatch: var(--rack-cyan, #22D3EE); }
.rack-legend-item[data-color="violet"] { --swatch: var(--rack-violet, #8B5CF6); }
.rack-legend-item[data-color="magenta"] { --swatch: var(--rack-magenta, #EC4899); }
.rack-legend-item[data-color="amber"] { --swatch: var(--rack-amber, #F59E0B); }
.rack-legend-item[data-color="emerald"] { --swatch: var(--rack-emerald, #10B981); }
.rack-legend-item[data-color="red"] { --swatch: var(--rack-red, #EF4444); }
.rack-legend-item[data-color="cyan"]:hover { border-color: rgba(34,211,238,0.4); }
.rack-legend-item[data-color="violet"]:hover { border-color: rgba(139,92,246,0.4); }
.rack-legend-item[data-color="magenta"]:hover { border-color: rgba(236,72,153,0.4); }
.rack-legend-item[data-color="amber"]:hover { border-color: rgba(245,158,11,0.4); }
.rack-legend-item[data-color="emerald"]:hover { border-color: rgba(16,185,129,0.4); }
.rack-legend-item[data-color="red"]:hover { border-color: rgba(239,68,68,0.4); }
.rack-legend-item--free {
border-style: dashed;
opacity: 0.62;
}
.rack-legend-item--free .legend-swatch {
background: repeating-linear-gradient(45deg, rgba(255,255,255,0.15) 0 3px, transparent 3px 6px);
box-shadow: none;
}
.rack-legend-item .legend-swatch { flex: 0 0 auto; margin-top: 4px; }
/* ---------------------------------------------------------------------
27. RACK MODAL — 3D showcase (video-game style) + spec rings
--------------------------------------------------------------------- */
.rack-modal-showcase {
display: grid;
grid-template-columns: 1fr minmax(260px, 320px) 1fr;
align-items: center;
gap: 18px;
margin: 8px 0 22px;
}
/* — 3D viewer placeholder — */
.rack-modal-3d {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
min-height: 280px;
width: 100%;
}
.legend-name {
font-family: 'Space Grotesk', sans-serif;
font-size: 14px;
font-weight: 600;
color: var(--t1);
margin: 0 0 2px;
}
.legend-meta {
font-size: 11px;
color: var(--t3);
letter-spacing: 0.4px;
margin: 0 0 6px;
font-variant-numeric: tabular-nums;
}
.legend-desc {
font-size: 13px;
color: var(--t2);
line-height: 1.55;
margin: 0;
}
/* -- Rack reveal animation: units fill in from top to bottom -- */
.rack-stage.reveal .rack-u--filled {
opacity: 0;
transform: translateX(-8px);
transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.rack-stage.reveal.in-view .rack-u--filled {
opacity: 1;
transform: translateX(0);
}
/* Stagger fills slightly using nth-of-type */
.rack-stage.reveal.in-view .rack-u--filled:nth-of-type(1) { transition-delay: 0.10s; }
.rack-stage.reveal.in-view .rack-u--filled:nth-of-type(2) { transition-delay: 0.16s; }
.rack-stage.reveal.in-view .rack-u--filled:nth-of-type(3) { transition-delay: 0.22s; }
.rack-stage.reveal.in-view .rack-u--filled:nth-of-type(4) { transition-delay: 0.28s; }
.rack-stage.reveal.in-view .rack-u--filled:nth-of-type(5) { transition-delay: 0.34s; }
.rack-stage.reveal.in-view .rack-u--filled:nth-of-type(6) { transition-delay: 0.40s; }
.rack-stage.reveal.in-view .rack-u--filled:nth-of-type(n+7){ transition-delay: 0.46s; }
.rack-stage.reveal .rack-legend-item {
opacity: 0;
transform: translateY(14px);
transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.rack-stage.reveal.in-view .rack-legend-item:nth-child(2) { transition-delay: 0.55s; }
.rack-stage.reveal.in-view .rack-legend-item:nth-child(3) { transition-delay: 0.65s; }
.rack-stage.reveal.in-view .rack-legend-item:nth-child(4) { transition-delay: 0.75s; }
.rack-stage.reveal.in-view .rack-legend-item:nth-child(5) { transition-delay: 0.85s; }
.rack-stage.reveal.in-view .rack-legend-item:nth-child(6) { transition-delay: 0.95s; }
.rack-stage.reveal.in-view .rack-legend-item {
opacity: 1;
transform: translateY(0);
}
/* Responsive rack */
@media (max-width: 980px) {
.rack-stage {
grid-template-columns: 1fr;
max-width: 520px;
margin-left: auto;
margin-right: auto;
gap: 36px;
}
.rack { --u-h: 18px; }
}
@media (max-width: 480px) {
.rack { --u-h: 14px; padding: 14px 10px 0; }
.rack-u-num { width: 20px; padding-right: 6px; margin-right: 6px; font-size: 8px; }
.rack-u-label { font-size: 8.5px; letter-spacing: 0.3px; }
.rack-legend-item { padding: 12px 14px; gap: 12px; }
}
/* ---------------------------------------------------------------------
23. APPLE-STYLE PROGRESSIVE REVEAL � staggered children + opt-outs
--------------------------------------------------------------------- */
/* Section heads: stagger eyebrow ? title ? sub for a smoother cascade */
.section-head .section-eyebrow.reveal,
.page-header .page-eyebrow.reveal {
transition-delay: 0.05s;
}
.section-head .h-section.reveal,
.page-header .h-display.reveal {
transition-delay: 0.18s;
}
.section-head .section-sub.reveal,
.page-header .page-sub.reveal {
transition-delay: 0.32s;
}
/* Cards & complex layouts already define their own transforms � opt them out of the blur */
.hw-card.reveal,
.timeline-item.reveal,
.team-card.reveal,
.rack-stage.reveal {
filter: none;
}
@media (prefers-reduced-motion: reduce) {
.reveal,
.reveal.in-view {
filter: none;
transform: none;
}
}
/* ---------------------------------------------------------------------
PROMO VIDEO SECTION
--------------------------------------------------------------------- */
.video-section .section-head { margin-bottom: 36px; }
.video-wrap {
max-width: 980px;
margin: 0 auto;
position: relative;
}
.video-frame {
position: relative;
border-radius: 22px;
overflow: hidden;
border: 1px solid var(--border, rgba(255,255,255,0.08));
background: #000;
box-shadow:
0 30px 80px -30px rgba(0,0,0,0.7),
0 0 0 1px rgba(255,255,255,0.04) inset;
transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.video-frame:hover {
transform: translateY(-3px);
box-shadow:
0 40px 100px -30px rgba(34, 211, 238, 0.25),
0 0 0 1px rgba(255,255,255,0.06) inset;
}
.video-el {
display: block;
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
object-fit: cover;
background: #000;
}
/* Soft animated color glow behind the video */
.video-glow {
position: absolute;
inset: -40px;
z-index: -1;
background:
radial-gradient(45% 60% at 20% 30%, rgba(34, 211, 238, 0.35), transparent 70%),
radial-gradient(45% 60% at 80% 70%, rgba(139, 92, 246, 0.30), transparent 70%),
radial-gradient(40% 50% at 50% 100%, rgba(236, 72, 153, 0.22), transparent 75%);
filter: blur(60px);
opacity: 0.85;
animation: video-glow-drift 14s ease-in-out infinite alternate;
pointer-events: none;
}
@keyframes video-glow-drift {
0% { transform: translate3d(0, 0, 0) scale(1); }
100% { transform: translate3d(2%, -2%, 0) scale(1.05); }
}
@media (max-width: 640px) {
.video-frame { border-radius: 16px; }
.video-glow { inset: -20px; filter: blur(40px); }
}
@media (prefers-reduced-motion: reduce) {
.video-glow { animation: none; }
.video-frame { transition: none; }
}
/* ---------------------------------------------------------------------
24. RACK � BRAND WORDMARKS, CLICKABLE UNITS & DETAIL MODAL
--------------------------------------------------------------------- */
/* Brand wordmarks inside filled rack units (top row only) */
.rack-u-brand {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
font-family: 'Space Grotesk', 'Inter', sans-serif;
font-weight: 800;
font-size: 9px;
letter-spacing: 0.18em;
padding: 2px 7px;
border-radius: 3px;
line-height: 1;
pointer-events: none;
opacity: 0.92;
transition: opacity 0.3s var(--ease, ease), transform 0.3s var(--ease, ease);
white-space: nowrap;
text-transform: uppercase;
}
.rack-u--filled:not(.rack-u--top) .rack-u-brand { display: none; }
.brand-cisco {
background: linear-gradient(135deg, #034e74 0%, #03658f 100%);
color: #ffffff;
text-shadow: 0 1px 0 rgba(0,0,0,0.45);
}
.brand-fortinet {
background: linear-gradient(135deg, #8a1610 0%, #6e120c 100%);
color: #ffffff;
text-shadow: 0 1px 0 rgba(0,0,0,0.45);
}
.brand-dell {
background: linear-gradient(135deg, #034a72 0%, #023253 100%);
color: #ffffff;
text-shadow: 0 1px 0 rgba(0,0,0,0.45);
}
/* Rack units are now purely visual; clicks happen on the legend buttons. */
/* ---------- Modal ---------- */
.rack-modal {
position: fixed;
inset: 0;
z-index: 1000;
display: grid;
place-items: center;
padding: 24px;
opacity: 0;
transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.rack-modal[hidden] { display: none; }
.rack-modal.is-open { opacity: 1; }
.rack-modal-backdrop {
position: absolute;
inset: 0;
background: radial-gradient(ellipse at center, rgba(8,10,24,0.78) 0%, rgba(0,0,0,0.92) 100%);
backdrop-filter: blur(18px) saturate(140%);
-webkit-backdrop-filter: blur(18px) saturate(140%);
}
.rack-modal-dialog {
/* reset native