From ef6ffb24268bc71f82d69f6f3280b24d189e8fd7 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 18 Jun 2026 17:47:09 +0000
Subject: [PATCH] Restore dim/vignette blend on middle row cards only

Resource Trend stays plain per clarification; only Resource Distribution
and Infrastructure Map get the hero-style blend.

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

diff --git a/src/pages/Infrastructure.tsx b/src/pages/Infrastructure.tsx
index b54219d..53bbd1e 100644
--- a/src/pages/Infrastructure.tsx
+++ b/src/pages/Infrastructure.tsx
@@ -81,6 +81,20 @@ function framedCard(bgUrl: string): React.CSSProperties {
   }
 }
 
+const cardVignette: React.CSSProperties = {
+  position: 'absolute',
+  inset: 0,
+  pointerEvents: 'none',
+  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' },
@@ -195,6 +209,8 @@ export default function Infrastructure() {
         <div className="grid h-full w-full grid-cols-[1fr_1.6fr] gap-6">
           {/* Resource Distribution */}
           <div style={framedCard('/blank-kpi-bg.png')}>
+            <div style={cardDim} />
+            <div style={cardVignette} />
             <div className="relative z-10 flex flex-1 flex-col">
               <h3 style={sectionTitle}>Resource Distribution</h3>
               <div className="flex flex-1 flex-col items-center justify-center">
@@ -205,6 +221,8 @@ export default function Infrastructure() {
 
           {/* Infrastructure Map — expanded */}
           <div style={framedCard('/blank-kpi-bg.png')}>
+            <div style={cardDim} />
+            <div style={cardVignette} />
             <div className="relative z-10 flex flex-1 flex-col">
               <h3 style={sectionTitle}>Infrastructure Map</h3>
               <div className="relative flex-1" style={{ minHeight: '140px' }}>