/* User-scalable card: zoom the whole gem-detail unit (card + recommended supports). zoom reflows the layout box so the flex-centered card stays centered and every px value scales proportionally. Medium is the default (no rule / zoom:1). Driven by data-card-size on ; see card-size.js. */ html[data-card-size="s"] .gem-detail { zoom: 0.85; } html[data-card-size="l"] .gem-detail { zoom: 1.25; } html[data-card-size="xl"] .gem-detail { zoom: 1.5; } /* Condensed browse-card grids scale with the same control: base items / uniques / highest-tier (.bases-list-grid), gems (.gem-browse-grid), ascendancies keystones + per-ascendancy nodes (.keystone-index-grid). Zoom the grid as a unit so the gap and column tracks scale proportionally and the cards stay aligned. */ html[data-card-size="s"] .bases-list-grid, html[data-card-size="s"] .bases-class-grid, html[data-card-size="s"] .gem-browse-grid, html[data-card-size="s"] .keystone-index-grid, html[data-card-size="s"] .tc-passive-grid { zoom: 0.85; } html[data-card-size="l"] .bases-list-grid, html[data-card-size="l"] .bases-class-grid, html[data-card-size="l"] .gem-browse-grid, html[data-card-size="l"] .keystone-index-grid, html[data-card-size="l"] .tc-passive-grid { zoom: 1.25; } html[data-card-size="xl"] .bases-list-grid, html[data-card-size="xl"] .bases-class-grid, html[data-card-size="xl"] .gem-browse-grid, html[data-card-size="xl"] .keystone-index-grid, html[data-card-size="xl"] .tc-passive-grid { zoom: 1.5; } /* The rollable-affix browser on /bases/:class scales with the same control. Zoom the whole section as a unit so the heading, two-column layout, gaps and the px-based table font sizes all scale proportionally. */ html[data-card-size="s"] .affix-section, html[data-card-size="s"] .augment-section { zoom: 0.85; } html[data-card-size="l"] .affix-section, html[data-card-size="l"] .augment-section { zoom: 1.25; } html[data-card-size="xl"] .affix-section, html[data-card-size="xl"] .augment-section { zoom: 1.5; } .newItemPopup { font-family: var(--font-smallcaps); background-color: var(--bg-base); border: 1px solid var(--card-border, var(--card-corrupted-border-fallback)); box-shadow: 0 0 18px var(--card-glow, var(--card-corrupted-glow-strong)), 0 0 6px var(--card-glow, var(--card-corrupted-glow-soft)), inset 0 0 20px rgba(0,0,0,0.8); max-width: 390px; font-size: 13px; line-height: 1.4; position: relative; overflow: hidden; } /* Hybrid gem card: gradient border via double-background trick. Layer 1 fills the padding-box with the card's bg; layer 2 fills the border-box with the gradient — the visible "border" is just the border-box minus padding-box. */ .newItemPopup.hybrid-border { border: 1px solid transparent; background-image: linear-gradient(var(--bg-base), var(--bg-base)), linear-gradient(135deg, var(--card-border), var(--card-border-2)); background-origin: padding-box, border-box; background-clip: padding-box, border-box; box-shadow: 0 0 18px var(--card-glow), 0 0 12px var(--card-glow-2), 0 0 6px var(--card-glow), 0 0 4px var(--card-glow-2), inset 0 0 20px rgba(0,0,0,0.8); } /* Atmospheric background art */ .newItemPopup .bg-art { position: absolute; top: 0; left: 0; right: 0; height: 175px; background-image: var(--hover-image, none); background-repeat: no-repeat; background-position: right top; background-size: cover; opacity: 0.45; pointer-events: none; } .newItemPopup .content { position: relative; z-index: 1; } /* Header: GemHoverTitle banner, height 54px, skill icon left-anchored */ .itemHeader.doubleLine { background: url(/static/img/Art/Textures/Interface/2D/2DArt/UIImages/InGame/SmartHover/GemHoverTitle.webp) top left no-repeat; background-size: contain; height: 54px; position: relative; display: flex; flex-direction: column; justify-content: center; overflow: visible; } /* Skill icon pinned to left of header, exactly as poe2db does */ .leadSkillIcon { position: absolute; left: 17px; top: 5px; width: 45px; height: 45px; border-radius: 4px; object-fit: contain; } /* Gem item icon mirrored on the right of the header */ .trailGemIcon { position: absolute; right: 5px; top: 5px; width: 45px; height: 45px; border-radius: 4px; object-fit: contain; } /* Name lines — indented to clear the icons on both sides */ .itemName .lc { display: block; padding: 2px 68px 0 68px; color: var(--gem-color); font-size: 15px; letter-spacing: 0.3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .itemName.typeLine .lc { color: var(--prop-color); font-size: 13px; padding-top: 0; } /* Stats section */ .Stats { padding: 5px 12px; } .property { color: var(--prop-color); line-height: 1.3; font-size: 12.5px; } .property .colourDefault { color: var(--normal-color); } /* Augmented (mod-modified) values render magic-blue, matching the in-game tooltip */ .property .colourAugmented { color: var(--magic-color); } .property .colourPhysicalDamage { color: var(--normal-color); } .property .colourFireDamage { color: var(--fire-color); } .property .colourColdDamage { color: var(--cold-color); } .property .colourLightningDamage { color: var(--lightning-color); } .property .colourChaosDamage { color: var(--chaos-color); } .property a.KeywordPopups, .requirements a.KeywordPopups { color: var(--prop-color); text-decoration: none; border-bottom: 1px dotted var(--prop-color); } /* Gem level selector (replaces the static "Level:" line on scaling gems). */ .gem-level-line { display: flex; align-items: baseline; gap: 6px; } .gem-level-select { font: inherit; font-size: 12.5px; color: var(--normal-color); background: color-mix(in srgb, var(--color-gem) 12%, var(--bg-base)); border: 1px solid color-mix(in srgb, var(--color-gem) 40%, transparent); border-radius: 3px; padding: 1px 6px 1px 4px; cursor: pointer; } .gem-level-select:hover { border-color: var(--color-gem); } .gem-level-select:focus-visible { outline: 1px solid var(--color-gem); outline-offset: 1px; } /* Gem quality input — matches the level selector; the trailing "%" is a text node. */ .gem-quality-line { display: flex; align-items: baseline; gap: 6px; } .gem-quality-input { font: inherit; font-size: 12.5px; width: 3.5em; color: var(--normal-color); background: color-mix(in srgb, var(--color-gem) 12%, var(--bg-base)); border: 1px solid color-mix(in srgb, var(--color-gem) 40%, transparent); border-radius: 3px; padding: 1px 4px; } .gem-quality-input:hover { border-color: var(--color-gem); } .gem-quality-input:focus-visible { outline: 1px solid var(--color-gem); outline-offset: 1px; } .requirements { color: var(--prop-color); line-height: 1.3; font-size: 12.5px; } .requirements .colourDefault { color: var(--normal-color); } /* Separator line — shared geometry; only the gradient color differs per rarity */ .separator, .UniquePopup .separator { background-size: 100% 2px; background-repeat: no-repeat; background-position: center; } .separator { border: none; height: 8px; margin: 4px 10px; background-image: radial-gradient(ellipse at center, var(--color-prop) 0%, var(--color-prop) 10%, transparent 33%); } /* Unique cards use amber dividers, matching the in-game unique item tooltip */ .UniquePopup .separator { background-image: radial-gradient(ellipse at center, var(--color-unique-divider) 0%, var(--color-unique-divider) 10%, transparent 33%); } /* Description text (italic parchment) */ .secDescrText { color: var(--color-parchment); font-style: italic; font-family: var(--font-regular); padding: 7px 30px; text-align: center; font-size: 12.5px; line-height: 1.55; text-shadow: 1px 1px 2px black, -1px -1px 2px black; } .secDescrText a { color: var(--color-parchment); text-decoration: none; border-bottom: 1px dotted var(--color-parchment); } /* hybridHeader section divider — gem style */ .hybridHeader.gemTabs { display: flex; flex-direction: row; background-image: linear-gradient(90deg, var(--color-gem-tab-transparent), var(--color-gem-tab), var(--color-gem-tab-transparent)); background-size: 100% 2px; background-repeat: no-repeat; background-position: bottom; justify-content: center; align-items: stretch; height: 20px; gap: 4px; margin: 4px 0; } .TextGem.TitleBar { border-top: 1px solid var(--color-gem-tab); border-left: 1px solid var(--color-gem-tab); border-right: 1px solid var(--color-gem-tab); border-top-left-radius: 6px; border-top-right-radius: 6px; line-height: 20px; padding: 0 10px; color: var(--prop-color); background: linear-gradient(180deg, #0f1515, var(--color-black)); font-size: 12px; letter-spacing: 0.5px; } /* Mod text blocks share layout; only the text/link color differs per type. */ .explicitMod, .qualityMod, .secondaryQualityMod { font-size: 12.5px; padding: 1px 14px; text-align: center; } /* Numeric values stand out white wherever stat text is rendered (mods, gems, passives, base items, uniques) — emitted by linkifyPhrases across the board. */ .mod-value { color: white; } .explicitMod a, .qualityMod a, .secondaryQualityMod a { text-decoration: none; } /* Explicit mods — magic blue */ .explicitMod { color: var(--magic-color); font-family: var(--font-smallcaps); line-height: 1.3; } .explicitMod a { color: var(--magic-color); border-bottom: 1px dotted var(--magic-color); } /* Corrupted mods — readable red, overriding the explicit blue wherever a corrupted implicit is shown (planner well hover card + build viewer). Defined after .explicitMod so the shared-specificity modifier wins. */ .corruptedMod { color: var(--color-corrupted); } .corruptedMod a { color: var(--color-corrupted); border-bottom-color: currentColor; } /* Planner mod row: P/S affix-kind flag left, tier rank (T1–TX) right, mod text between. Scoped to .planner-mod so the shared .explicitMod layout is untouched. */ /* Uniform padding on every row so the P/S flag and tier rank line up whether or not a row carries the desecrated band. */ .planner-mod { display: flex; align-items: baseline; gap: 8px; padding: 3px 8px; } .planner-mod__kind { flex: none; width: 1em; text-align: center; color: var(--color-default); font-size: 10px; font-weight: 700; } .planner-mod__text { flex: 1; } .planner-mod__tier { flex: none; color: var(--color-default); font-size: 10px; letter-spacing: .04em; } /* Desecrated (Abyssal) chosen mods get the same in-game Abyssal band as the desecrated affix table rows (same padding as other rows keeps columns aligned). */ .planner-mod--desecrated { background-image: url('/static/img/mod-decorator-abyss.webp'); background-repeat: no-repeat; background-position: center; background-size: 100% 100%; border-radius: 3px; } /* Granted-skill links render gem-teal to stand apart from the blue mod text */ .explicitMod a.skill-grant-link { color: var(--color-gem); border-bottom-color: var(--color-gem); } /* Keywords keep the standard teal glossary color (base .kw) for contrast against the mod text — see global .kw / .kw:hover in app.css. */ /* Inline skill icon preceding "Grants Skill:" (poe2db pattern) */ .explicitMod .grantsSkill { width: 18px; height: 18px; vertical-align: middle; margin-right: 4px; object-fit: contain; } .qualityMod { color: var(--magic-color); } .qualityMod a { color: var(--magic-color); border-bottom: 1px dotted var(--magic-color); } .secondaryQualityMod { color: var(--crafted-color); } .secondaryQualityMod a { color: var(--crafted-color); border-bottom: 1px dotted var(--crafted-color); } /* Gemling Legionnaire alternate quality — the in-game crafted periwinkle. No text label distinguishes it; the colour alone is the recognisable cue (numbers stay white via .mod-value, matching every other stat line). */ .altQualityMod { color: var(--color-crafted); } .altQualityMod a { color: var(--color-crafted); border-bottom: 1px dotted var(--color-crafted); } .quality-text { padding: 4px 14px 1px; text-align: center; } .quality-text .white { color: var(--normal-color); font-size: 12px; } .default.fst-italic { color: var(--default-color); font-style: italic; font-size: 11.5px; text-align: center; padding: 7px 12px 9px; } /* Unique item card — the genuine in-game unique item header, referenced from the GGPK CDN. It's a 3-slice texture (ornate left/right corners + a tiling middle), the same ItemsHeaderUnique{Left,Middle,Right}.dds pieces poe2db re-hosts. Corners scale to header height; middle repeats across. */ .UniquePopup .itemHeader.doubleLine { background: url(/static/img/Art/Textures/Interface/2D/2DArt/UIImages/InGame/ItemsHeaderUniqueLeft.webp) top left no-repeat, url(/static/img/Art/Textures/Interface/2D/2DArt/UIImages/InGame/ItemsHeaderUniqueRight.webp) top right no-repeat, url(/static/img/Art/Textures/Interface/2D/2DArt/UIImages/InGame/ItemsHeaderUniqueMiddle.webp) 0 top repeat-x, url(/static/img/Art/Textures/Interface/2D/2DArt/UIImages/InGame/ItemsHeaderUniqueMiddle.webp) 23px top repeat-x; /* Corners scale to height and sit on top. The middle is tiled at native horizontal scale to keep its filigree crisp; the GGPK slice has a 1px transparent trim edge, so it's layered twice at a half-tile offset — each copy fills the other's seam, leaving no visible gap. */ background-size: auto 100%, auto 100%, auto 100%, auto 100%; height: 56px; padding: 4px 14px; justify-content: center; text-align: center; } .UniquePopup .unique-name { color: var(--unique-color); padding: 0; text-align: center; } .UniquePopup .itemName.typeLine .lc.unique-type { color: var(--unique-color); padding: 0; font-size: 13px; text-align: center; } /* Subtitle links to the base item; dotted underline marks it as navigable. inline-block keeps the underline hugging the text, parent centers it. */ .UniquePopup .itemName.typeLine { text-align: center; } a.lc.unique-type { display: inline-block; text-decoration: none; border-bottom: 1px dotted var(--unique-color); } a.lc.unique-type:hover { border-bottom-style: solid; } /* Computed item stats + requirements — centered, muted grey labels */ .UniquePopup .property, .UniquePopup .requirements { color: var(--color-default); text-align: center; } /* Item art beside the card — matches poe2db .itemboximage pattern */ .unique-item-with-art { display: flex; align-items: flex-start; gap: 12px; } .itemboximage { padding-top: 8px; flex-shrink: 0; } .itemboximage img { display: block; } /* Unique flavour text — warm amber italic, centered (poe2db .FlavourText) */ .FlavourText { color: var(--color-unique-flavour); font-style: italic; font-family: var(--font-regular); text-align: center; font-size: 12px; line-height: 1.55; padding: 6px 20px 10px; text-shadow: 1px 1px 2px black, -1px -1px 2px black; } /* Cultivated (mutated Vaal) mod pool — outcomes of the Vaal Cultivation Orb. Corruption-red section label so it reads as the mutated/gamble pool (poe2db's mutatedMod block); the mod lines keep the normal magic tint for readability. */ .cultivatedMods .cultivatedMods-label { color: var(--color-corrupted); font-family: var(--font-regular); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; text-align: center; padding: 1px 0 4px; opacity: 0.92; } /* Mod body reads Vaal-red; the white .mod-value numbers and teal .kw keywords keep their own explicit colors, so only the surrounding prose turns red. */ .cultivatedMods .explicitMod { color: var(--color-corrupted); } /* Pool-driven uniques (Loreweave, Grip of Kulemak, Flesh Crucible): the mods the item CAN have, not mods it does have. Mirrors the .cultivatedMods block since both are "possible outcomes, not guaranteed stats", but stays visually distinct and leads with an explanatory note rather than a bare label — the game data records neither the number of pool mods rolled nor the selection rule, so the uncertainty has to be on the card, not just in the docs. */ .poolMods .poolMods-label { color: var(--color-crafted); font-family: var(--font-regular); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; text-align: center; padding: 1px 0 4px; opacity: 0.92; } /* "67 possible" — de-emphasized count so the label reads as a heading, and the qualifier travels with it everywhere the pool is summarized. */ .poolMods-count { font-size: 0.92em; letter-spacing: 0.04em; opacity: 0.75; text-transform: none; } /* The honesty note. Deliberately not styled as a mod line: italic, dimmer, and wrapped, so it can't be mistaken for one of the item's stats. */ .poolMods .poolMods-note { color: var(--color-default); font-size: 10.5px; font-style: italic; line-height: 1.5; padding: 0 6px 6px; text-align: center; text-wrap: pretty; } .poolMods .poolMods-note--aside { padding-top: 6px; opacity: 0.8; } /* The load-bearing words ("can", "not recorded in the game data") go white and upright — the same high-contrast emphasis .mod-value uses for numbers, so the caveat is the first thing read, not the last. */ .poolMods .poolMods-note strong { color: white; font-style: normal; } /* Pool mod rows: the mod text, then the unique it was woven from. */ .poolMods .poolMod { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .poolMods .poolMod-text { flex: 1 1 auto; min-width: 0; } /* Origin attribution — the "which ring did this come from" link that makes the pool traversable. Small, right-aligned, never competing with the mod text. */ .poolMod-source { flex: 0 0 auto; color: var(--color-unique, #af6025); font-size: 9.5px; letter-spacing: 0.03em; text-transform: uppercase; white-space: nowrap; opacity: 0.85; } a.poolMod-source:hover { opacity: 1; text-decoration: underline; } .poolMod-source--strong { font-size: 11px; text-transform: none; opacity: 1; } /* Reverse lookup block on a source unique ("Can be woven into: Loreweave"). */ .wovenInto .wovenInto-label { color: var(--color-crafted); font-family: var(--font-regular); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; text-align: center; padding: 1px 0 4px; opacity: 0.92; } /* "Any Body Armour" type line — a pool unique has no single base, so this is a descriptive label, not a linkable base name. */ .unique-type--any { font-style: italic; opacity: 0.9; } /* Pool summary on the /uniques grid card. */ .bases-list-pool { opacity: 0.9; } /* Cultural-origin badge (Kalguuran/Ezomyte/Vaal) on the class line. */ .unique-origin { display: inline-block; margin-left: 6px; padding: 0 5px; border: 1px solid currentColor; border-radius: 3px; font-size: 9.5px; letter-spacing: 0.05em; text-transform: uppercase; vertical-align: middle; opacity: 0.85; } .unique-origin--vaal { color: var(--color-corrupted); } .unique-origin--ezomyte { color: #c9a24b; } .unique-origin--kalguuran { color: #6fb0c9; } .unique-base-line { color: var(--color-default); font-size: 11.5px; text-align: center; padding: 6px 12px 9px; } .unique-base-line .base-link { color: var(--color-normal); text-decoration: none; } .unique-base-line .base-link:hover { color: var(--unique-color); } /* Unique index page */ .unique-page-title { font-family: var(--font-display); color: var(--unique-color); } .page-subtitle { color: var(--color-default); margin: 4px 0 16px; } /* Shared card-grid geometry. Two column-width variants (160px / 200px min); most are centered at page width. */ .bases-class-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); } .unique-index-grid, .keystone-index-grid, .bases-list-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* Cards size to their own content instead of stretching to the tallest in the row (unique mod lists vary a lot in length). */ align-items: start; } .unique-index-grid, .keystone-index-grid, .bases-list-grid { width: 100%; max-width: 900px; padding: 16px 0; } .unique-index-grid, .keystone-index-grid { gap: 8px; } /* Icon + name row cards share a flat surface + bordered shell; each variant keeps its own gap/padding/color/font and hover accent. */ .unique-index-card, .keystone-index-card, .bases-class-card, .bases-list-card, .mods-list-row { display: flex; background: var(--bg-surface); border: 1px solid var(--border); text-decoration: none; } /* Keystone browse cards — condensed: a flat keystone-blue header banner (no in-game texture exists for passives), then icon + the keystone's effect lines. Full tooltip on hover. */ .keystone-index-card { flex-direction: column; align-items: stretch; border-radius: 4px; overflow: hidden; color: var(--color-keystone); font-family: var(--font-smallcaps); transition: border-color 0.15s; } .keystone-index-card:hover { border-color: var(--color-keystone); } .keystone-index-header { background: linear-gradient(180deg, rgba(136,136,255,0.13), rgba(0,0,0,0.35)); height: 34px; display: flex; align-items: center; justify-content: center; padding: 2px 14px; border-bottom: 1px solid rgba(0,0,0,0.5); } .keystone-index-name { color: var(--color-keystone); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .keystone-index-main { display: flex; align-items: flex-start; gap: 10px; padding: 8px 11px; } .keystone-index-icon { width: 44px; height: 44px; object-fit: contain; flex-shrink: 0; } .keystone-index-placeholder { display: flex; align-items: center; justify-content: center; background: rgba(136,136,255,0.2); border-radius: 4px; color: var(--color-keystone); font-size: 16px; } .keystone-index-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; text-align: center; } /* Effect lines — reuse the tooltip .explicitMod styling (centered), tightened */ .keystone-index-card .explicitMod { padding: 0; font-size: 11.5px; line-height: 1.35; } /* Base items have no rarity tint — a soft white glow/border instead of the reddish default the unique cards use. */ .NormalPopup { --card-border: var(--card-normal-border-fallback); --card-glow: var(--card-normal-glow-fallback); } /* Normal item card (base items) — the genuine in-game white item header, the same ItemsHeaderWhite{Left,Middle,Right}.dds 3-slice texture poe2db re-hosts, mirroring the unique header treatment above. Corners scale to header height; the middle tiles across, layered twice at a half-tile offset so each copy fills the other's 1px transparent trim seam. */ .NormalPopup .itemHeader.doubleLine { background: url(/static/img/Art/Textures/Interface/2D/2DArt/UIImages/InGame/ItemsHeaderWhiteLeft.webp) top left no-repeat, url(/static/img/Art/Textures/Interface/2D/2DArt/UIImages/InGame/ItemsHeaderWhiteRight.webp) top right no-repeat, url(/static/img/Art/Textures/Interface/2D/2DArt/UIImages/InGame/ItemsHeaderWhiteMiddle.webp) 0 top repeat-x, url(/static/img/Art/Textures/Interface/2D/2DArt/UIImages/InGame/ItemsHeaderWhiteMiddle.webp) 24px top repeat-x; background-size: auto 100%, auto 100%, auto 100%, auto 100%; height: 56px; padding: 4px 14px; justify-content: center; text-align: center; } .NormalPopup .normal-name { color: var(--color-white); padding: 0; text-align: center; } .NormalPopup .normal-type { color: var(--color-default); padding: 0; font-size: 13px; text-align: center; } /* Stats, requirements + tags centered to match the unique card layout */ .NormalPopup .property, .NormalPopup .requirements, .NormalPopup .default { text-align: center; } /* Planner rarity by chosen explicit-mod count: magic (1–2) blue, rare (3+) yellow. Uses the genuine in-game Magic/Rare header 3-slice textures (the same ItemsHeader{Magic,Rare}{Left,Middle,Right} art as poe2db, ingested from ggpk.exposed), mirroring the NormalPopup white-header technique. Applied by builds-page.js by swapping NormalPopup -> Magic/RarePopup. */ /* Neutral border/glow (same as the normal white tooltip) — rarity reads from the header art, name, and dividers, not a colored frame. */ .MagicPopup, .RarePopup { --card-border: var(--card-normal-border-fallback); --card-glow: var(--card-normal-glow-fallback); } .MagicPopup .itemHeader.doubleLine { background: url(/static/img/Art/Textures/Interface/2D/2DArt/UIImages/InGame/ItemsHeaderMagicLeft.webp) top left no-repeat, url(/static/img/Art/Textures/Interface/2D/2DArt/UIImages/InGame/ItemsHeaderMagicRight.webp) top right no-repeat, url(/static/img/Art/Textures/Interface/2D/2DArt/UIImages/InGame/ItemsHeaderMagicMiddle.webp) 0 top repeat-x, url(/static/img/Art/Textures/Interface/2D/2DArt/UIImages/InGame/ItemsHeaderMagicMiddle.webp) 24px top repeat-x; background-size: auto 100%, auto 100%, auto 100%, auto 100%; height: 56px; padding: 4px 14px; justify-content: center; text-align: center; } .RarePopup .itemHeader.doubleLine { background: url(/static/img/Art/Textures/Interface/2D/2DArt/UIImages/InGame/ItemsHeaderRareLeft.webp) top left no-repeat, url(/static/img/Art/Textures/Interface/2D/2DArt/UIImages/InGame/ItemsHeaderRareRight.webp) top right no-repeat, url(/static/img/Art/Textures/Interface/2D/2DArt/UIImages/InGame/ItemsHeaderRareMiddle.webp) 0 top repeat-x, url(/static/img/Art/Textures/Interface/2D/2DArt/UIImages/InGame/ItemsHeaderRareMiddle.webp) 24px top repeat-x; background-size: auto 100%, auto 100%, auto 100%, auto 100%; height: 56px; padding: 4px 14px; justify-content: center; text-align: center; } .MagicPopup .normal-name { color: var(--color-magic); padding: 0; text-align: center; } .RarePopup .normal-name { color: var(--color-rare); padding: 0; text-align: center; } .MagicPopup .normal-type, .RarePopup .normal-type { color: var(--color-default); padding: 0; font-size: 13px; text-align: center; } .MagicPopup .property, .MagicPopup .requirements, .MagicPopup .default, .RarePopup .property, .RarePopup .requirements, .RarePopup .default { text-align: center; } /* Rarity-colored dividers (blue / yellow), matching the in-game tooltip. */ .MagicPopup .separator { background-image: radial-gradient(ellipse at center, var(--color-magic) 0%, var(--color-magic) 10%, transparent 33%); } .RarePopup .separator { background-image: radial-gradient(ellipse at center, var(--color-rare) 0%, var(--color-rare) 10%, transparent 33%); } /* Base item breadcrumb */ .bases-breadcrumb { font-size: 12px; color: var(--color-default); margin-bottom: 8px; } .bases-breadcrumb a { color: var(--normal-color); text-decoration: none; } .bases-breadcrumb a:hover { color: var(--color-normal); } /* Base item class browser */ .bases-group { width: 100%; max-width: 900px; margin-bottom: 24px; } .bases-group-title { font-family: var(--font-display); color: var(--color-normal); font-size: 16px; margin: 0 0 8px; display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; } .bases-group-title::-webkit-details-marker { display: none; } .bases-group-title::before { content: "\25B8"; /* ▸ */ font-size: 12px; color: var(--color-default); transition: transform 0.15s; } details[open] > .bases-group-title::before { transform: rotate(90deg); } .bases-subgroup-title { font-family: var(--font-smallcaps); color: var(--color-default); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; margin: 14px 0 4px; } .bases-group-count { font-family: var(--font-smallcaps); color: var(--color-default); font-size: 12px; font-weight: normal; } .bases-class-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; } .bases-class-card { flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 10px 8px; border-radius: 4px; color: var(--color-normal); font-family: var(--font-smallcaps); font-size: 13px; transition: border-color 0.15s; } .bases-class-card:hover { border-color: var(--color-normal); } /* Class name above the representative base-item glyph. */ .bases-class-name { text-align: center; } .bases-class-icon { width: 60px; height: 60px; object-fit: contain; display: block; } .bases-class-count { color: var(--color-default); font-size: 11px; } /* Base item class listing */ .bases-list-grid { gap: 8px; } /* Condensed base card: a white item-header banner on top, then an icon + a body column of key stats, requirements and the innate implicit. Full tooltip still loads on hover. */ .bases-list-card { flex-direction: column; align-items: stretch; border-radius: 4px; overflow: hidden; color: var(--normal-color); font-family: var(--font-smallcaps); transition: border-color 0.15s; } .bases-list-card:hover { border-color: var(--normal-color); } /* White item header (same 3-slice ItemsHeaderWhite texture as the tooltip), name centered in white. */ .bases-list-header { background: url(/static/img/Art/Textures/Interface/2D/2DArt/UIImages/InGame/ItemsHeaderWhiteLeft.webp) top left no-repeat, url(/static/img/Art/Textures/Interface/2D/2DArt/UIImages/InGame/ItemsHeaderWhiteRight.webp) top right no-repeat, url(/static/img/Art/Textures/Interface/2D/2DArt/UIImages/InGame/ItemsHeaderWhiteMiddle.webp) 0 top repeat-x, url(/static/img/Art/Textures/Interface/2D/2DArt/UIImages/InGame/ItemsHeaderWhiteMiddle.webp) 24px top repeat-x; background-size: auto 100%, auto 100%, auto 100%, auto 100%; height: 34px; display: flex; align-items: center; justify-content: center; padding: 2px 14px; } .bases-list-main { display: flex; align-items: flex-start; gap: 10px; padding: 8px 11px; } /* Icon box proportions track the item's inventory-cell size, one class per combo (longest side normalized to ~72px). Tweak any single combo here. */ .bases-list-icon { object-fit: contain; flex-shrink: 0; /* Fallback box for items with no inventory size (jewels, flasks); combo classes below override it for everything with a known base. */ width: 60px; height: 60px; } .bases-list-icon--1x1 { width: 72px; height: 72px; } .bases-list-icon--2x2 { width: 72px; height: 72px; } .bases-list-icon--2x1 { width: 80px; height: 40px; } .bases-list-icon--2x3 { width: 60px; height: 60px; } .bases-list-icon--2x4 { width: 80px; height: 140px; } .bases-list-icon--1x3 { width: 40px; height: 90px; } .bases-list-icon--1x4 { width: 40px; height: 140px; } .bases-list-icon--placeholder { display: flex; align-items: center; justify-content: center; background: rgba(139,139,139,0.2); border-radius: 3px; color: var(--normal-color); font-size: 16px; } .bases-list-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; text-align: center; } .bases-list-name { font-size: 13px; color: var(--color-white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Stats — one per line, muted grey label + highlighted value. Keywords in the label keep the label color (dotted underline marks them), same as uniques. */ .bases-list-stats { display: flex; flex-direction: column; gap: 1px; font-size: 11.5px; color: var(--color-default); } .bases-list-stat .v { color: var(--normal-color); } /* Derived property value colors (unique cards) — mirror the .property rules */ .bases-list-stat .colourDefault, .bases-list-stat .colourPhysicalDamage { color: var(--normal-color); } .bases-list-stat .colourAugmented { color: var(--magic-color); } .bases-list-stat .colourFireDamage { color: var(--fire-color); } .bases-list-stat .colourColdDamage { color: var(--cold-color); } .bases-list-stat .colourLightningDamage { color: var(--lightning-color); } .bases-list-stat .colourChaosDamage { color: var(--chaos-color); } .bases-list-req { font-size: 11px; color: var(--color-default); } /* Innate implicit — magic blue, matching the tooltip mod text */ .bases-list-impl { font-size: 11.5px; color: var(--magic-color); line-height: 1.3; } /* Granted-skill name — gem teal with a dotted underline to read as a hoverable keyword; hovering shows the skill's own card tooltip (data-card-url), so the card → skill tooltip is one hop instead of card → item tooltip → skill. */ .bases-list-impl .skill-grant-link { color: var(--color-gem); border-bottom: 1px dotted var(--color-gem); cursor: help; } /* Unique skin for the condensed list card — same shell, unique-rarity dressing: the in-game unique header texture, gold name, amber divider. */ .bases-list-card--unique { color: var(--unique-color); } .bases-list-card--unique:hover { border-color: var(--unique-color); } .bases-list-card--unique .bases-list-header { background: url(/static/img/Art/Textures/Interface/2D/2DArt/UIImages/InGame/ItemsHeaderUniqueLeft.webp) top left no-repeat, url(/static/img/Art/Textures/Interface/2D/2DArt/UIImages/InGame/ItemsHeaderUniqueRight.webp) top right no-repeat, url(/static/img/Art/Textures/Interface/2D/2DArt/UIImages/InGame/ItemsHeaderUniqueMiddle.webp) 0 top repeat-x, url(/static/img/Art/Textures/Interface/2D/2DArt/UIImages/InGame/ItemsHeaderUniqueMiddle.webp) 23px top repeat-x; background-size: auto 100%, auto 100%, auto 100%, auto 100%; } .bases-list-card--unique .bases-list-name { color: var(--unique-color); } .bases-list-card--unique .separator { background-image: radial-gradient(ellipse at center, var(--color-unique-divider) 0%, var(--color-unique-divider) 10%, transparent 33%); } /* Mod lines — reuse the tooltip .explicitMod styling, tightened to match the base card's innate-implicit rhythm (.bases-list-impl); centered like the rest of the card body. */ .bases-list-card--unique .explicitMod { padding: 0; font-size: 11.5px; line-height: 1.3; } /* Granted-skill name — gem teal with a dotted underline to read as hoverable (carries data-card-url for the skill's own card tooltip), matching the base-item grid card's granted-skill styling. */ .bases-list-card--unique .skill-grant-link { color: var(--color-gem); border-bottom: 1px dotted var(--color-gem); cursor: help; } /* Mod group browser */ .mods-columns { display: flex; gap: 24px; width: 100%; max-width: 1100px; align-items: flex-start; } .mods-section { flex: 1; min-width: 0; } .mods-section-title { font-family: var(--font-display); color: var(--color-normal); font-size: 15px; margin: 0 0 8px; } .mods-list { display: flex; flex-direction: column; gap: 2px; } .mods-list-row { align-items: baseline; gap: 8px; padding: 5px 8px; border-radius: 3px; transition: border-color 0.12s; overflow: hidden; } .mods-list-row:hover { border-color: var(--magic-color); } .mods-list-name { color: var(--magic-color); font-family: var(--font-smallcaps); font-size: 12px; white-space: nowrap; min-width: 180px; } .mods-list-text { color: var(--color-default); font-size: 11.5px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mods-list-count { color: var(--prop-color); font-size: 11px; white-space: nowrap; } /* Mod group detail table */ .mod-tier-table { width: 100%; max-width: 700px; border-collapse: collapse; font-family: var(--font-smallcaps); font-size: 13px; margin-top: 8px; } .mod-tier-table th { color: var(--prop-color); font-size: 12px; padding: 4px 10px; border-bottom: 1px solid var(--border); text-align: left; font-weight: normal; } .mod-tier-row { border-bottom: 1px solid rgba(255,255,255,0.04); } .mod-tier-row:hover { background: var(--bg-surface); } .mod-tier-num { color: var(--color-default); padding: 5px 10px; text-align: center; width: 36px; } .mod-tier-name { color: var(--magic-color); padding: 5px 10px; } .mod-tier-text { color: var(--normal-color); padding: 5px 10px; } .mod-tier-level { color: var(--prop-color); padding: 5px 10px; text-align: right; white-space: nowrap; } /* --- Rollable affixes (item-class pages) --------------------------------- */ .base-affix-pointer { color: var(--color-default); font-size: 12.5px; margin-top: 12px; } .bases-top-title { font-family: var(--font-smallcaps); font-size: 20px; color: var(--normal-color); margin: 4px 0 2px; } .bases-top-hint { color: var(--color-default); font-size: 12.5px; margin: 0 0 6px; } .affix-section { margin-top: 28px; margin-bottom: 28px; } .affix-section-title { font-family: var(--font-smallcaps); font-size: 20px; color: var(--normal-color); margin: 0 0 2px; } .affix-section-hint { color: var(--color-default); font-size: 12.5px; margin: 0 0 14px; } /* Per-origin collapsible group within the Item Affixes section (Standard / Corrupted / Desecrated). Color is set inline per origin; a left rule and the caret echo that accent. Open by default; click the summary to collapse. */ /* Per-origin accent (--origin-accent, set inline) runs as a left rule down the whole section and tints the title; content is inset past the rule. Kept off `color` so it doesn't inherit into the table cells (e.g. the iLvl column). */ .affix-origin { margin-top: 22px; padding: 10px 12px 10px 9px; border-left: 3px solid var(--origin-accent); /* Faint wash of the origin's accent across the whole panel, so each section reads as a distinct band at a glance — not just by the left rule. */ background: color-mix(in srgb, var(--origin-accent) 5%, transparent); border-radius: 0 4px 4px 0; } .affix-origin:first-of-type { margin-top: 6px; } .affix-origin-title { font-family: var(--font-smallcaps); font-size: 15px; margin: 0 0 10px; color: var(--origin-accent); display: flex; align-items: center; gap: 7px; cursor: pointer; list-style: none; } .affix-origin-title::-webkit-details-marker { display: none; } .affix-origin-title::before { content: "\25B8"; /* ▸ */ font-size: 11px; transition: transform 0.15s; } details[open] > .affix-origin-title::before { transform: rotate(90deg); } /* In-game Abyssal mod band behind each desecrated affix row (poe2db-style), vendored from the 281x28 decorator strip and stretched to the row. Hover still highlights via the shared .affix-row:hover rule (which overrides this). */ .affix-origin--desecrated .affix-row, .affix-origin--desecrated .affix-tier-row { background-image: url('/static/img/mod-decorator-abyss.webp'); background-repeat: no-repeat; background-position: center; background-size: 100% 100%; } .affix-origin-note { color: var(--color-default); font-size: 12px; font-style: italic; margin-left: 6px; } .affix-tables { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; } /* Single-origin (no prefix/suffix split, e.g. corrupted) spans the full width as one column. */ .affix-tables--single { grid-template-columns: 1fr; } @media (max-width: 900px) { .affix-tables { grid-template-columns: 1fr; } } .affix-side-title { font-family: var(--font-smallcaps); font-size: 16px; margin: 0 0 6px; } .affix-side-title--magic-color { color: var(--magic-color); } .affix-side-title--desecrated-color { color: var(--desecrated-color); } .affix-side-title--corrupted-color { color: var(--corrupted-color); } .affix-side-count { color: var(--color-default); font-size: 13px; margin-left: 4px; } .affix-empty { color: var(--color-default); font-size: 13px; font-style: italic; } .affix-table { width: 100%; border-collapse: collapse; font-family: var(--font-smallcaps); font-size: 13px; } .affix-table > thead th { color: var(--prop-color); font-size: 11.5px; font-weight: normal; text-align: left; padding: 3px 8px; border-bottom: 1px solid var(--border); } .affix-col-num { text-align: right; white-space: nowrap; width: 1%; } .affix-col-tier { white-space: nowrap; width: 1%; } .affix-fam { border-bottom: 1px solid rgba(255,255,255,0.05); } .affix-row { cursor: pointer; } .affix-row > td { padding: 6px 8px; vertical-align: top; } .affix-row:hover { background: var(--bg-surface); } .affix-row:focus-visible { outline: 1px solid var(--magic-color); outline-offset: -1px; } .affix-caret { display: inline-block; color: var(--color-default); font-size: 10px; margin-right: 6px; transition: transform 0.12s ease; } .affix-row[aria-expanded="true"] .affix-caret { transform: rotate(90deg); } .affix-caret--empty { visibility: hidden; } .affix-tbadge { display: inline-block; min-width: 22px; padding: 0 5px; border-radius: 4px; background: rgba(136, 136, 255, 0.16); color: var(--magic-color); font-size: 11px; text-align: center; } .affix-tbadge--lower { background: var(--surface-white-06); color: var(--color-default); } /* Magic-blue mod text (matching the in-game explicit-mod tooltip) so the white .mod-value numbers stand out against it. pre-line honors the \n between hybrid stat lines (e.g. Ev/ES + Ev + max ES) so each rolls onto its own line. */ .affix-text { color: var(--magic-color); white-space: pre-line; } /* Tag row sits on its own line under the mod text — inline reads cramped, especially on mobile. */ .affix-tag-list { display: block; margin-top: 4px; } .affix-tag-list .affix-tag:first-child { margin-left: 0; } .affix-tag { --tag: var(--magic-color); /* fallback for any uncolored tag */ display: inline-block; margin-left: 5px; padding: 0 6px; border-radius: 8px; background: color-mix(in srgb, var(--tag) 16%, transparent); color: var(--tag); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.4px; vertical-align: 1px; } /* Consistent tag colorways — a tag's hue is the same on every affix table. Anchored to the wiki's element hues (red fire / blue cold / yellow lightning / magenta chaos), brightened for legible pills on dark surfaces. Defence and resource tags follow their attribute colorway (armour=STR, evasion=DEX, energy_shield=INT). Tags may share a color where they read as one family (e.g. an element and its resistance). */ /* Elements + their resistances */ .affix-tag--fire, .affix-tag--fire_resistance { --tag: var(--tag-fire); } .affix-tag--cold, .affix-tag--cold_resistance { --tag: var(--tag-cold); } .affix-tag--lightning, .affix-tag--lightning_resistance { --tag: var(--tag-lightning); } .affix-tag--chaos, .affix-tag--chaos_resistance { --tag: var(--tag-chaos); } .affix-tag--resistance { --tag: var(--tag-resistance); } /* "elemental" spans all four elements — so it gets all four (plus) as rainbow text. background-clip:text clips the gradient to the glyphs, so this trades the pill fill for multicolor letters. */ .affix-tag--elemental, .affix-tag--elemental_resistance { position: relative; isolation: isolate; background: linear-gradient(90deg, var(--tag-fire), var(--tag-lightning) 28%, var(--tag-poison) 48%, var(--tag-cold) 68%, var(--tag-caster) 84%, var(--tag-chaos)); -webkit-background-clip: text; background-clip: text; color: transparent; } /* background-clip:text consumes the pill fill, leaving the chip floating on the page background — restore the fill on a layer behind the rainbow glyphs. */ .affix-tag--elemental::before, .affix-tag--elemental_resistance::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 8px; background: rgba(148, 148, 168, 0.16); } /* Physical + offense */ .affix-tag--physical { --tag: var(--tag-physical); } .affix-tag--damage { --tag: var(--tag-damage); } .affix-tag--attack { --tag: var(--tag-attack); } .affix-tag--caster { --tag: var(--tag-caster); } .affix-tag--critical, .affix-tag--caster_critical { --tag: var(--tag-critical); } .affix-tag--speed, .affix-tag--caster_speed { --tag: var(--tag-speed); } .affix-tag--ailment { --tag: var(--tag-ailment); } .affix-tag--bleed { --tag: var(--tag-bleed); } .affix-tag--poison { --tag: var(--tag-poison); } /* Defences — attribute colorways */ .affix-tag--defences { --tag: var(--tag-defences); } .affix-tag--armour { --tag: var(--tag-armour); } .affix-tag--evasion { --tag: var(--tag-evasion); } .affix-tag--energy_shield { --tag: var(--tag-energy-shield); } .affix-tag--block { --tag: var(--tag-block); } /* Core resources + attributes */ .affix-tag--life, .affix-tag--flat_life_regen { --tag: var(--tag-life); } .affix-tag--mana { --tag: var(--tag-mana); } .affix-tag--resource { --tag: var(--tag-resource); } .affix-tag--attribute { --tag: var(--tag-attribute); } /* Misc */ .affix-tag--minion { --tag: var(--tag-minion); } .affix-tag--gem { --tag: var(--tag-gem); } .affix-tag--aura { --tag: var(--tag-aura); } .affix-tag--flask { --tag: var(--tag-flask); } .affix-tag--charm { --tag: var(--tag-charm); } .affix-tag--drop { --tag: var(--tag-drop); } /* Abyssal (desecrated) bosses — each Well-of-Souls source its own hue */ .affix-tag--ulaman { --tag: var(--tag-ulaman); } /* amber */ .affix-tag--amanamu { --tag: var(--tag-amanamu); } /* magenta */ .affix-tag--kurgal { --tag: var(--tag-kurgal); } /* blue */ /* "+N tiers" affordance on the collapsed T1 row; hidden once expanded. */ .affix-more { margin-left: 6px; color: var(--color-default); font-size: 11px; } .affix-row[aria-expanded="true"] .affix-more { display: none; } /* Flavor name (e.g. "Jagged") — muted, out of the scan path. Hidden on the collapsed T1 row, revealed when the family is expanded; always shown on the lower-tier rows (which only appear when expanded). */ .affix-tname { margin-left: 8px; color: var(--color-default); font-size: 11px; font-style: italic; } .affix-row .affix-tname { display: none; } .affix-row[aria-expanded="true"] .affix-tname { display: inline; } .affix-tier-row { background: rgba(0,0,0,0.18); } .affix-tier-row > td { padding: 3px 8px; font-size: 12.5px; } /* Granted-skill name (plain span here, not a link) — gem teal */ .keystone-index-card .skill-grant-link { color: var(--color-gem); } /* Theory Crafting passive results: a grid of full in-game tooltips (not condensed browse cards). Column tracks size to the popup's max-width; each card is a click-through link to the detail page. Popups drop their page-layout top margin here — the grid gap owns the spacing. */ .tc-passive-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); align-items: start; gap: 12px; width: 100%; max-width: 900px; padding: 16px 0; } .tc-passive-card { display: block; text-decoration: none; } .tc-passive-grid .PassivePopup { margin: 0; max-width: none; } /* On Theory Crafting, the notable and augment results render as full in-game popups (colored border + glow), which stand out against the flat gem/unique/ base result cards. Flatten them — neutral border, no glow — so the grid reads uniformly. Scoped to #tc-results so item pages and hover tooltips keep the in-game chrome. Keystones intentionally keep their accent. */ #tc-results .PassivePopup.is-notable, #tc-results .augment-card { border-color: var(--border); box-shadow: none; } /* Passive detail popup — keystone/notable, reuses .newItemPopup chrome. No banner image (passives have none); the header is a flat bar. */ .PassivePopup { max-width: 360px; margin: 16px auto 0; } /* Node artwork at the top of the tooltip — an at-a-glance recognition cue on passive tooltips shown OUTSIDE the interactive tree (the tree passes showIcon=false; its node art is already on the canvas). Circular to match the in-game node art, ringed in the node-kind color (--passive-name-color, set on the popup per keystone / notable / ascendancy). */ .passive-art { display: flex; justify-content: center; padding: 10px 0 2px; } .passive-art img { width: 60px; height: 60px; object-fit: contain; border-radius: 50%; background: radial-gradient(circle at 50% 40%, rgba(0,0,0,0.25), rgba(0,0,0,0.6)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--passive-name-color, var(--color-notable)) 60%, transparent), 0 0 10px color-mix(in srgb, var(--passive-name-color, var(--color-notable)) 30%, transparent); } .PassivePopup.is-keystone { --passive-name-color: var(--color-keystone); } .PassivePopup.is-notable { --passive-name-color: var(--color-notable); } /* Passive cards use the ItemsHeaderWhite 3-slice banner (same as base-item cards): scrollwork corners scale to header height, the middle tiles across, layered twice at a half-tile offset to hide the 1px trim seam. Unlike the single GemHoverTitle image (background-size: contain), this fills the header at ANY card width — so the title/subtitle banner is consistent on every node. */ /* Drop the inset vignette for passive cards — over the bright banner it reads as a black bar across the top. Keep the outer glow border. */ .newItemPopup.PassivePopup { box-shadow: 0 0 18px var(--card-glow, var(--card-corrupted-glow-strong)), 0 0 6px var(--card-glow, var(--card-corrupted-glow-soft)); } /* Passive tooltip headers use dedicated, rounded gold-bordered frames per node kind (Notable / Keystone / Ascendancy) — the in-game passive look, NOT the plain ItemsHeaderWhite item banner. Base = Notable (also covers small passives); keystone + ascendancy override below. */ .itemHeader.doubleLine.passiveHeader { background: url(/static/img/Art/Textures/Interface/2D/2DArt/UIImages/InGame/NotablePassiveHeaderLeft.webp) left center no-repeat, url(/static/img/Art/Textures/Interface/2D/2DArt/UIImages/InGame/NotablePassiveHeaderRight.webp) right center no-repeat, url(/static/img/Art/Textures/Interface/2D/2DArt/UIImages/InGame/NotablePassiveHeaderMiddle.webp) 0 center repeat-x, url(/static/img/Art/Textures/Interface/2D/2DArt/UIImages/InGame/NotablePassiveHeaderMiddle.webp) 24px center repeat-x; /* Full texture height — the frame shows uncropped. (The top black gap was the collapsing page margin, fixed in app.css, not a texture margin.) */ background-size: auto 100%, auto 100%, auto 100%, auto 100%; height: 52px; padding: 2px 18px; justify-content: center; text-align: center; } .PassivePopup.is-keystone .passiveHeader { background: url(/static/img/Art/Textures/Interface/2D/2DArt/UIImages/InGame/KeystonePassiveHeaderLeft.webp) left center no-repeat, url(/static/img/Art/Textures/Interface/2D/2DArt/UIImages/InGame/KeystonePassiveHeaderRight.webp) right center no-repeat, url(/static/img/Art/Textures/Interface/2D/2DArt/UIImages/InGame/KeystonePassiveHeaderMiddle.webp) 0 center repeat-x, url(/static/img/Art/Textures/Interface/2D/2DArt/UIImages/InGame/KeystonePassiveHeaderMiddle.webp) 24px center repeat-x; background-size: auto 100%, auto 100%, auto 100%, auto 100%; } .PassivePopup.is-asc .passiveHeader { background: url(/static/img/Art/Textures/Interface/2D/2DArt/UIImages/InGame/AscendancyPassiveHeaderLeft.webp) left center no-repeat, url(/static/img/Art/Textures/Interface/2D/2DArt/UIImages/InGame/AscendancyPassiveHeaderRight.webp) right center no-repeat, url(/static/img/Art/Textures/Interface/2D/2DArt/UIImages/InGame/AscendancyPassiveHeaderMiddle.webp) 0 center repeat-x, url(/static/img/Art/Textures/Interface/2D/2DArt/UIImages/InGame/AscendancyPassiveHeaderMiddle.webp) 24px center repeat-x; background-size: auto 100%, auto 100%, auto 100%, auto 100%; } .PassivePopup .itemName .lc { padding: 2px 12px 0; text-align: center; white-space: normal; color: var(--color-white); } .PassivePopup .itemName.typeLine .lc { padding-top: 0; color: var(--prop-color); } /* Reminder text — muted blue italic, matching the in-game passive tooltip */ .PassivePopup .reminderText { color: var(--magic-color); font-style: italic; opacity: 0.75; font-size: 12px; line-height: 1.35; } /* Instill recipe — the 3 Distilled Emotions that craft the Instilling Orb for this Notable. Centered boxes, icon over name; each box is a nested tooltip. */ .instillRecipe { display: flex; justify-content: center; gap: 5px; padding: 6px 8px 8px; } .instill-emotion { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 60px; padding: 4px 3px; border: 1px solid rgba(150, 130, 90, 0.35); border-radius: 3px; background: rgba(255, 255, 255, 0.03); cursor: help; transition: border-color 0.12s, background 0.12s; } .instill-emotion:hover { border-color: var(--prop-color, #c8aa6e); background: rgba(200, 170, 110, 0.1); } .instill-emotion__icon { width: 28px; height: 28px; object-fit: contain; } .instill-emotion__placeholder { display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--magic-color); background: var(--surface-white-06); border-radius: 3px; } .instill-emotion__name { font-size: 9px; line-height: 1.15; text-align: center; color: var(--magic-color); } /* ---- Distilled Emotion card ------------------------------------------------ Matches the in-game currency tooltip: reuses the NormalPopup ItemsHeaderWhite scrollwork banner + centered layout, overriding only the title to the warm currency tan and the directions to a muted grey (vs the unique amber). */ .EmotionPopup { max-width: 340px; } .EmotionPopup .normal-name { color: #c8b78a; } /* currency tan title */ /* Vial icon in the card body, centered above the stack-size line. */ .EmotionPopup .emotion-body-icon { display: flex; justify-content: center; padding: 8px 0 2px; } .EmotionPopup .emotion-body-icon img { width: 48px; height: 48px; object-fit: contain; } .EmotionPopup .emotion-directions { color: var(--color-normal); } /* Currency items use their OWN ornate header (swirled left/right corners), not the plain ItemsHeaderWhite the other base items use. */ .EmotionPopup .itemHeader.doubleLine { background: url(/static/img/Art/Textures/Interface/2D/2DArt/UIImages/InGame/ItemsHeaderCurrencyLeft.webp) top left no-repeat, url(/static/img/Art/Textures/Interface/2D/2DArt/UIImages/InGame/ItemsHeaderCurrencyRight.webp) top right no-repeat, url(/static/img/Art/Textures/Interface/2D/2DArt/UIImages/InGame/ItemsHeaderCurrencyMiddle.webp) 0 top repeat-x, url(/static/img/Art/Textures/Interface/2D/2DArt/UIImages/InGame/ItemsHeaderCurrencyMiddle.webp) 24px top repeat-x; background-size: auto 100%, auto 100%, auto 100%, auto 100%; } /* Stack-size line: grey label, white count, centered like the in-game tooltip. */ .EmotionPopup .emotion-stack { color: var(--color-default); text-align: center; } .EmotionPopup .emotion-stack .colourDefault { color: var(--color-white); } /* ── Augments (socketables) ───────────────────────────────────────────────── The "Socketables" section on /bases/:class and unique pages: augment cards grouped by family (Rune / Soul Core / …). Cards reuse the .newItemPopup chrome and NormalPopup white header, so only the augment-specific bits live here. */ /* General stackable-item icon rule: stackable items (augments, currency) render their icon INSIDE the popup, between the header banner and the first body line — the art is small enough to sit inline. Equipment art stays outside in .itemboximage (too large to embed). This is a bulk rule, not an augment hack. */ .newItemPopup--stackable .augment-icon { display: flex; justify-content: center; padding: 8px 0 2px; position: relative; z-index: 1; } .newItemPopup--stackable .augment-icon img { width: 47px; height: 47px; object-fit: contain; } .newItemPopup--stackable .augment-icon-placeholder { width: 47px; height: 47px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--card-border, var(--card-normal-border-fallback)); border-radius: 4px; color: var(--color-default); font-family: var(--font-smallcaps); font-size: 18px; background: rgba(0,0,0,0.4); } /* Condensed augment card: narrow, tight — just name + icon + effect. */ .augment-card { max-width: 232px; font-size: 12px; } .augment-card .content { padding-bottom: 6px; } /* Currency header banner (3-slice ItemsHeaderCurrency) — the in-game stackable tooltip header; overrides the NormalPopup white header. Corners scale to header height, the middle tiles across (layered at a half-tile offset to hide the 1px transparent trim seam), matching the .NormalPopup white-header technique. */ .augment-card .itemHeader.doubleLine { background: url(/static/img/Art/Textures/Interface/2D/2DArt/UIImages/InGame/ItemsHeaderCurrencyLeft.webp) top left no-repeat, url(/static/img/Art/Textures/Interface/2D/2DArt/UIImages/InGame/ItemsHeaderCurrencyRight.webp) top right no-repeat, url(/static/img/Art/Textures/Interface/2D/2DArt/UIImages/InGame/ItemsHeaderCurrencyMiddle.webp) 0 top repeat-x, url(/static/img/Art/Textures/Interface/2D/2DArt/UIImages/InGame/ItemsHeaderCurrencyMiddle.webp) 24px top repeat-x; background-size: auto 100%, auto 100%, auto 100%, auto 100%; height: 40px; padding: 3px 26px; } .augment-card .augment-name { color: var(--color-white); padding: 0; text-align: center; font-size: 14px; } .augment-card .augment-icon { padding: 6px 0 3px; } /* Per-slot grant: category label above its stat line(s). */ .augment-cat { padding: 2px 12px; line-height: 1.3; } /* Category is inlined with its value ("All: +12 Dexterity"), not a heading. */ .augment-cat-label { color: var(--color-default); font-size: 11px; letter-spacing: 0.3px; opacity: 0.85; } .augment-cat-line { color: var(--magic-color); } /* Bonded modifiers — isolated block below the default grant, dimmer; these apply only to the Shaman ascendancy but are shown for completeness. */ .augment-bonded { margin: 5px 12px 0; padding-top: 4px; } .augment-bonded-label { color: var(--color-default); font-family: var(--font-smallcaps); font-size: 10px; letter-spacing: 0.5px; opacity: 0.7; text-align: center; margin-bottom: 2px; } .augment-bonded .augment-cat { padding: 1px 0; text-align: center; } .augment-cat-line--bonded { color: #c7c0a5; font-size: 11.5px; } /* Full hover card (augmentCardFull): one section per tier, Perfect → Lesser. */ .augment-card--full { max-width: 300px; } .augment-full-tier-head { color: var(--color-default); font-family: var(--font-smallcaps); font-size: 11px; letter-spacing: 0.5px; text-align: center; opacity: 0.75; margin-bottom: 1px; } .augment-tier-icon { width: 54px; height: 54px; object-fit: contain; vertical-align: middle; margin-right: 5px; } .augment-tier-lvl { opacity: 0.7; } .augment-card .FlavourText { color: var(--color-default); } /* Section wrapper — mirrors the Item Affixes section heading treatment. Needs an explicit width: the .page--column flex parent is align-items:center, so without width:100% the section shrinks to one card and the grid can't form columns. The affix section (no width set) sizes to its content — a stable ~1865px CSS width (it renders ~1586px under the Small scaler's zoom:0.85, which applies to both sections). Matching max-width here caps the augment grid at that same width and centers it, so the two sections align instead of the grid running full-bleed. */ .augment-section { margin-top: 28px; width: 100%; max-width: 1865px; } .augment-section-title { font-family: var(--font-smallcaps); font-size: 20px; color: var(--normal-color); margin: 0 0 2px; } .augment-section-hint { color: var(--color-default); font-size: 12.5px; margin: 0 0 14px; } /* Collapsible per-family panel, tinted per family — same treatment as the .affix-origin sections. --fam-accent (set per family below) drives a left rule, a faint background wash, and the summary tint; a caret rotates when open. */ .augment-family { --fam-accent: rgba(200,200,200,0.5); margin-top: 18px; padding: 10px 12px 12px 9px; border-left: 3px solid var(--fam-accent); background: color-mix(in srgb, var(--fam-accent) 6%, transparent); border-radius: 0 4px 4px 0; } .augment-family:first-of-type { margin-top: 10px; } .augment-family--rune { --fam-accent: #6ea8ff; } .augment-family--soulcore { --fam-accent: #d75757; } .augment-family--idol { --fam-accent: #b98bff; } .augment-family--abyssaleye { --fam-accent: #4fc4c0; } .augment-family--congealedmist{ --fam-accent: #9aa7b4; } .augment-family-title { font-family: var(--font-smallcaps); font-size: 15px; color: var(--fam-accent); margin: 0 0 10px; display: flex; align-items: center; gap: 7px; cursor: pointer; list-style: none; } .augment-family-title::-webkit-details-marker { display: none; } .augment-family-title::before { content: "\25B8"; /* ▸ */ font-size: 11px; transition: transform 0.15s; } details[open] > .augment-family-title::before { transform: rotate(90deg); } .augment-family-count { font-size: 11px; color: var(--color-default); opacity: 0.7; } /* Rune subgroup heading (Common / Ancient / Kalguuran) within the Rune panel. */ .augment-subfamily-title { font-family: var(--font-smallcaps); font-size: 12.5px; color: var(--color-default); margin: 14px 0 8px; display: flex; align-items: center; gap: 6px; opacity: 0.9; } .augment-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(212px, 232px)); gap: 14px; align-items: start; }