/* 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 (.asc-grid), 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"] .asc-grid, html[data-card-size="s"] .keystone-index-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"] .asc-grid, html[data-card-size="l"] .keystone-index-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"] .asc-grid, html[data-card-size="xl"] .keystone-index-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 { zoom: 0.85; } html[data-card-size="l"] .affix-section { zoom: 1.25; } html[data-card-size="xl"] .affix-section { zoom: 1.5; } .newItemPopup { font-family: var(--font-smallcaps); background-color: var(--bg-base); border: 1px solid var(--card-border, rgba(139,48,48,0.7)); box-shadow: 0 0 18px var(--card-glow, rgba(139,48,48,0.45)), 0 0 6px var(--card-glow, rgba(139,48,48,0.3)), 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); } .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, rgba(30,41,41,0), var(--color-gem-tab), rgba(30,41,41,0)); 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, #000); 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); } /* 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); } .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; } .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 (asc overrides max-width to 800px). */ .bases-class-grid, .asc-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, .asc-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: rgba(200,200,200,0.45); --card-glow: rgba(255,255,255,0.35); } /* 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: #fff; 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; } /* 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: #fff; 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; } .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-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: rgba(255,255,255,0.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; } .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: #e0563c; } .affix-tag--cold, .affix-tag--cold_resistance { --tag: #5aa6e0; } .affix-tag--lightning, .affix-tag--lightning_resistance { --tag: #e8c83c; } .affix-tag--chaos, .affix-tag--chaos_resistance { --tag: #d050b0; } .affix-tag--resistance { --tag: #d8a24a; } /* "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 { background: linear-gradient(90deg, #e0563c, #e8c83c 28%, #84c84a 48%, #5aa6e0 68%, #8f86e8 84%, #d050b0); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Physical + offense */ .affix-tag--physical { --tag: #c8b89a; } .affix-tag--damage { --tag: #e06a5a; } .affix-tag--attack { --tag: #d88a4a; } .affix-tag--caster { --tag: #8f86e8; } .affix-tag--critical, .affix-tag--caster_critical { --tag: #f0d24a; } .affix-tag--speed, .affix-tag--caster_speed { --tag: #5ccfa0; } .affix-tag--ailment { --tag: #b070d8; } .affix-tag--bleed { --tag: #c43a2e; } .affix-tag--poison { --tag: #84c84a; } /* Defences — attribute colorways */ .affix-tag--defences { --tag: #9aa6b2; } .affix-tag--armour { --tag: #c87a4a; } .affix-tag--evasion { --tag: #6cc05a; } .affix-tag--energy_shield { --tag: #5ab0d8; } .affix-tag--block { --tag: #8ba0b4; } /* Core resources + attributes */ .affix-tag--life, .affix-tag--flat_life_regen { --tag: #e06a6a; } .affix-tag--mana { --tag: #5a86e0; } .affix-tag--resource { --tag: #7fb0b8; } .affix-tag--attribute { --tag: #b894d8; } /* Misc */ .affix-tag--minion { --tag: #a8c878; } .affix-tag--gem { --tag: #36c0b8; } .affix-tag--aura { --tag: #58c8c0; } .affix-tag--flask { --tag: #d89a4a; } .affix-tag--charm { --tag: #e088b8; } .affix-tag--drop { --tag: #e0c84a; } /* Abyssal (desecrated) bosses — each Well-of-Souls source its own hue */ .affix-tag--ulaman { --tag: #e0a93c; } /* amber */ .affix-tag--amanamu { --tag: #cc5ad6; } /* magenta */ .affix-tag--kurgal { --tag: #4fb4e8; } /* 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; } /* --- Ascendancy cards (list page) — dark shell tinted to the colorway --- */ .asc-card { display: flex; flex-direction: column; align-items: center; text-align: center; background: color-mix(in srgb, var(--asc-color, var(--card-dark-border)) 8%, var(--card-dark-bg)); border: 1px solid color-mix(in srgb, var(--asc-color, var(--card-dark-border)) 30%, var(--card-dark-border)); border-radius: 4px; color: var(--color-default); text-decoration: none; transition: border-color 0.15s, background 0.15s; } .asc-card:hover { border-color: var(--asc-color, var(--card-hover-border)); } /* Ascendancy notable browse cards — keystone-index-card shape, tinted to the selected ascendancy's colorway instead of the keystone blue. */ .asc-notable-card { color: var(--asc-color); background: color-mix(in srgb, var(--asc-color) 12%, var(--bg-surface)); border-color: color-mix(in srgb, var(--asc-color) 30%, var(--border)); } .asc-notable-card:hover { border-color: var(--asc-color); } /* Header banner + name tinted to the ascendancy colorway (not keystone blue) */ .asc-notable-card .keystone-index-header { background: linear-gradient(180deg, color-mix(in srgb, var(--asc-color) 20%, transparent), rgba(0,0,0,0.35)); } .asc-notable-card .keystone-index-name { color: var(--asc-color); } .asc-notable-placeholder { background: color-mix(in srgb, var(--asc-color) 25%, transparent); color: var(--asc-color); } /* Granted-skill name (plain span here, not a link) — gem teal */ .keystone-index-card .skill-grant-link { color: var(--color-gem); } /* 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; } .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, rgba(139,48,48,0.45)), 0 0 6px var(--card-glow, rgba(139,48,48,0.3)); } /* 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: #fff; } .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: rgba(255, 255, 255, 0.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: #fff; } /* Ascendancy grid — narrower page width than the other 200px-min grids. */ .asc-grid { gap: 12px; max-width: 800px; } .asc-card { gap: 4px; padding: 14px 10px; } .asc-class { font-size: 10px; color: var(--color-default); text-transform: uppercase; letter-spacing: 0.08em; } .asc-name { font-size: 14px; color: var(--asc-color, var(--color-normal)); font-weight: 600; } .asc-count { font-size: 10px; color: var(--color-default); opacity: 0.7; }