/* * Legacy Systems reading theme — scoped entirely to body.q52-ls-reading * (added by q52-legacy-systems.php's body_class filter, keyed on the * legacy_chapter post meta so it only ever applies to actual chapters, * never the rest of q52.ai). Everything here is additive/override CSS on * top of the yith-wonder-child template, not a replacement theme. * * Color scheme: warm parchment by default, with an explicit dark-mode * toggle (see reading-theme.js) that persists to localStorage and falls * back to the visitor's OS preference on first visit. The toggle sets * data-ls-theme="light"|"dark" on ; that always wins over the * prefers-color-scheme fallback below. */ body.q52-ls-reading { --ls-bg: #f2e9d3; --ls-card: #f8f1e1; --ls-text: #2a2418; --ls-text-muted: #6b5f48; --ls-accent: #8a2418; --ls-border: rgba(42, 36, 24, 0.16); --ls-grain-opacity: 0.05; } @media (prefers-color-scheme: dark) { html:not([data-ls-theme]) body.q52-ls-reading { --ls-bg: #1a170f; --ls-card: #201c13; --ls-text: #e6ddc4; --ls-text-muted: #a99d80; --ls-accent: #d97a63; --ls-border: rgba(230, 221, 196, 0.14); --ls-grain-opacity: 0.06; } } html[data-ls-theme="dark"] body.q52-ls-reading { --ls-bg: #1a170f; --ls-card: #201c13; --ls-text: #e6ddc4; --ls-text-muted: #a99d80; --ls-accent: #d97a63; --ls-border: rgba(230, 221, 196, 0.14); --ls-grain-opacity: 0.06; } html[data-ls-theme="light"] body.q52-ls-reading { --ls-bg: #f2e9d3; --ls-card: #f8f1e1; --ls-text: #2a2418; --ls-text-muted: #6b5f48; --ls-accent: #8a2418; --ls-border: rgba(42, 36, 24, 0.16); --ls-grain-opacity: 0.05; } body.q52-ls-reading { background-color: var(--ls-bg); transition: background-color 0.25s ease; } /* Custom header content (e.g. a masthead heading) sometimes carries a hardcoded WP color preset like has-black-color, chosen against whatever backdrop was behind it at the time. That reads fine in light mode but goes dark-on-dark the moment the page background switches to the dark palette above — force those back to a readable, theme-aware color only when dark mode is actually active. */ html[data-ls-theme="dark"] body.q52-ls-reading .has-black-color { color: var(--ls-text) !important; } @media (prefers-color-scheme: dark) { html:not([data-ls-theme]) body.q52-ls-reading .has-black-color { color: var(--ls-text) !important; } } /* Shrink the shared site masthead on single chapter pages only — it's still the same header template part, just given less vertical weight so it reads as a wrapper around the series rather than the main event. Scoped to body.single specifically (not just .q52-ls-reading) so the category archive — which carries .q52-ls-reading too now — keeps its header at full size and full width; transform: scale() shrinks rendered width as well as height, which is what made the archive header look constrained. */ body.single.q52-ls-reading header.wp-block-template-part { min-height: 0 !important; padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; transform: scale(0.82); transform-origin: top center; } /* --------------------------------------------------------------------- * The Legacy Systems masthead — series wordmark + dark-mode toggle. * Static branding, not per-post content, so it lives in the template as * plain HTML rather than a block an author would need to edit. * ------------------------------------------------------------------- */ .q52-ls-masthead { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.9rem 0; border-bottom: 1px solid var(--ls-border); color: var(--ls-text); } .q52-ls-masthead__wordmark { font-family: "Playfair Display", Charter, "Bitstream Charter", Cambria, serif; font-size: 0.95rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ls-text); text-decoration: none; } .q52-ls-masthead__tag { display: block; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 0.62rem; font-weight: 400; letter-spacing: 0.1em; text-transform: none; color: var(--ls-text-muted); margin-top: 0.15em; } .q52-ls-theme-toggle { display: inline-flex; align-items: center; gap: 0.4em; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 0.72rem; letter-spacing: 0.04em; background: transparent; border: 1px solid var(--ls-border); border-radius: 999px; padding: 0.4em 0.85em; color: var(--ls-text-muted); cursor: pointer; } .q52-ls-theme-toggle:hover, .q52-ls-theme-toggle:focus-visible { color: var(--ls-text); border-color: var(--ls-accent); } .q52-ls-theme-toggle__icon { font-size: 0.9em; line-height: 1; } /* --------------------------------------------------------------------- * The paper card — wraps title through the poll block. A grain texture * (pure CSS/SVG noise, no image request) is layered under the content on * a warm off-white ground so it reads as a page, not a UI panel. * ------------------------------------------------------------------- */ .q52-ls-paper { position: relative; background-color: var(--ls-card); border: 1px solid var(--ls-border); border-radius: 3px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 12px 32px rgba(0, 0, 0, 0.12); color: var(--ls-text); padding: clamp(1.75rem, 5vw, 3.5rem); } .q52-ls-paper::before { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-repeat: repeat; opacity: var(--ls-grain-opacity); mix-blend-mode: multiply; } html[data-ls-theme="dark"] .q52-ls-paper::before { mix-blend-mode: screen; } @media (prefers-color-scheme: dark) { html:not([data-ls-theme]) .q52-ls-paper::before { mix-blend-mode: screen; } } /* Chapter kicker/title/date inherit the paper's ink color instead of the dark-theme cyan/red the rest of the site uses for these blocks. */ .q52-ls-paper .wp-block-post-terms, .q52-ls-paper .wp-block-post-terms a { color: var(--ls-accent) !important; } .q52-ls-paper .wp-block-post-title { color: var(--ls-text) !important; } .q52-ls-paper .wp-block-post-date { color: var(--ls-text-muted) !important; } /* The chapter text itself — serif throughout, sized for long-form reading. */ .q52-ls-paper .wp-block-post-content, .q52-ls-paper .wp-block-post-content p { color: var(--ls-text) !important; font-family: Merriweather, Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif; font-size: 1.08rem; line-height: 1.75; } .q52-ls-paper .wp-block-post-content p:first-of-type::first-letter { font-family: "Playfair Display", Charter, Cambria, serif; font-size: 3.4em; line-height: 0.85; float: left; padding: 0.05em 0.08em 0 0; color: var(--ls-accent); } .q52-ls-paper .wp-block-separator { border-color: var(--ls-border) !important; color: var(--ls-border) !important; } /* Jetpack's sharing module ("Share this:") auto-injects into the_content — outside our control, styled with Jetpack's own default link-blue CSS regardless of theme. Not scoped to .wp-block-post-content p like the paragraph rule above, since this markup is headings/list links, not

. */ .q52-ls-paper .sd-title { color: var(--ls-text) !important; } .q52-ls-paper .sd-sharing a, .q52-ls-paper .sd-sharing a:visited, .q52-ls-paper .sd-sharing a:hover { color: var(--ls-text) !important; } /* --------------------------------------------------------------------- * Category archive (/category/legacy-systems/) — same grain/paper/serif * system as a chapter page, applied to a grid of cards instead of a single * reading column. The hero banner (archive-hero-legacy-systems template * part) is untouched — this only covers the main content area below it. * ------------------------------------------------------------------- */ .q52-ls-archive { position: relative; } .q52-ls-archive::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-repeat: repeat; opacity: var(--ls-grain-opacity); mix-blend-mode: multiply; } html[data-ls-theme="dark"] .q52-ls-archive::before { mix-blend-mode: screen; } @media (prefers-color-scheme: dark) { html:not([data-ls-theme]) .q52-ls-archive::before { mix-blend-mode: screen; } } .q52-ls-archive .wp-block-post-title, .q52-ls-archive .wp-block-post-title a { color: var(--ls-accent) !important; font-family: "Playfair Display", Charter, Cambria, serif; } .q52-ls-archive .wp-block-post-excerpt, .q52-ls-archive .wp-block-post-excerpt p { color: var(--ls-text-muted) !important; font-family: Merriweather, Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif; } .q52-ls-archive .wp-block-post-template > li { background-color: var(--ls-card); border: 1px solid var(--ls-border); border-radius: 3px; padding: 1.1rem 1.1rem 1.4rem; } .q52-ls-archive .wp-block-query-pagination, .q52-ls-archive .wp-block-query-pagination a, .q52-ls-archive .wp-block-query-pagination-previous, .q52-ls-archive .wp-block-query-pagination-next { color: var(--ls-text) !important; } .q52-ls-archive .wp-block-query-no-results p { color: var(--ls-text-muted) !important; } /* Page-level heading on term archives (ls_character/ls_faction) — the card-title treatment scaled up, not the paper's H1 (there's no paper wrapper on these list pages). */ .q52-ls-archive-title { color: var(--ls-accent); font-family: "Playfair Display", Charter, Cambria, serif; } .q52-ls-archive-title .wp-block-query-title { color: inherit !important; }