# Terminal Theme Redesign Implementation Plan

> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.

**Goal:** Replace the green-on-black terminal theme with a Dracula-palette soft-modern style (purple accent, rounded cards, dot-matrix background).

**Architecture:** All changes are in `style.css` — update CSS variable overrides in the `html[data-design-theme="terminal"]` block, then update each component override section below it. No JS changes needed; the forced-dark logic and font chain stay unchanged.

**Tech Stack:** Vanilla CSS, Vite. No test suite — verification is visual via `npm start`.

**Spec:** `docs/superpowers/specs/2026-05-18-terminal-theme-design.md`

---

## File Map

| File | Action | What changes |
|---|---|---|
| `style.css` lines 51–80 | Modify | CSS variables block for terminal theme |
| `style.css` lines 702–814 | Modify | All terminal component overrides |

---

### Task 1: Update CSS variable tokens

**Files:**
- Modify: `style.css:51-80`

- [ ] **Step 1: Replace the terminal theme variable block**

Find this block (starts at line 51):
```css
html[data-design-theme="terminal"] {
  color-scheme: dark;

  --accent: #33ff00;
  --accent-rgb: 51, 255, 0;
  --accent-2: #33ff00;
  --accent-3: #33ff00;
  --accent-secondary-rgb: 255, 176, 0;

  --page-gradient: #0a0a0a;
  --page-texture:
    repeating-linear-gradient(
      to bottom,
      rgba(var(--accent-rgb), 0.035) 0px,
      rgba(var(--accent-rgb), 0.035) 1px,
      transparent 2px,
      transparent 4px
    ),
    radial-gradient(
      circle at 50% 50%,
      rgba(var(--accent-rgb), 0.05) 0%,
      transparent 60%
    );
  --title-gradient: none;

  --control-bg: rgba(10, 10, 10, 0.85);
  --control-border: rgba(var(--accent-rgb), 0.35);
  --control-inset: transparent;
  --control-fg: var(--accent);
}
```

Replace it with:
```css
html[data-design-theme="terminal"] {
  color-scheme: dark;

  --accent: #bd93f9;
  --accent-rgb: 189, 147, 249;
  --accent-2: #ff79c6;
  --accent-3: #8be9fd;
  --accent-secondary-rgb: 255, 121, 198;

  --page-gradient: #282a36;
  --page-texture: radial-gradient(
    circle,
    rgba(98, 114, 164, 0.55) 1px,
    transparent 1px
  );
  --title-gradient: linear-gradient(90deg, #bd93f9 0%, #ff79c6 100%);

  --control-bg: rgba(40, 42, 54, 0.92);
  --control-border: #44475a;
  --control-inset: transparent;
  --control-fg: #f8f8f2;
}
```

- [ ] **Step 2: Start dev server and verify background color changed**

```bash
npm start
```

Open the app, switch design theme to **Terminal**. The page background should now be dark blue-purple (`#282a36`) with a faint dot grid, not pure black. The dot grid may be hard to see at first — look closely at a light source on a dark background.

---

### Task 2: Fix dot-matrix background size + body text

**Files:**
- Modify: `style.css` — terminal `body` rule (~line 702) and add `body::before` size rule

- [ ] **Step 1: Update the terminal body rule**

Find:
```css
html[data-design-theme="terminal"] body {
  font-family:
    ui-monospace, "JetBrains Mono", "Fira Code", "VT323", Menlo, Consolas,
    "Liberation Mono", monospace;
  letter-spacing: 0.01em;
  color: var(--accent);
}
```

Replace with:
```css
html[data-design-theme="terminal"] body {
  font-family:
    ui-monospace, "JetBrains Mono", "Fira Code", "VT323", Menlo, Consolas,
    "Liberation Mono", monospace;
  letter-spacing: 0.01em;
  color: #f8f8f2;
}
```

- [ ] **Step 2: Add body::before background-size rule immediately after**

After the `body` rule above, insert:
```css
html[data-design-theme="terminal"] body::before {
  background-size: 20px 20px;
}
```

- [ ] **Step 3: Verify in browser**

The dot matrix texture should now tile visibly at 20px intervals across the `#282a36` background. Body text should be `#f8f8f2` (off-white) instead of green.

---

### Task 3: Update title styling

**Files:**
- Modify: `style.css` — terminal `.title` and `.title::after` rules (~lines 761–775)

- [ ] **Step 1: Update the title rule**

Find:
```css
html[data-design-theme="terminal"] .title {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--accent);
  text-shadow: 0 0 5px rgba(var(--accent-rgb), 0.5);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  position: relative;
}
```

Replace with:
```css
html[data-design-theme="terminal"] .title {
  background: var(--title-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: none;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  position: relative;
}
```

- [ ] **Step 2: Update the cursor rule to keep it visible**

The `::after` pseudo-element inherits `-webkit-text-fill-color: transparent` from the title, which would hide the cursor. Fix it explicitly.

Find:
```css
html[data-design-theme="terminal"] .title::after {
  content: "\2588";
  margin-left: 8px;
  animation: terminal-cursor-blink 1s step-end infinite;
}
```

Replace with:
```css
html[data-design-theme="terminal"] .title::after {
  content: "\2588";
  margin-left: 8px;
  animation: terminal-cursor-blink 1s step-end infinite;
  -webkit-text-fill-color: #bd93f9;
}
```

- [ ] **Step 3: Verify in browser**

The page title should now show a purple-to-pink gradient text (uppercase). The blinking `█` cursor should be solid purple (`#bd93f9`), not transparent.

---

### Task 4: Update card styling

**Files:**
- Modify: `style.css` — all terminal `.card` rules (~lines 777–814)

- [ ] **Step 1: Update the base card rule**

Find:
```css
html[data-design-theme="terminal"] .card {
  border-radius: 0;
  background: transparent;
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transform: none;
}
```

Replace with:
```css
html[data-design-theme="terminal"] .card {
  border-radius: 10px;
  background: #313244;
  border: 1px solid #44475a;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transform: translateY(0);
  transition: all 0.2s ease;
}
```

- [ ] **Step 2: Add pin card variant**

After the base card rule, add:
```css
html[data-design-theme="terminal"] .card.pin {
  background: #383a4a;
}
```

- [ ] **Step 3: Update card h2, p, and beian (split the combined rule)**

Find:
```css
html[data-design-theme="terminal"] .card h2,
html[data-design-theme="terminal"] .card p,
html[data-design-theme="terminal"] .beian a {
  color: var(--accent);
  text-shadow: 0 0 5px rgba(var(--accent-rgb), 0.25);
}
```

Replace with:
```css
html[data-design-theme="terminal"] .card h2 {
  color: #f8f8f2;
  text-shadow: none;
}

html[data-design-theme="terminal"] .card p {
  color: #6272a4;
  text-shadow: none;
}
```

- [ ] **Step 4: Update card hover/focus**

Find:
```css
html[data-design-theme="terminal"] .card:hover,
html[data-design-theme="terminal"] .card:focus {
  background: rgba(var(--accent-rgb), 0.06);
  border-color: var(--accent);
  box-shadow: none;
}
```

Replace with:
```css
html[data-design-theme="terminal"] .card:hover,
html[data-design-theme="terminal"] .card:focus {
  background: #313244;
  border-color: #bd93f9;
  box-shadow:
    0 0 0 1px rgba(189, 147, 249, 0.25),
    0 8px 28px rgba(189, 147, 249, 0.15),
    0 4px 12px rgba(0, 0, 0, 0.5);
  transform: translateY(-2px);
}
```

- [ ] **Step 5: Update hover h2 color**

Find:
```css
html[data-design-theme="terminal"] .card:hover h2,
html[data-design-theme="terminal"] .card:focus h2 {
  color: var(--accent);
}
```

Replace with:
```css
html[data-design-theme="terminal"] .card:hover h2,
html[data-design-theme="terminal"] .card:focus h2 {
  color: #bd93f9;
}
```

- [ ] **Step 6: Add hover p color rule (currently missing)**

Immediately after the hover h2 rule, add:
```css
html[data-design-theme="terminal"] .card:hover p,
html[data-design-theme="terminal"] .card:focus p {
  color: #cdd6f4;
}
```

- [ ] **Step 7: Verify in browser**

Cards should now have rounded corners, a dark-purple surface (`#313244`), and lift with a purple glow on hover. Card titles should be off-white at rest and turn purple on hover. Card descriptions should be muted (`#6272a4`) at rest and lighten on hover.

---

### Task 5: Update controls and dropdown

**Files:**
- Modify: `style.css` — terminal `.design-theme-button`, `.theme-toggle`, `.design-theme-list` rules (~lines 710–759)

- [ ] **Step 1: Update the base button/toggle rule**

Find:
```css
html[data-design-theme="terminal"] .design-theme-button,
html[data-design-theme="terminal"] .theme-toggle {
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid rgba(var(--accent-rgb), 0.55);
}
```

Replace with:
```css
html[data-design-theme="terminal"] .design-theme-button,
html[data-design-theme="terminal"] .theme-toggle {
  border-radius: 8px;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid #44475a;
}
```

- [ ] **Step 2: Update button/toggle hover**

Find:
```css
html[data-design-theme="terminal"] .design-theme-button:hover,
html[data-design-theme="terminal"] .theme-toggle:hover {
  background: var(--accent);
  color: #0a0a0a;
  border-color: var(--accent);
  transform: none;
}
```

Replace with:
```css
html[data-design-theme="terminal"] .design-theme-button:hover,
html[data-design-theme="terminal"] .theme-toggle:hover {
  background: rgba(189, 147, 249, 0.08);
  color: #bd93f9;
  border-color: #bd93f9;
  transform: none;
}
```

- [ ] **Step 3: Update dropdown list**

Find:
```css
html[data-design-theme="terminal"] .design-theme-list {
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: rgba(10, 10, 10, 0.92);
  border: 1px solid rgba(var(--accent-rgb), 0.55);
}
```

Replace with:
```css
html[data-design-theme="terminal"] .design-theme-list {
  border-radius: 10px;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: rgba(40, 42, 54, 0.96);
  border: 1px solid #44475a;
}
```

- [ ] **Step 4: Update dropdown option hover/selected**

Find:
```css
html[data-design-theme="terminal"] .design-theme-list [role="option"]:hover,
html[data-design-theme="terminal"]
  .design-theme-list
  [role="option"][aria-selected="true"] {
  background: var(--accent);
  color: #0a0a0a;
}
```

Replace with:
```css
html[data-design-theme="terminal"] .design-theme-list [role="option"]:hover,
html[data-design-theme="terminal"]
  .design-theme-list
  [role="option"][aria-selected="true"] {
  background: rgba(189, 147, 249, 0.15);
  color: #bd93f9;
}
```

- [ ] **Step 5: Verify in browser**

The theme selector button should have rounded corners and a dark surface. Hovering it should show a subtle purple tint (not green invert). Opening the dropdown should show a rounded dark panel; hovering or selecting an option highlights it in purple.

---

### Task 6: Update beian footer

**Files:**
- Modify: `style.css` — terminal `.beian a` and `.beian a:hover` rules (~lines 791–814)

- [ ] **Step 1: Add beian rest-state rule**

The old combined rule (`.card h2, .card p, .beian a`) was split in Task 4, which removed the beian rest-state color. Insert a new rule immediately **before** the existing `.beian a:hover` rule:

```css
html[data-design-theme="terminal"] .beian a {
  color: #6272a4;
  text-shadow: none;
}
```

- [ ] **Step 2: Update beian hover**

Find:
```css
html[data-design-theme="terminal"] .beian a:hover {
  background: var(--accent);
  color: #0a0a0a;
  text-shadow: none;
}
```

Replace with:
```css
html[data-design-theme="terminal"] .beian a:hover {
  color: #bd93f9;
  background: none;
  text-shadow: none;
}
```

- [ ] **Step 3: Verify in browser**

The footer ICP link should appear in muted purple-grey (`#6272a4`) at rest and turn accent purple (`#bd93f9`) on hover, with no background invert.

---

### Task 7: Format, QA, and commit

**Files:**
- Modify: `style.css` (formatter pass)

- [ ] **Step 1: Run Prettier**

```bash
npm run fmt
```

Expected: `style.css` reformatted with no errors.

- [ ] **Step 2: Full visual QA checklist**

With `npm start` running, switch to the Terminal theme and check each item:

| Element | Expected |
|---|---|
| Page background | `#282a36` dark blue-purple with subtle 20px dot matrix |
| Title | Purple-to-pink gradient text, uppercase, blinking purple `█` cursor |
| Cards at rest | `#313244` rounded (10px), `#44475a` border, subtle shadow |
| Pin card | Slightly lighter surface `#383a4a` |
| Card h2 at rest | `#f8f8f2` off-white |
| Card p at rest | `#6272a4` muted purple-grey |
| Card on hover | Purple border glow, lifts 2px, h2 → `#bd93f9`, p → `#cdd6f4` |
| Theme selector button | Rounded 8px, dark surface, purple hover tint (no invert) |
| Dropdown panel | Rounded 10px, dark surface, purple option highlight |
| Dark toggle | Greyed out / cursor: not-allowed (unchanged) |
| Beian footer | `#6272a4` at rest, `#bd93f9` on hover, no bg invert |
| Other themes | Completely unaffected — spot-check Cyberpunk and Fluent |

- [ ] **Step 3: Commit**

```bash
git add style.css
git commit -m "redesign: terminal theme — Dracula purple focus (soft modern cards, dot matrix bg)"
```