/* Astral Codex — RPG overlay UI (inventory / character / skills / hp bar) */ /* COLOUR TOKENS THE RPG SHEETS NEED THAT design-system.css DOES NOT HAVE. * `--gold-base` / `--gold-hi-base` are the design system's ORIGINAL gold, pinned: the town-concept * block in 13-vend.css re-tints `--gold`/`--gold-hi` on `.rpg-ui`, so a literal #c9a46e and * `var(--gold)` are NOT the same colour inside the HUD. A rule that means the untinted brass says * `--gold-base`; a rule that should follow the re-tint says `--gold`. Never redefine these below * :root (rpgCssTokens.test enforces it, and bans the tokenised literals as bare hex). */ :root { --gold-base: #c9a46e; --gold-hi-base: #efdcbb; --gold-mid: #8f6835; /* the bronze between --gold-base and --gold-deep: scrollbars, pack cells */ --plum-hi: #3a2f6e; /* portrait wells: lit centre */ --plum-lo: #17123a; /* portrait wells: rim */ } /* ONE HUD SIZE FOR EVERY PLAYER, AND BROWSER ZOOM CANCELLED — see src/game/ui/uiScale.ts. * * `--ui-zoom` is written on from the viewport's CSS-pixel size. Because browser zoom shrinks * that measurement by exactly the zoom factor, scaling by it cancels zoom out: the HUD is laid out * smaller in CSS px and each CSS px is drawn bigger, so its physical size never moves. * * `inset: 0` CANNOT BE USED WITH `zoom`. Insets resolve against the viewport in CSS px and the * resulting box is then scaled, so a full-bleed overlay would overflow the screen by the zoom * factor. The explicit size divided by the zoom is what keeps the overlay exactly one viewport * across: viewport units are absolute and unaffected by `zoom`, so `100vw / z` scaled by `z` is * 100vw. */ .rpg-ui { position: fixed; top: 0; left: 0; z-index: 40; pointer-events: none; zoom: var(--ui-zoom, 1); width: calc(100vw / var(--ui-zoom, 1)); height: calc(100vh / var(--ui-zoom, 1)); font-family: var(--font-body); color: var(--ink); } .rpg-ui * { box-sizing: border-box; } /* backdrop shown behind an open panel (cosmic dim) */ .rpg-backdrop { position: absolute; inset: 0; opacity: 0; transition: opacity .18s; background: radial-gradient(120% 90% at 50% 10%, rgba(41,47,107,.55), rgba(7,9,26,.82)); backdrop-filter: blur(2px); pointer-events: none; } .rpg-backdrop.is-open { opacity: 1; pointer-events: auto; } /* ---- The Ledger's page furniture ------------------------------------------------------------- Governed by docs/art/VIL.md. The interface is the Adventurer's Ledger, and a panel is a PAGE — enchanted vellum over ivory board, framed with bronze. Two consequences are load-bearing here: 1. A page is a SURFACE, never an opening. So a panel is opaque and does not blur what is behind it. (The `.rpg-backdrop` above is the exception and stays: it is the world being set aside while you read, not a panel you look through.) 2. Purple is the ground and gold is the punctuation. Gold is a LINE AND POINT material — rules, hairlines, brackets, bezels — and is never an area fill. That is VIL's Colour rule, and it is why there is no gold background anywhere below. Built once because nine surfaces share it. The reference plate shows the current UI has already drifted into per-surface chrome, which is what a shared layer prevents. Geometry is MEASURED, not eyeballed — see docs/art/reference-measurements.md § UI CHROME CONSTRUCTION for the source of every number in this block. */ /* THE PAGE, AS A BEVELLED FITTING. The first version of this was a 1px border and a flat two-stop fill — a DIAGRAM of the reference rather than the artwork. Held against the plate at 5x (docs/superpowers/screenshots/ref-zoom.png) the differences are specific and none of them are "more ornament": · the frame is a STACK, not a line: dark outer contour, warm gold band, dark inner channel; · there is a LIGHT CATCH along the top edge and a shadow along the bottom, which is the whole reason the gold reads as metal. brandStyles.ts already states this — "it reads as METAL because it is dark with a lit edge, not because it is bright" — and this file ignored it; · the fill is not flat: it is darker at the rim and lifts toward the upper third, so the page reads as a surface catching light rather than as a rectangle of colour. All of it is box-shadow layers on one element. No extra DOM, no images. */ .v-page { position: relative; border-radius: var(--r-4, 12px); background: /* the lift, so the middle of the page is not the same value as its rim */ /* THE INNER RAIL, AS BACKGROUND LINES RATHER THAN A POSITIONED PSEUDO-ELEMENT. `.rpg-panel` is its own scroll container (`overflow: auto`), and an absolutely-positioned child of a scroll container travels with the CONTENT — so the rail slid up out of the window as soon as a long panel was scrolled, which is what the owner reported. A background does not: with the default `background-attachment: scroll` it is painted against the element's padding box and stays put however far the contents move. Four 1px lines rather than one stroked rounded rect, because a single SVG scaled to an arbitrary panel size distorts its own corner radius. The corners are already covered by the flourish SVGs above, which sit at 5px and hide the join. */ linear-gradient(rgba(198,160,104,.30), rgba(198,160,104,.30)) 4px 4px / calc(100% - 8px) 1px no-repeat, linear-gradient(rgba(198,160,104,.30), rgba(198,160,104,.30)) 4px calc(100% - 5px) / calc(100% - 8px) 1px no-repeat, linear-gradient(rgba(198,160,104,.30), rgba(198,160,104,.30)) 4px 4px / 1px calc(100% - 8px) no-repeat, linear-gradient(rgba(198,160,104,.30), rgba(198,160,104,.30)) calc(100% - 5px) 4px / 1px calc(100% - 8px) no-repeat, radial-gradient(120% 90% at 50% 8%, rgba(145,165,183,.12), transparent 62%), linear-gradient(180deg, #30353d 0%, #20252d 42%, #151a21 100%); border: 1px solid #0d0a20; /* the dark contour the gold sits inside */ box-shadow: 0 0 0 1px rgba(198,160,104,.85), /* the gold band */ 0 0 0 2px rgba(13,10,32,.9), /* dark channel outside the band */ inset 0 1px 0 rgba(255,236,198,.22), /* LIGHT CATCH along the top bevel */ inset 0 -1px 0 rgba(0,0,0,.55), /* the underside, in shadow */ inset 0 0 0 1px rgba(154,134,232,.10), /* a cool inner hairline off the violet */ inset 0 14px 28px -18px rgba(255,236,198,.16), /* soft sheen down from the top edge */ inset 0 -22px 34px -26px rgba(0,0,0,.75), /* weight in the lower half */ 0 18px 48px -14px rgba(0,0,0,.85); /* the page lifting off the world */ color: var(--ink); } /* CORNER FLOURISHES. The plate's corners are CURVED SCROLLWORK in a hairline of warm gold — a drawn flourish that turns in on itself. They were 3px straight L-brackets here, which is both the wrong shape and roughly three times the weight, and that single mismatch is most of why the panels read as generated rather than made. One SVG, used four times and mirrored, so all four corners are the same piece of art and a change to the curve lands everywhere at once. On a child element so callers keep their own pseudos. */ .v-page__corners { position: absolute; inset: 5px; pointer-events: none; } .v-page__corners::before, .v-page__corners::after, .v-page__corners > i::before, .v-page__corners > i::after { content: ''; position: absolute; width: 34px; height: 34px; background-repeat: no-repeat; background-size: 100% 100%; /* Two nested arcs (the double hairline the plate draws), a short spur along each axis, and a small terminal bead where the scroll ends. Stroke widths are ~1px at native size. */ background-image: url("data:image/svg+xml;utf8,\ \ \ \ \ \ \ \ \ "); filter: drop-shadow(0 0 3px rgba(201,164,110,.35)); } .v-page__corners::before { top: 0; left: 0; } .v-page__corners::after { top: 0; right: 0; transform: scaleX(-1); } .v-page__corners > i::before { bottom: 0; left: 0; transform: scaleY(-1); } .v-page__corners > i::after { bottom: 0; right: 0; transform: scale(-1); } /* The title rule with a gem at its centre — the logo's divider motif, and the reference's. */ .v-rule2 { display: flex; align-items: center; gap: 10px; margin: 10px 20px 14px; } .v-rule2::before, .v-rule2::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(201,164,110,.55)); } .v-rule2::after { background: linear-gradient(90deg, rgba(201,164,110,.55), transparent); } /* A gem is SET, not printed. The plate's gems sit in a bronze bezel with a lit facet on the upper left and the stone darkening away from it — which is what makes a 12px diamond read as a cut stone rather than as a rotated square. The bezel is a ring (box-shadow) so the setting stays one element. */ .v-gem { width: 12px; height: 12px; flex: none; transform: rotate(45deg); border-radius: 2px; background: linear-gradient(135deg, #e7ddff 0%, var(--violet-hi) 22%, #6f5cc4 62%, var(--violet-deep, #3c3178) 100%); box-shadow: 0 0 0 1px rgba(198,160,104,.95), /* the bezel */ 0 0 0 2px rgba(13,10,32,.75), /* the shadow the setting casts into the page */ inset 1px 1px 1px rgba(255,255,255,.55),/* facet catching the key light */ inset -1px -1px 2px rgba(20,10,50,.75), /* the stone's far side */ 0 0 9px rgba(154,134,232,.55); } /* the glow it throws */