From 1ffc9c6e92052f102564d56fcc5d17598d4d8bd3 Mon Sep 17 00:00:00 2001
From: jay <thejayman77@gmail.com>
Date: Mon, 22 Jun 2026 12:10:41 -0400
Subject: [PATCH] home3: news image contain-on-matte (figures sit whole);
 Entertainment centered play-glyph empty-state

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 frontend/src/routes/home3/+page.svelte | 23 +++++++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

diff --git a/frontend/src/routes/home3/+page.svelte b/frontend/src/routes/home3/+page.svelte
index 705cca3..590b2ff 100644
--- a/frontend/src/routes/home3/+page.svelte
+++ b/frontend/src/routes/home3/+page.svelte
@@ -179,7 +179,12 @@
           <span class="label" style="color:#3F9A66">ENTERTAINMENT</span>
           <span class="soon">SOON</span>
         </div>
-        <p class="moment-line">A little something to enjoy.</p>
+        <div class="moment-mid">
+          <span class="play-glyph" aria-hidden="true">
+            <svg viewBox="0 0 24 24" fill="#3F9A66"><path d="M8 5v14l11-7z" /></svg>
+          </span>
+          <p class="moment-line">A little something to enjoy.</p>
+        </div>
         <span class="moment-meta">Shows, clips, and curiosities. Coming soon.</span>
       </div>
     </div>
@@ -281,7 +286,13 @@
     background: #fff; border: 1px solid var(--news-border);
     display: flex; flex-direction: column; box-shadow: 0 6px 20px -14px rgba(0, 131, 173, 0.4);
   }
-  .news-photo { aspect-ratio: 5/4; background: linear-gradient(160deg, #6fc4d8, #9bd4c9 55%, #f6cf7e); background-size: cover; background-position: center; }
+  /* contain on a warm matte so diagrams/figures sit whole (framed plate), never cropped
+     mid-label; photos get a soft matte border instead of bleeding to the edge */
+  .news-photo {
+    aspect-ratio: 5/4; background-color: #f2ede3;
+    background-size: contain; background-position: center; background-repeat: no-repeat;
+    border-bottom: 1px solid #efe7d8;
+  }
   .news-body { padding: 24px 26px; flex: 1; display: flex; flex-direction: column; }
   .news h2 {
     font-size: clamp(1.55rem, 2.6vw, 30px); line-height: 1.14; margin: 12px 0 0;
@@ -353,8 +364,12 @@
   .moment { background: #E6F3E9; border: 1px solid #cee6d3; padding: 22px 24px; display: flex; flex-direction: column; }
   .moment-top { display: flex; align-items: center; justify-content: space-between; }
   .soon { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; color: #3F9A66; background: #fff; border-radius: 999px; padding: 3px 8px; }
-  .moment-line { font-family: 'Newsreader', Georgia, serif; font-style: italic; font-size: 18px; line-height: 1.3; color: #214a35; margin: 14px 0 0; }
-  .moment-meta { margin-top: auto; padding-top: 16px; font-size: 13px; color: #6f9683; }
+  /* centered empty-state: faint play-glyph + tagline fill the space, caption at the foot */
+  .moment-mid { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; }
+  .play-glyph { width: 46px; height: 46px; border-radius: 50%; background: rgba(63, 154, 102, 0.14); display: flex; align-items: center; justify-content: center; }
+  .play-glyph svg { width: 18px; height: 18px; margin-left: 2px; }
+  .moment-line { font-family: 'Newsreader', Georgia, serif; font-style: italic; font-size: 18px; line-height: 1.3; color: #214a35; margin: 0; }
+  .moment-meta { padding-top: 16px; font-size: 13px; color: #6f9683; text-align: center; }
 
   /* "small joys" rail — little jewels: one big focal point per card, a faint oversized
      watermark glyph, an accent-tag label, soft diagonal gradient + long low shadow. */