/* ========================================================================= BSV Search Spring - the Creations reading page (4.10.0) Loaded only on an mc_article full view. Everything is driven by four custom properties set on by js/reader.js, so a theme or font change is one attribute flip and never touches the cached HTML. ========================================================================= */ :root { --r-serif: "Source Serif 4", Georgia, "Iowan Old Style", "Times New Roman", serif; --r-sans: "Source Sans 3", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; --r-wide: Verdana, "DejaVu Sans", Tahoma, Geneva, sans-serif; --r-font: var(--r-serif); --r-size: 1.1875rem; /* 19px */ --r-measure: 68ch; /* Sepia is the default ground: warm, low-glare, and visibly a choice someone made rather than a page that forgot to be styled. A reader who picks another theme overrides it below. */ --r-bg: #f4ecd8; --r-ink: #3a3129; --r-soft: #6d5f4c; --r-rule: #e2d7bf; --r-link: #8a5212; --r-bar: #efe5cdee; } /* Typeface ------------------------------------------------------------- */ :root[data-reader-font="sans"] { --r-font: var(--r-sans); } :root[data-reader-font="wide"] { --r-font: var(--r-wide); } :root[data-reader-font="serif"] { --r-font: var(--r-serif); } /* Text size ------------------------------------------------------------ */ :root[data-reader-size="s"] { --r-size: 1.0625rem; } :root[data-reader-size="m"] { --r-size: 1.1875rem; } :root[data-reader-size="l"] { --r-size: 1.375rem; } /* Themes. Sepia is the bare :root above, so it needs no block of its own - but it keeps one anyway, so that choosing Sepia explicitly still wins over the prefers-color-scheme rule at the foot of this group. ------------- */ :root[data-reader-theme="light"] { --r-bg:#ffffff; --r-ink:#1f2933; --r-soft:#5a6b80; --r-rule:#e4e9f0; --r-link:#175CB8; --r-bar:#fbfcfeee; } :root[data-reader-theme="sepia"] { --r-bg:#f4ecd8; --r-ink:#3a3129; --r-soft:#6d5f4c; --r-rule:#e2d7bf; --r-link:#8a5212; --r-bar:#efe5cdee; } :root[data-reader-theme="dark"] { --r-bg:#1b1f24; --r-ink:#d8dde3; --r-soft:#9aa5b1; --r-rule:#2d343c; --r-link:#7ab3ff; --r-bar:#151a1fee; } :root[data-reader-theme="night"] { --r-bg:#000000; --r-ink:#c6ccd4; --r-soft:#8a939f; --r-rule:#22262b; --r-link:#6fa8ff; --r-bar:#000000ee; } /* No stored choice and the device prefers dark: follow it. */ @media (prefers-color-scheme: dark) { :root:not([data-reader-theme]) { --r-bg:#1b1f24; --r-ink:#d8dde3; --r-soft:#9aa5b1; --r-rule:#2d343c; --r-link:#7ab3ff; --r-bar:#151a1fee; } } html:has(.reader), body:has(.reader) { background: var(--r-bg); } .reader { min-height: 100vh; background: var(--r-bg); color: var(--r-ink); font-family: var(--r-font); } /* The bar: back to Creations on the left, reading settings on the right - */ .reader-bar { position: sticky; top: 0; z-index: 30; background: var(--r-bar); backdrop-filter: saturate(160%) blur(8px); border-bottom: 1px solid var(--r-rule); } .reader-bar-inner { max-width: 62rem; margin: 0 auto; padding: 10px 20px; display: flex; align-items: center; gap: 14px; } .reader-back { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--r-soft); font-family: var(--r-sans); font-size: .875rem; } .reader-back:hover { color: var(--r-ink); } .reader-back-arrow { font-size: 1.125rem; line-height: 1; } /* The site logo is a white lockup on transparent, so it sits on a navy chip - the same navy as the masthead - and stays legible in all four reader themes. */ .reader-mark { display: inline-flex; align-items: center; background: #14263E; border-radius: 5px; padding: 4px 8px; } .reader-mark img { height: 15px; width: auto; display: block; } .reader-bar-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; } .reader-edit, .reader-aa { font-family: var(--r-sans); font-size: .8125rem; color: var(--r-soft); background: none; border: 1px solid var(--r-rule); border-radius: 6px; padding: 5px 10px; cursor: pointer; text-decoration: none; line-height: 1; } .reader-edit:hover, .reader-aa:hover { color: var(--r-ink); border-color: var(--r-soft); } .reader-aa { font-family: var(--r-serif); } .reader-aa-big { font-size: 1.0625rem; } /* Reading settings ----------------------------------------------------- */ .reader-prefs { border-top: 1px solid var(--r-rule); background: var(--r-bar); } .reader-prefs[hidden] { display: none; } .reader-prefs-inner { max-width: 62rem; margin: 0 auto; padding: 14px 20px 16px; display: flex; flex-wrap: wrap; gap: 22px; } .reader-prefs-group { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .reader-prefs-label { font-family: var(--r-sans); font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--r-soft); margin-right: 2px; } .reader-prefs-group button { font-family: var(--r-sans); font-size: .8125rem; color: var(--r-ink); background: transparent; border: 1px solid var(--r-rule); border-radius: 6px; padding: 5px 11px; cursor: pointer; } .reader-prefs-group button:hover { border-color: var(--r-soft); } .reader-prefs-group button[aria-pressed="true"] { border-color: var(--r-ink); box-shadow: inset 0 0 0 1px var(--r-ink); font-weight: 600; } .reader-prefs-group button[data-reader-set="font"][data-reader-value="serif"] { font-family: var(--r-serif); } .reader-prefs-group button[data-reader-set="font"][data-reader-value="sans"] { font-family: var(--r-sans); } .reader-prefs-group button[data-reader-set="font"][data-reader-value="wide"] { font-family: var(--r-wide); } /* The author masthead, in place of the site header --------------------- */ .reader-masthead { padding: 40px 0 6px; display: flex; align-items: center; gap: 14px; } .reader-author-photo { display: block; flex: none; } .reader-author-photo img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; display: block; border: 1px solid var(--r-rule); } .reader-author-name { font-family: var(--r-sans); font-size: 1.0625rem; font-weight: 600; color: var(--r-ink); text-decoration: none; } .reader-author-name:hover { text-decoration: underline; } /* The article ---------------------------------------------------------- */ /* Layout. The article keeps its measure; the rail sits in space the centred column leaves empty, so the reading is untouched. Below 1150px the rail stacks under the article instead. */ .reader-body { padding: 0 20px; } .reader-col { max-width: var(--r-measure); margin: 0 auto; } .reader-main { padding: 0 0 56px; } .reader-rail { max-width: var(--r-measure); margin: 0 auto; padding: 0 0 72px; } @media (min-width: 1150px) { .reader-body { display: grid; grid-template-columns: minmax(0, var(--r-measure)) 264px; justify-content: center; align-items: start; gap: 52px; } .reader-col { margin: 0; max-width: none; } .reader-rail { margin: 0; max-width: none; padding: 46px 0 72px; position: sticky; top: 76px; max-height: calc(100vh - 96px); overflow-y: auto; } } .reader-main h1 { font-family: var(--r-font); font-size: clamp(1.9rem, 5vw, 2.6rem); line-height: 1.18; letter-spacing: -.01em; font-weight: 600; color: var(--r-ink); margin: 18px 0 10px; } /* -------------------------------------------------------------------------- THE READING RULES ARE SCOPED TO THE WRITER'S PROSE. 12 Sep 2026. These set the serif face, the 19px measure and the per-theme ink - the reading itself. They used to be keyed on .reader-main, which wraps the WHOLE page content, so they also painted every box drawn by every other module: the payment cards, the submission notice, core's moderation block. Each of those then needed an antidote in the money-surface rules below, and four contrast faults in one day were all the same thing - a surface nobody had remembered to add to an antidote list. They are keyed on the prose itself now. Nothing outside the article is painted, so nothing outside it needs defending, and a panel added by the next module simply looks like an ordinary BSVSearch box instead of becoming a contrast bug. ⭐ The rule of the family: do not write a rule that needs an exception. -------------------------------------------------------------------------- */ .reader-main .field--name-body :is(h2, h3) { font-family: var(--r-font); color: var(--r-ink); line-height: 1.3; margin: 1.8em 0 .5em; } .reader-main .field--name-body h2 { font-size: 1.5em; } .reader-main .field--name-body h3 { font-size: 1.22em; } .reader-main .field--name-body :is(p, li, blockquote) { font-family: var(--r-font); font-size: var(--r-size); line-height: 1.72; color: var(--r-ink); } .reader-main .field--name-body p { margin: 0 0 1.15em; } .reader-main .field--name-body li { margin-bottom: .5em; } .reader-main .field--name-body a { color: var(--r-link); } .reader-main .field--name-body blockquote { margin: 1.6em 0; padding: .2em 0 .2em 1.1em; border-left: 3px solid var(--r-rule); color: var(--r-soft); font-style: italic; } .reader-main .field--name-body hr { border: 0; border-top: 1px solid var(--r-rule); margin: 2.4em 0; } .reader-main .field--name-body img { max-width: 100%; height: auto; border-radius: 6px; } /* The node's footer is the reader's own furniture: the byline, and the author's subscription offer rendered from their user entity. It is neither the writer's prose nor a money surface, and both parts come through as unclassed markup, so they are keyed on the footer they sit in rather than on a class somebody would have to remember to add. ⚠ Two surfaces in this footer DO carry classes - .bsvpay-subs-card in its subscribed and its signed-in-offer forms - and the money-surface rules below outrank these two, which is what must happen. ⏭ The paragraph rule exists only to hold today's appearance still. A signed-OUT visitor, and any signed-in reader without the purchase permission, gets the subscription offer as a BARE PARAGRAPH - see bsvsearch_pay_subs.module, the third branch. That is the same "reads as body text" defect 4.14.0 fixed for the subscribed state, still open on the state every new reader sees. The fix is the card, not this rule. */ .reader-main footer a { color: var(--r-link); } .reader-main footer p { font-family: var(--r-font); font-size: var(--r-size); line-height: 1.72; color: var(--r-ink); margin: 0 0 1.15em; } .reader-main .submitted, .reader-main .node__submitted { font-family: var(--r-sans); font-size: .875rem; color: var(--r-soft); } .reader-main .bsvpay-meta-line { font-family: var(--r-sans); font-size: .8125rem; color: var(--r-soft); } /* Money surfaces keep BSV Search's own colours in every theme. The article belongs to the writer; the payment is the platform's promise, and it must look the same wherever it is read. MONEY-CARDS is the card set - white ground in every theme. LIGHT-SURFACES adds the tinted notices and the two boxes drawn by other code, which keep their own ground but still need dark ink on it. These lists are no longer a defence. The reading rules above cannot reach in here any more, so a light box that is MISSING from these lists now just looks like an ordinary BSVSearch box - it is not unreadable. The lists say "this is a payment surface, paint it our way in every theme", which is a statement worth making by hand. ---------------------------------------------------------------------- */ .reader :is(.bsvpay-preview-box, .bsvpay-paywall-offer, .bsvpay-licence-offer, .bsvpay-licence-summary, .bsvpay-subs-card, .bsvpay-access-box, .bsvpay-net-box, .bsvpay-live-grants), .reader :is(.bsvpay-note, .bsvpay-withdrawn-banner, .bsvpay-submit-status, .entity-moderation-form) { color-scheme: light; --card:#ffffff; --border:#DCE3EC; --border-strong:#C3CEDC; --text:#1E2C3D; --text-soft:#52627A; --text-faint:#7A889B; --page:#F5F7FA; --blue:#175CB8; --navy:#14263E; color: #1E2C3D; border-color: #DCE3EC; } .reader :is(.bsvpay-preview-box, .bsvpay-paywall-offer, .bsvpay-licence-offer, .bsvpay-licence-summary, .bsvpay-subs-card, .bsvpay-access-box, .bsvpay-net-box, .bsvpay-live-grants) { background: #ffffff; } /* A money surface takes its own type and ink. It inherits the reader's serif and per-theme ink from .reader otherwise, which on Dark and Night is a pale ink that would land on a white ground. */ .reader :is(.bsvpay-preview-box, .bsvpay-paywall-offer, .bsvpay-licence-offer, .bsvpay-licence-summary, .bsvpay-subs-card, .bsvpay-access-box, .bsvpay-net-box, .bsvpay-live-grants, .bsvpay-note, .bsvpay-withdrawn-banner, .bsvpay-submit-status, .entity-moderation-form) :is(p, li, ul, ol, dl, dt, dd, div, span, small, em, i, blockquote, label, td, th) { font-family: var(--r-sans); font-size: .9375rem; line-height: 1.55; color: #33475F; } .reader :is(.bsvpay-preview-box, .bsvpay-paywall-offer, .bsvpay-licence-offer, .bsvpay-licence-summary, .bsvpay-subs-card, .bsvpay-access-box, .bsvpay-net-box, .bsvpay-live-grants, .bsvpay-note, .bsvpay-withdrawn-banner, .bsvpay-submit-status, .entity-moderation-form) :is(b, strong) { color: #1E2C3D; } .reader :is(.bsvpay-preview-box, .bsvpay-paywall-offer, .bsvpay-licence-offer, .bsvpay-licence-summary, .bsvpay-subs-card, .bsvpay-access-box, .bsvpay-net-box, .bsvpay-live-grants) :is(h2, h3, h4, p.bsvpay-subs-head) { font-family: var(--r-sans); color: #274B79; } /* A link on a light surface. .bsvpay-submit-status and the moderation block join this list: under the old .reader-main rule their links were painted with the reader's own --r-link, which on Dark is #7ab3ff on a near-white ground - about 1.9:1. Nobody had reported it because few of those boxes carry a link, but it was the same fault as the gold-on-crimson button, waiting. 🚩 .button is excluded, and the exclusion is load-bearing. The submission fee button is an INSIDE .bsvpay-submit-status, so without it this rule would paint blue label text onto a crimson button - the 12 Sep gold-on-crimson fault exactly, reintroduced from the other direction. The three bsvpay- exclusions guard named buttons; .button guards the thing itself, whoever draws it. */ .reader :is(.bsvpay-preview-box, .bsvpay-paywall-offer, .bsvpay-licence-offer, .bsvpay-licence-summary, .bsvpay-subs-card, .bsvpay-access-box, .bsvpay-net-box, .bsvpay-live-grants, .bsvpay-note, .bsvpay-withdrawn-banner, .bsvpay-submit-status, .entity-moderation-form) a:not(.button):not([class*="bsvpay-buy"]):not([class*="bsvpay-subs-btn"]):not(.bsvpay-extend) { color: #175CB8; } /* Crimson actions. The reading rules paint every link in the article, which put blue label text on a crimson button in EVERY theme - so these come last and are matched as links, not as boxes. */ .reader a:is(.bsvpay-buy, .bsvpay-buy-licence, .bsvpay-subs-btn, .bsvpay-extend), .reader button:is(.bsvpay-buy, .bsvpay-buy-licence, .bsvpay-subs-btn, .bsvpay-extend), .reader :is(.bsvpay-buy, .bsvpay-buy-licence, .bsvpay-subs-btn, .bsvpay-extend) { background: #DC143C; color: #ffffff; font-family: var(--r-sans); text-decoration: none; } .reader a:is(.bsvpay-buy, .bsvpay-buy-licence, .bsvpay-subs-btn, .bsvpay-extend):hover, .reader button:is(.bsvpay-buy, .bsvpay-buy-licence, .bsvpay-subs-btn, .bsvpay-extend):hover { background: #B01030; color: #ffffff; } .reader :is(.bsvpay-preview-label, .bsvpay-meta-label) { color: #7A889B; } /* The rail's blocks: quiet lists, not cards. --------------------------- */ .reader-rail .bsvpay-author-aside, .reader-rail .views-element-container, .reader-rail > div > div { background: transparent; border: 0; box-shadow: none; border-radius: 0; padding: 0; margin: 0 0 30px; } .reader-rail :is(h2, .bsvpay-author-other-title) { font-family: var(--r-sans); font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--r-soft); margin: 0 0 10px; padding: 0 0 8px; border-top: 0; border-bottom: 1px solid var(--r-rule); } .reader-rail ul { list-style: none; margin: 0; padding: 0; } .reader-rail li { margin: 0 0 13px; line-height: 1.35; } .reader-rail .views-field-title a { font-weight: 500; } .reader-rail li:last-child { margin-bottom: 0; } .reader-rail a { font-family: var(--r-sans); font-size: .875rem; color: var(--r-link); text-decoration: none; } .reader-rail a:hover { text-decoration: underline; } .reader-rail .bsvpay-author-more { margin-top: 10px; } .reader-rail .bsvpay-author-more > summary { font-family: var(--r-sans); font-size: .8125rem; color: var(--r-soft); } .reader-rail .views-field-uid, .reader-rail .views-field-created { display: block; font-size: .75rem; color: var(--r-soft); margin-top: 2px; } /* Phones --------------------------------------------------------------- */ @media (max-width: 600px) { .reader-masthead { padding-top: 26px; } .reader-main { padding-bottom: 40px; } .reader-rail { padding-bottom: 48px; } .reader-prefs-inner { gap: 14px; } } @media print { .reader-bar, .reader-prefs, .reader-rail { display: none; } .reader-col, .reader-main { max-width: none; margin: 0; } .reader-body { display: block; padding: 0; } } /* ----------------------------------------------------------------- 4.13.0 -- The two offer boxes fold away. The bought-access box and the reuse-licence box are collapsed by default so they stop interrupting the read. The summary is a quiet header, never a button: the crimson buttons live inside and always perform their action. -------------------------------------------------------------------------- */ .bsvpay-fold { margin: 0 0 1.5rem; } .bsvpay-fold > summary { display: flex; align-items: center; gap: 0.55rem; cursor: pointer; list-style: none; padding: 0.7rem 0.9rem; border: 1px solid rgba(128, 128, 128, 0.38); border-radius: 6px; background: transparent; color: inherit; font-weight: 600; font-size: 0.95rem; line-height: 1.35; } .bsvpay-fold > summary::-webkit-details-marker { display: none; } .bsvpay-fold > summary::before { content: ""; flex: none; width: 0; height: 0; border-left: 6px solid currentColor; border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent; transition: transform 0.15s ease; } .bsvpay-fold[open] > summary::before { transform: rotate(90deg); } .bsvpay-fold > summary:hover, .bsvpay-fold > summary:focus-visible { background: rgba(128, 128, 128, 0.1); } .bsvpay-fold-body { margin-top: 0.75rem; } /* -------------------------------------------------------------------------- FIELD LABELS FOLLOW THE READER THEME. 12 Sep 2026. theme.css paints every .field__label with --navy-soft (#23374F), a navy chosen for a white page. Inside the reader that never changed with the theme: 1.4:1 against Dark and 1.8:1 against Night - on screen but not readable. --r-soft is the reader's own subordinate ink, defined per theme, so a label stays quieter than its value in all four and legible in all four: 6.6:1 Dark, 6.8:1 Night, 5.5:1 Light, 5.3:1 Sepia. -------------------------------------------------------------------------- */ .reader-main .field__label { color: var(--r-soft); } /* -------------------------------------------------------------------------- A BUTTON INSIDE THE READER KEEPS ITS OWN INK. 12 Sep 2026. The rule above paints `.reader-main a` with --r-link and excludes anything classed bsvpay-*, which was written to protect the payment cards. A button drawn by another module carries no bsvpay- class, so the submission-fee button came out #8a5212 gold on its crimson background - unreadable, and the same defect family as the blue-labels-on-crimson-buttons fault of 4.10.x. Keyed on the BUTTON rather than on a module prefix, so the next module to draw one is covered without anybody remembering this. -------------------------------------------------------------------------- */ .reader-main a.button, .reader-main a.button:hover, .reader-main a.button:focus { color: #fff; } /* -------------------------------------------------------------------------- .bsvpay-submit-status and .entity-moderation-form used to be handled by a separate block here, added on 12 Sep when both were found unreadable on Night. That block repeated three rules from the money-surface set with a third, shorter list of its own - which is how the same list came to be maintained in three places and drift between them. They are now named once, in the LIGHT-SURFACES list above, alongside the tinted notices they behave exactly like. 🚩 One thing that block took on trust: .bsvpay-submit-status carries its own #F4F7FF ground from pay.css, but .entity-moderation-form has NO background rule anywhere in this theme. It was seen as a near-white box, so it must be getting one from a stylesheet core attaches along with the block - and a contrast fix resting on somebody else's background is not a fix. Measured against a white ground the ink reads 9.51:1 in all four themes; measured against no ground at all it is 1.74:1 on Dark. So the ground is stated here rather than assumed. -------------------------------------------------------------------------- */ .reader .entity-moderation-form { background: #ffffff; }