:root{ color-scheme: dark; --bg:#000000; --bg-2:#0a0a0a; --bg-3:#121110; --bg-4:#1c1a17; --border:#2a2620; --border-soft:#1a1814; --text:#f5f3ee; --text-muted:#a8a49a; --text-subtle:#635e54; --accent:#d4af37; --accent-2:#d4af37; --accent-3:#d4af37; --gold:#d4af37; --success:#e8e3d6; --danger:#e8e3d6; --grad-1: linear-gradient(135deg,#e8c86a 0%,#a97e1f 100%); --grad-2: linear-gradient(135deg,#d4af37 0%,#8c6d1f 100%); --grad-gold: linear-gradient(135deg,#f0d585 0%,#b8892a 100%); --r:10px; --r-lg:16px; --r-xl:22px; --r-full:999px; --shadow: 0 10px 30px rgb(0 0 0 / 60%); --transition: .18s cubic-bezier(.4,0,.2,1); } /* ===== REVEAL ON SCROLL ===== Elements start hidden and animate in when they actually enter the viewport (ui.js's observeReveals wires the IntersectionObserver and sets --rv to the element's index within its group, which drives the stagger). The `html.js` guard is load-bearing: the hidden state only applies once JS has confirmed it's running. Scripting off → `.js` never gets set and every .reveal stays fully visible. Scripting on but broken is the case that actually bit us — the inline script sets `.js` before it knows whether app.js will survive, and app.js once shipped with an unbalanced brace, which left the whole page at opacity 0. That inline script now also runs a 3s watchdog that strips `.js` again unless initMotion() has set `.js-motion`. So the guarantee holds in both directions: a module that never runs cannot leave the page blank. */ .reveal{opacity:1;transform:none;} html.js .reveal{ opacity:0; transform:translateY(18px); transition:opacity .62s cubic-bezier(.2,.7,.2,1),transform .62s cubic-bezier(.2,.7,.2,1); transition-delay:calc(var(--rv,0) * 70ms); will-change:opacity,transform; } html.js .reveal.is-in{opacity:1;transform:none;} /* Once it has played, drop the compositor hint — keeping will-change on every revealed node permanently is what makes long pages start to feel heavy. */ html.js .reveal.is-done{will-change:auto;transition-delay:0ms;} .icon{width:1em;height:1em;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;display:inline-block;vertical-align:-2px;} .check-icon{width:14px;height:14px;flex-shrink:0;margin-top:2px;} *{box-sizing:border-box;} html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden;} h1,h2,h3,h4{font-family:'Space Grotesk',sans-serif;letter-spacing:-.02em;margin:0;} a{color:inherit;text-decoration:none;} button{font-family:inherit;} ::-webkit-scrollbar{width:8px;height:8px;} ::-webkit-scrollbar-track{background:var(--bg-2);} ::-webkit-scrollbar-thumb{background:var(--bg-4);border-radius:4px;} /* ===== NAV — fully floating, no bar background ===== */ .nav-shell{position:sticky;top:0;z-index:50;padding:18px 20px 0;background:transparent;pointer-events:none;} .nav-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:1180px;margin:0 auto;pointer-events:none;} .brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:16px;flex-shrink:0;cursor:pointer;pointer-events:auto;} .brand-mark{width:40px;height:40px;border-radius:10px;background:transparent;display:flex;align-items:center;justify-content:center;color:var(--gold);} .brand-mark .icon{width:26px;height:26px;} .brand span{color:var(--gold);} .nav-bar{position:relative;display:flex;align-items:center;gap:2px;margin:0 auto;padding:4px;border:1px solid var(--border);border-radius:999px;background:rgba(10,10,10,.55);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);flex:1;max-width:520px;pointer-events:auto;box-shadow:0 8px 24px rgb(0 0 0 / 35%);} .nav-slot{flex:1;text-align:center;padding:8px 10px;border-radius:999px;color:var(--text-muted);font-size:13px;font-weight:600;cursor:pointer;transition:var(--transition);border:none;background:none;white-space:nowrap;} .nav-slot:hover{color:var(--text);} .nav-slot.is-active{background:var(--bg-4);color:var(--gold);box-shadow:inset 0 1px 0 rgb(255 255 255 / 6%),inset 0 0 0 1px rgb(212 175 55 / 25%);} .nav-right{display:flex;align-items:center;gap:8px;flex-shrink:0;pointer-events:auto;} .icon-btn{width:36px;height:36px;border-radius:999px;border:1px solid var(--border);background:rgba(10,10,10,.55);backdrop-filter:blur(18px);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-muted);transition:var(--transition);} .icon-btn:hover{color:var(--gold);border-color:var(--gold);} .avatar-btn{width:36px;height:36px;border-radius:999px;background:var(--bg-3);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;cursor:pointer;border:1px solid var(--gold);color:var(--gold);} .menu-toggle{display:none;} @media (max-width:760px){ .nav-bar{display:none;} .menu-toggle{display:flex;} } /* mobile drawer */ .drawer-backdrop{position:fixed;inset:0;background:rgb(0 0 0 / 45%);z-index:90;opacity:0;pointer-events:none;transition:opacity .2s;} .drawer-backdrop.open{opacity:1;pointer-events:auto;} /* A short dropdown hanging from the hamburger button — top-right anchored, sized to its content — not a full-height slide-in panel. Scales up from its top-right corner like the notification panel does. */ .drawer{position:fixed;top:70px;right:20px;left:auto;bottom:auto;width:min(230px,calc(100vw - 32px));max-height:min(70svh,calc(100dvh - 86px));overflow-y:auto;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow);z-index:91;opacity:0;transform:translateY(-6px) scale(.94);transform-origin:top right;pointer-events:none;transition:opacity .18s ease,transform .22s cubic-bezier(.2,.9,.25,1.1);padding:8px;display:flex;flex-direction:column;gap:2px;} .drawer.open{opacity:1;transform:none;pointer-events:auto;} .drawer-link{padding:11px 13px;border-radius:var(--r);color:var(--text-muted);font-weight:600;font-size:14px;cursor:pointer;} .drawer-link.is-active{background:var(--bg-4);color:#fff;} /* ===== PAGE / VIEWS ===== */ .page{width:min(100%,1180px);margin:0 auto;padding:0 20px 60px;} .view{display:none;animation:fadeIn .25s ease;} .view.active{display:block;} @keyframes fadeIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}} /* ===== HERO ===== */ .hero{position:relative;width:100vw;margin-left:calc(50% - 50vw);margin-top:-64px;min-height:64svh;overflow:hidden;background-image: linear-gradient(180deg, rgb(0 0 0 / 55%) 0%, rgb(0 0 0 / 72%) 55%, rgb(0 0 0 / 92%) 100%), url('../img/hero.jpg'); background-size:cover;background-position:center 30%;background-repeat:no-repeat; display:flex;align-items:center;justify-content:center;text-align:center;padding:124px 20px 40px;isolation:isolate;} .hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,rgb(255 255 255 / 4%) 1px,transparent 1px);background-size:26px 26px;z-index:-1;} .hero-inner{max-width:640px;} .hero-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:999px;background:var(--bg-3);border:1px solid var(--gold);font-size:12px;font-weight:700;color:var(--gold);margin-bottom:18px;} .hero-badge .icon{width:13px;height:13px;} .hero h1{font-size:clamp(30px,6vw,52px);font-weight:800;line-height:1.05;margin-bottom:14px;} .hero h1 .grad{background:var(--grad-1);-webkit-background-clip:text;background-clip:text;color:transparent;} .hero p{color:var(--text-muted);font-size:15px;line-height:1.6;max-width:480px;margin:0 auto 26px;} .hero-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;} /* Platform switch — a small sliding tab group, not a full nav. Sits between the headline and the subtitle so picking Discord/Telegram swaps both the gradient word in the h1 and the subtitle/CTA beneath it. */ .platform-switch{display:inline-flex;gap:3px;padding:4px;border-radius:999px;background:var(--bg-3);border:1px solid var(--border);margin:0 auto 16px;position:relative;} .platform-tab{padding:7px 15px;border-radius:999px;border:none;background:none;color:var(--text-muted);font-size:12.5px;font-weight:700;cursor:pointer;transition:var(--transition);position:relative;z-index:1;} .platform-tab:hover{color:var(--text);} .platform-tab.is-active{background:var(--grad-1);color:#0a0805;} .platform-tab.is-soon{opacity:.85;} /* ===== SEASON HERO (full-bleed art) ===== The art IS the background — no still image behind it, nothing letterboxed in a frame, just the picture bleeding edge to edge with a flat dark scrim over it so the heading stays readable. Two things this has to beat, both of which broke it before: - `section.hero.season-hero` (0,2,1) outranks `.hero` (0,1,0), so the hero.jpg background-image is actually cleared instead of showing through. - POSITIVE z-index on the art, not negative. `.hero` sets isolation:isolate, and a negative-z child inside that stacking context paints in a way that let the media end up laid out as a flex item beside the copy. Explicit 0 / 1 / 2 layering removes the ambiguity. The scrim is deliberately a flat black ramp — no colour gradients, no radial tint. Tinting fought the artwork's own palette instead of just darkening it. If the copy needs more separation, raise the black stops; don't reintroduce a hue. */ section.hero.season-hero{background-image:none;background-color:#000;padding:124px 20px 40px;} section.hero.season-hero::before{content:none;} .season-hero>.season-hero-art{position:absolute;top:0;left:0;width:100%;height:100%; object-fit:cover;object-position:center 28%;z-index:0;pointer-events:none;border:0; display:block;user-select:none;} .season-hero>.season-hero-veil{position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(180deg,rgb(0 0 0 / 30%) 0%,rgb(0 0 0 / 34%) 45%,rgb(0 0 0 / 86%) 100%);} .season-hero>.hero-inner{position:relative;z-index:2;} .season-hero .hero-inner h1,.season-hero .hero-inner p{text-shadow:0 2px 22px rgb(0 0 0 / 92%);} /* ===== TIER TRACK ===== */ .tier-track{display:flex;gap:14px;overflow-x:auto;padding:6px 2px 14px;scroll-snap-type:x proximity;} .tier-node{flex:0 0 auto;width:112px;scroll-snap-align:start;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--bg-2);padding:14px 10px;text-align:center;transition:var(--transition);} .tier-node:hover{border-color:var(--gold);transform:translateY(-2px);} .tier-node .tier-num{font-size:11px;font-weight:800;color:var(--text-subtle);margin-bottom:8px;} .tier-node .tier-icon{width:36px;height:36px;margin:0 auto 8px;border-radius:999px;background:var(--bg-3);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--text-muted);} .tier-node .tier-label{font-size:11px;font-weight:700;color:var(--text-muted);} .tier-node.unlocked{border-color:rgb(212 175 55 / 30%);} .tier-node.unlocked .tier-icon{color:var(--gold);border-color:rgb(212 175 55 / 40%);} .tier-node.unlocked .tier-num{color:var(--gold);} .tier-node.current{border-color:var(--gold);box-shadow:0 0 0 1px rgb(212 175 55 / 30%),var(--shadow);} .tier-node.current .tier-icon{background:var(--grad-1);color:#0a0805;border-color:transparent;} .tier-node.current .tier-num{color:var(--gold);} .tier-node.premium{background:linear-gradient(180deg,rgb(212 175 55 / 6%),var(--bg-2));} .tier-node.premium .tier-icon{color:var(--text-subtle);} .tier-node.locked-final{width:126px;} /* ===== BUTTONS ===== */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 20px;border-radius:var(--r);font-size:13.5px;font-weight:700;cursor:pointer;border:1px solid transparent;transition:var(--transition);white-space:nowrap;} .btn .icon{width:15px;height:15px;} .btn-primary{background:var(--grad-1);color:#0a0805;} .btn-primary:hover{filter:brightness(1.08);} .btn-secondary{background:var(--bg-3);color:var(--text);border-color:var(--border);} .btn-secondary:hover{background:var(--bg-4);border-color:var(--gold);} .btn-ghost{background:transparent;color:var(--text-muted);} .btn-ghost:hover{color:var(--gold);background:var(--bg-3);} .btn-gold{background:var(--grad-gold);color:#1a1200;} .btn-gold:hover{filter:brightness(1.06);} .btn-danger{background:rgb(245 243 238 / 6%);color:var(--text);border-color:var(--border);} .btn-danger:hover{background:rgb(245 243 238 / 10%);border-color:var(--text-muted);} .btn-block{width:100%;} .btn-sm{padding:7px 13px;font-size:12px;} .btn-icon-only{width:38px;height:38px;padding:0;border-radius:999px;} /* ===== SECTION HEADERS ===== */ .section{padding:44px 0;} .section-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:20px;gap:12px;flex-wrap:wrap;} .section-head h2{font-size:22px;font-weight:800;} .section-head p{color:var(--text-subtle);font-size:13px;margin-top:4px;} .section-head .btn{flex-shrink:0;} /* ===== GRID / CARDS ===== */ .grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;} .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;} .grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;} @media (max-width:900px){.grid-4{grid-template-columns:repeat(2,1fr);}.grid-3{grid-template-columns:repeat(2,1fr);}} @media (max-width:560px){.grid-4,.grid-3,.grid-2{grid-template-columns:1fr;}} .card{border:1px solid var(--border);border-radius:var(--r-lg);background:var(--bg-2);padding:18px;transition:var(--transition);position:relative;overflow:hidden;} .card:hover{border-color:var(--gold);transform:translateY(-2px);box-shadow:var(--shadow);} .card-glow::before{content:"";position:absolute;inset:0;background:var(--grad-1);opacity:0;transition:var(--transition);z-index:-1;} /* feature card w/ art — monochrome gold-on-black, no rainbow fills */ .feature-card{position:relative;min-height:200px;border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--border);display:flex;align-items:flex-end;cursor:pointer;background:var(--bg-3);transition:var(--transition);} .feature-card::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 20%, rgb(212 175 55 / 16%), transparent 60%),var(--bg-3);} .feature-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgb(0 0 0 / 10%) 0%,rgb(0 0 0 / 40%) 45%,rgb(0 0 0 / 94%) 100%);} .feature-card:hover{border-color:var(--gold);transform:translateY(-3px);box-shadow:var(--shadow);} /* `.art` swaps the flat gradient panel for the card's own artwork, passed in as --art on the element. Lightly desaturated so four different paintings still read as one gold-on-black set; the ::after scrim keeps the label legible without burying the painting. Two things here are deliberate: 1. The full `background` shorthand, not a lone `background-image` longhand. The base rule (.feature-card::before) also uses the shorthand, so it sets background-color/size/position/repeat as a unit. Overriding only background-image here left the art layered over that rule's leftovers instead of replacing them cleanly. One complete layer, no interaction. 2. `var(--art, none)` — with no fallback, an --art that fails to resolve makes the whole declaration invalid at computed-value time, which is indistinguishable from the art simply not loading. The fallback degrades to the plain panel instead. The filter used to be saturate(.35) brightness(.62), which on top of the ::after scrim below multiplied out to roughly 3% of source luminance at the bottom of the card and ~46% at the top — dark source art crushed to a flat black panel. Keep any future adjustments multiplied against that scrim. */ .feature-card.art::before{background:var(--art, none) center/cover no-repeat;filter:saturate(.72) contrast(1.04) brightness(.92);transition:var(--transition);} .feature-card.art::after{background:linear-gradient(180deg,rgb(0 0 0 / 8%) 0%,rgb(0 0 0 / 32%) 45%,rgb(0 0 0 / 88%) 100%);} .feature-card.art:hover::before{filter:saturate(.9) contrast(1.06) brightness(1.04);transform:scale(1.04);} /* Hardcoded backstop. --art above is the mechanism of record, but it routes the URL through a custom property, and when the art failed to appear there was no way to tell "custom property didn't reach the pseudo-element" apart from "image didn't load" — both render an empty ::before. These four rules name the files directly, so the art paints even if the var() path breaks. Same URLs, so when --art works these are redundant, not additive. Keep both in sync. */ .feature-card.mode-dungeon::before{background:url('/assets/img/modes/dungeon.jpg') center/cover no-repeat;} .feature-card.mode-characters::before{background:url('/assets/img/modes/characters.jpg') center/cover no-repeat;} .feature-card.mode-arena::before{background:url('/assets/img/modes/arena.jpg') center/cover no-repeat;} .feature-card.mode-battlepass::before{background:url('/assets/img/modes/battlepass.jpg') center/cover no-repeat;} /* The Characters card is a plain div now that the page is gone — it shouldn't pretend to be clickable. */ .feature-card:not(a){cursor:default;} .feature-card:not(a):hover{border-color:var(--border);transform:none;box-shadow:none;} .feature-content{position:relative;z-index:1;padding:18px;} .feature-content h3{font-size:16px;font-weight:800;margin-bottom:5px;color:var(--text);} .feature-content p{font-size:12.5px;color:rgb(245 243 238 / 72%);line-height:1.4;max-width:200px;} .feature-icon{position:absolute;top:14px;right:14px;z-index:1;width:32px;height:32px;border-radius:999px;background:rgb(0 0 0 / 45%);border:1px solid rgb(212 175 55 / 30%);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;color:var(--gold);} .feature-icon .icon{width:15px;height:15px;} /* stat pill row */ .stat-row{display:flex;gap:12px;flex-wrap:wrap;} .stat-pill{flex:1;min-width:130px;border:1px solid var(--border);background:var(--bg-2);border-radius:var(--r-lg);padding:14px 16px;} .stat-pill .label{font-size:11px;color:var(--text-subtle);font-weight:700;text-transform:uppercase;letter-spacing:.5px;} .stat-pill .value{font-size:22px;font-weight:800;margin-top:4px;font-family:'Space Grotesk',sans-serif;} .stat-pill .value.gold{color:var(--gold);} .stat-pill .value.acc{color:var(--text);} /* ===== PROFILE ===== */ /* ===== PROFILE — Discord style banner + pfp ===== */ .profile-banner{position:relative;width:100%;height:200px;margin-top:8px;border-radius:var(--r-lg);background: radial-gradient(circle at 20% 30%, rgb(212 175 55 / 22%), transparent 55%), radial-gradient(circle at 80% 70%, rgb(212 175 55 / 12%), transparent 50%), var(--bg-3); border:1px solid var(--border);overflow:hidden;} .profile-banner::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,rgb(255 255 255 / 5%) 1px,transparent 1px);background-size:22px 22px;} .profile-banner-edit{position:absolute;right:20px;bottom:14px;display:flex;align-items:center;gap:6px;padding:7px 13px;border-radius:999px;background:rgb(0 0 0 / 55%);border:1px solid var(--border);backdrop-filter:blur(8px);font-size:12px;font-weight:700;color:var(--text-muted);cursor:pointer;transition:var(--transition);} .profile-banner-edit:hover{color:var(--gold);border-color:var(--gold);} .profile-banner-edit .icon{width:14px;height:14px;} .profile-head-row{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap;} .profile-pfp-wrap{position:relative;flex-shrink:0;margin-top:-52px;} .profile-pfp{width:104px;height:104px;border-radius:999px;background:var(--grad-1);display:flex;align-items:center;justify-content:center;font-size:34px;font-weight:800;color:#0a0805;border:5px solid var(--bg);box-shadow:0 8px 24px rgb(0 0 0 / 50%);} .profile-status{position:absolute;right:6px;bottom:6px;width:20px;height:20px;border-radius:999px;background:var(--gold);border:4px solid var(--bg);} .profile-info-row{flex:1;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding-bottom:6px;} .profile-info{min-width:180px;} .profile-info h2{font-size:22px;font-weight:800;display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0;color:var(--text);} .profile-name-text{min-width:0;overflow-wrap:break-word;} .profile-info .handle{color:var(--text-subtle);font-size:13px;margin-top:2px;} .badge{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:999px;font-size:10.5px;font-weight:800;flex-shrink:0;white-space:nowrap;} .badge-gold{background:rgb(212 175 55 / 15%);color:var(--gold);border:1px solid rgb(212 175 55 / 30%);} .badge-lvl{background:rgb(245 243 238 / 8%);color:var(--text);border:1px solid var(--border);} .profile-actions{display:flex;gap:8px;flex-wrap:wrap;} .xp-track{margin-top:10px;height:8px;border-radius:999px;background:var(--bg-4);overflow:hidden;} .xp-fill{height:100%;background:var(--grad-1);border-radius:999px;} .tab-row{display:flex;gap:6px;border-bottom:1px solid var(--border);margin-bottom:20px;overflow-x:auto;} .tab-btn{padding:10px 16px;font-size:13px;font-weight:700;color:var(--text-muted);cursor:pointer;border:none;background:none;border-bottom:2px solid transparent;white-space:nowrap;transition:var(--transition);} .tab-btn:hover{color:var(--text);} .tab-btn.active{color:var(--text);border-color:var(--gold);} .tab-panel{display:none;} .tab-panel.active{display:block;animation:fadeIn .2s ease;} .inv-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;} @media (max-width:700px){.inv-grid{grid-template-columns:repeat(4,1fr);}} .inv-slot{aspect-ratio:1;border:1px solid var(--border);border-radius:var(--r);background:var(--bg-2);display:flex;align-items:center;justify-content:center;font-size:22px;cursor:pointer;transition:var(--transition);position:relative;} .inv-slot:hover{border-color:var(--gold);background:var(--bg-3);} /* Slots are