/* =========================================================================== Void Reach — HUD 2026 "MILSPEC CONSOLE" skin --------------------------------------------------------------------------- Approved from the concept at public/dev/hud-concept-2026.html, and DEFAULT ON as of the owner's "kösd be az új HUD-ot" — this is the game's HUD now. This file is an OVERRIDE LAYER over the shipped style.css: it restyles the existing live DOM, it does not restructure it. Every selector is scoped under `body.hud-2026`, which js/hud-2026.js sets unless the opt-out flag is on: (default) → new console localStorage.sd_hud2026 = '0' → the pre-2026 GUI, byte-identical The scoping + opt-out are kept rather than inlined into style.css because public/ is served straight off disk with no staging step — if this skin ever misbehaves for someone, the fallback has to be one console line away, not a redeploy. DOM mapping, concept -> live: #topbar -> #hud (top command bar) #rail -> #sidenav (nav rail) #screen -> #page (dynamic content bezel) #ops -> .map-side-dash (right ops column, id #command-dash) #dock -> .map-action-dock (bottom dock, id #command-dock) #crew -> .chat-portrait-col (commander portrait, inside #chat-dock) #comms -> #chat-dock banner -> #faction-banner (moved into the rail's foot) =========================================================================== */ body.hud-2026 { --accent: #59d5f2; --accent-dim: rgba(89, 213, 242, 0.55); --amber: #f2a03d; --hairline: rgba(125, 155, 195, 0.16); --hairline-hi: rgba(89, 213, 242, 0.4); --pane-a: rgba(10, 14, 22, 0.88); --pane-b: rgba(6, 9, 15, 0.94); --inset-fill: rgba(3, 5, 9, 0.6); --txt-faint: #4d5a70; --disp: 'Orbitron', sans-serif; /* the flush shell has no gaps: the rail owns the banner, the chat and portrait butt against it, and the dock fills the rest of the row */ --crew-w: 132px; } /* ---- backdrop ----------------------------------------------------------- This was `background: #04060b` — a SHORTHAND, so it also reset background-image to none, and style.css's body rule is what paints the app-wide nebula (/img/space/nebula_backdrop.jpg, the same file .map-stage::before uses). Every non-map page lost the art and went flat black; the Galaxy view kept it only because it paints its own copy. Measured: the galaxy backdrop came out 2.94x brighter than the overview. That is the exact complaint the owner had already made once before — see style.css's own body comment — so: colour only, never the shorthand. The fbm shader that used to paint over this is retired (see hud-2026.js): the backdrop is real art, and the Galaxy — the look every page is meant to match — never showed the shader at all, because .map-canvas covers it. So this rule sets NO background at all now — style.css's own body rule is the shared art, and it is already written to line up with the map's layer (same file, same `center / cover`; see its comment). */ body.hud-2026 #starfield { display: none; } /* The Galaxy's own running nebula, mounted app-wide (hud-2026.js). Matches .map-nebula-layer's geometry — fixed and full-bled, so the same shader lands on the same rectangle on every route. */ body.hud-2026 #hud-2026-neb { position: fixed; inset: 0; z-index: 0; pointer-events: none; } /* On map routes the map mounts its own copy of this same shader; two fullscreen quads would just pay twice for one look. The JS skips the draw while this is hidden. */ body.hud-2026:has(.map-stage) #hud-2026-neb { display: none; } body.hud-2026 #hud-2026-grain, body.hud-2026 #hud-2026-scan { position: fixed; inset: 0; z-index: 0; pointer-events: none; } body.hud-2026 #hud-2026-grain { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); opacity: .05; mix-blend-mode: overlay; } body.hud-2026 #hud-2026-scan { background: repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px); opacity: .35; } /* Pre-auth (login / verify / reset): the core HUD panels are already hidden by style.css's `body.unauthed #hud/#sidenav/...` rules, but these three ambient layers are injected by hud-2026.js independent of auth and would otherwise paint their nebula/grain/scanline chrome over the centered login screen. Hide them so only the base login keyart shows. */ body.unauthed #hud-2026-neb, body.unauthed #hud-2026-grain, body.unauthed #hud-2026-scan { display: none; } /* #sidenav is given an explicit `display: flex` in the hud-2026 skin below, which ties style.css's `body.unauthed #sidenav { display:none }` on specificity and wins on source order — so the nav rail leaked onto the login screen. Re-hide it with a two-class selector that out-specifies the flex rule on any pre-auth route (#hud itself is already correctly hidden; this block never sets display on it). Owner-reported: the SAME collision hits .map-side-dash/.map-action-dock/ #chat-dock — each also gets an explicit `display: flex` further down in this file (equal specificity to style.css's own hiding rule, later file wins), so the ops column/bottom dock/comms dock were all leaking onto the login screen too, just never reported until now. Same two-class fix. `.chat-portrait-col` (the captain-portrait bay) is a SEPARATE `` child, not nested inside `#chat-dock` (see `body.hud-2026 .chat-portrait-col` below: `position: fixed`, own `display: flex`) — so hiding `#chat-dock` never touched it, and it kept leaking a broken-image placeholder onto the login screen (owner screenshot, 2026-07-18) after every other chrome piece was already fixed. Same two-class fix, added here rather than folded into the list above so this comment stays next to the element it's actually about. */ body.unauthed.hud-2026 #sidenav, body.unauthed.hud-2026 .map-side-dash, body.unauthed.hud-2026 .map-action-dock, body.unauthed.hud-2026 #chat-dock, body.unauthed.hud-2026 .chat-portrait-col { display: none; } /* ---- shared pane skin + pointer spotlight ------------------------------- Only the pane under the cursor lights (js sets --spot); a first cut lit every pane at once and read as far too much light. */ body.hud-2026 #hud, body.hud-2026 #sidenav, body.hud-2026 .map-side-dash, body.hud-2026 .map-action-dock, body.hud-2026 #chat-dock { /* NOTE: no `position` here on purpose. #hud / .map-side-dash / .map-action-dock / #chat-dock are all `position: fixed` in style.css, and a shared `position: relative` in this block silently knocked them out of fixed positioning — the dash landed at the far left, the chat under the topbar. Only #sidenav is statically positioned and needs a containing block for the spotlight ::after (set below). */ background: linear-gradient(180deg, var(--pane-a), var(--pane-b)); backdrop-filter: blur(7px); border-radius: 0; box-shadow: none; clip-path: none; /* the shipped chrome chamfers; this one does not */ } body.hud-2026 #hud::after, body.hud-2026 #sidenav::after, body.hud-2026 .map-side-dash::after, body.hud-2026 .map-action-dock::after, body.hud-2026 #chat-dock::after { content: ''; position: absolute; inset: 0; z-index: 0; background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(120, 190, 240, 0.028), transparent 68%); opacity: var(--spot, 0); transition: opacity .18s; pointer-events: none; } /* #chat-dock's shipped ::before/::after ARE its frame (double-layer fill) — neutralize the fill layer, we draw the pane ourselves above. */ body.hud-2026 #chat-dock::before { content: none; } /* ---- flush shell: every seam is ONE hairline --------------------------- Each panel borders only the edge that faces a neighbour; bordering all sides would put two hairlines on every seam and read as a 2px double rule instead of one crisp line. */ body.hud-2026 #hud { height: var(--hud-h); background-image: none; /* drops the shipped panel-topbar-strip art */ border: none; border-bottom: 1px solid var(--hairline); padding: 0 18px; /* NO `overflow: hidden` here. It was added to clip the hex canvas — which is `position:absolute; inset:0` and cannot overflow anyway — and it clipped the colony dropdown instead: the list is a child of #hud and hangs BELOW the bar, so it was cut off at the bar's own edge. */ } body.hud-2026 #sidenav { position: relative; /* containing block for the spotlight ::after */ width: var(--nav-w); align-self: stretch; border: none; border-right: 1px solid var(--hairline); border-radius: 0; padding: 10px 0 0; display: flex; flex-direction: column; overflow: hidden; } /* What the page has to clear at the foot is the DOCK (84px), not the chat: the chat is a collapsed 84px overlay strip here, and free to grow over the dock's empty stretch when opened. --page-pad-t/-b are shared with .map-stage's height below so the two can't drift apart. */ body.hud-2026 { --page-pad-t: 38px; --page-pad-b: 100px; /* dock 84 + breathing room */ } /* No scrim of its own. #page used to carry one (0.25, and 0.40 on non-map routes) to claw back the light the retired shader was adding; a flat alpha here is now the only thing that could make a page differ from the Galaxy again. The inset shadow stays — that is the screen bezel, not a dimmer. */ body.hud-2026 #page { padding: var(--page-pad-t) 20px var(--page-pad-b); box-shadow: inset 0 0 60px rgba(0,0,0,.35); } /* NOTE for the next person tempted to "match the Galaxy's brightness" by sampling it: you cannot. The Galaxy has no empty backdrop to sample — .map-canvas fills the whole stage and renders its OWN starfield and glows over it. Patches there read 18.48 against a page's 14.27 with both on identical art, and the peaks give it away (122 and 83, against 40). That gap is the map's CONTENT, not its background. Mirroring .map-stage::before's layer onto non-map routes was tried to close it and moved the number by 0.18 — the .55 wash darkens exactly as much as the second nebula copy adds back — so it was dropped rather than kept as a rule needing to stay in sync with style.css for no visible gain. */ @media (min-width: 1121px) { body.hud-2026 #page { padding-right: calc(313px + 20px); } } /* Login "absolute middle" request: style.css's `body.login-screen #page` flex-centers the card, but this rule (and the media-query one above it) share its exact (1,1,1) specificity and load later, so they were winning the padding tie-break — the 38px-top/100px-bottom dock reserve (and the 1121px+ side-dash reserve) skewed the flex-centered box off true center. Both reserves are for chrome already hidden on this route (dock/side-dash/ chat-dock, see the two-class fix earlier in this file), so there is nothing to reserve room for here. `body.hud-2026.login-screen` (1,2,1) outranks both unconditionally, independent of source order. */ body.hud-2026.login-screen #page { padding: calc(var(--sp) * 3) 20px; } /* style.css sizes the map stage as `100vh - hud - sp*8 - --chat-dock-h - 26`, reserving the full 332px of an always-open chat dock — in this console that's a collapsed 84px strip plus ~230px of nothing, which is the hard cut across the bottom of the starfield. Rebuilt WITHOUT a constant chain. Re-deriving it (hud + padding + page-head + margin) overshot by 27-63px and reopened #page's overflow-y — exactly the trap style.css's own comment records — because the page-head block isn't the 26px that formula assumes; measured, the stage started 167px down, not 140. Rather than chase the right constant, let the browser do the arithmetic: #page becomes a flex column on the map route only (`:has(.map-stage)`), the head keeps its natural height, and the stage takes exactly what's left. Nothing to drift out of sync. */ body.hud-2026 #page:has(.map-stage) { display: flex; flex-direction: column; } body.hud-2026 #page:has(.map-stage) > .page-head { flex: none; } /* DIRECT child only. On the galaxy/system tiers .map-stage is a direct child of #page and fills the flex column. On the PLANET tier it is NOT — it is a grid item inside .planet-layout (`#page > .planet-layout > .map-stage`). */ body.hud-2026 #page:has(.map-stage) > .map-stage { flex: 1 1 auto; height: auto; } /* Planet tier: the globe dropped to the top of the frame with a big gap below (owner: "the planet moved from center"). Two things stacked: my broad `.map-stage { height: auto }` collapsed the grid item to the globe's short intrinsic size, and style.css's own fallback height for it — `100vh - hud - sp*8 - chat-dock-h - 26` — over-subtracts here anyway, because it still reserves the OLD ~332px chat-dock height this skin shrank to 84. Same fix as the galaxy tier: let the browser do the arithmetic. .planet-layout grows to fill the flex column, its single row fills the layout, and the stage stretches into that row. .planet-side keeps its `align-items: start` (from style.css) so the inspector panels stay at the top of the tall row instead of stretching with it. */ body.hud-2026 .planet-layout { flex: 1 1 auto; min-height: 0; grid-template-rows: minmax(0, 1fr); } body.hud-2026 .planet-layout .map-stage { height: auto; min-height: 0; align-self: stretch; /* Centre the globe on the SCREEN, not on the 1fr column (owner: "the center of the screen should be the center of the planet"). The globe draws at its canvas centre and the canvas fills this stage; left in the grid column it centres at ~733 while the screen centre is 960, shoved left by the two right-side panels (the 320px planet info + the 302px ops dashboard). `left` shifts the stage VISUALLY without resizing it or moving its siblings, so the grid still places .planet-side in its own column (an early attempt with width:100vw broke the grid — the panel jumped off-screen). The offset lands the stage centre on 50vw: its own left is nav-w + page padding, and the 50% is half the stage's grid cell. The owner accepts (chosen deliberately) that the globe's right edge then tucks BEHIND the info panel — more so on narrow screens; the panel is opaque and sits above (.planet-side's own z-index, below), so it reads as the globe passing behind the panel, not a glitch. */ position: relative; left: calc(50vw - var(--nav-w) - 20px - 50%); /* NO z-index here (bug, 2026-07-17): `position:relative` + an explicit z-index (was 0) makes THIS box a stacking context, which traps `.map-stage::before` (style.css) — the fixed, full-viewport, z:-1 nebula scrim meant to sit behind literally everything — inside it instead of at the document root. That local context then out-competes `#sidenav`/`.page-head` for paint order (DOM order tie-break at z:auto~0), so the scrim re-surfaces ON TOP of the nav rail and page header — invisible in the DOM/computed-style (still `display:flex`, `opacity:1`, correct rects) and still hit-testable (the scrim is `pointer-events:none`), so only actually LOOKING at the page shows it. Only the planet tier hit this: galaxy/system's `.map-stage` is a direct child of `#page`, never gets this rule, so its `::before` stays at root z:-1 as designed. `.planet-side`'s own explicit z-index:1 (below) already paints it above this box's z-index:auto without needing this box to declare a z-index of its own — nothing else depended on it. */ } /* the info panels stay above the stage, which now overlaps their column */ body.hud-2026 .planet-side { position: relative; z-index: 1; } /* ---- top bar ------------------------------------------------------------ */ body.hud-2026 .hud-title { font-family: var(--disp); letter-spacing: .32em; font-size: 14px; } body.hud-2026 .hud-title b { color: var(--accent); text-shadow: 0 0 14px rgba(89,213,242,.5); } body.hud-2026 .hud-hexgrid { z-index: 0 !important; } body.hud-2026 #hud > *:not(.hud-hexgrid) { position: relative; z-index: 1; } /* ---- colony switcher ---------------------------------------------------- The pill's leading star is a duplicate: main.js already prefixes the label with a ★ for the HOME colony (`${c.isHome ? '★ ' : ''}`) — that one carries meaning, this one is on every colony, always. */ body.hud-2026 .colony-star-ic { display: none; } /* the dropdown, in the console's register — and above the crew/comms bays, which sit at z-index 50/51 and would otherwise cover a long colony list */ body.hud-2026 .hud-select-list { clip-path: none; border-radius: 0; background: linear-gradient(180deg, var(--pane-a), var(--pane-b)); border: 1px solid var(--hairline-hi); box-shadow: 0 14px 34px rgba(0, 0, 0, .6); backdrop-filter: blur(7px); z-index: 60; } body.hud-2026 .hud-select { z-index: 60; } body.hud-2026 .hud-select-opt { border-radius: 0; clip-path: none; } /* resource readouts: hairline-separated data columns, no chamfered chips */ /* Centred on the VIEWPORT, not in the leftover flex space. `margin: 0 auto` only centres between its neighbours, and the left cluster (brand + colony pill) is far wider than the right one, so the bar sat visibly off-centre. Absolute + left:50% is the only way to hit true centre with these siblings. Note the `#hud >` in the selector: it's load-bearing. The stacking rule below (`#hud > *:not(.hud-hexgrid)`, 1 id / 2 classes) would otherwise out-specify a plain `#hud-res` (1 id / 1 class) and force position back to relative — with style.css's own `left: 50%` still applying, which is what shoved the bar 942px onto the rank cluster. Two ids beats it cleanly. */ body.hud-2026 #hud > #hud-res { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; z-index: 1; background: none; border: none; box-shadow: none; clip-path: none; border-radius: 0; border-left: 1px solid var(--hairline); padding: 0; height: auto; min-width: 0; /* never let it reach either cluster on a narrow viewport */ max-width: calc(100vw - 860px); overflow: hidden; } body.hud-2026 #hud-res::before, body.hud-2026 #hud-res::after { content: none; } /* The concept's readout, brought over verbatim (owner: "jobban tetszett ez a nyersanyag kijelző stílus"): a per-resource pip + a tracked-out label over the value, rate and capacity bar — not the icon chip. Done purely in CSS so main.js's cell markup (and therefore the opted-out GUI) is untouched: the label comes off the stable `data-hud-res` key and the icon box is repurposed as the pip rather than hidden and replaced. NOT `attr(title)`, which was the obvious move and is wrong — tickHUD rewrites `title` every tick into the full hover readout, so the label rendered as "Alloys — 751 / 1,000 · +1600/h · full in 0:09". */ body.hud-2026 .hud-res-cell { --rc: var(--accent); display: grid; grid-template-columns: auto 1fr; grid-template-areas: 'pip label' 'main main'; align-items: center; gap: 0 7px; border-right: 1px solid var(--hairline); border-radius: 0; background: none; padding: 7px 18px 8px 16px; min-width: 0; /* .hud-res (style.css) is a flex row with no flex-basis override on its children, so each cell sized to its own content — "Isotopes" (longest label) and whichever cell had the longest number/rate string both ran wider than the others. Owner: "a nyersanyag jelző HUD-ok szélessége egységesen ugyanakkora kellene hogy legyen". flex:1 on a 0 basis divides the bar's width equally regardless of content. */ flex: 1 1 0; } /* style.css's base .hud-res-cell:not(:first-child) still adds its own border-left divider on top of this file's border-right (every cell) — doubling up on cells 2-4 and leaving cell 1 with one border less, which under border-box sizing was the exact 1px width mismatch (111.8 vs 112.8px, measured) that broke the "all cells equal width" ask below. One divider per seam, not two. */ body.hud-2026 .hud-res-cell { border-left: none; } body.hud-2026 .hud-res-cell.res-alloys { --rc: #c9d8ef; } body.hud-2026 .hud-res-cell.res-crystal { --rc: var(--accent); } body.hud-2026 .hud-res-cell.res-isotopes { --rc: #b07fe8; } body.hud-2026 .hud-res-cell.res-rations { --rc: var(--ok); } body.hud-2026 .hud-res-cell.res-aurium { --rc: var(--amber); } body.hud-2026 .hud-res-cell:hover { background: rgba(89, 213, 242, 0.035); } body.hud-2026 .hud-res-cell::before { content: ''; grid-area: label; font-family: var(--disp); font-size: 7.5px; letter-spacing: .34em; color: var(--txt-dim); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.hud-2026 .hud-res-cell[data-hud-res='alloys']::before { content: 'Alloys'; } body.hud-2026 .hud-res-cell[data-hud-res='crystal']::before { content: 'Crystal'; } body.hud-2026 .hud-res-cell[data-hud-res='isotopes']::before { content: 'Isotopes'; } body.hud-2026 .hud-res-cell[data-hud-res='rations']::before { content: 'Rations'; } body.hud-2026 .hud-res-cell[data-hud-res='aurium']::before { content: 'Aurium'; } /* the icon chip becomes the status pip */ body.hud-2026 .res-icon-box { grid-area: pip; width: 5px; height: 5px; min-width: 0; min-height: 0; padding: 0; background: var(--rc); box-shadow: 0 0 7px var(--rc); border: none; border-radius: 0; clip-path: none; font-size: 0; line-height: 0; overflow: hidden; } body.hud-2026 .res-icon-box::before, body.hud-2026 .res-icon-box::after { content: none; } body.hud-2026 .res-icon-box > * { display: none; } body.hud-2026 .hud-res-main { grid-area: main; min-width: 0; } body.hud-2026 .hud-res-val-row { gap: 7px; align-items: baseline; } body.hud-2026 .hud-res-val { font-family: var(--mono); font-weight: 700; font-size: 16.5px; } body.hud-2026 .hud-res-rate { font-family: var(--mono); font-size: 10px; color: var(--txt-dim); } /* the capacity bar reads as one hairline rule tinted by the resource */ body.hud-2026 .hud-res-cell .hud-bar { height: 2px; margin-top: 4px; border-radius: 0; background: rgba(125, 155, 195, .14); border: none; box-shadow: none; } body.hud-2026 .hud-res-cell .bar-fill { background: var(--rc); box-shadow: 0 0 6px var(--rc); border-radius: 0; } /* points / rank / user cluster — the last part of the bar still speaking the old visual language. Measured first: the elements never actually collided (they only read as cramped), so this is purely the milspec register — Orbitron micro-label, mono value, amber rank. */ body.hud-2026 .hud-right { gap: 14px; } body.hud-2026 .hud-stat { display: flex; flex-direction: column; gap: 1px; line-height: 1.1; } body.hud-2026 .hud-label { font-family: var(--disp); font-size: 7.5px; letter-spacing: .3em; color: var(--txt-faint); text-transform: uppercase; } body.hud-2026 .hud-stat .mono { font-family: var(--mono); font-weight: 700; font-size: 15px; } body.hud-2026 #hud-rank { color: var(--amber); } body.hud-2026 .hud-user { font-weight: 600; letter-spacing: .06em; } body.hud-2026 .hud-icon-btn { border-radius: 0; border: 1px solid transparent; background: none; clip-path: none; } body.hud-2026 .hud-icon-btn:hover { color: var(--accent); border-color: var(--hairline); background: var(--inset-fill); box-shadow: none; } /* The notification bell is a 🔔 emoji, which colour fonts render in their own yellow — CSS `color` cannot touch it. Swap it for a silhouette drawn from an inline SVG mask and filled with currentColor, the same mask-image technique the dock glyphs already use, so it sits in the palette and follows hover. */ body.hud-2026 #btn-notifications { font-size: 0; } body.hud-2026 #btn-notifications::before { content: ''; width: 16px; height: 16px; /* Nudged down to sit on the same visual line as 🛠 / ⚙ / ⏻ beside it. Those are text glyphs, whose ink hangs low in the line box off the baseline; this is a mask box, which centres exactly — so a perfectly centred bell reads as riding high. Measured from rendered pixels, not boxes: the neighbours' ink centroids average 16.7px from the strip top, the bell's landed at 15. (A first probe said 0px offset — it had found the leftover 🔔 text node, still in the DOM at font-size:0.) */ position: relative; top: 2px; background-color: currentColor; -webkit-mask-image: var(--bell-mask); mask-image: var(--bell-mask); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } body.hud-2026 { --bell-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a1.4 1.4 0 0 1 1.4 1.4v.9a6 6 0 0 1 4.6 5.8v3.4l1.6 2.6a.8.8 0 0 1-.7 1.2H5.1a.8.8 0 0 1-.7-1.2L6 13.5v-3.4a6 6 0 0 1 4.6-5.8v-.9A1.4 1.4 0 0 1 12 2Zm0 19a2.6 2.6 0 0 1-2.5-2h5A2.6 2.6 0 0 1 12 21Z'/%3E%3C/svg%3E"); } /* the badge is a child of a font-size:0 button — restate its own size */ body.hud-2026 #btn-notifications .nav-badge { font-size: 10px; } /* ---- accent picker (Settings > Display) -------------------------------- Not scoped to .hud-2026: the accent tokens drive the pre-2026 GUI too, so the control has to look right with the skin opted out as well. */ .accent-section { margin-top: 4px; border-top: 1px solid rgba(125,155,195,.14); padding-top: 6px; } /* wheel left, presets + reset beside it — see accentSection() in settings.js for why (the stacked version scrolled the Display tab) */ .accent-body { display: flex; align-items: flex-start; gap: 20px; padding: 2px 6px; } .accent-controls { display: flex; flex-direction: column; gap: 14px; padding-top: 2px; } .accent-swatches { display: flex; flex-wrap: wrap; gap: 9px; max-width: 210px; } .accent-swatch { width: 26px; height: 26px; padding: 0; cursor: pointer; border: 2px solid transparent; border-radius: 50%; outline: 1px solid rgba(125,155,195,.3); outline-offset: -1px; transition: transform .15s, border-color .15s; } .accent-swatch:hover { transform: scale(1.14); } .accent-swatch.on { border-color: #fff; } .accent-swatch:focus-visible { border-color: #fff; outline-color: #fff; } /* width is set inline to the wheel's own size (accent.js) — a fit-content column let the hex field stretch the 1:1 canvas into a giant square */ .accent-wheel-wrap { display: flex; flex-direction: column; gap: 8px; } .accent-wheel { display: block; cursor: crosshair; touch-action: none; border-radius: 50%; } .accent-val { width: 100%; accent-color: var(--accent); } .accent-wheel-foot { display: flex; align-items: center; gap: 8px; } .accent-preview { width: 26px; height: 26px; flex: none; border-radius: 50%; outline: 1px solid rgba(125,155,195,.3); outline-offset: -1px; } .accent-hex { flex: 1; min-width: 0; height: 28px; padding: 0 8px; background: rgba(5, 7, 15, 0.6); border: 1px solid rgba(125,155,195,.28); border-radius: 4px; color: var(--txt); font-family: var(--mono, monospace); font-size: 13px; text-transform: uppercase; outline: none; } .accent-hex:focus { border-color: var(--accent); } /* ---- nav rail ----------------------------------------------------------- */ body.hud-2026 .nav-link { border-radius: 0; border: none; /* The right padding is NOT 0. It was, and .nav-badge rides `margin-left: auto`, so the count chips ended up flush against the rail's own border — measured at exactly 0px of gap (owner: "a piros jelölők nagyon belelógnak a left navi szélébe"). The 22px left inset is the terminal indent; the right side just needs room for the badge to sit in. */ padding: 0 12px 0 22px; height: 44px; letter-spacing: .18em; background: none; } body.hud-2026 .nav-link:hover { background: rgba(89,213,242,.035); color: var(--txt); } body.hud-2026 .nav-link.active { background: linear-gradient(90deg, rgba(89,213,242,.09), transparent 70%); box-shadow: none; border: none; color: var(--accent); } /* the icon chip becomes a bare glyph — the shipped double-layer chip reads as a rounded button and fights the flat terminal language */ body.hud-2026 .nav-ic { background: none; border: none; box-shadow: none; width: 20px; height: auto; border-radius: 0; } body.hud-2026 .nav-ic::before, body.hud-2026 .nav-ic::after { content: none; } body.hud-2026 .nav-link:hover .nav-ic, body.hud-2026 .nav-link.active .nav-ic { color: var(--accent); filter: drop-shadow(0 0 8px rgba(89,213,242,.7)); box-shadow: none; background: none; } body.hud-2026 .nav-link.active::before { content: ''; position: absolute; left: 0; top: 9px; bottom: 9px; width: 2px; background: var(--accent); box-shadow: 0 0 12px var(--accent); } body.hud-2026 .nav-badge { border-radius: 2px; } /* ---- faction banner: defined block ABOVE the holo ship ------------------ Owner mockup: banner as its own block right under the nav links, the holo ship in its own block below it, telemetry last. #sidenav is a flex column and the DOM order is nav… → .rail-holo → #faction-banner → .rail-tele, so the ship comes BEFORE the banner in source. CSS `order` reorders the flex children (banner 1, ship 2, telemetry 3) to banner-above-ship WITHOUT touching the DOM. Back to an in-flow relative block (was an absolute full-panel wash), fixed height, art shown normally with edge fades so it blends into the panel top and bottom instead of reading as a hard photo rectangle. */ body.hud-2026 #faction-banner { /* Owner: "a banner érjen kb a pirossal jelöltig" — reach the red mark just under the nav links. flex:1 makes THIS block absorb all the rail's free space between the nav and the ship (which is now what pins the group to the bottom, replacing the old margin-top:auto — the ship+telemetry stay flush at the foot because this grower sits above them). The image's own background was cut away (transparent webp — scripts/floodalpha.mjs over the grey plate), so a tall box shows the full figure floating over the panel with no grey rectangle; contain + the edge mask below do the rest. min-height:0 lets it shrink gracefully on short viewports. */ /* Owner: "3 pixellel balrább" — nudge the whole banner block 3px left (position is already relative; left:-3px is a paint-only shift, no layout reflow). "5 pixellel magasabb (lefelé)" is handled by trimming the ship's top gap 5px below (14→9px): this flex:1 block then grows 5px downward to fill it while the ship stays put (banner grows +5, gap −5). */ position: relative; inset: auto; left: -8px; order: 1; margin: 0; width: 100%; flex: 1 1 auto; min-height: 0; z-index: 0; background: none; border: none; box-shadow: none; clip-path: none; border-radius: 0; overflow: hidden; pointer-events: none; } body.hud-2026 #faction-banner::before, body.hud-2026 #faction-banner::after { content: none; } body.hud-2026 #faction-banner-img { /* Owner: "egészalakos legyen... vágd körbe, a háttere nem kell... legyen átfedés a panel alja és tetején". The webp is now background-cut (transparent), so `contain` shows the WHOLE figure with no crop and no grey plate around it — the transparent margins just reveal the panel. Centered. The top/bottom mask is the "átfedés" (blend): the figure dissolves into the nav above and the ship below instead of hard-cutting. Opacity up from the old faint-wash .85 — it's a shown, cut-out banner now, not a background. */ position: absolute; inset: 0; width: 100%; height: 100%; transform: none; object-fit: contain; object-position: center center; /* Owner: "legyen egy hátsó réteg és csak üssön át... ne látszanak az erős színei, olvadjon be a háttérbe" — pulled back to a ghostly backdrop: opacity way down and the strong faction colors muted with saturate() + a slight brightness lift so it reads as a faint tonal form dissolving into the panel, not a bright cut-out sitting on top. z-index:0 on the block already keeps it behind the nav-link text; luminosity-ish muting here does the "blend into the background" rather than a blend-mode (which is fragile against the sidenav's own semi-transparent fill). */ opacity: .2; filter: saturate(.4) brightness(1.05); -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%); } /* Owner: "a banner alján nem kell az az erős átütő fény" — the breathing cyan wash made sense when the banner was a bright bottom block, but now that it's a faint recessed backdrop the glow just reads as a hard bright bleed at its foot. Killed. (.fb-glow is still appended by hud-2026.js; neutralised here.) */ body.hud-2026 .fb-glow, body.hud-2026 .fb-glow::before { display: none; } /* ---- rail holo projector (js/hud-holo-ship.js) -------------------------- flex:1 soaks up the rail's free vertical space (nav links above, banner below) — the exact gap this element exists to fill. min-height:0 lets it collapse to nothing on short viewports instead of shoving the banner off; the JS hides its contents below 110px so no 40px-tall smear ever shows. */ body.hud-2026 .rail-holo { position: relative; order: 2; flex: none; height: 144px; min-height: 0; /* The VISIBLE frame CROPS the render (see .rail-holo-fx): the model renders at full/original size, this box just clips its empty transparent top/bottom margins (overflow:hidden), so the panel is compact without distorting the ship. Owner: "a holo panelje indokolatlanul magas... vágd le a tetején" — the PREVIOUS `margin-top:auto` (from an earlier "told lejjebb" request, back when the ship sat alone in the gap with no banner above it) was collecting ALL the rail's leftover flex space directly above this box, reading as one giant panel with dead space over the TAC-HOLO label. That request is superseded now that the banner sits right above the ship — a small fixed gap (matching the banner's own 14px top margin) replaces it, so the ship sits right under the banner with no dead zone. */ /* 9px (was 14px): owner wants the banner 5px taller downward; trimming this top gap lets the flex:1 banner grow 5px into it while the ship stays put. */ margin: 9px 0 0; overflow: hidden; z-index: 1; pointer-events: none; } body.hud-2026 .rail-holo.rh-collapsed > * { display: none; } body.hud-2026 .rail-holo-fx { /* Doubled in lockstep with the frame (165px -> 330px) to keep the SAME crop ratio (frame/render ≈ 0.436) — the model still fills the same FRACTION of the frame, just at 2x pixel size, instead of the frame suddenly revealing more of the empty margin again. TALLER than the frame and vertically centered in it; the model fills only ~25-30% of a render's height, so this shows the same ship crop as before, just bigger. The JS sizes the renderer to THIS element, not the frame. */ position: absolute; left: 0; right: 0; top: 50%; height: 330px; transform: translateY(-50%); /* Owner: "a hologram hajóval a paneleknek jobban össze kellene olvadniuk, ne legyen éles váltás". The 144px frame shows the middle 28%–72% of this 330px render (the rest is clipped by .rail-holo overflow:hidden). Fading the render right at those visible top/bottom edges (transparent→opaque 34%..66%→transparent) dissolves the scanlines + ship silhouette into the panels above and below instead of hard-cropping them — the ship keeps its crisp centre (36–64% ≈ where the model sits) and only its fringes melt out. The label lives OUTSIDE this element, so it stays fully legible. */ -webkit-mask-image: linear-gradient(180deg, transparent 28%, #000 40%, #000 60%, transparent 72%); mask-image: linear-gradient(180deg, transparent 28%, #000 40%, #000 60%, transparent 72%); } body.hud-2026 .rail-holo-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } body.hud-2026 .rail-holo-head { position: absolute; top: 4px; left: 6px; z-index: 2; font-size: 8.5px; letter-spacing: .16em; color: rgba(89,213,242,.5); display: flex; align-items: center; gap: 5px; } body.hud-2026 .rh-dot { width: 5px; height: 5px; background: var(--accent, #59d5f2); box-shadow: 0 0 6px var(--accent, #59d5f2); animation: rh-blink 2.2s steps(1) infinite; } @keyframes rh-blink { 0%, 78% { opacity: 1; } 79%, 88% { opacity: .25; } 89%, 100% { opacity: 1; } } /* static interference lines + one travelling scan band over the render */ body.hud-2026 .rail-holo-scan { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(180deg, rgba(89,213,242,.045) 0 1px, transparent 1px 3px); } body.hud-2026 .rail-holo-scan::after { content: ''; position: absolute; left: 0; right: 0; height: 30px; top: -18%; background: linear-gradient(180deg, transparent, rgba(89,213,242,.13), transparent); animation: rh-scan 5s linear infinite; } @keyframes rh-scan { to { top: 112%; } } /* projector emitter glow at the foot of the bay — toned down (owner wants the ship blending into the panels, so no bright hot spot at its foot) and pushed into a softer, wider, blurrier wash. */ body.hud-2026 .rail-holo-base { position: absolute; left: 12%; right: 12%; bottom: 2px; height: 20px; pointer-events: none; background: radial-gradient(55% 100% at 50% 100%, rgba(89,213,242,.1), transparent 78%); filter: blur(3px); } @media (prefers-reduced-motion: reduce) { body.hud-2026 .rail-holo-scan::after, body.hud-2026 .rh-dot { animation: none; } } /* ---- rail telemetry footer (js-injected) -------------------------------- No negative margin-top here. This used to pull the footer up 18px into the banner's faded tail, which read as the banner hanging past the rule above UPLINK (owner: "az alja max a vonalig érjen"). The rule's own position is fixed either way -- the footer is the rail's last child and the rail is full height, so its top always lands at (rail bottom - its own height); the margin only ever moved the BANNER down onto it. */ body.hud-2026 .rail-tele { flex: none; order: 3; padding: 2px 14px 10px; border-top: 1px solid rgba(125,155,195,.1); position: relative; } body.hud-2026 .tele-row { display: flex; align-items: baseline; justify-content: space-between; font-size: 11px; font-weight: 600; padding: 3px 0; white-space: nowrap; } body.hud-2026 .tele-k { font-family: var(--disp); font-size: 7px; letter-spacing: .3em; color: var(--txt-faint); text-transform: uppercase; } body.hud-2026 .tele-v { font-family: var(--mono); font-size: 10.5px; color: var(--accent); } body.hud-2026 .tele-v.ok { color: var(--ok); } body.hud-2026 .tele-bars { display: flex; align-items: flex-end; gap: 2px; height: 14px; margin: 4px 0 5px; } body.hud-2026 .tele-bars i { flex: 1; background: var(--accent); opacity: .5; box-shadow: 0 0 5px var(--accent-dim); animation: tele-eq 1.6s ease-in-out infinite; transform-origin: bottom; } @keyframes tele-eq { 0%,100% { height: 18%; opacity: .35; } 50% { height: 100%; opacity: .85; } } @media (prefers-reduced-motion: reduce) { body.hud-2026 .tele-bars i { animation: none; height: 45%; } } /* ---- right ops column --------------------------------------------------- */ body.hud-2026 .map-side-dash { position: fixed; left: auto; top: var(--hud-h); right: 0; bottom: 0; width: 302px; border: none; border-left: 1px solid var(--hairline); gap: 0; padding: 0; overflow: hidden; display: flex; flex-direction: column; } body.hud-2026 .map-side-card { width: auto !important; align-self: stretch; background: none; background-image: none; border: none; border-bottom: 1px solid rgba(125,155,195,.09); border-radius: 0; padding: 11px 16px 15px; flex: none; } body.hud-2026 .map-side-card .sp-title { font-family: var(--body); font-weight: 700; font-size: 13px; letter-spacing: .22em; } body.hud-2026 .map-side-alert { background: var(--inset-fill); border: none; border-left: 2px solid var(--accent); border-radius: 0; } body.hud-2026 .map-side-alert.alert-warn { border-left-color: var(--amber); } body.hud-2026 .map-side-alert.alert-danger { border-left-color: var(--danger); } /* decrypt stream + sensor scope, injected by js into the dash's slack */ body.hud-2026 .ops-stream { flex: 1 1 0; min-height: 0; position: relative; overflow: hidden; } body.hud-2026 .ops-stream canvas { display: block; width: 100%; height: 100%; } body.hud-2026 .ops-stream-mask { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .25s; background: linear-gradient(180deg, rgba(8,12,20,.95) 0%, rgba(8,12,20,0) 26%, rgba(8,12,20,0) 62%, rgba(8,12,20,.96) 100%); } body.hud-2026 .ops-stream-tag { position: absolute; left: 16px; right: 16px; top: 8px; opacity: 0; display: flex; align-items: baseline; justify-content: space-between; pointer-events: none; transition: opacity .25s; } body.hud-2026 .ops-stream.live { border-top: 1px solid rgba(125,155,195,.09); } body.hud-2026 .ops-stream.live .ops-stream-mask, body.hud-2026 .ops-stream.live .ops-stream-tag { opacity: 1; } body.hud-2026 .ops-scope { /* No side padding: the radar fills the panel edge to edge. The head keeps its own inset below. */ flex: none; padding: 12px 0 4px; border-top: 1px solid var(--hairline); } body.hud-2026 .ops-scope-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; padding: 0 16px; } body.hud-2026 .ops-scope-stage { /* No inner border or fill box — that was the "frame inside a frame" the owner called out. The radar (drawn to the full canvas) IS the panel now; the vignette alone shapes its edges. */ position: relative; width: 100%; aspect-ratio: 1 / 0.95; overflow: hidden; background: none; border: none; } body.hud-2026 .ops-scope-stage canvas { display: block; width: 100%; height: 100%; } body.hud-2026 .ops-scope-vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle, rgba(8,12,20,0) 52%, rgba(8,12,20,.85) 88%, rgba(8,12,20,1) 100%); } /* The "Drag to spin / scroll to zoom" hint sat left of centre: its shipped `left: (100vw + nav-w - 345px) / 2` was tuned for the OLD dock, which centred itself excluding the dashboard's reserved width. This skin re- centred the dock (and the globe) on the true viewport, so the hint follows suit — dead centre, over the dock, under the planet (owner: "igazítsd abszolút középre"). */ body.hud-2026 .map-hint { left: 50vw; } /* ---- galaxy map legend -------------------------------------------------- Moved out of the map's top-left to the console's bottom-right, sitting just left of the sensor scope (owner: "helyezzük át a jobb alsó sarokba a radartól balra"), and brought into the milspec register — flat, hairline, square, Orbitron micro-heading — instead of the rounded cyan card it still was. Offsets are derived from the neighbours it must clear: the ops column is 302px on the right, the dock 84px tall at the foot. */ body.hud-2026 .map-legend { /* `fixed`, not the shipped `absolute`: absolute resolves against .map-stage, so bottom/right offsets landed it against the stage's box (measured: floating mid-screen at y≈629) rather than the console's own bottom-right corner. The neighbours it clears are fixed too. */ position: fixed; top: auto; left: auto; right: calc(302px + 12px); bottom: calc(84px + 12px); background: linear-gradient(180deg, var(--pane-a), var(--pane-b)); border: 1px solid var(--hairline); border-radius: 0; clip-path: none; backdrop-filter: blur(7px); box-shadow: 0 12px 30px rgba(0, 0, 0, .5); padding: 10px 13px; /* Sized by its CONTENT. style.css pins this to an exact 122x194 box — the owner's own concept export, "ahogy a bemásolt JSON fájlban kaptad" — with `overflow-y: auto` as its stated safety net "if a future content change doesn't fit". The grouped legend is that change (281px of rows), and this rule had ALREADY switched the net off with `overflow: visible` while leaving the fixed height in place, so the last four rows simply fell out of the panel onto the map: measured, content 281 vs box 192, last row 88px below the frame. Auto height serves the same intent better than either — nothing to clip, nothing to scroll. */ width: max-content; min-width: 122px; height: auto; max-height: none; overflow: visible; } body.hud-2026 .map-legend::before, body.hud-2026 .map-legend::after { content: none; } /* a quiet Orbitron heading, matching the ops column's own section labels */ body.hud-2026 .map-legend::first-line { letter-spacing: normal; } body.hud-2026 .map-lg { gap: 8px; margin: 2px 0; font-size: 12.5px; font-weight: 600; color: var(--txt-dim); white-space: nowrap; } body.hud-2026 .map-lg i, body.hud-2026 .map-lg span:first-child { border-radius: 0; /* square status pips, not dots */ } /* ---- bottom dock -------------------------------------------------------- */ /* the shipped dock is an SVG-framed 900x180 art panel; the 2026 dock is a flush hairline strip, so the frame art goes and the slots re-lay out */ body.hud-2026 .map-action-dock { position: fixed; left: var(--nav-w); right: 0; bottom: 0; transform: none; width: auto; aspect-ratio: auto; height: 84px; border: none; border-top: 1px solid var(--hairline); display: flex; align-items: stretch; justify-content: center; /* Centred on the VIEWPORT, not in the dock's own box. The dock starts at the rail's edge, so `justify-content: center` alone centres the buttons at (nav-w + 100vw) / 2 — pushed right of screen centre by half the rail. Padding the trailing edge by exactly --nav-w makes the content box symmetric about the viewport again. Note it is --nav-w, a constant, and never --chat-2026-w: an earlier cut reserved the live chat width here, and dragging the chat wider then shoved every dock button sideways with it (measured: the slots walked 100px on a 200px drag). The chat is an overlay and free to grow over the dock's empty left stretch instead. */ padding-left: 0; padding-right: var(--nav-w); overflow: hidden; } body.hud-2026 .map-dock-frame { display: none; } body.hud-2026 .dock-hex { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; } /* the portrait bay's own lattice, behind the portrait (which sits at z-index auto > 0 as a positioned flex child, so it stays on top) */ body.hud-2026 .crew-hex { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; } body.hud-2026 .map-dock-slot { position: relative; z-index: 1; left: auto !important; top: auto !important; transform: none; width: 86px; height: auto; aspect-ratio: auto; flex-direction: column; gap: 5px; border-right: 1px solid rgba(125,155,195,.09); background: none; } body.hud-2026 .map-dock-slot:first-of-type { border-left: 1px solid rgba(125,155,195,.09); } body.hud-2026 .map-dock-slot:hover { background-color: rgba(89,213,242,.04); } body.hud-2026 .map-dock-slot.active::before { content: ''; position: absolute; top: -1px; left: 20%; right: 20%; height: 2px; background: var(--accent); box-shadow: 0 0 12px var(--accent); } body.hud-2026 .map-dock-slot.active::after { content: ''; position: absolute; bottom: 0; left: 10%; right: 10%; height: 26px; background: radial-gradient(60% 100% at 50% 100%, rgba(89,213,242,.14), transparent); pointer-events: none; } body.hud-2026 .map-dock-glyph-wrap { width: 34px; height: 34px; } /* dock slot labels (js-injected) */ body.hud-2026 .dock-label { font-size: 10.5px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; } /* ---- comms + commander portrait: flush against the rail ----------------- */ body.hud-2026 #chat-dock { /* butts against the portrait bay, which occupies --crew-w from the rail */ left: calc(var(--nav-w) + var(--crew-w)); bottom: 0; top: auto; /* 320, not 372: the dock's button cluster is centred on the viewport now, so its leftmost slot starts at 659px — a 372px comms bay would end at 700 and clip the FLEET button. The reserve above stays 372 so the user can still drag out to that width over the dock's own empty stretch. */ width: var(--chat-2026-w, 320px); height: 84px; border: none; border-top: 1px solid var(--hairline); border-right: 1px solid var(--hairline); clip-path: none; transition: height .3s cubic-bezier(.2,.8,.2,1); display: flex; flex-direction: column; overflow: hidden; z-index: 50; } body.hud-2026 #chat-dock.open-2026 { height: var(--chat-dock-h); } body.hud-2026 #chat-dock.resizing { transition: none; } /* the portrait column becomes its own bay to the LEFT of the chat */ body.hud-2026 .chat-portrait-col { /* `top: auto` is load-bearing: style.css sets `top: 15px` on this element, and top + bottom + height together means TOP wins — the bay pinned itself under the topbar instead of to the console's foot. */ position: fixed; left: var(--nav-w); top: auto; bottom: 0; width: var(--crew-w); height: 84px; border-top: 1px solid var(--hairline); border-right: 1px solid var(--hairline); background: linear-gradient(180deg, var(--pane-a), var(--pane-b)); display: flex; align-items: center; justify-content: center; z-index: 51; } body.hud-2026 .chat-portrait-frame-img { display: none; } body.hud-2026 .chat-dock-portrait { position: relative; width: 56px; height: 56px; border: 1px solid var(--hairline-hi); border-radius: 0; object-fit: cover; object-position: center top; box-shadow: 0 0 18px rgba(89,213,242,.15); } body.hud-2026 .chat-mini-actions { display: none; } /* The chat body only exists once expanded — and it must be a normal flex child. style.css absolutely positions it (`left: 199px; top: 10px; right: 14px; bottom: 11px`), sized for the old fixed dock where the portrait column occupied the left 199px. Left as-is it covers most of the collapsed strip's header, so clicking the header to collapse the chat lands on .chat-main instead and nothing happens — the "can't shrink it back" bug. The portrait is its own fixed bay in this skin, so there's nothing to inset around. */ body.hud-2026 #chat-dock .chat-main { position: static; left: auto; top: auto; right: auto; bottom: auto; flex: 1 1 auto; min-height: 0; padding: 0 14px 12px; opacity: 0; pointer-events: none; transition: opacity .2s; } body.hud-2026 #chat-dock.open-2026 .chat-main { opacity: 1; pointer-events: auto; } /* collapsed strip header (js-injected) */ body.hud-2026 .chat-2026-head { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 15px; flex: none; cursor: pointer; user-select: none; } body.hud-2026 .chat-2026-head:hover { background: rgba(89,213,242,.035); } body.hud-2026 .chat-2026-head .dot { width: 6px; height: 6px; background: var(--ok); box-shadow: 0 0 7px var(--ok); animation: chat-blink 2.4s infinite; } @keyframes chat-blink { 0%,100% { opacity: 1; } 50% { opacity: .3; } } @media (prefers-reduced-motion: reduce) { body.hud-2026 .chat-2026-head .dot { animation: none; } } body.hud-2026 .chat-2026-head b { font-family: var(--disp); font-size: 8.5px; letter-spacing: .34em; } body.hud-2026 .chat-2026-head .preview { font-size: 13px; font-weight: 600; color: var(--txt-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; } body.hud-2026 .chat-2026-head .chev { color: var(--txt-faint); font-size: 9px; transition: transform .3s; } body.hud-2026 #chat-dock.open-2026 .chat-2026-head .chev { transform: rotate(180deg); } body.hud-2026 .chat-tab { border-radius: 0; border: none; border-bottom: 2px solid transparent; background: none; color: var(--txt-faint); clip-path: none; } body.hud-2026 .chat-tab.active { color: var(--accent); border-bottom-color: var(--accent); background: none; } /* free-resize grips (js-injected) */ body.hud-2026 .chat-grip { position: absolute; z-index: 8; } body.hud-2026 .chat-grip.edge { top: 0; left: 0; right: 16px; height: 7px; cursor: ns-resize; } body.hud-2026 .chat-grip.corner { top: 0; right: 0; width: 16px; height: 16px; cursor: nesw-resize; } body.hud-2026 .chat-grip.corner::after { content: ''; position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; border-top: 1px solid var(--txt-faint); border-right: 1px solid var(--txt-faint); transition: border-color .15s; } body.hud-2026 .chat-grip.corner:hover::after { border-color: var(--accent); } body.hud-2026 .chat-grip.edge::after { content: ''; position: absolute; top: 2px; left: 50%; transform: translateX(-50%); width: 34px; height: 2px; background: var(--txt-faint); opacity: 0; transition: opacity .15s; } body.hud-2026 .chat-grip.edge:hover::after { opacity: .8; } /* ---- content kit -------------------------------------------------------- Everything above restyles the CHROME. The page CONTENT was still shipping in the old HOLO kit — chamfered corners, 2px lit borders, glow halos, pill and roundel shapes — so the console framed a screen that didn't match it (owner: "the style and colors of these panels not aligned with our new design", pointing at the Co-Pilot card and an empire row; both are just instances of the shared kit). The chamfer is NOT a border: style.css draws it as a double-layer clip-path FILL (a ::before accent box with a ::after fill box inset by the border width), which is why `border-color`/`background` overrides on these elements are silent no-ops. Rather than fight that, this skin drives the levers the technique already exposes — accent -> a flat hairline, fill -> the pane gradient, border-w -> 1px, clip-path -> none. Same machinery, console register, no markup touched. Every rule here excludes the chrome selectors already skinned above. */ /* panels ---- */ body.hud-2026 .panel:not(.panel-framed) { background: linear-gradient(180deg, var(--pane-a), var(--pane-b)); border: 1px solid var(--hairline); border-radius: 0; box-shadow: none; backdrop-filter: blur(7px); } /* .panel::before is the shipped "light catching the top bezel" highlight — a lit edge belongs to the glass kit, not a flush console. Scoped with :not() rather than by cascade order because .panel-framed::before is the SAME pseudo-element re-purposed as the border ring: a plain `.panel::before` override here would outrank style.css's framed rule and delete that ring on every framed panel. */ body.hud-2026 .panel:not(.panel-framed)::before { display: none; } body.hud-2026 .panel-framed, body.hud-2026 .ov-colony-card { --panel-accent: var(--hairline); --panel-border-w: 1px; --panel-fill: linear-gradient(180deg, var(--pane-a), var(--pane-b)); clip-path: none; border-radius: 0; box-shadow: none; } body.hud-2026 .ov-colony-card:hover { box-shadow: none; } body.hud-2026 .ov-colony-card:hover, body.hud-2026 .panel-framed:hover { --panel-accent: var(--hairline-hi); } /* the status registers keep their colour, just at hairline weight */ body.hud-2026 .panel-danger { --panel-accent: rgba(255, 77, 93, 0.45); } body.hud-2026 .ov-colony-card.row-attn { --panel-accent: rgba(242, 160, 61, 0.5); } /* section headers ---- */ body.hud-2026 .sec-h { font-family: var(--disp); border-bottom: 1px solid var(--hairline); } /* buttons ---- */ body.hud-2026 .btn { --btn-accent: var(--hairline-hi); --btn-border-w: 1px; --btn-fill: linear-gradient(180deg, rgba(18, 26, 40, .9), rgba(10, 15, 24, .95)); clip-path: none; border-radius: 0; /* the shipped padding is asymmetric to clear the bottom-left cut — with the cut gone the label sits visibly off-centre, so it goes back level */ padding: 7px 16px; box-shadow: none; text-shadow: none; } body.hud-2026 .btn-sm { padding: 4px 10px; } body.hud-2026 .btn:hover:not(:disabled) { --btn-accent: var(--accent); --btn-fill: rgba(89, 213, 242, .14); color: #dff6ff; box-shadow: none; } body.hud-2026 .btn:active:not(:disabled) { transform: none; --btn-fill: rgba(89, 213, 242, .22); } body.hud-2026 .btn-primary { --btn-accent: var(--accent-dim); --btn-fill: rgba(89, 213, 242, .16); } body.hud-2026 .btn-ghost { --btn-accent: var(--hairline); } body.hud-2026 .btn-danger { --btn-accent: rgba(255, 77, 93, .45); --btn-fill: rgba(255, 77, 93, .1); } body.hud-2026 .btn-danger:hover:not(:disabled) { --btn-accent: var(--danger); --btn-fill: rgba(255, 77, 93, .18); color: #ffd9dc; } body.hud-2026 .danger-hover:hover:not(:disabled) { box-shadow: none !important; --btn-accent: var(--danger) !important; } /* stat blocks + the overlay box ---- */ body.hud-2026 .stat { --stat-accent: var(--hairline); --stat-border-w: 1px; --stat-fill: linear-gradient(180deg, var(--pane-a), var(--pane-b)); clip-path: none; border-radius: 0; box-shadow: none; } /* the overlay box is only reachable through Settings / Officers, never a route — the first sweep "passed" it without ever opening one */ body.hud-2026 .ov-box { --ov-accent: var(--hairline-hi); --ov-border-w: 1px; --ov-fill: linear-gradient(180deg, var(--pane-a), var(--pane-b)); clip-path: none; box-shadow: 0 24px 60px rgba(0, 0, 0, .65); } /* inputs ---- */ body.hud-2026 select, body.hud-2026 textarea, body.hud-2026 input[type="text"], body.hud-2026 input[type="password"], body.hud-2026 input[type="number"] { background: var(--inset-fill); border: 1px solid var(--hairline); border-radius: 0; } body.hud-2026 select:focus, body.hud-2026 textarea:focus, body.hud-2026 input:focus { border-color: var(--accent); box-shadow: none; } body.hud-2026 input[type="checkbox"]:not(.toggle-switch) { clip-path: none; } body.hud-2026 input[type="checkbox"]:checked:not(.toggle-switch), body.hud-2026 input[type="radio"]:checked { box-shadow: none; } body.hud-2026 input[type="checkbox"]:checked::after, body.hud-2026 input[type="radio"]:checked::after { box-shadow: none; } body.hud-2026 input[type="checkbox"].toggle-switch { border-color: var(--hairline-hi); } body.hud-2026 input[type="checkbox"].toggle-switch:checked::after { box-shadow: none; } /* the colony switcher's pill ---- */ body.hud-2026 .hud-select-btn { border-radius: 0; border-color: var(--hairline); background: var(--inset-fill); } body.hud-2026 .hud-select-btn:hover { border-color: var(--hairline-hi); } /* pills, roundels and tags — the kit's remaining soft shapes ---- */ body.hud-2026 .mini-res-cell, body.hud-2026 .ov-colony-card .mini-res-cell { border-radius: 0; background: var(--inset-fill); border: 1px solid var(--hairline); } body.hud-2026 .ov-colony-card .mini-res-cell.res-warn { border-color: rgba(242, 160, 61, .35); background: rgba(242, 160, 61, .06); } body.hud-2026 .ov-colony-card .mini-res-cell.res-danger { border-color: rgba(255, 77, 93, .35); background: rgba(255, 77, 93, .06); } /* the badge is a real status readout, so it keeps its colour — but a glowing circle is the single loudest holdover from the old kit */ body.hud-2026 .ov-colony-badge { border-radius: 0; border-width: 1px; box-shadow: none; background: var(--inset-fill); } body.hud-2026 .tag { border-radius: 0; } body.hud-2026 .info-btn { border-radius: 0; border-color: var(--hairline); } body.hud-2026 .info-btn:hover, body.hud-2026 .info-btn:focus-visible { box-shadow: none; border-color: var(--accent); } /* the overview stat strip's corner ticks + glow ---- */ body.hud-2026 .ov-stat-bar { border-bottom-color: var(--hairline); box-shadow: none; } body.hud-2026 .ov-stat-bar::before, body.hud-2026 .ov-stat-bar::after { display: none; } body.hud-2026 .ov-stat-chip { border-right-color: var(--hairline); } /* tables ---- */ body.hud-2026 .table th { border-bottom-color: var(--hairline); font-family: var(--disp); } body.hud-2026 .table td { border-bottom-color: var(--hairline); } body.hud-2026 .table tr.row-me { box-shadow: inset 2px 0 0 var(--accent); } /* ---- co-pilot appoint row ----------------------------------------------- Owner: the button a bit smaller, and "Commander name…" should fit its input. Measured as shipped: the row has 248px, the button takes 112 and the input's fixed 130px max-width leaves 107px of content box for a 129px placeholder -- clipped by 21px, which is the "Commander nam" in the screenshot. The button was also 41px tall because it WRAPPED onto two lines under the squeeze. So the button gets its natural one-line width at a smaller size (112x25 -> 94x23) and the input claims whatever is left via flex instead of a hardcoded max-width, which is what should have bounded it all along. Lives here rather than in style.css only because that file is mid-edit in another session; the numbers hold for the opt-out path too. */ body.hud-2026 .copilot-appoint { width: 100%; min-width: 0; gap: 6px; } body.hud-2026 .copilot-appoint .btn { flex: none; white-space: nowrap; font-size: 11px; padding: 4px 8px; } body.hud-2026 .copilot-compact .copilot-input { flex: 1 1 auto; min-width: 0; max-width: none; font-size: 15px; } /* ---- notification drawer + popups --------------------------------------- The content-kit pass reached .panel/.btn/.stat/.ov-box, but the drawer is built from its own `.notif-*` classes and inherits none of them, so it kept every old-kit tell: pill chips, rounded rows, a cyan-gradient header with a 0.45-alpha rule under it, and an accent halo around the whole column (owner: "a notification area még mindig a régi design jegyeit hordozza"). Toasts are here for the same reason — same kit, same miss. */ body.hud-2026 .notif-drawer { background: linear-gradient(180deg, var(--pane-a), var(--pane-b)); backdrop-filter: blur(7px); border-left: 1px solid var(--hairline-hi); /* elevation only — a modal column needs depth, it does not need to glow */ box-shadow: -14px 0 40px rgba(0, 0, 0, .6); } body.hud-2026 .notif-drawer-backdrop { background: rgba(3, 5, 9, .6); } body.hud-2026 .notif-drawer-head { background: none; border-bottom: 1px solid var(--hairline); } body.hud-2026 .notif-drawer-title { font-family: var(--disp); } body.hud-2026 .notif-drawer-close { border-radius: 0; border-color: var(--hairline); } body.hud-2026 .notif-drawer-filters, body.hud-2026 .notif-drawer-footer { border-color: var(--hairline); } /* the chips were the loudest holdover: 999px pills in a console with no other rounded control left anywhere */ body.hud-2026 .notif-filter-chip { border-radius: 0; border-color: var(--hairline); font-family: var(--disp); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; } body.hud-2026 .notif-filter-chip:hover { border-color: var(--hairline-hi); } body.hud-2026 .notif-filter-chip.active { border-color: var(--accent); background: var(--accent-soft); } body.hud-2026 .notif-row { border-radius: 0; } body.hud-2026 .notif-row.unread { background: var(--accent-soft); border-left-color: var(--accent); } /* toasts ---- */ body.hud-2026 .toast { border-radius: 0; background: linear-gradient(180deg, var(--pane-a), var(--pane-b)); border-color: var(--hairline); backdrop-filter: blur(7px); box-shadow: 0 10px 30px rgba(0, 0, 0, .55); } /* ---- centring inside circular frames ------------------------------------ Owner: content in the round frames must sit dead centre. Flex centring aligns the LINE BOX, not the ink, and ○ / ◆ / ✓ all hang high inside their own em box — the same trap the notification bell hit. Measured on an isolated clone (in situ the ring, which IS centred, diluted the reading, and a padded clip caught the neighbouring rows): all three sit ~1.2px high (dy -1.37 / -1.25 / -0.97). padding-top, not transform: the box is a fixed 22px with border-box, so padding shifts the centred CONTENT down while the circle itself stays put — nudging the element would have moved frame and glyph together and changed nothing between them. 2px lands the worst of the three at 0.37px; 3px overshoots to 1.03px the other way. Belongs in style.css with the .dir-glyph rule proper, but that file is mid-edit in another session. */ body.hud-2026 .dir-glyph { padding-top: 2px; } /* Same story on the ops column's fleet-count roundel — measured 1.28px high. Unlike .dir-glyph this pill has no fixed height (its padding IS its size), so the vertical padding is redistributed rather than added: 2/2 becomes 3/1, which moves the digit down without growing the badge. */ body.hud-2026 .map-side-card .sp-badge { padding: 3px 7px 1px; } /* ---- galaxy map toolbar -------------------------------------------------- The search box grew a box INSIDE its own box, which is my doing: the content-kit pass styles `input[type="text"]` with a border and an inset fill, and .map-search-input is exactly that — but it is deliberately bare (`border: none; background: none`) because the PILL AROUND IT is the frame. Blanket element selectors reach further than the classes you had in mind. Note the selector below is deliberately long. An attribute selector counts at CLASS strength, so `body.hud-2026 input[type="text"]` is (0,2,2) — it beats `body.hud-2026 .map-search-input` at (0,2,1), and a first fix here lost to it silently while reading as if it should work. Going through .map-search-box makes it (0,3,2). The toolbar's segmented controls were also still 20px/999px rounded — the content kit never reached them either, since they carry none of its classes. Owner: "csúnya és nem illik a jelenlegi dizájnhoz". */ body.hud-2026 .map-search-box input.map-search-input { border: none; background: none; border-radius: 0; padding: 0; } body.hud-2026 .map-search-box input.map-search-input:focus { box-shadow: none; } body.hud-2026 .map-search-box { border-radius: 0; border-color: var(--hairline); background: var(--inset-fill); padding: 6px 12px; } body.hud-2026 .map-search-box:focus-within { border-color: var(--accent); } body.hud-2026 .map-search-ic { color: var(--txt-faint); } body.hud-2026 .map-viewseg { border-radius: 0; border-color: var(--hairline); } body.hud-2026 .map-viewseg button { font-family: var(--disp); font-size: 11px; letter-spacing: .1em; background: var(--inset-fill); } body.hud-2026 .map-viewseg button + button { border-left-color: var(--hairline); } body.hud-2026 .map-viewseg button.on { background: var(--accent-soft); } /* the breadcrumb was the last rounded thing left in the toolbar row */ body.hud-2026 .map-crumb { border-radius: 0; border-color: var(--hairline); background: var(--inset-fill); font-family: var(--disp); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; } body.hud-2026 a.map-crumb:hover, body.hud-2026 .map-crumb.here { border-color: var(--hairline-hi); } /* the hover info panel rides the same kit */ body.hud-2026 .map-panel { border-radius: 0; border-color: var(--hairline); background: linear-gradient(180deg, var(--pane-a), var(--pane-b)); } /* ---- overlay body: no scroll scrim when there is no scroll --------------- .ov-body::before/::after are 24px scrims filled with --panel-solid, there so content slides UNDER the panel while scrolling instead of being hard-clipped at the edge. They paint unconditionally, so on a panel with nothing to scroll they simply cover its first and last lines of text. Measured on the Co-Pilot info panel: the body scrolls by 0px, yet its top row reads 207 and its bottom row 200 against 226 for the two rows between — the owner's "alig fér bele a text" is text being COVERED, not overflowing (scrollHeight == clientHeight, nothing is cut). Padding was the obvious fix and is the wrong one: the scrims are flow children INSIDE the scroll box, so they move down with the padding and go on covering the same first/last 24px of content — adding 24px of it changed the rows' ink by exactly zero, which is what gave the mechanism away. So gate them on the body actually scrolling; overlay.js sets .ov-scrolls off a ResizeObserver. Belongs next to .ov-body in style.css, but that file is mid-edit in another session. */ body.hud-2026 .ov-body:not(.ov-scrolls)::before, body.hud-2026 .ov-body:not(.ov-scrolls)::after { content: none; } /* ---- settings: fit every tab, no scroll -------------------------------- Owner: the Settings tabs should fit the panel without scrolling (the Display tab scrolled). Three levers, none of them cramming a single tab: a taller screen overlay (its 86vh cap left only 611px of body on a 768px screen), the accent block laid out in two columns with a smaller wheel (settings.js / accent.js — that was the 181px Display overflow), and a lighter vertical rhythm inside the tab so the shorter tabs (Graphics, Account) that overran by ~20-30px stop doing so. */ /* max-height too: .ov-box caps every overlay at 88vh, which clamped this below the height set here (measured: 634px panel on a 720px screen, not the 684 the 95vh asks for). */ body.hud-2026 .ov-screen { height: min(860px, 95vh); max-height: 95vh; } body.hud-2026 .settings-tab-panel .sec-h { margin: 4px 0 2px; } body.hud-2026 .settings-tab-panel .pad-8 { padding: 4px 6px; } /* the Graphics tab is 6 toggle rows each with a full-sentence hint — the single biggest contributor to its height. Tighten the row rhythm so every tab clears a 720px screen, not just a 768 one. */ body.hud-2026 .settings-tab-panel .settings-row { padding: 5px 8px; } body.hud-2026 .settings-tab-panel .settings-subhead { margin-top: 4px; } /* the hint had no text-align at all, so it sat hard left while every nav label above it starts at the rail's 22px indent (owner: "nincs középreigazítva") */ body.hud-2026 .nav-hint { text-align: center; padding: 6px 8px 0; } /* ---- proximity lift (js/ui/dock-magnify.js) ------------------------------ The dock's labels used to scramble on hover; the owner asked for the selected icons/buttons to be picked out a different way. That is this: the row reacts to how NEAR the pointer is, so it swells as a curve instead of one tile snapping on. The JS owns transform and publishes its own 0..1 curve as --dock-mag; everything below just rides it, so the look can change without touching the motion. */ body.hud-2026 .map-dock-slot, body.hud-2026 .bld-icon-btn { /* the lift needs somewhere to go, and a raised tile must sit ABOVE its neighbours rather than under the next one along */ will-change: transform; z-index: calc(1 + var(--dock-mag, 0) * 10); transition: border-color .16s, background .16s; } body.hud-2026 .map-dock-slot { border: 1px solid transparent; background: rgba(89, 213, 242, calc(var(--dock-mag, 0) * .10)); border-color: rgba(89, 213, 242, calc(var(--dock-mag, 0) * .45)); } body.hud-2026 .map-dock-slot .map-dock-glyph-mask { /* the glyph brightens with the same curve, so the light looks like it belongs to the tile rather than being a second, separate hover effect */ filter: drop-shadow(0 0 calc(var(--dock-mag, 0) * 9px) rgba(89, 213, 242, .8)); } body.hud-2026 .bld-icon-btn { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) calc(var(--dock-mag, 0) * 9%), var(--pane-a)), var(--pane-b)); border-color: color-mix(in srgb, var(--accent) calc(var(--dock-mag, 0) * 55%), var(--hairline)); } /* ---- directives / season stat strip ------------------------------------- Owner: "ezek a panelek még eltérnek az új stílushoz képest". The content kit reached .stat's chamfer, but not these: the strip paints two SVG corner brackets as BACKGROUND IMAGES (info-chip-corner-tl/br.svg) and kills .stat's own ::before/::after fill layers, so none of the token levers the kit drives exist here. Hence the L-shaped brackets survived on square cards. Drop the art, take the console's hairline. */ body.hud-2026 .dir-stat-strip .stat, body.hud-2026 .season-stat-strip .stat { clip-path: none; background-image: none; background-color: transparent; background: linear-gradient(180deg, var(--pane-a), var(--pane-b)); border: 1px solid var(--hairline); }