From 7858d922eabd35bb622a33b493785e588068fd42 Mon Sep 17 00:00:00 2001
From: Claude Code <claude@anthropic.com>
Date: Fri, 1 May 2026 17:07:22 +0800
Subject: [PATCH] viralmvp Y2K mix: bubble-letter brand + multi-color sticker
 tags
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Restores the MTV/Geocities-era visual identity in editorial form:

- Bungee Shade for the "mvp" word in the brand wordmark — built-in
  3D bevel + drop shadow gives a sticker/bubble-letter pop without
  needing extra layers
- Hot magenta + electric cyan + lemon yellow + electric purple as
  multi-color palette (was just one magenta accent before)
- Body background picks up four subtle radial corner gradients in the
  full palette (pink + cyan + lemon + purple) — barely there but adds
  Y2K warmth instead of flat off-white
- post-hero-flag now renders as a Bungee sticker badge: solid magenta
  pill with cyan + lemon stacked drop shadows and a -1.5deg tilt
- post-hero-tag and post-row-tag rotate through pastel sticker colors
  via :nth-child (magenta, cyan, lemon, purple) for that MTV programme
  guide energy
- Hero + row hover shadows shift from grey to magenta-tinted
- Drop cap chromatic Y2K stack: magenta letter + cyan offset + lemon
  second offset
- hero-row alignment fixed (flex-end so nav baseline aligns with tagline)
- post-row image gets the same position: absolute inset: 0 fix as
  hype404 so image always fills its grid cell cleanly

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/layouts/Layout.astro | 114 ++++++++++++++++++++++++++++-----------
 1 file changed, 83 insertions(+), 31 deletions(-)

diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 17e69dd..2d42049 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -47,21 +47,30 @@ const year = new Date().getFullYear();
 
   <link rel="preconnect" href="https://fonts.googleapis.com" />
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-  <link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700;9..144,800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700;9..144,800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Bungee+Shade&family=Bungee&display=swap" rel="stylesheet" />
 
   <style is:global>
     :root {
-      --bg: #fbfaf6;
+      --bg: #fff9f3;
       --bg-card: #ffffff;
-      --bg-soft: #f5f0ef;
+      --bg-soft: #fbecf3;
       --ink: #1a121d;
       --ink-soft: #4f3f57;
       --ink-muted: #897a8f;
-      --line: #ebe4e8;
-      --accent: #d4308f;
-      --accent-soft: #fbe2f0;
-      --link: #6c2bd9;
-      --link-hover: #4c1d95;
+      --line: #f1dfe6;
+      /* Y2K multi-color palette — magenta primary, cyan + lemon supporting,
+         electric purple links */
+      --accent:    #ec3a8e;        /* hot magenta */
+      --accent-soft: #ffd8eb;
+      --cyan:      #2bb6e2;        /* electric cyan */
+      --cyan-soft: #cdf0fb;
+      --lemon:     #fbcc31;        /* lemon yellow */
+      --lemon-soft:#fff1c2;
+      --grape:     #9b3de5;        /* electric purple */
+      --link:      #9b3de5;
+      --link-hover: #6f1ec3;
+      --display-bubble: 'Bungee Shade', 'Bungee', cursive;
+      --display-bungee: 'Bungee', 'Inter', sans-serif;
     }
 
     * { margin: 0; padding: 0; box-sizing: border-box; }
@@ -78,7 +87,12 @@ const year = new Date().getFullYear();
       font-size: 17px;
       line-height: 1.65;
       color: var(--ink);
-      background: var(--bg);
+      background:
+        radial-gradient(circle at  6% -4%, rgba(236,  58, 142, 0.12) 0%, transparent 38%),
+        radial-gradient(circle at 96%  4%, rgba( 43, 182, 226, 0.12) 0%, transparent 40%),
+        radial-gradient(circle at 50%102%, rgba(251, 204,  49, 0.10) 0%, transparent 45%),
+        radial-gradient(circle at 18% 95%, rgba(155,  61, 229, 0.08) 0%, transparent 42%),
+        var(--bg);
       min-height: 100vh;
     }
 
@@ -96,7 +110,7 @@ const year = new Date().getFullYear();
     }
     .hero-row {
       display: flex;
-      align-items: center;
+      align-items: flex-end;
       justify-content: space-between;
       gap: 24px;
       flex-wrap: wrap;
@@ -105,15 +119,23 @@ const year = new Date().getFullYear();
     .ascii-brand {
       font-family: 'Fraunces', 'Times New Roman', serif;
       font-weight: 800;
-      font-size: 38px;
-      letter-spacing: -0.02em;
+      font-size: 42px;
+      letter-spacing: -0.025em;
       color: var(--ink);
       line-height: 1;
       font-variation-settings: 'opsz' 144;
+      display: inline-block;
     }
+    /* Bubble-letter Y2K accent on the "mvp" word — Bungee Shade has built-in
+       3D shadow + bevel that reads as MTV/sticker even at small sizes. */
     .ascii-brand .cursor {
+      font-family: var(--display-bubble);
       color: var(--accent);
-      font-weight: 800;
+      font-weight: 400;
+      font-size: 0.78em;
+      letter-spacing: 0.04em;
+      margin-left: 6px;
+      vertical-align: 6px;
     }
     .tagline {
       color: var(--ink-soft);
@@ -246,13 +268,17 @@ const year = new Date().getFullYear();
     }
     .post-content > p:first-of-type::first-letter {
       font-family: 'Fraunces', serif;
-      font-weight: 700;
-      font-size: 64px;
+      font-weight: 800;
+      font-size: 72px;
       float: left;
-      line-height: 0.92;
-      padding: 6px 10px 0 0;
+      line-height: 0.9;
+      padding: 6px 14px 0 0;
       color: var(--accent);
       font-variation-settings: 'opsz' 144;
+      /* Y2K chromatic — magenta + cyan offset */
+      text-shadow:
+        3px 3px 0 var(--cyan),
+        6px 6px 0 var(--lemon);
     }
     .post-content a {
       color: var(--link);
@@ -485,7 +511,8 @@ const year = new Date().getFullYear();
     }
     .post-hero:hover {
       transform: translateY(-2px);
-      box-shadow: 0 18px 48px -22px rgba(40, 30, 50, 0.22);
+      box-shadow: 0 22px 56px -22px rgba(236, 58, 142, 0.32);
+      border-color: var(--accent-soft);
     }
     .post-hero-link {
       display: grid;
@@ -510,13 +537,22 @@ const year = new Date().getFullYear();
       flex-direction: column;
       justify-content: center;
     }
+    /* Y2K sticker flag — Bungee + colored bg pill, slight tilt for sticker feel */
     .post-hero-flag {
-      color: var(--accent);
-      font-size: 11px;
-      font-weight: 700;
+      display: inline-block;
+      font-family: var(--display-bungee);
+      background: var(--accent);
+      color: #fff;
+      font-size: 12px;
+      letter-spacing: 0.12em;
+      padding: 4px 14px;
+      border-radius: 999px;
+      margin-bottom: 14px;
+      transform: rotate(-1.5deg);
+      box-shadow:
+        2px 2px 0 var(--cyan),
+        4px 4px 0 var(--lemon);
       text-transform: uppercase;
-      letter-spacing: 0.16em;
-      margin-bottom: 12px;
     }
     .post-hero-title {
       font-family: 'Fraunces', 'Noto Serif SC', serif;
@@ -549,8 +585,14 @@ const year = new Date().getFullYear();
       border-radius: 999px;
       color: var(--ink-soft);
       font-size: 12px;
+      font-weight: 600;
     }
     .post-hero-tag a { color: inherit; text-decoration: none; }
+    /* Rotating Y2K pastel sticker colors per nth-child */
+    .post-hero-tag:nth-child(2)  { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-soft); }
+    .post-hero-tag:nth-child(3)  { background: var(--cyan-soft);   color: #1a7eaa;       border-color: var(--cyan-soft); }
+    .post-hero-tag:nth-child(4)  { background: var(--lemon-soft);  color: #8a6c00;       border-color: var(--lemon-soft); }
+    .post-hero-tag:nth-child(5)  { background: #efdcfb;            color: var(--grape);  border-color: #efdcfb; }
 
     /* ========== Row cards ========== */
     .post-row {
@@ -563,22 +605,28 @@ const year = new Date().getFullYear();
     }
     .post-row:hover {
       transform: translateY(-2px);
-      box-shadow: 0 14px 36px -18px rgba(40, 30, 50, 0.18);
+      box-shadow: 0 16px 40px -18px rgba(236, 58, 142, 0.25);
+      border-color: var(--accent-soft);
     }
     .post-row-link {
       display: grid;
-      grid-template-columns: 220px 1fr;
+      grid-template-columns: 240px 1fr;
+      align-items: stretch;
       text-decoration: none;
       color: inherit;
     }
     .post-row-img {
+      position: relative;
       overflow: hidden;
       background: var(--bg-soft);
     }
     .post-row-img img {
-      width: 100%; height: 100%;
-      min-height: 160px;
-      object-fit: cover; display: block;
+      position: absolute;
+      inset: 0;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      display: block;
       transition: transform 0.5s ease;
     }
     .post-row:hover .post-row-img img { transform: scale(1.04); }
@@ -586,6 +634,7 @@ const year = new Date().getFullYear();
       padding: 22px 26px;
       display: flex; flex-direction: column;
       justify-content: center;
+      gap: 6px;
     }
     .post-row-link:has(.post-row-body:only-child) {
       grid-template-columns: 1fr;
@@ -620,15 +669,18 @@ const year = new Date().getFullYear();
     }
     .post-row-tag {
       display: inline-block;
-      padding: 1px 9px;
+      padding: 1px 10px;
       background: var(--bg-soft);
-      border: 1px solid var(--line);
+      border: 1px solid transparent;
       border-radius: 999px;
       color: var(--ink-soft);
       font-size: 11px;
-      font-weight: 500;
+      font-weight: 600;
     }
     .post-row-tag a { color: inherit; text-decoration: none; }
+    .post-row-tag:nth-child(2) { background: var(--accent-soft); color: var(--accent); }
+    .post-row-tag:nth-child(3) { background: var(--cyan-soft);   color: #1a7eaa; }
+    .post-row-tag:nth-child(4) { background: var(--lemon-soft);  color: #8a6c00; }
 
     .post-empty {
       color: var(--ink-muted);