add visual refactor design spec (corporate hacker direction)

Typography: Oxanium + IBM Plex Sans + JetBrains Mono.
Cards: glass + glow + left accent border hybrid.
Hero: keep all effects. Buttons: fix white hover.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

2 files changed, 131 insertions, 0 deletions

diff --git a/.gitignore b/.gitignore
index 8ec54af..5c77f17 100644
--- a/.gitignore
+++ b/.gitignore
@@ -16,6 +16,9 @@ static/api/vendor/
 # Claude Code local settings
 .claude/
 
+# Visual brainstorming sessions
+.superpowers/
+
 # OS / editor
 .DS_Store
 Thumbs.db
diff --git a/docs/superpowers/specs/2026-03-27-visual-refactor-design.md b/docs/superpowers/specs/2026-03-27-visual-refactor-design.md
new file mode 100644
index 0000000..de6e54e
--- /dev/null
+++ b/docs/superpowers/specs/2026-03-27-visual-refactor-design.md
@@ -0,0 +1,128 @@
+# Visual Refactor — Corporate Hacker
+
+**Date:** 2026-03-27
+**Status:** Approved
+
+## Goal
+
+Refactor the graphic aspect of danix.me toward a "corporate hacker" look: more professional and credible, while keeping the existing color palette (purple `#a855f7`, green `#00ff88`, dark navy `#060b10`) and the core cyber/terminal aesthetic.
+
+---
+
+## 1. Typography System
+
+Three-tier hierarchy applied globally across all sections and components.
+
+| Role | Font | Applied To |
+|---|---|---|
+| Display / Headings | Oxanium | Section titles, nav logo, hero name, card titles |
+| Body | IBM Plex Sans | Descriptions, bio, form labels, card body text, all prose |
+| Mono | JetBrains Mono | Terminals, category tags, eyebrows, labels, badges |
+
+**Implementation:** Add `IBM+Plex+Sans:wght@300;400;600` to the Google Fonts import in `head.html`. In `main.css`, explicitly assign IBM Plex Sans to all elements currently inheriting the monospace body fallback (`.about-bio p`, `.service-card p`, section descriptions, form labels, etc.).
+
+---
+
+## 2. Hero Section
+
+No structural or animation changes. Keep all current effects:
+- Matrix rain canvas (opacity 13%)
+- Scanlines overlay
+- Dot grid background
+- Ambient purple radial glow
+- Glitch animation on hero name
+
+**Typography-only change:** Hero subtitle/description and scroll indicator label switch from monospace to IBM Plex Sans.
+
+---
+
+## 3. Cards — All Sections
+
+All cards (Services, Skills, Projects, Certs) adopt a unified glass hybrid style.
+
+### Visual style
+```
+background:    rgba(16,30,45,0.55)
+backdrop-filter: blur(6px)
+border:        1px solid rgba(168,85,247,0.12)
+border-left:   2px solid #304860
+
+:hover
+  border-left-color: #a855f7
+  box-shadow:        0 0 22px rgba(168,85,247,0.10)
+  background:        rgba(16,30,45,0.75)
+```
+
+**Green variant** — used for defensive/positive cards (e.g. "Security Audit" service, high-proficiency skills):
+```
+:hover
+  border-left-color: #00ff88
+  box-shadow:        0 0 22px rgba(0,255,136,0.07)
+```
+
+### Content structure (three tiers)
+1. **Category tag** — JetBrains Mono, `0.55rem`, uppercase, `letter-spacing: 0.12em`, color `#304860`, brightens to `#7a9bb8` on hover
+2. **Title** — Oxanium, bold
+3. **Description** — IBM Plex Sans, `0.7rem`, `line-height: 1.6`, color `#7a9bb8`
+
+### Skill cards specifically
+- **Remove:** progress bar HTML and CSS entirely
+- **Add:** skill level as a tag badge in JetBrains Mono
+- `data/skills.yaml` — change `level` field from decimal to string label:
+  - `≥ 0.90` → `"Advanced"`
+  - `0.70–0.89` → `"Intermediate"`
+  - `< 0.70` → `"Foundational"`
+- Mapped values for current skills:
+  - Penetration Testing (0.75) → `Intermediate`
+  - Network Security (0.68) → `Foundational`
+  - Linux / Kali (0.95) → `Advanced`
+  - OSINT (0.62) → `Foundational`
+  - Scripting (0.85) → `Intermediate`
+  - Web Security (0.77) → `Intermediate`
+
+### Project cards
+Image area kept. Card body gets the three-tier tag/title/description structure.
+
+### Cert cards
+Same glass style. Badge image stays. Category tag added.
+
+---
+
+## 4. Buttons
+
+Single fix in `main.css`:
+
+```css
+/* Before */
+.btn-primary:hover { background: #fff; }
+
+/* After */
+.btn-primary:hover { background: #c084fc; }
+```
+
+All other button states (`.btn-outline`, `.btn-cv`, active states) unchanged.
+
+---
+
+## Files to Modify
+
+| File | Changes |
+|---|---|
+| `themes/danixme/layouts/partials/head.html` | Add IBM Plex Sans to Google Fonts import |
+| `themes/danixme/assets/css/main.css` | Font assignments, card styles, button hover fix, remove progress bar CSS |
+| `themes/danixme/layouts/partials/services.html` | Add category tag to each service card |
+| `themes/danixme/layouts/partials/skills.html` | Remove progress bar HTML, add level tag badge |
+| `themes/danixme/layouts/partials/projects.html` | Add category tag to each project card |
+| `themes/danixme/layouts/partials/certs.html` | Add category tag to each cert card |
+| `data/skills.yaml` | Change `level` from decimal to string label |
+
+---
+
+## Out of Scope
+
+- Nav bar — no changes
+- Footer — no changes
+- Terminal components (hero terminal, about terminal) — no changes
+- Contact form layout — no changes
+- Color palette — no changes
+- Light mode — no changes (inherits improvements automatically via CSS variables)