From d8ca8ff3ecc6a518d0d5e68d204dfc161ab446b2 Mon Sep 17 00:00:00 2001
From: Local Administrator <localadministrator@onsethost.com>
Date: Thu, 4 Jun 2026 20:34:30 +0000
Subject: [PATCH] fix(article-detail): sidebar column width + placeholder using
 new mark
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two pointed bugs on the article detail page:

1) Width alignment. The right-rail Related Articles and Related Forum
   Posts boxes were free-stretching to the lg:col-span-4 width while the
   SidebarAdStack below them rendered ads at their natural 300px (items-
   end, right-aligned). The visual result: boxes overhung the ad column
   on both edges. Wrapped each sidebar in an inner `w-full lg:w-[300px]
   lg:ml-auto` div so every block (ads + boxes + newsletter) shares one
   300px column on lg+ and stays full-width on mobile. Applied to both
   article templates (/articles/[slug] and /news/[slug]).

2) Placeholder rendered the old "AV BEAT" wordmark when an article had no
   featured image. Rebuilt article-placeholder.svg around the new brand
   mark — the A-monogram tile with the blue gradient (#2563EB→#1E3A8A)
   that matches AnimatedLogo + the rest of the brand-gradient system.
   Same 1200×630 dimensions so OG/feed embeds aren't affected.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 public/assets/images/article-placeholder.svg  | 38 +++++++++++++++----
 .../articles/[slug]/ArticleDetailClient.tsx   |  8 +++-
 .../news/[slug]/NewsArticleDetailClient.tsx   | 10 ++++-
 3 files changed, 44 insertions(+), 12 deletions(-)

diff --git a/public/assets/images/article-placeholder.svg b/public/assets/images/article-placeholder.svg
index 2397ff7..5609b9b 100644
--- a/public/assets/images/article-placeholder.svg
+++ b/public/assets/images/article-placeholder.svg
@@ -1,20 +1,42 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 630" preserveAspectRatio="xMidYMid slice">
   <defs>
-    <linearGradient id="g" x1="0" y1="0" x2="0" y2="1">
+    <linearGradient id="bg" x1="0" y1="0" x2="0" y2="1">
       <stop offset="0%" stop-color="#0F172A"/>
       <stop offset="50%" stop-color="#1E3A8A"/>
       <stop offset="100%" stop-color="#0F172A"/>
     </linearGradient>
-    <radialGradient id="r" cx="50%" cy="50%" r="60%">
+    <radialGradient id="glow" cx="50%" cy="50%" r="60%">
       <stop offset="0%" stop-color="#1D4ED8" stop-opacity="0.18"/>
       <stop offset="100%" stop-color="#1D4ED8" stop-opacity="0"/>
     </radialGradient>
+    <linearGradient id="tile" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%" stop-color="#2563EB"/>
+      <stop offset="100%" stop-color="#1E3A8A"/>
+    </linearGradient>
   </defs>
-  <rect width="1200" height="630" fill="url(#g)"/>
-  <rect width="1200" height="630" fill="url(#r)"/>
-  <g transform="translate(600 315)" text-anchor="middle" font-family="system-ui, sans-serif">
-    <text y="0" font-size="64" font-weight="800" fill="#FFFFFF" letter-spacing="0.04em">AV</text>
-    <text y="64" font-size="64" font-weight="800" fill="#38BDF8" letter-spacing="0.04em">BEAT</text>
-    <text y="120" font-size="16" font-weight="500" fill="#94A3B8" letter-spacing="0.25em">PRO AV · DISPLAY · LIVE PRODUCTION</text>
+
+  <!-- Background gradient -->
+  <rect width="1200" height="630" fill="url(#bg)"/>
+  <rect width="1200" height="630" fill="url(#glow)"/>
+
+  <!-- Brand-mark tile + A monogram, centered. Same geometry as AnimatedLogo. -->
+  <g transform="translate(420 175)">
+    <!-- Rounded tile (280x280, rx 62) with the brand gradient -->
+    <rect x="0" y="0" width="280" height="280" rx="62" ry="62" fill="url(#tile)"/>
+    <!-- Faint inner ring so the tile reads on dark bg -->
+    <rect x="3" y="3" width="274" height="274" rx="59" ry="59" fill="none" stroke="rgba(255,255,255,0.20)" stroke-width="3"/>
+    <!-- A — two strokes: left+right legs and crossbar. Same path as AnimatedLogo at 4.4x scale. -->
+    <path d="M 62 220 L 140 60 L 218 220"
+          fill="none" stroke="#FFFFFF" stroke-width="22"
+          stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M 92 158 L 188 158"
+          fill="none" stroke="#FFFFFF" stroke-width="18"
+          stroke-linecap="round"/>
+  </g>
+
+  <!-- Wordmark + tagline -->
+  <g transform="translate(600 525)" text-anchor="middle" font-family="system-ui, -apple-system, 'Segoe UI', sans-serif">
+    <text y="0" font-size="56" font-weight="700" fill="#FFFFFF" letter-spacing="-0.012em">AV BEAT</text>
+    <text y="34" font-size="14" font-weight="500" fill="#CBD5E1" letter-spacing="0.22em">INSIDE THE FUTURE OF PRO AV</text>
   </g>
 </svg>
diff --git a/src/app/articles/[slug]/ArticleDetailClient.tsx b/src/app/articles/[slug]/ArticleDetailClient.tsx
index 0e89d6b..d12ce3f 100644
--- a/src/app/articles/[slug]/ArticleDetailClient.tsx
+++ b/src/app/articles/[slug]/ArticleDetailClient.tsx
@@ -393,8 +393,11 @@ export default function ArticleDetailClient({ article, relatedArticles, relatedF
             <ArticleComments articleSlug={article.slug} />
           </div>
 
-          {/* Sidebar */}
-          <aside className="lg:col-span-4 space-y-6">
+          {/* Sidebar — every right-rail block (ads, Related Articles, Related
+              Forum Posts) shares the same 300px column width on lg+ so left +
+              right edges align cleanly with the ad inventory below. */}
+          <aside className="lg:col-span-4">
+            <div className="space-y-6 w-full lg:w-[300px] lg:ml-auto">
             {/* Related Articles */}
             {/* DO NOT OVERRIDE — related articles sidebar */}
             <div className="bg-[#111] border border-[#222] p-5">
@@ -470,6 +473,7 @@ export default function ArticleDetailClient({ article, relatedArticles, relatedF
 
             {/* Sidebar ad stack — 300x600 + 300x250 rotating */}
             <SidebarAdStack />
+            </div>
           </aside>
         </div>
       </article>
diff --git a/src/app/news/[slug]/NewsArticleDetailClient.tsx b/src/app/news/[slug]/NewsArticleDetailClient.tsx
index 242ab09..adbf637 100644
--- a/src/app/news/[slug]/NewsArticleDetailClient.tsx
+++ b/src/app/news/[slug]/NewsArticleDetailClient.tsx
@@ -528,8 +528,13 @@ export default function NewsArticleDetailClient({
             <ArticleComments articleSlug={article.slug} />
           </div>
 
-          {/* Sidebar */}
-          <aside className="lg:col-span-4 space-y-6">
+          {/* Sidebar — every right-rail block (ads, Related Articles, Related
+              Forum Posts, Newsletter) shares the same 300px column width so
+              their left + right edges align cleanly. Ads are 300×600 / 300×250
+              by definition; the boxes below now collapse to 300px on lg+ to
+              match. On mobile the wrapper is full-width. */}
+          <aside className="lg:col-span-4">
+            <div className="space-y-6 w-full lg:w-[300px] lg:ml-auto">
             {/* Blackmagic 300x600 fixed at top + every 300x250 banner stacked */}
             <SidebarAdStack />
 
@@ -619,6 +624,7 @@ export default function NewsArticleDetailClient({
             </div>
 
             {/* Ad placeholder */}
+            </div>
           </aside>
         </div>
       </article>