/* ═══════════════════════════════════════════════════════════════════════════ inventory.css — /inventory/, the live page's structure in the haven look. The SHAPES are the live page's (LIVE_SITE_SPEC §4.12; live_capture/pjs/ inventory_inventory.css for the page layout, live.css on the real site for the card styles it reuses): three scenes keyed off one attribute, the garage panel with its pip row and action row, the stored-dinosaur card (.stored > .meta + .ops), the skin card (.inv-card) with its thumb OR colour plate, the one toast and the one modal. Every COLOUR is a haven.css token. Paint tokens (--ember, --violet, --ember-deep …) are fills, borders and glows only; anything a reader reads is --t-* or the ink accents --ember-core / --ember-ink / --violet-ink. ★ THE SCENE ATTRIBUTE IS ON #inv-root, NOT . build.py owns ; the page's own root carries data-scene and every rule below keys off it. ★ live.css IS NOT LOADED HERE. The real page loads /live/live.css for its card styles; this tree's /live/ wave owns that file, and a page that borrows another wave's sheet breaks the day that wave edits it. The few shapes both pages share (spinner, toast, modal) are restated under this page's own scope, token for token, so the two pages read as one site. ★ `[hidden]` WINS. Several boxes below are flex or grid by class, and a class display beats the UA's [hidden] rule. ═══════════════════════════════════════════════════════════════════════════ */ .inv-root [hidden] { display: none !important; } .inv-root .page-head { margin-bottom: var(--s6); } /* ── scene machinery ─────────────────────────────────────────────────────── */ .inv-root .scene { display: none; } .inv-root[data-scene="loading"] #scene-loading, .inv-root[data-scene="noauth"] #scene-noauth, .inv-root[data-scene="ready"] #scene-ready { display: block; } .inv-root .scene-card { width: min(520px, 100%); margin: 0 auto; padding: var(--s7) var(--s5); text-align: center; background: var(--panel); border: var(--hair) solid var(--line); box-shadow: var(--lit-edge), var(--crush); color: var(--t-body); font-size: 14px; line-height: 1.55; } .inv-root .scene-card > * { margin: 0; } .inv-root .scene-card > * + * { margin-top: var(--s4); } .inv-root .scene-card .spinner { margin: 0 auto; } .inv-root .scene-card .btn { margin-top: var(--s5); } .inv-root .spinner { width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--line-up); border-top-color: var(--ember-core); animation: gd-inv-spin .9s linear infinite; } @keyframes gd-inv-spin { to { transform: rotate(360deg); } } /* ── the two panels, Garage then Skins (one column on live too) ──────────── */ .inv-root .inventory-grid-page { display: grid; gap: 22px; } .inv-root .vault-panel, .inv-root .inventory-panel { min-width: 0; } .inv-root .panel-sub { margin-left: auto; flex: 0 1 auto; min-width: 0; text-align: right; font: 500 9.5px/1.3 var(--data); letter-spacing: .16em; text-transform: uppercase; color: var(--t-dim); } /* garage top row: pips + count on the left, the three actions on the right */ .inv-root .vault-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s4); } .inv-root .vault-slots { display: flex; align-items: center; gap: 14px; } .inv-root .pips { display: flex; gap: 5px; } .inv-root .pip { display: block; width: 10px; height: 20px; background: var(--panel-hi); border: var(--hair) solid var(--line-up); clip-path: polygon(0 0, calc(100% - 3px) 0, 100% 3px, 100% 100%, 3px 100%, 0 calc(100% - 3px)); } .inv-root .pip.on { background: var(--ember); border-color: var(--ember-ink); box-shadow: var(--glow-2); } .inv-root .count { font: 600 22px/1 var(--data); color: var(--t-hi); font-variant-numeric: tabular-nums; white-space: nowrap; } .inv-root .vault-actions { display: flex; flex-wrap: wrap; gap: 10px; } .inv-root .inv-offline-note { margin: var(--s4) 0 0; padding: 10px 14px; border: var(--hair) solid var(--line-up); border-left: 3px solid var(--ember); background: rgba(232,144,26,.06); color: var(--t-body); font-size: 13px; line-height: 1.5; } .inv-root .progress-row { display: none; align-items: center; gap: 12px; margin: var(--s4) 0 0; color: var(--t-body); font-size: 13px; line-height: 1.45; } .inv-root .progress-row.on { display: flex; } .inv-root .progress-row .spinner { width: 18px; height: 18px; border-width: 2px; flex: 0 0 auto; } /* the stored-dinosaur card: .meta (name / line / tags / mutations) + .ops */ .inv-root .stored-list { display: grid; gap: 12px; margin-top: var(--s4); } .inv-root .stored-list:empty { display: none; } .inv-root .stored { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--s4); padding: 14px 16px; background: var(--panel-up); border: var(--hair) solid var(--line); } .inv-root .stored .meta { flex: 1 1 260px; min-width: 0; display: grid; gap: 7px; } .inv-root .stored .name { font: 700 16px/1.2 var(--display); letter-spacing: .04em; text-transform: uppercase; color: var(--t-hi); overflow-wrap: anywhere; } .inv-root .stored .line { font: 500 11px/1.5 var(--data); letter-spacing: .06em; color: var(--t-sec); } .inv-root .stored .tags, .inv-root .stored .mutations { display: flex; flex-wrap: wrap; gap: 6px; } .inv-root .stored .tags:empty, .inv-root .stored .mutations:empty { display: none; } .inv-root .stored .ops { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } /* tags: the word first, then a fill or a hatching; ember-core and violet-ink are the two ink accents haven.css clears for a word */ .inv-root .tag.prime { color: var(--ember-core); border-color: var(--ember-deep); background: rgba(232,144,26,.09); } .inv-root .tag.elder { color: var(--violet-ink); border-color: var(--violet-deep); background: rgba(163,43,200,.10); } .inv-root .tag.recovering { color: var(--t-hi); border-color: var(--t-ter); background-image: var(--hatch); } .inv-root .tag.listed { color: var(--t-hi); border-color: var(--blown); } .inv-root .tag.mutation { color: var(--t-sec); border-style: dashed; text-transform: none; letter-spacing: .04em; } .inv-root .tag.mutation.elder { color: var(--violet-ink); border-color: var(--violet-deep); background: none; } /* empty states ride dominion's .empty; these only space them */ .inv-root .vault-empty, .inv-root .inventory-empty { margin-top: var(--s4); font-size: 13px; line-height: 1.55; } .inv-root .inventory-empty a { color: var(--ember-ink); text-decoration: underline; text-underline-offset: 3px; } .inv-root .inventory-empty a:hover { color: var(--ember-core); } /* skins: the buy-slots row hides itself when its only button is hidden */ .inv-root .inv-skinslots-row { display: flex; justify-content: flex-end; margin-bottom: 12px; } .inv-root .inv-skinslots-row:not(:has(:not([hidden]))) { display: none; } .inv-root .inventory-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; } .inv-root .inventory-grid:empty { display: none; } .inv-root .inv-card { display: flex; flex-direction: column; gap: 9px; padding: 14px; background: var(--panel-up); border: var(--hair) solid var(--line); } .inv-root .inv-thumb { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: var(--hair) solid var(--line-up); background: var(--void); } /* a glitch skin's face: the colour bands, never a render. An unpainted band is the void. */ .inv-root .inv-plate { display: flex; height: 84px; overflow: hidden; border: var(--hair) solid var(--line-up); } .inv-root .inv-plate i { flex: 1 1 0; background: var(--void); } .inv-root .inv-name { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font: 700 14px/1.3 var(--display); letter-spacing: .04em; text-transform: uppercase; color: var(--t-hi); overflow-wrap: anywhere; } .inv-root .inv-glitch-chip { display: inline-block; padding: 2px 7px; border-radius: var(--r-pill); font: 600 9px/1.4 var(--data); letter-spacing: .14em; text-transform: uppercase; color: var(--violet-ink); border: var(--hair) solid var(--violet-deep); background: rgba(163,43,200,.12); } .inv-root .inv-meta { font: 500 10px/1.5 var(--data); letter-spacing: .08em; text-transform: uppercase; color: var(--t-dim); } .inv-root .inv-apply { width: 100%; margin-top: auto; } .inv-root .inv-ops { display: flex; gap: 8px; } .inv-root .inv-ops .btn { flex: 1 1 0; min-width: 0; } /* ── the one toast, the one modal ────────────────────────────────────────── */ #toast { position: fixed; left: 50%; bottom: calc(var(--livebar-h, 34px) + 18px); transform: translateX(-50%) translateY(20px); z-index: 160; max-width: min(460px, calc(100% - 32px)); padding: 12px 18px; border-radius: var(--r); border: 1px solid var(--line-up); background: rgba(8,6,7,.97); color: var(--t-hi); font-size: 13px; line-height: 1.45; opacity: 0; pointer-events: none; box-shadow: var(--crush); transition: opacity .2s ease, transform .2s ease; } #toast.on { opacity: 1; transform: translateX(-50%) translateY(0); } #toast.ok { border-color: rgba(255,198,77,.55); } #toast.err { border-color: var(--t-ter); border-style: dashed; } #toast.warn { border-color: var(--violet-ink); } .modal-backdrop { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; padding: 20px; background: rgba(4,2,7,.78); } .modal-card { width: min(440px, 100%); padding: 26px; border: 1px solid var(--line-up); border-radius: var(--r); background: linear-gradient(180deg, rgba(21,15,16,.98), rgba(8,6,7,.99)); box-shadow: var(--crush), var(--lit-edge); } .modal-card h3 { margin: 0 0 10px; font-size: 20px; letter-spacing: .04em; text-transform: uppercase; color: var(--t-hi); } .modal-card p { margin: 0 0 20px; color: var(--t-body); font-size: 14px; line-height: 1.55; } .modal-input { margin: -6px 0 20px; } .modal-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; } /* ── responsive: every control keeps its full width and its 22px floor ───── */ @media (max-width: 620px) { .inv-root .vault-top { flex-direction: column; align-items: stretch; } .inv-root .vault-actions .btn { flex: 1 1 auto; } .inv-root .stored .ops { width: 100%; } .inv-root .stored .ops .btn { flex: 1 1 auto; } .inv-root .inventory-grid { grid-template-columns: 1fr; } }