/* ========================================================================== UNLOCKLUNA — READING TOOLS v1.6 (stylesheet) Screen styles for the two buttons + the @media print block. Used unchanged by index.html and compatibility.html. ========================================================================== */ /* -------------------------------------------------------------------------- SCREEN — the button bar The two apps use different CSS variable names for the same colours, so each value falls back through both before landing on a literal. -------------------------------------------------------------------------- */ .rt-bar { --rt-gold: var(--gold, var(--moon-gold, #e7c982)); --rt-cream: var(--moonlight, var(--text, #f6efdc)); --rt-edge: var(--glass-edge, var(--panel-edge, rgba(200, 184, 238, .22))); --rt-ink: var(--sky-top, #1a0f33); display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.5rem 0 1.6rem; /* bar sits above the reading */ } .rt-bar[hidden] { display: none; } .rt-btn { flex: 1 1 10.5rem; min-width: 9.5rem; cursor: pointer; font-family: "Cinzel", Georgia, serif; font-weight: 600; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; padding: .85rem 1rem; border-radius: 12px; border: 1px solid transparent; transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease; } /* Primary — Listen / Pause / Resume */ #rt-speak { color: var(--rt-ink); background: linear-gradient(135deg, #f6efdc, var(--rt-gold)); box-shadow: 0 10px 26px -12px rgba(231, 201, 130, .55); } #rt-speak:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -12px rgba(231, 201, 130, .65); } #rt-speak:active { transform: translateY(0); } /* Secondary — Save as PDF and Share */ #rt-pdf, #rt-share { color: var(--rt-gold); background: transparent; border-color: var(--rt-edge); } #rt-pdf:hover, #rt-share:hover { background: rgba(231, 201, 130, .08); } .rt-btn:focus-visible { outline: 2px solid var(--rt-gold); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .rt-btn { transition: none; } .rt-btn:hover { transform: none; } } @media (max-width: 420px) { .rt-btn { flex: 1 1 100%; } } /* The print-only clone is never shown on screen. */ #rt-print-doc { display: none; } /* -------------------------------------------------------------------------- PRINT Only #rt-print-doc survives. Because it's a direct child of , we can hide every other direct child outright — using display:none rather than visibility:hidden, so hidden elements leave no blank space behind. -------------------------------------------------------------------------- */ @page { margin: 18mm 16mm; } @media print { html.rt-printing, html.rt-printing body { background: #fff !important; background-image: none !important; background-attachment: initial !important; color: #111 !important; margin: 0 !important; padding: 0 !important; height: auto !important; min-height: 0 !important; overflow: visible !important; } /* Your night-sky gradient is background-attachment:fixed. Chrome can repaint a fixed background on EVERY printed page, which is what bloats the file. The rule above removes it; these remove any decorative pseudo-elements, which `body > *` cannot reach. */ html.rt-printing body::before, html.rt-printing body::after, html.rt-printing::before, html.rt-printing::after { display: none !important; content: none !important; background: none !important; } /* Everything goes... */ html.rt-printing body > * { display: none !important; } /* ...except the reading. */ html.rt-printing #rt-print-doc { display: block !important; position: static !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; background: #fff !important; color: #111 !important; font-family: "Cormorant Garamond", Georgia, serif; font-size: 12.5pt; line-height: 1.62; } /* Header: site name + document title + date */ html.rt-printing .rt-print-head { border-bottom: .75pt solid #c9c2d6; padding-bottom: 8pt; margin-bottom: 16pt; } html.rt-printing .rt-print-site { font-family: "Cinzel", Georgia, serif; font-size: 9pt; letter-spacing: .2em; text-transform: uppercase; color: #6b5b8a; } html.rt-printing .rt-print-title { font-family: "Cinzel", Georgia, serif; font-size: 17pt; font-weight: 600; margin: 5pt 0 3pt; color: #16121f; } html.rt-printing .rt-print-date { font-size: 9.5pt; color: #666; } /* Body: force every inherited colour back to black on white */ html.rt-printing #rt-print-doc * { background: transparent !important; color: #111 !important; text-shadow: none !important; box-shadow: none !important; border-color: #c9c2d6 !important; } html.rt-printing .rt-print-site { color: #6b5b8a !important; } html.rt-printing .rt-print-date { color: #666 !important; } /* Keep paragraphs from splitting badly: never leave fewer than three lines stranded at the top or bottom of a page. */ html.rt-printing .rt-print-body p { orphans: 3; widows: 3; margin: 0 0 10pt; } /* Headings stay with the text they introduce, and never break internally. */ html.rt-printing .rt-print-body h1, html.rt-printing .rt-print-body h2, html.rt-printing .rt-print-body h3, html.rt-printing .rt-print-body h4 { font-family: "Cinzel", Georgia, serif; font-size: 12.5pt; letter-spacing: .06em; margin: 16pt 0 6pt; break-inside: avoid; page-break-inside: avoid; break-after: avoid; page-break-after: avoid; } /* Short blocks stay whole. */ html.rt-printing .rt-print-body li, html.rt-printing .rt-print-body blockquote, html.rt-printing .rt-print-body figure, html.rt-printing .rt-print-body table { break-inside: avoid; page-break-inside: avoid; } html.rt-printing .rt-print-body blockquote { margin: 12pt 0; padding-left: 12pt; border-left: 1.5pt solid #c9c2d6; font-style: italic; } html.rt-printing .rt-print-body img { max-width: 100% !important; break-inside: avoid; page-break-inside: avoid; } /* Links print as plain text — no blue, no trailing URLs. */ html.rt-printing .rt-print-body a, html.rt-printing .rt-print-body a:visited { color: #111 !important; text-decoration: none !important; } html.rt-printing .rt-print-body a[href]::after { content: "" !important; } }