feat(story): sticky nav title + floating back-to-top pill

Nav title: absolutely centered in the site-header, fades in via
IntersectionObserver when .story-hero__content scrolls above the fold.
Hidden on mobile (< 640px) where there is no room.

Back-to-top: fixed bottom-right pill, appears after 80% of the hero
viewport is scrolled past, smooth-scrolls to top on click.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Vgmzx8VTTTmCskSpQtsLTr
This commit is contained in:
2026-06-20 11:15:06 +02:00
parent 6e5caf33ad
commit 326f28e4ac
2 changed files with 77 additions and 0 deletions
+46
View File
@@ -1194,6 +1194,52 @@ body::after {
text-decoration: none;
}
/* ── Story nav title (desktop: fades into header center) ─────── */
.story-nav-title {
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
font-family: var(--font-ui);
font-size: var(--text-sm);
font-weight: 500;
color: var(--color-ink);
white-space: nowrap;
max-width: 40%;
overflow: hidden;
text-overflow: ellipsis;
opacity: 0;
transition: opacity 0.35s ease;
pointer-events: none;
}
.story-nav-title.is-visible { opacity: 1; }
@media (max-width: 640px) { .story-nav-title { display: none; } }
/* ── Back to top pill ─────────────────────────────────────── */
.story-totop {
position: fixed;
bottom: 1.5rem;
right: 1.5rem;
font-family: var(--font-ui);
font-size: var(--text-xs);
font-weight: 500;
letter-spacing: 0.04em;
color: var(--color-ink);
background: var(--color-canvas);
border: 1px solid var(--color-border);
border-radius: 9999px;
padding: 0.4rem 0.9rem;
cursor: pointer;
opacity: 0;
transform: translateY(6px);
transition: opacity 0.3s ease, transform 0.3s ease, background 0.15s;
pointer-events: none;
z-index: 90;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.story-totop.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.story-totop:hover { background: var(--color-paper); }
/* ── ChapterBreak ─────────────────────────────────────────── */
.chapter-break {
position: relative;