/* ========================================================================== Albion Log — Design System (redesign) 有志運営の硬派な非公式データツール / dotabuff・op.gg 系。仕様: _design_ref/design_handoff_albion_log/README.md (§2–§9) に厳密準拠。全ページ共通の単一ソース。を付けたページに適用される。新クラスは衝突回避のため al- プレフィックス。色・余白・角丸・フォントは確定値。 ========================================================================== */ :root { /* --- light (base) --- */ --al-bg: #f7f8f9; /* page background */ --al-panel: #ffffff; /* panel / card background */ --al-sunken: #f1f3f6; /* inputs, header rows */ --al-ink: #141821; /* primary text */ --al-sub: #586072; /* secondary text */ --al-faint: #9aa1ab; /* placeholder / muted */ --al-border: #dfe2e7; /* standard hairline */ --al-hair: #ebedf1; /* ultra-thin row divider */ --al-accent: #0f8a8a; /* teal — actions/links */ --al-accent-bg: #e6f4f4; /* teal tint background */ --al-gold: #b07d2c; /* Fame / achievement */ /* --- dark bars (topbar / status / footer dark) --- */ --al-topbar: #161a21; --al-status: #1d222b; --al-top-ink: #e7eaef; --al-top-faint: #838b9a; --al-top-border:#313742; /* --- state colours --- */ --al-ok: #46a37d; /* server up / success */ --al-rose: #b65a4e; /* donate / heart */ --al-kill: #2f8a5a; --al-kill-bg: #eaf5ef; --al-kill-bor: #c2e0d0; --al-death: #c2564a; --al-death-bg: #fbecea; --al-death-bor: #eccac4; --al-assist: #6c70b8; --al-assist-bg: #eeeef8; --al-assist-bor: #cfcfe9; /* --- shape --- */ --al-radius: 5px; --al-radius-card: 6px; --al-radius-pill: 20px; /* --- type --- */ --al-font-sans: "IBM Plex Sans", "Noto Sans JP", sans-serif; --al-font-mono: "IBM Plex Mono", "Noto Sans JP", monospace; /* --- layout --- */ --al-maxw: 1200px; --al-maxw-wide: 1240px; --al-pad-x: 28px; } /* ========================================================================== Base — applies only to pages that opt in with ========================================================================== */ body.al { margin: 0; padding: 0; background: var(--al-bg); color: var(--al-ink); font-family: var(--al-font-sans); font-size: 14px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body.al *, body.al *::before, body.al *::after { box-sizing: border-box; } .al ::selection { background: var(--al-accent); color: #fff; } /* -------------------------------------------------------------------------- Legacy variable remap — the old inline CSS is full of rules that read the OLD design tokens (--border:#000, --primary:#ffd700/gold, --text:#000 …). Rather than override every legacy rule one by one, repoint those variables to the new palette on body.al pages so ALL un-migrated elements inherit the correct colours automatically (black boxes → hairline grey, gold → teal). New al-* components don't read these, so they're unaffected. -------------------------------------------------------------------------- */ body.al { --primary: var(--al-accent); --secondary: var(--al-accent); --bg: var(--al-bg); --bg-card: var(--al-panel); --bg-hover: var(--al-sunken); --border: var(--al-border); --border-light: var(--al-hair); --text: var(--al-ink); --text-secondary: var(--al-sub); --accent: var(--al-ink); --accent-light: var(--al-sunken); --accent-btn: var(--al-accent); --accent-btn-text: #fff; --green: var(--al-kill); --red: var(--al-death); --blue: var(--al-assist); --green-text: var(--al-kill); --red-text: var(--al-death); --blue-text: var(--al-assist); --orange: var(--al-gold); --purple: var(--al-assist); --radius: var(--al-radius); --radius-sm: 4px; } .al-mono { font-family: var(--al-font-mono); font-variant-numeric: tabular-nums; } /* removed per request: version pill + status-strip tagline */ body.al .al-ver { display: none; } body.al #statusDisclaimer { display: none; } /* Kill the retired "lift on hover" (2px offset shadow + translate) and the item-icon zoom from the old design — the new spec is FLAT (§1, §6-6). This neutralises every legacy button/icon hover across all body.al pages. */ body.al button:hover, body.al a.button:hover, body.al [class*="-btn"]:hover, body.al .tab-btn:hover, body.al .view-tab:hover, body.al .al-kofi:hover, body.al .equip-icon:hover, body.al .ml-equip-icon:hover, body.al .ml-equip-icon-wrapper:hover, body.al .recent-kill-weapon:hover, body.al .al-item:hover { box-shadow: none !important; transform: none !important; } .al a { color: inherit; text-decoration: none; } .al-link { color: var(--al-accent); font-weight: 600; cursor: pointer; } .al-link:hover { text-decoration: underline; } /* ========================================================================== §5-1 Top bar (dark) ========================================================================== */ .al-topbar { background: var(--al-topbar); color: var(--al-top-ink); } .al-topbar-inner { max-width: var(--al-maxw); margin: 0 auto; padding: 0 var(--al-pad-x); display: flex; align-items: stretch; justify-content: space-between; gap: 16px; } .al-topbar-left { display: flex; align-items: stretch; gap: 26px; min-width: 0; } .al-logo { display: flex; align-items: center; gap: 8px; padding: 13px 0; cursor: pointer; flex-shrink: 0; } .al-logo-text { font-family: var(--al-font-mono); font-size: 15.5px; font-weight: 600; letter-spacing: .02em; color: var(--al-top-ink); } .al-logo-text .br { color: var(--al-accent); } .al-logo-text .us { color: var(--al-top-faint); } .al-ver { font-family: var(--al-font-mono); font-size: 10px; color: var(--al-top-faint); border: 1px solid var(--al-top-border); border-radius: 3px; padding: 1px 5px; } .al-nav { display: flex; align-items: stretch; } .al-nav a { display: flex; align-items: center; padding: 0 13px; font-size: 13px; font-weight: 400; color: var(--al-top-faint); white-space: nowrap; cursor: pointer; } .al-nav a:hover { color: var(--al-top-ink); } .al-nav a.active { color: #fff; font-weight: 600; box-shadow: inset 0 -2px 0 var(--al-accent); } .al-topbar-right { display: flex; align-items: center; gap: 15px; flex-shrink: 0; } .al-lang { font-family: var(--al-font-mono); font-size: 11.5px; color: var(--al-top-faint); display: flex; align-items: center; gap: 0; } .al-lang button { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: var(--al-top-faint); } .al-lang button.active { color: #fff; } .al-lang .sep { color: var(--al-top-border); padding: 0 5px; } .al-icon-btn { background: none; border: 0; padding: 4px; cursor: pointer; color: var(--al-top-faint); display: flex; align-items: center; } .al-icon-btn:hover { color: var(--al-top-ink); } .al-kofi { display: flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: 4px; border: 1px solid var(--al-top-border); color: var(--al-top-ink); font-size: 12px; cursor: pointer; } .al-kofi:hover { border-color: var(--al-top-faint); } .al-kofi .heart { color: var(--al-rose); display: flex; } /* ========================================================================== §5-2 Status / telemetry strip (darker) ========================================================================== */ .al-status { background: var(--al-status); } .al-status-inner { max-width: var(--al-maxw); margin: 0 auto; padding: 6px var(--al-pad-x); display: flex; gap: 20px; align-items: center; flex-wrap: wrap; font-family: var(--al-font-mono); font-size: 11px; letter-spacing: .01em; color: var(--al-top-faint); } .al-status .dot { width: 6px; height: 6px; border-radius: 3px; background: var(--al-ok); display: inline-block; } .al-status .up { display: flex; align-items: center; gap: 6px; } .al-status .up .srv { color: #aeb6c4; } .al-status .ink { color: var(--al-top-ink); } .al-status .right { margin-left: auto; } /* ========================================================================== §5-3 Main content shell ========================================================================== */ .al-main { max-width: var(--al-maxw); margin: 0 auto; padding: 26px var(--al-pad-x) 34px; } .al-main.wide { max-width: var(--al-maxw-wide); } /* §3 hero: factual H1 + one-line description */ .al-h1 { font-size: 25px; font-weight: 700; letter-spacing: -0.02em; margin: 0; line-height: 1.3; } .al-lede { font-size: 14px; color: var(--al-sub); margin: 7px 0 0; line-height: 1.6; } .al-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 16px; flex-wrap: wrap; } /* §6-5 inline KPI (no big cards) */ .al-kpis { display: flex; align-items: flex-end; padding-bottom: 2px; } .al-kpi { display: flex; flex-direction: column; gap: 3px; } .al-kpi + .al-kpi { padding-left: 20px; margin-left: 20px; border-left: 1px solid var(--al-hair); } .al-kpi .lbl { font-size: 11px; color: var(--al-sub); white-space: nowrap; } .al-kpi .val { font-family: var(--al-font-mono); font-size: 16px; font-weight: 600; color: var(--al-ink); } .al-kpi .val .u { font-size: 11px; color: var(--al-faint); font-weight: 400; } /* §6 section heading with hairline rule */ .al-sec-head { display: flex; align-items: center; gap: 10px; margin: 26px 0 13px; } .al-sec-head .t { font-size: 13.5px; font-weight: 700; color: var(--al-ink); } .al-sec-head .en { font-family: var(--al-font-mono); font-size: 10px; color: var(--al-faint); letter-spacing: .08em; } .al-sec-head .rule { flex: 1; height: 1px; background: var(--al-border); } .al-sec-head .live { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--al-ok); } .al-sec-head .live .dot { width: 6px; height: 6px; border-radius: 3px; background: var(--al-ok); } .al-sec-head .hint { font-size: 11.5px; color: var(--al-faint); } .al-sec-head .hint .arr { color: var(--al-border); } /* ========================================================================== §6-2 Panel ========================================================================== */ .al-panel { background: var(--al-panel); border: 1px solid var(--al-border); border-radius: var(--al-radius); } .al-panel-head { display: flex; align-items: center; gap: 9px; padding: 10px 13px; border-bottom: 1px solid var(--al-hair); } .al-panel-head .tick { width: 3px; height: 12px; background: var(--al-accent); flex-shrink: 0; } .al-panel-head .title { font-size: 13.5px; font-weight: 700; color: var(--al-ink); letter-spacing: -0.01em; } .al-panel-head .en { font-family: var(--al-font-mono); font-size: 9.5px; letter-spacing: .1em; color: var(--al-faint); } .al-panel-head .action { margin-left: auto; font-size: 12px; color: var(--al-accent); font-weight: 600; cursor: pointer; } .al-panel-head .action:hover { text-decoration: underline; } /* ========================================================================== §6-3 Table (rankings / lists) ========================================================================== */ .al-table { width: 100%; border-collapse: collapse; table-layout: fixed; } .al-table thead tr { background: var(--al-sunken); border-bottom: 1px solid var(--al-hair); } .al-table th { font-size: 11px; font-weight: 600; color: var(--al-faint); padding: 9px 13px; text-align: left; } .al-table th.r { text-align: right; } .al-table tbody tr { border-top: 1px solid var(--al-hair); } .al-table tbody tr:first-child { border-top: none; } .al-table td { padding: 11px 13px; font-size: 13.5px; } .al-table td.name { font-weight: 600; color: var(--al-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .al-table td.sub { font-size: 12.5px; color: var(--al-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .al-table td.num { font-family: var(--al-font-mono); font-weight: 600; color: var(--al-ink); text-align: right; } .al-table td.rank { font-family: var(--al-font-mono); font-size: 13px; font-weight: 700; color: var(--al-faint); } .al-table td.rank.first { color: var(--al-gold); } .al-table td.fame { font-family: var(--al-font-mono); font-size: 13px; font-weight: 600; color: var(--al-gold); text-align: right; } .al-table tbody tr.clickable { cursor: pointer; } .al-table tbody tr.clickable:hover { background: var(--al-sunken); } .al-table-foot { padding: 10px 13px; border-top: 1px solid var(--al-hair); text-align: center; font-size: 12px; color: var(--al-accent); font-weight: 600; cursor: pointer; } .al-table-foot:hover { text-decoration: underline; } /* ========================================================================== §6-1 Search toolbar ========================================================================== */ .al-search { background: var(--al-panel); border: 1px solid var(--al-border); border-radius: var(--al-radius); padding: 9px; display: flex; gap: 8px; align-items: stretch; } .al-seg { display: flex; border: 1px solid var(--al-border); border-radius: 4px; overflow: hidden; } .al-seg button { display: flex; align-items: center; padding: 0 16px; font: inherit; font-size: 13px; font-weight: 600; background: #fff; color: var(--al-sub); border: 0; cursor: pointer; white-space: nowrap; } .al-seg button + button { border-left: 1px solid var(--al-hair); } .al-seg button.active { background: var(--al-ink); color: #fff; } .al-seg-srv { display: flex; align-items: stretch; border: 1px solid var(--al-border); border-radius: 4px; overflow: hidden; } .al-seg-srv .lbl { padding: 0 11px; font-size: 11.5px; color: var(--al-faint); border-right: 1px solid var(--al-hair); background: var(--al-sunken); display: flex; align-items: center; } .al-seg-srv button { padding: 0 13px; display: flex; align-items: center; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--al-sub); background: #fff; border: 0; cursor: pointer; } .al-seg-srv button + button { border-left: 1px solid var(--al-hair); } .al-seg-srv button.active { background: var(--al-accent); color: #fff; } .al-search-field { flex: 1; display: flex; align-items: center; gap: 10px; padding: 11px 14px; border: 1px solid var(--al-border); border-radius: 4px; background: #fff; min-width: 0; } .al-search-field svg { color: var(--al-faint); flex-shrink: 0; } .al-search-field input { flex: 1; border: 0; outline: 0; background: none; font: inherit; font-family: var(--al-font-sans); font-size: 14px; color: var(--al-ink); min-width: 0; } .al-search-field input::placeholder { color: var(--al-faint); } .al-search-btn { display: flex; align-items: center; gap: 7px; padding: 0 26px; border: 0; border-radius: 4px; background: var(--al-ink); color: #fff; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; } .al-search-btn:hover { background: #000; } .al-recent { display: flex; align-items: center; gap: 8px; margin-top: 9px; padding-left: 2px; font-size: 12px; color: var(--al-faint); flex-wrap: wrap; } .al-recent .item { color: var(--al-sub); border-bottom: 1px dotted var(--al-border); cursor: pointer; } .al-recent .item:hover { color: var(--al-accent); border-color: var(--al-accent); } /* ========================================================================== §6-6 Buttons / chips ========================================================================== */ .al-btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 18px; border-radius: var(--al-radius); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; border: 1px solid transparent; } .al-btn-primary { background: var(--al-ink); color: #fff; } .al-btn-primary:hover { background: #000; } .al-btn-ghost { background: var(--al-panel); color: var(--al-sub); border-color: var(--al-border); } .al-btn-ghost:hover { color: var(--al-ink); border-color: var(--al-faint); } .al-btn-accent { background: var(--al-accent); color: #fff; } .al-btn-accent:hover { filter: brightness(1.06); } .al-chip { display: inline-flex; align-items: center; gap: 4px; border-radius: var(--al-radius-pill); color: #fff; font-size: 13px; font-weight: 700; padding: 3px 12px; } .al-chip.kill { background: var(--al-kill); } .al-chip.death { background: var(--al-death); } .al-chip.assist { background: var(--al-assist); } .al-badge-new { font-family: var(--al-font-mono); font-size: 9px; font-weight: 700; background: var(--al-rose); color: #fff; border-radius: 3px; padding: 1px 5px; letter-spacing: .04em; } /* ========================================================================== §6-8 Kill-log row (win/loss row tint) — the signature UI ========================================================================== */ .al-killrow { display: grid; grid-template-columns: 1fr 154px 1fr; align-items: center; gap: 18px; border: 1px solid var(--al-border); border-left: 4px solid var(--al-border); border-radius: var(--al-radius-card); padding: 12px 16px; margin-bottom: 10px; } .al-killrow.kill { background: var(--al-kill-bg); border-color: var(--al-kill-bor); border-left-color: var(--al-kill); } .al-killrow.death { background: var(--al-death-bg); border-color: var(--al-death-bor); border-left-color: var(--al-death); } .al-killrow.assist { background: var(--al-assist-bg); border-color: var(--al-assist-bor); border-left-color: var(--al-assist); } .al-killrow .side { min-width: 0; } .al-killrow .side.right { text-align: right; } .al-killrow .center { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; } .al-killrow .center .fame { font-family: var(--al-font-mono); font-weight: 600; color: var(--al-gold); font-size: 14px; } .al-killrow .center .lbl { font-family: var(--al-font-mono); font-size: 9.5px; letter-spacing: .1em; color: var(--al-faint); } .al-killrow .center .ago { font-size: 11px; color: var(--al-sub); } /* ========================================================================== §6-7 Item icon / avatar placeholders (tier-coloured) ========================================================================== */ .al-item { position: relative; width: 36px; height: 36px; border-radius: 8px; background: #f1f4f9; border: 1px solid var(--al-border); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; } .al-item img { width: 100%; height: 100%; object-fit: contain; } .al-item .tier { position: absolute; top: 2px; left: 3px; font-family: var(--al-font-mono); font-size: 8px; font-weight: 600; } /* ========================================================================== §6-9 Tools hub ========================================================================== */ .al-tools { display: flex; gap: 16px; flex-wrap: wrap; } .al-tool { flex: 1 1 0; min-width: 200px; background: var(--al-panel); border: 1px solid var(--al-border); border-radius: var(--al-radius-card); padding: 16px; display: flex; flex-direction: column; gap: 8px; } .al-tool.featured { flex: 1.55 1 0; } .al-tool .ic { width: 36px; height: 36px; border-radius: 8px; background: var(--al-sunken); display: flex; align-items: center; justify-content: center; color: var(--al-sub); } .al-tool.featured .ic { background: var(--al-ink); color: #fff; } .al-tool .nm { font-size: 14px; font-weight: 700; color: var(--al-ink); display: flex; align-items: center; gap: 8px; } .al-tool .ds { font-size: 12.5px; color: var(--al-sub); line-height: 1.5; } .al-tool .tag { font-size: 10.5px; color: var(--al-accent); font-weight: 600; } .al-tool-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } /* ========================================================================== §5-4 Footer ========================================================================== */ .al-footer { max-width: var(--al-maxw); margin: 26px auto 0; padding: 16px var(--al-pad-x) 28px; border-top: 1px solid var(--al-border); } .al-footer-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; } .al-footer-links { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12.5px; color: var(--al-sub); } .al-footer-links a:hover { color: var(--al-accent); } .al-footer-build { font-family: var(--al-font-mono); font-size: 11px; color: var(--al-faint); } .al-footer-fine { font-size: 11.5px; color: var(--al-faint); margin-top: 12px; line-height: 1.7; } /* ========================================================================== index.html integration — neutralise the old .container wrapper so the dark bars can run full-bleed, and re-skin a few legacy elements kept in the DOM. ========================================================================== */ body.al .container { max-width: none; margin: 0; padding: 0; } .al-rank-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .al-search-wrap { position: relative; } /* legacy results / loading / error live inside .al-main now */ body.al .results-section { margin-top: 8px; } body.al .loading { text-align: center; padding: 40px 0; color: var(--al-sub); } body.al .error-message { margin-top: 16px; padding: 14px; border: 1px solid var(--al-death-bor); background: var(--al-death-bg); color: var(--al-death); border-radius: var(--al-radius); } /* autocomplete dropdown — re-skinned to the design tokens */ body.al .autocomplete-list { position: absolute; top: 100%; left: 0; right: 0; z-index: 30; margin-top: 6px; background: var(--al-panel); border: 1px solid var(--al-border); border-radius: var(--al-radius); box-shadow: 0 4px 16px rgba(20,24,33,.08); overflow: hidden; } /* favourites panel — anchored under the top bar, re-skinned */ body.al .favorites-panel { position: absolute; top: 52px; right: var(--al-pad-x); z-index: 40; background: var(--al-panel); border: 1px solid var(--al-border); border-radius: var(--al-radius); box-shadow: 0 4px 16px rgba(20,24,33,.12); padding: 12px; min-width: 240px; } body.al .favorites-panel-header { font-size: 12.5px; font-weight: 700; color: var(--al-ink); display: flex; align-items: center; gap: 6px; margin-bottom: 8px; } /* ========================================================================== Legacy SPA result views — re-skin existing markup (player/guild kill log, battle modal) to the design system WITHOUT touching the render JS. All scoped under body.al with enough specificity to beat the old rules. ========================================================================== */ /* §6-8 kill-log row (win/loss tint) — the signature UI ---------------------- */ body.al .ml-event-card { background: var(--al-panel); border: 1px solid var(--al-border); border-radius: var(--al-radius-card); margin-bottom: 10px; box-shadow: none; overflow: hidden; } body.al .ml-event-card.kill { background: var(--al-kill-bg); border-color: var(--al-kill-bor); } body.al .ml-event-card.death { background: var(--al-death-bg); border-color: var(--al-death-bor); } body.al .ml-event-card.assist { background: var(--al-assist-bg); border-color: var(--al-assist-bor); } body.al .ml-event-card.kill::before { background: var(--al-kill); } body.al .ml-event-card.death::before { background: var(--al-death); } body.al .ml-event-card.assist::before { background: var(--al-assist); } body.al .ml-event-inner { grid-template-columns: 1fr 150px 1fr; gap: 16px; padding: 13px 16px 13px 20px; align-items: center; } body.al .ml-player-header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 7px; } body.al .ml-player-side.right .ml-player-header { justify-content: flex-end; } body.al .ml-player-name { font-family: var(--al-font-sans); font-size: 13.5px; font-weight: 600; color: var(--al-ink); } body.al .ml-player-guild { font-family: var(--al-font-sans); font-size: 11.5px; font-weight: 400; color: var(--al-sub); } body.al .ml-player-guild:hover { color: var(--al-accent); } body.al .ml-player-ip { font-family: var(--al-font-mono); font-size: 11px; color: var(--al-faint); } body.al .ml-equip-grid { display: flex; flex-direction: column; gap: 4px; } body.al .ml-player-side.right .ml-equip-row { justify-content: flex-end; } body.al .ml-equip-row { display: flex; gap: 4px; flex-wrap: wrap; } body.al .ml-equip-icon-wrapper { width: 72px; height: 72px; border-radius: 9px; overflow: hidden; background: #f1f4f9; border: 1px solid var(--al-border); flex-shrink: 0; } body.al .ml-equip-icon { width: 100%; height: 100%; object-fit: contain; display: block; } body.al .ml-equip-icon.empty, body.al .ml-equip-icon-wrapper:has(.empty) { background: var(--al-sunken); border-style: dashed; border-color: var(--al-hair); } body.al .ml-event-center { display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; } body.al .ml-event-type { display: inline-flex; align-items: center; gap: 3px; border-radius: var(--al-radius-pill); color: #fff; font-family: var(--al-font-sans); font-size: 12px; font-weight: 700; padding: 3px 13px; text-transform: none; letter-spacing: 0; } body.al .ml-event-type.kill { background: var(--al-kill); } body.al .ml-event-type.death { background: var(--al-death); } body.al .ml-event-type.assist { background: var(--al-assist); } body.al .ml-event-type.kill::before { content: '▲'; font-size: 9px; } body.al .ml-event-type.death::before { content: '▼'; font-size: 9px; } body.al .ml-event-type.assist::before { content: '◆'; font-size: 9px; } body.al .ml-event-time { font-size: 11px; color: var(--al-sub); } body.al .ml-event-fame { font-family: var(--al-font-mono); font-size: 13.5px; font-weight: 600; color: var(--al-gold); } body.al .capture-btn-center { background: none; border: 1px solid var(--al-border); border-radius: 4px; color: var(--al-faint); padding: 4px; cursor: pointer; display: inline-flex; } body.al .capture-btn-center:hover { color: var(--al-accent); border-color: var(--al-accent); } @media (max-width: 640px) { body.al .ml-event-inner { grid-template-columns: 1fr; gap: 12px; } body.al .ml-player-side.right .ml-player-header, body.al .ml-player-side.right .ml-equip-row { justify-content: flex-start; } body.al .ml-player-side.right { text-align: left; } } /* player / guild header card ------------------------------------------------ */ body.al .player-header, body.al .guild-header { background: var(--al-panel); border: 1px solid var(--al-border); border-radius: var(--al-radius); padding: 16px 18px; margin-bottom: 16px; box-shadow: none; } body.al .player-info-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; } body.al .player-name-title { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--al-ink); } body.al .player-guild-name { font-size: 13px; color: var(--al-sub); margin-top: 2px; } body.al .favorite-btn { background: var(--al-panel); border: 1px solid var(--al-border); border-radius: var(--al-radius); color: var(--al-sub); padding: 8px; cursor: pointer; display: inline-flex; } body.al .favorite-btn:hover { border-color: var(--al-faint); color: var(--al-ink); } body.al .favorite-btn.active { color: var(--al-gold); border-color: var(--al-gold); } /* view tabs (§ active = teal underline) ------------------------------------- */ body.al .view-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--al-border); margin-bottom: 16px; } body.al .view-tab { background: none; border: 0; padding: 9px 14px; cursor: pointer; font-family: var(--al-font-sans); font-size: 13px; font-weight: 500; color: var(--al-sub); } body.al .view-tab:hover { color: var(--al-ink); } body.al .view-tab.active { color: var(--al-accent); font-weight: 600; box-shadow: inset 0 -2px 0 var(--al-accent); } /* filter bar ----------------------------------------------------------------- */ body.al .filter-section { background: var(--al-panel); border: 1px solid var(--al-border); border-radius: var(--al-radius); padding: 13px; margin-bottom: 16px; } body.al .filter-row { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; } body.al .filter-group { display: flex; flex-direction: column; gap: 5px; } body.al .filter-label { font-size: 11px; color: var(--al-sub); font-weight: 500; } body.al .filter-select, body.al .filter-group input[type="text"] { border: 1px solid var(--al-border); border-radius: 4px; background: #fff; color: var(--al-ink); font-family: var(--al-font-sans); font-size: 13px; padding: 7px 10px; min-width: 120px; } body.al .filter-select:focus, body.al .filter-group input[type="text"]:focus { outline: 0; border-color: var(--al-accent); } /* show-more / load-more ------------------------------------------------------ */ body.al .load-more-end { text-align: center; padding: 16px; color: var(--al-faint); font-size: 12px; } /* battle detail modal ------------------------------------------------------- */ body.al .battle-modal { background: var(--al-panel); border: 1px solid var(--al-border); border-radius: var(--al-radius); box-shadow: 0 8px 32px rgba(20,24,33,.18); } body.al .battle-modal-head { border-bottom: 1px solid var(--al-hair); padding: 12px 16px; } body.al .battle-modal-title { font-size: 14px; font-weight: 700; color: var(--al-ink); } body.al .battle-modal-close { color: var(--al-faint); font-size: 22px; } body.al .battle-modal-close:hover { color: var(--al-ink); } body.al .battle-header { background: var(--al-sunken); border: 1px solid var(--al-border); border-radius: var(--al-radius); padding: 14px 16px; margin-bottom: 16px; } body.al .battle-title { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; color: var(--al-ink); margin-bottom: 6px; } body.al .battle-meta { font-family: var(--al-font-mono); font-size: 11.5px; color: var(--al-sub); gap: 14px; } body.al .location-badge { background: var(--al-accent); border-radius: 4px; } body.al .team-card { background: var(--al-panel); border: 1px solid var(--al-border); border-radius: var(--al-radius); margin-bottom: 16px; } body.al .team-header { border-bottom: 1px solid var(--al-hair); padding: 11px 14px; font-size: 13px; font-weight: 700; color: var(--al-ink); } body.al .player-card { border-bottom: 1px solid var(--al-hair); } body.al .player-card:last-child { border-bottom: none; } body.al .player-name { font-size: 13.5px; font-weight: 600; color: var(--al-ink); } body.al .player-name-link:hover { color: var(--al-accent); } body.al .player-guild { font-size: 11.5px; color: var(--al-sub); } body.al .player-ip { font-family: var(--al-font-mono); font-size: 12px; font-weight: 600; color: var(--al-gold); } body.al .stat-label { font-size: 10px; color: var(--al-faint); text-transform: uppercase; letter-spacing: .06em; } body.al .stat-value { font-family: var(--al-font-mono); font-size: 13px; font-weight: 600; color: var(--al-ink); } body.al .stat-value.damage { color: var(--al-death); } body.al .stat-value.healing { color: var(--al-kill); } body.al .damage-bar { background: var(--al-hair); height: 4px; border-radius: 2px; } body.al .damage-bar-fill { background: var(--al-death); } body.al .equip-icon { width: 44px; height: 44px; border-radius: 7px; border: 1px solid var(--al-border); background: #f1f4f9; } body.al .equip-icon:hover { transform: none; box-shadow: none; } /* kill-log tab inside the modal — keep killer|victim on one row, icons sized for the narrow (≤760px) modal */ body.al .battle-modal-body .battle-kill-card .ml-equip-icon, body.al .battle-modal-body .battle-kill-card .ml-equip-icon-wrapper { width: 48px !important; height: 48px !important; } body.al .battle-modal-body .battle-kill-card .ml-equip-icon-wrapper { border-radius: 7px; } /* ========================================================================== ranking.html — standalone page re-skin (markup kept, styled via body.al) ========================================================================== */ body.al .controls-row { background: none; border: 0; padding: 0; border-radius: 0; display: flex; gap: 18px 24px; flex-wrap: wrap; align-items: flex-start; margin-bottom: 18px; } body.al .controls-row .control-group { flex: 0 0 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; } body.al .tab-group-label { font-size: 11px; color: var(--al-sub); font-weight: 500; margin-bottom: 0; text-transform: none; letter-spacing: 0; font-family: var(--al-font-sans); } body.al .tab-group { display: inline-flex; gap: 0; margin: 0; border: 1px solid var(--al-border); border-radius: 4px; overflow: hidden; width: max-content; } body.al .tab-btn { background: #fff; border: 0; padding: 7px 14px; font: inherit; font-family: var(--al-font-sans); font-size: 13px; font-weight: 600; color: var(--al-sub); cursor: pointer; } body.al .tab-btn + .tab-btn { border-left: 1px solid var(--al-hair); } body.al .tab-btn:hover { color: var(--al-ink); } body.al .tab-btn.active { background: var(--al-accent); color: #fff; } body.al .stats-card { background: var(--al-panel); border: 1px solid var(--al-border); border-radius: var(--al-radius); margin-bottom: 16px; overflow: hidden; } body.al .stats-card-title { display: flex; align-items: center; gap: 9px; padding: 10px 14px; border-bottom: 1px solid var(--al-hair); font-size: 13.5px; font-weight: 700; color: var(--al-ink); } body.al .stats-card-title .icon { display: inline-flex; color: var(--al-accent); } body.al .last-updated { font-family: var(--al-font-mono); font-size: 11px; color: var(--al-faint); margin-left: auto; letter-spacing: 0; text-transform: none; } body.al .ranking-refresh-btn { background: none; border: 1px solid var(--al-border); border-radius: 4px; color: var(--al-faint); cursor: pointer; padding: 4px 6px; display: inline-flex; } body.al .ranking-refresh-btn:hover { color: var(--al-accent); border-color: var(--al-accent); } body.al .ranking-table { padding: 0 14px 10px; border: none; } body.al .ranking-header { border-bottom: 1px solid var(--al-hair); color: var(--al-faint); font-family: var(--al-font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; padding: 10px 0; } body.al .ranking-row { border-bottom: 1px solid var(--al-hair); padding: 11px 0; } body.al .ranking-row:hover { background: var(--al-sunken); } body.al .col-rank { font-family: var(--al-font-mono); color: var(--al-faint); font-weight: 700; font-size: 13px; } body.al .ranking-row.top-1 .col-rank { color: var(--al-gold); } body.al .col-name a { color: var(--al-ink); font-weight: 600; } body.al .col-name a:hover { color: var(--al-accent); } body.al .col-guild a, body.al .col-guild span { color: var(--al-sub); font-size: 12.5px; } body.al .col-guild a:hover { color: var(--al-accent); } body.al .col-stat { font-family: var(--al-font-mono); font-weight: 600; color: var(--al-ink); } body.al .col-fame { color: var(--al-gold); } body.al .empty-state { color: var(--al-sub); padding: 32px; text-align: center; } body.al .loading-text { color: var(--al-sub); } body.al .back-to-top-btn { background: var(--al-ink); color: #fff; border: 0; border-radius: var(--al-radius); box-shadow: 0 2px 8px rgba(20,24,33,.2); } body.al .back-to-top-btn:hover { background: #000; } /* shared footer re-skin (ranking / build / static pages keep .site-footer markup) */ body.al .site-footer { max-width: var(--al-maxw); margin: 26px auto 0; padding: 16px var(--al-pad-x) 28px; border-top: 1px solid var(--al-border); text-align: left; } body.al .site-footer .footer-links { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12.5px; color: var(--al-sub); justify-content: flex-start; } body.al .site-footer .footer-links a { color: var(--al-sub); } body.al .site-footer .footer-links a:hover { color: var(--al-accent); } body.al .site-footer .footer-break { display: none; } body.al .site-footer .footer-copyright { font-family: var(--al-font-mono); font-size: 11px; color: var(--al-faint); margin-top: 10px; } body.al .site-footer .footer-disclaimer { font-size: 11.5px; color: var(--al-faint); margin-top: 6px; line-height: 1.7; } /* ========================================================================== Fidelity fixes — properties the colour-remap can't reach (font-family, border-width, border-radius, hardcoded boxes). From the redesign audit. ========================================================================== */ /* H2/H3 — kill DM Mono + uppercase leaking onto headings */ body.al .al-h1 { font-family: var(--al-font-sans); text-transform: none; } body.al .stats-card-title { font-family: var(--al-font-sans); text-transform: none; letter-spacing: 0; } /* H4 — battle-modal kill-log cards: old (0,4,0) rule forced 2px sharp + flat white, killing the win/loss tint. Re-assert at higher specificity. */ body.al .kill-events.battle-kill-list .ml-event-card.battle-kill-card { border-width: 1px; border-radius: var(--al-radius-card); background: var(--al-panel); } body.al .kill-events.battle-kill-list .ml-event-card.battle-kill-card.kill { background: var(--al-kill-bg); border-color: var(--al-kill-bor); } body.al .kill-events.battle-kill-list .ml-event-card.battle-kill-card.death { background: var(--al-death-bg); border-color: var(--al-death-bor); } body.al .kill-events.battle-kill-list .ml-event-card.battle-kill-card.assist { background: var(--al-assist-bg); border-color: var(--al-assist-bor); } /* M1–M4, L4 — sharp 2px boxes on profile/guild result panels → 1px + radius */ body.al .weapon-stats-table { border-width: 1px; border-radius: var(--al-radius); } body.al .weapon-stats-header { border-bottom-width: 1px; } body.al .stats-item, body.al .stats-pvp-item, body.al .guild-stat-box, body.al .activity-peak-info { border-width: 1px; border-radius: var(--al-radius); } body.al .guild-card { border-width: 1px; border-radius: var(--al-radius); } body.al .killfeed-battle { border-width: 1px; border-radius: var(--al-radius-card); } /* L5 — members table: horizontal dividers only (drop vertical grid lines) */ body.al .members-table th, body.al .members-table td { border-right: none; } /* M5 — feedback modal (opened from footer) was never re-skinned */ body.al .feedback-modal { border-width: 1px; border-radius: var(--al-radius); } body.al .feedback-form-group select, body.al .feedback-form-group textarea, body.al .feedback-form-group input { border-width: 1px; border-radius: 4px; font-family: var(--al-font-sans); } body.al .feedback-submit-btn { border-width: 1px; border-radius: var(--al-radius); color: #fff; } /* M6 — equip-warning: hardcoded amber → neutral teal-tinted notice */ body.al .equip-warning { color: var(--al-sub); background: var(--al-sunken); border: 1px solid var(--al-border); border-radius: var(--al-radius); } /* M8/L2/L3 — DM Mono leaking onto small text */ body.al .site-footer .footer-disclaimer, body.al .site-footer .footer-links a, body.al .empty-state, body.al .empty-state-text, body.al .loading-text, body.al .error-message { font-family: var(--al-font-sans); } /* L1 — active ranking tab kept a 2px border inside the segment */ body.al .tab-btn.active { border: 0; } /* medal rank-1 trophy → design gold */ body.al .medal-gold { color: var(--al-gold); } /* ========================================================================== build.html — gear / skill build maker re-skin (markup kept, styled via body.al) ========================================================================== */ body.al .build-card, body.al .picker-section, body.al .party-controls, body.al .spell-modal { border-width: 1px; border-radius: var(--al-radius); background: var(--al-panel); } body.al .action-btn { border: 1px solid var(--al-border); border-radius: var(--al-radius); background: var(--al-panel); color: var(--al-sub); font-family: var(--al-font-sans); text-transform: none; letter-spacing: 0; font-weight: 600; } body.al .action-btn:hover { color: var(--al-ink); border-color: var(--al-faint); } body.al .mode-tab { border: 1px solid var(--al-border); border-radius: var(--al-radius); background: var(--al-panel); color: var(--al-sub); font-family: var(--al-font-sans); text-transform: none; letter-spacing: 0; font-weight: 600; } body.al .mode-tab.active { background: var(--al-accent); color: #fff; border-color: var(--al-accent); } body.al .picker-tab { border: 1px solid var(--al-border); border-radius: 4px; background: #fff; color: var(--al-sub); font-family: var(--al-font-sans); text-transform: none; letter-spacing: 0; font-weight: 600; } body.al .picker-tab.active { background: var(--al-accent); color: #fff; border-color: var(--al-accent); } body.al .picker-subtab { font-family: var(--al-font-sans); letter-spacing: 0; border-radius: 4px; } body.al .picker-subtab.active { background: var(--al-accent); color: #fff; } body.al .picker-label, body.al .control-label, body.al .spell-modal-title { font-family: var(--al-font-sans); text-transform: none; letter-spacing: 0; } body.al .build-name-input, body.al .party-name-input { font-family: var(--al-font-sans); letter-spacing: 0; } body.al .build-watermark { font-family: var(--al-font-mono); } body.al .add-member-btn { border-radius: var(--al-radius); font-family: var(--al-font-sans); text-transform: none; letter-spacing: 0; } body.al .item-card { border-radius: 5px; } body.al .members-count { font-family: var(--al-font-mono); } /* ========================================================================== Static content pages (about / guide / glossary / faq / privacy / 404) — de-box the giant .content wrapper, soften legacy 2px sub-cards, fix fonts. ========================================================================== */ body.al .content { border: 0; background: none; } body.al .feature-card, body.al .tip-box, body.al .term-item, body.al .toc, body.al .step-list li, body.al .screenshot-placeholder, body.al .search-box, body.al .disclaimer, body.al .faq-item { border-width: 1px; border-radius: var(--al-radius); } body.al .feature-table td, body.al .feature-table th { border-width: 1px; } body.al .badge { border-width: 1px; border-radius: 3px; } body.al .content h1, body.al .content h2, body.al .content h3, body.al .content h4, body.al .feature-title, body.al .toc-title, body.al .faq-question, body.al .term-name { font-family: var(--al-font-sans); } body.al .feature-icon, body.al .content .icon { color: var(--al-accent); } /* --- static page audit fixes (font/uppercase/2px/hover/colour gaps) --- */ /* kill uppercase + tracking on content headings & labels (spec = sentence case) */ body.al .content h2, body.al .content h3, body.al .content h4, body.al .faq-category, body.al .alpha-header, body.al .error-title, body.al .feature-title, body.al .toc-title, body.al .home-btn, body.al .site-footer .footer-links a { text-transform: none; letter-spacing: 0; } /* classes that explicitly declared 'DM Mono' → IBM Plex Sans */ body.al .faq-category, body.al .alpha-header, body.al .error-title, body.al .feature-table, body.al .feature-table td, body.al .sort-btn, body.al .home-btn, body.al .term-abbr, body.al .term-full { font-family: var(--al-font-sans); } body.al .feature-table th { font-family: var(--al-font-mono); text-transform: none; letter-spacing: 0; } /* section-heading underline → 1px hairline */ body.al .content h2, body.al .faq-category, body.al .alpha-header { border-bottom-width: 1px; } /* retro hover-lift on non-button cards (not caught by the global button reset) */ body.al .feature-card:hover, body.al .term-item:hover { box-shadow: none; transform: none; } /* small inline boxes */ body.al kbd { border-width: 1px; border-radius: 3px; font-family: var(--al-font-mono); } body.al .icon-btn { border-width: 1px; border-radius: 4px; } body.al .sort-toggle { border-width: 1px; border-radius: 4px; overflow: hidden; } body.al .sort-btn { border-right-width: 1px; } body.al .sort-btn:last-child { border-right: 0; } /* 404 page: accent home button white text + keep the big number mono */ body.al .home-btn { border-width: 1px; color: #fff; } body.al .error-code { font-family: var(--al-font-mono); } /* selection text colour (spec = white on accent) */ body.al ::selection { color: #fff; } /* badge state tints → design palette */ body.al .badge-kill { background: var(--al-kill-bg); color: var(--al-kill); } body.al .badge-death { background: var(--al-death-bg); color: var(--al-death); } body.al .badge-assist { background: var(--al-assist-bg); color: var(--al-assist); } /* ========================================================================== §8 Responsive ========================================================================== */ @media (max-width: 720px) { :root { --al-pad-x: 16px; } .al-rank-grid { grid-template-columns: 1fr; } .al-killfeed { font-size: 12px; } .al-status-inner .right { margin-left: 0; width: 100%; } .al-hero { align-items: flex-start; } .al-kpis { width: 100%; } .al-search { flex-wrap: wrap; } .al-search-field { flex-basis: 100%; order: 5; } .al-tool-grid { grid-template-columns: 1fr; } .al-killrow { grid-template-columns: 1fr; gap: 10px; } .al-killrow .side.right { text-align: left; } .al-killrow .center { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; } .al-topbar-left { gap: 14px; } .al-nav a { padding: 0 9px; } }