/* wgf-mplus-groups.css - the Blizzard-asset layer for the Mythic+ group pages (mplus_runs_app.py: /pve/mythic-plus/dungeon//groups/ and the run snapshot). Palette tokens only (static/css/_tokens.css): near-black slate plates, bronze/gold rules, parchment text, the q0-q5 quality ramp. No green chrome, no gradients, no glows. Frames are real client art from assets/ui/ (achievement icon frame, metal window corners); item quality rings come from .wgf-qborder in wgf-chrome.css, which every page here loads. The existing wgf-mplus-runs.css keeps the board table, member chips and gear cards; this sheet only adds the plates that were not there before, so neither file duplicates the other. */ /* FrizQT is declared only in wgf-game-skin.css, which restyles and must not be pulled into a shell page (asset kit sec.0). Until the @font-face block is lifted into a shell sheet, these titles ask for the family and fall back cleanly. */ .wgf-mgrp-id__name, .wgf-mgrp-h2 { font-family: FrizQT, "Friz Quadrata TT", Georgia, "Times New Roman", serif; letter-spacing: 0.01em; } /* ── the dungeon identity plate ─────────────────────────────────────────────────────────── */ .wgf-mgrp-id { display: flex; gap: 16px; align-items: flex-start; margin: 18px 0 0; padding: 14px 16px; background: var(--wgf-bg-2, #0d0f14); border: 1px solid var(--wgf-metal, #6e5a2a); border-radius: 3px; position: relative; } /* client window corners (assets/ui/ui-frame-metal-corner*-2x.png) on the plate */ .wgf-mgrp-id::before, .wgf-mgrp-id::after { content: ""; position: absolute; width: 18px; height: 18px; background-size: 100% 100%; background-repeat: no-repeat; pointer-events: none; } .wgf-mgrp-id::before { top: -1px; left: -1px; background-image: url(/assets/ui/ui-frame-metal-cornertopleft-2x.png); } .wgf-mgrp-id::after { bottom: -1px; right: -1px; background-image: url(/assets/ui/ui-frame-metal-cornerbottomright-2x.png); } /* the Adventure Guide tile in the client's achievement icon frame */ .wgf-mgrp-crest { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 84px; height: 84px; } .wgf-mgrp-crest img { width: 66px; height: 66px; object-fit: cover; border-radius: 2px; background: #000; } .wgf-mgrp-crest::after { content: ""; position: absolute; inset: 0; background-image: url(/assets/ui/achv/iconframe.png); background-size: 100% 100%; background-repeat: no-repeat; pointer-events: none; } .wgf-mgrp-id__body { min-width: 0; } .wgf-mgrp-id__name { margin: 0 0 4px; font-size: 1.15rem; color: var(--wgf-gold, #ffd100); } .wgf-mgrp-id__db { font-size: 0.86rem; color: var(--wgf-gold-link, #ffe375); } .wgf-mgrp-id__bosses { margin-top: 8px; } .wgf-mgrp-lbl { display: block; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--wgf-gold-accent, #b7912f); margin-bottom: 3px; } .wgf-mgrp-bosses { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px 8px; } .wgf-mgrp-boss { font-size: 0.84rem; color: var(--wgf-text, #f4ecd8); padding: 2px 8px; background: var(--wgf-well, #08090c); border: 1px solid var(--wgf-metal-soft, #3a3120); border-radius: 2px; } /* ── shared panel shell for facts / loot / siblings ─────────────────────────────────────── */ .wgf-mgrp-panel { margin: 18px 0 0; padding: 12px 16px 14px; background: var(--wgf-bg-2, #0d0f14); border: 1px solid var(--wgf-metal-soft, #3a3120); border-radius: 3px; } .wgf-mgrp-h2 { margin: 0 0 8px; font-size: 1rem; color: var(--wgf-gold, #ffd100); } .wgf-mgrp-note { margin: 8px 0 0; font-size: 0.8rem; color: var(--wgf-muted, #b3a88f); } /* ── facts table ────────────────────────────────────────────────────────────────────────── */ .wgf-mgrp-facts { width: 100%; } .wgf-mgrp-facts__k { text-align: left; font-weight: 600; color: var(--wgf-gold-muted, #b5a06a); white-space: nowrap; } .wgf-mgrp-facts__v { color: var(--wgf-text, #f4ecd8); font-variant-numeric: tabular-nums; white-space: nowrap; } .wgf-mgrp-facts__n { color: var(--wgf-muted, #b3a88f); font-size: 0.84rem; } /* ── loot grid ──────────────────────────────────────────────────────────────────────────── */ .wgf-mgrp-lootgrid { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px 12px; } .wgf-mgrp-loot { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 3px 4px; border-bottom: 1px solid var(--wgf-border-neutral-soft, #202229); } .wgf-mgrp-loot__ic { flex: 0 0 auto; } .wgf-mgrp-loot__t { min-width: 0; font-size: 0.88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wgf-mgrp-loot__name { color: inherit; } /* ── sibling board links ────────────────────────────────────────────────────────────────── */ .wgf-mgrp-sibs { display: flex; flex-wrap: wrap; gap: 6px 8px; } .wgf-mgrp-sib { font-size: 0.86rem; padding: 4px 10px; color: var(--wgf-gold-link, #ffe375); background: var(--wgf-well, #08090c); border: 1px solid var(--wgf-metal-soft, #3a3120); border-radius: 2px; } .wgf-mgrp-sib:hover { border-color: var(--wgf-metal, #6e5a2a); } /* ── gear slot rows on the run snapshot ─────────────────────────────────────────────────── */ .wgf-mgrp-slot { display: flex; align-items: center; gap: 8px; padding: 2px 0; min-width: 0; } .wgf-mgrp-slot__ic { flex: 0 0 auto; } .wgf-mgrp-slot__ic .wgf-qborder { width: 30px; height: 30px; } .wgf-mgrp-slot__ic .wgf-qborder__icon { width: 22px; height: 22px; } .wgf-mgrp-slot__name { min-width: 0; flex: 1 1 auto; font-size: 0.86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wgf-mgrp-slot__link { color: inherit; } .wgf-mgrp-slot__ilvl { flex: 0 0 auto; font-variant-numeric: tabular-nums; font-size: 0.8rem; color: var(--wgf-gold-muted, #b5a06a); } /* the local class/spec icon in a member chip */ .wgf-mgrp-ico { width: 18px; height: 18px; border-radius: 2px; vertical-align: -3px; background: #000; } @media (max-width: 640px) { .wgf-mgrp-id { gap: 12px; padding: 12px; } .wgf-mgrp-crest { width: 64px; height: 64px; } .wgf-mgrp-crest img { width: 50px; height: 50px; } .wgf-mgrp-lootgrid { grid-template-columns: 1fr; } }