From c2aeaa12025d295a852bb84474a241d12afd7924 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 18 Jun 2026 17:28:52 +0000
Subject: [PATCH] Revert status row to plain cards and dim middle-row KPI
 backgrounds

The blank KPI background didn't read well on the top status row, so
revert those to the plain card style. Add a dimming overlay to the
Resource Distribution and Infrastructure Map backgrounds to reduce
visual clutter in the middle row.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BbJV5nm8KPVH1oNJYKpnoF
---
 src/pages/Infrastructure.tsx | 28 +++++++++++++++++-----------
 1 file changed, 17 insertions(+), 11 deletions(-)

diff --git a/src/pages/Infrastructure.tsx b/src/pages/Infrastructure.tsx
index d426b0e..7a376f1 100644
--- a/src/pages/Infrastructure.tsx
+++ b/src/pages/Infrastructure.tsx
@@ -87,6 +87,13 @@ const cardVignette: React.CSSProperties = {
   background: 'radial-gradient(ellipse closest-side at center, transparent 70%, var(--color-page) 100%)',
 }
 
+const cardDim: React.CSSProperties = {
+  position: 'absolute',
+  inset: 0,
+  pointerEvents: 'none',
+  backgroundColor: 'rgba(8, 8, 10, 0.45)',
+}
+
 const distributionData = [
   { name: 'Compute', value: 42, color: '#C8A434' },
   { name: 'Storage', value: 28, color: '#E67E22' },
@@ -178,18 +185,15 @@ export default function Infrastructure() {
         {statusCards.map((card) => {
           const Icon = card.icon
           return (
-            <div key={card.label} style={{ ...framedCard('/blank-kpi-bg.png'), padding: '16px' }}>
-              <div style={cardVignette} />
-              <div className="relative z-10">
-                <h3 style={{ fontSize: '10px', textTransform: 'uppercase', letterSpacing: '1.5px', color: '#7A7D85', fontWeight: 500, marginBottom: '8px' }}>
-                  {card.label}
-                </h3>
-                <div className="flex items-center gap-2">
-                  <Icon size={16} style={{ color: card.color ?? '#C8A434' }} />
-                  <span style={{ fontSize: '22px', fontWeight: 700, color: '#E8E6E0', lineHeight: 1 }}>{card.value}</span>
-                </div>
-                <p style={{ fontSize: '10px', color: card.color ?? '#7A7D85', marginTop: '6px' }}>{card.sub}</p>
+            <div key={card.label} style={{ ...cardBase, padding: '16px' }} className="hover:!border-gold/20">
+              <h3 style={{ fontSize: '10px', textTransform: 'uppercase', letterSpacing: '1.5px', color: '#7A7D85', fontWeight: 500, marginBottom: '8px' }}>
+                {card.label}
+              </h3>
+              <div className="flex items-center gap-2">
+                <Icon size={16} style={{ color: card.color ?? '#C8A434' }} />
+                <span style={{ fontSize: '22px', fontWeight: 700, color: '#E8E6E0', lineHeight: 1 }}>{card.value}</span>
               </div>
+              <p style={{ fontSize: '10px', color: card.color ?? '#7A7D85', marginTop: '6px' }}>{card.sub}</p>
             </div>
           )
         })}
@@ -200,6 +204,7 @@ export default function Infrastructure() {
         <div className="grid h-full w-full grid-cols-[1fr_1.6fr] gap-6">
           {/* Resource Distribution */}
           <div style={framedCard('/resource-distrabution-bg.png')}>
+            <div style={cardDim} />
             <div style={cardVignette} />
             <div className="relative z-10 flex flex-1 flex-col items-center justify-center">
               <Donut data={distributionData} />
@@ -208,6 +213,7 @@ export default function Infrastructure() {
 
           {/* Infrastructure Map — expanded */}
           <div style={framedCard('/infra-map-kpi.png')}>
+            <div style={cardDim} />
             <div style={cardVignette} />
             <div className="relative z-10 flex flex-1 flex-col">
               <div className="relative flex-1" style={{ minHeight: '140px' }}>