From 1481b9e39c7a9b6f39d5660abe2239863825c14f Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 18 Jun 2026 17:32:11 +0000
Subject: [PATCH] Use blank KPI background with overlaid titles for middle-row
 cards

The baked-in labels on the Resource Distribution and Infrastructure Map
background art were getting covered by the dim/shadow overlay, so switch
both cards to the blank KPI background and render the title as our own
text element on top instead.

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

diff --git a/src/pages/Infrastructure.tsx b/src/pages/Infrastructure.tsx
index 7a376f1..8e5119a 100644
--- a/src/pages/Infrastructure.tsx
+++ b/src/pages/Infrastructure.tsx
@@ -203,19 +203,23 @@ export default function Infrastructure() {
       <div className="min-h-0 flex-1">
         <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={framedCard('/blank-kpi-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} />
+            <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">
+                <Donut data={distributionData} />
+              </div>
             </div>
           </div>
 
           {/* Infrastructure Map — expanded */}
-          <div style={framedCard('/infra-map-kpi.png')}>
+          <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' }}>
                 <Globe2 size={160} strokeWidth={0.6} style={{ position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%, -50%)', color: 'rgba(200,164,52,0.08)' }} />
                 {regions.map((r) => (