/** * Discover shell — critical styles for the /discover SSR page. * * Previously inlined as a TS template literal inside `src/ssr/discover.ts`. * Moved here so the styles are lintable, minifiable, and cacheable by the * static asset pipeline. The page links this file directly in ``. */ :root { color-scheme: light; --discover-control-surface: rgba(255, 255, 255, 0.92); --discover-control-surface-hover: rgba(255, 255, 255, 0.98); --discover-control-border: rgba(0, 0, 0, 0.1); --discover-control-border-hover: rgba(0, 0, 0, 0.16); --discover-control-ink: var(--text-primary, #000); --discover-control-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); --discover-control-shadow-hover: 0 2px 6px rgba(0, 0, 0, 0.08); } @media (prefers-color-scheme: dark) { :root { color-scheme: dark; --discover-control-surface: rgba(28, 28, 36, 0.74); --discover-control-surface-hover: rgba(38, 38, 48, 0.9); --discover-control-border: rgba(255, 255, 255, 0.16); --discover-control-border-hover: rgba(255, 255, 255, 0.26); --discover-control-ink: var(--text-primary, #fff); --discover-control-shadow: 0 8px 24px rgba(0, 0, 0, 0.22); --discover-control-shadow-hover: 0 10px 30px rgba(0, 0, 0, 0.3); } } .discover-shell { flex: 1; display: flex; flex-direction: column; } .discover-empty { display: none; align-items: center; justify-content: center; height: 100dvh; text-align: center; padding: 32px 20px; } .discover-empty[data-visible="true"] { display: flex; } .discover-empty-inner { max-width: 420px; } .discover-empty-title { margin: 0 0 12px; font-size: 1.6rem; color: var(--text-primary); } .discover-empty-copy { margin: 0 0 20px; color: var(--text-secondary); font-size: 1rem; line-height: 1.5; } .discover-empty-cta { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; min-height: 44px; border-radius: 999px; background: var(--text-primary); color: var(--bg-primary, #fff); font-family: var(--font-sans); font-size: 0.95rem; font-weight: 500; text-decoration: none; transition: opacity 160ms ease; } .discover-empty-cta:hover { opacity: 0.88; } /** * Loading state — surfaced by ui.js show/hideLoadingState as a sibling of * #reader-root. Previously the DOM was missing, so the show/hide calls were * silent no-ops and slow networks left the previous gist frozen with no * feedback. */ .discover-loading { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; pointer-events: none; z-index: 150; } .discover-loading[data-visible="true"] { display: flex; } .discover-loading-spinner { width: 28px; height: 28px; border-radius: 50%; border: 2px solid rgba(0, 0, 0, 0.12); border-top-color: var(--text-primary); animation: discover-loading-spin 720ms linear infinite; } @keyframes discover-loading-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .discover-loading-spinner { animation: none; border-top-color: transparent; background: var(--text-secondary, rgba(0,0,0,0.4)); } } /** * Discover feed controls — a quiet pair of actions docked top-right. * * Two actions only: Like (heart) and Next. Backward navigation is delivered * by the reader's `gist:feedEdgeRetreat` event at the slide boundary, not a * chrome button. * * STACKING: reader .header uses z-index 100 with opaque background in the * same top band. Controls must sit above it (200), below modals (1000+). */ .discover-controls { position: fixed; top: max(22px, env(safe-area-inset-top, 0)); right: max(22px, env(safe-area-inset-right, 0)); display: flex; align-items: center; gap: 8px; background: transparent; border: 0; color: var(--discover-control-ink); padding: 0; opacity: 0; pointer-events: none; transition: opacity 200ms ease; z-index: 200; } .discover-controls[data-visible="true"] { opacity: 1; pointer-events: auto; } .discover-control { pointer-events: auto; display: inline-flex; align-items: center; justify-content: center; height: 36px; border-radius: 999px; border: 1px solid var(--discover-control-border); background: var(--discover-control-surface); color: var(--discover-control-ink); font-family: var(--font-sans); cursor: pointer; backdrop-filter: saturate(140%) blur(8px); -webkit-backdrop-filter: saturate(140%) blur(8px); box-shadow: var(--discover-control-shadow); transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 120ms ease, box-shadow 160ms ease; } .discover-control:hover:not(:disabled) { background: var(--discover-control-surface-hover); border-color: var(--discover-control-border-hover); box-shadow: var(--discover-control-shadow-hover); } .discover-control:active:not(:disabled) { transform: translateY(1px); } .discover-control:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; transform: none; } /** * Like — icon-only heart. Square so it reads as an icon button, not a * truncated text button. Subtle outline at rest; fills red when liked. */ .discover-control--like { width: 36px; padding: 0; } .discover-control--like .discover-control-heart { width: 18px; height: 18px; display: block; fill: none; stroke: currentColor; stroke-width: 1.75; transition: fill 180ms ease, stroke 180ms ease, transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1); } .discover-control--like[data-liked="true"] { border-color: #e0245e; color: #e0245e; } .discover-control--like[data-liked="true"] .discover-control-heart { fill: #e0245e; stroke: #e0245e; transform: scale(1.12); } /** * Next — the primary action of the feed. Slightly more weight than Like * via wider padding and a hair more ink. The arrow does the work that * the word "Next" alone can't: it points. */ .discover-control--skip { padding: 0 16px; font-size: 0.9rem; font-weight: 500; letter-spacing: -0.005em; gap: 8px; } .discover-control--skip .discover-control-arrow { font-size: 1rem; line-height: 1; transition: transform 180ms ease; } .discover-control--skip:hover:not(:disabled) .discover-control-arrow { transform: translateX(2px); } /** * First-run feed hint — a quiet, one-time whisper docked just under the Next * control. It teaches the feed's defining property ("a new paper every time") * for the visitor who reads the screen rather than the button's aria-label. * * Non-blocking by construction: pointer-events:none so it never intercepts a * tap, sits just below the controls in the stack (199 vs 200), and is decorative * (aria-hidden in the markup) because the Next button is already labeled * "Go to next paper" for assistive tech. JS toggles data-visible. */ .discover-feed-hint { position: fixed; top: calc(max(22px, env(safe-area-inset-top, 0)) + 46px); right: max(22px, env(safe-area-inset-right, 0)); max-width: min(70vw, 240px); padding: 8px 12px; border-radius: 12px; background: var(--discover-control-surface); border: 1px solid var(--discover-control-border); color: var(--discover-control-ink); box-shadow: var(--discover-control-shadow); backdrop-filter: saturate(140%) blur(8px); -webkit-backdrop-filter: saturate(140%) blur(8px); font-family: var(--font-sans); font-size: 0.85rem; line-height: 1.3; text-align: right; opacity: 0; transform: translateY(-4px); transition: opacity 240ms ease, transform 240ms ease; pointer-events: none; z-index: 199; } .discover-feed-hint[data-visible="true"] { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .discover-feed-hint { transition: opacity 240ms ease; transform: none; } .discover-feed-hint[data-visible="true"] { transform: none; } } @media (max-width: 600px) { .discover-controls { top: max(14px, env(safe-area-inset-top, 0)); right: max(14px, env(safe-area-inset-right, 0)); gap: 6px; } /** * 44px minimum touch target on mobile per Apple HIG / WCAG 2.5.5. * Visible chrome stays compact via padding; only the hit area grows. */ .discover-control { height: 44px; } .discover-control--like { width: 44px; } .discover-control--like .discover-control-heart { width: 18px; height: 18px; } .discover-control--skip { padding: 0 16px; font-size: 0.9rem; } .discover-feed-hint { top: calc(max(14px, env(safe-area-inset-top, 0)) + 52px); right: max(14px, env(safe-area-inset-right, 0)); } } /** * Reserve right-edge space in the reader header so .title-cluster * truncates before reaching the fixed-position .discover-controls. * * Without this, .title-cluster (flex: 1 inside .header-content) grows * to the full header width, then the controls overlay paints on top of * the title. Reserving margin-right teaches the title where the chrome * starts. * * One value covers both breakpoints because the controls' horizontal * footprint barely changes across them: at ≤600px the like button * grows (44 vs 36px) but the right offset shrinks (14 vs 22px), so the * total reserved span stays within ~2px. 160px clears the controls * with ~25px of gap on desktop and ~27px on a 390px mobile viewport. * * Scoped to data-reader-context="feed" so it only applies on /discover, * not /share or /extension reader surfaces. */ body[data-reader-context="feed"] .title-cluster { margin-right: 160px; }