/* ======================================================================= hud.css — THE CHROME, IN ONE PLACE Every walked page floats the same three things over its canvas: a PLATE saying where you are, a LINK or two out of it, and a HINT along the bottom. Until now each page carried its own copy of the styling for all three, and the copies had already drifted - two different background colours, two different border alphas, two different naming schemes. Five copies of a look is five places to edit and four places to forget. So the LOOK lives here and the LAYOUT stays on the page. That split is deliberate: where a plate SITS is genuinely page-specific (the lounge's HUD has to appear and disappear with body.walked, and the specificity of that is commented at length in lounge.html), but what a plate LOOKS LIKE is not page-specific at all. Move the wrong half and you break the lounge. TWO NAMING SCHEMES, ONE SKIN. The blocks and the interiors call these .plate/.back/.hint; the walked lounge calls them .whud__plate/.whud__link/ .whud__hint because it needed its own HUD that could hide behind body.walked. Renaming either would touch markup on pages other people are working in, for no gain, so both names are listed on every rule here instead. THE LOOK: Y2K FOIL. The old chrome was a flat translucent navy panel with a single hairline border - honest, and completely inert. This is the same dark glass with the three things it was missing: a rim that is a real gradient rather than one flat colour, a gloss across the top half so the panel has a thickness, and a sheen that travels across it when you touch it. The rim starts and ends in the ROOM'S OWN COLOUR and only goes iridescent through the middle, so King Bee's chrome still reads as gold and the street's still reads as ice - the foil is the material, not the palette. --hud-accent is the whole per-room API. Set it once on and the plate, the links, the map button, the glows and the emphasis all follow. ======================================================================= */ :root{ --hud-accent:#38e6ff; /* ice, and the default everywhere */ --hud-ink:#eafcff; --hud-dim:#8fc4dd; } /* ===================== THE PANEL ===================== The gradient rim is the two-background trick: the fill is painted to padding-box and the gradient to border-box, under a border that is only there to be transparent. It is the one way to get a real gradient onto a ROUNDED edge - border-image cannot follow a border-radius, and a wrapper element would mean touching the markup on five pages. */ .plate, .back, .whud__plate, .whud__link, .fmap-open, .tmach-open{ position:relative; overflow:hidden; /* clips the gloss and the sheen to the radius */ display:inline-flex; align-items:center; padding:7px 14px; border:1.5px solid transparent; border-radius:9px; background: linear-gradient(180deg, rgba(16,30,54,.92), rgba(5,10,24,.88)) padding-box, linear-gradient(115deg, var(--hud-accent) 0%, #b06cff 34%, #ff5cf0 52%, #6cf0ff 72%, var(--hud-accent) 100%) border-box; color:var(--hud-ink); text-decoration:none; font-family:"Courier New", Courier, monospace; text-transform:uppercase; backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); box-shadow: 0 2px 14px rgba(0,0,0,.5), 0 0 16px color-mix(in srgb, var(--hud-accent) 18%, transparent); } /* THE GLOSS. A hard-edged highlight over the top half is the entire reason this reads as an object rather than a rectangle. It sits above the fill and below the text, and it never animates - it is the shape of the thing. */ .plate::after, .back::after, .whud__plate::after, .whud__link::after, .fmap-open::after, .tmach-open::after{ content:""; position:absolute; left:0; right:0; top:0; height:52%; background:linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,0)); pointer-events:none; } /* THE SHEEN, and it only exists on the things you can actually press. A plate is a label - it has no hover, so an animation on it would either never fire or fire on its own forever, and a corner of the screen that glints at you while you are trying to walk somewhere is a distraction, not a flourish. Parked off the left edge until wanted. */ .back::before, .whud__link::before, .fmap-open::before, .tmach-open::before{ content:""; position:absolute; top:-60%; bottom:-60%; left:-40%; width:34px; transform:skewX(-22deg); background:linear-gradient(90deg, transparent, rgba(255,255,255,.30), transparent); pointer-events:none; } /* type, which differs between a plate and a link and always has */ .plate, .whud__plate{ font-size:.74rem; letter-spacing:3px; } .back, .whud__link, .fmap-open, .tmach-open{ font-size:.7rem; letter-spacing:2px; } .plate b, .whud__plate b{ color:var(--hud-accent); font-weight:700; text-shadow:0 0 12px color-mix(in srgb, var(--hud-accent) 75%, transparent); } /* ===================== TOUCHING IT ===================== Two things happen at once and they are doing different jobs: the sheen travels (that is the Y2K foil catching a light) and the whole panel picks up a bloom in the room's own colour (that is the bar sign, and it is what tells you the thing is live). The rim brightens into white through the middle so the foil looks lit rather than merely coloured. */ .back:hover, .back:focus-visible, .whud__link:hover, .whud__link:focus-visible, .fmap-open:hover, .fmap-open:focus-visible, .tmach-open:hover, .tmach-open:focus-visible{ color:#fff; outline:none; background: linear-gradient(180deg, rgba(24,44,76,.94), rgba(8,16,34,.9)) padding-box, linear-gradient(115deg, var(--hud-accent) 0%, #d7a6ff 30%, #ffffff 50%, #9df3ff 70%, var(--hud-accent) 100%) border-box; box-shadow: 0 2px 16px rgba(0,0,0,.55), 0 0 22px color-mix(in srgb, var(--hud-accent) 55%, transparent), inset 0 0 14px color-mix(in srgb, var(--hud-accent) 22%, transparent); } .back:hover::before, .back:focus-visible::before, .whud__link:hover::before, .whud__link:focus-visible::before, .fmap-open:hover::before, .fmap-open:focus-visible::before, .tmach-open:hover::before, .tmach-open:focus-visible::before{ animation:hud-sheen .62s ease-out; } @keyframes hud-sheen{ from{ left:-40%; } to { left:130%; } } /* pressed: the panel sinks a pixel and the gloss dims, so a tap has a bottom */ .back:active, .whud__link:active, .fmap-open:active, .tmach-open:active{ transform:translateY(1px); } .back:active::after, .whud__link:active::after, .fmap-open:active::after, .tmach-open:active::after{ opacity:.45; } /* ===================== THE HINT ===================== Deliberately NOT foil. It is a whole sentence of instruction along the bottom of the screen, it changes as you walk, and wrapping the running commentary in the same jewellery as the exits would flatten the difference between "here is where you are" and "here is how to leave". */ .hint, .whud__hint{ display:inline-block; padding:5px 12px; font-family:"Courier New", Courier, monospace; font-size:.62rem; letter-spacing:1.6px; color:var(--hud-dim); background:rgba(5,12,26,.62); border-radius:7px; border:1px solid color-mix(in srgb, var(--hud-accent) 14%, transparent); } /* the map button carries an icon; keep it off the letters */ .fmap-open i{ font-style:normal; font-size:1.05rem; line-height:1; } /* ===================== SMALL SCREENS ===================== The block is narrow and the chrome competes with the scene for room, so it all comes down a size. The hint loses its box entirely - at 390px wide a sentence in a bordered pill is mostly border. */ @media (max-width:560px){ .plate, .whud__plate{ font-size:.62rem; letter-spacing:2px; padding:5px 10px; } .back, .whud__link, .fmap-open, .tmach-open{ font-size:.6rem; letter-spacing:1.4px; padding:5px 10px; } .hint, .whud__hint{ font-size:.55rem; letter-spacing:1px; background:none; border:0; } } /* Reduced motion takes the travelling sheen away and leaves everything that is structure - the rim, the gloss, the bloom - exactly where it was. */ @media (prefers-reduced-motion:reduce){ .back::before, .whud__link::before, .fmap-open::before, .tmach-open::before{ display:none; } .back:active, .whud__link:active, .fmap-open:active, .tmach-open:active{ transform:none; } }