# Footer & Header Frosted Glass 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:** Add a unified frosted glass + glow aesthetic to both header and footer for visual cohesion with the hacker theme.

**Architecture:** Create a reusable `.frosted-bar` CSS component combining backdrop blur, subtle border, and accent glow. Apply to both `<header>` and `<footer>` elements. Uses existing CSS variables for automatic light/dark theme support.

**Tech Stack:** Tailwind CSS + custom CSS components, Hugo templates, CSS custom properties (variables)

---

## File Structure

- **Modify:** `themes/danix-xyz-hacker/assets/css/main.css` — Add `.frosted-bar` component (lines ~175-180)
- **Modify:** `themes/danix-xyz-hacker/layouts/partials/header.html` — Add class to `<header>` element
- **Modify:** `themes/danix-xyz-hacker/layouts/partials/footer.html` — Replace old styling with `.frosted-bar` class

---

## Tasks

### Task 1: Add `.frosted-bar` CSS Component

**Files:**
- Modify: `themes/danix-xyz-hacker/assets/css/main.css:175-178`

- [ ] **Step 1: Add the `.frosted-bar` component to main.css**

Open `themes/danix-xyz-hacker/assets/css/main.css` and locate the `/* Glow effect utility */` section around line 175.

Insert the new component right after the `.glow-accent` rule (after line 178):

```css
  /* Frosted glass bar (header/footer) */
  .frosted-bar {
    background-color: rgba(12, 21, 32, 0.92);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border);
    box-shadow: 0 0 20px var(--accent-glow);
  }

  html.theme-light .frosted-bar {
    background-color: rgba(248, 249, 250, 0.92);
  }
```

This creates a component that:
- Uses semi-transparent background matching current header (`bg-bg2/92`)
- Adds `backdrop-filter: blur(10px)` for the frosted glass effect
- Uses theme-aware border color via CSS variable
- Applies the accent glow matching content cards

- [ ] **Step 2: Verify the CSS is syntactically correct**

Check that the CSS block is properly formatted with matching braces and semicolons.

- [ ] **Step 3: Commit this CSS change**

```bash
git add themes/danix-xyz-hacker/assets/css/main.css
git commit -m "feat: add frosted-bar CSS component for header and footer"
```

---

### Task 2: Update Header Template

**Files:**
- Modify: `themes/danix-xyz-hacker/layouts/partials/header.html:1`

- [ ] **Step 1: Add `.frosted-bar` class to header element**

Open `themes/danix-xyz-hacker/layouts/partials/header.html`.

Find line 1:
```html
<header class="sticky top-0 z-50 bg-bg2/92 backdrop-blur border-b border-border">
```

Replace with:
```html
<header class="sticky top-0 z-50 frosted-bar border-b">
```

This applies the new component and removes the now-redundant inline Tailwind classes (`bg-bg2/92 backdrop-blur border-b border-border`).

- [ ] **Step 2: Verify the change**

Confirm the header element now has `class="sticky top-0 z-50 frosted-bar border-b"` and nothing else besides the layout classes.

- [ ] **Step 3: Commit**

```bash
git add themes/danix-xyz-hacker/layouts/partials/header.html
git commit -m "refactor: apply frosted-bar component to header"
```

---

### Task 3: Update Footer Template

**Files:**
- Modify: `themes/danix-xyz-hacker/layouts/partials/footer.html:1`

- [ ] **Step 1: Replace footer styling with `.frosted-bar`**

Open `themes/danix-xyz-hacker/layouts/partials/footer.html`.

Find line 1:
```html
<footer class="mt-16 border-t border-border/30 py-12 bg-surface/20">
```

Replace with:
```html
<footer class="mt-16 frosted-bar py-12">
```

This replaces the old hard border (`border-t border-border/30`) and semi-transparent background (`bg-surface/20`) with the unified frosted glass component.

- [ ] **Step 2: Verify the change**

Confirm the footer element now has `class="mt-16 frosted-bar py-12"`.

- [ ] **Step 3: Commit**

```bash
git add themes/danix-xyz-hacker/layouts/partials/footer.html
git commit -m "refactor: apply frosted-bar component to footer"
```

---

### Task 4: Rebuild CSS and Test

**Files:**
- Build output: `themes/danix-xyz-hacker/assets/css/main.min.css`

- [ ] **Step 1: Run CSS build pipeline**

From the project root, run:
```bash
npm run build
```

Expected output: CSS compilation completes successfully, `main.min.css` is regenerated.

- [ ] **Step 2: Start the Hugo dev server**

```bash
hugo server -D
```

Expected: Server starts on `http://localhost:1313` (or your configured port).

- [ ] **Step 3: Open the site in a browser and verify dark mode**

Open `http://localhost:1313` in your browser.

Verify:
- Header has the frosted glass effect with glow (should look like content cards)
- Footer has matching frosted glass effect with glow
- Both have subtle border and blur effect
- Border is visible but not harsh

- [ ] **Step 4: Toggle to light mode and verify**

Use the theme toggle button in the header.

Verify:
- Header and footer background adapts to light theme colors
- Glow effect is visible in light mode (slightly different color, should be purple/blue)
- Border adapts correctly
- Blur effect is still present

- [ ] **Step 5: Test on mobile (responsive)**

Resize browser to mobile width (375px) or use dev tools device emulation.

Verify:
- Header and footer still look good on mobile
- No layout issues
- Glow effect is visible and not overwhelming

- [ ] **Step 6: Commit the built CSS**

```bash
git add themes/danix-xyz-hacker/assets/css/main.min.css public/css/main.min.css
git commit -m "build: rebuild CSS with frosted-bar component"
```

---

### Task 5: Final Review and Cleanup

**Files:**
- Review: `themes/danix-xyz-hacker/layouts/partials/header.html`
- Review: `themes/danix-xyz-hacker/layouts/partials/footer.html`
- Review: `themes/danix-xyz-hacker/assets/css/main.css`

- [ ] **Step 1: Visual comparison**

In the browser, compare header and footer:
- Do they have matching frosted glass + glow effects?
- Is the aesthetic consistent with content cards?
- Does the glow feel appropriate (not too subtle, not overwhelming)?
- Do hard borders look soft and integrated now?

- [ ] **Step 2: Check for any remaining old footer styling**

Search the footer.html file for any leftover classes like `bg-surface/20` or `border-border/30` that might have been missed.

- [ ] **Step 3: Verify no console errors**

Open browser dev tools console (F12) and check for any CSS or JavaScript errors related to the changes.

- [ ] **Step 4: Final commit message**

If everything looks good, no additional commits needed — the work is complete. If you found issues in steps 1-3, fix them and create a new commit.

---

## Verification Checklist

After all tasks complete, verify:

- [ ] Header and footer both have frosted glass + glow effect
- [ ] Both elements work in dark and light themes
- [ ] No visual regression on other page elements
- [ ] Mobile layout still looks correct
- [ ] CSS builds without warnings
- [ ] All commits are clean and focused