/* ============================================================================ esports.css — TheLazyGamers flagship esports redesign layer (2026-06-02) Additive, homepage-scoped. Loads AFTER style.css. Never overrides core tokens destructively — new surfaces reuse themed vars (--card/--border/ --text) so light + per-game themes stay readable; neon accents are --es-*. Palette = HYBRID: neon blue/purple/cyan primary + ember/gold secondary. All heavy motion is gated by prefers-reduced-motion + .es-lite (mobile). ============================================================================ */ :root{ /* ── neon primary ── */ --es-blue:#2b6bff; --es-blue-bright:#4d8bff; --es-purple:#a64dff; --es-violet:#7a3cff; --es-cyan:#00e5ff; /* ── ember/gold secondary (carry brand warmth) ── */ --es-ember:#ff8800; --es-gold:#ffb000; /* ── ink ── */ --es-ink:#03040e; --es-panel:#0a0d1a; /* ── glows ── */ --es-glow-blue:rgba(43,107,255,.45); --es-glow-purple:rgba(166,77,255,.42); --es-glow-cyan:rgba(0,229,255,.38); --es-glow-ember:rgba(255,136,0,.40); /* ── gradients ── */ --es-grad:linear-gradient(120deg,#2b6bff 0%,#a64dff 52%,#00e5ff 100%); --es-grad-ember:linear-gradient(120deg,#ff8800 0%,#ffb000 100%); --es-grad-mix:linear-gradient(120deg,#2b6bff 0%,#a64dff 45%,#ff8800 100%); /* ── glass ── */ --es-glass:rgba(12,16,32,.55); --es-glass-brd:rgba(122,162,255,.18); --es-elev-1:0 8px 24px rgba(0,0,0,.45); --es-elev-2:0 18px 48px rgba(0,0,0,.55); --es-ease:cubic-bezier(.22,.61,.36,1); } /* native smooth anchor scrolling (library-free; respects reduced-motion) */ @media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}} /* ───────────────────────────── reveal system ───────────────────────────── JS adds .is-in when the element scrolls into view. CSS-only fallback keeps content visible if JS/GSAP never runs (progressive enhancement). */ .es-reveal{opacity:0;transform:translate3d(0,28px,0);transition:opacity .7s var(--es-ease),transform .7s var(--es-ease);will-change:opacity,transform} .es-reveal.is-in{opacity:1;transform:none} .es-reveal[data-rv="left"]{transform:translate3d(-32px,0,0)} .es-reveal[data-rv="right"]{transform:translate3d(32px,0,0)} .es-reveal[data-rv="zoom"]{transform:scale(.94)} .es-reveal.is-in[data-rv]{transform:none} .es-stagger>*{opacity:0;transform:translate3d(0,24px,0);transition:opacity .6s var(--es-ease),transform .6s var(--es-ease)} .es-stagger.is-in>*{opacity:1;transform:none} /* If JS is disabled, never hide content. */ .no-js .es-reveal,.no-js .es-stagger>*{opacity:1!important;transform:none!important} @media (prefers-reduced-motion:reduce){ .es-reveal,.es-stagger>*{opacity:1!important;transform:none!important;transition:none!important} } /* ───────────────────────────── mouse glow ──────────────────────────────── */ #es-cursor-glow{ position:fixed;top:0;left:0;width:520px;height:520px;border-radius:50%; margin:-260px 0 0 -260px;pointer-events:none;z-index:2;opacity:0; background:radial-gradient(circle,rgba(77,139,255,.16) 0%,rgba(166,77,255,.10) 38%,transparent 70%); mix-blend-mode:screen;transition:opacity .4s ease;will-change:transform;contain:layout style paint; } body.es-glow-on #es-cursor-glow{opacity:1} .es-lite #es-cursor-glow{display:none} @media (prefers-reduced-motion:reduce){#es-cursor-glow{display:none}} /* ───────────────────────────── hero upgrade ────────────────────────────── */ /* Enhance — do not replace — the existing .hero. Layers sit BEHIND content. */ .hero{isolation:isolate;overflow:clip} .hero .es-hero-bg{position:absolute;inset:0;z-index:-2;pointer-events:none;overflow:hidden} .hero .es-hero-canvas{position:absolute;inset:0;z-index:-1;pointer-events:none;width:100%;height:100%} /* ambient drifting light blooms */ .es-hero-bg::before,.es-hero-bg::after{content:"";position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;will-change:transform} .es-hero-bg::before{width:46vw;height:46vw;left:-8vw;top:-10vw;background:radial-gradient(circle,var(--es-glow-blue),transparent 65%);animation:es-float1 18s ease-in-out infinite} .es-hero-bg::after{width:40vw;height:40vw;right:-6vw;bottom:-12vw;background:radial-gradient(circle,var(--es-glow-purple),transparent 65%);animation:es-float2 22s ease-in-out infinite} /* parallax grid floor */ .es-hero-grid{position:absolute;inset:0;z-index:-1;pointer-events:none; background-image:linear-gradient(rgba(77,139,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(77,139,255,.07) 1px,transparent 1px); background-size:54px 54px;mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,#000 35%,transparent 78%); -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,#000 35%,transparent 78%);will-change:transform} @keyframes es-float1{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(4vw,3vw,0)}} @keyframes es-float2{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(-3vw,-4vw,0)}} @media (prefers-reduced-motion:reduce){.es-hero-bg::before,.es-hero-bg::after{animation:none}} /* hero logo gets a soft neon aura + parallax hook */ .hero-logo-float{will-change:transform} .hero-logo-img{filter:drop-shadow(0 0 26px rgba(77,139,255,.28)) drop-shadow(0 0 50px rgba(166,77,255,.18))} /* glitch treatment — sophisticated, used ONLY on .es-glitch (hero highlight) */ .es-glitch{position:relative;display:inline-block} .es-glitch[data-text]::before,.es-glitch[data-text]::after{ content:attr(data-text);position:absolute;inset:0;pointer-events:none;opacity:.0;clip-path:inset(0)} .es-glitch.is-glitch::before{opacity:.9;color:var(--es-cyan);transform:translate(-2px,0);animation:es-gl1 .42s steps(2) 1} .es-glitch.is-glitch::after{opacity:.9;color:var(--es-purple);transform:translate(2px,0);animation:es-gl2 .42s steps(2) 1} @keyframes es-gl1{0%{clip-path:inset(0 0 72% 0)}50%{clip-path:inset(58% 0 8% 0)}100%{clip-path:inset(0 0 92% 0)}} @keyframes es-gl2{0%{clip-path:inset(72% 0 0 0)}50%{clip-path:inset(8% 0 58% 0)}100%{clip-path:inset(92% 0 0 0)}} @media (prefers-reduced-motion:reduce){.es-glitch::before,.es-glitch::after{display:none}} /* ───────────────────────────── design system ───────────────────────────── */ /* Glass card — reuses themed --card/--border for light-theme safety, then layers neon edge + elevation on dark. */ .es-card{ position:relative;border-radius:18px;padding:22px; background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0)) , var(--card); border:1px solid var(--border);box-shadow:var(--es-elev-1); transition:transform .35s var(--es-ease),box-shadow .35s var(--es-ease),border-color .35s var(--es-ease); overflow:hidden;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)} .es-card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none; background:var(--es-grad);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .35s var(--es-ease)} .es-card::after{content:"";position:absolute;left:50%;top:-40%;width:60%;height:80%;transform:translateX(-50%); background:radial-gradient(ellipse,var(--es-glow-purple),transparent 70%);opacity:0;filter:blur(28px); transition:opacity .4s var(--es-ease);pointer-events:none} .es-card:hover{transform:translateY(-6px);box-shadow:var(--es-elev-2);border-color:transparent} .es-card:hover::before{opacity:.9} .es-card:hover::after{opacity:.55} /* tilt wrapper keeps the glow centred on the un-tilted parent */ [data-tilt]{transform-style:preserve-3d;will-change:transform} [data-tilt] .es-tilt-pop{transform:translateZ(40px)} .es-section{padding:72px 0;position:relative} .es-kicker{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-head);font-size:11px; letter-spacing:.18em;text-transform:uppercase;font-weight:800; background:var(--es-grad);-webkit-background-clip:text;background-clip:text;color:transparent} .es-h2{font-family:var(--font-head);font-weight:800;line-height:1.05;letter-spacing:.01em; font-size:clamp(1.7rem,4.2vw,3rem);margin:.5rem 0 .6rem} .es-h2 .es-grad{background:var(--es-grad);-webkit-background-clip:text;background-clip:text;color:transparent} .es-lead{color:var(--muted);max-width:560px;font-size:clamp(.92rem,1.6vw,1.02rem);line-height:1.7} .es-center{text-align:center;margin:0 auto} .es-center .es-lead{margin-inline:auto} /* CTA button — animated gradient sweep + lift. .es-btn-ghost = neon outline. */ .es-btn{position:relative;display:inline-flex;align-items:center;gap:9px;cursor:pointer; font-family:var(--font-head);font-weight:800;font-size:13px;letter-spacing:.06em;text-transform:uppercase; padding:14px 26px;border-radius:12px;border:0;color:#fff;text-decoration:none;overflow:hidden; background:linear-gradient(120deg,#2b6bff,#a64dff,#00e5ff,#2b6bff);background-size:280% 100%; box-shadow:0 8px 26px rgba(43,107,255,.34);transition:transform .25s var(--es-ease),box-shadow .25s var(--es-ease),background-position .6s var(--es-ease)} .es-btn:hover{transform:translateY(-3px);background-position:100% 0;box-shadow:0 14px 38px rgba(166,77,255,.45)} .es-btn:active{transform:translateY(-1px)} .es-btn.es-btn-ember{background:linear-gradient(120deg,#ff7a00,#ffb000,#ff8800,#ff7a00);background-size:280% 100%;box-shadow:0 8px 26px rgba(255,136,0,.34)} .es-btn.es-btn-ember:hover{box-shadow:0 14px 38px rgba(255,176,0,.45)} .es-btn-ghost{background:transparent;color:var(--text);border:1px solid var(--es-glass-brd);box-shadow:none} .es-btn-ghost::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none; background:var(--es-grad);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask-composite:exclude;opacity:.6} .es-btn-ghost:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(77,139,255,.22)} /* pill / chip */ .es-chip{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:50px;font-size:11.5px; font-weight:700;letter-spacing:.02em;background:var(--card);border:1px solid var(--border);color:var(--text)} .es-live{position:relative;padding-left:20px} .es-live::before{content:"";position:absolute;left:9px;top:50%;width:7px;height:7px;border-radius:50%; transform:translateY(-50%);background:#ff3860;box-shadow:0 0 0 0 rgba(255,56,96,.7);animation:es-pulse 1.6s infinite} @keyframes es-pulse{0%{box-shadow:0 0 0 0 rgba(255,56,96,.6)}70%{box-shadow:0 0 0 9px rgba(255,56,96,0)}100%{box-shadow:0 0 0 0 rgba(255,56,96,0)}} /* generic responsive grids */ .es-grid{display:grid;gap:20px} .es-grid.cols-3{grid-template-columns:repeat(3,1fr)} .es-grid.cols-2{grid-template-columns:repeat(2,1fr)} .es-grid.cols-4{grid-template-columns:repeat(4,1fr)} @media (max-width:980px){.es-grid.cols-3,.es-grid.cols-4{grid-template-columns:repeat(2,1fr)}} @media (max-width:620px){.es-grid.cols-2,.es-grid.cols-3,.es-grid.cols-4{grid-template-columns:1fr}} /* ── Featured / editorial cards ── */ .es-feat{display:flex;flex-direction:column;min-height:230px} .es-feat-tag{align-self:flex-start;margin-bottom:auto} .es-feat h3{font-family:var(--font-head);font-size:1.18rem;line-height:1.2;margin:14px 0 6px} .es-feat p{color:var(--muted);font-size:.9rem;line-height:1.6} .es-feat .es-feat-cta{margin-top:14px;font-weight:800;font-size:12px;letter-spacing:.05em;text-transform:uppercase; background:var(--es-grad);-webkit-background-clip:text;background-clip:text;color:transparent} /* ── Videos / streams ── */ .es-vid{padding:0;overflow:hidden} .es-vid-thumb{position:relative;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center; background:linear-gradient(135deg,#10183a,#1a1030);overflow:hidden} .es-vid-thumb::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 60%,transparent,rgba(0,0,0,.5))} .es-vid-play{position:relative;z-index:2;width:58px;height:58px;border-radius:50%;display:grid;place-items:center; background:rgba(10,14,30,.5);border:1px solid var(--es-glass-brd);backdrop-filter:blur(6px);color:#fff;font-size:20px; transition:transform .3s var(--es-ease),box-shadow .3s var(--es-ease)} .es-card:hover .es-vid-play{transform:scale(1.12);box-shadow:0 0 28px var(--es-glow-cyan)} .es-vid-meta{padding:16px 18px} .es-vid-meta h3{font-size:1rem;line-height:1.25;margin:0 0 6px;font-family:var(--font-head);font-weight:700} .es-vid-row{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:12px} .es-vid-badge{position:absolute;top:12px;left:12px;z-index:3} /* ── Tournament Center ── */ .es-tc-wrap{display:grid;grid-template-columns:1.3fr .7fr;gap:20px} @media (max-width:900px){.es-tc-wrap{grid-template-columns:1fr}} .es-match{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;padding:16px 18px;margin-bottom:12px} .es-match:last-child{margin-bottom:0} .es-team{display:flex;align-items:center;gap:10px;min-width:0} .es-team.right{justify-content:flex-end;text-align:right} .es-team img,.es-team .es-team-ph{width:38px;height:38px;border-radius:10px;object-fit:contain;flex:0 0 auto; background:var(--bg2);border:1px solid var(--border);display:grid;place-items:center;font-weight:800;font-size:13px} .es-team b{font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .es-vs{font-family:var(--font-head);font-weight:800;font-size:.78rem;letter-spacing:.08em; padding:6px 12px;border-radius:9px;background:var(--bg2);border:1px solid var(--border);color:var(--es-cyan);white-space:nowrap} .es-vs.score{color:#fff;background:var(--es-grad);border:0} .es-rank{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;margin-bottom:10px; background:var(--card);border:1px solid var(--border)} .es-rank:last-child{margin-bottom:0} .es-rank-no{font-family:var(--font-head);font-weight:800;width:26px;text-align:center;color:var(--es-cyan)} .es-rank-no.top{background:var(--es-grad);-webkit-background-clip:text;background-clip:text;color:transparent} .es-rank b{flex:1;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .es-rank span{font-size:12px;color:var(--muted);font-weight:700} /* ── Community hub ── */ .es-comm h3{font-family:var(--font-head);font-size:1.05rem;margin:12px 0 6px;font-weight:700} .es-comm p{color:var(--muted);font-size:.88rem;line-height:1.6} .es-comm-ico{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;font-size:22px; background:linear-gradient(135deg,rgba(43,107,255,.18),rgba(166,77,255,.18));border:1px solid var(--es-glass-brd)} .es-creator{display:flex;align-items:center;gap:12px;padding:12px 14px} .es-creator .es-av{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-family:var(--font-head); font-weight:800;color:#fff;background:var(--es-grad);flex:0 0 auto} .es-creator b{font-size:.92rem} .es-creator span{display:block;font-size:12px;color:var(--muted)} /* section divider glow line */ .es-rule{height:1px;border:0;margin:0;background:linear-gradient(90deg,transparent,var(--es-glass-brd),transparent)} /* ── Tournament Center · live data (squad rows, skeletons, empty states) ── */ .es-sq{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:12px;margin-bottom:9px;background:var(--bg2);border:1px solid var(--border)} .es-sq:last-child{margin-bottom:0} .es-sq-av{width:36px;height:36px;border-radius:10px;flex:0 0 auto;object-fit:contain;background:var(--card); border:1px solid var(--border);display:grid;place-items:center;font-family:var(--font-head);font-weight:800;font-size:12px;color:var(--es-cyan)} .es-sq-name{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px} .es-sq-name b{font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .es-sq-name span{font-size:11px;color:var(--muted);font-weight:700} .es-sq-status{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;padding:3px 9px;border-radius:50px; border:1px solid var(--border);color:var(--muted);white-space:nowrap;flex:0 0 auto} .es-sq-status.confirmed,.es-sq-status.approved{color:var(--success);border-color:rgba(0,255,136,.32)} .es-sq-status.pending{color:var(--gold);border-color:rgba(255,176,0,.32)} .es-tc-empty{text-align:center;padding:26px 14px;color:var(--muted)} .es-tc-empty .ico{font-size:30px;margin-bottom:8px;opacity:.85} .es-tc-empty b{display:block;color:var(--text);font-family:var(--font-head);font-size:.98rem;margin-bottom:5px} .es-tc-empty p{font-size:12.5px;line-height:1.55;max-width:240px;margin:0 auto} .es-skel{height:46px;border-radius:12px;margin-bottom:9px;background:linear-gradient(100deg,var(--bg2) 30%,rgba(122,162,255,.08) 50%,var(--bg2) 70%); background-size:200% 100%;animation:es-shimmer 1.3s linear infinite} .es-skel:last-child{margin-bottom:0} @keyframes es-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}} @media (prefers-reduced-motion:reduce){.es-skel{animation:none}} /* ═══ Apply the redesign FX to the EXISTING real sections ═══ */ /* Glass "running" neon border on existing cards — hover-activated, mirrors .es-card */ .es-fx{position:relative;transition:transform .3s var(--es-ease),box-shadow .35s var(--es-ease)} .es-fx::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;z-index:2; background:linear-gradient(120deg,var(--es-blue),var(--es-purple),var(--es-cyan),var(--es-ember),var(--es-blue)); background-size:300% 100%; -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude; opacity:.16;transition:opacity .4s var(--es-ease)} .es-fx:hover::before,.es-fx:focus-visible::before{opacity:.95;animation:es-run 2.4s linear infinite} @keyframes es-run{to{background-position:300% 0}} .es-fx:hover{box-shadow:0 16px 42px rgba(43,107,255,.22)} .es-lite .es-fx::before{display:none} /* Premium hover on EVERY interactive button across the homepage */ .btn,.gtab,.verify-btn,.am-login-btn,.file-btn,.mp-filter-btn,.mp-post-btn,.social-pill, .order-btn,.trn-stat-pill,.prod-cta-btn,.prod-plan-order-btn,.mp-modal .btn{ transition:transform .22s var(--es-ease),box-shadow .25s var(--es-ease),border-color .25s var(--es-ease)} .btn:hover,.gtab:hover,.verify-btn:hover,.am-login-btn:hover,.file-btn:hover,.mp-filter-btn:hover, .mp-post-btn:hover,.social-pill:hover,.order-btn:hover,.prod-cta-btn:hover,.prod-plan-order-btn:hover{ transform:translateY(-2px); box-shadow:0 8px 22px rgba(43,107,255,.28),0 0 0 1px rgba(122,162,255,.30)} .gtab:hover,.gtab.active{box-shadow:0 6px 18px rgba(43,107,255,.22)} .es-lite .btn:hover,.es-lite .gtab:hover,.es-lite .verify-btn:hover,.es-lite .order-btn:hover{transform:none} /* Leftovers: marketplace filter controls (selects/search) + footer social pills get a color-cycling "running" glow on hover. Tagged with .es-glow by initAutoFX (covers dynamically-rendered social pills via MutationObserver); forced animation wins over brand-specific :hover rules / native