/* ===== Global base, typography, motion, atmosphere ===== */ /* ============================================================================ cw-lux.css — GROUP: Global base / typography / motion / atmosphere Additive elevation layer, loaded LAST. Reuses cw.css tokens; overrides only PAINT (never geometry) so layout + light theme stay intact. ============================================================================ */ /* --- Shared refined vars (additive only; never overwrite cw.css tokens) --- */ :root { color-scheme: dark; /* soft accent focus halo */ --lux-ring: 0 0 0 4px color-mix(in srgb, var(--cw-accent) 22%, transparent); /* top-lit inner highlight for surfaces (white sheen; vanishes on light) */ --lux-elev-grad: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 44%); /* hairline gradient border image (light edge -> faint) */ --lux-hairline: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.03)); /* subtle brand glow for key/hover states */ --lux-glow-accent: 0 8px 30px -10px color-mix(in srgb, var(--cw-accent) 55%, transparent); } /* [QA] data-theme sits on ; keep the html canvas in sync for light mode */ :root[data-theme="light"], :root:has(body[data-theme="light"]) { color-scheme: light; } body[data-theme="light"] { color-scheme: light; } /* --- Global base: crisp rendering + on-brand native controls --- */ body.cw-body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; accent-color: var(--cw-accent); } .cw-body input, .cw-body textarea, .cw-body select { caret-color: var(--cw-accent); } /* --- Atmosphere: richer radial glow mesh (DARK ONLY — light keeps its own rule; the trailing linear-gradient is a hardcoded dark, so we gate the whole override to :not([data-theme="light"]) to protect the light theme). We touch ONLY `background` — position/inset/z-index/content/pointer-events remain owned by cw.css. The ::after tactical grid is intentionally left untouched. */ body.cw-body:not([data-theme="light"])::before { background: radial-gradient(58% 42% at 5% -8%, color-mix(in srgb, var(--cw-accent) 18%, transparent), transparent 62%), radial-gradient(52% 40% at 104% -4%, rgba(150,96,255,.13), transparent 58%), radial-gradient(82% 55% at 50% 118%, rgba(37,211,238,.06), transparent 62%), radial-gradient(120% 92% at 50% -22%, color-mix(in srgb, var(--cw-accent-2) 8%, transparent), transparent 55%), linear-gradient(180deg, #0b0d15 0%, #07080f 58%, #05060b 100%); } /* --- Custom scrollbar: thin, bg-3 track / border-2 thumb, accent on hover. `.cw-side-nav` keeps its own 4px scrollbar (more specific — untouched). --- */ * { scrollbar-width: thin; scrollbar-color: var(--cw-border-2) var(--cw-bg-3); } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--cw-bg-3); } ::-webkit-scrollbar-corner { background: var(--cw-bg-3); } ::-webkit-scrollbar-thumb { background: var(--cw-border-2); border-radius: 10px; border: 2px solid var(--cw-bg-3); background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--cw-accent) 55%, var(--cw-border-2)); background-clip: padding-box; } /* --- Selection: on-brand accent, theme-safe text colour --- */ ::selection { background: color-mix(in srgb, var(--cw-accent) 32%, transparent); color: var(--cw-fg); } ::-moz-selection { background: color-mix(in srgb, var(--cw-accent) 32%, transparent); color: var(--cw-fg); } /* --- Focus-visible: crisp accent outline + soft halo (transient, keyboard only). Scoped to elements that don't carry their own resting box-shadow. -- */ a:focus-visible, button:focus-visible, summary:focus-visible, .cw-btn:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--cw-accent); outline-offset: 2px; box-shadow: var(--lux-ring); } /* --- Numerics: guarantee tabular figures on ratings / MMR / scores / stats -- */ .cw-num, .cw-score, .cw-mmr, .cw-rating, [class*="rating"], [class*="mmr"], [class*="score"], [class*="elo"] { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* --- Typography: tighten display headings a touch for a premium, dense feel -- */ h1, h2, .cw-card-h h2, .cw-card-h h3 { letter-spacing: -.024em; } h1 { letter-spacing: -.03em; } .cw-page-title, .cw-hero h1 { letter-spacing: -.034em; } .cw-card-h h2, .cw-card-h h3 { letter-spacing: -.015em; } h1, h2, .cw-hero h1, .cw-page-title { text-wrap: balance; } /* ============================================================================ MOTION — reusable staggered fade-up reveal on cards (first paint only). Fully gated behind reduced-motion; animates transform/opacity only. Wins by source order over cw.css's cw-arena-rise; stagger re-declared so it is self-contained. A reduce-motion request removes all of it. ============================================================================ */ @media (prefers-reduced-motion: no-preference) { @keyframes lux-rise { from { opacity: 0; transform: translate3d(0, 10px, 0) scale(.996); } to { opacity: 1; transform: none; } } html { scroll-behavior: smooth; } .cw-card { animation: lux-rise .5s cubic-bezier(.22,.7,.2,1) both; } .cw-card:nth-of-type(1) { animation-delay: .02s; } .cw-card:nth-of-type(2) { animation-delay: .07s; } .cw-card:nth-of-type(3) { animation-delay: .12s; } .cw-card:nth-of-type(4) { animation-delay: .17s; } .cw-card:nth-of-type(5) { animation-delay: .22s; } .cw-card:nth-of-type(6) { animation-delay: .27s; } .cw-card:nth-of-type(n+7) { animation-delay: .3s; } } /* Mobile: soften the reveal distance so it never feels heavy on a phone. */ @media (prefers-reduced-motion: no-preference) and (max-width: 560px) { @keyframes lux-rise { from { opacity: 0; transform: translate3d(0, 6px, 0); } to { opacity: 1; transform: none; } } } /* ===== Homepage hero + stat tiles ===== */ /* ===================================================================== cw-lux.css — HOMEPAGE HERO + STAT TILES (additive elevation layer) Targets: .cw-home-hero (hero panel) + .cw-home-statbar .cw-home-stat. Composes over cw.css without changing markup or layout. Verified: hero is .cw-home-hero (position:relative; overflow:hidden), its bg is set with !important upstream -> we glow via ::before instead. ===================================================================== */ /* ---- Hero panel: deeper material + self-contained stacking ---------- */ .cw-home-hero { isolation: isolate; /* keep glow/content order inside hero */ border-color: var(--cw-border-2); /* crisper hairline (skin's is not !imp) */ box-shadow: inset 0 1px 0 color-mix(in srgb, var(--cw-fg) 7%, transparent), var(--cw-shadow-lg); } /* Dramatic layered glow painted OVER the panel bg, UNDER the content: strong orange bloom bottom-left + a subtle violet on the right. */ .cw-home-hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(560px 380px at 6% 116%, rgba(255,92,0,.32), transparent 62%), radial-gradient(300px 210px at 3% 106%, rgba(255,140,60,.20), transparent 60%), radial-gradient(440px 340px at 99% 110%, rgba(150,96,255,.15), transparent 60%); } /* every bit of hero content stays crisply above the glow */ .cw-home-hero-main, .cw-home-statbar { position: relative; z-index: 1; } /* keep the bloom a whisper on the light theme */ body[data-theme="light"] .cw-home-hero::before { opacity: .5; } /* headline: subtle warm drop-shadow (dark only, static, GPU-friendly) */ body:not([data-theme="light"]) .cw-home-hero h1 span { filter: drop-shadow(0 3px 20px rgba(255,85,0,.28)); } /* ---- Premium stat tiles (scoped to the homepage statbar) ------------ */ .cw-home-statbar .cw-home-stat { position: relative; /* top-lit surface (padding-box) + gradient hairline border (border-box) */ background: linear-gradient(180deg, var(--cw-bg-3), var(--cw-bg-2)) padding-box, linear-gradient(180deg, var(--cw-border-2), color-mix(in srgb, var(--cw-border) 70%, transparent)) border-box; border: 1px solid transparent; border-radius: var(--cw-radius); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--cw-fg) 6%, transparent), 0 10px 22px -16px rgba(0,0,0,.6); transition: transform .16s cubic-bezier(.2,.7,.2,1), box-shadow .16s ease, border-color .16s ease; } /* thin accent top-line — quiet by default, brightens on hover */ .cw-home-statbar .cw-home-stat::before { content: ""; position: absolute; top: -1px; left: 16px; right: 16px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--cw-accent) 85%, transparent), transparent); opacity: .35; transition: opacity .16s ease; pointer-events: none; } /* big number: tighter tracking + tabular figures + warm glow (dark only) */ .cw-home-statbar .cw-home-stat .n { letter-spacing: -.5px; font-variant-numeric: tabular-nums; } body:not([data-theme="light"]) .cw-home-statbar .cw-home-stat .n:not(.is-zero) { text-shadow: 0 0 20px rgba(255,120,45,.28); } /* dim, slightly wider uppercase label */ .cw-home-statbar .cw-home-stat .l { letter-spacing: .8px; font-weight: 700; } /* accent sub-labels ("Online", "Be the first"...) pop harder */ .cw-home-statbar .cw-home-stat .sub { color: var(--cw-accent); letter-spacing: .6px; font-weight: 800; } body:not([data-theme="light"]) .cw-home-statbar .cw-home-stat .sub { text-shadow: 0 0 14px color-mix(in srgb, var(--cw-accent) 45%, transparent); } /* hover: gentle lift + stronger orange-tinted border & glow */ .cw-home-statbar .cw-home-stat:hover { transform: translateY(-2px); background: linear-gradient(180deg, color-mix(in srgb, var(--cw-accent) 6%, var(--cw-bg-3)), var(--cw-bg-2)) padding-box, linear-gradient(180deg, color-mix(in srgb, var(--cw-accent) 55%, var(--cw-border-2)), color-mix(in srgb, var(--cw-accent) 18%, var(--cw-border))) border-box; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--cw-fg) 9%, transparent), 0 16px 30px -18px color-mix(in srgb, var(--cw-accent) 70%, #000), 0 0 0 1px color-mix(in srgb, var(--cw-accent) 22%, transparent); } .cw-home-statbar .cw-home-stat:hover::before { opacity: .9; } /* focus: keyboard ring on the hero's welcome card */ .cw-home-me:focus-visible { outline: 2px solid var(--cw-accent); outline-offset: 3px; } /* reduced-motion: no lift, no tile transitions */ @media (prefers-reduced-motion: reduce) { .cw-home-statbar .cw-home-stat, .cw-home-statbar .cw-home-stat::before { transition: none; } .cw-home-statbar .cw-home-stat:hover { transform: none; } } /* ===== Cards / panels / section headers (.cw-card, .cw-card-h, .cw-card-b, .cw-card-more) ===== */ /* =================================================================== cw-lux.css — GROUP: CARDS / PANELS / SECTION HEADERS Additive elevation. Loaded LAST (after cw.css / cw-shell / cw-skin / cw-elite). Scoped strictly to .cw-card / .cw-card-h / .cw-card-b / .cw-card-more. Background is NOT redeclared (special cards keep theirs); depth comes from layered shadow + inset highlight + a hairline ring. =================================================================== */ /* ---- Panel material: soft layered shadow + faint top-lit inset highlight + hairline inset ring. The winning base shadow lower in the cascade is an !important (cw-skin), so elevating it requires !important. ---- */ .cw-card{ box-shadow: inset 0 1px 0 rgba(255,255,255,.06), /* top-lit edge highlight */ inset 0 0 0 1px rgba(255,255,255,.02), /* faint glass hairline ring */ 0 2px 5px -3px rgba(0,0,0,.5), /* tight contact shadow */ 0 22px 46px -26px rgba(0,0,0,.82) !important; /* soft ambient depth */ } /* Slightly larger radius on tablet/desktop only. cw-skin forces radius-sm at <=560px, so bump strictly >=561px to keep the mobile corners intact. */ @media (min-width:561px){ .cw-card{ border-radius:12px !important; } } /* ---- Interactive cards ONLY: gentle accent-tinted border + glow on hover. Static + section.cw-card (home grid keeps its per-section colour) stay calm. Overrides the !important hover shadow set lower in the cascade. ---- */ a.cw-card:hover, .cw-card[href]:hover, .cw-card[onclick]:hover{ border-color: color-mix(in srgb, var(--cw-accent) 45%, var(--cw-border-2)) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px color-mix(in srgb, var(--cw-accent) 38%, transparent), 0 12px 30px -12px color-mix(in srgb, var(--cw-accent) 45%, transparent), 0 26px 58px -26px rgba(0,0,0,.9) !important; } a.cw-card:focus-visible, .cw-card[href]:focus-visible, .cw-card[onclick]:focus-visible{ outline:2px solid var(--cw-accent); outline-offset:3px; } /* ---- Section header: refined left accent tick + uppercase tracking. Tick inherits the division/clan colour where one is set, else brand orange. h2 is flex (ARENA layer) so the tick sits as its first child. ---- */ .cw-card-h h2{ text-transform:uppercase; letter-spacing:1px; } .cw-card-h h2::before{ content:""; flex:0 0 auto; width:3px; height:13px; border-radius:2px; background:linear-gradient(180deg, var(--cw-clan-c, var(--cw-accent)), color-mix(in srgb, var(--cw-clan-c, var(--cw-accent)) 60%, #000)); box-shadow:0 0 10px -1px color-mix(in srgb, var(--cw-clan-c, var(--cw-accent)) 70%, transparent); } .cw-card-h small{ font-variant-numeric:tabular-nums; } /* ---- Hairline divider: a short accent under-glow segment sitting on the header's existing bottom border, brighter at the tick, fading out. Claims .cw-card-h::after (declared content:none in cw.css). ---- */ .cw-card-h{ position:relative; } .cw-card-h::after{ content:""; position:absolute; left:0; bottom:-1px; height:1px; width:min(140px, 46%); pointer-events:none; background:linear-gradient(90deg, color-mix(in srgb, var(--cw-clan-c, var(--cw-accent)) 50%, transparent), transparent); } /* ---- "Full leaderboard" / "All matches" link -> crisp accent pill. ---- */ .cw-card-more{ display:inline-flex; align-items:center; gap:6px; line-height:1; padding:5px 11px; border-radius:999px; border:1px solid var(--cw-border); background:color-mix(in srgb, var(--cw-bg-3) 55%, transparent); color:var(--cw-fg-2); font-variant-numeric:tabular-nums; transition:color .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease; } .cw-card-more:hover{ color:var(--cw-accent); border-color:color-mix(in srgb, var(--cw-accent) 45%, var(--cw-border-2)); background:color-mix(in srgb, var(--cw-accent) 12%, transparent); box-shadow:0 0 0 3px color-mix(in srgb, var(--cw-accent) 10%, transparent); } .cw-card-more:focus-visible{ outline:2px solid var(--cw-accent); outline-offset:2px; } /* ---- Reduced motion: drop the hover transitions. ---- */ @media (prefers-reduced-motion: reduce){ .cw-card, .cw-card-more, a.cw-card, .cw-card[href], .cw-card[onclick]{ transition:none !important; } } /* ===== Data rows, format badges, avatars, rank positions ===== */ /* ============================================================================ cw-lux.css — ELEVATION LAYER GROUP: Data rows · format badges · avatars · rank positions Loaded LAST. index.php ships a page-local