diff --git a/dashboard-mockup.html b/dashboard-mockup.html
index 630f85f..eeeca43 100644
--- a/dashboard-mockup.html
+++ b/dashboard-mockup.html
@@ -105,43 +105,48 @@ body {
.tab-btn.active::after { transform: scaleX(1); }
.tab-label { display: flex; align-items: center; gap: 8px; }
-/* KPI GRID — IBM Carbon style: single border around all */
+/* KPI GRID — Bloomberg ticker style */
.kpi-grid {
display: grid; grid-template-columns: repeat(6, 1fr);
- gap: 1px; padding: 0; max-width: 1280px; margin: 0 auto;
- background: var(--border); border: 1px solid var(--border);
- border-radius: 4px; overflow: hidden;
+ gap: 10px; padding: 0;
+ max-width: 1280px; margin: 0 auto;
}
.kpi {
- background: var(--surface);
- padding: 20px 24px;
+ background: #121212;
+ border: 1px solid #2a2a2a;
+ border-radius: 6px;
+ padding: 14px 16px;
position: relative;
- transition: background 0.15s;
+ transition: all 0.2s var(--ease);
opacity: 0; transform: translateY(8px);
}
.kpi.visible { opacity: 1; transform: translateY(0); }
-.kpi:hover { background: var(--surface-hover); }
-.kpi-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
+.kpi:hover {
+ border-color: #3a3a3a;
+ background: #181818;
+ transform: translateY(-1px);
+}
+.kpi-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.kpi-name {
- font-size: 11px; font-weight: 600;
- text-transform: uppercase; letter-spacing: 0.06em;
- color: var(--text-secondary);
+ font-size: 10px; font-weight: 600;
+ text-transform: uppercase; letter-spacing: 0.08em;
+ color: #71717a;
}
.kpi-badge {
- font-family: var(--mono); font-size: 10px; font-weight: 500;
- padding: 2px 6px; border-radius: 0;
- text-transform: uppercase; letter-spacing: 0.05em;
+ font-family: var(--mono); font-size: 10px; font-weight: 600;
+ padding: 2px 6px; border-radius: 3px;
+ display: inline-flex; align-items: center; gap: 2px;
}
-.kpi-badge.up { color: var(--green); background: var(--green-dim); }
-.kpi-badge.down { color: var(--red); background: var(--red-dim); }
-.kpi-badge.neutral { color: var(--accent); background: rgba(15,111,255,0.1); }
+.kpi-badge.up { color: #22c55e; background: rgba(34,197,94,0.1); }
+.kpi-badge.down { color: #ef4444; background: rgba(239,68,68,0.1); }
+.kpi-badge.neutral { color: #3b82f6; background: rgba(59,130,246,0.1); }
.kpi-value {
font-family: var(--mono);
- font-size: 24px; font-weight: 600;
+ font-size: 22px; font-weight: 700;
letter-spacing: -0.5px; line-height: 1.1;
- color: var(--text-primary); margin-bottom: 8px;
+ color: #f4f4f4; margin-bottom: 4px;
}
-.kpi-context { font-size: 11px; color: var(--text-tertiary); }
+.kpi-context { font-size: 10px; color: #52525b; }
/* CHARTS WRAPPER */
.charts-wrap {