/* ══════════════════════════════════════════════════════════════════ UI — design-system layer (loads AFTER app.css) app.css is the app's history: ~8k lines grown page by page, with every card, modal and chip carrying its own hand-tuned duration, shadow and focus treatment. Rewriting it wholesale would risk the thing it styles. So this file sits on top and does four jobs: 1. TOKENS — one scale each for motion, elevation, radius and type. Custom properties resolve at use time, so rules already written in app.css pick these up even though app.css loads first. 2. NORMALISE — one transition curve, one focus ring, one scrollbar, applied across the classes that were each doing their own version. 3. COMPONENTS — .ui-* primitives the duplicated blocks now share (overlay, modal, field, chip, skeleton, toast). 4. MOTION — start states for JS-driven reveals, and a single reduced-motion kill switch for the whole app. Aesthetic brief: dark fantasy, but read as a premium SaaS dashboard — restraint, hierarchy and air. Crimson and gold stay as accents on a neutral dark ground; they are never the surface. ══════════════════════════════════════════════════════════════════ */ :root { /* ── Motion ───────────────────────────────────────────────────── Mirrored in motion.js (D / E) so a CSS transition and a JS animation on the same element move at the same speed. */ --dur-xs: 120ms; /* hover, focus, colour shifts */ --dur-sm: 180ms; /* small state changes, chips, tabs */ --dur-md: 260ms; /* entrances: cards, rows, panels */ --dur-lg: 420ms; /* page-level, drawers */ --dur-xl: 620ms; /* number count-ups */ --ease-out: cubic-bezier(.22,.61,.36,1); /* default */ --ease-emph: cubic-bezier(.2,.8,.3,1); /* entrances */ --ease-in-out:cubic-bezier(.4,0,.2,1); --ease-back: cubic-bezier(.2,.9,.3,1.15); /* small overshoot */ /* Composite shorthands — what most rules actually want. */ --t-hover: var(--dur-xs) var(--ease-out); --t-base: var(--dur-sm) var(--ease-out); --t-enter: var(--dur-md) var(--ease-emph); /* ── Elevation ────────────────────────────────────────────────── Five steps, each a genuine step up in blur and distance. On a near-black ground shadow alone is nearly invisible, so the upper levels pair it with a hairline highlight to read as "lifted". */ --e0: none; --e1: 0 1px 2px rgba(0,0,0,.40); --e2: 0 4px 14px rgba(0,0,0,.42); --e3: 0 10px 28px rgba(0,0,0,.50), 0 1px 0 rgba(255,255,255,.03) inset; --e4: 0 22px 60px rgba(0,0,0,.62), 0 1px 0 rgba(255,255,255,.04) inset; --e-pop: 0 14px 34px rgba(0,0,0,.45); /* hover lift on cards */ /* Focus ring — gold, double-stroked so it survives any background. Accent crimson is too close to the error state to mean "focus". */ --ring: 0 0 0 2px var(--void), 0 0 0 4px rgba(200,150,60,.60); --ring-soft: 0 0 0 3px rgba(200,150,60,.22); /* ── Type ─────────────────────────────────────────────────────── Line heights and tracking as tokens: display type needs wide tracking and tight leading, body copy the opposite, and every page was picking those by hand. */ --lh-tight: 1.15; --lh-snug: 1.35; --lh-body: 1.6; --tr-tight: -.01em; --tr-wide: .08em; --tr-wider: .14em; --tr-caps: .18em; /* Cinzel small caps / eyebrow labels */ /* Comfortable measure for prose. Long lines are the single most common readability failure on wide dashboards. */ --measure: 68ch; /* One geometry for the app's primary controls. A tab rail, button and dropdown all occupy the same 36px row; nested tab triggers use the inner radius so the shared rail keeps a precise 3px inset. */ --control-radius: 8px; --control-radius-inner: 6px; --control-pad-x: 12px; /* Scrollbars — one width and colour for the fifteen places that previously each declared their own. */ --sb-size: 8px; --sb-thumb: rgba(255,255,255,.13); --sb-thumb-hover: rgba(200,150,60,.42); } /* ══════════════════════════════════════════════════════════════════ 1 · NORMALISE ══════════════════════════════════════════════════════════════════ */ /* One curve for every interactive surface. These classes previously declared eleven different durations between them (.12s to .25s, `all` vs enumerated properties). Enumerating the properties also stops `transition: all` from animating layout on reflow. */ .btn, .btn-sm, .btn-crimson, .btn-gold, .search-btn, .nav-item, .nav-icon, .sr-btn, .sidebar-collapse-btn, .cmdk-item, .notif-item, .mkt-tab, .mkt-card, .mkt-menu-btn, .sp-filter, .sp-offset-chip, .sp-star, .im-tile, .im-tile-img-wrap, .wx-ccy-card, .nft-sort-btn, .nft-dd-btn, .fav-btn, .auth-modal-tab, .auth-pill-link, .lookup-suggest-item, .ui-btn, .ui-chip, .ui-card { transition: color var(--t-hover), background-color var(--t-hover), border-color var(--t-hover), box-shadow var(--t-base), transform var(--t-base), opacity var(--t-hover); } /* ── Touch targets ──────────────────────────────────────────────── Measured under 32px on every device: the favourite stars in the checklist/boss tables (22×18), the refresh buttons (32×25) and the clan-name links in table cells (17px tall). WCAG 2.5.8 puts the floor at 24×24; these bring the frequently-hit ones to 32. */ .fav-btn { min-width: 32px; min-height: 32px; padding: 6px; } .war-meta-refresh { min-height: 32px; padding: 6px 12px; } .cr-clan-link, .gl-player-name { display: inline-block; padding: 6px 0; } /* Pressed state: a 1px settle. Tiny, but it's the difference between a button that responds and a button that just recolours. */ .btn:active, .ui-btn:active, .search-btn:active, .sp-filter:active, .sp-offset-chip:active, .nft-sort-btn:active { transform: translateY(1px); } /* ── Focus ──────────────────────────────────────────────────────── The app had exactly one :focus-visible rule. Keyboard users got the browser default (or, on the many elements with `outline:none`, nothing at all). This restores a visible, consistent focus state everywhere without putting rings on mouse clicks. */ :where(a, button, input, textarea, select, summary, [tabindex]):focus-visible, .nav-item:focus-visible, .cmdk-item:focus-visible, .mkt-tab:focus-visible, .sp-filter:focus-visible { outline: none; /* No border-radius here on purpose: box-shadow already follows the element's own radius, so pills stay pills when focused. */ box-shadow: var(--ring); } /* Text fields get a softer treatment than buttons: a gold halo plus a crimson inner hairline, so a focused field reads as "editable here" rather than wearing the same hard ring as a pressed control. */ input:focus-visible, textarea:focus-visible, select:focus-visible { box-shadow: var(--ring-soft), 0 0 0 1px var(--accent) inset; } /* Clickable divs that carry onclick but no tab stop still need a pointer affordance — flagged here rather than left implicit. */ .nav-item, .cmdk-item, .notif-item[onclick], .sr-item[onclick] { cursor: pointer; } /* Nav items are anchors now (real URLs, keyboard-reachable, openable in a new tab). Strip the link defaults so they look exactly as they did. text-decoration ONLY — the colours that used to be restated here are deliberately gone. app.css already sets .nav-item / .nav-item.active colour, and this file loads after it, so the duplicates silently won on source order at equal specificity: the sidebar redesign's dark-on-gold active pill came out gold-on-gold, contrast 1.17, and no amount of specificity in app.css could fix it from the other side. One owner for nav colour now, and it isn't this file. */ a.nav-item { text-decoration: none; } a.nav-item:hover { text-decoration: none; } /* ── Tab bars ───────────────────────────────────────────────────── Seven implementations exist (.tab, .plr-tab, .checklist-tab, .mkt-tab, .ai-tab, .nftp-inv-tab, .nftp-spirit-tab, .admin-tab). They now share their keyboard behaviour (initTablists) and, here, their base appearance. What each one keeps is its own ACTIVE decoration — an underline on the ranking pages, a filled pill on Boss Schedule — because those distinctions are deliberate. The reset also matters functionally: these are