diff --git a/dashboard-mockup.html b/dashboard-mockup.html index a652d34..7fb9a2a 100644 --- a/dashboard-mockup.html +++ b/dashboard-mockup.html @@ -120,6 +120,7 @@ body { transition: all 0.2s var(--ease); opacity: 0; transform: translateY(8px); cursor: default; + color: #d4d4d4; } .kpi.visible { opacity: 1; transform: translateY(0); } .kpi:hover { @@ -133,14 +134,14 @@ body { } .kpi-ticker { font-family: var(--mono); font-size: 10px; font-weight: 600; - color: #555; letter-spacing: 0.03em; + color: #666; letter-spacing: 0.03em; } .kpi-change { font-family: var(--mono); font-size: 12px; font-weight: 700; display: flex; align-items: center; gap: 3px; } -.kpi-change.up { color: #16a34a; } -.kpi-change.down { color: #e21d1d; } +.kpi-change.up { color: #22c55e; } +.kpi-change.down { color: #ef4444; } .kpi-change.neutral { color: #3b82f6; } .kpi-trend { display: flex; align-items: center; gap: 6px; } .kpi-trend-line { @@ -148,12 +149,12 @@ body { } .kpi-value { font-family: var(--mono); - font-size: 28px; font-weight: 700; + font-size: 28px; font-weight: 800; letter-spacing: -0.5px; line-height: 1.1; - color: #f4f4f4; + color: #ffffff; } .kpi-desc { - font-size: 10px; color: #4a4a4a; + font-size: 10px; color: #555; } /* Arrow SVG inline */