feat: add back-pill class, card hover lift, flash keyframe; remove duplicate story-escape
This commit is contained in:
@@ -210,6 +210,15 @@ body::after {
|
|||||||
color: var(--color-ink-2);
|
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 ────────────────────────────────────────────────────────────── */
|
/* ── Single entry ────────────────────────────────────────────────────────────── */
|
||||||
|
|
||||||
.entry-hero {
|
.entry-hero {
|
||||||
@@ -855,6 +864,12 @@ body::after {
|
|||||||
background: var(--color-surface-raised);
|
background: var(--color-surface-raised);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.trip-card:hover,
|
||||||
|
.entry-card:hover,
|
||||||
|
.story-card:hover {
|
||||||
|
background: var(--color-surface-raised);
|
||||||
|
}
|
||||||
|
|
||||||
.trip-card-title {
|
.trip-card-title {
|
||||||
font-family: var(--font-display);
|
font-family: var(--font-display);
|
||||||
font-size: var(--text-xl);
|
font-size: var(--text-xl);
|
||||||
@@ -955,25 +970,6 @@ body::after {
|
|||||||
margin-bottom: var(--space-2);
|
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-feed { min-width: 0; }
|
||||||
|
|
||||||
.trip-sidebar-section {}
|
.trip-sidebar-section {}
|
||||||
@@ -1214,6 +1210,24 @@ body::after {
|
|||||||
}
|
}
|
||||||
@media (max-width: 640px) { .story-nav-title { display: none; } }
|
@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 ─────────────────────────────────────── */
|
/* ── Back to top pill ─────────────────────────────────────── */
|
||||||
.story-totop {
|
.story-totop {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
@@ -1560,7 +1574,7 @@ body::after {
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
background: var(--color-canvas);
|
background: var(--color-canvas);
|
||||||
border: 1px solid var(--color-border);
|
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:hover { box-shadow: var(--shadow-md); }
|
||||||
.story-card__photo { aspect-ratio: 16/9; overflow: hidden; }
|
.story-card__photo { aspect-ratio: 16/9; overflow: hidden; }
|
||||||
|
|||||||
Reference in New Issue
Block a user