From 77b867c9247a1b1f1db0e11adb3839ff90c86385 Mon Sep 17 00:00:00 2001
From: Giorgio Gilestro <giorgio@gilest.ro>
Date: Tue, 26 May 2026 00:29:51 +0200
Subject: [PATCH] landing: lift screenshots off the page; align feature
 thumbnails

Two fixes after a visual review:

1. Drop-shadow on every `.shot` so screenshots read as raised elements,
   not part of the page chrome. Soft slate shadow in light mode; deeper
   pure-black shadow + accent-tinted glow on hover in dark mode (the slate
   shadow disappears against the near-black background). The hover state
   also nudges the card up 1px so the lift is felt, not just seen.

2. Vertical alignment of the news / macro / hourly thumbnails inside the
   three feature cards. The cards are already equal-height (grid row,
   default stretch); now `.feature-card__body { flex-grow: 1 }` plus
   `display:flex; flex-direction:column` on the card pushes the body
   text to fill the column, which lands every thumbnail at the same y
   regardless of how much copy sits above it. Fixed 18px gap between
   body text and thumbnail.
---
 app/static/css/cassandra.css | 55 ++++++++++++++++++++++++++++++------
 1 file changed, 46 insertions(+), 9 deletions(-)

diff --git a/app/static/css/cassandra.css b/app/static/css/cassandra.css
index 4f8f076..0f2f7a8 100644
--- a/app/static/css/cassandra.css
+++ b/app/static/css/cassandra.css
@@ -1570,6 +1570,11 @@ a.btn-secondary:hover { color: var(--accent); border-color: var(--accent); }
   border-radius: 4px;
   padding: 22px 22px 24px;
   background: var(--surface);
+  /* Flex column so the screenshot thumbnail can dock to the bottom via
+     margin-top:auto — that's what lines the three thumbnails up across
+     cards regardless of body-text length. */
+  display: flex;
+  flex-direction: column;
 }
 .feature-card__tag {
   font-family: var(--font-mono);
@@ -1590,6 +1595,10 @@ a.btn-secondary:hover { color: var(--accent); border-color: var(--accent); }
   line-height: 1.6;
   color: var(--muted);
   margin: 0;
+  /* Grow to fill the flex column so the thumbnail below docks to the
+     bottom of the card. With grid-stretched equal-height cards, this is
+     what aligns the thumbnails across the three cards. */
+  flex-grow: 1;
 }
 
 /* --- Section primitives reused across pricing/about/legal ---------- */
@@ -1731,11 +1740,12 @@ a.btn-secondary:hover { color: var(--accent); border-color: var(--accent); }
    strip, and a <dialog>-based lightbox. See app/templates/landing.html. */
 
 /* All clickable screenshots are <button>s — reset the default chrome so they
-   read as image cards, not form controls. */
+   read as image cards, not form controls. The shadow is the main "this is a
+   screenshot, not part of the page" signal; the border alone blends in. */
 .shot {
   appearance: none;
   -webkit-appearance: none;
-  background: transparent;
+  background: var(--surface);
   border: 1px solid var(--border);
   padding: 0;
   margin: 0;
@@ -1744,16 +1754,39 @@ a.btn-secondary:hover { color: var(--accent); border-color: var(--accent); }
   cursor: zoom-in;
   border-radius: 4px;
   overflow: hidden;
-  transition: border-color 120ms ease, transform 120ms ease;
+  transition: border-color 120ms ease, transform 120ms ease,
+              box-shadow 160ms ease;
   position: relative;
+  box-shadow: 0 6px 22px rgba(15, 23, 42, 0.18),
+              0 2px 6px rgba(15, 23, 42, 0.10);
 }
-.shot:hover,
-.shot:focus-visible {
+.shot:hover {
   border-color: var(--accent);
-  outline: none;
+  transform: translateY(-1px);
+  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.22),
+              0 4px 10px rgba(15, 23, 42, 0.14);
 }
 .shot:focus-visible {
-  box-shadow: 0 0 0 2px var(--accent);
+  outline: none;
+  border-color: var(--accent);
+  box-shadow: 0 0 0 2px var(--accent),
+              0 6px 22px rgba(15, 23, 42, 0.18);
+}
+/* Dark mode: the soft slate shadow disappears against the near-black bg.
+   Use a deeper, slightly accent-tinted glow so the cards still lift. */
+[data-theme="dark"] .shot {
+  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.55),
+              0 2px 8px rgba(0, 0, 0, 0.35);
+}
+[data-theme="dark"] .shot:hover {
+  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.65),
+              0 0 0 1px rgba(0, 217, 255, 0.20);
+}
+@media (prefers-color-scheme: dark) {
+  .shot {
+    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.55),
+                0 2px 8px rgba(0, 0, 0, 0.35);
+  }
 }
 .shot img {
   display: block;
@@ -1783,9 +1816,13 @@ a.btn-secondary:hover { color: var(--accent); border-color: var(--accent); }
   pointer-events: none;
 }
 
-/* Thumbnail tucked at the bottom of each feature card. */
+/* Thumbnail at the bottom of each feature card. Vertical alignment across
+   the three cards is achieved by `.feature-card__body { flex-grow: 1 }`
+   above, which lets the body fill all available space inside the
+   equal-height grid cell — the thumbnail then sits at the same y across
+   cards. The fixed margin-top keeps a predictable gap above. */
 .feature-card__shot {
-  margin-top: 16px;
+  margin-top: 18px;
 }
 .feature-card__shot img {
   max-height: 200px;