/* ========================================================================== QOURATH - "Soot & Brass" UI layer (2026-10-10, Pavel: make the inventory, character, skill screens, skill hotkeys and HUD/potions follow a design like Grim Dawn's - don't copy it, apply its good parts). Loaded LAST. What we took from studying Grim Dawn's shipped UI textures (clean-room: no art or code reused, see docs/UI-SOOT-AND-BRASS.md): - windows are very dark, grimy and matte; ornament is HAIRLINE thin tarnished brass, with knotwork only at the corners - colour is reserved for information (rarity, life, energy); frames, tabs and buttons stay neutral, so the items are what glows - equipment slots are recessed, cool blue-grey wells around a dark character stage; the bag is a flat grid with faint brass rules - the action bar is one long strip of square, sunken slots; potions and globes sit at its ends in the same metal Panel art: assets/ui/gd_panel_bg.jpg (Codex-painted soot slate tile) and gd_corner_*.png (Codex-painted brass corner knot, keyed). ?gdui=0 = off. ========================================================================== */ :root{ --gd-ink:#0b0a09; --gd-slate:#151412; --gd-line:#a8946a; --gd-line-hi:#d8c592; --gd-line-dim:rgba(168,148,106,.38); --gd-text:#d3ccbb; --gd-dim:#8e8571; --gd-head:#e6d9b6; --gd-well0:#1a2126; --gd-well1:#0b0f12; --gd-btn0:#2a2620; --gd-btn1:#14120f; /* the ONE hover look for HUD and menu buttons (2026-10-14, Velscour study: small buttons that light up on hover): a warm brass glow + a touch of brightness, 0.12 s. Active toggles pulse the same glow slowly (.gdOn). */ --gd-glow:rgba(216,180,96,.75); --gd-glow-hover:drop-shadow(0 0 5px var(--gd-glow)) brightness(1.15); --gd-glow-t:.12s; } html.gdUI{ /* the older theme layers read these; quieter versions of their accents */ --bronze:#a8946a; --bronze-hi:#d8c592; --bronze-lo:#5a4e38; --bronze-deep:#1e1a14; --brass:#a8946a; --brass-hi:#d8c592; --brass-lo:#5a4e38; } /* ---------------------------------------------------------------- windows */ html.gdUI .panel,html.gdUI #helpCard,html.gdUI #dlg,html.gdUI #runSum{ border-image:none !important;border:1px solid var(--gd-line-dim) !important; background: url(../assets/ui/gd_corner_tl.png) left top/86px no-repeat, url(../assets/ui/gd_corner_tr.png) right top/86px no-repeat, url(../assets/ui/gd_corner_bl.png) left bottom/86px no-repeat, url(../assets/ui/gd_corner_br.png) right bottom/86px no-repeat, radial-gradient(120% 90% at 50% 40%,transparent 55%,rgba(0,0,0,.55)), url(../assets/ui/gd_panel_bg.jpg) center/420px repeat, var(--gd-slate) !important; box-shadow:0 0 0 1px #000,0 0 0 5px #12100e,0 0 0 6px rgba(168,148,106,.32),0 30px 80px rgba(0,0,0,.85) !important; color:var(--gd-text)} html.gdUI .panel h2,html.gdUI #helpCard h2{color:var(--gd-head);text-shadow:0 1px 0 #000;letter-spacing:.2em;font-weight:normal} html.gdUI .secHdr{color:var(--gd-line-hi)} html.gdUI .secHdr::before{background:linear-gradient(90deg,transparent,var(--gd-line-dim))} html.gdUI .secHdr::after{background:linear-gradient(90deg,var(--gd-line-dim),transparent)} /* window head + tabs: small brass-edged plates, no coloured underglow */ html.gdUI .ivHead,html.gdUI .skModern .skHead{background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.1)) !important;border-bottom:1px solid var(--gd-line-dim) !important} html.gdUI .ivTab{color:var(--gd-dim);clip-path:none;border:1px solid transparent;border-bottom:none;padding:9px 20px 8px} html.gdUI .ivTab:hover{color:var(--gd-line-hi);background:rgba(168,148,106,.06)} html.gdUI .ivTab.on{color:var(--gd-head);border-color:var(--gd-line-dim);background:linear-gradient(180deg,#2b261d,#121009 80%);text-shadow:none} html.gdUI .ivTab.on::after{background:var(--gd-line);box-shadow:none;height:1px;left:0;right:0} html.gdUI .ivDot{background:var(--gd-line);color:#14110c;box-shadow:none} /* buttons: dark bevel, brass hairline, text lights up on hover - never a bright fill */ html.gdUI .panel button:not(.ivTab):not(.skClose):not(.eq):not(.slot), html.gdUI #ptsBadge{ background:linear-gradient(180deg,var(--gd-btn0),var(--gd-btn1)) !important;color:var(--gd-head) !important; border:1px solid var(--gd-line-dim) !important;box-shadow:inset 0 1px 0 rgba(255,240,200,.06),inset 0 -1px 0 #000,0 1px 2px #000 !important; text-shadow:0 1px 0 #000 !important;clip-path:none !important;border-radius:0 !important} html.gdUI .panel button:not(.ivTab):not(.skClose):not(.eq):not(.slot):hover{color:#fff4d6 !important;border-color:var(--gd-line) !important;filter:var(--gd-glow-hover)} html.gdUI #ptsBadge{padding:4px 16px} /* ---------------------------------------------------------- equipment wells */ html.gdUI #invPanel .eq{ background:radial-gradient(90% 80% at 50% 40%,#1e262b,transparent 75%) padding-box,linear-gradient(180deg,var(--gd-well0),var(--gd-well1)) padding-box !important; border:1px solid rgba(168,148,106,.55) !important;border-radius:0 !important; box-shadow:inset 0 0 16px rgba(0,0,0,.9),inset 0 0 0 1px #000,0 0 0 1px rgba(0,0,0,.6) !important;color:var(--gd-dim)} html.gdUI #invPanel .eq:hover{border-color:var(--gd-line-hi) !important;filter:var(--gd-glow-hover)} html.gdUI #invPanel .eq .lbl{color:#6f6a5e;letter-spacing:.14em} /* rarity reads as a thin inner rim + a faint wash, not a neon frame */ html.gdUI #invPanel .eq.filled.r1{box-shadow:inset 0 0 0 1px rgba(106,138,224,.55),inset 0 0 18px rgba(106,138,224,.12),inset 0 0 16px rgba(0,0,0,.8) !important} html.gdUI #invPanel .eq.filled.r2{box-shadow:inset 0 0 0 1px rgba(224,192,80,.6),inset 0 0 18px rgba(224,192,80,.12),inset 0 0 16px rgba(0,0,0,.8) !important} html.gdUI #invPanel .eq.filled.r3{box-shadow:inset 0 0 0 1px rgba(232,120,176,.6),inset 0 0 18px rgba(232,120,176,.12),inset 0 0 16px rgba(0,0,0,.8) !important} html.gdUI #invPanel .eq.filled.r4{box-shadow:inset 0 0 0 1px rgba(255,154,60,.7),inset 0 0 20px rgba(255,154,60,.14),inset 0 0 16px rgba(0,0,0,.8) !important} html.gdUI #invPanel .eq.filled.r5{box-shadow:inset 0 0 0 1px rgba(220,176,255,.7),inset 0 0 20px rgba(220,176,255,.14),inset 0 0 16px rgba(0,0,0,.8) !important} html.gdUI #invPanel .eq.filled.r4.iset{box-shadow:inset 0 0 0 1px rgba(95,208,122,.7),inset 0 0 20px rgba(95,208,122,.14),inset 0 0 16px rgba(0,0,0,.8) !important} html.gdUI #invPanel .eq[data-slot^="bag"]{background:linear-gradient(180deg,#221d16,#0c0a08) padding-box !important} /* the character stage: a dark vignette well */ html.gdUI #doll #dollStage,html.gdUI .ivHeroDoll{background:radial-gradient(60% 55% at 50% 38%,rgba(120,130,135,.16),transparent 70%),linear-gradient(180deg,#0e1113,#060708) !important; box-shadow:inset 0 0 0 1px rgba(168,148,106,.45),inset 0 0 40px #000} /* ------------------------------------------------------------------- bag */ html.gdUI #invGrid,html.gdUI #stashGrid{background:#08090a !important;box-shadow:0 0 0 1px rgba(168,148,106,.5),0 0 0 4px #0d0c0a,0 0 0 5px rgba(168,148,106,.22) !important} html.gdUI .cell{box-shadow:inset 0 0 0 1px rgba(168,148,106,.11),inset 0 0 10px rgba(0,0,0,.5) !important} /* ---------------------------------------------------------- skill window */ html.gdUI .skModern .skDet{border-left:1px solid var(--gd-line-dim) !important} html.gdUI .skModern .skPts{border-color:var(--gd-line-dim) !important} html.gdUI .skClose{color:var(--gd-line)} html.gdUI .skSlot{background:linear-gradient(180deg,var(--gd-well0),var(--gd-well1)) !important;border:1px solid rgba(168,148,106,.5) !important;border-radius:0 !important; box-shadow:inset 0 0 10px #000 !important} /* ------------------------------------------------------------ action bar */ html.gdUI #console{background: linear-gradient(180deg,rgba(168,148,106,.55),rgba(168,148,106,.55)) 0 14px/100% 1px no-repeat, linear-gradient(180deg,#000,#000) 0 15px/100% 1px no-repeat, url(../assets/ui/gd_panel_bg.jpg) center/300px repeat,#121110 !important; -webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); height:92px;top:auto;bottom:0;border-top:none;clip-path:inset(14px 0 0 0);width:calc(100vw - 420px);min-width:560px;filter:drop-shadow(0 -4px 14px rgba(0,0,0,.75))} html.gdUI .slot{ clip-path:none !important;border-radius:0 !important;border:1px solid rgba(168,148,106,.6) !important; background:linear-gradient(180deg,#1b2125,#090c0e) !important; box-shadow:inset 0 0 0 1px #000,inset 0 0 12px rgba(0,0,0,.95),0 0 0 1px rgba(0,0,0,.8) !important} html.gdUI .slot:hover{filter:var(--gd-glow-hover);border-color:var(--gd-line-hi) !important;transform:none} html.gdUI .slot .ic{filter:none;-webkit-background-clip:border-box;background:none;color:var(--gd-text)} html.gdUI .slot .ic .skImg{box-shadow:inset 0 0 0 1px #000} html.gdUI .slot .key{color:var(--gd-line-hi);left:4px;transform:none;top:1px;letter-spacing:0} html.gdUI .slot .cd{border-top:1px solid var(--gd-line) !important;box-shadow:none !important;background:rgba(5,6,7,.78) !important} html.gdUI #hotbar{gap:4px} html.gdUI #xpFill{background:linear-gradient(90deg,#5c4c2c,#a8946a 60%,#d8c592);box-shadow:none} /* ----------------------------------------------------------- potion belt */ html.gdUI #belt .bSlot{border-radius:0 !important;border:1px solid rgba(168,148,106,.6) !important; background:linear-gradient(180deg,#1b2125,#090c0e) !important;box-shadow:inset 0 0 12px rgba(0,0,0,.95),0 0 0 1px #000 !important} html.gdUI #belt .bSlot .bKey,html.gdUI #belt .bSlot b{color:var(--gd-line-hi)} /* --------------------------------------------------------- globes: iron, not chrome */ html.gdUI .orbFrame{filter:saturate(.25) sepia(.55) brightness(.62) contrast(1.2)} html.gdUI .orbLiquid{filter:saturate(.82) brightness(.92)} html.gdUI .orbLbl{color:var(--gd-dim)} /* ----------------------------------------------------------------- cursor */ html.qoCursor.qoAtk canvas{cursor:var(--qoAttack,crosshair)} html.qoCursor.qoGrab canvas{cursor:var(--qoGrab,grab)} /* ------------------------------------------------- world-state column (2026-10-10, Pavel: "i dont like the lattice timer, corruption, resonance display and the text always underneath it ... same with merc commands above attack keys") Top-centre stays clear for the fight and boss bars. Everything about the WORLD now stacks in one column under the minimap: the reality timer (compact, label inline), corruption + resonance side by side, the mirror's memory, then the objective line, right-aligned and wrapping. The merc's orders become a small plate at the top left. */ html.gdUI #flickerWrap{position:fixed;left:auto !important;right:12px;top:calc(var(--mmS,216px) + 40px) !important;width:216px !important;transform:none !important;text-align:right} html.gdUI #flickerBar{height:4px !important} html.gdUI #flickerBar::before,html.gdUI #flickerBar::after{display:none} html.gdUI #flickerLbl{margin-top:5px !important;font-size:max(11px,var(--qo-small,11px)) !important;letter-spacing:.14em !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} html.gdUI #corrWrap,html.gdUI #resWrap{left:auto !important;top:calc(var(--mmS,216px) + 74px) !important;width:104px !important;transform:none !important} html.gdUI #corrWrap{right:124px} html.gdUI #resWrap{right:12px} html.gdUI #corrLbl,html.gdUI #resLbl{font-size:max(11px,var(--qo-small,11px)) !important;letter-spacing:.06em !important;margin-top:4px !important;white-space:nowrap} html.gdUI #memWrap{top:calc(var(--mmS,216px) + 104px) !important;right:12px !important;width:216px !important} html.gdUI #navObj{left:auto !important;right:12px !important;top:calc(var(--mmS,216px) + 136px) !important;transform:none !important; max-width:216px !important;width:auto !important;white-space:normal !important;text-align:right !important; background:none !important;padding:0 !important;font-size:max(12px,var(--qo-small,12px)) !important;letter-spacing:.06em !important;line-height:1.35 !important; color:var(--gd-text) !important;text-shadow:0 1px 2px #000,0 0 8px #000} html.gdUI #zoomBtns{top:calc(var(--mmS,216px) + 214px) !important} /* merc orders: a plate at the top left (click or G cycles, as before) */ html.gdUI #mercBadge{left:14px !important;top:176px !important;bottom:auto !important;transform:none !important;white-space:normal !important;max-width:236px; font:600 max(11px,var(--qo-small,11px))/1.45 Georgia,serif !important;letter-spacing:.08em !important;color:var(--gd-text) !important; background:linear-gradient(180deg,rgba(22,20,17,.92),rgba(10,9,8,.92)) !important;border:1px solid var(--gd-line-dim) !important;border-radius:0 !important;padding:5px 9px !important; box-shadow:0 0 0 1px #000,0 4px 12px rgba(0,0,0,.6)} /* ------------------------------------------------- hover glow, applied once (2026-10-14, js/hudfeel.js header) These buttons used to light up four different ways (a teal drop-shadow and a lift on the belt and hotbar, a blue fill on mini/zoom buttons, box-shadow:none + brightness elsewhere). Now: the token above, same timing everywhere. :is() takes its strongest argument's specificity, so the ids also beat the runtime