/* ========================================================================== BATTLE MVP — BRAND TOKENS (one brand, platform-matched) Brand color derived from the LIVE platform UI, not the old red logo. Accent dots = #00FFA6 · "Find Duel" button = mint->cyan gradient. The logo has been recolored to this scheme, so brand == platform. Role model: TEAL/GREEN = brand identity + primary action + live/online/win/success RED = loss / danger only (demoted from the old logo) Neutrals = existing dark theme. Load FIRST in , before hub.css / sidebar.css. Additive: defines variables + opt-in helpers only; no existing selector is overridden. ========================================================================== */ :root { /* --- Brand teal/green scale (from #00FFA6 + platform gradient) ------- */ --bm-brand-300: #6BFFCF; /* light tint / hover text on dark */ --bm-brand: #00FFA6; /* BRAND — accent dots, active states */ --bm-brand-600: #0FB894; /* hover / pressed (deeper teal) */ --bm-brand-700: #0B8E74; /* active / deep */ --bm-cyan: #08D6E8; /* gradient cyan end ("Find Duel" right edge) */ /* Signature brand gradient — matches the "Find Duel" button + logo --- */ --bm-brand-grad: linear-gradient(135deg, #1EE0AC 0%, #08D6E8 100%); /* Brand alphas for glows, chips, focus rings (rgb 0,255,166) --------- */ --bm-brand-soft: rgba(0, 255, 166, 0.12); /* hover bg, chips */ --bm-brand-line: rgba(0, 255, 166, 0.35); /* subtle borders */ --bm-brand-glow: rgba(0, 255, 166, 0.35); /* focus ring / neon glow */ /* --- Surfaces (existing dark theme, formalized) --------------------- */ --bm-bg: #050B12; /* page background */ --bm-surface: #0C1218; /* card */ --bm-surface-2: #121A24; /* elevated card / inputs */ --bm-surface-3: #18232F; /* hover / raised */ --bm-border: #1E2A38; /* hairline */ --bm-border-strong: #2B3B4D; /* emphasized divider / hover border */ /* --- Text ---------------------------------------------------------- */ --bm-text: #EAF1FF; /* primary */ --bm-text-muted: #9DB0C6; /* secondary */ --bm-text-dim: #63788E; /* captions */ /* --- Semantic states ----------------------------------------------- */ --bm-live: var(--bm-brand); /* server-confirmed: live / online */ --bm-online: var(--bm-brand); --bm-success: var(--bm-brand); --bm-win: var(--bm-brand); --bm-loss: #EF6872; /* readable red for "loss" text */ --bm-danger: #E01121; /* destructive actions (old logo red, demoted) */ --bm-warning: #FFB020; --bm-gold: #FFC53D; /* MVP / gold accents */ /* --- Focus ring (accessibility) ------------------------------------ */ --bm-focus: 0 0 0 2px var(--bm-bg), 0 0 0 4px var(--bm-brand-glow); } /* ========================================================================== Opt-in helpers (nothing fires unless the class is used). ========================================================================== */ .bm-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; } .bm-brand-logo { height: 34px; width: auto; display: block; } .bm-brand-mark { height: 30px; width: auto; display: block; } /* Primary action = signature gradient (matches "Find Duel") */ .bm-btn-primary { background: var(--bm-brand-grad); color: #04231C; /* dark teal text for contrast on mint */ font-weight: 700; border: 0; border-radius: 8px; padding: 10px 20px; cursor: pointer; transition: filter .15s ease, box-shadow .15s ease; } .bm-btn-primary:hover { filter: brightness(1.08); } .bm-btn-primary:active { filter: brightness(0.94); } .bm-btn-primary:focus-visible { outline: 0; box-shadow: var(--bm-focus); } /* Status chips */ .bm-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; } .bm-chip-live { background: var(--bm-brand-soft); color: var(--bm-brand); border: 1px solid var(--bm-brand-line); } .bm-chip-loss { background: rgba(224,17,33,.14); color: var(--bm-loss); border: 1px solid rgba(224,17,33,.4); } /* ===== FOOTER STRENGTHEN (brand session) ===== */ /* Higher-specificity .bmft overrides — wins over inline footer