Categories KPI Card (CSS)(Brainstorming)
This KPI Card CSS layout is more complicated than we thought, so we’ll need to document this as text-based as our reference in case if we need to make edits and tweak where needed. Based on our AI Prompts, we’ve focused on high level only. The other styling details are AI defaulted.
⭐ HUD / Frosted Glass Container — Behavior (Text‑Only CSS Visualization)
Code
.categories-card ────────────────────────────────────────────── - - Frosted glass background (blurred, semi-transparent)
- Holographic blue tint overlay
- Thin cyan-blue iridescent border
- Soft neon outer glow (blue)
- Rounded corners (14–18px)
- Padding: 20–24px
- Vertical spacing between rows
- Text labels placed in glow-free zones
⭐ Text Labels — Readability Rules (Already Applied)
.category-label
──────────────────────────────────────────────
- Soft cyan-white text (#E6F7FF)
- Very subtle glow (0 0 3px rgba(0,255,255,0.25))
- No neon behind text
- Positioned above the bar (safe zone)
.category-values
──────────────────────────────────────────────
- Soft white/cyan text
- Futuristic thin font
- Glow-free zone below the bar
- Clear spacing from neon bars
⭐ Stacked Neon Bars — Behavior (Text‑Only CSS Visualization)
.category-bar
──────────────────────────────────────────────
- Height: 16px
- Rounded corners
- Overflow hidden
- Transparent background (glass behind)
.eksuper-bar
──────────────────────────────────────────────
- Neon blue (#3A7DFF)
- Soft glow (0 0 6px rgba(58,125,255,0.6))
- Width = EKSuper / Inv$
.efi-bar
──────────────────────────────────────────────
- Neon green (#4CAF50)
- Soft glow (0 0 6px rgba(76,175,80,0.6))
- Width = EFI / Inv$
