Restyle the HUD as an observatory instrument

Replaces the generic rounded dark cards floating over the scene with a
single instrument language: hairline frames cut by accent corner ticks, a
viewport frame that reads the whole screen as one panel, and readouts whose
figures are what the eye lands on.

- styles.css: retune the tokens (deeper void/panel, brighter text/muted so
  every label clears 4.5:1 even over the brightest part of the skybox) and
  add two utilities — `hud-brackets` draws the four corner ticks from eight
  background gradients so no panel pays for them in DOM, `hud-acquire` wipes
  a panel down on mount as its one authored moment (reduced-motion aware).
- Drop Orbitron: every string in this UI is a measurement, an identifier, or
  a catalog label, so one readout face carries the hierarchy through weight,
  size, and tracking — and the HUD paints one font request sooner.
- Search: reticle mark instead of a magnifier, transparent field inside a
  framed shell, results as a dense two-column list with a match count, and
  the previously missing empty state.
- Info panel: return rail, name/class header, and a readout table with
  tabular figures and the unit tinted back off the number.
- Star labels: a hairline leader back to the star they name. The offset moved
  from `translate-*` to a margin because CSS2DRenderer overwrites the inline
  transform every frame, which silently beat the old classes.
- Both top-anchored overlays drop below the search field under `sm` so they
  no longer stack on top of it on a phone, and focus moved from a removed
  outline plus ring to real `focus-visible` outlines.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_016jxMkwA2rbicdGxHosecYi

This commit is contained in:

Senrokai

2026-08-07 17:42:14 +02:00

co-authored by

Claude Opus 5

parent d7e8ea1d4d

commit 836816ffbd

8 changed files with 161 additions and 55 deletions

									
										src/app/app.html
									
		+6
		
												View File
												
				@@ -1,2 +1,8 @@

				<!-- Viewport frame: the four corner marks that read the whole screen as one instrument, rather

				     than as unrelated panels floating on black. Decorative, so it never intercepts scene input. -->

				<div

				  aria-hidden="true"

				  class="hud-brackets pointer-events-none fixed inset-2 z-30 [--hud-tick:1.75rem]"

				></div>

				<app-search></app-search>

				<router-outlet></router-outlet>