/* * Raconteur — reader features layer. * * Everything the reading experience needs that isn't the base design * system: the bookmark button, the typography popover, the resume bar, the * Continue-reading / Library item, and the Library page. * * Loaded after main.css and deliberately additive — it reuses main.css's * tokens (--rc-ink / --rc-paper / --rc-accent / --rc-sp-* / --rc-size-* / * --rc-font-* / --rc-line / --rc-glass-bg) and introduces no new palette * and no new named type sizes. The four reader-typography variables are * *modifiers* on the existing reading column, not a second type scale: * * --rc-reader-scale multiplier on the existing 1.15rem reading size * --rc-reader-lh line-height for the reading column * --rc-reader-measure max-width of the reading column * --rc-reader-font reading-column family (serif / sans / mono) * * They are set inline on .rc-reader by assets/js/raconteur-reader.js and * are entirely orthogonal to the paper/sepia/night colour toggle, which * writes data-read-mode on and only swaps colour tokens. * * @package Raconteur */ [hidden] { display: none !important; } /* ---------- Make the reader toolbar actually stick ---------- * * main.css declares `.rc-reader__toolbar { position: sticky; top: 0 }`, but * it has never stuck: `html, body { overflow-x: hidden }` turns both the * root and the body into scroll containers, and a sticky box can only stick * within its own scrollport — so the toolbar scrolled away with the text. * That is fatal for this feature: the bookmark button and the typography * popover live in that toolbar, and a "bookmark my current position" button * you have to scroll back to the top to reach cannot do its job. * * `overflow-x: clip` clips exactly like `hidden` but does NOT create a * scroll container, so sticky works again. Deliberately scoped to the * chapter reader: applying it site-wide would also switch on the (equally * dormant) sticky .site-header on every template, which is another * engineer's call to make, not this file's. * * On the reader itself the toolbar owns the top edge — the site header * scrolls away as chapter chrome should — which also avoids the header's * z-index 100 covering the toolbar's z-index 50. * * Browsers without overflow-x:clip or :has() simply keep today's behaviour. */ /* UPDATE: main.css now sets `overflow-x: clip` on html/body for every * template, so the two rules below are no longer what makes the toolbar * stick — they are kept because they are still correct and cost nothing. * * What DOES still matter here is the second rule. With the site header now * genuinely sticky everywhere, the chapter reader is the one page that must * opt out: its own toolbar owns the top edge (bookmark, typography, reading * mode), and a z-index-100 header would sit on top of a z-index-50 toolbar. * The header scrolls away as chapter chrome should, and the mode control it * carries is duplicated in the toolbar right below it. */ html:has(body.single-rc_chapter), body.single-rc_chapter { overflow-x: clip; } body.single-rc_chapter .site-header { position: static; } /* ---------- Reader typography (custom-property driven) ---------- */ .rc-reader .rc-reader__body { max-width: var(--rc-reader-measure, 700px); font-family: var(--rc-reader-font, var(--rc-font-text)); font-size: calc(1.15rem * var(--rc-reader-scale, 1)); line-height: var(--rc-reader-lh, 1.75); } .rc-reader[data-rc-typo-family="mono"] .rc-reader__body { font-size: calc(1.02rem * var(--rc-reader-scale, 1)); } /* ---------- Toolbar controls ---------- */ /* main.css gives .rc-reader__toolbar `display:flex; justify-content: * space-between`, but its single .wrap child is a flex item with no * flex-grow, so it shrink-wraps and the row bunches up in the middle. * Growing it puts the back-link on the left edge and the tools on the * right, which is what the space-between was reaching for. */ .rc-reader__toolbar .wrap { flex: 1 1 auto; } .rc-reader__tools { display: flex; align-items: center; gap: var(--rc-sp-2); flex-wrap: wrap; } /* The toolbar sits on --rc-read-bg, which is cream in paper/sepia mode, but * the back-link, pace widget and reading-mode toggle were all coloured with * the site-chrome cream tokens (--rc-paper-*) — legible only in night mode. * That was survivable while the toolbar scrolled away; now that it genuinely * sticks, it is on screen for the whole chapter, so it has to follow the * reading-mode foreground like everything else in .rc-reader. */ .rc-reader__toolbar .back-link, .rc-reader__toolbar .rc-pace-widget, .rc-reader__toolbar .read-mode-toggle button { color: var(--rc-read-fg); opacity: 0.78; } .rc-reader__toolbar .back-link:hover, .rc-reader__toolbar .read-mode-toggle button:hover { opacity: 1; } .rc-reader__toolbar .rc-pace-widget, .rc-reader__toolbar .read-mode-toggle { border-color: var(--rc-read-rule); } .rc-reader__toolbar .read-mode-toggle button.is-active { color: var(--rc-on-accent); opacity: 1; } .rc-bookmark-btn { display: inline-flex; align-items: center; gap: 0.45em; padding: 0.45em 0.9em; font-size: var(--rc-size-0); color: var(--rc-read-fg); border: 1px solid var(--rc-read-rule); border-radius: 999px; opacity: 0.8; transition: background 0.25s var(--rc-ease-out), border-color 0.25s var(--rc-ease-out), opacity 0.25s var(--rc-ease-out), color 0.25s var(--rc-ease-out); } .rc-bookmark-btn:hover, .rc-bookmark-btn:focus-visible { opacity: 1; border-color: var(--rc-accent); } .rc-bookmark-btn.is-active { background: var(--rc-accent); border-color: var(--rc-accent); color: var(--rc-on-accent); opacity: 1; } .rc-bookmark-btn.is-active svg { fill: currentColor; } @media (max-width: 860px) { .rc-bookmark-btn__label { display: none; } } /* ---------- Typography popover ---------- */ .rc-typo { position: relative; } .rc-typo__toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 32px; border: 1px solid var(--rc-read-rule); border-radius: 999px; color: var(--rc-read-fg); opacity: 0.8; transition: opacity 0.25s var(--rc-ease-out), border-color 0.25s var(--rc-ease-out); } .rc-typo__toggle:hover, .rc-typo__toggle:focus-visible { opacity: 1; border-color: var(--rc-accent); } .rc-typo.is-open .rc-typo__toggle { border-color: var(--rc-accent); opacity: 1; } .rc-typo__aa { font-family: var(--rc-font-display); font-size: var(--rc-size-0); line-height: 1; } .rc-typo__panel { position: absolute; top: calc(100% + 0.6rem); right: 0; z-index: 60; width: 268px; max-width: calc(100vw - var(--rc-sp-4) * 2); padding: var(--rc-sp-3); background: var(--rc-ink-soft); border: 1px solid var(--rc-line-strong); border-radius: 6px; box-shadow: var(--rc-shadow); color: var(--rc-paper); text-align: left; } /* On narrow screens the toolbar wraps, so anchoring a 268px panel to the * toggle's right edge pushes it off-screen. Below 720px it becomes a sheet * inset from both edges of the toolbar instead — .rc-typo goes static so the * panel resolves against the (already positioned) sticky toolbar. */ @media (max-width: 720px) { .rc-typo { position: static; } .rc-typo__panel { top: calc(100% + 0.4rem); left: var(--rc-sp-3); right: var(--rc-sp-3); width: auto; max-width: none; } } .rc-typo__group { margin: 0 0 var(--rc-sp-3); padding: 0; border: none; } .rc-typo__group:last-child { margin-bottom: 0; } .rc-typo__group legend { padding: 0 0 0.5rem; font-size: var(--rc-size-0); letter-spacing: 0.08em; text-transform: uppercase; color: var(--rc-paper-faint); } .rc-typo__opts { display: flex; gap: 0.35rem; } .rc-typo__opt { position: relative; flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 0.35em 0.5em; border: 1px solid var(--rc-line-strong); border-radius: var(--rc-radius); font-size: var(--rc-size-0); color: var(--rc-paper-dim); cursor: pointer; transition: background 0.2s var(--rc-ease-out), border-color 0.2s var(--rc-ease-out), color 0.2s var(--rc-ease-out); } .rc-typo__opt:hover { color: var(--rc-paper); border-color: var(--rc-line-strong); } .rc-typo__opt.is-active { background: var(--rc-accent); border-color: var(--rc-accent); color: var(--rc-on-accent); } .rc-typo__opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } .rc-typo__opt input:focus-visible { outline: none; } .rc-typo__opt:focus-within { outline: 2px solid var(--rc-accent-bright); outline-offset: 2px; } .rc-typo__swatch { font-family: var(--rc-font-text); line-height: 1; } .rc-typo__swatch--s0 { font-size: 0.72rem; } .rc-typo__swatch--s1 { font-size: 0.84rem; } .rc-typo__swatch--s2 { font-size: 0.98rem; } .rc-typo__swatch--s3 { font-size: 1.12rem; } .rc-typo__swatch--s4 { font-size: 1.3rem; } .rc-typo__opt--fserif span { font-family: var(--rc-font-text); } .rc-typo__opt--fsans span { font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; } .rc-typo__opt--fmono span { font-family: var(--rc-font-mono); font-size: 0.85em; } .rc-typo__sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* ---------- Resume bar ---------- */ .rc-resume { background: color-mix(in srgb, var(--rc-accent) 11%, transparent); border-bottom: 1px solid var(--rc-read-rule); color: var(--rc-read-fg); } .rc-resume__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--rc-sp-3); flex-wrap: wrap; padding-top: 0.7rem; padding-bottom: 0.7rem; } .rc-resume__text { display: flex; align-items: center; gap: 0.5em; flex-wrap: wrap; font-size: var(--rc-size-0); } .rc-resume__text svg { color: var(--rc-accent-bright); flex: none; } .rc-resume__pct { color: var(--rc-accent-bright); font-family: var(--rc-font-display); } .rc-resume__actions { display: flex; align-items: center; gap: 0.5rem; } .rc-resume__go { padding: 0.5em 1.1em; background: var(--rc-accent); color: var(--rc-on-accent); border-radius: 999px; font-size: var(--rc-size-0); font-weight: 700; transition: background 0.25s var(--rc-ease-out), transform 0.25s var(--rc-ease-out); } .rc-resume__go:hover { background: var(--rc-accent-bright); transform: translateY(-1px); } .rc-resume__dismiss { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 999px; color: var(--rc-read-fg); opacity: 0.55; transition: opacity 0.25s var(--rc-ease-out); } .rc-resume__dismiss:hover { opacity: 1; } /* ---------- Continue-reading / Library items ---------- */ .rc-item-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--rc-sp-3); } .rc-item { display: flex; flex-direction: column; gap: 0.4rem; padding: var(--rc-sp-3); background: var(--rc-glass-bg); border: 1px solid var(--rc-glass-border); border-radius: 6px; transition: border-color 0.3s var(--rc-ease-out), transform 0.3s var(--rc-ease-out); } .rc-item:hover { border-color: var(--rc-accent); transform: translateY(-2px); } .rc-item__novel { font-size: var(--rc-size-0); letter-spacing: 0.09em; text-transform: uppercase; color: var(--rc-paper-faint); } .rc-item__title { font-family: var(--rc-font-display); font-weight: 700; font-size: var(--rc-size-2); line-height: 1.2; color: var(--rc-paper); } .rc-item__note { font-size: var(--rc-size-0); line-height: 1.5; color: var(--rc-paper-dim); border-left: 2px solid var(--rc-accent); padding-left: 0.7em; font-style: italic; } .rc-item__bar { display: block; height: 4px; margin-top: 0.3rem; background: var(--rc-line); border-radius: 999px; overflow: hidden; } .rc-item__fill { display: block; height: 100%; background: linear-gradient(90deg, var(--rc-accent), var(--rc-accent-bright)); border-radius: inherit; } .rc-item__meta { font-size: var(--rc-size-0); color: var(--rc-paper-faint); } .rc-continue-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--rc-sp-3); flex-wrap: wrap; margin-bottom: var(--rc-sp-4); } /* ---------- My Library page ---------- */ /* The three groups are real
s, so main.css's blanket * `section { padding: var(--rc-sp-7) 0 }` would stack ~12rem of dead air * between them. Rhythm here is owned by the group's own margin. */ .rc-library__group { padding: 0; margin-bottom: var(--rc-sp-6); } .rc-library__group:last-of-type { margin-bottom: 0; } .rc-library__head { margin-bottom: var(--rc-sp-3); } .rc-library__hint { margin-top: 0.3rem; font-size: var(--rc-size-0); color: var(--rc-paper-faint); } .rc-library__empty { padding: var(--rc-sp-5); border: 1px dashed var(--rc-line-strong); border-radius: 6px; background: var(--rc-ink-soft); } .rc-library__empty h2 { margin-bottom: var(--rc-sp-2); } .rc-library__empty p { margin-bottom: var(--rc-sp-2); color: var(--rc-paper-dim); max-width: 56ch; } .rc-library__empty ul { margin: 0 0 var(--rc-sp-3); display: grid; gap: 0.6rem; } .rc-library__empty li { display: flex; gap: 0.7em; align-items: flex-start; font-size: var(--rc-size-0); color: var(--rc-paper-dim); } .rc-library__empty li svg { flex: none; margin-top: 0.2em; color: var(--rc-accent-bright); } .rc-library__empty-actions { display: flex; gap: var(--rc-sp-2); flex-wrap: wrap; margin-top: var(--rc-sp-3); } .rc-library__manage { margin-top: var(--rc-sp-6); padding-top: var(--rc-sp-4); border-top: 1px solid var(--rc-line); } .rc-library__manage-note { font-size: var(--rc-size-0); color: var(--rc-paper-faint); max-width: 56ch; margin-bottom: var(--rc-sp-2); } .rc-library__clear { padding: 0.55em 1.2em; border: 1px solid var(--rc-line-strong); border-radius: 999px; font-size: var(--rc-size-0); color: var(--rc-paper-dim); transition: border-color 0.25s var(--rc-ease-out), color 0.25s var(--rc-ease-out); } .rc-library__clear:hover { border-color: var(--rc-accent); color: var(--rc-paper); } .rc-library__confirm { padding: var(--rc-sp-3); border: 1px solid var(--rc-accent); border-radius: 6px; background: color-mix(in srgb, var(--rc-accent) 9%, transparent); max-width: 46rem; } .rc-library__confirm p { margin-bottom: var(--rc-sp-3); font-size: var(--rc-size-0); color: var(--rc-paper-dim); } .rc-library__confirm-actions { display: flex; gap: var(--rc-sp-2); flex-wrap: wrap; } .rc-library__done { margin-top: var(--rc-sp-2); font-size: var(--rc-size-0); color: var(--rc-moss-bright); } @media (prefers-reduced-motion: reduce) { .rc-item, .rc-resume__go, .rc-typo__opt, .rc-bookmark-btn, .rc-typo__toggle { transition: none; } .rc-item:hover, .rc-resume__go:hover { transform: none; } }