/* ==========================================================================
Live-o-live — Immersive home page (scroll-driven)
Loaded only by index.html, after style.css. Uses the same palette tokens.
Motion lives in assets/js/home.js (GSAP ScrollTrigger + Lenis + Three.js).
Every section is readable as a plain static page when motion is off.
========================================================================== */
:root {
--h-ink: #001A26; /* deepest night violet for immersive sections */
--h-ink-2: #0B3447;
--h-glow: rgba(216, 57, 93, 0.35);
--h-radius-xl: 32px;
--colorlight:#b1beca;
--colorgray100:#D5D8DE;
}
.home-immersive { background: #fff; }
/* Shared bits ------------------------------------------------------------ */
.eyebrow-light { color: var(--lol-sand); }
.eyebrow-light::before, .eyebrow-light.centered::after { background: var(--lol-gradient); }
.h-ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.h-ctas.centered { justify-content: center; }
.btn-ghost-light {
--bs-btn-color: #fff; --bs-btn-border-color: rgba(255,255,255,0.5);
--bs-btn-hover-bg: rgba(255,255,255,0.12); --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: #fff;
--bs-btn-active-bg: rgba(255,255,255,0.2); --bs-btn-active-color: #fff;
}
[data-h-split] .line { display: block; }
.h-char-mask { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.h-char { display: inline-block; will-change: transform; }
.gradient-text {
color: #3857ef; /* shown if gradient text is not supported */
background-image: linear-gradient(to right, #3857ef 0%, #d8395d 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
width: fit-content; /* stretch the gradient across the text, not the whole line */
}
/* 1. HERO ---------------------------------------------------------------- */
.h-hero {
position: relative;
min-height: calc(100svh - var(--lol-header-h));
display: flex; flex-direction: column;
overflow: hidden;
background:
radial-gradient(60% 50% at 85% 0%, rgba(177, 190, 202, 0.9), transparent 70%),
radial-gradient(50% 40% at 0% 20%, rgba(242, 243, 245, 1), transparent 70%),
#fff;
}
.h-hero-copy { position: relative; z-index: 2; padding-top: clamp(1.5rem, 1rem + 3vh, 3.5rem); }
.h-hero-grid { display: grid; gap: 1.5rem 3rem; align-items: end; margin-top: 0.75rem; }
@media (min-width: 992px) { .h-hero-grid { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); } }
.h-hero-title {
font-size: clamp(2.3rem, 1.2rem + 3.6vw, 4.6rem);
line-height: 1.02; letter-spacing: -0.045em; font-weight: 800;
color: var(--lol-primary); margin: 0;
}
.h-hero-title .line-soft { color: var(--lol-navy); }
/* Accent lines of the headline use the brand gradient as text fill. home.js splits words into
.h-char spans, so each word gets a slice of its line's gradient (--gw / --gx set in home.js). */
.h-hero-title .line:not(.line-soft),
.h-hero-title .line:not(.line-soft) .h-char {
background-image: var(--lol-gradient-text);
background-repeat: no-repeat;
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
}
.h-hero-title .line:not(.line-soft):has(.h-char) { background-image: none; }
.h-hero-title .line:not(.line-soft) .h-char { background-size: var(--gw, 100%) 100%; background-position: var(--gx, 0) 0; padding-right: 0.03em; }
.h-hero-side p { color: var(--lol-slate); font-size: 1.02rem; margin-bottom: 1.25rem; max-width: 46ch; }
.h-hero-side strong { color: var(--lol-navy); }
/* Media frame: sits below the copy; on scroll it expands to fill the screen */
.h-hero-media {
position: relative; z-index: 1;
flex: 1 1 auto;
min-height: 42vh;
margin: clamp(1.5rem, 1rem + 2vh, 2.5rem) clamp(16px, 4vw, 48px) clamp(16px, 2vw, 28px);
border-radius: var(--h-radius-xl);
overflow: hidden;
background: var(--h-ink);
box-shadow: var(--lol-shadow-lg);
}
.h-hero-img, .h-hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.h-hero-canvas { opacity: 0; transition: opacity 0.6s ease; }
.h-hero-canvas.is-live { opacity: 1; }
.h-hero-overlay {
position: absolute; inset: auto 0 0 0; padding: clamp(1.25rem, 1rem + 3vw, 3.5rem);
color: #fff;
background: linear-gradient(to top, rgba(0, 26, 38, 0.85), rgba(0, 26, 38, 0));
}
.h-overlay-kicker { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lol-sand); margin-bottom: 0.5rem; }
.h-overlay-title { font-size: clamp(1.6rem, 1rem + 3vw, 3.75rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1.04; margin: 0; color: #fff; }
.h-scroll-cue {
position: absolute; z-index: 3; right: clamp(24px, 5vw, 72px); bottom: clamp(28px, 4vw, 56px);
display: flex; align-items: center; gap: 0.75rem;
color: #fff; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
}
.h-scroll-cue i { width: 1px; height: 44px; background: rgba(255,255,255,0.35); position: relative; overflow: hidden; }
.h-scroll-cue i::after { content: ""; position: absolute; left: 0; top: -50%; width: 1px; height: 50%; background: #fff; animation: h-cue 1.8s var(--lol-ease) infinite; }
@keyframes h-cue { to { top: 110%; } }
/* Motion-on state: media becomes a full-viewport layer revealed with clip-path */
.h-motion .h-hero { height: calc(100svh - var(--lol-header-h)); min-height: 0; }
.h-motion .h-hero-media {
position: absolute; inset: 0; margin: 0; border-radius: 0; box-shadow: none;
clip-path: inset(var(--h-top, 52%) var(--h-side, 4%) var(--h-bottom, 3%) var(--h-side, 4%) round var(--h-rad, 32px));
}
.h-motion .h-hero-overlay { opacity: 0; }
/* The frame sits above the (fading) hero copy so its controls are always clickable;
clip-path also clips hit-testing, so the hidden part of the frame never blocks the copy. */
.h-motion .h-hero-media { z-index: 3; }
.h-motion .h-scroll-cue { z-index: 4; }
.h-hero-video { transform-origin: 50% 50%; will-change: transform; position: relative;}
.videoOverrelay {position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 26, 38, 0.85), rgba(0, 26, 38, 0)); z-index:2; pointer-events: none; width: 100%; height: 100%;}
/* Hero background video + custom controls ------------------------------- */
.h-hero-video { background: var(--h-ink); }
.h-vctrl {
position: absolute; z-index:7; display: none; gap: 0.25rem; padding: 0.3rem;
top: calc(var(--h-top, 0px) + clamp(10px, 1.6vw, 20px));
right: calc(var(--h-side, 0px) + clamp(10px, 1.6vw, 20px));
border-radius: 999px; background: rgba(0, 26, 38, 0.55);
border: 1px solid rgba(255, 255, 255, 0.2);
-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.v-ready .h-vctrl { display: flex; }
.h-vbtn {
all: unset; box-sizing: border-box; cursor: pointer;
width: 44px; height: 44px; border-radius: 50%;
display: grid; place-items: center; color: #fff; font-size: 1.1rem;
transition: background-color 0.2s, transform 0.2s;
}
.h-vbtn:hover { background: rgba(255, 255, 255, 0.16); }
.h-vbtn:active { transform: scale(0.94); }
.h-vbtn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.h-vbtn[hidden] { display: none; }
/* Full screen: the whole frame, unclipped, with the controls kept on top */
.h-hero-media.is-fullscreen, .h-hero-media:fullscreen {
--h-top: 0px !important; --h-side: 0px !important; --h-bottom: 0px !important; --h-rad: 0px !important;
clip-path: none !important; margin: 0; border-radius: 0; width: 100%; height: 100%; background: #000;
}
.h-hero-media.is-fullscreen .h-hero-overlay { display: none; }
.h-hero-media.is-fullscreen .h-hero-video { object-fit: contain; transform: none !important; }
.h-hero-media.is-fullscreen .h-hero-canvas { display: none; }
/* 2. TRUST STRIP ---------------------------------------------------------- */
.h-trust { padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem); }
.h-trust-title { text-align: center; font-size: clamp(1.3rem, 1rem + 1.2vw, 2rem); margin-bottom: 2.5rem; color: var(--lol-navy); }
.h-marquee .wordmark { font-size: clamp(1.3rem, 1rem + 1.4vw, 2.2rem); }
.h-marquee .marquee-track { will-change: transform; }
/* 3. STATEMENT ----------------------------------------------------------- */
.h-statement {
position: relative; color: #fff;
background:
radial-gradient(50% 60% at 90% 10%, rgba(216, 57, 93, 0.55), transparent 70%),
radial-gradient(40% 50% at 0% 100%, rgba(216, 57, 93, 0.22), transparent 70%),
var(--h-ink);
min-height: 100svh;
display: flex; align-items: center;
padding-block: clamp(5rem, 4rem + 6vw, 9rem);
}
.h-statement-text {
font-size: clamp(1.9rem, 1rem + 3.6vw, 4.4rem);
line-height: 1.08; letter-spacing: -0.04em; font-weight: 800; margin: 1.5rem 0 0; max-width: 20ch;
color: #fff; /* the global h2 colour is deep violet, which vanished on this dark section */
}
.h-statement-text .soft { color: var(--lol-sand); }
@media (min-width: 992px) { .h-statement-text { max-width: 24ch; } }
.h-word { transition: none; }
/* 4. VALUES -------------------------------------------------------------- */
.h-values { padding-block: clamp(5rem, 3rem + 6vw, 9rem); background: #fff; }
.h-value { display: grid; gap: 2rem; align-items: center; }
.h-value + .h-value { margin-top: clamp(4rem, 3rem + 5vw, 8rem); }
@media (min-width: 992px) {
.h-value { grid-template-columns: 1.15fr 1fr; gap: clamp(3rem, 2rem + 4vw, 6rem); }
.h-value.is-flip .h-value-media { order: 2; }
}
.h-value-media, .h-story-media {
position: relative; overflow: hidden; border-radius: var(--h-radius-xl);
aspect-ratio: 16 / 11; background: var(--lol-border);
}
.h-value-media img, .h-story-media img { width: 100%; height: 118%; object-fit: cover; display: block; will-change: transform; }
.h-num {
display: block; font-size: clamp(4.5rem, 3rem + 7vw, 9rem); font-weight: 800; line-height: 0.9; letter-spacing: -0.06em;
color: transparent; -webkit-text-stroke: 1.5px var(--lol-primary); margin-bottom: 1rem;
}
.h-chip {
display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.85rem; border-radius: 999px;
background: var(--lol-mist); color: var(--lol-primary-ink); font-size: 0.8rem; font-weight: 700; margin-bottom: 1rem;
}
.h-value h3 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem); letter-spacing: -0.035em; color: var(--lol-navy); }
.h-value p { color: var(--lol-slate); font-size: 1.08rem; max-width: 46ch; }
/* 5. PRODUCTS: stacking cards ------------------------------------------- */
.h-products { padding-block: clamp(5rem, 3rem + 6vw, 9rem); background: var(--lol-mist); }
.h-stack { position: relative; }
.h-pcard {
position: sticky; top: calc(var(--lol-header-h) + 24px);
display: grid; overflow: hidden;
min-height: min(76vh, 640px);
border-radius: var(--h-radius-xl);
background: var(--lol-navy); color: #fff;
box-shadow: 0 -20px 60px -30px rgba(0, 26, 38, 0.5);
transform-origin: 50% 0;
}
.h-pcard + .h-pcard { margin-top: 8vh; }
.h-pcard:nth-child(2) { background: linear-gradient(120deg, #3857ef 0%, #d8395d 100%); }
.h-pcard:nth-child(3) { background: var(--h-ink-2); }
@media (min-width: 992px) { .h-pcard { grid-template-columns: 1fr 1.1fr; } }
.h-pcard-copy { padding: clamp(1.75rem, 1rem + 3vw, 3.5rem); display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 1; }
.h-pcard-tag { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lol-sand); }
.h-pcard-tag span { opacity: 0.6; margin-right: 0.75rem; }
.h-pcard h3 { font-size: clamp(2.2rem, 1.4rem + 3vw, 4rem); letter-spacing: -0.045em; margin-bottom: 0.75rem; color: #fff; }
.h-pcard p { color: rgba(255,255,255,0.82); max-width: 42ch; }
.h-pcard ul { list-style: none; padding: 0; margin: 0 0 1.75rem; display: grid; gap: 0.5rem; }
.h-pcard li { display: flex; gap: 0.6rem; align-items: center; font-weight: 600; }
.h-pcard li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--lol-gradient); flex: none; }
.h-pcard .btn { align-self: flex-start; }
.h-pcard-media { position: relative; min-height: 240px; overflow: hidden; }
.h-pcard-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.h-pcard-shade { position: absolute; inset: 0; background: var(--h-ink); opacity: 0; pointer-events: none; z-index: 2; }
/* 6. EVENTS: horizontal gallery ----------------------------------------- */
.h-events { background: var(--h-ink); color: #fff; overflow: hidden; }
.h-events-inner { padding-block: clamp(4rem, 3rem + 4vw, 6rem); min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }
.h-events-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.h-events-head h2 { color: #fff; margin: 1rem 0 0; max-width: 18ch; font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.5rem); letter-spacing: -0.04em; }
.h-events-text-con {display: flex; justify-content: space-between; align-items: end; gap: 4;}
.h-track-wrap { overflow-x: auto; scrollbar-width: none; }
.h-track-wrap::-webkit-scrollbar { display: none; }
.h-track {
list-style: none; margin: 0; display: flex; gap: clamp(16px, 2vw, 28px);
padding: 0 max(16px, calc((100vw - 1320px) / 2 + 12px));
width: max-content;
}
.h-etile {
display: block; width: clamp(260px, 70vw, 440px); color: #fff; text-decoration: none;
border-radius: 24px; overflow: hidden; background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.1);
transition: border-color 0.3s, transform 0.4s var(--lol-ease);
height: 100%;}
.h-etile:hover, .h-etile:focus-visible { border-color: var(--lol-primary); color: #fff; transform: translateY(-6px); }
.h-etile-img { display: block; aspect-ratio: 4 / 2; max-height:130px; overflow: hidden; border-bottom-right-radius:40px; }
.h-etile-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--lol-ease); }
.h-etile:hover .h-etile-img img { transform: scale(1.06); }
.h-etile-body { display: grid; gap: 0.35rem; padding: 1.25rem 1.4rem 1.5rem; }
.h-etile-num { font-size: 0.8rem; font-weight: 700; color: var(--lol-primary); letter-spacing: 0.1em; }
.h-etile-title { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; }
.h-etile-title .bi { color: var(--lol-primary); margin-right: 0.25rem; }
.h-etile-desc { color: rgba(255,255,255,0.72); font-size: 0.98rem; }
.h-events-progress { margin-top: 2.5rem; }
.h-events-progress span {
display: block; height: 2px; background: var(--lol-gradient); transform-origin: 0 50%; transform: scaleX(0.2);
box-shadow: 0 0 0 9999px transparent;
}
.h-events-progress { position: relative; }
.h-events-progress::before { content: ""; position: absolute; left: 12px; right: 12px; top: 0; height: 2px; background: rgba(255,255,255,0.12); }
.h-events-progress span { position: relative; margin-inline: 0; }
.h-motion .h-track-wrap { overflow: visible; }
/* 7. PROOF --------------------------------------------------------------- */
.h-proof { padding-block: clamp(5rem, 3rem + 6vw, 9rem); }
.h-story { display: grid; gap: 2rem; align-items: center; border-radius: var(--h-radius-xl); }
@media (min-width: 992px) { .h-story { grid-template-columns: 1.1fr 1fr; gap: 4rem; } }
.h-story h3 { font-size: clamp(1.8rem, 1.3rem + 2vw, 3rem); letter-spacing: -0.04em; color: var(--lol-navy); margin-top: 0.5rem; }
.h-story p { color: var(--lol-slate); }
.h-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.75rem; border-top: 1px solid var(--lol-line); padding-top: 1.5rem; }
.h-metric .value { display: block; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem); font-weight: 800; letter-spacing: -0.04em; color: var(--lol-primary-ink); line-height: 1.1; }
.h-metric .label { font-size: 0.85rem; color: var(--lol-slate); }
.h-logos { margin-top: clamp(3rem, 2rem + 3vw, 5rem); display: grid; gap: 1.5rem; justify-items: start; }
.h-logos .logo-grid { width: 100%; }
@media (min-width: 768px) { .h-logos .logo-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .h-logos .logo-grid { grid-template-columns: repeat(6, 1fr); } }
/* 8. CTA ----------------------------------------------------------------- */
.h-cta {
position: relative; overflow: hidden; color: #fff; background: var(--h-ink);
min-height: 100svh; display: grid; place-items: center; text-align: center;
padding-block: clamp(5rem, 4rem + 5vw, 8rem);
}
.h-cta-bg { position: absolute; inset: 0; }
.h-cta-bg img { width: 100%; height: 100%; object-fit: cover; }
.h-cta-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 26, 38,0.55), rgba(0, 26, 38,0.85)); }
.h-cta-copy { position: relative; z-index: 1; }
.h-cta h2 { color: #fff; font-size: clamp(2.2rem, 1.2rem + 4vw, 5rem); letter-spacing: -0.045em; line-height: 1.04; max-width: 16ch; margin: 1.25rem auto; }
.h-cta .lead { color: rgba(255,255,255,0.85); max-width: 640px; margin: 0 auto 2rem; }
.h-motion .h-cta-bg { clip-path: circle(var(--h-r, 14%) at 50% 50%); }
/* Footer joins the dark CTA without a seam */
.home-immersive .site-footer { margin-top: 0; }
/* Reduced motion: everything static, gallery scrolls natively ------------ */
@media (prefers-reduced-motion: reduce) {
.h-scroll-cue i::after { animation: none; }
.h-hero-canvas { display: none; }
.h-pcard { position: relative; top: auto; }
}
/* ==========================================================================
1b. EXPLORE THE SUITE (inside the hero, above the video frame)
Desktop: header + hero copy + these cards fit one screen, so the type and
spacing in the hero scale with the viewport HEIGHT (vh) as well as width.
Hover / keyboard focus (.is-on, set by home.js) expands a card, turns it
deep violet, tilts it toward the pointer and plays its icon.
========================================================================== */
@media (min-width: 992px) {
.h-hero-copy { padding-top: clamp(0.75rem, 3.2vh, 3.25rem); }
.h-hero-grid { margin-top: clamp(0.25rem, 1vh, 0.75rem); }
.h-hero-title { font-size: clamp(2.1rem, min(1.2rem + 3.6vw, 7.4vh), 4.6rem); }
.h-hero-side p { font-size: clamp(0.9rem, 0.55rem + 0.9vh, 1.02rem); margin-bottom: clamp(0.75rem, 2vh, 1.25rem); }
.h-hero-side .btn { --bs-btn-padding-y: clamp(0.55rem, 0.2rem + 0.9vh, 0.85rem); }
}
.h-suite { margin-top: clamp(1.25rem, 4.2vh, 3rem); }
.h-suite-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1.5rem; margin-bottom: clamp(0.6rem, 1.8vh, 1.1rem); }
.h-suite-title { margin: 0; font-size: clamp(1.15rem, 0.8rem + 1.5vh, 1.65rem); font-weight: 800; letter-spacing: -0.03em; color: var(--lol-navy); }
.h-suite-meta { margin: 0; display: inline-flex; align-items: center; gap: 0.6rem; font-size: 0.8rem; font-weight: 600; color: var(--lol-slate); }
.h-suite-dots { display: inline-flex; gap: 4px; }
.h-suite-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--lol-primary); animation: h-dot 2.4s var(--lol-ease) infinite; }
.h-suite-dots i:nth-child(2) { animation-delay: 0.3s; }
.h-suite-dots i:nth-child(3) { animation-delay: 0.6s; }
@keyframes h-dot { 0%, 60%, 100% { transform: none; background: var(--lol-border); } 25% { transform: translateY(-3px); background: var(--lol-primary-ink); } }
.h-suite-list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(0.75rem, 1.2vw, 1.25rem); }
.h-sc { min-width: 0; perspective: 900px; }
.h-sc-link {
--rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%;
position: relative; isolation: isolate; overflow: hidden;
display: flex; align-items: center; gap: clamp(0.75rem, 1.1vw, 1.1rem);
height: 100%;
padding: 1rem clamp(1rem, 1.5vw, 1.5rem);
border-radius: 20px;
border: 1px solid var(--lol-border);
background: rgba(255, 255, 255, 0.78);
-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
color: var(--lol-charcoal); text-decoration: none;
box-shadow: var(--lol-shadow-sm);
transform: rotateX(var(--rx)) rotateY(var(--ry));
transform-style: preserve-3d;
transition: transform 0.5s var(--lol-ease), box-shadow 0.5s var(--lol-ease), border-color 0.4s, opacity 0.4s, color 0.4s;
}
/* deep violet layer that fades in when the card is on */
.h-sc-link::before {
content: ""; position: absolute; inset: 0; z-index: -2; opacity: 0;
background:
radial-gradient(120% 140% at 100% 0%, rgba(216, 57, 93, 0.45), transparent 55%),
linear-gradient(135deg, var(--lol-navy), var(--lol-primary-ink) 130%);
transition: opacity 0.5s var(--lol-ease);
}
/* cursor spotlight */
.h-sc-glow {
position: absolute; inset: 0; z-index: -1; opacity: 0; pointer-events: none;
background: radial-gradient(240px circle at var(--mx) var(--my), rgba(177, 190, 202, 0.55), transparent 60%);
transition: opacity 0.4s;
}
.h-sc-link:focus-visible { outline: 3px solid var(--lol-primary-ink); outline-offset: 3px; }
.h-sc-icon {
flex: none; display: grid; place-items: center;
width: clamp(44px, 6vh, 58px); aspect-ratio: 1; border-radius: 14px;
background: var(--lol-mist); border: 1px solid var(--lol-border);
color: var(--lol-primary-ink);
transition: background-color 0.4s, border-color 0.4s, color 0.4s, transform 0.6s var(--lol-ease);
}
.h-sc-icon svg { width: 62%; height: 62%; overflow: visible; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.h-sc-icon svg * { transform-box: fill-box; transform-origin: center; }
.h-sc-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.h-sc-name { font-weight: 800; font-size: clamp(1rem, 0.8rem + 0.8vh, 1.18rem); letter-spacing: -0.02em; color: var(--lol-navy); transition: color 0.4s; }
.h-sc-swap { display: grid; overflow: hidden; font-size: clamp(0.85rem, 0.7rem + 0.45vh, 0.95rem); min-height: 2.9em; }
.h-sc-desc, .h-sc-tags { grid-area: 1 / 1; transition: transform 0.55s var(--lol-ease), opacity 0.4s; }
.h-sc-desc { line-height: 1.45; color: var(--lol-slate); align-self: center; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.h-sc-tags { display: flex; flex-wrap: nowrap; overflow: hidden; align-self: center; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); gap: 0.35rem; opacity: 0; transform: translateY(110%); }
.h-sc-tags span {
font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap;
padding: 0.22rem 0.6rem; border-radius: 999px;
color: #fff; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.28);
}
/* big outlined numeral in the background */
.h-sc-num {
position: absolute; z-index: -1; right: clamp(3.75rem, 4.6vw, 4.9rem); top: 50%; margin-top: -0.52em;
font-size: clamp(3rem, 8.5vh, 5rem); font-weight: 800; line-height: 1; letter-spacing: -0.05em;
color: transparent; -webkit-text-stroke: 1px var(--lol-border);
opacity: 0.45;
transition: transform 0.7s var(--lol-ease), opacity 0.4s, -webkit-text-stroke-color 0.4s;
pointer-events: none;
}
.h-sc-go {
flex: none; display: grid; place-items: center; overflow: hidden;
width: 40px; height: 40px; border-radius: 50%;
border: 1px solid var(--lol-border); color: var(--lol-primary-ink); font-size: 1.05rem;
transition: background-color 0.4s, color 0.4s, border-color 0.4s, transform 0.5s var(--lol-ease);
}
/* --- ON state (pointer over or keyboard focus) --- */
.h-sc.is-on .h-sc-link, .h-sc:has(:focus-visible) .h-sc-link {
color: #fff; border-color: transparent;
box-shadow: 0 28px 60px -24px rgba(0, 36, 51, 0.65), 0 0 0 1px rgba(216, 57, 93, 0.5);
}
.h-sc.is-on .h-sc-link::before, .h-sc:has(:focus-visible) .h-sc-link::before,
.h-sc.is-on .h-sc-glow, .h-sc:has(:focus-visible) .h-sc-glow { opacity: 1; }
.h-sc.is-on .h-sc-name, .h-sc:has(:focus-visible) .h-sc-name { color: #fff; }
.h-sc.is-on .h-sc-icon, .h-sc:has(:focus-visible) .h-sc-icon { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.3); color: #fff; transform: translateZ(30px) rotate(-6deg); }
.h-sc.is-on .h-sc-num, .h-sc:has(:focus-visible) .h-sc-num { -webkit-text-stroke-color: rgba(255, 255, 255, 0.3); opacity: 1; transform: translateX(-0.75rem) scale(1.08); }
.h-sc.is-on .h-sc-go, .h-sc:has(:focus-visible) .h-sc-go { background: #fff; color: var(--lol-navy); border-color: #fff; transform: translateZ(20px); }
.h-sc.is-on .h-sc-go i, .h-sc:has(:focus-visible) .h-sc-go i { animation: h-go 0.9s var(--lol-ease) infinite; }
@keyframes h-go { 0% { transform: none; } 45% { transform: translateX(140%); } 46% { transform: translateX(-140%); } 100% { transform: none; } }
/* Icons: each plays its own little story while the card is on */
.ic .scan { stroke: var(--lol-primary); stroke-width: 2; opacity: 0; }
.h-sc.is-on .ic-neoflo .sq, .h-sc:has(:focus-visible) .ic-neoflo .sq { animation: h-sq 1.6s var(--lol-ease) infinite; }
.ic-neoflo .sq2 { animation-delay: 0.15s !important; }
.ic-neoflo .sq4 { animation-delay: 0.3s !important; }
.ic-neoflo .sq3 { animation-delay: 0.45s !important; }
.h-sc.is-on .ic-neoflo .scan, .h-sc:has(:focus-visible) .ic-neoflo .scan { animation: h-scan 1.6s ease-in-out infinite; }
@keyframes h-sq { 0%, 100% { transform: scale(1); fill: transparent; } 30% { transform: scale(0.78); fill: rgba(177, 190, 202, 0.9); } 60% { transform: scale(1.06); fill: transparent; } }
@keyframes h-scan { 0% { opacity: 0; transform: translateY(-17px); } 15%, 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(17px); } }
.ic-amplio .wave { opacity: 0.35; }
.h-sc.is-on .ic-amplio .horn, .h-sc:has(:focus-visible) .ic-amplio .horn { animation: h-horn 0.8s ease-in-out infinite; transform-origin: 0% 50%; }
.h-sc.is-on .ic-amplio .wave, .h-sc:has(:focus-visible) .ic-amplio .wave { animation: h-wave 1.2s ease-out infinite; transform-origin: 0% 50%; }
.ic-amplio .w2 { animation-delay: 0.18s !important; }
.ic-amplio .w3 { animation-delay: 0.36s !important; }
@keyframes h-horn { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-8deg) scale(1.04); } }
@keyframes h-wave { 0% { opacity: 0; transform: translateX(-4px) scale(0.8); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateX(4px) scale(1.1); } }
.h-sc.is-on .ic-sponsor .medal, .h-sc:has(:focus-visible) .ic-sponsor .medal { animation: h-medal 1.8s var(--lol-ease) infinite; }
.h-sc.is-on .ic-sponsor .star, .h-sc:has(:focus-visible) .ic-sponsor .star { animation: h-star 1.8s var(--lol-ease) infinite; }
.h-sc.is-on .ic-sponsor .ribbon, .h-sc:has(:focus-visible) .ic-sponsor .ribbon { animation: h-ribbon 0.9s ease-in-out infinite alternate; transform-origin: 50% 0%; }
@keyframes h-medal { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.12); } }
@keyframes h-star { 0% { transform: rotate(0) scale(1); fill: transparent; } 45% { transform: rotate(144deg) scale(1.2); fill: currentColor; } 100% { transform: rotate(144deg) scale(1); fill: transparent; } }
@keyframes h-ribbon { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
/* --- Desktop: one row; the card that is on grows, the others step back --- */
@media (min-width: 992px) {
.h-suite-list { display: flex; height: clamp(84px, 12.5vh, 124px); }
.h-sc { flex: 1 1 0; transition: flex-grow 0.65s var(--lol-ease); }
.h-sc.is-on, .h-sc:has(:focus-visible) { flex-grow: 1.4; }
.h-suite-list.has-on .h-sc:not(.is-on):not(:has(:focus-visible)) .h-sc-num { opacity: 0; transform: translateX(1rem); }
.h-suite-list.has-on .h-sc:not(.is-on):not(:has(:focus-visible)) .h-sc-link { opacity: 0.72; }
.h-sc.is-on .h-sc-desc, .h-sc:has(:focus-visible) .h-sc-desc { opacity: 0; transform: translateY(-110%); }
.h-sc.is-on .h-sc-tags, .h-sc:has(:focus-visible) .h-sc-tags { opacity: 1; transform: none; }
}
/* --- Tablet: three columns, stacked card content --- */
@media (min-width: 576px) and (max-width: 991.98px) {
.h-suite-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.h-sc-link { flex-direction: column; align-items: flex-start; padding: 1.1rem; }
.h-sc-go { position: absolute; top: 1rem; right: 1rem; width: 34px; height: 34px; }
.h-sc-num { right: 0.75rem; }
.h-sc-tags { display: none; }
}
/* --- Phone: a swipeable row that snaps card by card --- */
@media (max-width: 575.98px) {
.h-events-text-con {display: block;}
.h-suite-list {
display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
margin-inline: calc(var(--bs-gutter-x, 1.5rem) * -0.5); padding: 0.25rem calc(var(--bs-gutter-x, 1.5rem) * 0.5) 0.75rem;
scroll-padding-inline: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
}
.h-suite-list::-webkit-scrollbar { display: none; }
.h-sc { flex: 0 0 82%; scroll-snap-align: start; }
.h-sc-tags { display: none; }
.h-suite-meta { font-size: 0.75rem; }
}
/* --- Staggered entrance (only when motion is allowed) --- */
.js-motion .h-suite-head { opacity: 0; animation: h-sc-in 0.9s var(--lol-ease) 0.7s forwards; }
.js-motion .h-sc { opacity: 0; animation: h-sc-in 1s var(--lol-ease) forwards; animation-delay: calc(0.85s + var(--i) * 0.13s); }
.js-motion .h-sc-icon svg { animation: h-ic-in 0.9s var(--lol-ease) both; animation-delay: calc(1.15s + var(--i) * 0.13s); }
@keyframes h-sc-in { from { opacity: 0; transform: translateY(32px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes h-ic-in { from { opacity: 0; transform: scale(0.4) rotate(-40deg); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
.h-suite-dots i, .h-sc .ic *, .h-sc-go i { animation: none !important; }
.h-sc, .h-sc-link, .h-sc-desc, .h-sc-tags, .h-sc-num, .h-sc-icon { transition-duration: 0.01ms !important; }
.h-sc-link { transform: none !important; }
.h-sc-icon { transform: none !important; }
}
/* ==========================================================================
1c. HERO BANNER (100vh) — headline + side copy on top, a rounded purple
video band at the bottom with the three suite cards laid over it.
Header + hero = exactly one screen (100svh). On scroll (home.js) the cards
move up and fade out while the video band expands to full screen as before.
========================================================================== */
.h-hero--band {
--band-h: clamp(176px, 22.2vh, 260px); /* height of the purple video band */
--band-b: clamp(14px, 2.8vh, 30px); /* gap below the band */
--band-side: clamp(12px, 3.1vw, 60px); /* gap at the band's sides */
height: calc(100svh - var(--lol-header-h)); min-height: 0;
padding-bottom: calc(var(--band-h) + var(--band-b));
}
.h-hero--band .h-hero-copy {
flex: 1 1 auto; display: flex; flex-direction: column; justify-content: safe center;
max-width: none; padding: clamp(1rem, 3vh, 2.5rem) clamp(16px, 3.65vw, 72px); z-index: 1;
}
.h-hero--band .h-hero-title .line-soft,
.h-hero--band .h-hero-title .line-soft .h-char {
background: linear-gradient(100deg, #ffffff 0%, #ffffff 45%, #ffffff 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
}
.h-hero--band .h-hero-title .line-soft:has(.h-char) { background: none; }
.h-hero--band .h-hero-title .line-soft .h-char { background-size: 100% 100%; padding-right: 0.02em; }
/* The video band (static layout: no JS / reduced motion) */
.h-hero--band .h-hero-media {
position: absolute; z-index: 1; flex: none; margin: 0; min-height: 0;
left: var(--band-side); right: var(--band-side); bottom: var(--band-b); height: var(--band-h);
border-radius: 32px;
}
/* Motion layout: full-screen layer clipped to the band by home.js */
.h-motion .h-hero--band .h-hero-media { inset: 0; height: auto; border-radius: 0; }
.h-hero--band .h-scroll-cue { display: none; }
/* Suite cards sit on the band, clear of the video controls on the right */
.h-band {
position: absolute; z-index: 5; margin: 0;
left: var(--band-side); right: var(--band-side); bottom: var(--band-b); height: var(--band-h);
display: flex; align-items: center;
padding: 0 clamp(170px, 11vw, 196px) 0 clamp(20px, 6.2vw, 118px);
pointer-events: none;
}
.h-band .h-suite-list { flex: 1 1 auto; pointer-events: auto; }
.h-band .h-sc-link { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; border-color: rgba(255, 255, 255, 0.9); box-shadow: 0 18px 40px -22px rgba(0, 26, 38, 0.6); }
.h-band .h-sc-num { -webkit-text-stroke-color: var(--lol-sand); opacity: 0.6; }
@media (min-width: 992px) {
.h-hero--band .h-hero-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1.5rem clamp(2rem, 5vw, 6rem); margin-top: clamp(1.25rem, 5.5vh, 4rem); }
.h-hero--band .eyebrow { font-size: clamp(0.78rem, 0.45rem + 0.6vw, 1.08rem); letter-spacing: 0.16em; }
.h-hero--band .h-hero-title { font-size: clamp(2.2rem, min(0.6rem + 4.4vw, 8.9vh), 6.1rem); line-height: 0.97; letter-spacing: -0.05em; }
.h-hero--band .h-hero-side p { font-size: clamp(0.95rem, min(0.45rem + 0.85vw, 2.25vh), 1.5rem); line-height: 1.66; max-width: 34ch; margin-bottom: clamp(0.9rem, 3vh, 1.9rem); color: var(--colorgray100); }
.h-hero--band .h-ctas { gap: clamp(0.6rem, 1vw, 1.1rem); }
.h-hero--band .h-hero-side .btn {
font-size: clamp(0.95rem, min(0.5rem + 0.75vw, 2vh), 1.4rem);
--bs-btn-padding-x: clamp(1.2rem, 1.7vw, 2.05rem);
--bs-btn-padding-y: clamp(0.6rem, min(0.2rem + 0.9vw, 1.9vh), 1.1rem);
}
.h-band .h-suite-list { height: clamp(84px, 12.5vh, 136px); gap: clamp(0.75rem, 1.15vw, 1.4rem); }
}
/* Tablet: cards in three columns on a taller band */
@media (max-width: 991.98px) {
.h-hero--band { --band-h: clamp(190px, 26vh, 240px); }
.h-band { padding: 4.2rem clamp(12px, 3vw, 28px) 1rem; align-items: stretch; }
.h-band .h-suite-list { height: 100%; }
.h-hero--band .h-hero-grid { margin-top: 1rem; }
}
/* Phone: the band keeps its swipeable card row */
@media (max-width: 575.98px) {
.h-hero--band { --band-h: 176px; --band-b: 12px; --band-side: 12px; }
.h-band { padding: 4.1rem 0 0.75rem; }
.h-band .h-suite-list { margin: 0; padding: 0 0.85rem; scroll-padding-inline: 0.85rem; gap: 0.6rem; }
.h-band .h-sc { flex-basis: 84%; }
.h-band .h-sc-link { padding: 0.75rem 0.9rem; }
.h-hero--band .h-hero-title { font-size: clamp(2rem, 9.4vw, 2.6rem); }
.h-hero--band .h-hero-side p { font-size: 0.95rem; margin-bottom: 1rem; }
.h-hero--band .h-ctas .btn { --bs-btn-padding-y: 0.6rem; }
}
/* Static layout (no JS / reduced motion): the band shows just the video, no headline overlay */
html:not(.h-motion) .h-hero--band .h-hero-overlay { display: none; }
/* ==========================================================================
2b. CLIENT WALL — 100vh logo section (from client-logo reference)
Two counter-scrolling rows of rounded boxes. Logos live only in the light
gray boxes (grayscale until hover/focus); lilac and purple boxes are
decorative. Image cards above/below drift with scroll (client-wall.js).
========================================================================== */
.lc-wall {
--lc-gray: #EEF2F5;
--lc-lilac: #DDE4EB; /* Light100 tint */
--lc-purple: linear-gradient(90deg, rgba(56, 87, 239, 0.82) 0%, rgba(216, 57, 93, 0.82) 100%); /* brand gradient, softened */
--lc-box-w: clamp(132px, 14.7vw, 282px);
--lc-box-h: calc(var(--lc-box-w) * 0.486);
--lc-gap: clamp(12px, 1.4vw, 28px);
--lc-row-gap: clamp(16px, 2.3vw, 44px);
--lc-ob: 0px; /* how far the bottom cards reach into "Why Live-o-live" (set by client-wall.js: just above its title) */
--lc-stag: clamp(48px, 13vh, 150px); /* card stagger unit */
--lc-top-gap: clamp(56px, 10vh, 140px); /* breathing space between the video section and the cards */
--lc-card-max: clamp(260px, 46vh, 520px); /* tallest card, keeps proportions tidy on tall screens */
position: relative;
z-index: 2; /* above the hero video and the next section's background */
min-height: calc(150vh + var(--lc-top-gap));
min-height: calc(150svh + var(--lc-top-gap));
padding: var(--lc-top-gap) 0 0;
overflow: visible;
overflow-x: clip; /* cards may leave the section vertically, never sideways */
background: #fff;
display: grid;
grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
grid-template-columns: minmax(0, 1fr);
isolation: isolate;
}
/* keep the hero's own layers inside its stacking context so the cards can sit above the video */
.h-hero { z-index: 1; }
/* "Why Live-o-live" copy stays above the cards; its background stays below them */
.h-statement .s-grid { position: relative; z-index: 3; }
/* ---- Image cards (top + bottom bands) ---- */
.lc-cards {
position: relative;
z-index: 0;
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1fr 1.5fr;
gap: clamp(10px, 1.4vw, 26px);
width: min(100% - 2 * clamp(16px, 4.6vw, 88px), 1744px);
grid-template-rows: minmax(0, 1fr);
margin-inline: auto;
min-height: 0;
pointer-events: none;
}
/* top cards live below the video: they slide down from under its bottom edge, clipped there */
.lc-cards--top { height: 100%; clip-path: inset(calc(-1 * var(--lc-top-gap)) -100vw -12rem -100vw); }
.lc-cards--bottom { margin-bottom: calc(-1 * var(--lc-ob)); height: calc(100% + var(--lc-ob)); }
.lc-card {
--o: 0; /* stagger offset, in --lc-stag units */
--py: 0px; /* scroll parallax, set by client-wall.js */
--in: 1; /* scroll progress 0..1 (in, then out), set by client-wall.js */
position: relative;
margin: 0;
border-radius: clamp(12px, 1.2vw, 22px);
overflow: hidden;
background: var(--lc-lilac);
opacity: var(--in);
will-change: transform, opacity;
}
.lc-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lc-cards--top .lc-card {
align-self: start;
margin-top: calc(var(--o) * var(--lc-stag));
height: calc(100% + 1.5rem - var(--o) * var(--lc-stag));
max-height: calc(var(--lc-card-max) - var(--o) * var(--lc-stag));
transform: translate3d(0, calc(var(--py) + (1 - var(--in)) * -90px), 0) scale(calc(0.96 + var(--in) * 0.04));
transform-origin: 50% 0;
-webkit-mask-image: linear-gradient(to top, transparent 1.5rem, #000 calc(1.5rem + 70px));
mask-image: linear-gradient(to top, transparent 1.5rem, #000 calc(1.5rem + 70px));
}
.lc-cards--bottom .lc-card {
align-self: end;
margin-bottom: calc(var(--o) * var(--lc-stag) * 0.6);
height: calc(100% + 1.5rem - var(--o) * var(--lc-stag) * 0.6);
max-height: calc(var(--lc-card-max) + var(--lc-ob) - var(--o) * var(--lc-stag) * 0.6);
transform: translate3d(0, calc(var(--py) + (1 - var(--in)) * 60px), 0) scale(calc(0.94 + var(--in) * 0.06));
-webkit-mask-image: linear-gradient(to bottom, transparent 1.5rem, #000 calc(1.5rem + 90px));
mask-image: linear-gradient(to bottom, transparent 1.5rem, #000 calc(1.5rem + 90px));
}
.lc-center { padding-block: clamp(2.5rem, 9vh, 7rem); }
/* UI mock cards (product moments, built in CSS) */
.lc-ui { color: #fff; font-family: var(--lol-font); display: flex; flex-direction: column; }
.lc-ui--badge {
background: linear-gradient(160deg, #3857ef 0%, #d8395d 100%);
align-items: center; text-align: center;
padding: clamp(2rem, 4vw, 4rem) 0.75rem 1rem;
gap: 0.35rem;
}
.lc-ui--badge::before { /* lanyard punch hole */
content: ""; position: absolute; top: -18px; left: 50%; width: 52px; height: 52px;
border-radius: 50%; background: #fff; transform: translateX(-50%);
}
.lc-badge-event { font-size: clamp(0.8rem, 0.5rem + 0.7vw, 1.45rem); font-weight: 500; }
.lc-badge-name { font-size: clamp(0.9rem, 0.5rem + 0.9vw, 1.7rem); font-weight: 500; margin-top: 0.8em; }
.lc-badge-role { font-size: clamp(0.6rem, 0.45rem + 0.3vw, 0.9rem); opacity: 0.8; line-height: 1.25; }
.lc-ui--ticket {
background: linear-gradient(180deg, rgba(56, 87, 239, 0) 0%, rgba(56, 87, 239, 0.92) 30%, #d8395d 100%);
justify-content: flex-end; gap: clamp(0.5rem, 1.2vw, 1.1rem);
padding: 1rem clamp(0.6rem, 1vw, 1rem) clamp(0.6rem, 1vw, 1rem);
}
.lc-tk-row { display: flex; justify-content: space-between; align-items: center; font-size: clamp(0.75rem, 0.5rem + 0.55vw, 1.2rem); border-bottom: 1px solid rgba(255,255,255,.35); padding-bottom: 0.6em; }
.lc-tk-row small { display: block; font-size: 0.65em; opacity: 0.85; }
.lc-tk-row.is-faint { opacity: 0.35; }
.lc-tk-total { border-bottom: 0; }
.lc-qty { font-size: 0.85em; }
.lc-tk-btn { background: #fff; color: #d8395d; border-radius: 10px; text-align: center; font-weight: 600; font-size: clamp(0.7rem, 0.45rem + 0.45vw, 1rem); padding: 0.85em 0.5em; }
.lc-ui--chart {
background: linear-gradient(200deg, #3857ef 0%, #d8395d 100%);
padding: clamp(0.6rem, 1vw, 1rem); gap: 0.6rem;
}
.lc-chart-title { font-size: clamp(0.7rem, 0.5rem + 0.35vw, 0.95rem); }
.lc-bars {
flex: 1; display: flex; align-items: flex-end; justify-content: space-around; gap: 6%;
padding-inline: 4%;
background: repeating-linear-gradient(to bottom, rgba(255,255,255,.35) 0 1px, transparent 1px 26%);
}
.lc-bars i { flex: 1; max-width: 16px; background: #fff; height: calc(var(--h) * 85%); border-radius: 2px 2px 0 0; }
.lc-chart-axis { display: flex; justify-content: space-around; font-size: 0.5rem; opacity: 0.85; }
.lc-chart-axis b { font-weight: 500; }
.lc-card--checkin { overflow: visible; -webkit-mask-image: none !important; mask-image: none !important; background: transparent; }
.lc-card--checkin img { border-radius: inherit; height: calc(100% - 4.4rem); -webkit-mask-image: linear-gradient(to bottom, transparent 1.5rem, #000 calc(1.5rem + 90px)); mask-image: linear-gradient(to bottom, transparent 1.5rem, #000 calc(1.5rem + 90px)); }
.lc-checkin {
position: absolute; left: 0; right: 0; bottom: 0.4rem;
display: flex; align-items: center; gap: 0.6rem;
background: var(--lol-gradient);
color: #fff; border-radius: 14px; padding: 0.7rem 0.8rem 0.7rem 1.4rem;
font-size: clamp(0.8rem, 0.55rem + 0.5vw, 1.25rem);
}
.lc-checkin span { flex: 1; }
.lc-checkin .bi { font-size: 1.3em; color: #fff; opacity: 0.9; }
.lc-checkin b { background: rgba(255, 255, 255, 0.22); border-radius: 6px; padding: 0.3em 1em; font-weight: 500; font-size: 0.85em; }
/* ---- Centre: headline + logo rows ---- */
.lc-center { position: relative; z-index: 1; min-width: 0; }
/* White wash behind the headline: the image cards melt into white starting ~70px above the title */
.lc-center::before {
content: ""; position: absolute; z-index: -1; pointer-events: none;
left: 0; right: 0; top: -70px;
height: calc(70px + clamp(1.55rem, 0.3rem + 3.25vw, 4.5rem) * 2.6);
background: linear-gradient(to bottom, rgba(255,255,255,0) 0, rgba(255,255,255,.85) 40px, #fff 70px);
}
.lc-title-wrap { width: min(100% - 2 * clamp(16px, 4.6vw, 88px), 1744px); margin-inline: auto; }
.lc-title.h-trust-title {
font-size: clamp(1.55rem, 0.3rem + 3.25vw, 4.5rem);
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.08;
color: var(--lol-navy);
margin: 0 0 clamp(1.2rem, 2.6vw, 3rem);
text-wrap: balance;
}
.lc-rows { display: flex; flex-direction: column; gap: var(--lc-row-gap); }
.lc-row {
--shift: 0px; overflow: hidden;
--lc-edge: clamp(56px, 12vw, 260px); /* soft fade into the page colour at the browser edges */
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--lc-edge), #000 calc(100% - var(--lc-edge)), transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 var(--lc-edge), #000 calc(100% - var(--lc-edge)), transparent 100%);
}
.lc-track {
display: flex; gap: var(--lc-gap); width: max-content;
transform: translate3d(var(--shift), 0, 0); /* scroll-linked offset (client-wall.js) */
will-change: transform;
}
.lc-row--b .lc-track { margin-left: calc(var(--lc-box-w) * -0.55); } /* brick offset like the reference */
.lc-group {
flex: none; display: flex; gap: var(--lc-gap);
list-style: none; margin: 0; padding: 0;
animation: lc-scroll var(--speed, 46s) linear infinite;
will-change: transform;
}
.lc-row--rev .lc-group { animation-direction: reverse; }
@keyframes lc-scroll { to { transform: translateX(calc(-100% - var(--lc-gap))); } }
.lc-rows:hover .lc-group,
.lc-rows:focus-within .lc-group,
.lc-rows.is-paused .lc-group { animation-play-state: paused; }
.lc-box {
flex: none;
width: var(--lc-box-w);
height: var(--lc-box-h);
border-radius: clamp(10px, 1vw, 18px);
}
.lc-box--gray { background: var(--lc-gray); }
.lc-box--lilac { background: #3857EF;
background: linear-gradient(90deg, rgba(56, 87, 239, 1) 0%, rgba(216, 57, 93, 1) 100%); opacity: 0.3;
}
.lc-box--purple { background: var(--lc-purple); opacity: 0.1; }
.lc-box--logo {
background: var(--lc-gray);
display: grid; place-items: center;
transition: background-color 0.35s var(--lol-ease), box-shadow 0.35s var(--lol-ease);
}
.lc-box--logo:hover { background: #fff; box-shadow: 0 10px 30px -12px rgba(0, 36, 51, 0.28); }
/* Logos: black & white by default, real colours on hover/focus.
Works the same for the text wordmarks and for real ![]()
/