/* reader.css — SciDEX focused single-column reading mode * Applied when is set (via ?reader=1 or localStorage). */ /* ── Core layout ─────────────────────────────────────────────────── */ body.reader-mode { background: #0e0e1a; } body.reader-mode #main-content { max-width: clamp(36ch, 72ch, 72ch); margin: 0 auto; padding: 2rem 1.5rem 4rem; } /* ── Typography ──────────────────────────────────────────────────── */ body.reader-mode .wiki-body, body.reader-mode .reader-article, body.reader-mode article { font-family: Georgia, 'Times New Roman', Times, serif; font-size: 18px; line-height: 1.6; color: #ddd; } body.reader-mode .wiki-body p, body.reader-mode .reader-article p { margin-bottom: 1.1em; } body.reader-mode .wiki-body h1, body.reader-mode .wiki-body h2, body.reader-mode .wiki-body h3 { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; margin-top: 1.8em; margin-bottom: 0.6em; } /* ── Hide chrome ─────────────────────────────────────────────────── */ body.reader-mode .kg-widget, body.reader-mode .tool-panel, body.reader-mode .right-sidebar, body.reader-mode .market-strip, body.reader-mode .tour-anchor, body.reader-mode .wiki-toc, body.reader-mode .wiki-sidebar, body.reader-mode .scidex-sidebar, body.reader-mode .sidebar-overlay, body.reader-mode .footer { display: none !important; } /* ── Hide full nav; show reader nav ──────────────────────────────── */ body.reader-mode nav { display: none !important; } body.reader-mode .reader-nav { display: flex !important; } /* ── Reader nav strip ────────────────────────────────────────────── */ .reader-nav { display: none; align-items: center; gap: 0.8rem; padding: 0.55rem 1rem; background: rgba(10, 10, 20, 0.95); border-bottom: 1px solid rgba(255, 255, 255, 0.08); position: sticky; top: 0; z-index: 500; backdrop-filter: blur(10px); box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3); } .reader-nav .rn-back { color: #adb5bd; background: none; border: none; font-size: 1.1rem; cursor: pointer; padding: 0.25rem 0.45rem; border-radius: 4px; text-decoration: none; line-height: 1; transition: color 0.15s; flex-shrink: 0; } .reader-nav .rn-back:hover { color: #fff; } .reader-nav .rn-brand { font-size: 1.2rem; font-weight: 800; background: linear-gradient(135deg, #4fc3f7, #81c784); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-decoration: none; flex-shrink: 0; } .reader-nav .rn-read-time { margin-left: auto; color: #666; font-size: 0.8rem; white-space: nowrap; } .reader-nav .rn-exit { color: #666; font-size: 0.75rem; text-decoration: none; padding: 0.2rem 0.5rem; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 4px; transition: all 0.15s; flex-shrink: 0; } .reader-nav .rn-exit:hover { color: #adb5bd; border-color: rgba(255, 255, 255, 0.2); text-decoration: none; } /* ── Reader toggle pill (mobile nav) ─────────────────────────────── */ .reader-toggle-pill { display: none; align-items: center; gap: 0.3rem; padding: 0.22rem 0.55rem; border-radius: 12px; border: 1px solid rgba(79, 195, 247, 0.35); background: rgba(79, 195, 247, 0.1); color: #4fc3f7; font-size: 0.7rem; font-weight: 600; cursor: pointer; text-decoration: none; transition: all 0.15s; margin-left: auto; white-space: nowrap; } .reader-toggle-pill:hover { background: rgba(79, 195, 247, 0.2); text-decoration: none; } @media (max-width: 768px) { .reader-toggle-pill { display: inline-flex; } } /* ── "Next article" footer ───────────────────────────────────────── */ .reader-next { display: none; margin-top: 3rem; padding: 1.5rem; background: rgba(255, 255, 255, 0.025); border-top: 1px solid rgba(255, 255, 255, 0.08); border-radius: 8px; } body.reader-mode .reader-next { display: block; } .reader-next h3 { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: #555; margin-bottom: 1rem; font-weight: 700; } .reader-next-card { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.75rem 1rem; background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 8px; margin-bottom: 0.6rem; text-decoration: none; color: inherit; transition: border-color 0.15s, background 0.15s; } .reader-next-card:hover { border-color: rgba(79, 195, 247, 0.3); background: rgba(79, 195, 247, 0.05); text-decoration: none; } .reader-next-card .rnc-type { font-size: 0.68rem; color: #4fc3f7; text-transform: capitalize; font-weight: 600; letter-spacing: 0.04em; } .reader-next-card .rnc-title { color: #e0e0e0; font-size: 0.88rem; font-weight: 600; line-height: 1.4; } /* ── Wiki layout override in reader mode ────────────────────────── */ body.reader-mode .wiki-layout { display: block !important; max-width: 100%; } /* ── Dark mode ───────────────────────────────────────────────────── */ @media (prefers-color-scheme: dark) { body.reader-mode { background: #080810; } body.reader-mode .wiki-body, body.reader-mode .reader-article, body.reader-mode article { color: #c8c8d0; } body.reader-mode .reader-nav { background: rgba(5, 5, 12, 0.98); } body.reader-mode .reader-next { background: rgba(255, 255, 255, 0.015); border-color: rgba(255, 255, 255, 0.06); } body.reader-mode .reader-next-card { background: rgba(255, 255, 255, 0.025); border-color: rgba(255, 255, 255, 0.06); } } /* ── Print parity ────────────────────────────────────────────────── */ @media print { nav, .scidex-sidebar, .sidebar-overlay, .wiki-sidebar, .wiki-toc, .right-sidebar, .kg-widget, .tool-panel, .market-strip, .tour-anchor, .footer, .reader-nav, .reader-next, .reader-toggle-pill { display: none !important; } #main-content { max-width: 72ch; margin: 0 auto; padding: 1rem; } .wiki-layout { display: block !important; } body { font-family: Georgia, 'Times New Roman', Times, serif; font-size: 12pt; line-height: 1.6; color: #000 !important; background: #fff !important; } a { color: inherit; text-decoration: none; } h1, h2, h3 { page-break-after: avoid; } p, li { orphans: 3; widows: 3; } }