Remove hero-style vignette/dim from middle row and Resource Trend cards

Leave the card backgrounds plain/regular instead of blending them like
the hero banner.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BbJV5nm8KPVH1oNJYKpnoF
This commit is contained in:
Claude 2026-06-18 17:43:28 +00:00
parent fe9e2ab62a
commit 107bf2e1ba
No known key found for this signature in database

View file

@ -81,20 +81,6 @@ 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' },
@ -209,8 +195,6 @@ 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">
@ -221,8 +205,6 @@ 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' }}>
@ -243,8 +225,6 @@ export default function Infrastructure() {
<div className="grid w-full grid-cols-[1.4fr_1fr_1fr] gap-6">
{/* Resource Trend */}
<div style={{ ...cardBase, height: 'auto', ...framedCard('/archnest-network-traffic-bg.png'), padding: '20px' }} className="hover:!border-gold/15">
<div style={cardDim} />
<div style={cardVignette} />
<div className="relative z-10">
<h3 style={sectionTitle}>Resource Trend</h3>
<div style={{ height: '100px' }}>