From 3edc18fe2865a8531ecad83446a075c6e296c010 Mon Sep 17 00:00:00 2001
From: Mischa <mischa@gorinskat.nl>
Date: Sat, 20 Jun 2026 12:20:14 +0200
Subject: [PATCH] feat: add back-pill class, card hover lift, flash keyframe;
 remove duplicate story-escape

---
 themes/intotheeast/css/style.css | 54 ++++++++++++++++++++------------
 1 file changed, 34 insertions(+), 20 deletions(-)

diff --git a/themes/intotheeast/css/style.css b/themes/intotheeast/css/style.css
index 47399ff..a8003a3 100644
--- a/themes/intotheeast/css/style.css
+++ b/themes/intotheeast/css/style.css
@@ -210,6 +210,15 @@ body::after {
     color: var(--color-ink-2);
 }
 
+@keyframes card-highlight {
+    0%   { background-color: color-mix(in srgb, var(--color-accent) 12%, transparent); }
+    100% { background-color: transparent; }
+}
+
+.entry-card.is-highlighted {
+    animation: card-highlight 0.7s ease-out forwards;
+}
+
 /* ── Single entry ────────────────────────────────────────────────────────────── */
 
 .entry-hero {
@@ -855,6 +864,12 @@ body::after {
     background: var(--color-surface-raised);
 }
 
+.trip-card:hover,
+.entry-card:hover,
+.story-card:hover {
+    background: var(--color-surface-raised);
+}
+
 .trip-card-title {
     font-family: var(--font-display);
     font-size: var(--text-xl);
@@ -955,25 +970,6 @@ body::after {
     margin-bottom: var(--space-2);
 }
 
-/* ── Story page escape link ──────────────────────────────────────────────────── */
-
-.story-escape {
-    position: fixed;
-    top: var(--space-5);
-    left: var(--space-5);
-    z-index: 200;
-    font-size: var(--text-sm);
-    font-weight: 500;
-    color: var(--color-ink);
-    text-decoration: none;
-    background: rgba(0,0,0,0.6);
-    padding: var(--space-2) var(--space-4);
-    border-radius: var(--radius-full);
-    backdrop-filter: blur(4px);
-}
-
-.story-escape:hover { color: var(--color-accent); }
-
 .trip-feed { min-width: 0; }
 
 .trip-sidebar-section {}
@@ -1214,6 +1210,24 @@ body::after {
 }
 @media (max-width: 640px) { .story-nav-title { display: none; } }
 
+/* ── Back pill (shared navigation pill component) ───────────────────── */
+.back-pill {
+    display: inline-flex;
+    align-items: center;
+    font-family: var(--font-ui);
+    font-size: var(--text-sm);
+    font-weight: 500;
+    color: var(--color-ink);
+    text-decoration: none;
+    background: var(--color-canvas);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-full);
+    padding: 0.4rem 0.9rem;
+    transition: border-color 0.15s, color 0.15s;
+    cursor: pointer;
+}
+.back-pill:hover { border-color: var(--color-accent); color: var(--color-accent); }
+
 /* ── Back to top pill ─────────────────────────────────────── */
 .story-totop {
     position: fixed;
@@ -1560,7 +1574,7 @@ body::after {
     overflow: hidden;
     background: var(--color-canvas);
     border: 1px solid var(--color-border);
-    transition: box-shadow 0.2s;
+    transition: box-shadow 0.2s, background 0.15s;
 }
 .story-card:hover { box-shadow: var(--shadow-md); }
 .story-card__photo { aspect-ratio: 16/9; overflow: hidden; }