From e298d25c927c38fcac139d917ade7f90e75050c2 Mon Sep 17 00:00:00 2001
From: jay <thejayman77@gmail.com>
Date: Sun, 21 Jun 2026 20:13:14 -0400
Subject: [PATCH] home2 cards round 4: all cards tinted + top strip, inset
 photos, centered static headers

- All four cards now tinted with a taller (18px), darker (~24%) top color strip.
- Photos (news top, art right) sit inset + rounded so the card colour frames them.
- Static cards: header centered; CTA pinned to the bottom so Play/Daily Moment links line
  up. News tint = soft amber, Art = soft lilac, Play = sky, Moment = sage.
- Hub spacing: intro pulled up a touch, more gap between the intro and the cards.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 frontend/src/lib/components/RoomCard.svelte | 64 ++++++++++-----------
 frontend/src/lib/rooms.js                   |  2 +
 frontend/src/routes/home2/+page.svelte      |  4 +-
 3 files changed, 34 insertions(+), 36 deletions(-)

diff --git a/frontend/src/lib/components/RoomCard.svelte b/frontend/src/lib/components/RoomCard.svelte
index 9335dca..9ab89bd 100644
--- a/frontend/src/lib/components/RoomCard.svelte
+++ b/frontend/src/lib/components/RoomCard.svelte
@@ -1,7 +1,7 @@
 <script>
   // A single hub "room" card. Presentational — the page passes live preview data in.
-  // Every card shares a side-by-side icon+title header; layout varies by preview type:
-  // news = photo on top, art = photo on the right, static = tinted with a darker top strip.
+  // Every card is tinted with a darker top strip; layout varies by preview type:
+  // news = inset photo on top, art = inset photo on the right, static = centered header.
   let { room, artImg = null, newsImg = null, newsHeadline = '' } = $props();
 </script>
 
@@ -34,19 +34,27 @@
 
 <style>
   .card {
+    --pad: clamp(13px, 1.7vw, 18px);
+    --strip: 18px;
     position: relative; display: flex; overflow: hidden; text-decoration: none; color: var(--ink);
-    background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
-    box-shadow: 0 10px 30px rgba(20, 30, 45, 0.06);
-    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
+    background: var(--tint, var(--surface)); border: 1px solid rgba(20, 30, 45, 0.07);
+    border-radius: 18px; box-shadow: 0 10px 30px rgba(20, 30, 45, 0.06);
+    transition: transform 0.18s ease, box-shadow 0.18s ease;
+    padding: calc(var(--pad) + var(--strip)) var(--pad) var(--pad);
+  }
+  .card:hover { transform: translateY(-4px); box-shadow: 0 20px 46px rgba(20, 30, 45, 0.12); }
+  /* the darker color strip across the top — a touch of each tint, deepened */
+  .card::before {
+    content: ""; position: absolute; top: 0; left: 0; right: 0; height: var(--strip);
+    background: color-mix(in srgb, var(--tint, #e8e8e8), #0c1620 24%);
   }
-  .card:hover { transform: translateY(-4px); box-shadow: 0 20px 46px rgba(20, 30, 45, 0.12); border-color: #ddd4c4; }
 
   /* size variants — grid spans set by the page; these set the heights */
   .card--large { min-height: 340px; }
   .card--wide { min-height: 200px; }
   .card--small { min-height: 168px; }
 
-  .content { display: flex; flex-direction: column; }
+  .content { display: flex; flex-direction: column; flex: 1; }
 
   /* shared side-by-side header (icon + title), clean modern sans title */
   .head { display: flex; align-items: center; gap: 10px; }
@@ -55,44 +63,32 @@
     font-family: var(--sans); font-weight: 700; letter-spacing: -0.015em;
     font-size: clamp(1.25rem, 2vw, 1.5rem);
   }
-  .blurb { margin: 10px 0 15px; color: var(--muted); font-size: 1rem; line-height: 1.45; max-width: 42ch; }
+  .blurb { margin: 11px 0 14px; color: var(--muted); font-size: 1rem; line-height: 1.45; max-width: 42ch; }
   .cta { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--accent); font-size: 0.98rem; }
   .arr { transition: transform 0.18s ease; }
   .card:hover .arr { transform: translateX(4px); }
 
-  /* News — photo on top, headline below; larger hero header */
+  /* photos sit inset (rounded) so the card colour shows all around them */
+  .photo { background-size: cover; background-position: center; border-radius: 11px; }
+
+  /* News — inset photo on top, headline below; larger hero header */
   .card--news { flex-direction: column; }
-  .card--news .photo--top {
-    width: 100%; flex: 1 1 auto; min-height: 150px;
-    background-size: cover; background-position: center;
-  }
-  .card--news .content { padding: clamp(18px, 2.2vw, 26px); }
+  .card--news .photo--top { width: 100%; flex: 1 1 auto; min-height: 150px; }
+  .card--news .content { flex: 0 0 auto; padding-top: 14px; }
   .card--news .ic { font-size: clamp(2rem, 2.8vw, 2.5rem); }
   .card--news .title { font-size: clamp(1.5rem, 2.6vw, 2rem); }
   .card--news .headline {
-    margin: 12px 0 15px; font-family: Georgia, serif; font-style: italic;
+    margin: 12px 0 4px; font-family: Georgia, serif; font-style: italic;
     font-size: clamp(1.1rem, 1.9vw, 1.4rem); line-height: 1.34; max-width: 40ch;
   }
 
-  /* Art — rectangular photo on the RIGHT (cover-cropped to hide ragged scan edges) */
-  .card--art { flex-direction: row; align-items: stretch; }
-  .card--art .content {
-    flex: 1; padding: clamp(16px, 2vw, 26px); justify-content: center;
-  }
-  .card--art .photo--right {
-    flex: 0 0 42%; min-width: 130px;
-    background-size: cover; background-position: center;
-    box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.06);
-  }
+  /* Art — inset rectangular photo on the RIGHT (cover-cropped to hide ragged edges) */
+  .card--art { flex-direction: row; align-items: stretch; gap: var(--pad); }
+  .card--art .content { justify-content: center; }
+  .card--art .photo--right { flex: 0 0 40%; min-width: 120px; align-self: stretch; }
 
-  /* Static — tinted body with a darker color strip on top (Monopoly-card feel) */
-  .card--static {
-    flex-direction: column; background: var(--tint, var(--surface));
-    border-color: rgba(20, 30, 45, 0.07); padding: clamp(20px, 2.4vw, 28px);
-  }
-  .card--static::before {
-    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 13px;
-    background: color-mix(in srgb, var(--tint), #1b2733 17%);
-  }
+  /* Static — centered header, body left, link pinned to the bottom (cards line up) */
+  .card--static .head { justify-content: center; }
   .card--static .blurb { margin: 12px 0 14px; }
+  .card--static .cta { margin-top: auto; }
 </style>
diff --git a/frontend/src/lib/rooms.js b/frontend/src/lib/rooms.js
index 3180f29..8a9e051 100644
--- a/frontend/src/lib/rooms.js
+++ b/frontend/src/lib/rooms.js
@@ -12,6 +12,7 @@ export const ROOMS = [
     size: 'large',
     preview: 'news',
     icon: '📰',
+    tint: '#fbecdb',           // soft amber
   },
   {
     id: 'art',
@@ -22,6 +23,7 @@ export const ROOMS = [
     size: 'wide',
     preview: 'art',
     icon: '🖼️',
+    tint: '#f4ecf3',           // soft lilac
   },
   {
     id: 'play',
diff --git a/frontend/src/routes/home2/+page.svelte b/frontend/src/routes/home2/+page.svelte
index 87e736d..cf7cdcc 100644
--- a/frontend/src/routes/home2/+page.svelte
+++ b/frontend/src/routes/home2/+page.svelte
@@ -108,9 +108,9 @@
 
   .hub {
     flex: 1; width: 100%; max-width: 1180px; margin: 0 auto; box-sizing: border-box;
-    padding: clamp(16px, 3vw, 40px) clamp(18px, 5vw, 64px) clamp(40px, 6vw, 72px);
+    padding: clamp(12px, 2.4vw, 30px) clamp(18px, 5vw, 64px) clamp(40px, 6vw, 72px);
   }
-  .intro { text-align: center; margin: clamp(8px, 2vw, 22px) 0 clamp(28px, 4vw, 44px); }
+  .intro { text-align: center; margin: clamp(6px, 1.2vw, 14px) 0 clamp(40px, 6vw, 64px); }
   .intro h1 {
     font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
     font-size: clamp(1.9rem, 4.5vw, 3rem); margin: 0; letter-spacing: -0.015em; line-height: 1.08;