/* ═══════════════════════════════════════════════════════════════════ ELDEVAR ONLINE — WIKI Same world, different building. The marketing site (Website/style.css) is a fixed 800px shell with viewport width=820 — a defensible period pastiche for five brochure pages. A reference work is a different job: a drop table with five columns has to live beside a 300px infobox, and it gets looked up one-handed on a phone mid-fight. So the PALETTE, the panel 9-slice, the bevels and the pixel treatment carry over verbatim; the GEOMETRY is thrown out and rebuilt as a responsive grid. ═══════════════════════════════════════════════════════════════════ */ /* ── fonts ───────────────────────────────────────────────────────── Two faces, two genuinely different jobs. Press Start 2P is chrome: headings, nav, badges. It is unreadable in paragraphs and gorgeous in 9px caps. monogram is the game's own UI font, which is the whole point — the wiki should read in the same voice the client speaks in. It is a 6x12 cell bitmap face and is only crisp at INTEGER MULTIPLES OF 12. 24px or nothing. 14/18/22px produce the smeared half-pixel stems that make pixel fonts look cheap, so those sizes never appear below. ────────────────────────────────────────────────────────────────── */ @font-face { font-family: 'Press Start 2P'; src: url('/assets/PressStart2P-Regular.ttf') format('truetype'); font-display: swap; } @font-face { font-family: 'monogram'; src: url('/assets/monogram-extended.ttf') format('truetype'); font-display: swap; } :root { --bg: #0b0b1e; --text: #d8d0b8; --gold: #ffd76a; --gold-pale: #ffe8b0; --border: #998866; --nav: #1c1c34; --main: #131326; --panel: #1b1b32; --footer: #101020; --muted: #8a84a8; --link: #7ec6ff; --visited: #b89ce0; --online: #4cff88; --paper: #e8dfc8; /* Rarity. These MUST equal Scripts/UI/UITheme.cs — a player comparing a tooltip in-game to this page has to see the same colour, or the wiki is lying about something it can trivially get right. */ --r-poor: #9d9d9d; --r-common: #e8e8e8; --r-uncommon: #1eff00; /* Rare and Epic deviate from the client's #0070dd / #a335ee. Same hue and saturation, pure lightness bump, so they still read as the familiar blue and purple. Measured against EVERY background a rarity word actually sits on -- not just the page background. The worst case is table.data tbody tr:hover (#23234a), which is precisely when someone is reading the row: the client values land at 3.09 and 3.05 there, and an earlier "fixed" pass at #007df8/#af50f0 still only reached 3.75/3.71. These clear 4.5 on all five surfaces (main, panel, odd row, even row, hover). Rarity is a word players read, not decoration, so legibility beats exact client parity. Every other rarity matches Scripts/UI/UITheme.cs:94 untouched. Keep in sync with PublicNames.RarityHex, which colours the page h1. */ --r-rare: #1b8eff; --r-epic: #ba68f2; --r-legendary: #ff8000; /* Structural colours that are not part of the brand palette but are used in more than one place. */ --rule: #3a3a5a; --th-bg: #20203a; --bevel: #b09040; --bevel-bg: #2a2214; } /* NOTE: --accent is deliberately NOT declared here. The generator sets it inline on for class-tinted pages; every consumer below reads it as var(--accent, var(--gold)) so an untinted page falls back to gold. Declaring a :root default would work too, but this keeps the "is this page tinted?" question answerable by looking at one attribute. */ * { box-sizing: border-box; } html { background: var(--bg); } body { margin: 0; padding: 0; background: var(--bg) url('/assets/bgtile.png') repeat; color: var(--text); font-family: 'monogram', Verdana, Geneva, sans-serif; font-size: 24px; /* 12 x 2 — see the font note above */ line-height: 1.5; image-rendering: pixelated; } .px { font-family: 'Press Start 2P', monospace; } a { color: var(--link); } a:visited { color: var(--visited); } img { max-width: 100%; } /* Internal ids run to 48 characters and page titles can be a raw 32-char snake_case id. Neither has a break opportunity, so without this they overflow the infobox on a phone and push the whole document sideways. */ code, h1, .ibox td, .ibox th { overflow-wrap: anywhere; } code { font-family: 'Courier New', monospace; font-size: 12px; color: var(--gold-pale); background: #00000055; padding: 1px 4px; } /* Rarity utilities. Applied to names, table cells and infobox titles. */ .r-poor { color: var(--r-poor); } .r-common { color: var(--r-common); } .r-uncommon { color: var(--r-uncommon); } .r-rare { color: var(--r-rare); } .r-epic { color: var(--r-epic); } .r-legendary { color: var(--r-legendary); } /* ── skip link ─────────────────────────────────────────────────── */ .skip { position: absolute; left: -9999px; top: 0; z-index: 100; padding: 10px 14px; font-family: 'Press Start 2P', monospace; font-size: 9px; color: var(--gold); background: var(--bevel-bg); border: 3px outset var(--bevel); text-decoration: none; } .skip:focus { left: 8px; top: 8px; } /* Read by screen readers, invisible to everyone else. Used for the search results live region. NOT display:none — that would remove it from the accessibility tree and silence the announcement entirely. */ .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* ── masthead ──────────────────────────────────────────────────── */ #masthead { background: var(--nav); border-bottom: 3px solid var(--border); } .mast-inner { max-width: 1200px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 16px; } a.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--gold); flex: 0 0 auto; } a.brand:visited { color: var(--gold); } a.brand img { image-rendering: pixelated; flex: 0 0 auto; } a.brand .px { font-size: 14px; color: var(--gold); text-shadow: 2px 2px 0 #000; letter-spacing: 1px; } a.brand .brand-sub { font-size: 9px; color: var(--gold-pale); background: var(--bevel-bg); border: 2px outset var(--bevel); padding: 3px 6px 2px 6px; text-shadow: none; letter-spacing: 0; } a.brand:hover .px { color: var(--gold-pale); } /* ── search box ────────────────────────────────────────────────── */ form.search { position: relative; /* anchor for the absolutely-positioned dropdown */ flex: 1 1 auto; margin: 0; min-width: 0; } #q, input.tfilter { width: 100%; padding: 8px 10px; font-family: Verdana, Geneva, sans-serif; font-size: 13px; color: var(--text); background: #101024; border: 2px inset #5a5070; outline-offset: 2px; } #q::placeholder, input.tfilter::placeholder { color: var(--muted); } #q:focus, input.tfilter:focus { background: #16162e; border-color: var(--border); } #results { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 50; max-height: 60vh; overflow-y: auto; background: var(--panel); border: 2px solid #7a6a4a; box-shadow: 4px 4px 0 rgba(0, 0, 0, .55); } #results[hidden] { display: none; } #results .res { display: flex; align-items: center; gap: 8px; padding: 6px 10px; text-decoration: none; color: var(--text); border-bottom: 1px solid #26264a; font-size: 24px; line-height: 1.2; } #results .res:visited { color: var(--text); } #results .res:last-child { border-bottom: none; } #results .res img { width: 24px; height: 24px; flex: 0 0 24px; image-rendering: pixelated; } /* the title; ellipsised rather than wrapped so every row is one line high */ #results .res span:not(.res-kind) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #results .res-kind { margin-left: auto; padding-left: 10px; flex: 0 0 auto; font-family: 'Press Start 2P', monospace; font-size: 8px; color: var(--muted); text-align: right; } #results .res:hover, #results .res.sel { background: #2a2a4e; color: var(--gold-pale); } #results .res.sel .res-kind { color: var(--gold); } /* ── the shell: sidebar + content ──────────────────────────────── */ .wiki-shell { max-width: 1200px; margin: 0 auto; padding: 20px 16px 40px 16px; display: grid; grid-template-columns: 200px minmax(0, 1fr); /* minmax(0,…) or a wide table blows the grid out */ gap: 20px; align-items: start; } /* ── sidebar ───────────────────────────────────────────────────── */ nav.sidebar { background: var(--nav); border: 3px solid var(--border); padding: 10px; position: sticky; top: 12px; } .sb-title { font-size: 9px; color: var(--gold); text-shadow: 2px 2px 0 #000; padding: 2px 0 8px 2px; border-bottom: 1px solid #3a3450; margin-bottom: 8px; letter-spacing: 1px; } nav.sidebar ul { list-style: none; margin: 0; padding: 0; } nav.sidebar li { margin: 0; } nav.sidebar a { display: block; padding: 3px 6px; color: var(--link); text-decoration: none; font-size: 24px; line-height: 1.25; border-left: 3px solid transparent; } nav.sidebar a:visited { color: var(--link); } nav.sidebar a:hover { color: var(--gold-pale); background: #26264a; } nav.sidebar a.on { color: var(--gold); background: #26264a; border-left-color: var(--accent, var(--gold)); } /* ── content column ────────────────────────────────────────────── */ main.content { background: var(--main); border: 3px solid var(--border); padding: 18px 22px 26px 22px; min-width: 0; } main.content::after { content: ""; display: block; clear: both; } nav.crumbs { font-size: 24px; line-height: 1.2; color: var(--muted); margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid #2a2a48; } nav.crumbs a { text-decoration: none; } nav.crumbs a:hover { text-decoration: underline; } nav.crumbs span { color: var(--text); } h1 { margin: 0 0 14px 0; font-family: 'Press Start 2P', monospace; font-size: 24px; line-height: 1.45; color: var(--gold); text-shadow: 3px 3px 0 #000; } h2 { margin: 26px 0 12px 0; font-family: 'Press Start 2P', monospace; font-size: 14px; line-height: 1.5; color: var(--gold); text-shadow: 2px 2px 0 #000; padding-bottom: 8px; border-bottom: 2px solid var(--accent, var(--gold)); /* BFC so the underline stops at the infobox instead of sliding under it */ overflow: hidden; } section > h2:first-child { margin-top: 0; } h3 { margin: 18px 0 8px 0; font-family: 'Press Start 2P', monospace; font-size: 11px; line-height: 1.5; color: var(--gold-pale); text-shadow: 2px 2px 0 #000; } p { margin: 0 0 12px 0; } p.lead { color: var(--gold-pale); font-size: 24px; border-left: 3px solid var(--accent, var(--gold)); padding-left: 12px; } /* The footnote under a drop table carries the pool-cap explanation — the single most credibility-establishing sentence on the site. It is muted because it is secondary, NOT small, because it has to be read. */ p.note { color: var(--muted); font-size: 24px; line-height: 1.4; margin-top: 10px; } p.banner { background: #2a2214; border: 2px solid var(--bevel); border-left-width: 6px; color: var(--gold-pale); padding: 10px 14px; } p.derived { font-style: italic; color: var(--muted); font-family: Verdana, Geneva, sans-serif; font-size: 11px; margin-top: 14px; } section { margin-bottom: 6px; } /* ── inline entity links ───────────────────────────────────────── */ a.ilink { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; vertical-align: middle; } a.ilink:hover { text-decoration: underline; } a.ilink img { width: 24px; height: 24px; flex: 0 0 24px; image-rendering: pixelated; vertical-align: middle; } /* A reference the graph could not resolve. Rendered as an admission, never as a link — a wiki full of 404s is worse than one that says "unknown". */ .unresolved { color: var(--muted); border-bottom: 1px dotted var(--muted); cursor: help; } .muted, td.muted { color: var(--muted); } /* ── infobox ───────────────────────────────────────────────────── */ aside.infobox { width: 300px; float: right; margin: 0 0 18px 20px; background: var(--panel); border: 12px solid #7a6a4a; /* fallback */ border-image: url('/assets/panel.png') 12 fill / 12px stretch; padding: 4px 6px 8px 6px; } .ibox-title { margin: 4px 0 10px 0; font-size: 12px; line-height: 1.5; text-align: center; color: var(--gold); text-shadow: 2px 2px 0 #000; border: none; /* it is an

; do not inherit the section rule / padding: 0; overflow: visible; } .ibox-art { text-align: center; padding: 10px; margin-bottom: 10px; background: #12122a; border: 2px inset #4a4468; } .ibox-art img { image-rendering: pixelated; vertical-align: middle; } .ibox-art-empty { display: flex; align-items: center; justify-content: center; min-height: 120px; border: 2px dashed #4a4468; background: #12122a; } .ibox-art-empty .px { font-size: 8px; line-height: 1.6; color: var(--muted); } / Checkerboard so a transparent portrait reads as INTENTIONAL cut-out art rather than a screenshot someone forgot to key out. / .ibox-portrait { background: repeating-conic-gradient(#181830 0 25%, #12122a 0 50%) 0 0 / 16px 16px; min-height: 160px; display: flex; align-items: center; justify-content: center; } .ibox-portrait img { max-width: 100%; height: auto; image-rendering: pixelated; } .ibox-portrait.ibox-art-empty { background: repeating-conic-gradient(#181830 0 25%, #12122a 0 50%) 0 0 / 16px 16px; } .ibox-badges { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: 10px; } .badge { display: inline-block; padding: 4px 7px 3px 7px; font-family: 'Press Start 2P', monospace; font-size: 8px; line-height: 1.4; color: var(--gold); background: var(--bevel-bg); border: 2px outset var(--bevel); } .badge-normal { color: var(--text); border-color: #8a7a5a; } .badge-elite { color: #8ec9ff; border-color: #4a78b0; background: #141c2a; } .badge-boss { color: var(--r-legendary); border-color: #c06010; background: #2a1a08; } .badge-class { color: var(--gold-pale); border-color: var(--bevel); } .badge-role { color: var(--r-uncommon); border-color: #3a8a20; background: #14240e; } table.ibox { width: 100%; border-collapse: collapse; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 1.45; } table.ibox th, table.ibox td { border: 1px solid var(--rule); padding: 5px 7px; vertical-align: top; text-align: left; } table.ibox th { width: 42%; color: var(--gold); background: var(--th-bg); font-weight: normal; } table.ibox td { background: var(--panel); } table.ibox td a.ilink img { width: 20px; height: 20px; flex-basis: 20px; } / ── data tables ───────────────────────────────────────────────── / / The wrapper is what keeps a five-column drop table from forcing the whole PAGE to scroll sideways on a phone. It also makes a block formatting context, so tables sit beside the infobox instead of under it. / .tablewrap { overflow-x: auto; margin-bottom: 12px; border: 1px solid var(--rule); } table.data { width: 100%; border-collapse: collapse; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 1.5; } table.data th, table.data td { border: 1px solid var(--rule); padding: 6px 9px; text-align: left; vertical-align: top; } table.data th { color: var(--gold); background: var(--th-bg); font-family: 'Press Start 2P', monospace; font-size: 8px; line-height: 1.6; font-weight: normal; white-space: nowrap; position: sticky; top: 0; z-index: 1; } table.data tbody tr:nth-child(odd) { background: #16162c; } table.data tbody tr:nth-child(even) { background: #101024; } table.data tbody tr:hover { background: #23234a; } table.data td a.ilink img { width: 24px; height: 24px; flex-basis: 24px; } table.data.sortable thead th { cursor: pointer; user-select: none; -webkit-user-select: none; } table.data.sortable thead th:hover { color: var(--gold-pale); background: #2a2a4a; } table.data.sortable th[aria-sort="ascending"]::after { content: " \25B2"; } table.data.sortable th[aria-sort="descending"]::after { content: " \25BC"; } input.tfilter { max-width: 320px; margin-bottom: 8px; } / A listed drop chance the pool cap actually reduces. Dotted + help cursor because the title attribute carries the "why". / .capped { border-bottom: 1px dotted currentColor; cursor: help; } / ── talent ladder ───────────────────────────────────────────────── Drawn as a GATED LADDER, not a tree. The data has no prerequisite edges — only horizontal point gates — so there is nothing to connect, and drawing connector lines would invent a dependency structure the game does not have. ────────────────────────────────────────────────────────────────── / .talent-ladder { display: grid; gap: 10px; margin-bottom: 16px; } .tier { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: start; padding: 10px 0 10px 10px; border-left: 3px solid var(--accent, var(--gold)); background: #14142a; } .gate { font-family: 'Press Start 2P', monospace; font-size: 9px; line-height: 1.6; color: var(--gold); text-shadow: 2px 2px 0 #000; padding-top: 4px; } .gate span { display: block; margin-top: 6px; font-family: 'monogram', Verdana, sans-serif; font-size: 24px; line-height: 1.1; color: var(--muted); text-shadow: none; } / auto-fit + minmax means 1-, 2- and 3-talent tiers all lay out correctly with no per-tier code, and collapse to one column on a phone. / .talents { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; } a.talent, .talent { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 10px; align-items: start; padding: 8px 10px; background: var(--panel); border: 2px solid #3a3a5a; text-decoration: none; color: var(--text); transition: border-color .12s, background .12s; } .talent:visited { color: var(--text); } .talent:hover { border-color: var(--accent, var(--gold)); background: #23234a; } .talent img { width: 48px; height: 48px; image-rendering: pixelated; } .tbody { min-width: 0; } .tname { color: var(--gold-pale); font-size: 24px; line-height: 1.2; } .pips { color: var(--accent, var(--gold)); font-size: 24px; line-height: 1.2; letter-spacing: 2px; } .teffect { color: var(--muted); font-family: Verdana, Geneva, sans-serif; font-size: 11px; line-height: 1.45; margin-top: 3px; } / ── index grids ───────────────────────────────────────────────── / .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-bottom: 16px; } .card { display: block; padding: 10px 12px; background: var(--panel); border: 2px solid #3a3a5a; text-decoration: none; color: var(--text); min-width: 0; transition: border-color .12s, background .12s; } .card:visited { color: var(--text); } .card:hover { border-color: var(--accent, var(--gold)); background: #23234a; } .card .px { display: block; font-size: 9px; line-height: 1.6; color: var(--gold); margin-bottom: 6px; } .card .muted { font-size: 24px; line-height: 1.2; } .class-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; } .class-card { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 8px; background: var(--panel); border: 2px solid #3a3a5a; border-top-width: 4px; border-top-color: var(--accent, var(--gold)); / generator tints per class / text-decoration: none; color: var(--gold-pale); text-align: center; transition: border-color .12s, background .12s; } .class-card:visited { color: var(--gold-pale); } .class-card:hover { border-color: var(--accent, var(--gold)); background: #23234a; } .class-card img { width: 64px; height: 64px; image-rendering: pixelated; } .class-card .px { font-size: 9px; line-height: 1.6; color: var(--accent, var(--gold)); } .stat-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; } .stat-row > { flex: 1 1 auto; min-width: 110px; padding: 10px 12px; background: var(--panel); border: 2px solid #3a3a5a; text-align: center; text-decoration: none; color: var(--text); } .stat-row > a:hover { border-color: var(--accent, var(--gold)); background: #23234a; } .stat-row strong { display: block; font-family: 'Press Start 2P', monospace; font-size: 14px; line-height: 1.6; color: var(--gold); text-shadow: 2px 2px 0 #000; } .stat-row .px { display: block; font-size: 8px; line-height: 1.8; color: var(--muted); } /* The home page's browse tiles: a count over a label. Sized to fit five or six across a desktop row and two across a phone. / .stat-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; flex: 0 1 110px; min-width: 110px; padding: 10px 8px; } .stat-tile b { font-family: 'Press Start 2P', monospace; font-size: 14px; line-height: 1.6; font-weight: normal; color: var(--gold); text-shadow: 2px 2px 0 #000; } .stat-tile span { font-size: 24px; line-height: 1.1; color: var(--muted); } .stat-tile:hover b { color: var(--gold-pale); } / ── home hero ─────────────────────────────────────────────────── / .hero { margin-bottom: 24px; } .hero h1 { margin-bottom: 12px; } .hero-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; } / The chunky beveled button, carried over from the marketing site intact — it is the single strongest piece of shared visual identity the two sites have, and a wiki "Start here" should look like a game's button. / a.btn { display: inline-block; padding: 10px 18px 9px 18px; font-family: 'Press Start 2P', monospace; font-size: 10px; line-height: 1.6; color: var(--gold); text-decoration: none; background: var(--bevel-bg); border: 3px outset var(--bevel); } a.btn:visited { color: var(--gold); } a.btn:hover { background: #403314; color: var(--gold-pale); } a.btn:active { border-style: inset; } / ── card titles ─────────────────────────────────────────────────── Shared by .card, .spec-card and .class-card. Press Start 2P for the name, monogram for the sub-line — the same chrome/prose split the rest of the site uses. ────────────────────────────────────────────────────────────────── / .card-title { font-family: 'Press Start 2P', monospace; font-size: 9px; line-height: 1.6; color: var(--gold); text-shadow: 2px 2px 0 #000; } .card-sub { font-size: 24px; line-height: 1.15; color: var(--muted); margin-top: 4px; } .card-sub:empty { display: none; } .class-card .card-title { color: var(--accent, var(--gold)); } .card:hover .card-title, .class-card:hover .card-title { color: var(--gold-pale); } / A spec card carries an .ibox-art frame; tighten it so the card does not become mostly padding. / .spec-card { text-align: center; } .spec-card .ibox-art { padding: 6px; margin-bottom: 8px; min-height: 0; } .spec-card .ibox-art img { width: 48px; height: 48px; } / ── strengths / weaknesses ──────────────────────────────────────── Two columns of plain lists. The left border is the only thing telling them apart at a glance, which is enough — the h3 already says which is which, so the tint is reinforcement, not the sole signal (it has to survive a colour-blind reader). ────────────────────────────────────────────────────────────────── / .sw-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 16px; } .sw-col { padding: 10px 12px 10px 14px; background: #14142a; border-left: 3px solid var(--border); } .sw-col:first-child { border-left-color: #3a8a20; } / strengths / .sw-col:last-child { border-left-color: #a04a3a; } / weaknesses / .sw-col h3 { margin: 0 0 8px 0; font-family: 'Press Start 2P', monospace; font-size: 9px; line-height: 1.6; color: var(--gold); text-shadow: 2px 2px 0 #000; } .sw-col ul { margin: 0; padding-left: 22px; list-style: square; } .sw-col li { margin-bottom: 4px; line-height: 1.3; } .sw-col li::marker { color: var(--muted); } / ── quest objectives ──────────────────────────────────────────── / ul.objectives { list-style: none; margin: 0 0 12px 0; padding: 0; } ul.objectives li { margin-bottom: 10px; line-height: 1.35; } / A mini badge marking the objective kind. Uppercased in CSS rather than in the data so the JSON keeps its original casing. / .obj-type { display: inline-block; margin-right: 6px; padding: 2px 6px; font-family: 'Press Start 2P', monospace; font-size: 8px; line-height: 1.6; text-transform: uppercase; color: var(--gold); background: var(--bevel-bg); border: 1px solid var(--bevel); vertical-align: middle; } / ── quest dialogue ──────────────────────────────────────────────── Collapsed by default so a quest page cannot spoil itself, and it works with JavaScript off. The speech is set on aged paper — the same stock the marketing site's polaroids use — so a character talking never reads as another row of UI chrome. ────────────────────────────────────────────────────────────────── / details.dialogue { margin: 0 0 16px 0; background: var(--panel); border: 2px solid #3a3a5a; } details.dialogue > summary { padding: 10px 12px; font-family: 'Press Start 2P', monospace; font-size: 10px; line-height: 1.6; color: var(--gold); background: var(--bevel-bg); border: 3px outset var(--bevel); cursor: pointer; list-style-position: inside; user-select: none; -webkit-user-select: none; } details.dialogue > summary:hover { background: #403314; color: var(--gold-pale); } details.dialogue > summary:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; } details.dialogue[open] > summary { border-style: inset; color: var(--gold-pale); margin-bottom: 4px; } details.dialogue h4 { margin: 12px 12px 6px 12px; font-family: 'Press Start 2P', monospace; font-size: 9px; line-height: 1.6; font-weight: normal; color: var(--gold); text-shadow: 2px 2px 0 #000; } details.dialogue blockquote { margin: 0 12px 12px 12px; padding: 10px 14px; background: var(--paper); color: #4a3a20; border-left: 6px solid var(--accent, var(--gold)); box-shadow: 3px 3px 0 rgba(0, 0, 0, .45); line-height: 1.35; } / ── disambiguation ────────────────────────────────────────────── / ul.disambig { list-style: none; margin: 0 0 16px 0; padding: 0; } ul.disambig li { padding: 10px 12px; margin-bottom: 8px; background: var(--panel); border-left: 3px solid var(--accent, var(--gold)); line-height: 1.3; } ul.disambig li > a { color: var(--gold-pale); } ul.disambig li > a:visited { color: var(--visited); } ul.disambig .muted { font-size: 24px; } / ── inline derived marker ───────────────────────────────────────── Sits beside a computed number (weapon DPS) inside an infobox row, where the surrounding text is Verdana 13px. Distinct from the block-level .derived note at the foot of a page. ────────────────────────────────────────────────────────────────── / .derived-inline { font-family: Verdana, Geneva, sans-serif; font-size: 9px; color: var(--muted); border-bottom: 1px dotted var(--muted); cursor: help; margin-left: 4px; vertical-align: middle; } / ── footer ────────────────────────────────────────────────────── / #site-footer { background: var(--footer); border-top: 3px solid var(--border); padding: 16px; text-align: center; } #site-footer p { max-width: 1000px; margin: 0 auto 6px auto; font-size: 24px; line-height: 1.35; color: #77719a; } #site-footer p.muted { color: var(--muted); font-family: Verdana, Geneva, sans-serif; font-size: 11px; line-height: 1.5; } #site-footer code { color: var(--gold-pale); } #site-footer a { color: var(--link); } / ── accessibility ─────────────────────────────────────────────── / a:focus-visible, input:focus-visible, button:focus-visible, table.data.sortable th:focus-visible, .card:focus-visible, .talent:focus-visible, .class-card:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; } / ── responsive: one breakpoint, and it is a real one ────────────── Below 900px the sidebar stops being a sidebar and becomes a row of chips UNDER the content, because on a phone the thing you came for is the article, not the navigation. Body text stays at 24px — dropping to 20px would put monogram off its 12px cell and smear every stem. ────────────────────────────────────────────────────────────────── / @media (max-width: 900px) { .wiki-shell { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 14px 10px 30px 10px; } main.content { order: 1; padding: 14px 12px 20px 12px; } nav.sidebar { order: 2; position: static; } nav.sidebar ul { display: flex; flex-wrap: wrap; gap: 6px; } nav.sidebar a { border: 2px outset var(--bevel); border-left-width: 2px; background: var(--bevel-bg); color: var(--gold); padding: 4px 8px 3px 8px; } nav.sidebar a.on { border-style: inset; color: var(--gold-pale); background: #403314; } aside.infobox { float: none; width: 100%; margin: 0 0 16px 0; } .mast-inner { flex-wrap: wrap; padding: 8px 10px; gap: 10px; } form.search { flex: 1 1 100%; } h1 { font-size: 18px; } h2 { font-size: 12px; } input.tfilter { max-width: none; } .talents { grid-template-columns: minmax(0, 1fr); } .tier { grid-template-columns: minmax(0, 1fr); gap: 8px; } table.data th { position: static; } / One column. The left-border tint still distinguishes the two, and the h3 still names them, so nothing is lost by stacking. / .sw-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; } .hero-cta { flex-direction: column; } a.btn { text-align: center; } .stat-tile { flex: 1 1 calc(50% - 5px); } details.dialogue h4 { margin-left: 8px; margin-right: 8px; } details.dialogue blockquote { margin-left: 8px; margin-right: 8px; padding: 8px 10px; } } @media (prefers-reduced-motion: reduce) { { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } }