fix: resolve matrix rain opacity, menu styling, and featured articles

Issues fixed:
1. Added missing header.css and footer.css imports to main.css (fixes unstyled menu)
2. Increased matrix rain canvas opacity (0.13→0.25, 0.18→0.35) for better visibility
3. Updated home.html to display featured articles first, then latest 3
4. Removed invalid pseudo-element CSS rule on canvas element

The form on /is/here should now be visible, menu properly styled, and matrix rain more prominent.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

1 files changed, 358 insertions, 0 deletions

diff --git a/.superpowers/brainstorm/15080-1775367116/content/theme-approaches.html b/.superpowers/brainstorm/15080-1775367116/content/theme-approaches.html
new file mode 100644
index 0000000..fdb04cb
--- /dev/null
+++ b/.superpowers/brainstorm/15080-1775367116/content/theme-approaches.html
@@ -0,0 +1,358 @@
+<style>
+  @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;600&family=JetBrains+Mono:ital,wght@0,300;0,400;0,500;0,700;1,300&family=Oxanium:wght@700;800&display=swap');
+
+  .approaches { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-top: 1rem; }
+
+  .approach-card {
+    flex: 1;
+    min-width: 260px;
+    max-width: 340px;
+    border-radius: 12px;
+    overflow: hidden;
+    cursor: pointer;
+    border: 2px solid transparent;
+    transition: border-color 0.2s, box-shadow 0.2s;
+    position: relative;
+  }
+  .approach-card.selected { border-color: #a855f7; box-shadow: 0 0 24px rgba(168,85,247,0.4); }
+  .approach-card:hover { border-color: rgba(168,85,247,0.4); }
+
+  .approach-label {
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 0.7rem;
+    letter-spacing: 0.15em;
+    text-transform: uppercase;
+    padding: 0.5rem 1rem;
+    font-weight: 600;
+  }
+
+  /* ── OPTION A: Hacker Terminal ── */
+  .preview-a {
+    background: #060b10;
+    padding: 1rem;
+    font-family: 'JetBrains Mono', monospace;
+    min-height: 340px;
+  }
+  .preview-a .nav-a {
+    display: flex; gap: 1rem; align-items: center; margin-bottom: 1rem;
+    border-bottom: 1px solid #182840; padding-bottom: 0.6rem;
+  }
+  .preview-a .logo-a { color: #a855f7; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; }
+  .preview-a .nav-link { color: #7a9bb8; font-size: 0.55rem; letter-spacing: 0.12em; text-transform: uppercase; }
+  .preview-a .hero-a {
+    background: #060b10;
+    border: 1px solid #182840;
+    padding: 0.8rem;
+    margin-bottom: 0.8rem;
+    position: relative;
+    overflow: hidden;
+  }
+  .preview-a .matrix-strip {
+    position: absolute; top: 0; right: 0; bottom: 0; width: 40%;
+    background: linear-gradient(to right, #060b10, transparent);
+    display: flex; align-items: center; justify-content: flex-end;
+    font-size: 0.4rem; color: rgba(0,255,136,0.2); letter-spacing: 0.05em;
+    padding-right: 0.3rem; overflow: hidden; line-height: 1.2;
+    font-weight: 300;
+  }
+  .preview-a .name-a { font-family: 'Oxanium', sans-serif; color: #a855f7; font-size: 1.1rem; font-weight: 800; }
+  .preview-a .role-a { color: #00ff88; font-size: 0.5rem; letter-spacing: 0.15em; text-transform: uppercase; margin: 0.2rem 0; }
+  .preview-a .bio-a { color: #7a9bb8; font-size: 0.45rem; line-height: 1.6; max-width: 55%; font-family: 'IBM Plex Sans', sans-serif; }
+  .preview-a .card-a {
+    background: #101e2d;
+    border: 1px solid #182840;
+    padding: 0.6rem;
+    margin-bottom: 0.5rem;
+    display: flex; gap: 0.5rem;
+  }
+  .preview-a .card-img-a {
+    width: 40px; height: 32px; background: #182840; flex-shrink: 0;
+    border: 1px solid #a855f7; position: relative; overflow: hidden;
+  }
+  .preview-a .card-img-a::after {
+    content: ''; position: absolute; inset: 0;
+    background: linear-gradient(135deg, rgba(168,85,247,0.3), transparent);
+  }
+  .preview-a .tag-a {
+    font-size: 0.38rem; color: #00ff88; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.15rem;
+    border: 1px solid rgba(0,255,136,0.3); display: inline-block; padding: 0.05rem 0.2rem;
+  }
+  .preview-a .title-a { color: #c4d6e8; font-size: 0.5rem; font-weight: 600; line-height: 1.3; margin-bottom: 0.15rem; }
+  .preview-a .excerpt-a { color: #7a9bb8; font-size: 0.4rem; font-family: 'IBM Plex Sans', sans-serif; line-height: 1.5; }
+  .label-a { background: #060b10; color: #a855f7; }
+
+  /* ── OPTION B: Editorial Dark ── */
+  .preview-b {
+    background: #0a0f1a;
+    padding: 1rem;
+    min-height: 340px;
+    font-family: 'IBM Plex Sans', sans-serif;
+  }
+  .preview-b .nav-b {
+    display: flex; gap: 1rem; align-items: center; margin-bottom: 1.2rem;
+    padding-bottom: 0.6rem;
+  }
+  .preview-b .logo-b { font-family: 'Oxanium', sans-serif; color: #e8e8f0; font-size: 0.8rem; font-weight: 800; }
+  .preview-b .nav-link-b { color: #6a7fa0; font-size: 0.5rem; letter-spacing: 0.06em; font-family: 'JetBrains Mono', monospace; }
+  .preview-b .hero-b {
+    margin-bottom: 1rem;
+    padding-bottom: 0.8rem;
+    border-bottom: 1px solid #1e2840;
+    position: relative; overflow: hidden;
+  }
+  .preview-b .matrix-strip-b {
+    position: absolute; top: 0; right: 0; bottom: 0; width: 35%;
+    display: flex; align-items: center; justify-content: flex-end;
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 0.38rem; color: rgba(0,255,136,0.1); letter-spacing: 0.05em;
+    padding-right: 0.3rem; overflow: hidden; line-height: 1.3;
+  }
+  .preview-b .eyebrow-b { font-family: 'JetBrains Mono', monospace; color: #a855f7; font-size: 0.42rem; letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 0.3rem; }
+  .preview-b .name-b { font-family: 'Oxanium', sans-serif; color: #e8e8f0; font-size: 1.4rem; font-weight: 800; line-height: 1.1; margin-bottom: 0.25rem; }
+  .preview-b .bio-b { color: #8899b8; font-size: 0.46rem; line-height: 1.8; max-width: 58%; }
+  .preview-b .section-label-b { font-family: 'JetBrains Mono', monospace; font-size: 0.42rem; color: #a855f7; letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 0.6rem; }
+  .preview-b .grid-b { display: grid; grid-template-columns: 1.4fr 1fr; gap: 0.5rem; }
+  .preview-b .card-b {
+    background: #111827;
+    border-radius: 6px;
+    overflow: hidden;
+  }
+  .preview-b .card-b.featured { grid-row: span 2; }
+  .preview-b .card-img-b {
+    height: 50px; background: linear-gradient(135deg, #1e2840 60%, #2d1f4a);
+    position: relative;
+  }
+  .preview-b .card-img-b.featured { height: 90px; }
+  .preview-b .card-img-b::after {
+    content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 50%;
+    background: linear-gradient(to top, #111827, transparent);
+  }
+  .preview-b .card-body-b { padding: 0.5rem; }
+  .preview-b .tag-b { font-family: 'JetBrains Mono', monospace; font-size: 0.35rem; color: #a855f7; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.12rem; }
+  .preview-b .title-b { color: #d4e0f0; font-size: 0.48rem; font-weight: 600; line-height: 1.35; }
+  .label-b { background: #0a0f1a; color: #d4e0f0; font-family: 'IBM Plex Sans', sans-serif; }
+
+  /* ── OPTION C: Warm Personal ── */
+  .preview-c {
+    background: #0d0f14;
+    padding: 1rem;
+    min-height: 340px;
+    font-family: 'IBM Plex Sans', sans-serif;
+  }
+  .preview-c .nav-c {
+    display: flex; gap: 1rem; align-items: center; margin-bottom: 1rem;
+    padding-bottom: 0.6rem; border-bottom: 1px solid #1e2030;
+  }
+  .preview-c .logo-c { font-family: 'Oxanium', sans-serif; color: #c084fc; font-size: 0.75rem; font-weight: 800; }
+  .preview-c .nav-link-c { color: #6a7a90; font-size: 0.5rem; letter-spacing: 0.04em; font-family: 'IBM Plex Sans', sans-serif; }
+  .preview-c .hero-c {
+    display: flex; align-items: center; gap: 0.8rem;
+    margin-bottom: 0.8rem; padding-bottom: 0.8rem; border-bottom: 1px solid #1e2030;
+    position: relative; overflow: hidden;
+  }
+  .preview-c .matrix-strip-c {
+    position: absolute; top: 0; right: 0; bottom: 0; width: 30%;
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 0.38rem; color: rgba(192,132,252,0.12); letter-spacing: 0.05em;
+    padding-right: 0.3rem; overflow: hidden; line-height: 1.3; display: flex; align-items: center;
+    justify-content: flex-end;
+  }
+  .preview-c .avatar-c {
+    width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
+    background: linear-gradient(135deg, #a855f7, #00ff88);
+    display: flex; align-items: center; justify-content: center;
+    font-family: 'Oxanium', sans-serif; color: #fff; font-size: 0.65rem; font-weight: 800;
+  }
+  .preview-c .name-c { font-family: 'Oxanium', sans-serif; color: #dde8f8; font-size: 0.9rem; font-weight: 800; line-height: 1.1; }
+  .preview-c .role-c { font-family: 'JetBrains Mono', monospace; color: #c084fc; font-size: 0.38rem; letter-spacing: 0.1em; margin: 0.1rem 0; }
+  .preview-c .bio-c { color: #7a8fa8; font-size: 0.4rem; line-height: 1.7; max-width: 55%; }
+  .preview-c .filters-c { display: flex; gap: 0.3rem; margin-bottom: 0.6rem; flex-wrap: wrap; }
+  .preview-c .filter-c { font-family: 'JetBrains Mono', monospace; font-size: 0.38rem; padding: 0.1rem 0.35rem; border-radius: 20px; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; }
+  .preview-c .filter-all { background: #a855f7; color: #fff; }
+  .preview-c .filter-inactive { background: rgba(168,85,247,0.1); color: #7a8fa8; border: 1px solid rgba(168,85,247,0.2); }
+
+  /* Mixed card types for feed */
+  .preview-c .feed-c { display: flex; flex-direction: column; gap: 0.4rem; }
+
+  /* Article card */
+  .preview-c .card-article {
+    background: #141820; border-radius: 6px; display: flex; gap: 0.5rem; overflow: hidden;
+    border-left: 2px solid #a855f7;
+  }
+  .preview-c .card-article-img { width: 48px; height: 40px; background: linear-gradient(135deg, #1e2840, #2d1f4a); flex-shrink: 0; }
+  .preview-c .card-article-body { padding: 0.4rem 0.4rem 0.4rem 0; }
+  .preview-c .card-type { font-family: 'JetBrains Mono', monospace; font-size: 0.35rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.08rem; }
+  .preview-c .type-tech { color: #a855f7; }
+  .preview-c .type-life { color: #f59e0b; }
+  .preview-c .type-quote { color: #00ff88; }
+  .preview-c .type-link { color: #38bdf8; }
+  .preview-c .card-title-c { color: #ccd8ec; font-size: 0.48rem; font-weight: 600; line-height: 1.3; }
+
+  /* Quote card */
+  .preview-c .card-quote {
+    background: #0f1520; border-radius: 6px; padding: 0.5rem 0.6rem;
+    border-left: 3px solid #00ff88;
+  }
+  .preview-c .quote-text { color: #a0b8c8; font-size: 0.44rem; font-style: italic; line-height: 1.6; margin-bottom: 0.15rem; font-family: 'IBM Plex Sans', sans-serif; }
+  .preview-c .quote-attr { font-family: 'JetBrains Mono', monospace; font-size: 0.35rem; color: #00ff88; letter-spacing: 0.08em; }
+
+  /* Link card */
+  .preview-c .card-link {
+    background: #141820; border-radius: 6px; padding: 0.4rem 0.5rem;
+    display: flex; align-items: center; gap: 0.4rem;
+    border-left: 2px solid #38bdf8;
+  }
+  .preview-c .link-icon { font-size: 0.7rem; flex-shrink: 0; }
+  .preview-c .link-title { color: #ccd8ec; font-size: 0.45rem; font-weight: 600; }
+  .preview-c .link-domain { font-family: 'JetBrains Mono', monospace; font-size: 0.35rem; color: #38bdf8; }
+
+  .label-c { background: #0d0f14; color: #dde8f8; font-family: 'IBM Plex Sans', sans-serif; }
+
+  .approach-badge {
+    position: absolute; top: 0.5rem; right: 0.5rem;
+    font-family: 'JetBrains Mono', monospace; font-size: 0.55rem;
+    background: rgba(168,85,247,0.15); color: #a855f7;
+    border: 1px solid rgba(168,85,247,0.3); padding: 0.15rem 0.4rem;
+    letter-spacing: 0.1em; text-transform: uppercase;
+  }
+</style>
+
+<h2>Three theme directions for danix.xyz</h2>
+<p class="subtitle">Each preserves the fonts and colors from danixme — the difference is in personality and layout approach. Click to select.</p>
+
+<div class="approaches">
+
+  <!-- OPTION A -->
+  <div class="approach-card" data-choice="a" onclick="toggleSelect(this)">
+    <div class="approach-label label-a">A — Hacker Terminal</div>
+    <div class="preview-a">
+      <div class="approach-badge">A</div>
+      <div class="nav-a">
+        <span class="logo-a">danix</span>
+        <span class="nav-link">articles</span>
+        <span class="nav-link">contact</span>
+      </div>
+      <div class="hero-a">
+        <div class="matrix-strip">アイウ01カキABC<br>エオ234クケBCD<br>カキ567コサCDE<br>クケ890シスDEF</div>
+        <div class="name-a">danilo m.</div>
+        <div class="role-a">// engineer · writer · human</div>
+        <div class="bio-a">writing about the things I learn, the things I think, and the things that move me.</div>
+      </div>
+      <div class="card-a">
+        <div class="card-img-a"></div>
+        <div>
+          <div class="tag-a">tech</div>
+          <div class="title-a">Understanding Kubernetes networking from scratch</div>
+          <div class="excerpt-a">After years of cargo-culting configs...</div>
+        </div>
+      </div>
+      <div class="card-a">
+        <div class="card-img-a"></div>
+        <div>
+          <div class="tag-a" style="color:#f59e0b;border-color:rgba(245,158,11,0.3)">life</div>
+          <div class="title-a">On slowing down in a world that won't</div>
+          <div class="excerpt-a">There's a particular kind of exhaustion...</div>
+        </div>
+      </div>
+    </div>
+    <div class="approach-label label-a" style="font-size:0.6rem;padding:0.4rem 1rem;border-top:1px solid #182840">Sharp edges · terminal soul · max hacker</div>
+  </div>
+
+  <!-- OPTION B -->
+  <div class="approach-card" data-choice="b" onclick="toggleSelect(this)">
+    <div class="approach-label label-b">B — Editorial Dark</div>
+    <div class="preview-b">
+      <div class="approach-badge">B</div>
+      <div class="nav-b">
+        <span class="logo-b">danix</span>
+        <span class="nav-link-b">articles</span>
+        <span class="nav-link-b">contact</span>
+      </div>
+      <div class="hero-b">
+        <div class="matrix-strip-b">アイウ01カキABC<br>エオ234クケBCD<br>カキ567コサCDE</div>
+        <div class="eyebrow-b">// engineer · writer · human</div>
+        <div class="name-b">danilo m.</div>
+        <div class="bio-b">Writing about IT, life, and the things that matter. Honest takes, real learning.</div>
+      </div>
+      <div class="section-label-b">latest</div>
+      <div class="grid-b">
+        <div class="card-b featured">
+          <div class="card-img-b featured"></div>
+          <div class="card-body-b">
+            <div class="tag-b">tech</div>
+            <div class="title-b">Understanding Kubernetes networking from scratch</div>
+          </div>
+        </div>
+        <div class="card-b">
+          <div class="card-img-b"></div>
+          <div class="card-body-b">
+            <div class="tag-b" style="color:#f59e0b">life</div>
+            <div class="title-b">On slowing down</div>
+          </div>
+        </div>
+        <div class="card-b">
+          <div class="card-img-b"></div>
+          <div class="card-body-b">
+            <div class="tag-b" style="color:#00ff88">quote</div>
+            <div class="title-b">"The obstacle is the way"</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="approach-label label-b" style="font-size:0.6rem;padding:0.4rem 1rem;border-top:1px solid #1e2840">Magazine grid · featured post · editorial rhythm</div>
+  </div>
+
+  <!-- OPTION C -->
+  <div class="approach-card" data-choice="c" onclick="toggleSelect(this)">
+    <div class="approach-label label-c">C — Warm Personal</div>
+    <div class="preview-c">
+      <div class="approach-badge">C</div>
+      <div class="nav-c">
+        <span class="logo-c">danix</span>
+        <span class="nav-link-c">articles</span>
+        <span class="nav-link-c">contact</span>
+      </div>
+      <div class="hero-c">
+        <div class="matrix-strip-c">アイウ01<br>エオ234<br>カキ567</div>
+        <div class="avatar-c">DM</div>
+        <div>
+          <div class="name-c">danilo m.</div>
+          <div class="role-c">// engineer · writer · human</div>
+          <div class="bio-c">Writing about the things I learn, think about, and find worth sharing.</div>
+        </div>
+      </div>
+      <div class="filters-c">
+        <span class="filter-c filter-all">all</span>
+        <span class="filter-c filter-inactive">tech</span>
+        <span class="filter-c filter-inactive">life</span>
+        <span class="filter-c filter-inactive">quotes</span>
+        <span class="filter-c filter-inactive">links</span>
+        <span class="filter-c filter-inactive">photos</span>
+      </div>
+      <div class="feed-c">
+        <div class="card-article">
+          <div class="card-article-img"></div>
+          <div class="card-article-body">
+            <div class="card-type type-tech">tech</div>
+            <div class="card-title-c">Understanding Kubernetes networking from scratch</div>
+          </div>
+        </div>
+        <div class="card-quote">
+          <div class="card-type type-quote">quote</div>
+          <div class="quote-text">"The obstacle is the way"</div>
+          <div class="quote-attr">— Marcus Aurelius</div>
+        </div>
+        <div class="card-link">
+          <div class="link-icon">🔗</div>
+          <div>
+            <div class="card-type type-link">link</div>
+            <div class="link-title">The future of Linux packaging</div>
+            <div class="link-domain">lwn.net</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="approach-label label-c" style="font-size:0.6rem;padding:0.4rem 1rem;border-top:1px solid #1e2030">Feed-first · type-colored cards · human warmth</div>
+  </div>
+
+</div>