/* Reader mode stylesheet - activated when has .reader-mode */ body.reader-mode { background: #ffffff; color: #0b0b0b; line-height: 1.8; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body.reader-mode main { max-width: 70ch; margin: 3rem auto; padding: 1.5rem; font-size: 20px; font-family: Georgia, Cambria, 'Times New Roman', serif; background: #ffffff; color: inherit; box-shadow: none; } /* Hide anything marked as non-essential in reader mode */ body.reader-mode [data-reader-hide] { display: none !important; } /* Images should scale and not overflow */ body.reader-mode img { max-width: 100%; height: auto; display: block; margin: 1rem 0; } /* Links and headings tuned for readability */ body.reader-mode a { color: #1a73e8; text-decoration: underline; } body.reader-mode h1 { font-size: 2.2em; margin-top: 0.5em; } body.reader-mode h2 { font-size: 1.8em; } body.reader-mode h3 { font-size: 1.4em; } /* Remove background fills from nested components */ body.reader-mode * { background: transparent !important; } /* Small toggle button (visible only when NOT in reader mode) Positioned at the bottom-right so it doesn't overlap page headers or footers. */ .reader-toggle { /* Place the toggle in the footer flow (not fixed). It will appear at the end of the footer and align right. */ position: static; float: right; margin: 0 0 0.5rem 0; z-index: 9999; background: rgba(0,0,0,0.65); padding: 0.45rem 0.6rem; border-radius: 6px; box-shadow: 0 6px 18px rgba(0,0,0,0.12); } .reader-toggle a { color: #fff; font-size: 0.95rem; text-decoration: none; display: inline-block; } /* When in reader-mode, emphasise the exit control so users can get back to the normal site */ body.reader-mode .reader-toggle { background: rgba(255,255,255,0.95); box-shadow: 0 6px 18px rgba(0,0,0,0.08); } body.reader-mode .reader-toggle a { color: #111; } @media print { body.reader-mode { font-size: 12pt; } }