Document Infrastructure page decisions in design-decisions.md

Captures hero layout, card blending technique, and the small-infra
node-grid rationale so future pages can reuse these patterns.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BbJV5nm8KPVH1oNJYKpnoF

design-decisions.md

@@ -81,6 +81,37 @@
 - Network Traffic card has its own background image at low opacity
 - User avatar dropdown has: Profile, Appearance, Security, Help & Support, Sign Out
 
+### Infrastructure Page
+- Hero banner rendered at the **App.tsx layout level** (not per-page), so it can extend
+  behind the sticky TopBar — conditional via `showHero = location.pathname === '/infrastructure'`.
+  TopBar and the search input are transparent on hero routes so the banner shows through.
+- Hero image: `object-position: center 5%` to reveal the full arch + sky; faded out via
+  `linear-gradient` mask (vertical) + a `radial-gradient(ellipse 70% 100% at center, ...)`
+  overlay (sides/corners) — borderless, blends into page background.
+- Sub-tabs trimmed to **Overview only** (Compute → Tags are future work, not built yet).
+- Status cards: `rgba(10,10,12,0.5)` background (more transparent than other pages),
+  content centered (`justify-content/alignItems: center`) with a fixed row height (110px)
+  so there's breathing room instead of empty space below left-aligned content.
+- Middle row (`grid-cols-[1fr_1.6fr]`): **Resource Distribution** (donut) and **Node Status**
+  (server tile grid). Both use the `/blank-kpi-bg.png` background art with a `cardDim`
+  (semi-transparent dark overlay) + `cardVignette` (radial-gradient `closest-side` blend)
+  combo — keeps the background pattern visible but subdued, with borders blended rather
+  than hard-edged. Card titles are rendered as our own text, NOT baked into the image
+  (baked-in labels got covered by the dim overlay).
+- **Node Status** card: originally a world-map-style region dot plot, replaced with a
+  4-column tile grid (one tile per server, colored status dot + name) — a world map
+  didn't make sense for a small/single-site infra. Reuse this "small-scale" reasoning
+  for any future map-like cards.
+- Bottom row (`grid-cols-[1.4fr_1fr_1fr]`): Resource Trend / Cost Breakdown / Recent
+  Activity — **left plain/regular**, no dim/vignette blending (explicit user preference,
+  only the middle row gets the hero-style blend). Resource Trend uses the
+  `/archnest-network-traffic-bg.png` background (plain, no dim/vignette) with 4 trend
+  lines: blue `#3B82F6` (compute), orange `#E67E22` (storage), green `#2ECC71` (database),
+  brown `#8B5E3C` (network).
+- `cardVignette` radial-gradient must use the `closest-side` keyword (not a fixed `%`)
+  — otherwise straight edges of the card don't reach full opacity and a hard border line
+  remains visible (only corners fade correctly with a fixed percentage).
+
 ---
 
 ## Future Integration Notes