/* font-scale.css — Reed Light Books apps suite text-size system. * * Companion to font-scale.js. Provides: * 1. Toolbar styling (the Aa pill in the page header) * 2. Print-time override that locks PDFs to 16px unless the page asks * otherwise via class="rlb-print-at-user-scale". * * The actual text scaling is driven by font-scale.js setting * html { font-size: 13|16|20|24 px } — every rem in the cascade follows. */ /* ── Toolbar pill ─────────────────────────────────────────────────────── */ /* * Placement: the injector drops the pill as a direct child of
, * after the existing flex content. We float it into the header's top-right * corner with absolute positioning so it doesn't disrupt each page's * existing flex layout (which varies between pages). */ header { position: relative; } header > .rlb-fs-pill { position: absolute; top: 1rem; right: 1.25rem; z-index: 5; } /* On narrow screens, the corner can crowd existing right-side links — tuck * it under them instead of overlapping. */ @media (max-width: 720px) { header > .rlb-fs-pill { position: static; margin: 0.75rem auto 0; display: inline-flex; } } .rlb-fs-pill { display: inline-flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 999px; padding: 6px 12px; font-family: Georgia, 'Iowan Old Style', 'Palatino', serif; -webkit-user-select: none; user-select: none; } .rlb-fs-btn { background: transparent; border: 0; color: #C7CBD6; padding: 2px 6px; cursor: pointer; line-height: 1; font-family: inherit; font-weight: 500; transition: color 0.12s ease; } .rlb-fs-btn:hover { color: #FFFFFF; } .rlb-fs-btn:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.45); outline-offset: 2px; border-radius: 4px; } .rlb-fs-btn:disabled { color: rgba(255, 255, 255, 0.18); cursor: default; } /* Two sizes — the A itself signals direction */ .rlb-fs-btn--down { font-size: 12px; } .rlb-fs-btn--up { font-size: 22px; } .rlb-fs-dots { display: inline-flex; align-items: center; gap: 5px; } .rlb-fs-dot { border-radius: 50%; background: rgba(255, 255, 255, 0.18); transition: background 0.12s ease; } .rlb-fs-dot[data-i="0"] { width: 5px; height: 5px; } .rlb-fs-dot[data-i="1"] { width: 6px; height: 6px; } .rlb-fs-dot[data-i="2"] { width: 7px; height: 7px; } .rlb-fs-dot[data-i="3"] { width: 8px; height: 8px; } .rlb-fs-dot.is-active { background: #FFFFFF; } /* Light-header variant — for pages with white headers (none today, but * leaves the system future-proof). */ .rlb-fs-pill--light { background: rgba(46, 50, 71, 0.05); border-color: rgba(46, 50, 71, 0.18); } .rlb-fs-pill--light .rlb-fs-btn { color: #4A4F5E; } .rlb-fs-pill--light .rlb-fs-btn:hover { color: #0E0E12; } .rlb-fs-pill--light .rlb-fs-dot { background: rgba(46, 50, 71, 0.18); } .rlb-fs-pill--light .rlb-fs-dot.is-active { background: #2E3247; } /* ── Print override ──────────────────────────────────────────────────── */ /* * Default: printed PDFs always reset to 16px for consistency across users. * Opt-in: any page that wants the user's screen scale honored in print can * toggle class="rlb-print-at-user-scale" on before window.print(). */ @media print { html:not(.rlb-print-at-user-scale) { font-size: 16px !important; } }