/* ========================================================================= GEBible — base styles Theming system per docs/THEME.md. Dark is the unconditional default; light and sepia are opt-in. The OS preference only applies when the user explicitly selects "System" (resolved by the pre-paint JS in head.ejs, which then sets data-theme to light/dark). We deliberately do NOT use a prefers-color-scheme media query to pick the default — dark is default regardless of OS. Reading-surface discipline (THEME.md §0/§2): the verse/reading column paints ONLY with --surface, --text-primary, and --text-secondary. Brand red never appears in the verse column. Reserved THEME.md design-palette tokens — defined centrally so they re-skin per theme even though no UI wires them up yet (so they are NOT orphans): the semantic-routing set (--cross-ref, --diff, --woc, --quoted-ot, --note) plus --danger, the highlight set (--hl-yellow/green/blue/pink/purple/orange), --brand-core, --font-fallback-classical, and the spacing steps (--space-1/2/3/4/6/8). All are documented in THEME.md and held for upcoming reading features (cross-refs, translation diff, highlights, etc.). RD6 (Pass 2): the OFL reading/UI/mono faces are now self-hosted as same-origin woff2 (public/fonts/, all SIL OFL — see public/fonts/LICENSE.txt) with font-display: swap. The reading-body regular is preloaded in head.ejs; CLS on swap is minimised by metric-matched fallback faces — Georgia-based for the reading body, Segoe-UI-based for the UI face (#138) — carrying metric overrides (RD23, see the @font-face block below). No CDN / no CSP change — fonts are static assets served from this origin (CSP fontSrc already allows 'self'). ========================================================================= */ /* ========================================================================= RD6 — Self-hosted OFL fonts (woff2, Latin subset). font-display: swap so the fallback paints immediately and text is readable before the face loads (progressive enhancement: the page is correct with fonts blocked). Subset scope: Latin + basic punctuation/quotes only (THEME.md §6). Greek/ Hebrew/Cyrillic ranges are deliberately NOT shipped yet — no non-Latin translations ship, so the bytes would be dead weight. When such a translation lands, add the matching subset face(s) per THEME.md §5. Reading body — Gentium Book Plus (SHIPPED after the gold-on-navy retheme): The gold-on-navy "Lemma" identity (docs/theming-guidelines.md §3) makes Gentium the scholarly reading serif shared across the sibling apps, so it is now the shipped body here too — giving the family one typographic voice. Gentium Book Plus has moderate-to-high stroke contrast (measured x-height 0.454em); the 0.01em letter-spacing on .scripture quiets any halation on the dark navy ground at 19px (the contrast/halation note lives on the .scripture rule). NOTE: live in-browser legibility on the navy ground could not be verified headlessly. LITERATA — the prior default, commissioned as a screen reading face (Google Play Books), lower/even stroke contrast, larger x-height (measured 0.507em) — stays self-hosted as the DOCUMENTED ALTERNATE: reorder --font-reading back to "Literata", "Literata Fallback", Georgia, serif to revert in one line. Both are OFL; both @font-face + metric-matched fallback faces are defined below. ========================================================================= */ /* ---- Reading body: Literata (SHIPPED default) ---- */ @font-face { font-family: "Literata"; font-style: normal; font-weight: 400 700; /* variable woff2 covers the weight axis */ font-display: swap; src: url("/fonts/literata-latin-400.woff2") format("woff2"); } @font-face { font-family: "Literata"; font-style: italic; font-weight: 400 700; font-display: swap; src: url("/fonts/literata-latin-400-italic.woff2") format("woff2"); } /* ---- Reading body: Gentium Book Plus (self-hosted ALTERNATE, not default) ---- */ @font-face { font-family: "Gentium Book Plus"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/gentium-book-plus-latin-400.woff2") format("woff2"); } @font-face { font-family: "Gentium Book Plus"; font-style: italic; font-weight: 400; font-display: swap; src: url("/fonts/gentium-book-plus-latin-400-italic.woff2") format("woff2"); } @font-face { font-family: "Gentium Book Plus"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/gentium-book-plus-latin-700.woff2") format("woff2"); } /* ---- UI: Inter (variable woff2 covers 400/600/700) ---- */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fonts/inter-latin-variable.woff2") format("woff2"); } /* ---- Codes/refs: JetBrains Mono (variable woff2 covers 400/500) ---- */ @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("/fonts/jetbrains-mono-latin-variable.woff2") format("woff2"); } /* ========================================================================= RD23 — Font-loading CLS discipline. Self-hosting fonts is the redesign's main CLS risk: when a web font swaps in (font-display: swap), a difference in metrics vs the fallback reflows the text. We minimise that reflow for the READING BODY (the largest run of text, so the biggest CLS lever) by giving its fallback a metric-matched cut: a @font-face that wraps the local serif fallback (Georgia, then Times New Roman) and carries size-adjust + ascent/descent/line-gap overrides tuned so the fallback occupies almost exactly the same line box and x-height as the web font. The web-font @font-face above ships UNMODIFIED (renders as designed); only these fallback faces are reshaped. The adjusted family is inserted ahead of bare Georgia in --font-reading below. #138 CORRECTION — the UI face needed one too. This block used to claim "UI/mono fall back to system faces whose metrics are already close and which carry far less text, so they do not get a tuned fallback". THE MEASUREMENT CONTRADICTS THAT, so the claim is retired. Request-blocking one face at a time on /v/john/3/16 (mobile 412x823 DPR 1.75, cold cache) attributes effectively ALL of that page's CLS to Inter: block Inter and CLS goes 0.0886 -> 0.0000, while blocking Gentium (0.0886) or JetBrains (0.0885) changes nothing. "Carries far less text" was the wrong model. UI text sits in boxes that RE-WRAP, and one extra wrapped row displaces every pixel below it: on swap the .study-toolbar-shelf button row measures 109px -> 161px (+52px, one row), and .pager-prev / .share-permalink each go from one line to two. Inter runs ~9% wider than Segoe UI at the same size, which is what tips those rows over. So the UI face now gets the same treatment the reading body already had — see "Inter Fallback" below. MONO still has no tuned fallback, and that is measured rather than assumed: blocking JetBrains moved CLS by 0.0001. Override values are DERIVED from the real font metrics (fontTools on the shipped woff2), not guessed. Method, so this stays re-derivable: size-adjust = webfont x-height / fallback x-height ascent-override = webfont ascent / that size-adjust descent-override = webfont descent / that size-adjust (line-gap likewise) "line asc/desc" is the metric pair the browser ACTUALLY uses: hhea/usWin*, EXCEPT when OS/2 fsSelection bit 7 (USE_TYPO_METRICS) is set, in which case it is sTypoAscender/sTypoDescender. Georgia and Segoe UI have bit 7 CLEAR (usWin); Literata, Gentium and Inter have it SET (sTypo). For Inter that distinction is load-bearing — its usWin pair is 1.1079/0.3223 and would give wrong overrides. Georgia natural x-height = 0.4814em; line asc/desc = 0.917 / 0.219. Literata x-height = 0.507em; line asc/desc = 1.177 / 0.308. -> size-adjust 105.31%, ascent 111.77%, descent 29.25%, line-gap 0%. Gentium x-height = 0.454em; line asc/desc = 1.099 / 0.366. -> size-adjust 94.32%, ascent 116.48%, descent 38.83%, line-gap 0%. Segoe UI natural x-height = 0.5000em; line asc/desc = 1.0791 / 0.2510. Inter x-height = 0.5459em; line asc/desc = 0.9688 / 0.2412. -> size-adjust 109.18%, ascent 88.73%, descent 22.09%, line-gap 0%. Why Segoe UI is the basis for the Inter cut: --font-ui's first fallback is `system-ui`, which on the reference platform (Chrome/Windows) resolves to Segoe UI — confirmed by canvas metric equality against the named family, not assumed. Matching x-height also matches WIDTH here, which is the property that actually governs re-wrap: the measured corpus advance-width ratio Inter/Segoe UI is 1.0905, within 0.12% of the 1.0918 x-height ratio. The local() list carries Roboto then Arial for platforms where system-ui is not Segoe UI; both were measured against the shipped Inter and both are IMPROVED by these overrides (residual advance-width error: Segoe UI 0.12%, Arial 3.10%, Roboto 3.58% — against 8.30% / 5.57% / 5.13% with no adjusted fallback at all). Verdana is deliberately NOT in that list: it is wider than Inter, so these overrides would make it worse (15.29% vs 5.60% unadjusted). ========================================================================= */ @font-face { font-family: "Literata Fallback"; src: local("Georgia"), local("Times New Roman"); size-adjust: 105.31%; ascent-override: 111.77%; descent-override: 29.25%; line-gap-override: 0%; } @font-face { font-family: "Gentium Fallback"; src: local("Georgia"), local("Times New Roman"); size-adjust: 94.32%; ascent-override: 116.48%; descent-override: 38.83%; line-gap-override: 0%; } /* #138 — the UI fallback. Same discipline as the two reading cuts above, applied to the face that measurement showed owns the /v/* CLS. If none of these local faces exist the family simply does not resolve and --font-ui falls through to bare `system-ui` exactly as before, so this can only help. */ @font-face { font-family: "Inter Fallback"; src: local("Segoe UI"), local("Roboto"), local("Arial"); size-adjust: 109.18%; ascent-override: 88.73%; descent-override: 22.09%; line-gap-override: 0%; } :root { /* ---- shared (THEME.md §2 + §3 + §4) ---- */ /* GOLD-ON-NAVY "Lemma" identity (docs/theming-guidelines.md is the canonical authority). The single chromatic accent is gold #c8a13b; the old brand red has retired. --brand-core anchors the gold so any chrome that referenced the old identity hue now resolves to the gold mark. */ --brand-core: #c8a13b; /* identity gold (the single accent) */ --radius: 10px; /* Lemma base radius (was 6px) */ --focus-ring: 2px solid var(--brand); --measure: 66ch; /* reading column; clamp 60–72ch */ /* ---- Lemma accent alphas (theme-invariant: gold alphas + dark navy) ---- GEBible lacks these; they are defined ONCE here (gold is the same hue on every theme, and the on-accent navy is constant) so the Lemma component idioms — soft-button inversion, icon badges, input focus halo, selected rings — work across dark/light/sepia without per-theme overrides. */ --accent-soft: rgba(200, 161, 59, 0.12); /* 12% gold fill (soft buttons, icon badges, halos) */ --accent-border: rgba(200, 161, 59, 0.35); /* 35% gold border (outlines, hairlines, rings) */ --on-accent: #0a1530; /* dark navy text on ANY solid-gold fill */ /* color-blind-safe highlight set (bg tint + optional underline; never spectral) */ --hl-yellow: #E6D072; --hl-green: #8FCFA0; --hl-blue: #8FBEE0; --hl-pink: #E3A6C0; --hl-purple: #B6A6E0; --hl-orange: #E6B584; /* font stacks (THEME.md §3 + docs/theming-guidelines.md §3). Reading body ships GENTIUM BOOK PLUS (the Lemma identity reading face), with the metric-matched "Gentium Fallback" (Georgia + overrides) ahead of bare Georgia so a font-swap reflow is negligible (RD23). This adopts the Lemma gold-on-navy retheme: the scholarly serif of the sibling apps is now the SHIPPED body here too, so the family reads as one voice. LITERATA stays self-hosted as the documented alternate (screen-tuned; the prior default) — to revert the body to Literata, reorder this stack to "Literata", "Literata Fallback", Georgia, serif; (its @font-face + "Literata Fallback" metric face are still defined above, so the revert is a one-line change). */ --font-reading: "Gentium Book Plus", "Gentium Fallback", Georgia, serif; --font-ui: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --font-fallback-classical: "Noto Serif", serif; /* spacing scale + density (THEME.md §4) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 40px; --space-8: 48px; --density: 1; /* comfortable */ /* Label color on solid-gold fills. INVERTED from the old white-on-red: a solid gold fill is light, so it takes DARK NAVY text. Equal to --on-accent. */ --brand-on-fill: #0a1530; /* Optional hairline a hair softer than --pane-border (Lemma --border-soft). */ --pane-border-soft: #232c4d; /* Patreon's CURRENT brand pair, for the one third-party sign-in control (.patron-signin-btn). Theme-invariant on purpose — a brand colour is not ours to re-theme. White on this near-black measures 19.3:1. The retired coral #FF424D is deliberately NOT tokenised here: white on it measures 3.42:1 and fails WCAG AA for normal text, and an unused token invites use. */ --patreon-black: #0e0e10; --patreon-on-black: #ffffff; /* ---- DARK is the unconditional default: the bare :root resolves to the gold-on-navy Lemma dark theme. ---- */ --surface: #0a1530; --surface-raised: #1a2547; --surface-sunken: #070f24; --text-primary: #e6edf3; /* 15.3:1 on --surface (AAA) */ --text-secondary: #9aa7c4; /* 7.5:1 on --surface (AAA) — verse numbers, labels */ --text-faint: #909dbe; /* tertiary: captions, meta, placeholders (5.5:1 on card) */ --brand: #c8a13b; /* THE gold accent: links, active, focus, icons (7.4:1 on --surface) */ --brand-fill: #c8a13b; /* solid primary-button fill (dark navy label via --brand-on-fill) */ --cross-ref: #8AB4F8; --quoted-ot: #6FB8C9; --diff: #D9A441; --note: #5FB89A; --woc: #D98078; --danger: #FF7A45; --search-match: #2a3320; /* subtle warm tint behind matched terms (navy-warm) */ --pane-border: #2a3559; --shadow: 0 8px 30px rgba(0, 0, 0, 0.35); /* Spotlight warmth wash: a very soft gold glow seated in the top-right of the study-spotlight card, fading to transparent so the card surface (and the .scripture reading text on it) is untouched at the reading line. Built from the same 12%-gold alpha family as --accent-soft so it is theme-invariant and subordinate. See .study-spotlight-card. */ --spotlight-glow: rgba(200, 161, 59, 0.10); } /* ---- DARK (default — gold-on-navy Lemma identity) ---- */ [data-theme="dark"] { --surface: #0a1530; --surface-raised: #1a2547; --surface-sunken: #070f24; --text-primary: #e6edf3; --text-secondary: #9aa7c4; --text-faint: #909dbe; --brand: #c8a13b; --brand-fill: #c8a13b; --cross-ref: #8AB4F8; --quoted-ot: #6FB8C9; --diff: #D9A441; --note: #5FB89A; --woc: #D98078; --danger: #FF7A45; --search-match: #2a3320; --pane-border: #2a3559; --pane-border-soft: #232c4d; --shadow: 0 8px 30px rgba(0, 0, 0, 0.35); --spotlight-glow: rgba(200, 161, 59, 0.10); } /* ---- LIGHT (opt-in — shares the gold accent) ---- Surfaces + text are unchanged (AA-verified). The accent is the SAME gold family as dark, but bright gold #c8a13b on a light surface is only ~2.4:1 and FAILS AA for text/links, so --brand uses a darker "gold-ink" (#8a6510) that holds AA on every light surface: 5.13:1 on --surface, 5.32:1 on --surface-raised, 4.74:1 on --surface-sunken. The SOLID button fill stays BRIGHT gold (#c8a13b) with dark navy text (--brand-on-fill) because the fill is its own surface (7.41:1). */ [data-theme="light"] { --surface: #FBFBF9; /* warm off-white reduces glare vs #FFF */ --surface-raised: #FFFFFF; --surface-sunken: #F2F2EF; --text-primary: #1B1B1F; /* 16.6:1 — crisp, not glaring */ --text-secondary: #54545C; /* 7.2:1 (AAA) */ --text-faint: #646470; /* tertiary captions/placeholders (5.63:1 on --surface) */ --brand: #8a6510; /* AA-safe gold-ink: 5.13:1 on --surface */ --brand-fill: #c8a13b; /* solid fill stays bright gold (dark navy label) */ --cross-ref: #2E5AAC; --quoted-ot: #2C7A8C; --diff: #8A5A00; --note: #2E7D64; --woc: #A23329; --danger: #C2410C; --search-match: #FFF1B8; --pane-border: #E4E4E1; --pane-border-soft: #ECECEA; --shadow: 0 8px 30px rgba(27, 31, 36, 0.12), 0 1px 2px rgba(27, 31, 36, 0.06); /* On the near-white light ground a 10% gold reads as muddy; a lighter 7% warm gold keeps the wash a barely-there warmth without dulling the surface. */ --spotlight-glow: rgba(200, 161, 59, 0.07); } /* ---- SEPIA (optional, recommended — shares the gold accent) ---- Warm reading ground unchanged. The accent is the SAME gold family; on the warmer sepia ground a darker gold-ink is required for AA than on light (the ground sits closer to the gold in luminance), so --brand uses #7a5e16: 5.07:1 on --surface, 5.52:1 on --surface-raised, 4.50:1 on --surface-sunken. Solid fill stays bright gold (#c8a13b) with dark navy text. */ [data-theme="sepia"] { --surface: #F3E9D6; --surface-raised: #FAF3E3; --surface-sunken: #E9DCC2; --text-primary: #2E2519; /* warm near-black 12.5:1 */ --text-secondary: #6B5B43; --text-faint: #6B5840; /* tertiary captions/placeholders (5.63:1 on --surface) */ --brand: #7a5e16; /* AA-safe gold-ink: 5.07:1 on --surface */ --brand-fill: #c8a13b; /* solid fill stays bright gold (dark navy label) */ --cross-ref: #2B5C7A; --quoted-ot: #2C6F66; --diff: #7A5400; --note: #3E6B4E; --woc: #8C2E22; --danger: #B5502A; --search-match: #EBD9A8; --pane-border: #DCC9A6; --pane-border-soft: #E6D8BC; --shadow: 0 8px 30px rgba(74, 60, 38, 0.16), 0 1px 2px rgba(74, 60, 38, 0.08); /* The sepia ground is already warm; a touch more gold than light reads as a natural deepening of the paper rather than a separate tint. */ --spotlight-glow: rgba(200, 161, 59, 0.12); } /* ---- density: scales margins/padding only, never reading-body line-height ---- */ [data-density="compact"] { --density: 0.8; } * { box-sizing: border-box; } /* Gold focus ring on all interactive elements (THEME.md §7 / Lemma §6.3). --focus-ring resolves to 2px solid var(--brand), so it is gold on every theme. */ :focus-visible { outline: var(--focus-ring); outline-offset: 2px; } /* Input focus HALO (Lemma §5.11 / §6.3): text inputs, search fields, selects and textareas use a softer 3px --accent-soft halo + a 35%-gold border on focus instead of the hard 2px ring. Property-scoped transition (Lemma §6.1). The halo is theme-invariant (gold alpha), so it reads the same on dark/light/sepia. We zero the outline on BOTH :focus and :focus-visible for these field types (the global :focus-visible rule above would otherwise re-add the 2px ring for keyboard focus) and replace it with the halo. Every other control keeps the 2px ring. The halo is visible focus feedback, so a11y focus-visibility is preserved. Checkboxes/radios/submit/reset/button inputs keep the ring. */ input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):focus, input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):focus-visible, select:focus, select:focus-visible, textarea:focus, textarea:focus-visible { outline: none; border-color: var(--accent-border); box-shadow: 0 0 0 3px var(--accent-soft); } /* Motion is functional only; honor reduced-motion (THEME.md §4/§7). */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } /* Neutralize the global anchor-jump smooth-scroll on `html` (set below) for a motion-averse reader: an in-page jump (e.g. the study jump-nav) snaps with no pan. The `*` rule above already matches `html`; this is the explicit, self- documenting fold the jump-nav relies on (so it survives if `*` is ever narrowed). No second reduced-motion block is introduced. */ html { scroll-behavior: auto !important; } } /* Smooth in-page anchor jumps (the study "On this page" jump-nav's pure-CSS "auto-pan" — no JS smooth-scroll). Neutralized under prefers-reduced-motion above. Scoped to `html` so it governs every same-page #id jump. */ html { scroll-behavior: smooth; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-ui); /* Dark-theme background WASH (Lemma §2.4): a large soft radial gradient lifts a slightly brighter navy into the top-right and fades to --surface by 55%, giving the dark page depth without a visible seam. The :root default is the dark theme, so the wash is the default; light/sepia override to FLAT below (a navy wash would muddy their warm reading grounds). Sticky bars stay FLAT var(--surface) so content scrolls under them fully occluded. */ background: radial-gradient(1200px 600px at 70% -10%, #1a3568 0%, var(--surface) 55%); background-color: var(--surface); color: var(--text-primary); line-height: 1.6; display: flex; flex-direction: column; min-height: 100vh; } /* Light + sepia keep a FLAT reading ground (no navy wash). */ [data-theme="light"] body, [data-theme="sepia"] body { background: var(--surface); } a { color: var(--brand); text-decoration: none; } a:hover { text-decoration: underline; } .container { width: 100%; max-width: 76rem; margin: 0 auto; /* Density wires into the main container padding (THEME.md §4). */ padding: calc(var(--space-5) * var(--density)); flex: 1 0 auto; } .container.narrow { max-width: 40rem; } .text-center { text-align: center; } .muted { color: var(--text-secondary); } .small { font-size: 0.85rem; } .empty { color: var(--text-secondary); font-style: italic; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* --- Buttons --- */ /* Primary button (Lemma §5.1): a 135deg gold gradient with dark navy text. The gold fill is its own surface, so --brand-on-fill (= --on-accent, dark navy) holds AA across all three themes (≥5.5:1). Hover adds the signature gold glow; :active presses 1px. */ .btn { display: inline-block; padding: 0.55rem 1rem; border-radius: var(--radius); background: linear-gradient(135deg, #d4a839 0%, #b8852a 100%); color: var(--brand-on-fill); border: 1px solid transparent; font-weight: 700; cursor: pointer; text-decoration: none; transition: box-shadow 120ms ease, transform 0.08s ease; } .btn:hover { box-shadow: 0 6px 18px rgba(200, 161, 59, 0.3); text-decoration: none; } .btn:active { transform: translateY(1px); } /* Soft / outline button (Lemma §5.1 — the dominant secondary idiom): gold text on a 12% gold fill with a 35% gold border, INVERTING to solid BRIGHT gold + dark navy text on hover/focus. The inversion fills with --brand-fill (bright gold #c8a13b on every theme) rather than --brand, so the dark-navy --on-accent label holds AA (7.41:1) on all three themes — on light/sepia --brand is a dark gold-ink that would fail under navy text. */ .btn-ghost { background: var(--accent-soft); color: var(--brand); border-color: var(--accent-border); font-weight: 600; transition: color 120ms, border-color 120ms, background 120ms; } .btn-ghost:hover, .btn-ghost:focus-visible { background: var(--brand-fill); color: var(--on-accent); border-color: var(--brand-fill); box-shadow: none; text-decoration: none; } .pill { display: inline-block; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.8rem; font-weight: 600; background: var(--surface-sunken); border: 1px solid var(--pane-border); } /* `.pill-subscriber` (the solid-gold fill) was REMOVED with the header's Ad-free pill, which was its only consumer — the ★ Supporter menu replaced it. It is not dead-but-kept: an unused gold-fill class is exactly the kind of rule a later surface picks up by accident, and gold is chrome-only here. */ .pill-soon { color: var(--text-secondary); } .badge { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); } /* --- Header / nav (chrome — the gold accent is correct for active/CTA) --- */ .site-header { background: var(--surface-raised); border-bottom: 1px solid var(--pane-border); position: sticky; top: 0; z-index: 50; } .header-inner { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 0.6rem 1.25rem; max-width: 76rem; margin: 0 auto; } .brand { display: inline-flex; align-items: center; gap: 0.5rem; /* RD1/RD18: the wordmark is NOT all-accent. The link is neutral text; the gold accent is reserved for the single .brand-mark ("GE"), keeping the chrome calm and editorial. */ color: var(--text-primary); } .brand:hover { text-decoration: none; } .brand-logo { border-radius: 6px; } /* RD1 — GEBible wordmark. The gold accent touches ONLY the "GE" (the .brand-mark), never the whole word (THEME.md §0/§1). The reading column is unaffected — this is chrome. */ .brand-name { /* Closed "GEBible" wordmark set in the READING SERIF (--font-reading, the shipped Gentium Book Plus) rather than the UI sans, to read as a well-set edition's title rather than app chrome. Reuses the existing reading-serif token — NO new font file. The gold-"GE" / neutral-"Bible" carve-out (.brand-mark / .brand-rest) is unchanged, so the single-accent discipline and AA contrast of the gold mark (the --brand token) hold on all three themes. Applied to both header brand and the hero wordmark below. */ font-family: var(--font-reading); font-weight: 700; letter-spacing: -0.01em; /* Snap to the smaller of the surrounding context; header/footer set sizes. */ line-height: 1; } .brand-mark { color: var(--brand); } .brand-rest { color: var(--text-primary); } /* In the footer the brand line is a heading-weight wordmark; keep the same carve-out (mark gold, rest neutral). The display size is set on .footer-brand in the Footer section (1.3rem for the fat-footer brand column). */ .nav-toggle { margin-inline-start: auto; display: none; width: 40px; height: 36px; background: transparent; border: 1px solid var(--pane-border); border-radius: 8px; cursor: pointer; } .nav-toggle-bar, .nav-toggle-bar::before, .nav-toggle-bar::after { display: block; width: 18px; height: 2px; margin: 0 auto; background: var(--text-primary); position: relative; } .nav-toggle-bar::before { content: ""; position: absolute; top: -6px; inset-inline-start: 0; width: 18px; height: 2px; background: var(--text-primary); } .nav-toggle-bar::after { content: ""; position: absolute; top: 6px; inset-inline-start: 0; width: 18px; height: 2px; background: var(--text-primary); } .primary-nav { display: flex; align-items: center; gap: 1rem; flex: 1; flex-wrap: wrap; } .nav-list { display: flex; align-items: center; gap: 0.25rem; list-style: none; margin: 0; padding: 0; } .nav-list-end { margin-inline-start: auto; } .nav-list a, .nav-dropdown-toggle { display: inline-block; padding: 0.4rem 0.7rem; border-radius: 8px; color: var(--text-primary); background: transparent; border: none; font: inherit; cursor: pointer; } .nav-list a:hover, .nav-dropdown-toggle:hover { background: var(--surface-sunken); color: var(--brand); text-decoration: none; } .nav-cta { color: var(--brand) !important; font-weight: 600; } /* Dropdown */ .nav-dropdown { position: relative; } .nav-dropdown-menu { position: absolute; top: 100%; inset-inline-start: 0; min-width: 13rem; margin: 0.25rem 0 0; padding: 0.35rem; list-style: none; background: var(--surface-raised); border: 1px solid var(--pane-border); border-radius: var(--radius); box-shadow: var(--shadow); display: none; } .nav-dropdown.open .nav-dropdown-menu { display: block; } .nav-dropdown-menu a, .nav-dropdown-menu .is-coming-soon { display: block; padding: 0.45rem 0.6rem; border-radius: 6px; } .nav-dropdown-menu a:hover { background: var(--surface-sunken); } /* Inert "soon" rows (Analysis dropdown): a non-link that sits exactly like the anchor rows but is recessive and not interactive. The section name stays reading-adjacent (--text-secondary, NOT gold); only the .badge carries the existing recessive treatment. */ .nav-dropdown-menu .is-coming-soon { color: var(--text-secondary); cursor: default; } .nav-dropdown-divider { border-top: 1px solid var(--pane-border); margin-top: 0.25rem; padding-top: 0.25rem; } .caret { font-size: 0.7em; } /* --- Hero / home --- Centered, search-first single column at ALL widths: app icon, GE/Bible wordmark, the paramount (enlarged) search with its examples folded into the placeholder, a recessive trust echo, and one subordinate browse link. The search is the visual focal point; everything else is calmer chrome. The reading specimen moved to the "passage worth studying" spotlight further down. */ .hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.85rem; padding: 2.5rem 0 1.5rem; } /* Decorative app icon. Rounded container, NO gold .icon-badge halo (the badge is a button-like chrome primitive; doubling the gold here would read as a CTA). Sized by clamp; explicit width/height attrs in the markup reserve the box. */ .hero-icon { inline-size: clamp(72px, 10vw, 88px); block-size: clamp(72px, 10vw, 88px); border-radius: 18px; margin: 0; } /* Wordmark — same carve-out as the header brand (.brand-mark gold "GE", .brand-rest neutral). Larger here, and resets the

default margins. */ .hero-wordmark { margin: 0; font-size: clamp(2rem, 6vw, 3rem); } /* Hero line — "Read. Study. Question." Subordinate to the wordmark above it and to the search below it, so it takes the secondary ink and stays well under the wordmark's size. NOT gold: gold is chrome-only here, and this is content. The open letter-spacing is doing the real work — it separates the three beats so they read as a deliberate stack rather than a cramped sentence. Vertical rhythm comes from the .hero flex `gap`, so margin is only reset. */ .hero-tagline { margin: 0; color: var(--text-secondary); font-size: clamp(0.95rem, 2.4vw, 1.15rem); letter-spacing: 0.08em; } /* Decorative scholarly flourish: a thin hairline rule split by a small centered gold ornament, echoing a well-set edition's title rule. A quiet accent subordinate to the search — NOT a box around the hero. Theme-aware via tokens ONLY (no hardcoded hex): the rule fades to a soft hairline (--pane-border-soft) away from center, and the central gold uses --accent-border so it resolves to the AA-safe gold-ink on light/sepia. aria-hidden in the markup, so it is never announced; this is pure chrome. The rule itself is the row; the ::before/::after draw the two hairline segments flanking the centered .hero-flourish glyph. */ .hero-rule { display: flex; align-items: center; justify-content: center; gap: 0.6rem; width: 100%; max-width: 18rem; margin: 0.15rem 0; } .hero-rule::before, .hero-rule::after { content: ""; flex: 1 1 auto; block-size: 1px; } .hero-rule::before { background: linear-gradient(to right, transparent, var(--pane-border-soft) 35%, var(--accent-border)); } .hero-rule::after { background: linear-gradient(to left, transparent, var(--pane-border-soft) 35%, var(--accent-border)); } /* The flourish glyph itself — a small symmetric four-point star. Colored gold via currentColor + the --brand token, so it resolves to bright gold on dark and the AA-safe gold-ink on light/sepia. Sized small so it reads as a quiet ornament. */ .hero-flourish { flex: 0 0 auto; inline-size: 0.85rem; block-size: 0.85rem; color: var(--brand); } /* The paramount search — ONE integrated rounded "pill". The .hero-search element is the pill: a subtle raised surface (--surface-raised) with a thin border (--pane-border), fully rounded, holding a leading magnifier, a borderless transparent input filling the middle, and a solid-gold "Search" button inset on the right. Full width up to a generous cap, centered; stays fluid on small screens (the button stays inset, the input shrinks). The whole pill lights up with the standard gold focus halo on :focus-within (replacing the per-input global :focus halo, which is suppressed below so it does not double inside the pill). Token-only color — CSP-safe (no inline style). */ .hero-search { display: flex; align-items: center; gap: 0.5rem; width: 100%; max-width: 56rem; margin-inline: auto; margin-block: 0.25rem 0; padding: 0.35rem 0.4rem 0.35rem 0.9rem; border: 1px solid var(--pane-border); border-radius: 999px; background: var(--surface-raised); box-shadow: var(--shadow); } /* The pill (not the input) owns the focus halo. */ .hero-search:focus-within { border-color: var(--accent-border); box-shadow: 0 0 0 3px var(--accent-soft); } /* Leading magnifier — decorative, muted gold; sized/colored here, not inline. */ .hero-search-icon { flex: 0 0 auto; inline-size: 1.25rem; block-size: 1.25rem; color: var(--brand); opacity: 0.75; } /* The input is borderless/transparent WITHIN the pill (the pill draws the chrome). Its own focus outline is removed because :focus-within lights the whole pill. */ .hero-search input { flex: 1; min-width: 0; padding: 0.55rem 0.5rem; border: 0; border-radius: 0; background: transparent; color: var(--text-primary); font-size: 1.05rem; } /* The pill owns the focus halo (:focus-within above), so suppress the per-input global halo (Lemma §5.11) here — otherwise the input would draw a SECOND halo inside the pill. The #hero-q id selector clears the global field-focus rule's specificity for both :focus and :focus-visible. */ #hero-q:focus, #hero-q:focus-visible { outline: none; border: 0; box-shadow: none; } .hero-search input::placeholder { color: var(--text-faint); } /* The inset gold button — solid --brand-fill with dark-navy --on-accent text (AA on the fill in every theme), rounded to sit inside the pill. */ .hero-search button { flex: 0 0 auto; padding: 0.6rem 1.4rem; border: 1px solid var(--brand-fill); border-radius: 999px; background: var(--brand-fill); color: var(--on-accent); font-family: var(--font-ui); font-weight: 600; font-size: 1rem; cursor: pointer; } .hero-search button:hover { filter: brightness(1.05); } /* On very narrow screens drop the leading icon and tighten padding so the input keeps usable room and the button stays inset (no overflow). */ @media (max-width: 30rem) { .hero-search { padding-inline-start: 0.6rem; } .hero-search-icon { display: none; } .hero-search button { padding-inline: 1rem; } } /* Trust echo: one recessive line (the full contract strip is its own section). */ .hero-trust { margin: 0; color: var(--text-secondary); font-size: 0.9rem; } /* (The former subordinate .hero-browse link was folded into the lower 3-up panel grid's "Browse all books" card; its orphaned rules were removed.) */ /* --- Reusable gold icon-badge (theming-guidelines §1.3/§5.4) --- Circular --accent-soft fill, 35%-gold border, gold glyph; fully round (999px). Chrome primitive — the gold accent is the documented treatment here. Used by the lower 3-up .home-panel grid (Browse / Tools / From the blog). (The contract strip now uses the ring-only .contract-icon instead — see Section 2.) The glyph is decorative (aria-hidden in the markup), so its meaning never depends on color alone. */ .icon-badge { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; inline-size: 2.5rem; block-size: 2.5rem; border-radius: 999px; background: var(--accent-soft); border: 1px solid var(--accent-border); color: var(--brand); font-family: var(--font-ui); font-size: 1.1rem; line-height: 1; } /* --- Section 2: primary-source contract strip --- The four trust claims under the hero. Each claim: a circular gold-RING icon (thin outlined circle, transparent fill, gold glyph centered) on the left, then a bold label + two-line description stacked to the right. Faint vertical hairline dividers separate the four columns. The grid collapses 4 -> 2 -> 1 via explicit breakpoints (NOT auto-fit) so we know exactly which items begin a row and can hide the divider on each row's leading column — auto-fit would leave dangling/orphan dividers when it wraps. */ .contract-strip { margin: 1.75rem 0; } .contract-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; } /* Each column: icon + body, with a leading vertical hairline divider drawn by ::before. column-gap is 0 so the divider sits in the padded gutter. */ .contract-item { position: relative; display: flex; gap: 0.75rem; align-items: flex-start; padding-inline: 1.25rem; } /* Faint vertical hairline between same-row siblings. Hidden on the leading column of each row (overridden per breakpoint below) so wrapping never orphans a line. */ .contract-item::before { content: ""; position: absolute; inset-block: 0.1rem; inset-inline-start: 0; inline-size: 1px; background: var(--pane-border-soft); } /* 4-up (default, wide): only the first column has no left divider. */ .contract-item:first-child::before { display: none; } /* The circular gold badge: --accent-soft (12% gold) fill, thin --accent-border ring, gold glyph centered (the glyph inherits color via currentColor). This is the app's signature icon-badge treatment (theming-guidelines §5.4) — the same fill the .icon-badge containers and panel/stat badges carry — so the contract strip's four icons read with the same weight as every other gold badge on the page instead of as hollow rings. */ .contract-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; inline-size: 3.5rem; block-size: 3.5rem; border-radius: 999px; border: 1px solid var(--accent-border); background: var(--accent-soft); color: var(--brand); } .contract-glyph { inline-size: 1.8rem; block-size: 1.8rem; } .contract-body { min-width: 0; } .contract-label { margin: 0 0 0.15rem; font-family: var(--font-ui); font-weight: 600; } .contract-line { margin: 0; font-size: 0.9rem; color: var(--text-secondary); } /* 2-up (medium): items 1 and 3 begin a row, so they carry no left divider. Vertical gutter padding keeps the two rows breathing. */ @media (max-width: 52rem) { .contract-list { grid-template-columns: repeat(2, 1fr); row-gap: 1.5rem; } /* Items 1 and 3 begin a row at 2-up — no left divider. */ .contract-item:nth-child(odd)::before { display: none; } } /* 1-up (narrow): single column — every vertical divider would be an orphan, so drop them all and switch to a horizontal hairline above each item after the first (a clean horizontal rule instead of dangling vertical lines). */ @media (max-width: 32rem) { .contract-list { grid-template-columns: 1fr; row-gap: 0; } .contract-item { padding-block: 1rem; padding-inline: 0; } .contract-item::before { inset: 0 auto auto 0; inline-size: 100%; block-size: 1px; } /* Re-show the divider on odd items (the wider 2-up rule hid them); matched specificity + later source order so it wins. At 1-up every item except the first needs its horizontal hairline back. */ .contract-item:nth-child(odd)::before { display: block; } .contract-item:first-child::before { display: none; } } /* The framing line ("Presented as a primary source...") reuses the recessive, italic .source-framing-note token; just give it the strip's top spacing. */ .contract-framing { margin-block-start: 1rem; } /* --- Section 5: "A passage worth studying" spotlight --- The daily verse as a primary-source specimen, not a devotional card. Reading surface for the verse text; recessive reference; cross-ref count + translation chips + a study-page CTA. */ .study-spotlight { margin: 1.75rem 0; } /* Heading row: the section

with a quiet "A new passage each day" rotation microlabel beside it (P2 — accurate: the daily verse rotates daily from a curated table). The microlabel is recessive chrome. */ .study-spotlight-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 0.75rem; } .study-spotlight-rotation { margin: 0; font-family: var(--font-ui); font-size: 0.78rem; color: var(--text-secondary); } /* The card carries a soft, theme-aware warmth wash INSTEAD of the rejected raster sunrise: a single radial gold glow (--spotlight-glow, per-theme) seated in the top-right and fading to transparent well before the reading line, layered OVER the flat --surface-raised fill. Because the glow is a low-alpha gold that dissolves to nothing, it warms the card chrome without sitting behind — or lowering the contrast of — the .scripture verse text, and it never colors the verse body gold (the text keeps --text-primary). Reads correctly on all three themes via the per-theme token; no hardcoded hex here. TWO-COLUMN at >=52rem: the verse specimen (FIRST in DOM source order) and the "Explore deeper" panel (SECOND) split into a grid with a vertical divider between them. Below 52rem it STACKS to one column, verse-first — achieved by the default single-column flow over the unchanged source order, NOT a CSS `order` swap, so tab order always equals visual order. */ .study-spotlight-card { position: relative; display: grid; grid-template-columns: 1fr; gap: 1.1rem; background: radial-gradient(120% 90% at 100% 0%, var(--spotlight-glow) 0%, transparent 55%), var(--surface-raised); border: 1px solid var(--pane-border-soft); border-radius: 12px; padding: 1.25rem 1.35rem; } @media (min-width: 52rem) { .study-spotlight-card { grid-template-columns: minmax(0, 1fr) minmax(0, 16rem); gap: 1.6rem; align-items: stretch; } /* Vertical divider drawn on the Explore-deeper column's leading edge. */ .study-spotlight-explore { border-inline-start: 1px solid var(--pane-border-soft); padding-inline-start: 1.6rem; } } /* Decorative sunrise/rays ornament — a minimal token-only glyph echoing the .hero-flourish pattern, NOT a raster. It sits as a small quiet mark above the verse, colored gold via currentColor + --brand (resolves to the AA-safe gold-ink on light/sepia), sized small so it stays subordinate to the verse. aria-hidden + focusable="false" in the markup; presentation attrs only there, all sizing/color here (CSP-safe). */ .study-spotlight-ornament { display: block; /* Sized off the 48:27 viewBox so the rays keep their proportions. Kept subordinate to the verse, but enlarged from the original 1.5rem so the glyph reads as an intentional motif rather than a stray mark. */ inline-size: 2.5rem; block-size: 1.4rem; margin: 0 0 0.6rem; color: var(--brand); opacity: 0.85; } /* Reading surface: text tokens + reading font only (no brand). .scripture sets the face/size; reset the blockquote chrome and the constrained measure. */ .study-spotlight-text { margin: 0 0 0.85rem; border: none; padding: 0; max-width: none; } .study-spotlight-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1rem; } .study-spotlight-ref { margin: 0; } /* The reference is now a passage-view link. It keeps the .reference-label mono/meta type but takes the citation-link token (--cross-ref) — never brand red — with an underline affordance on hover/focus. Mirrors .search-hit-ref so reference links read consistently and no brand color leaks near the reading surface (THEME.md: brand color is chrome-only and never in/around reading text). */ .study-spotlight-ref a { color: var(--cross-ref); } .study-spotlight-ref a:hover, .study-spotlight-ref a:focus-visible { text-decoration: underline; } .study-spotlight-refcount { margin: 0; font-family: var(--font-ui); font-size: 0.9rem; } .study-spotlight-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; padding: 0; } /* Left column wrapper — keeps the verse + meta as one flow so the grid can split it from the Explore-deeper panel. */ .study-spotlight-verse { min-width: 0; } /* Diamond-divider hairline: a thin token-only rule split by a small gold gem, between the verse specimen and its meta line. Purely decorative (aria-hidden in the markup). The gold gem sits over a faint rule drawn with two flanking lines. */ .study-spotlight-rule { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 0.85rem; color: var(--brand); } .study-spotlight-rule::before, .study-spotlight-rule::after { content: ""; flex: 1 1 auto; block-size: 1px; background: var(--pane-border-soft); } .study-spotlight-diamond { display: block; flex: 0 0 auto; opacity: 0.9; } /* Right column — the "Explore deeper" panel. A compass icon badge, a heading, the warm/plain copy, a divider, then ONE gold-outlined primary CTA. The vertical divider between the columns is drawn on this element's inline-start at >=52rem (see the grid rule above). */ .study-spotlight-explore { display: flex; flex-direction: column; align-items: flex-start; gap: 0.7rem; min-width: 0; } /* Compass icon badge (the signature gold-ring icon, Lemma §5.4). */ .study-spotlight-explore-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; inline-size: 2.75rem; block-size: 2.75rem; border-radius: 999px; background: var(--accent-soft); border: 1px solid var(--accent-border); color: var(--brand); } .study-spotlight-explore-glyph { display: block; } .study-spotlight-explore-title { margin: 0; font-family: var(--font-ui); font-size: 1.05rem; font-weight: 700; color: var(--text-primary); } .study-spotlight-explore-copy { margin: 0; font-family: var(--font-ui); font-size: 0.92rem; line-height: 1.55; color: var(--text-secondary); } .study-spotlight-explore-divider { inline-size: 100%; block-size: 1px; background: var(--pane-border-soft); margin: 0.15rem 0; } /* The single primary CTA — the gold-outlined .btn.btn-ghost idiom (inverts to a solid bright-gold fill on hover/focus). Spans the panel width. */ .study-spotlight-explore-cta { align-self: stretch; text-align: center; /* Property-scoped transition so the .btn gold-glow eases in TOGETHER with the .btn-ghost colour invert. The base .btn-ghost transition omits box-shadow, which would otherwise pop the glow in instantly while the colour fades — a subtle but cheap-feeling mismatch. Functional only; the global prefers-reduced-motion clamp (THEME.md §4) neutralises it. */ transition: color 120ms ease, background 120ms ease, border-color 120ms ease, box-shadow 120ms ease; } /* Keyboard focus earns the same gold glow as pointer hover (the base .btn adds the glow on :hover only), so tabbing to the CTA feels identical to pointing at it. The global gold focus ring still sits outside the glow for a11y. */ .study-spotlight-explore-cta:focus-visible { box-shadow: 0 6px 18px rgba(200, 161, 59, 0.3); } /* --- Section 6: lower-content 3-up panel grid --- Browse all books / Tools / From the blog, consolidating the former tools band + blog sections into one cohesive grid that sits BELOW the study-spotlight (the spotlight is the only live reading specimen and stays above). Auto-fit 3->2->1; each panel reuses the card idiom (--surface-raised + --pane-border + 12px radius) shared with .verse-card / .study-spotlight-card. Token-only; no new surface look invented. */ .home-panels { margin: 1.75rem 0; } .home-panel-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1rem; } .home-panel { border: 1px solid var(--pane-border-soft); border-radius: 12px; background: var(--surface-raised); padding: 1.1rem; display: flex; flex-direction: column; gap: 0.6rem; } .home-panel-title { margin: 0; font-size: 1.1rem; } .home-panel-line { margin: 0; color: var(--text-secondary); font-size: 0.9rem; } /* Tool / post lists inside a panel: plain stacked rows, recessive supporting copy in --text-secondary; the link itself stays the gold --brand accent. */ .home-panel-tools, .home-panel-posts { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; } .home-panel-tools li, .home-panel-posts li { color: var(--text-secondary); font-size: 0.9rem; } /* The "Browse now ->" / "All tools ->" / "View all posts ->" footer link of each panel sits at the card foot; margin-top:auto keeps it bottom-aligned so the uneven-height panels read as a tidy row. */ .home-panel-link { margin: auto 0 0; font-size: 0.9rem; } /* --- Section 4: Scripture Analysis band --- Surfaces the family of content sections that are LIVE (the roster's forthcoming members are deliberately not advertised on the front door). Matches the 1.75rem block rhythm of the neighboring sections. Each tile is a block-level wearing the .home-panel card recipe (raised surface + soft border + 12px radius). Tokens-only color; the ONLY gold is the glyph (it inherits --brand from .icon-badge) — the tile's name/line read as normal text, never gold. */ .scripture-analysis { margin: 1.75rem 0; } /* Header ornament — the centered open-book glyph flanked by gold hairline rules, reusing the home .hero-rule / .hero-flourish idiom. Centered above the display

; the

and subhead center under it so the band reads as a titled section, not a left-aligned list. Chrome only — no layout role. */ .analysis-rule { margin-inline: auto; margin-block: 0 0.5rem; } .scripture-analysis > h2 { margin: 0 0 0.35rem; text-align: center; } .analysis-subhead { margin: 0 auto 1rem; color: var(--text-secondary); font-size: 0.95rem; max-inline-size: 60ch; text-align: center; } /* Auto-fit grid mirroring .home-panel-grid so 2-3 tiles "just work" when more sections go live. At N=1 the single column would stretch full-width; capping each item's inline-size and centering the track keeps the lone tile deliberate rather than a stretched lonely card. The track is centered (justify-content) so the lone capped tile sits under the centered header ornament. */ .analysis-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 1rem; justify-content: center; } .analysis-item { max-inline-size: 30rem; } /* ICON-LEFT horizontal tile: the .icon-badge glyph at the inline-start, the title + line stacked to its right in .analysis-body. The whole tile is the link — one large tap target (>=44px naturally), one focus stop. Reading text inherits normal --text color; only the badge glyph is gold. align-items:start keeps the badge top-aligned with the title rather than vertically centered on the taller text block. */ .analysis-tile { display: flex; flex-direction: row; align-items: start; gap: 0.85rem; block-size: 100%; border: 1px solid var(--pane-border-soft); border-radius: 12px; background: var(--surface-raised); padding: 1.1rem; color: inherit; text-decoration: none; } /* The text column to the right of the badge. */ .analysis-body { display: flex; flex-direction: column; gap: 0.35rem; min-inline-size: 0; } .analysis-badge { flex: 0 0 auto; } .analysis-glyph { inline-size: 1.4rem; block-size: 1.4rem; } /* Capped tile title — serif display face, ~1.1rem, medium weight (500), so a row of tiles never out-shouts the hero search above the band. (The band

stays large; only these per-tile

titles are capped.) text-align:start keeps the tile copy left-aligned even though the header ornament/heading are centered. */ .analysis-name { margin: 0; font-family: var(--font-reading); font-size: 1.1rem; font-weight: 500; color: var(--text-primary); text-align: start; } .analysis-line { margin: 0; color: var(--text-secondary); font-size: 0.9rem; text-align: start; } /* Hover affordance, reduced-motion-safe: a quiet border lift only — NO gold bottom-glow / underline and NO standing gold arrow (every tile is an equal destination, and the whole tile is already the link). The transition is gated behind the motion-OK media query so reduced-motion users get the instant state change with no animation. */ .analysis-tile:hover { border-color: var(--accent-border); } .analysis-tile:focus-visible { outline: var(--focus-ring); outline-offset: 2px; } @media (prefers-reduced-motion: no-preference) { .analysis-tile { transition: border-color 0.15s ease; } } /* #132(b) — the band's closing provenance line. A NEW class: .analysis-subhead, .home-panel-link, .analysis-all, .source-framing-note and every .nav-* rule stay byte-untouched. Centered under the tiles, recessive, reading-measure capped. */ .analysis-provenance { margin: 0.9rem auto 0; max-inline-size: 62ch; text-align: center; font-size: 0.88rem; color: var(--text-secondary); } /* === Scripture Analysis HUB (/analysis) ================================== * * The umbrella front door. Composes the shipped .analysis-grid / .analysis-tile * recipe (above) + the section .analysis-search pill + the .rail-card .analysis-howto * explainer chrome. Only TWO genuinely-new tile bits are justified — .analysis-tile-stat * (the live meta line) and .analysis-tile--soon (the recessed soon modifier); the * rest here is minimal hub-LAYOUT + search-GROUP scaffolding (no shipped class fit a * single content column hero / a grouped-results header). Gold is CHROME-ONLY. */ /* Single content column, centered hero zone (no content+rail split — the hub has no rail content). */ .analysis-hub { padding-block: 1.5rem 2.5rem; } .analysis-hub-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.75rem; margin-block-end: 2rem; } /* The hero magnifier badge — the gold-ring .icon-badge idiom, slightly larger to anchor the hero. */ .analysis-hub-hero-badge { margin-block-end: 0.25rem; } .analysis-hub-title { margin: 0; } .analysis-hub-mission { margin: 0 auto; max-inline-size: 60ch; color: var(--text-secondary); font-size: 1rem; } /* NEW (justified) — the hub at-a-glance meta strip: a single quiet reading-ink line beneath the mission (live-of-total scope · distinct-book reach). Smaller than the mission, same reading ink (--text-secondary, NOT gold — gold is chrome-only on this hub). tabular-nums keeps the derived counts steady. Mirrors the .analysis-tile-stat spirit (a calm meta line), at the hub level. */ .analysis-hub-meta { margin: 0 auto; color: var(--text-secondary); font-size: 0.85rem; font-variant-numeric: tabular-nums; } /* The hub search pill spans the FULL content column (no inline-size cap) so it reads as the hub's primary CTA across the same measure as the roster grid below it, matching the full-width /analysis/search results-page pill (.science-theme-search). The inner .analysis-search-form is already full-width (inline-size: 100%, no cap), so lifting the wrapper cap is sufficient — no form-level override needed. */ .analysis-hub-search { inline-size: 100%; margin-block-start: 0.5rem; } /* The roster grid spans the content column (the homepage band caps each tile; here we let the auto-fit grid breathe across the full width). */ .analysis-hub-grid { margin-block-end: 2.25rem; } .analysis-hub-grid .analysis-item { max-inline-size: none; } /* NEW (justified #1) — the live-tile stat: a quiet reading-ink meta line, NOT a gold-ring landing stat badge. Reading ink (--text-secondary), small, never gold. */ .analysis-tile-stat { margin: 0.15rem 0 0; color: var(--text-secondary); font-size: 0.8rem; font-variant-numeric: tabular-nums; } /* NEW (justified #2) — the SOON tile modifier: a RECESSED, INERT card. Recession is via a SUNKEN surface + a softened border + a dimmed NAME — deliberately NOT via opacity (opacity would drag the .analysis-line's --text-secondary below WCAG AA). The .analysis-line body text stays at full --text-secondary. On --surface-sunken it measures 7.89:1 (dark), 6.69:1 (light), 4.83:1 (sepia) — all clear WCAG AA (4.5:1). Note: in the light/sepia themes the sunken surface is slightly darker than --surface, so contrast DECREASES vs --surface (7.24/5.44:1) but stays above AA; the recession is intentionally NOT via opacity (which would drag it below). The cursor + no-hover make the inert state pre-attentive alongside the badge. */ .analysis-tile--soon { background: var(--surface-sunken); border-color: var(--pane-border-soft); cursor: default; } .analysis-tile--soon .analysis-name { color: var(--text-secondary); } /* No hover lift on an inert tile (it is not a link). */ .analysis-tile--soon:hover { border-color: var(--pane-border-soft); } /* NEW (justified) — the FEATURED STRIP: one deterministic daily example per live section, side by side, BETWEEN the hero and the roster grid. It reuses the shipped .analysis-grid auto-fit recipe (2->1 responsive, same as the roster) and the .analysis-tile chrome (icon-left card), so the strip reads as one family with the roster below it. Reading-ink only — gold stays CHROME-ONLY on the hub (the search submit is the sole gold CTA); these cards get NO gold ring / trophy treatment. */ .analysis-featured { margin-block-end: 2.25rem; } /* The strip heading — descriptive, not a hook; sized like the section landings' secondary headings, calm and centered above the cards. */ .analysis-featured-heading { margin: 0 0 1rem; text-align: center; font-family: var(--font-reading); font-weight: 600; font-size: 1.15rem; color: var(--text-primary); } /* The card track caps at two columns (one per live section) on wide viewports and collapses to one on narrow — matching the roster's responsive behavior. */ .analysis-featured-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); max-inline-size: 52rem; margin-inline: auto; } /* The featured card is a non-link
(the TITLE is the link, plus a quiet "in {Section}" link), so it carries no whole-tile hover lift; the inner links own their own focus/hover. */ .analysis-featured-card { cursor: default; } .analysis-featured-card:hover { border-color: var(--pane-border-soft); } /* The section label above the entry lead — quiet reading-ink, slightly raised so the reader sees the SECTION before the example. */ .analysis-featured-label { margin: 0; color: var(--text-secondary); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; } /* The entry lead (a claim / a question) — inherits the .analysis-name serif tile title; the link is reading-ink (not gold) with a quiet underline-on-hover. */ .analysis-featured-title { margin: 0; } .analysis-featured-link { color: var(--text-primary); text-decoration: none; } .analysis-featured-link:hover { text-decoration: underline; } .analysis-featured-link:focus-visible { outline: var(--focus-ring); outline-offset: 2px; } /* The neutral sub-line (a citation / a summary teaser) — reading-ink body text. */ .analysis-featured-meta { margin: 0; } /* The quiet "in {Section} ->" affordance — small reading-ink link, not a gold CTA. */ .analysis-featured-more { margin: 0.15rem 0 0; } .analysis-featured-section { color: var(--text-secondary); font-size: 0.85rem; text-decoration: none; } .analysis-featured-section:hover { text-decoration: underline; } .analysis-featured-section:focus-visible { outline: var(--focus-ring); outline-offset: 2px; } /* The shared explainer panel below the grid — caps its measure so the family-level method reads as a calm closing note, centered under the grid. */ .analysis-hub-howto { max-inline-size: 46rem; margin-inline: auto; } /* --- Federated search results (grouped by section) --- */ /* Each group is a section block: a header (glyph + plain name + honest count) and the section's OWN reused result cards. Minimal group scaffolding only — the cards reuse .science-statement-card; only the group header + the "see all" row are new. */ .analysis-hub-results { padding-block-end: 2.5rem; } .analysis-result-group { margin-block: 2rem 0; } .analysis-result-group-header { display: flex; align-items: center; gap: 0.55rem; margin-block-end: 0.75rem; padding-block-end: 0.5rem; border-block-end: 1px solid var(--pane-border-soft); } /* The group glyph — gold chrome, inheriting the .analysis-glyph badge size. */ .analysis-result-group-icon { color: var(--brand); flex: 0 0 auto; display: inline-flex; } .analysis-result-group-title { margin: 0; font-size: 1.15rem; display: flex; align-items: baseline; gap: 0.5rem; } /* The honest full count — reading-ink meta, never gold. */ .analysis-result-group-count { font-size: 0.85rem; font-weight: 400; } .analysis-result-list { margin-block-start: 0; } /* The "See all N in {Section} →" deep link row — a quiet link, not a gold button. */ .analysis-result-group-more { margin-block: 0.75rem 0; font-size: 0.9rem; } /* #93 — the Scripture Analysis "Related by meaning" (entry-semantic) band. The ONLY genuinely new CSS this build adds: a quiet top separator that sets the subordinate band apart from the keyword content above it (every other class the band uses — .bible-search-fuzzy-head/-disclosure/-provenance, .science-statement-*, .analysis-featured-meaning* — is reused byte-untouched). */ .analysis-semantic-band { margin-block-start: var(--space-5); padding-block-start: var(--space-4); border-block-start: 1px solid var(--pane-border); } /* Intentionally rule-less: a test-scoping marker only (mirrors .search-hit--fuzzy), so a test can count semantic-band rows without colliding with the shared .science-statement-card count regex. */ .science-statement-card--semantic {} /* --- Verse card --- */ /* Lemma card recipe (§5.3): raised surface + 1px border + 12px radius + padding, and NO drop shadow (the design leans on borders/fills, not shadows; shadows are reserved for menus/dialogs/button-hover glow). */ .verse-card { background: var(--surface-raised); border: 1px solid var(--pane-border-soft); border-radius: 12px; padding: 1rem 1.1rem; } /* Reading surface: text tokens + reading font only (no brand red). */ .verse-card-text { font-family: var(--font-reading); font-size: 1.1rem; margin: 0 0 0.6rem; border: none; padding: 0; } .verse-card-missing { font-family: var(--font-ui); font-size: 0.95rem; color: var(--text-secondary); } .verse-card-meta { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: baseline; } .verse-card-ref { font-weight: 700; } .verse-card-blurb { color: var(--text-secondary); font-size: 0.9rem; } .post-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; } .post-title { font-weight: 700; font-size: 1.1rem; } .post-excerpt { margin: 0.25rem 0 0; color: var(--text-secondary); } .post-date { display: block; font-size: 0.85rem; } /* --- TOC --- */ .toc-section { margin: 1.5rem 0; } .book-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 0.4rem; } .book-grid a { display: block; padding: 0.5rem 0.65rem; border: 1px solid var(--pane-border); border-radius: 8px; background: var(--surface-raised); color: var(--text-primary); } /* Catalog/navigation chrome — brand accent on hover is allowed here. */ .book-grid a:hover { border-color: var(--brand); text-decoration: none; } .toc-other { border-top: 1px solid var(--pane-border); padding-top: 1.25rem; } /* --- Reader --- */ /* Shared reader chrome still used by the compare (parallel.ejs) and study (verse.ejs) views. The CHAPTER reader (reader.ejs) folds these into the RD5 toolbar, but the sibling views keep the classic header, so the tokens stay. */ .reader-breadcrumb { color: var(--text-secondary); font-size: 0.9rem; margin-bottom: 0.5rem; } .reader-header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.75rem; } .reader-header h1 { margin: 0; } .reader-compare-link { margin: 0 0 0.75rem; font-family: var(--font-ui); font-size: 0.9rem; } .chapter-jump { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; } .chapter-jump label { font-family: var(--font-ui); font-size: 0.85rem; color: var(--text-secondary); } .chapter-jump select { padding: 0.35rem 0.5rem; border: 1px solid var(--pane-border); border-radius: 8px; background: var(--surface); color: var(--text-primary); } /* --- RD5: compact, sticky reader toolbar --- Replaces the four stacked pre-text rows with one row. Chrome (THEME.md §0): brand accents on the active version chip / focus are allowed; the reading column below stays calm. Logical properties throughout for RTL (THEME.md §5). CLS (THEME.md §6): the toolbar reserves a fixed min height so it never shifts the scripture when it becomes sticky. It sticks just under the site header (which is itself sticky at top:0). */ .reader-toolbar { position: sticky; inset-block-start: 0; z-index: 40; margin-block-end: 0.5rem; background: var(--surface); border-block-end: 1px solid var(--pane-border); /* Reserve height to avoid layout shift on stick (CLS). */ min-block-size: 3rem; } .reader-toolbar-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding-block: 0.5rem; min-block-size: 3rem; } /* Book/chapter control (the breadcrumb + h1 fold into this). A native
so it opens with no JS; app.js adds click-away/single-open. */ .reader-loc { position: relative; } .reader-loc-summary { display: inline-flex; align-items: baseline; gap: 0.4rem; padding: 0.4rem 0.7rem; border: 1px solid var(--pane-border); border-radius: 999px; background: var(--surface-raised); color: var(--text-primary); font-family: var(--font-ui); cursor: pointer; list-style: none; /* Tap target ≥44px (RD20 a11y). */ min-block-size: 2.75rem; } .reader-loc-summary::-webkit-details-marker { display: none; } .reader-loc-summary:hover { border-color: var(--brand); } .reader-loc-book { font-weight: 600; } .reader-loc-chapter { font-weight: 600; } .reader-loc-caret { color: var(--text-secondary); font-size: 0.8em; } /* Item 4 (this UX pass) — the LEADING book glyph is rendered in the shared summary markup but shown ONLY on the study page (the chapter reader's picker is untouched). Hidden by default; revealed + sized under .study-page below. */ .reader-loc-glyph { display: none; } /* Item 2 — STUDY-PAGE book/chapter picker affordance. Scoped under .study-page so the chapter reader/compare keep their existing toolbar look. A clearer button/pill affordance matching the mockup: a defined border, a visible hover/focus-visible ring, and a caret that nudges on open — so it reads as a tappable control, not just a label. Tokens only; the ≥44px target is inherited from .reader-loc-summary above. Chrome, so the brand accent on hover/focus is allowed (THEME.md §0); the reading column is untouched. */ .study-page .reader-loc-summary { gap: 0.5rem; padding: 0.5rem 0.9rem; background: var(--surface-raised); font-weight: 600; /* Center-align so the leading glyph + book/chapter labels + caret share a baseline row cleanly (the base picker uses baseline alignment without a glyph). */ align-items: center; transition: border-color 0.15s ease, background-color 0.15s ease; } /* Item 4 — reveal the leading book glyph on the study-page picker (recessive at rest, brightening to the accent on hover/open for parity with the version dropdown). */ .study-page .reader-loc-glyph { display: inline-flex; inline-size: 1.1em; block-size: 1.1em; flex: 0 0 auto; color: var(--text-secondary); } .study-page .reader-loc-summary:hover .reader-loc-glyph, .study-page .reader-loc[open] > .reader-loc-summary .reader-loc-glyph { color: var(--brand); } .study-page .reader-loc-summary:hover { border-color: var(--brand); background: var(--surface-sunken); } .study-page .reader-loc-summary:focus-visible { outline: 2px solid var(--accent-border); outline-offset: 2px; border-color: var(--brand); } .study-page .reader-loc[open] > .reader-loc-summary { border-color: var(--brand); } .study-page .reader-loc-caret { transition: transform 0.15s ease; } .study-page .reader-loc[open] > .reader-loc-summary .reader-loc-caret { transform: rotate(180deg); } .reader-loc-panel { position: absolute; inset-block-start: calc(100% + 0.35rem); inset-inline-start: 0; z-index: 5; min-inline-size: 14rem; padding: 0.75rem; border: 1px solid var(--pane-border); border-radius: var(--radius); background: var(--surface-raised); box-shadow: var(--shadow); } .reader-loc-links { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0.6rem 0 0; font-family: var(--font-ui); font-size: 0.9rem; } /* RD11 — global picker inside the toolbar location panel. The panel can hold the whole canon (two collapsible testaments, each a book list whose chapter grids are lazy-built by app.js), so cap its height and scroll rather than pushing the page. Logical properties for RTL (THEME.md §5). */ .reader-loc-panel { max-block-size: min(70vh, 32rem); overflow-y: auto; } .reader-loc-picker { margin-block-start: 0.6rem; } .reader-loc-testament { border-block-start: 1px solid var(--pane-border); } .reader-loc-testament:first-child { border-block-start: none; } .reader-loc-testament-summary { cursor: pointer; padding-block: 0.5rem; font-family: var(--font-ui); font-size: 0.85rem; font-weight: 600; color: var(--text-secondary); list-style-position: inside; } .reader-loc-testament-summary:hover { color: var(--brand); } /* The toolbar picker reuses the .book-picker-* tokens (defined in the /bible TOC section) but in a denser context: tighten the rows so a long book list scans. */ .reader-loc-picker .book-picker-list { gap: 0.25rem; padding-block-end: 0.4rem; } .reader-loc-picker .book-picker-summary { padding: 0.45rem 0.6rem; min-block-size: 2.5rem; } /* =========================================================================== P1-7 (this UX pass) — RESTYLE the OPEN book/chapter picker panel ON-BRAND. The closed summary pills are already good; the open panel was a plain dropdown. Token-only polish; the native
mechanism is UNTOUCHED (no-JS still opens it). SCOPED under .study-page so the chapter reader / compare picker is unaffected (the spec: study-page-specific styling stays under .study-page). Gold appears only as the chrome accent border (a control frame, not reading text), per the gold policy. =========================================================================== */ /* The open panel reads as the SAME on-brand control as its gold-hover pill: soften the harder --pane-border to --pane-border-soft and add a thin gold top accent that ties it to the summary it dropped from. */ .study-page .reader-loc-panel { border-color: var(--pane-border-soft); border-block-start: 2px solid var(--accent-border); } /* The quick-jump reads as an INSET strip: a sunken ground + radius groups label+select as a distinct band at the top of the panel. */ .study-page .chapter-jump { padding: var(--space-2); background: var(--surface-sunken); border-radius: var(--radius); } /* Soften the quick-jump . Works in BOTH the chapter reader / compare context and under .study-page, so these rules are NOT scoped to .study-page. Gold (--brand / --accent-border / --accent-soft) is CHROME ONLY here: the active tab, the selected book row accent, the selected chapter tile, control hover/focus rings. Book names stay --text-primary (titles, not gold links). Logical properties for RTL; ≥44px touch targets; visible focus-visible rings; reduced-motion respected. =========================================================================== */ /* When the two-pane is live the panel needs room for two comfortable columns: give it an explicit width (viewport-capped so it never overflows the screen) and a taller scroll cap than the base panel. app.js adds .reader-loc-panel--twopane when it reveals the two-pane (no :has() dependency). */ .reader-loc-panel--twopane { inline-size: 34rem; max-inline-size: calc(100vw - 2rem); max-block-size: min(82vh, 44rem); /* Flex column so the filter / recents / section group stay PINNED and only the book+chapter content scrolls — no second (outer-panel) scrollbar stacked on top of the book list. overflow:hidden makes the inner .loc-twopane-body the lone scroll. */ display: flex; flex-direction: column; overflow: hidden; } /* Pass the panel height down to the body: the picker + two-pane wrappers fill the remaining space; the chapter-jump (hidden when two-pane) + the /bible link don't grow. */ .reader-loc-panel--twopane > .chapter-jump, .reader-loc-panel--twopane > .reader-loc-links { flex: 0 0 auto; } .reader-loc-panel--twopane > .reader-loc-picker { flex: 1 1 auto; min-block-size: 0; display: flex; flex-direction: column; } .reader-loc-panel--twopane .loc-twopane { flex: 1 1 auto; min-block-size: 0; display: flex; flex-direction: column; } .loc-twopane-filter, .loc-twopane-recents, .loc-twopane-tabs { flex: 0 0 auto; } .loc-twopane { margin-block-start: 0.6rem; } .loc-twopane-filter { margin-block-end: 0.5rem; } .loc-twopane-search { inline-size: 100%; min-block-size: 2.75rem; padding: 0.45rem 0.7rem; border: 1px solid var(--pane-border-soft); border-radius: var(--radius); background: var(--surface); color: var(--text-primary); font-family: var(--font-ui); font-size: 0.9rem; } .loc-twopane-search:focus-visible { outline: 2px solid var(--accent-border); outline-offset: 1px; border-color: var(--brand); } .loc-twopane-recents { margin-block-end: 0.5rem; } /* The picker's recents chips reuse the global .recents-link pill but, as a primary touch target in this control, get the ≥44px tap height (scoped so the global chip used elsewhere is unchanged). */ .loc-twopane-recents .recents-link { min-block-size: 2.75rem; } /* Segmented OT/DC/NT control (a group of toggle buttons). Sunken track; the active button is the only gold chrome. ≥44px tap targets. */ .loc-twopane-tabs { display: flex; gap: 0.25rem; margin-block-end: 0.6rem; padding: 0.2rem; border-radius: 999px; background: var(--surface-sunken); } .loc-tab { flex: 1 1 0; min-block-size: 2.75rem; padding: 0.4rem 0.6rem; border: 1px solid transparent; border-radius: 999px; background: transparent; color: var(--text-secondary); font-family: var(--font-ui); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.03em; cursor: pointer; transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease; } .loc-tab:hover { color: var(--brand); } .loc-tab:focus-visible { outline: 2px solid var(--accent-border); outline-offset: 1px; } .loc-tab.is-active { background: var(--surface-raised); border-color: var(--accent-border); color: var(--brand); } /* The two panes: book list (inline-start) + chapter grid (inline-end). Stacks to a single column (book list, then chapters) on narrow viewports. */ .loc-twopane-body { flex: 1 1 auto; min-block-size: 0; overflow-y: auto; /* the ONE content scroll: both panes scroll together */ display: grid; grid-template-columns: minmax(11rem, 1fr) minmax(14rem, 1.3fr); gap: 0.85rem; align-items: start; } @media (max-width: 30rem) { /* Single column: let the whole panel scroll as one block (there is only one column of content to move, so no pinned header / inner scroll is needed). */ .reader-loc-panel--twopane { inline-size: auto; min-inline-size: 14rem; max-inline-size: calc(100vw - 1.5rem); display: block; overflow-y: auto; } .loc-twopane-body { grid-template-columns: 1fr; overflow-y: visible; } } /* LEFT pane — the filtered book list. It scrolls WITH the body scroll area, so it carries no scroll of its own. */ .loc-twopane-books { display: flex; flex-direction: column; gap: 0.2rem; } .loc-book-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; border: 1px solid transparent; border-radius: var(--radius); } /* The section filter / type-ahead hide rows via the [hidden] attribute. .loc-book-row sets display:flex, which would otherwise BEAT the UA [hidden]{display:none} (equal specificity, author rule wins) and leave "hidden" rows visible — so restore it. */ .loc-book-row[hidden] { display: none; } .loc-book-row.is-selected { border-color: var(--accent-border); background: var(--surface-sunken); /* "Selected" accent rule on the inline-start edge (RTL-safe). */ border-inline-start: 3px solid var(--accent-border); } .loc-book-select { flex: 1 1 auto; min-block-size: 2.75rem; padding: 0.45rem 0.6rem; border: 0; border-radius: var(--radius); background: transparent; /* Book name is a TITLE, not a gold link. */ color: var(--text-primary); font-family: var(--font-ui); font-size: 0.92rem; font-weight: 600; text-align: start; cursor: pointer; } .loc-book-row:hover { background: var(--surface-sunken); } .loc-book-select:focus-visible { outline: 2px solid var(--accent-border); outline-offset: -2px; border-radius: var(--radius); } .loc-book-row.is-selected .loc-book-select { color: var(--brand); } .loc-book-count { flex: 0 0 auto; padding-inline-end: 0.6rem; font-family: var(--font-mono); font-size: 0.8rem; } /* RIGHT pane — the selected book's chapter grid, headed by a link to the book page (keeps the book-landing page reachable). Reuses the shared .chapter-grid / .chapter-link tokens; the selected-tile chrome accent is added here. */ .loc-twopane-chapters-head { margin: 0 0 0.4rem; } .loc-twopane-bookname { font-family: var(--font-ui); font-size: 0.92rem; font-weight: 600; /* The book-page link reads as a title, not gold reading content. */ color: var(--text-primary); text-decoration: none; } .loc-twopane-bookname:hover, .loc-twopane-bookname:focus-visible { text-decoration: underline; } .loc-twopane-chapters .chapter-grid { padding: 0; border-top: 0; grid-template-columns: repeat(auto-fill, minmax(2.5rem, 1fr)); } .loc-twopane-chapters .chapter-link { min-block-size: 2.75rem; } .loc-twopane-chapters .chapter-link:focus-visible { outline: 2px solid var(--accent-border); outline-offset: 1px; } /* Custom (theme-aware) scrollbar for the picker's scroll surfaces — the system-skinned bar reads as foreign inside the floating panel. A QUIET neutral thumb (--pane-border, not gold — a scrollbar is recessive chrome) on a transparent track, slightly more present on hover. Standard scrollbar-* (Firefox/Chromium) + the ::-webkit-* fallback (Chrome/Safari/Edge); where neither is honored the native bar shows — pure enhancement. Both the two-pane body (desktop scroll) and the panel itself (the reader/compare dropdown + the narrow-screen two-pane scroll) are covered. The study-page version PICKER panel (.reader-versions-panel) is the same kind of floating, scroll-if-long dropdown, so it takes the identical recessive bar. The verse-popover scroll surfaces — the mobile bottom sheet itself, its horizontal tab strip, and the (most-seen) Explain/commentary note body — are the same kind of floating-card scroll, so they take the identical bar too. */ .loc-twopane-body, .reader-versions-panel, .reader-loc-panel, .verse-popover, .verse-popover-tabs, .verse-popover-explain-body, .verse-popover-compare-list { scrollbar-width: thin; scrollbar-color: var(--pane-border) transparent; } .loc-twopane-body::-webkit-scrollbar, .reader-versions-panel::-webkit-scrollbar, .reader-loc-panel::-webkit-scrollbar, .verse-popover::-webkit-scrollbar, .verse-popover-tabs::-webkit-scrollbar, .verse-popover-explain-body::-webkit-scrollbar, .verse-popover-compare-list::-webkit-scrollbar { inline-size: 10px; block-size: 10px; } .loc-twopane-body::-webkit-scrollbar-track, .reader-versions-panel::-webkit-scrollbar-track, .reader-loc-panel::-webkit-scrollbar-track, .verse-popover::-webkit-scrollbar-track, .verse-popover-tabs::-webkit-scrollbar-track, .verse-popover-explain-body::-webkit-scrollbar-track, .verse-popover-compare-list::-webkit-scrollbar-track { background: transparent; } .loc-twopane-body::-webkit-scrollbar-thumb, .reader-versions-panel::-webkit-scrollbar-thumb, .reader-loc-panel::-webkit-scrollbar-thumb, .verse-popover::-webkit-scrollbar-thumb, .verse-popover-tabs::-webkit-scrollbar-thumb, .verse-popover-explain-body::-webkit-scrollbar-thumb, .verse-popover-compare-list::-webkit-scrollbar-thumb { background-color: var(--pane-border); border-radius: 999px; /* A transparent border + padding-box clip insets the thumb into a slim pill. */ border: 3px solid transparent; background-clip: padding-box; } .loc-twopane-body::-webkit-scrollbar-thumb:hover, .reader-versions-panel::-webkit-scrollbar-thumb:hover, .reader-loc-panel::-webkit-scrollbar-thumb:hover, .verse-popover::-webkit-scrollbar-thumb:hover, .verse-popover-tabs::-webkit-scrollbar-thumb:hover, .verse-popover-explain-body::-webkit-scrollbar-thumb:hover, .verse-popover-compare-list::-webkit-scrollbar-thumb:hover { background-color: var(--text-secondary); } /* Reduced-motion: drop the tab/control transitions. */ @media (prefers-reduced-motion: reduce) { .loc-tab { transition: none; } } /* Version chips live inline in the toolbar (reuse the .version-chip token). */ .reader-toolbar-versions { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0; padding: 0; } /* Compact VERSION DROPDOWN — the study-page variant of the version switcher (mockup's top-right "WEB ▾"). A native
so it opens with no JS; app.js adds click-away/single-open. The summary mirrors the .reader-loc-summary pill so the two study controls read as a matched pair; the panel links to the OTHER versions via the same no-JS /bible/version switcher the chips use. Chrome — the accent on hover/focus is allowed (THEME.md §0); the reading column stays calm. */ .reader-versions { position: relative; } .reader-versions-summary { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.7rem; border: 1px solid var(--pane-border); border-radius: 999px; background: var(--surface-raised); color: var(--text-primary); font-family: var(--font-ui); cursor: pointer; list-style: none; min-block-size: 2.75rem; /* tap target ≥44px (RD20 a11y) */ } .reader-versions-summary::-webkit-details-marker { display: none; } .reader-versions-summary:hover, .reader-versions[open] > .reader-versions-summary { border-color: var(--brand); } .reader-versions-summary:focus-visible { outline: 2px solid var(--accent-border); outline-offset: 2px; } /* Item 5 (this UX pass) — the LEADING translation glyph on the version dropdown summary. Recessive wayfinding cue (--text-secondary), like the picker's book glyph; it brightens toward the accent when the control is hovered/open (chrome, THEME.md §0). */ .reader-versions-glyph { inline-size: 1.1em; block-size: 1.1em; flex: 0 0 auto; color: var(--text-secondary); } .reader-versions-summary:hover .reader-versions-glyph, .reader-versions[open] > .reader-versions-summary .reader-versions-glyph { color: var(--brand); } .reader-versions-code { font-family: var(--font-mono); font-size: 0.85rem; font-weight: 600; } .reader-versions-caret { color: var(--text-secondary); font-size: 0.8em; /* Item 5 — the caret ROTATES on open for visual parity with the picker. Motion is functional (open/close affordance); reduced-motion users get the end state with no transition (global @media handles transition suppression). */ transition: transform 0.15s ease; } .reader-versions[open] > .reader-versions-summary .reader-versions-caret { transform: rotate(180deg); } .reader-versions-panel { position: absolute; inset-block-start: calc(100% + 0.35rem); inset-inline-end: 0; z-index: 5; /* Explicit width so the longest translation NAME ("American Standard Version (1901)") fits on ONE line — without it the panel shrink-wrapped to ~14rem and the body's min-inline-size:0 let names wrap. Anchored inset-inline-end:0, so it grows LEFTward; the viewport cap keeps the left edge on-screen (collapses gracefully on mobile). */ min-inline-size: 14rem; inline-size: 28rem; max-inline-size: calc(100vw - 2rem); max-block-size: min(70vh, 28rem); overflow-y: auto; padding: 0.6rem; /* P1-7 — soften the border to --pane-border-soft (matching the study cards) and add a thin gold top accent so the OPEN panel reads as the same on-brand control as its gold-hover summary pill. Chrome accent (a control frame), not reading text — per the gold policy. The dropdown is study-page-only (rendered behind the versionMenu flag), so no extra .study-page scoping is needed. */ border: 1px solid var(--pane-border-soft); border-block-start: 2px solid var(--accent-border); border-radius: var(--radius); background: var(--surface-raised); box-shadow: var(--shadow); } .reader-versions-label { margin: 0 0 0.35rem; font-family: var(--font-ui); font-size: 0.75rem; } /* v1 picker — the type-ahead filter. Shipped hidden; app.js reveals + wires it. Reuses the two-pane book filter's input idiom (token-only; ≥44px; gold focus ring is chrome). */ .reader-versions-filter { margin-block-end: 0.5rem; } .reader-versions-search { inline-size: 100%; min-block-size: 2.75rem; padding: 0.45rem 0.7rem; border: 1px solid var(--pane-border-soft); border-radius: var(--radius); background: var(--surface); color: var(--text-primary); font-family: var(--font-ui); font-size: 0.9rem; } .reader-versions-search:focus-visible { outline: 2px solid var(--accent-border); outline-offset: 1px; border-color: var(--brand); } .reader-versions-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.1rem; } /* PINNED active row — sits above the groups with a quiet eyebrow. */ .reader-versions-pinned { margin-block-end: 0.35rem; } .reader-versions-eyebrow { margin: 0 0 0.2rem; font-family: var(--font-ui); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; } /* GROUP heading — a neutral section label between the pinned row and its rows. Not a link, not gold: a plain muted divider label. */ .reader-versions-group-head { margin-block-start: 0.5rem; padding: 0.3rem 0.6rem 0.2rem; font-family: var(--font-ui); font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); } /* No top margin on the FIRST group head when there is no pinned row (defensive: the panel always renders a pinned active row, but keep it tidy regardless). */ .reader-versions-list > .reader-versions-group-head:first-child { margin-block-start: 0; } /* A version ROW. Three columns: the mono CODE badge, the body (name + the muted provenance line), and an optional trailing check (active row only). */ .reader-versions-item { display: flex; align-items: flex-start; gap: 0.55rem; padding: 0.5rem 0.6rem; min-block-size: 2.75rem; /* tap target ≥44px */ border-radius: var(--radius); color: var(--text-primary); text-decoration: none; } a.reader-versions-item:hover, a.reader-versions-item:focus-visible { background: var(--surface-sunken); text-decoration: none; } /* ACTIVE row — gold LEFT-BAR accent + soft gold TINT + trailing check. An active-state use of gold chrome (THEME.md §0), NOT a full gold flood: the code badge, name, and provenance stay neutral text tokens so the row still reads as text, not a button. */ .reader-versions-item.is-active { position: relative; background: var(--accent-soft); border-inline-start: 3px solid var(--brand); padding-inline-start: calc(0.6rem - 3px); /* keep text aligned across the bar */ color: var(--text-primary); cursor: default; } .reader-versions-item-code { flex: 0 0 auto; font-family: var(--font-mono); font-size: 0.8rem; font-weight: 600; /* nudge the badge baseline to meet the name's cap height in the column layout */ padding-block-start: 0.05rem; } .reader-versions-item-body { display: flex; flex-direction: column; gap: 0.1rem; min-inline-size: 0; /* allow the name/meta to wrap inside the flex row */ } .reader-versions-item-name { font-size: 0.85rem; font-family: var(--font-ui); color: var(--text-primary); } /* PROVENANCE line ([blurb · ]license). The picker's headline feature, so it must meet AA. Measured: --text-secondary on the panel's actual --surface-raised bg is dark 6.22 / light 7.50 / sepia 5.93 — all well above AA's 4.5. (In dark mode raised is LIGHTER than --surface, so the ratio is slightly LOWER there than the documented on-surface 7.5, but still clears AA comfortably.) Do NOT drop to a fainter token. */ .reader-versions-item-meta { font-size: 0.75rem; font-family: var(--font-ui); color: var(--text-secondary); line-height: 1.35; } /* The trailing check on the active row — gold chrome, decorative (aria-hidden). */ .reader-versions-check { flex: 0 0 auto; margin-inline-start: auto; color: var(--brand); font-size: 0.85rem; padding-block-start: 0.05rem; } /* FOOTER — the "More about these translations →" link, pinned at the panel bottom (matching the location picker's "/bible" link treatment). */ .reader-versions-links { margin: 0.5rem 0 0; padding-block-start: 0.4rem; border-block-start: 1px solid var(--pane-border-soft); font-family: var(--font-ui); font-size: 0.8rem; } .reader-versions-links a { color: var(--brand); } /* "⋯ More" affordance — a native
menu (Compare + reading-mode + settings). Pushed to the inline-end so the book/chapter control leads. */ .reader-more { position: relative; margin-inline-start: auto; } .reader-more-summary { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.4rem 0.7rem; border: 1px solid var(--pane-border); border-radius: 999px; background: var(--surface-raised); color: var(--text-primary); font-family: var(--font-ui); cursor: pointer; list-style: none; min-block-size: 2.75rem; } .reader-more-summary::-webkit-details-marker { display: none; } .reader-more-summary:hover { border-color: var(--brand); } .reader-more-label { font-size: 0.9rem; } .reader-more-panel { position: absolute; inset-block-start: calc(100% + 0.35rem); inset-inline-end: 0; z-index: 5; min-inline-size: 12rem; padding: 0.35rem; border: 1px solid var(--pane-border); border-radius: var(--radius); background: var(--surface-raised); box-shadow: var(--shadow); display: flex; flex-direction: column; } .reader-more-item { display: block; padding: 0.55rem 0.6rem; border-radius: var(--radius); color: var(--text-primary); font-family: var(--font-ui); font-size: 0.9rem; text-decoration: none; } .reader-more-item:hover { background: var(--surface-sunken); text-decoration: none; } /* READING SURFACE: paints only with --surface / --text-primary / --text-secondary. The gold accent NEVER colors verse body text — it is chrome/links/active only (a hard product requirement). Reading-body metrics per THEME.md §3 (19px/1.65, 66ch). Dark-surface calibration (gold-on-navy retheme). The reading body is now GENTIUM BOOK PLUS; --text-primary (#e6edf3) on the dark navy --surface (#0a1530) measures 15.28:1 (AAA) — kept just below pure white to avoid the glare of a maximum-luminance body. The hair of letter-spacing (0.01em) still quiets halation of a serif body on the dark navy ground at 19px and is visually neutral in light/sepia; AAA body contrast is preserved untouched. NOTE: live in-browser legibility of Gentium on the navy ground could not be verified headlessly — if sustained reading tests poorly, the documented one-line revert to Literata (reorder --font-reading) restores the prior screen-tuned body. */ .scripture { max-width: var(--measure); font-family: var(--font-reading); font-size: 19px; line-height: 1.65; letter-spacing: 0.01em; /* quiets halation on the dark navy ground; AAA contrast unchanged */ margin: 1.25rem 0; /* Positioning context for the FLOATING verse popover (R1): the popover is inserted as an in-flow sibling of the verse blocks but styled position:absolute so it overlays the text without reflowing the chapter. .scripture is the tightest ancestor that wraps every verse AND the inserted popover, so its content-box is the correct coordinate space for the JS top/left math (app.js open()). On mobile the popover becomes position:fixed (bottom sheet), where the offset parent no longer applies. WARNING: keep .scripture's padding AND border at 0 — app.js position() measures the anchor from this element's border-box edge (getBoundingClientRect), which only coincides with the absolute-positioning padding-box origin while the border is 0; adding padding/border here would silently mis-anchor the popover. */ position: relative; } /* CHAPTER-READER CENTERING. `.container` is max-width 76rem (~1216px) and centers the BOX (margin:0 auto), but the reader's children (.scripture, .reader-hero, .verse-para) each cap at --measure with NO auto-margins, so they pinned to the inline-START edge, leaving a wide dead gutter. Capping main.reader itself at the reading measure (the SAME move .study-page makes) lets .container's margin:0 auto center the WHOLE reading-width page, so the toolbar re-aligns over the column too. The +2*--space-5 accounts for .container's own inline padding so the --measure content is fully visible, not clipped. Scoped to main.reader so the compare/study surfaces (which set their own widths) are untouched. */ main.reader { max-width: calc(var(--measure) + 2 * var(--space-5)); } /* CHAPTER-READER ANALYSIS RAIL. When (and ONLY when) the chapter has live Scripture Analysis areas, the reader is the modifier .reader--has-rail and renders a .reader-grid: the reading column (.reader-main, --measure wide) in col 1 and a ~20rem analysis rail (.reader-rail) in col 2 — mirroring the established .bible-search-grid / .bible-search-rail pattern for cohesion. Most chapters cite nothing, so the modifier is absent and the plain centered single-column reader above is used UNCHANGED (no dead gutter). The widened box: just enough to hold --measure + the grid gap + the 20rem rail (+ the container's own inline padding), and STILL centered by .container's margin:0 auto. The reading column stays --measure; the rail is the extra width, not the column. Below the grid breakpoint the rail stacks under the column, so the page stays at the single-column reading width — only widen the box once the two-column grid actually engages. */ main.reader.reader--has-rail { max-width: calc(var(--measure) + 2 * var(--space-5)); } @media (min-width: 52rem) { main.reader.reader--has-rail { max-width: calc(var(--measure) + 20rem + var(--space-6) + 2 * var(--space-5)); } } /* The two-column grid: single-column baseline (the rail reflows BELOW the reading column on mobile — a pure reflow, placement via grid-column, never order:); at >=52rem a two-column grid with the reading column in col 1 and the analysis rail in col 2. SOURCE ORDER already = reading column THEN rail, so the explicit placement is a placement, not a reorder. The hero lives INSIDE .reader-main (col 1), so it centers over the reading column, not over the full grid width. */ .reader-grid { display: grid; gap: var(--space-5); align-items: start; } .reader-grid > * { min-width: 0; } @media (min-width: 52rem) { .reader-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); gap: var(--space-6); } .reader-grid > .reader-main { grid-column: 1; } .reader-grid > .reader-rail { grid-column: 2; } } /* The reading column keeps the reading measure; in the has-rail layout the hero/scripture children already cap at --measure, so the column is exactly as wide as the column-only reader — the rail is purely additive width. */ .reader-grid > .reader-main { max-inline-size: var(--measure); } /* The analysis RAIL card — the SAME raised-card recipe as .bible-search-rail (soft border, radius, --surface-raised, padding) so the rail reads as one family with the search rail. In the ~20rem column the shared analysis-area-groups partial gets a denser presentation via this wrapper (tightened type + spacing) WITHOUT editing the shared partial. */ .reader-rail { border: 1px solid var(--pane-border-soft); border-radius: var(--radius); background: var(--surface-raised); padding: var(--space-4); } /* The rail panel's own gold heading owns the section title; drop the heading's default bottom margin overcrowding and let the card padding breathe. Denser entry rhythm than the full-width study panel — the rail column is narrow. */ .reader-rail .study-section { margin: 0; } /* The analysis panel is the FIRST section in the reader rail, so the shared .study-section top-divider hairline (border-block-start) has nothing above it to separate from and reads as a stray line above "Examined in Scripture Analysis". Drop the leading divider on the rail's first section; any subsequent rail sections keep their dividers. */ .reader-rail .study-section:first-child { border-block-start: none; } .reader-rail .study-analysis .analysis-area { font-size: 0.95rem; } /* #109 — ONE-TIME ONBOARDING TIP HOST. The reserved-height host is SSR-rendered EMPTY + `hidden` as the first child of .reader-main; app.js (initReaderTip) fills it and removes `hidden` only when the show gate passes (storage available, not dismissed, not immersive). TRUE ZERO-BOX HOST: the host carries NO height reserve and we do NOT override the UA `[hidden] { display:none }`, so the SSR `hidden` attribute makes the host a genuine zero box on every path. On the SHOW path JS un-hides + fills it, so the tip appears and pushes scripture down ONCE — the accepted one-time first-visit nudge for a brand-new reader (the opacity-only entrance below softens it; it does not prevent the reflow). On every NO-SHOW path (dismissed / returning / immersive / no storage / no JS) the host stays `hidden` = zero box, so there is no empty band and no shift. There is no standalone .reader-tip-host rule: the class survives ONLY as the selector target for the immersive display:none belt (near the bottom of this stylesheet). */ /* The injected tip card. QUIET, not a gold flood (it sits atop every cold reader's first scripture view): a raised surface, a single quiet --pane-border frame, and ONE gold note only — a thin inline-start hairline (the lone gold mark, mirroring the .notice-warn inline-start hairline idiom). Body text recesses to --text-secondary; the "Tip:" label takes --text-primary weight. NO gold fill, and never both a gold border AND gold text. Padding + radius match the .notice card. */ .reader-tip { display: flex; align-items: flex-start; gap: 0.6rem; background: var(--surface-raised); border: 1px solid var(--pane-border); border-inline-start: 3px solid var(--accent-border); /* the lone gold accent */ border-radius: var(--radius); padding: 0.7rem 0.9rem; margin-block-end: 1rem; color: var(--text-secondary); font-size: 0.95rem; line-height: 1.45; } /* Opacity-only entrance (no height/transform — that would re-introduce CLS). Gated by prefers-reduced-motion: no-preference; the global reduced-motion clamp (~L321) already neutralizes the duration otherwise, and 0->1 with a clamped duration resolves instantly, so a motion-averse reader sees it appear at once. */ @media (prefers-reduced-motion: no-preference) { .reader-tip { animation: reader-tip-fade 150ms ease-out; } } @keyframes reader-tip-fade { from { opacity: 0; } to { opacity: 1; } } .reader-tip-body { flex: 1 1 auto; } .reader-tip-label { color: var(--text-primary); font-weight: 600; } /* The dismiss control: a real