/* ═══════════════════════════════════════════════ Story Chapters — Infinite Scroll | scs-style.css v1.6.0 — DEMARCA | Dark theme ═══════════════════════════════════════════════ */ :root { --scs-accent: #D99E91; --scs-accent-dim: rgba(217, 158, 145, 0.25); --scs-accent-glow: rgba(217, 158, 145, 0.55); --scs-border: rgba(255,255,255,.10); --scs-text: #f0ebe4; --scs-muted: rgba(255,255,255,.38); --scs-bg: #1a1a1a; --scs-radius: 6px; --scs-z-progress: 9999; --scs-z-toast: 9998; } /* ════════════════════════════════════════════════ PROGRESS TRACK (5px, fixed top, accent glow) overflow: visible is CRITICAL — lets tooltips escape the 5px container and appear above it. ════════════════════════════════════════════════ */ #scs-progress-track { position: fixed; top: 0; left: 0; right: 0; height: 5px; background: rgba(255,255,255,.08); z-index: var(--scs-z-progress); overflow: visible; } #scs-progress-fill { position: absolute; top: 0; left: 0; height: 100%; width: 0%; background: linear-gradient(90deg, var(--scs-accent), rgba(217,158,145,.7)); box-shadow: 0 0 8px var(--scs-accent-glow), 0 0 16px var(--scs-accent-dim); transition: width .12s linear; pointer-events: none; } /* ════════════════════════════════════════════════ CHAPTER TICK MARKS ════════════════════════════════════════════════ */ #scs-ticks { position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; overflow: visible; } .scs-tick { position: absolute !important; top: 50% !important; transform: translate(-50%, -50%) !important; width: 4px !important; height: 16px !important; background: rgba(255,255,255,.32); border: none !important; padding: 0 !important; cursor: pointer !important; pointer-events: all !important; border-radius: 2px !important; transition: background .2s ease, height .2s ease, box-shadow .2s ease; z-index: 1 !important; box-sizing: content-box !important; overflow: visible !important; } /* Large invisible hit area */ .scs-tick::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 32px; height: 32px; } .scs-tick:hover, .scs-tick.scs-tick-open { background: var(--scs-accent) !important; height: 18px !important; box-shadow: 0 0 10px var(--scs-accent-glow), 0 0 20px var(--scs-accent-dim) !important; z-index: 3 !important; } .scs-tick.scs-tick-active { background: var(--scs-accent) !important; height: 16px !important; box-shadow: 0 0 8px var(--scs-accent-dim) !important; z-index: 2 !important; } .scs-tick.scs-tick-loaded { background: rgba(217,158,145,.5); } /* Chapter 1: hidden visually but ghost hover zone kept active via JS */ .scs-tick.scs-tick-ch1 { opacity: 0; } .scs-tick.scs-tick-ch1:hover, .scs-tick.scs-tick-ch1.scs-tick-open { opacity: 1; } /* ── Tick pulse: bright glow ── */ @keyframes scs-tick-glow { 0% { background: var(--scs-accent); box-shadow: 0 0 6px 2px var(--scs-accent-glow); } 25% { background: #fff; box-shadow: 0 0 24px 10px var(--scs-accent-glow), 0 0 48px 20px var(--scs-accent-dim), 0 0 6px 2px rgba(255,255,255,.8); } 50% { background: var(--scs-accent); box-shadow: 0 0 16px 6px var(--scs-accent-glow), 0 0 32px 12px var(--scs-accent-dim); } 100% { background: var(--scs-accent); box-shadow: 0 0 8px 2px var(--scs-accent-dim); } } .scs-tick.scs-tick-pulse { animation: scs-tick-glow 1.2s ease-out forwards !important; transition: none !important; z-index: 10 !important; } /* ── Shared body-level tooltip ── Lives on directly so no ancestor transform can trap it. Positioned via JS on mouseenter. */ #scs-shared-tip { position: fixed; /* JS sets top/left */ transform: translateX(-50%); background: var(--scs-bg); color: var(--scs-text); font-size: .72rem; white-space: nowrap; padding: 5px 11px; border-radius: 4px; border: 1px solid rgba(217,158,145,.3); pointer-events: none; opacity: 0; transition: opacity .18s ease; max-width: 260px; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 4px 20px rgba(0,0,0,.6); z-index: 99999; } #scs-shared-tip.scs-tip-visible { opacity: 1; } #scs-shared-tip::before { content: ''; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-bottom-color: var(--scs-bg); } /* ════════════════════════════════════════════════ CHAPTER BLOCK ════════════════════════════════════════════════ */ .scs-chapter-block { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; } .scs-chapter-block.scs-visible { opacity: 1; transform: translateY(0); } /* ════════════════════════════════════════════════ INK-BLEED CHAPTER DIVIDER ════════════════════════════════════════════════ */ .scs-chapter-divider { position: relative; margin: 80px 0 64px; padding: 32px 0; text-align: center; overflow: hidden; opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; } .scs-chapter-divider.scs-visible { opacity: 1; transform: translateY(0); } .scs-divider-watermark { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: clamp(5rem, 18vw, 11rem); font-weight: 900; letter-spacing: -.04em; color: var(--scs-accent); opacity: .055; line-height: 1; pointer-events: none; user-select: none; } .scs-ink-stroke { display: block; width: 100%; height: 24px; margin: 0 auto 20px; overflow: visible; } .scs-ink-path { stroke: var(--scs-accent); stroke-dasharray: 900; stroke-dashoffset: 900; } .scs-ink-path.scs-ink-animate { animation: scs-ink-draw 1.1s cubic-bezier(.4,0,.2,1) forwards; animation-delay: .15s; } @keyframes scs-ink-draw { to { stroke-dashoffset: 0; } } .scs-divider-label { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; } .scs-divider-next { font-size: .65rem; letter-spacing: .18em; text-transform: uppercase; color: var(--scs-muted); } .scs-divider-title { font-size: clamp(.95rem, 2.5vw, 1.25rem); font-weight: 600; color: var(--scs-text); letter-spacing: .01em; max-width: 60ch; line-height: 1.3; } /* ════════════════════════════════════════════════ LOADING SPINNER ════════════════════════════════════════════════ */ #scs-loader { display: none; flex-direction: column; align-items: center; gap: 12px; padding: 48px 0; color: var(--scs-muted); font-size: .82rem; letter-spacing: .04em; } #scs-loader.scs-active { display: flex; } .scs-spinner { width: 28px; height: 28px; border: 2px solid rgba(255,255,255,.1); border-top-color: var(--scs-accent); border-radius: 50%; animation: scs-spin .7s linear infinite; } @keyframes scs-spin { to { transform: rotate(360deg); } } /* ════════════════════════════════════════════════ END OF STORY ════════════════════════════════════════════════ */ #scs-end-message { display: none; padding: 80px 24px 96px; } #scs-end-message.scs-active { display: block; } .scs-end-inner { text-align: center; max-width: 560px; margin: 0 auto; } /* Closing flourish SVG */ .scs-end-flourish { display: block; width: min(320px, 80vw); height: 60px; margin: 0 auto 32px; overflow: visible; } .scs-end-flourish-path { fill: none; stroke: var(--scs-accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1200; stroke-dashoffset: 1200; opacity: .7; } .scs-end-flourish-path.scs-ink-animate { animation: scs-ink-draw 2s cubic-bezier(.4,0,.2,1) forwards; animation-delay: .3s; } /* "The End" in Basics Serif */ .scs-end-title { font-family: "Basics Serif", Georgia, serif; font-weight: 400; font-size: clamp(3rem, 10vw, 6rem); line-height: 1.1; color: var(--scs-text); letter-spacing: -.01em; margin: 0 0 24px; text-shadow: 0 0 60px rgba(217,158,145,.12); } .scs-end-sub { color: var(--scs-muted); font-size: .88rem; margin: 0 0 32px; letter-spacing: .02em; } .scs-btn { display: inline-block; padding: 11px 28px; background: transparent; color: var(--scs-accent); border: 1px solid var(--scs-accent); border-radius: var(--scs-radius); text-decoration: none; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; transition: background .2s, color .2s; } .scs-btn:hover { background: var(--scs-accent); color: #1a1a1a; } /* ════════════════════════════════════════════════ BOOKMARK TOAST ════════════════════════════════════════════════ */ #scs-bookmark-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); opacity: 0; z-index: var(--scs-z-toast); background: #222; border: 1px solid rgba(255,255,255,.1); border-left: 3px solid var(--scs-accent); border-radius: var(--scs-radius); box-shadow: 0 8px 32px rgba(0,0,0,.6); display: flex; align-items: center; gap: 10px; padding: 12px 16px; max-width: min(480px, calc(100vw - 32px)); transition: opacity .35s ease, transform .35s ease; } #scs-bookmark-toast.scs-toast-visible { opacity: 1; transform: translateX(-50%) translateY(0); } .scs-toast-icon { font-size: 1rem; flex-shrink: 0; } .scs-toast-text { font-size: .8rem; color: var(--scs-muted); flex: 1; line-height: 1.4; } .scs-toast-text strong { color: var(--scs-text); font-weight: 600; } .scs-toast-btn { flex-shrink: 0; font-size: .75rem; padding: 5px 12px; background: var(--scs-accent); color: #1a1a1a; border-radius: 4px; text-decoration: none; white-space: nowrap; font-weight: 600; transition: opacity .15s; } .scs-toast-btn:hover { opacity: .85; } .scs-toast-close { flex-shrink: 0; background: none; border: none; color: var(--scs-muted); font-size: 1.2rem; cursor: pointer; padding: 0 0 0 4px; line-height: 1; } .scs-toast-close:hover { color: var(--scs-text); } /* ════════════════════════════════════════════════ RESPONSIVE ════════════════════════════════════════════════ */ @media (max-width: 600px) { .scs-divider-watermark { opacity: .04; } #scs-bookmark-toast { bottom: 16px; } .scs-tick-tip { font-size: .65rem; } } :root { --scs-accent: #D99E91; --scs-accent-dim: rgba(217, 158, 145, 0.25); --scs-accent-glow: rgba(217, 158, 145, 0.55); --scs-border: rgba(255,255,255,.10); --scs-text: #f0ebe4; --scs-muted: rgba(255,255,255,.38); --scs-bg: #1a1a1a; --scs-radius: 6px; --scs-z-progress: 9999; --scs-z-toast: 9998; } /* ════════════════════════════════════════════════ PROGRESS TRACK (4px, fixed top) ════════════════════════════════════════════════ */ #scs-progress-track { position: fixed; top: 0; left: 0; right: 0; height: 4px; background: rgba(255,255,255,.08); z-index: var(--scs-z-progress); } #scs-progress-fill { position: absolute; top: 0; left: 0; height: 100%; width: 0%; background: linear-gradient(90deg, var(--scs-accent), rgba(217,158,145,.7)); transition: width .12s linear; pointer-events: none; } /* ════════════════════════════════════════════════ CHAPTER TICK MARKS ════════════════════════════════════════════════ */ #scs-ticks { position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; } .scs-tick { /* Visible tick: 4px wide, 16px tall, centred on the bar */ position: absolute; top: 50%; transform: translate(-50%, -50%); width: 4px; height: 16px; background: rgba(255,255,255,.28); border: none; padding: 0; cursor: pointer; pointer-events: all; border-radius: 2px; transition: background .2s ease, height .2s ease, box-shadow .2s ease; overflow: visible; } /* Large invisible hit area via ::before */ .scs-tick::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 28px; height: 28px; } .scs-tick:hover, .scs-tick.scs-tick-open { background: var(--scs-accent); height: 14px; box-shadow: 0 0 6px var(--scs-accent-glow); z-index: 2; } /* Active chapter tick */ .scs-tick.scs-tick-active { background: var(--scs-accent); height: 12px; box-shadow: 0 0 5px var(--scs-accent-dim); } /* Loaded (already scrolled past) chapters */ .scs-tick.scs-tick-loaded { background: rgba(217,158,145,.45); } /* Chapter 1 tick is always at left: 0 — hide it since the bar start already implies the beginning */ .scs-tick[style*="left: 0%"], .scs-tick[style*="left:0%"] { opacity: 0; pointer-events: none; } /* ── Tick pulse: bright glow (repeat for cascade) ── */ @keyframes scs-tick-glow { 0% { background: var(--scs-accent); box-shadow: 0 0 6px 2px var(--scs-accent-glow); } 25% { background: #fff; box-shadow: 0 0 24px 10px var(--scs-accent-glow), 0 0 48px 20px var(--scs-accent-dim), 0 0 6px 2px rgba(255,255,255,.8); } 50% { background: var(--scs-accent); box-shadow: 0 0 16px 6px var(--scs-accent-glow), 0 0 32px 12px var(--scs-accent-dim); } 100% { background: var(--scs-accent); box-shadow: 0 0 8px 2px var(--scs-accent-dim); } } .scs-tick.scs-tick-pulse { animation: scs-tick-glow 1.2s ease-out forwards !important; transition: none !important; z-index: 10 !important; } /* ── Shared body-level tooltip ── Lives on directly — no ancestor transform can trap it. JS positions it on mouseenter. */ #scs-shared-tip { position: fixed; transform: none; background: var(--scs-bg); color: var(--scs-text); font-size: .72rem; white-space: nowrap; padding: 5px 11px; border-radius: 4px; border: 1px solid rgba(217,158,145,.3); pointer-events: none; opacity: 0; transition: opacity .18s ease; max-width: 260px; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 4px 20px rgba(0,0,0,.6); z-index: 99999; } #scs-shared-tip.scs-tip-visible { opacity: 1; } /* Arrow points UP toward the bar */ #scs-shared-tip::before { content: ''; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-bottom-color: var(--scs-bg); } /* ════════════════════════════════════════════════ CHAPTER BLOCK ════════════════════════════════════════════════ */ .scs-chapter-block { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; } .scs-chapter-block.scs-visible { opacity: 1; transform: translateY(0); } /* ════════════════════════════════════════════════ INK-BLEED CHAPTER DIVIDER ════════════════════════════════════════════════ */ .scs-chapter-divider { position: relative; margin: 80px 0 64px; padding: 32px 0; text-align: center; overflow: hidden; opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; } .scs-chapter-divider.scs-visible { opacity: 1; transform: translateY(0); } .scs-divider-watermark { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: clamp(5rem, 18vw, 11rem); font-weight: 900; letter-spacing: -.04em; color: var(--scs-accent); opacity: .055; line-height: 1; pointer-events: none; user-select: none; } .scs-ink-stroke { display: block; width: 100%; height: 24px; margin: 0 auto 20px; overflow: visible; } .scs-ink-path { stroke: var(--scs-accent); stroke-dasharray: 900; stroke-dashoffset: 900; } .scs-ink-path.scs-ink-animate { animation: scs-ink-draw 1.1s cubic-bezier(.4,0,.2,1) forwards; animation-delay: .15s; } @keyframes scs-ink-draw { to { stroke-dashoffset: 0; } } .scs-divider-label { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; } .scs-divider-next { font-size: .65rem; letter-spacing: .18em; text-transform: uppercase; color: var(--scs-muted); } .scs-divider-title { font-size: clamp(.95rem, 2.5vw, 1.25rem); font-weight: 600; color: var(--scs-text); letter-spacing: .01em; max-width: 60ch; line-height: 1.3; } /* ════════════════════════════════════════════════ LOADING SPINNER ════════════════════════════════════════════════ */ #scs-loader { display: none; flex-direction: column; align-items: center; gap: 12px; padding: 48px 0; color: var(--scs-muted); font-size: .82rem; letter-spacing: .04em; } #scs-loader.scs-active { display: flex; } .scs-spinner { width: 28px; height: 28px; border: 2px solid rgba(255,255,255,.1); border-top-color: var(--scs-accent); border-radius: 50%; animation: scs-spin .7s linear infinite; } @keyframes scs-spin { to { transform: rotate(360deg); } } /* ════════════════════════════════════════════════ END OF STORY ════════════════════════════════════════════════ */ #scs-end-message { display: none; padding: 64px 24px; } #scs-end-message.scs-active { display: block; } .scs-end-inner { text-align: center; max-width: 400px; margin: 0 auto; } .scs-end-fin { font-size: .75rem; letter-spacing: .2em; color: var(--scs-accent); margin: 0 0 12px; } #scs-end-message h3 { font-size: 1.15rem; color: var(--scs-text); margin: 0 0 8px; font-weight: 600; } #scs-end-message p { color: var(--scs-muted); font-size: .88rem; margin: 0 0 24px; } .scs-btn { display: inline-block; padding: 10px 24px; background: transparent; color: var(--scs-accent); border: 1px solid var(--scs-accent); border-radius: var(--scs-radius); text-decoration: none; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; transition: background .2s, color .2s; } .scs-btn:hover { background: var(--scs-accent); color: #1a1a1a; } /* ════════════════════════════════════════════════ BOOKMARK TOAST ════════════════════════════════════════════════ */ #scs-bookmark-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); opacity: 0; z-index: var(--scs-z-toast); background: #222; border: 1px solid rgba(255,255,255,.1); border-left: 3px solid var(--scs-accent); border-radius: var(--scs-radius); box-shadow: 0 8px 32px rgba(0,0,0,.6); display: flex; align-items: center; gap: 10px; padding: 12px 16px; max-width: min(480px, calc(100vw - 32px)); transition: opacity .35s ease, transform .35s ease; } #scs-bookmark-toast.scs-toast-visible { opacity: 1; transform: translateX(-50%) translateY(0); } .scs-toast-icon { font-size: 1rem; flex-shrink: 0; } .scs-toast-text { font-size: .8rem; color: var(--scs-muted); flex: 1; line-height: 1.4; } .scs-toast-text strong { color: var(--scs-text); font-weight: 600; } .scs-toast-btn { flex-shrink: 0; font-size: .75rem; padding: 5px 12px; background: var(--scs-accent); color: #1a1a1a; border-radius: 4px; text-decoration: none; white-space: nowrap; font-weight: 600; transition: opacity .15s; } .scs-toast-btn:hover { opacity: .85; } .scs-toast-close { flex-shrink: 0; background: none; border: none; color: var(--scs-muted); font-size: 1.2rem; cursor: pointer; padding: 0 0 0 4px; line-height: 1; } .scs-toast-close:hover { color: var(--scs-text); } /* ════════════════════════════════════════════════ DOM RECYCLING PLACEHOLDERS Fixed-height stand-ins for off-screen chapters. ════════════════════════════════════════════════ */ .scs-chapter-placeholder, .scs-divider-placeholder { display: block; visibility: hidden; pointer-events: none; } /* ════════════════════════════════════════════════ ONBOARDING TOAST Speech bubble pointing up at the progress bar. Shows once on first-ever story chapter visit. ════════════════════════════════════════════════ */ #scs-onboarding-toast { position: fixed; top: 18px; left: 50%; transform: translateX(-50%) translateY(-8px); opacity: 0; z-index: calc(var(--scs-z-progress) + 1); background: rgba(20, 20, 20, .92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(217,158,145,.25); border-radius: 10px; box-shadow: 0 8px 32px rgba(0,0,0,.5); padding: 14px 18px; max-width: min(400px, calc(100vw - 32px)); display: flex; flex-direction: column; gap: 10px; transition: opacity .4s ease, transform .4s ease; } #scs-onboarding-toast.scs-onboarding-visible { opacity: 1; transform: translateX(-50%) translateY(0); } /* Upward-pointing arrow toward the bar */ .scs-onboarding-arrow { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); width: 0; height: 0; border: 7px solid transparent; border-bottom-color: rgba(20, 20, 20, .92); } .scs-onboarding-text { font-size: .78rem; color: var(--scs-muted); line-height: 1.5; margin: 0; } .scs-onboarding-btn { align-self: flex-end; background: none; border: 1px solid var(--scs-accent); color: var(--scs-accent); font-size: .72rem; font-weight: 600; padding: 5px 14px; border-radius: 4px; cursor: pointer; letter-spacing: .04em; transition: background .2s, color .2s; } .scs-onboarding-btn:hover { background: var(--scs-accent); color: #1a1a1a; } /* ════════════════════════════════════════════════ RESPONSIVE ════════════════════════════════════════════════ */ @media (max-width: 600px) { .scs-divider-watermark { opacity: .04; } #scs-bookmark-toast { bottom: 16px; } #scs-onboarding-toast { top: 14px; max-width: calc(100vw - 24px); } .scs-tick-tip { font-size: .65rem; } }