/* Shared styling for the ITEMS pages (equipment / medals / special items / treasures). One stylesheet rather than four copies, because every item page is the same shape: a grid of boxes, each box holding a centred image, the name under it, and the description in its own sub-box. */ :root{--orange:var(--acc-deep,#F4A500);--gold:var(--acc,#FFD84A);--bg:#1C1E26;--bg2:#232630;--bg3:#2A2D3A;--bg4:#31354A; --text:#EDE8D5;--text-dim:#7A7668;--border:rgba(255,255,255,0.08); --theme-border:rgba(var(--acc-deep-rgb,244,165,0),0.35);--theme-rgb:244,165,0;} *{box-sizing:border-box;} body{margin:0;background:var(--bg);color:var(--text);font-family:'Rajdhani',sans-serif;} .wrap{max-width:1320px;margin:0 auto;padding:22px 18px 70px;} /* same page title the rest of the site uses (categories.html .page-title) */ .page-title{font-family:'Black Han Sans',sans-serif;font-style:italic;font-size:1.35rem; letter-spacing:2px;color:var(--gold);margin:0 0 6px;text-align:center;} hr.rule{height:2px;border:none;margin:16px 0 18px; background:linear-gradient(90deg,transparent,rgba(var(--acc-deep-rgb,244,165,0),0.5),transparent);} /* These pages run from 326 to 2,293 entries, so unlike wallpapers they genuinely need a way to find one thing. */ .search{position:relative;margin:0 auto 16px;max-width:460px;} .search input{width:100%;background:var(--bg2);border:1px solid var(--theme-border); border-radius:9px;color:var(--text);font-family:'Rajdhani',sans-serif;font-weight:600; font-size:.95rem;padding:10px 32px 10px 13px;} /* NO RING ON THE INPUT. `search.css` lights the angled PLATE on `:focus-within`, so a box-shadow here painted a second, ROUNDED orange halo inside that plate -- which is what read as a pill sitting in the search bar. dokkan_tracker.html's `.search-wrap input:focus` is the reference: `outline:none` and nothing else that draws. */ .search input:focus{outline:none;border-color:var(--orange);} .search .x{position:absolute;right:11px;top:8px;color:var(--text-dim);cursor:pointer; font-size:1.1rem;} .count{text-align:center;color:var(--text-dim);font-family:'Oswald',sans-serif; font-size:.6rem;letter-spacing:2px;text-transform:uppercase;margin:0 0 14px;} /* filter chips (rarity / grade), only shown when a page supplies them */ .chips{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:0 0 16px;} /* THE FILTER BUTTONS = B2 of itembtn_trial.html (owner, 15 Oct 2026): the Glowy plate with a white Rajdhani label, the angle on a ::before so the label stays upright; the ones NOT picked are dimmer so the picked one stands out. (They were the heading font, Black Han Sans italic, on a rounded plate.) Icon rows keep their artwork buttons -- only their text chips (.txt) take the plate. */ .chips:not(.icons) button,.chips.icons button.txt{position:relative;isolation:isolate;background:none;border:0;border-radius:0; font-family:'Rajdhani',sans-serif;font-style:normal;font-weight:700;font-size:.82rem;letter-spacing:1.5px;line-height:1.2; text-transform:uppercase;padding:8px 18px;cursor:pointer;color:#b9bfcc;opacity:1;filter:none;transform:none; align-self:center;transition:transform .15s,color .15s;} .chips:not(.icons) button::before,.chips.icons button.txt::before{content:'';position:absolute;inset:0;z-index:-1; transform:skewX(-12deg);border-radius:4px;background:rgba(var(--acc-rgb,255,216,74),.05); border:1px solid rgba(var(--acc-rgb,255,216,74),.4); box-shadow:0 2px 7px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.06);transition:box-shadow .15s,background .15s,border-color .15s;} .chips:not(.icons) button:hover,.chips.icons button.txt:hover{color:#fff;transform:translateY(-1px);} .chips:not(.icons) button:hover::before,.chips.icons button.txt:hover::before{border-color:var(--acc,#FFD84A); box-shadow:0 0 12px rgba(var(--acc-deep-rgb,244,165,0),.4);} .chips:not(.icons) button.on,.chips.icons button.txt.on{color:#fff;transform:none;} .chips:not(.icons) button.on::before,.chips.icons button.txt.on::before{border-color:var(--acc,#FFD84A); background:linear-gradient(180deg,rgba(var(--acc-rgb,255,216,74),.40),rgba(var(--acc-rgb,255,216,74),.16)); box-shadow:0 0 16px rgba(var(--acc-deep-rgb,244,165,0),.6);} /* Image chips (the medal frames): the artwork IS the button, so no plate and no border. Unselected ones are dimmed rather than hidden, and with nothing selected everything shows — which is why these pages have no All button. */ /* zero-height full-width item: forces everything after it onto the next row */ .chip-break{flex-basis:100%;height:0;} /* visual separator between two groups on the same row (Super | Extreme) */ .chip-gap{width:26px;flex:0 0 auto;} .chips.icons{gap:4px;} .chips.icons button{background:none;border:none;padding:2px;line-height:0; opacity:.42;filter:grayscale(.35);transition:opacity .15s,filter .15s,transform .15s;} .chips.icons button:hover{opacity:.8;filter:none;transform:translateY(-1px);} .chips.icons button.on{background:none;border:none;opacity:1;filter:none; transform:translateY(-1px);} .chips.icons button img{width:52px;height:52px;object-fit:contain;display:block;} /* A text chip sitting in an icon row: drawn by the B2 block above (owner, 15 Oct 2026); full strength on hover (the icon rule above dims). */ .chips.icons button.txt:hover{opacity:1;filter:none;} /* the rainbow orbs get a real rainbow label, the same treatment the rainbow medal has. NOTE: .chips.icons button.txt above sets `color`, so this must match .txt too or it loses on specificity and the label paints flat. */ .chips button.rainbow, .chips.icons button.txt.rainbow{ background-image:linear-gradient(90deg,#ff5f6d,#ffb347,#ffe74a,#5fe45f,#4dbbff,#c17bff); background-size:100% 100%;background-position:0 0; -webkit-background-clip:text;background-clip:text;color:transparent;} .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;} /* a page with only a handful of items (act items has 3) looks abandoned pinned to the left, so it centres instead of stretching across the full width */ .grid.few{grid-template-columns:repeat(auto-fit,minmax(280px,300px));justify-content:center;} /* one box per item. The orange->yellow gradient outline is painted as a border-box background layer under a padding-box layer, because border-image cannot do rounded corners. */ /* NEAR-BLACK (I1 of itembox_trial.html, owner 15 Oct 2026) -- was #272b35 -> #191d25 */ .it-card{border:2px solid transparent;border-radius:14px; background:linear-gradient(180deg,#14171f,#0e1016) padding-box, linear-gradient(150deg,var(--orange) 0%,#FFC021 45%,var(--gold) 100%) border-box; overflow:hidden;display:flex;flex-direction:column;height:100%;padding:10px;gap:10px; box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 6px 18px rgba(0,0,0,.35); transition:box-shadow .15s;} /* The hover is the GLOW only. It used to add filter:brightness(1.06), and a filter on the card re-renders everything inside it -- the angled kind plate and its gold label visibly shifted colour while the filter faded in, which read as the button glitching. */ .it-card:hover{ box-shadow:0 0 14px rgba(var(--theme-rgb),.28),0 8px 22px rgba(0,0,0,.42);} /* the item a link pointed at (?id=) glows gold three times, then settles back */ .it-card.it-hit{animation:itHit 1.1s ease-in-out 3;} @keyframes itHit{50%{box-shadow:0 0 0 3px rgba(255,216,74,.9),0 0 30px rgba(255,216,74,.6),0 8px 22px rgba(0,0,0,.42);}} /* Compact grid for pages whose data has no descriptions (medals): smaller boxes, so 6-7 fit on a row instead of 4. */ /* 194px min gives 6 columns inside the 1320px wrap */ .grid.compact{grid-template-columns:repeat(auto-fill,minmax(194px,1fr));gap:16px;} /* Compact cards are deliberately LANDSCAPE: wide and short, so a row of them reads as a strip rather than a wall of tall tiles. Trimming the art and the gaps is what buys the height back. */ .grid.compact .it-card{padding:7px;gap:0;} .grid.compact .it-head{padding:10px 10px 11px;gap:6px;} .grid.compact .it-name{font-size:.8rem;} .grid.compact .it-art{width:70px;height:70px;} /* Class/type plate on the top-right corner of the ART FRAME itself, the way a character card carries its type badge — not floated in the card corner. */ .it-badge{position:absolute;top:-8%;right:-14%;z-index:6;width:46%;height:auto; object-fit:contain;pointer-events:none; filter:drop-shadow(0 1px 3px rgba(0,0,0,.65));} /* the item kind, above the art */ /* An angled plate rather than a pill. The label is skewed back upright inside it, so only the box slants and the text stays readable. */ .it-kind{display:inline-block;transform:skewX(-12deg); /* darker, with the gradient running down to near-black so the gold reads off it */ background:linear-gradient(180deg,#2b3040 0%,#1a1e28 55%,#0d1017 100%); border:1px solid rgba(var(--acc-rgb,255,216,74),.34);border-radius:4px;padding:5px 16px; box-shadow:0 2px 7px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.07), inset 0 -2px 5px rgba(0,0,0,.55); /* Rajdhani rather than Oswald: Oswald's condensed caps looked cramped and uneven inside a small skewed plate. */ font-family:'Rajdhani',sans-serif;font-weight:700;font-size:.82rem;letter-spacing:1.5px; text-transform:uppercase;color:var(--gold);line-height:1.2;white-space:nowrap; text-shadow:0 1px 2px rgba(0,0,0,.85);} .it-kind > span{display:inline-block;transform:skewX(12deg);} /* THE KIND TAG = T2 GLOWY LIT of itemtag_trial.html (owner, 15 Oct 2026): built like a picked Glowy button -- a site-colour fill fading down, a full-strength edge, a soft glow, white label. (Was the old dark plate.) */ .it-kind{background:linear-gradient(180deg,rgba(var(--acc-rgb,255,216,74),.40),rgba(var(--acc-rgb,255,216,74),.14)); border:1px solid var(--acc,#FFD84A);color:#fff; box-shadow:0 0 12px rgba(var(--acc-deep-rgb,244,165,0),.5),inset 0 1px 0 rgba(255,255,255,.12);} .grid.compact .it-kind{font-size:.74rem;padding:4px 12px;letter-spacing:1.1px;} /* art centred, name underneath it */ .it-head{position:relative;display:flex;flex-direction:column;align-items:center;gap:9px; text-align:center;padding:14px 12px 13px;border-radius:10px;flex:1 1 auto; justify-content:center; background:linear-gradient(180deg,#0f1218,#0a0c11); border:1px solid rgba(var(--acc-rgb,255,216,74),.45); /* stronger (owner, 15 Oct 2026: was .16) */ box-shadow:inset 0 1px 0 rgba(255,255,255,.04);} .it-art{width:96px;height:96px;display:flex;align-items:center;justify-content:center; position:relative;flex:0 0 auto;} .it-art.medal{overflow:visible;} /* Direct children only. Composite art (medal ring, support frame, act plate) sizes itself and may deliberately overflow its wrapper -- a blanket max-width:100% here clamped every medal to its ring and killed the 1.494x overflow. */ .it-art > img{max-width:100%;max-height:100%;object-fit:contain;} .it-name{font-family:'Oswald',sans-serif;font-weight:700;font-size:.9rem;color:#fff; line-height:1.25;} /* the description gets its own box, fixed height so every card matches. fitDesc() shrinks only the ones that would overflow, so short entries keep the full size and nothing is ever cut off. */ .it-desc{height:132px;overflow:hidden;padding:9px 11px 10px;border-radius:10px; font-size:.82rem; background:#0a0c11; border:1px solid rgba(var(--acc-rgb,255,216,74),.45); /* stronger (owner, 15 Oct 2026: was .16) */ box-shadow:inset 0 1px 0 rgba(255,255,255,.03);} .it-desc .body{height:100%;overflow:hidden;} /* optional heading inside the description box (EFFECT etc) */ /* the box HEADINGS (EFFECT, WHERE TO GET ...) centred and bigger (owner, 15 Oct 2026: was .55rem, left) */ .it-lbl{text-align:center;font-family:'Oswald',sans-serif;font-weight:700;font-size:.8rem;letter-spacing:2.2px; text-transform:uppercase;color:var(--gold);padding-bottom:6px;margin-bottom:7px; border-bottom:1px solid rgba(var(--acc-deep-rgb,244,165,0),.2);} .it-desc.labelled .body{height:calc(100% - 32px);} /* the bigger heading */ /* act item (meat): the bg plate behind, the art over it at 1:1 — both are 200x200 */ .act-item{position:relative;flex:0 0 auto;} .act-base,.act-art{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;} .act-base{z-index:1;} .act-art{z-index:2;} .it-desc p{margin:0;line-height:1.3;color:var(--text);white-space:pre-line;} .it-desc .none{color:var(--text-dim);font-style:italic;} /* equipment slots reuse the shop.html geometry: frame behind, orb art on top, level text in the corner */ /* the EXP / Zeni line under a training field's description */ .it-stats{margin-top:7px;font-family:'Oswald',sans-serif;font-size:.68rem;font-weight:600; letter-spacing:1px;text-transform:uppercase;color:var(--text-dim);text-align:center;} .it-stats b{color:var(--gold);font-weight:700;font-size:.8rem;margin-left:3px;} .it-stats .sep{margin:0 7px;opacity:.5;} /* Generic framed slot: a background plate with the item art stacked on top. Used by keys, stickers and training fields, whose art and frames are all 200x200 and already composed to the same canvas, so both layers sit at inset:0 with no offsets. */ .fr-slot{position:relative;width:96px;height:96px;display:block;} .fr-base,.fr-art{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;} .fr-base{z-index:1;} .fr-art{z-index:2;} .eq-slot{position:relative;width:96px;height:96px;display:block;} .eq-base,.eq-art{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;} .eq-base{z-index:1;} .eq-art{z-index:2;} /* Level text, same treatment as shop.html: the level reads as the metal itself — a grade gradient, brightest at the top so it keeps a white core, with the outline carried by drop-shadow rather than text-shadow (a shadow sits UNDER transparent text and would vanish). Sized off the slot, not a fixed rem. */ .eq-slot{--eqs:96px;} /* the infinite badge on an EX Skill Orb, bottom-right of the frame (shop.html geometry) */ .eq-inf{position:absolute;bottom:2%;right:-6%;width:41%;height:auto;z-index:4;} .eq-lv{position:absolute;left:-2%;bottom:-6%;z-index:5;font-family:'Oswald',sans-serif; font-weight:700;font-size:calc(var(--eqs) * 0.2267);letter-spacing:.5px; -webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none; filter:drop-shadow(0 1px 2px #000) drop-shadow(0 0 3px rgba(0,0,0,.9));} .eq-slot.eq-bronze .eq-lv{background-image:linear-gradient(180deg,#FFF1E6 8%,#D98C6A 46%,#9E4E2E 100%);} .eq-slot.eq-silver .eq-lv{background-image:linear-gradient(180deg,#FFFFFF 8%,#CFD6DE 46%,#7C8794 100%);} .eq-slot.eq-gold .eq-lv{background-image:linear-gradient(180deg,#FFFDF0 8%,#FFD84A 46%,#B8860B 100%);} /* Awakening medal: the frame is the visible ring and the item art is drawn OVER it at 1.494x the ring (the locked 251/168 ratio from awaken_medals.js), so the art deliberately overflows the frame. The wrapper is sized down to keep the whole thing inside .it-art. */ .awk-medal{position:relative;flex:0 0 auto;} .awk-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:1;} .awk-item{position:absolute;left:50%;top:50%;z-index:2;object-fit:contain; transform:translate(-50%,-50%);} /* Training item: character type frame behind, the item art over it */ .ti-slot{position:relative;display:block;width:96px;height:96px;} .ti-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:1;} .ti-art{position:absolute;left:50%;top:50%;width:78%;height:78%;object-fit:contain; z-index:2;transform:translate(-50%,-50%);} /* Support item: rarity frame behind, art centred over it at 0.98x the frame (the ratio tuned in support_gallery.html). */ .sup-item{position:relative;flex:0 0 auto;} .sup-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:1;} .sup-art{position:absolute;left:50%;top:50%;z-index:2;object-fit:contain; transform:translate(-50%,-50%);} /* "where do I get this" — its own shaded box under the description */ /* fixed height so every "where to get" box matches, whatever it holds */ .it-from{margin-top:10px;height:150px;overflow:hidden;padding:8px 11px 9px;border-radius:10px; background:#0a0c11; border:1px solid rgba(var(--acc-rgb,255,216,74),.45); /* stronger (owner, 15 Oct 2026: was .16) */ box-shadow:inset 0 1px 0 rgba(255,255,255,.03);} .it-from .it-lbl{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:.86rem; letter-spacing:1.8px;margin-bottom:7px;padding-bottom:6px;} .it-from .body{height:calc(100% - 36px);overflow:hidden;} .it-from .ev-link{display:block;margin-bottom:7px;text-decoration:none;color:var(--gold); transition:filter .15s,transform .15s;} .it-from .ev-link:hover{filter:brightness(1.12);transform:translateY(-1px);} .it-from .ev-banner{display:block;width:100%;border-radius:6px; border:1px solid rgba(255,255,255,.12);box-shadow:0 2px 6px rgba(0,0,0,.45);} .it-from p{margin:0 0 6px;font-size:.75rem;line-height:1.3;color:var(--text);} .it-from p:last-child{margin-bottom:0;} /* block, or the quest name runs straight on from the event name */ .it-from .q{display:block;margin-top:2px;color:var(--text-dim);font-size:.68rem;} /* ---- item detail popup (awakening medals: what this medal awakens) ---- */ .it-modal{position:fixed;inset:0;z-index:9999;display:none;align-items:center; justify-content:center;background:rgba(0,0,0,.82);backdrop-filter:blur(4px);padding:22px;} .it-modal.open{display:flex;} .it-mbox{width:min(720px,100%);max-height:86vh;display:flex;flex-direction:column; border:2px solid transparent;border-radius:14px; background:linear-gradient(180deg,#272b35,#1e222b 55%,#191d25) padding-box, linear-gradient(150deg,var(--orange) 0%,#FFC021 45%,var(--gold) 100%) border-box; box-shadow:0 20px 60px rgba(0,0,0,.7);overflow:hidden;} .it-mtop{display:flex;align-items:center;gap:12px;padding:12px 14px; background:linear-gradient(180deg,#333846,#252a34); border-bottom:1px solid rgba(255,255,255,.10);} /* the medal art is drawn at 1.494x its ring, so the box has to let it overflow and be centred rather than clipping it at the corner */ .it-mtop .art{width:56px;height:56px;position:relative;flex:0 0 auto; display:flex;align-items:center;justify-content:center;overflow:visible;} .it-mtop .t{flex:1 1 auto;min-width:0;} .it-mtop .nm{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:1.02rem;color:#fff;} .it-mtop .sub{font-family:'Oswald',sans-serif;font-size:.56rem;letter-spacing:1.8px; text-transform:uppercase;color:var(--gold);margin-top:2px;} .it-mx{background:none;border:none;color:var(--text-dim);font-size:1.6rem;line-height:1; cursor:pointer;padding:0 4px;} .it-mx:hover{color:#fff;} .it-mbody{padding:14px 16px 18px;overflow-y:auto;} .it-uses{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;} .it-use{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:9px; background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.08); text-decoration:none;color:inherit;transition:border-color .14s,transform .14s;} .it-use:hover{border-color:var(--theme-border);transform:translateY(-1px);} .it-use img{width:38px;height:38px;object-fit:contain;flex:0 0 auto;border-radius:6px; background:#0f1117;} /* name over kind, not run together on one line */ .it-use > span{display:flex;flex-direction:column;min-width:0;gap:1px;} .it-use .un{display:block;font-family:'Rajdhani',sans-serif;font-weight:700;font-size:.8rem; color:#fff;line-height:1.2;overflow:hidden;} .it-use .uk{display:block;font-family:'Oswald',sans-serif;font-size:.5rem;letter-spacing:1.4px; text-transform:uppercase;color:var(--text-dim);line-height:1.1;} .it-use .uq{margin-left:auto;font-family:'Oswald',sans-serif;font-weight:700;font-size:.6rem; color:var(--acc,#FFD84A);white-space:nowrap;} .it-more{grid-column:1/-1;text-align:center;padding:10px;color:var(--text-dim); font-family:'Oswald',sans-serif;font-size:.6rem;letter-spacing:1.6px;} .it-card.clickable{cursor:pointer;} .empty{grid-column:1/-1;text-align:center;padding:50px 20px;color:var(--text-dim); font-family:'Oswald',sans-serif;letter-spacing:2px;} .more{grid-column:1/-1;text-align:center;padding:18px;} .more button{font-family:'Oswald',sans-serif;font-weight:700;font-size:.62rem; letter-spacing:1.8px;text-transform:uppercase;padding:9px 22px;border-radius:9px; cursor:pointer;color:var(--text);background:linear-gradient(rgba(var(--acc-rgb,255,216,74),var(--btn-tint)),rgba(var(--acc-rgb,255,216,74),var(--btn-tint))),var(--btn-base); border:1px solid rgba(var(--acc-rgb,255,216,74),var(--btn-edge-a));} .more button:hover{background:rgba(var(--acc-deep-rgb,244,165,0),.18);color:#fff;} /* --------------------------------------------------------------------------- THE GRADE CHIPS on equipment.html -- bronze / silver / gold, drawn as the frame art the orb tiles are built from. The frame is a FILLED square where a type badge is a shape on transparency, so at the same box it reads noticeably heavier than the row above it. It gets a little less room and a rounded crop of its own. It lives here rather than on the page because equipment.html has no inline