/* ============================================================ SuperStatus tactical-HUD design system — issue #95 mockup CSS This file is the source for the proposed wwwroot/hud-theme.css. ============================================================ */ :root { /* Canvas */ --bg-0: #0d0e10; --bg-1: #131418; --bg-2: #1a1c21; /* Text */ --text-1: #e8e9ec; --text-2: #a7abb3; --text-3: #6f747d; /* Glass surfaces */ --glass: rgba(255, 255, 255, 0.022); --glass-strong: rgba(255, 255, 255, 0.035); /* Hairlines */ --line: rgba(255, 255, 255, 0.08); --line-strong: rgba(255, 255, 255, 0.14); /* Brand accent — PROPOSAL: desaturated tactical green. Distinct from Portamedia red; "operational/status" semantic. */ --accent: #3fbf6f; --accent-soft: rgba(63, 191, 111, 0.55); --accent-glow: rgba(63, 191, 111, 0.20); /* Semantic status — INDEPENDENT of brand accent */ --status-up: #3fbf6f; --status-degraded: #f59e0b; --status-down: #c02020; --status-unknown: #6f747d; /* Type */ --font-mono: "JetBrains Mono", "Fira Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; --font-display: var(--font-mono); /* Spacing scale (4px) */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; /* Content width — one cap for every page's content column + top-level frames so panels line up across home / detail / operator console (#159 Phase 1). */ --content-max: 1200px; } /* Issue #177: light theme. Only the neutral chrome flips — the operator accent and the semantic status colours (up/degraded/down) stay load-bearing on both themes. Activated by data-theme="light" on (set pre-paint by the bootstrap in App.razor, toggled by wwwroot/js/hud-theme.js). Dark is the default :root above (data-theme="dark" or unset). */ :root[data-theme="light"] { --bg-0: #f3f5f8; --bg-1: #ffffff; --bg-2: #e9ecf1; --text-1: #14171c; --text-2: #495059; --text-3: #767c86; --glass: rgba(15, 23, 42, 0.030); --glass-strong: rgba(15, 23, 42, 0.055); --line: rgba(15, 23, 42, 0.12); --line-strong: rgba(15, 23, 42, 0.22); /* Deepen the accent so green-on-white text/borders stay legible. */ --accent: #1f9d54; --accent-soft: rgba(31, 157, 84, 0.45); --accent-glow: rgba(31, 157, 84, 0.14); --status-up: #1f9d54; --status-degraded: #c2791b; --status-down: #c02020; --status-unknown: #767c86; } /* Tone the canvas grain down on light (the dark radial tints read as smudges on a near-white background). */ :root[data-theme="light"] body { background-image: radial-gradient(ellipse 1200px 700px at 20% -10%, rgba(31,157,84,0.05), transparent 60%), radial-gradient(ellipse 900px 600px at 110% 110%, rgba(192,32,32,0.035), transparent 60%); } /* ---------- reset / base ---------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg-0); color: var(--text-1); font-family: var(--font-mono); font-size: 13px; line-height: 1.5; letter-spacing: 0.01em; min-height: 100vh; /* atmospheric grain on the canvas */ background-image: radial-gradient(ellipse 1200px 700px at 20% -10%, rgba(63,191,111,0.06), transparent 60%), radial-gradient(ellipse 900px 600px at 110% 110%, rgba(192,32,32,0.04), transparent 60%); background-attachment: fixed; } ::selection { background: var(--accent-soft); color: var(--bg-0); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 4px; } /* ---------- layout shell ---------- */ /* The footer is the third grid row (`auto`), so with the 1fr `main` row the shell is exactly one viewport tall when content is short — the footer sticks to the bottom and there's no phantom scroll past empty space; when content overflows, `main` grows and the footer flows below it. */ .app { display: grid; grid-template-columns: 240px 1fr; grid-template-rows: 56px 1fr auto; min-height: 100vh; grid-template-areas: "topbar topbar" "nav main" "footer footer"; } /* Issue #169: public shell — no nav rail/drawer. Single content column at every width (the admin console keeps the two-column nav layout). Same shape the ≤900px collapse already uses, generalized to "no nav". */ .app-public { grid-template-columns: 1fr; grid-template-areas: "topbar" "main" "footer"; } .topbar { grid-area: topbar; background: var(--bg-1); border-bottom: 1px solid var(--line); display: flex; align-items: center; padding: 0 var(--s-5); gap: var(--s-5); position: sticky; top: 0; z-index: 10; } .topbar .brand { display: flex; align-items: center; gap: var(--s-3); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; } .topbar .brand .logo { width: 22px; height: 22px; border: 1.5px solid var(--accent); position: relative; display: inline-block; } .topbar .brand .logo::before, .topbar .brand .logo::after { content: ""; position: absolute; background: var(--accent); width: 6px; height: 1.5px; } .topbar .brand .logo::before { top: 50%; left: -3px; transform: translateY(-50%); } .topbar .brand .logo::after { top: 50%; right: -3px; transform: translateY(-50%); } .topbar .brand .name { color: var(--text-1); } .topbar .brand .name em { font-style: normal; color: var(--accent); } .topbar .clock { margin-left: auto; display: flex; align-items: center; gap: var(--s-3); font-size: 11px; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.14em; } .topbar .clock .led { width: 8px; height: 8px; border-radius: 50%; background: var(--status-up); box-shadow: 0 0 8px var(--status-up); } .nav { grid-area: nav; background: var(--bg-1); border-right: 1px solid var(--line); padding: var(--s-5) var(--s-3); display: flex; flex-direction: column; gap: var(--s-1); position: sticky; top: 56px; align-self: start; height: calc(100vh - 56px); } .nav .nav-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--text-3); padding: var(--s-3) var(--s-3) var(--s-1); } .nav a { color: var(--text-2); padding: var(--s-2) var(--s-3); display: flex; align-items: center; gap: var(--s-3); border-left: 2px solid transparent; text-transform: uppercase; letter-spacing: 0.08em; font-size: 12px; text-decoration: none; } .nav a:hover { color: var(--text-1); background: var(--glass); } .nav a.active { color: var(--accent); border-left-color: var(--accent); background: var(--glass-strong); } .main { grid-area: main; padding: var(--s-6) var(--s-7); /* #175: centre the capped content in its column (the public shell is full width since #169; admin centres within the post-nav column). */ max-width: var(--content-max); width: 100%; margin-inline: auto; /* A grid item defaults to min-width:auto (= min-content), which lets the main column size to its widest content instead of the track — the root of the narrow-viewport horizontal overflow (#152 Phase 2). 0 pins it to the grid track so content reflows within the viewport. */ min-width: 0; } /* ---------- panel primitive ---------- */ .frame { position: relative; } .panel { position: relative; background: var(--glass); border: 1px solid var(--line); padding: var(--s-5); backdrop-filter: blur(8px); } .panel + .panel { margin-top: var(--s-4); } /* ---------- section rhythm ---------- */ /* One uniform vertical cadence for stacked sections, shared by the public dashboard (.home, in Home.razor.css) and the operator console. The flex gap owns ALL inter-section spacing; an .admin-section groups a callsign header with its panel so the header hugs the panel (12px) while whole sections stay 32px apart. Global (not scoped) so /admin and the /ui-gallery operator preview render the same rhythm. */ .admin-console { max-width: var(--content-max); margin: 0 auto; display: flex; flex-direction: column; gap: var(--s-6); } .admin-section { display: flex; flex-direction: column; gap: var(--s-3); } /* Spacing is owned by the gaps above — neutralize the legacy per-panel top-margins (the old .admin-frame rule + the .panel + .panel adjacency) so they don't stack on top of the flex gap. */ .admin-console .admin-frame, .admin-console .panel + .panel { margin-top: 0; } /* Corner brackets — span the 4 corners, accent color */ .cnr { position: absolute; width: 14px; height: 14px; pointer-events: none; } .cnr.tl { top: -1px; left: -1px; border-top: 1.5px solid var(--accent); border-left: 1.5px solid var(--accent); } .cnr.tr { top: -1px; right: -1px; border-top: 1.5px solid var(--accent); border-right: 1.5px solid var(--accent); } .cnr.bl { bottom: -1px; left: -1px; border-bottom: 1.5px solid var(--accent); border-left: 1.5px solid var(--accent); } .cnr.br { bottom: -1px; right: -1px; border-bottom: 1.5px solid var(--accent); border-right: 1.5px solid var(--accent); } /* Critical variant — for incident detail panels only */ .panel.critical .cnr.tl, .panel.critical .cnr.tr, .panel.critical .cnr.bl, .panel.critical .cnr.br { border-color: var(--status-down); } /* White variant — reserved for the primary frame on the page */ .panel.primary .cnr.tl, .panel.primary .cnr.tr, .panel.primary .cnr.bl, .panel.primary .cnr.br { border-color: var(--text-1); } /* ---------- tag chip ---------- */ .tag { display: inline-flex; align-items: center; gap: var(--s-2); font-size: 10px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--text-2); border: 1px solid var(--line); padding: 2px 8px; background: var(--bg-2); } .tag .led { width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); } .tag .led.up { background: var(--status-up); box-shadow: 0 0 6px var(--status-up); animation: pulse 2s ease-in-out infinite; } .tag .led.degraded { background: var(--status-degraded); box-shadow: 0 0 6px var(--status-degraded); } .tag .led.down { background: var(--status-down); box-shadow: 0 0 8px var(--status-down); animation: pulse 1s ease-in-out infinite; } .tag .led.unknown { background: var(--status-unknown); } .tag .sep { color: var(--text-3); } .tag.accent { color: var(--accent); border-color: var(--accent-soft); } .tag.critical { color: var(--status-down); border-color: var(--status-down); } @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.65; transform: scale(0.92); } } /* ---------- callsign / page header ---------- */ .callsign { display: flex; align-items: baseline; gap: var(--s-3); margin-bottom: var(--s-3); } .callsign .label { font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.18em; } .callsign .sep { color: var(--text-3); } .callsign .value { font-size: 20px; color: var(--text-1); font-weight: 600; letter-spacing: 0.04em; } .callsign .meta { margin-left: auto; font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.14em; } /* ---------- telemetry strip ---------- */ .telemetry-strip { display: flex; gap: var(--s-3); flex-wrap: wrap; padding: var(--s-3) 0; border-top: 1px dashed var(--line); border-bottom: 1px dashed var(--line); margin: var(--s-4) 0; } .telemetry-strip .chip { display: flex; flex-direction: column; border: 1px dashed var(--line); padding: var(--s-2) var(--s-4); min-width: 120px; } .telemetry-strip .chip .k { font-size: 10px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.16em; } .telemetry-strip .chip .v { font-size: 18px; color: var(--text-1); font-weight: 600; margin-top: 2px; font-variant-numeric: tabular-nums; /* A chip value can be a long URL (e.g. the detail ENDPOINT chip) — let it break instead of forcing the chip/strip wider than the viewport (#152). */ min-width: 0; overflow-wrap: anywhere; } .telemetry-strip .chip .v.accent { color: var(--accent); } .telemetry-strip .chip .v.degraded { color: var(--status-degraded); } .telemetry-strip .chip .v.critical { color: var(--status-down); } /* ---------- KV rows ---------- */ .kv { display: grid; /* minmax(0, …) on both tracks so a long unbreakable value (e.g. a check URL) can't set a min-content floor wider than the container (#152 Phase 2). */ grid-template-columns: minmax(0, 1fr) minmax(0, auto); gap: var(--s-2) var(--s-4); } .kv > .k { color: var(--text-2); font-size: 12px; text-transform: uppercase; letter-spacing: 0.10em; border-bottom: 1px dotted var(--line); padding-bottom: var(--s-2); display: flex; align-items: center; gap: var(--s-3); min-width: 0; } .kv > .v { color: var(--text-1); font-size: 13px; font-variant-numeric: tabular-nums; border-bottom: 1px dotted var(--line); padding-bottom: var(--s-2); text-align: right; min-width: 0; overflow-wrap: anywhere; } .kv > .v.up { color: var(--status-up); } .kv > .v.degraded { color: var(--status-degraded); } .kv > .v.down { color: var(--status-down); } .kv > .k .led { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); flex: 0 0 auto; } .kv > .k .led.up { background: var(--status-up); box-shadow: 0 0 8px var(--status-up); animation: pulse 2.5s ease-in-out infinite; } .kv > .k .led.degraded { background: var(--status-degraded); box-shadow: 0 0 8px var(--status-degraded); } .kv > .k .led.down { background: var(--status-down); box-shadow: 0 0 10px var(--status-down); animation: pulse 1s ease-in-out infinite; } /* ---------- 30-day uptime strip (one bar per day) ---------- */ .uptime-strip { display: grid; grid-template-columns: repeat(30, 1fr); gap: 2px; margin-top: var(--s-2); } .uptime-strip .day { height: 22px; background: var(--status-up); opacity: 0.85; } .uptime-strip .day.degraded { background: var(--status-degraded); } .uptime-strip .day.down { background: var(--status-down); } .uptime-strip .day.gap { background: var(--bg-2); border: 1px solid var(--line); opacity: 1; } .uptime-strip .day:hover { opacity: 1; outline: 1px solid var(--text-1); } /* #201: interactive cells anchor a lazily-loaded hover/focus detail popover. */ .uptime-strip.interactive .day { position: relative; cursor: help; } .uptime-strip.interactive .day:focus-visible { outline: 1.5px solid var(--accent); outline-offset: 1px; } .uptime-strip .day-popover { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); z-index: 40; min-width: 150px; max-width: 230px; padding: var(--s-3, 12px); background: var(--bg-1); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; font-family: var(--font-mono); font-size: 11px; line-height: 1.5; color: var(--text-2); text-align: left; white-space: nowrap; box-shadow: 0 8px 28px rgba(0,0,0,0.45); pointer-events: none; /* purely informational; never intercepts the hover */ } .uptime-strip .day-popover::after { /* little downward pointer */ content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--line); } .uptime-strip .day-popover .dp-head { color: var(--text-1); font-weight: 600; margin-bottom: 2px; } .uptime-strip .day-popover .dp-total { color: var(--text-3); } .uptime-strip .day-popover .dp-status.up { color: var(--status-up); } .uptime-strip .day-popover .dp-status.degraded { color: var(--status-degraded); } .uptime-strip .day-popover .dp-status.down { color: var(--status-down); } .uptime-strip .day-popover .dp-empty, .uptime-strip .day-popover .dp-loading { color: var(--text-3); } .uptime-legend { display: flex; gap: var(--s-4); margin-top: var(--s-2); font-size: 10px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.14em; } .uptime-legend span::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: var(--s-2); vertical-align: middle; } .uptime-legend .up::before { background: var(--status-up); } .uptime-legend .degraded::before { background: var(--status-degraded); } .uptime-legend .down::before { background: var(--status-down); } /* ---------- service row (for Home list) ---------- */ .service-list { display: flex; flex-direction: column; gap: var(--s-3); } .service-row { display: grid; /* minmax(0, …) lets the flexible tracks shrink below their content's min-content (a long unbreakable service URL would otherwise force the row — and the whole page — wider than the viewport on narrow screens). */ grid-template-columns: 24px minmax(0, 1.5fr) 1fr minmax(0, 1.5fr) auto; gap: var(--s-4); align-items: center; padding: var(--s-3) var(--s-4); background: var(--bg-1); border: 1px solid var(--line); border-left-width: 2px; border-left-color: var(--text-3); } .service-row.up { border-left-color: var(--status-up); } .service-row.degraded { border-left-color: var(--status-degraded); } .service-row.down { border-left-color: var(--status-down); } .service-row .led { width: 10px; height: 10px; border-radius: 50%; background: var(--text-3); } .service-row.up .led { background: var(--status-up); box-shadow: 0 0 8px var(--status-up); animation: pulse 2.5s ease-in-out infinite; } .service-row.degraded .led { background: var(--status-degraded); box-shadow: 0 0 8px var(--status-degraded); } .service-row.down .led { background: var(--status-down); box-shadow: 0 0 10px var(--status-down); animation: pulse 1s ease-in-out infinite; } .service-row .title { display: flex; flex-direction: column; min-width: 0; /* allow the grid track to shrink; enables ellipsis below */ } .service-row .title .name, .service-row .title .url { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .service-row .title .name { color: var(--text-1); font-size: 14px; font-weight: 500; } .service-row .title .url { color: var(--text-3); font-size: 11px; } .service-row .stat { font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.12em; } .service-row .stat .v { display: block; color: var(--text-1); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; text-transform: none; letter-spacing: 0; margin-top: 2px; } .service-row .stat .v.accent { color: var(--accent); } .service-row .stat .v.down { color: var(--status-down); } .service-row .strip { display: grid; grid-template-columns: repeat(30, 1fr); gap: 1px; width: 100%; } .service-row .strip .day { height: 18px; background: var(--status-up); opacity: 0.85; } .service-row .strip .day.degraded { background: var(--status-degraded); } .service-row .strip .day.down { background: var(--status-down); } .service-row .actions { font-size: 18px; color: var(--text-3); cursor: pointer; } .service-row .actions:hover { color: var(--text-1); } /* ---------- incident card ---------- */ .incident { border: 1px solid var(--line); background: var(--bg-1); padding: var(--s-4); } .incident.severe { border-color: var(--status-down); background: rgba(192,32,32,0.05); } .incident.minor { border-color: var(--status-degraded); background: rgba(245,158,11,0.04); } .incident.resolved { opacity: 0.7; } .incident .head { display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; /* let the timestamp drop below on narrow widths (#152) */ } .incident .head .title { color: var(--text-1); font-size: 14px; font-weight: 600; min-width: 0; overflow-wrap: anywhere; } .incident .head .time { margin-left: auto; font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.14em; } .incident p { color: var(--text-2); font-size: 12px; margin: var(--s-2) 0 0; } .incident-day { font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.18em; padding: var(--s-4) 0 var(--s-2); border-bottom: 1px dashed var(--line); margin-bottom: var(--s-3); } /* ---------- buttons / actions ---------- */ .btn { display: inline-flex; align-items: center; gap: var(--s-2); font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-1); background: transparent; border: 1px solid var(--line-strong); padding: var(--s-2) var(--s-4); cursor: pointer; } .btn:hover { border-color: var(--accent); color: var(--accent); } .btn.primary { border-color: var(--accent); color: var(--accent); } .btn.primary:hover { background: var(--accent-glow); } .btn.danger { border-color: var(--status-down); color: var(--status-down); } /* ---------- forms (admin) ---------- */ .field { display: flex; flex-direction: column; gap: var(--s-2); margin-bottom: var(--s-4); } .field label { font-size: 10px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.18em; } .field input, .field select, .field textarea { background: var(--bg-2); border: 1px solid var(--line); color: var(--text-1); font-family: var(--font-mono); font-size: 13px; padding: var(--s-2) var(--s-3); outline: none; } .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); } /* ---------- responsive ---------- */ /* Off-canvas drawer backdrop (#152 Phase 1). Display:none on desktop; the ≤900px block turns it into a fixed scrim below the topbar. */ .nav-backdrop { display: none; position: fixed; inset: 56px 0 0 0; z-index: 35; background: rgba(0, 0, 0, 0.55); opacity: 0; visibility: hidden; transition: opacity 180ms ease; } body.nav-scroll-lock { overflow: hidden; } @media (max-width: 900px) { .app { grid-template-columns: 1fr; grid-template-areas: "topbar" "main" "footer"; } .main { padding: var(--s-4) var(--s-4); } /* Tablet band (#152 Phase 2): keep the signature 30-day strip, drop the lower-priority latency stat so the row breathes instead of cramping. */ .service-row { grid-template-columns: 24px minmax(0, 1.5fr) minmax(0, 1.5fr) auto; } .service-row .stat:nth-child(3) { display: none; } /* The sidebar becomes an off-canvas drawer. position:fixed takes it out of the grid flow (the grid no longer defines a nav area at this width), and visibility:hidden keeps its links out of the tab order while closed. */ .nav { position: fixed; top: 56px; left: 0; z-index: 40; width: 260px; max-width: 82vw; height: calc(100vh - 56px); height: calc(100dvh - 56px); overflow-y: auto; transform: translateX(-100%); transition: transform 180ms ease; visibility: hidden; border-right: 1px solid var(--line-strong); box-shadow: 2px 0 18px rgba(0, 0, 0, 0.55); } .app.nav-open .nav { transform: translateX(0); visibility: visible; } /* Drawer links are touch targets here — give them a ≥44px hit height (#152 Phase 3 a11y). The desktop rail keeps its compact rows. */ .nav a { min-height: 44px; } .nav-backdrop { display: block; } .app.nav-open .nav-backdrop { opacity: 1; visibility: visible; } } /* Mobile content compaction (#152 Phase 2): below 600px tighten paddings, collapse the service row to its essentials, pack the hero chips two-up, and let the page header wrap — so everything fits cleanly down to 320px. */ @media (max-width: 600px) { .main { padding: var(--s-3) var(--s-3); } /* Mobile row: LED + name + actions; the 30-day strip drops here. */ .service-row { grid-template-columns: 24px minmax(0, 1fr) auto; gap: var(--s-3); } .service-row .strip { display: none; } /* Hero telemetry: a 2-column grid (not flex-basis math, which a chip's padding defeats without border-box → chips fall to full width). Grid tracks are border-box and honor min-width:0, so two always fit. */ .telemetry-strip { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); } .telemetry-strip .chip { min-width: 0; padding: var(--s-2) var(--s-3); } .telemetry-strip .chip .v { font-size: 16px; } /* Page header wraps rather than pushing the meta off-screen. A long, unbreakable service URL in .value/.meta would otherwise set a min-content floor wider than the viewport — overflow-wrap:anywhere lets it break. */ .callsign { flex-wrap: wrap; } .callsign .value { font-size: 16px; min-width: 0; overflow-wrap: anywhere; } .callsign .meta { margin-left: 0; flex-basis: 100%; min-width: 0; overflow-wrap: anywhere; } /* Section headers (title + action) stack instead of forcing a wide row. */ .section-head { flex-wrap: wrap; } } /* Motion preference */ @media (prefers-reduced-motion: reduce) { .led, .tag .led, .service-row .led, .kv > .k .led { animation: none !important; } .nav, .nav-backdrop { transition: none; } } /* ---------- background canvas (atmospheric data flow) ---------- */ .bg-flow { position: fixed; inset: 0; pointer-events: none; z-index: 0; background-image: linear-gradient(90deg, transparent 0%, transparent calc(50% - 1px), rgba(63,191,111,0.04) 50%, transparent calc(50% + 1px), transparent 100%), linear-gradient(0deg, transparent 0%, transparent calc(50% - 1px), rgba(63,191,111,0.04) 50%, transparent calc(50% + 1px), transparent 100%); background-size: 100px 100px; mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%); opacity: 0.45; } .app { position: relative; z-index: 1; } /* ============================================================ MudBlazor + Fluent UI token remap — Phase 1 (#95). Issue calls this out: "Fluent / Mud components automatically pick up the new palette but layouts are still the same." ============================================================ */ :root { /* MudBlazor palette */ --mud-palette-background: var(--bg-0); --mud-palette-background-grey: var(--bg-1); --mud-palette-surface: var(--bg-1); --mud-palette-drawer-background: var(--bg-1); --mud-palette-appbar-background: var(--bg-1); --mud-palette-primary: var(--accent); --mud-palette-primary-text: var(--bg-0); --mud-palette-secondary: var(--text-2); --mud-palette-success: var(--status-up); --mud-palette-warning: var(--status-degraded); --mud-palette-error: var(--status-down); --mud-palette-text-primary: var(--text-1); --mud-palette-text-secondary: var(--text-2); --mud-palette-text-disabled: var(--text-3); --mud-palette-divider: var(--line); --mud-palette-divider-light: var(--line-strong); --mud-palette-action-default: var(--text-2); --mud-palette-lines-default: var(--line); --mud-palette-table-lines: var(--line); /* FluentUI tokens — used by Microsoft.FluentUI.AspNetCore.Components */ --neutral-foreground-rest: var(--text-1); --neutral-foreground-hover: var(--text-1); --neutral-foreground-active: var(--accent); --neutral-foreground-secondary: var(--text-2); --neutral-layer-1: var(--bg-1); --neutral-layer-2: var(--bg-2); --neutral-layer-3: var(--bg-2); --neutral-layer-4: var(--bg-1); --neutral-fill-rest: var(--glass); --neutral-fill-hover: var(--glass-strong); --neutral-stroke-rest: var(--line); --neutral-stroke-strong-rest: var(--line-strong); --accent-fill-rest: var(--accent); --accent-fill-hover: var(--accent-soft); } /* ============================================================ Service card inside HudPanel (#95 Phase 3c fix). The scoped neutraliser in StatusCheckOverviewCard.razor.css can't reach the MudCard because the component root is now the HudPanel child, so the neutralisation lives here, globally. The HudPanel frame is the only surface — the inner MudCard must be fully transparent. ============================================================ */ .service-card-frame .service-card-inner.mud-card, .service-card-frame .mud-card { background: transparent !important; background-color: transparent !important; box-shadow: none !important; border: none !important; border-radius: 0 !important; } /* History strip sits flush under the header; give it a little breathing room. */ .service-card-frame .card-history-strip { margin-top: var(--s-3, 12px); } /* Tame the poll-countdown progress bar into a hairline accent track. */ .service-card-frame .mud-progress-linear { height: 2px !important; background: var(--line) !important; } .service-card-frame .mud-progress-linear .mud-progress-linear-bar { background: var(--accent-soft) !important; } /* Header avatar: drop the grey filled circle for a hairline tile. */ .service-card-frame .mud-avatar { background: var(--bg-2) !important; border: 1px solid var(--line) !important; color: var(--text-2) !important; }