/* ANCHOR JUMPS ARE INSTANT, NEVER ANIMATED. Bootstrap's reboot sets `scroll-behavior: smooth` on :root inside a (prefers-reduced-motion: no-preference) query. That makes every jump to a #fragment glide the whole way down the document — which on About, Terms, Privacy and the commentary introduction means picking a section from the contents list sends the page rolling past every section above it (user, 2026-07-31). On a page eighteen screens tall that is a long ride, and the reader arrives disoriented rather than placed. This is the same root cause the reader already fought: js/app.js flips the property to 'auto' around its programmatic scrollIntoView so a verse is not glided to. That workaround could only cover scrolls the app itself performs — a fragment jump is the browser's own navigation and no script is involved, so it needed fixing where it is set. Overriding it here does both jobs at once; the guard in app.js stays as it is, harmless and self-documenting. Set unconditionally rather than inside a media query of our own: this restores the platform default, and a reader who has asked for reduced motion was already getting it. Landing position is handled separately, by the scroll-margin-top on .prose-heading, .prose-subheading and .verse-row. */ :root { scroll-behavior: auto; } /* The search box's filter menus. The part-of-the-Bible menu is ~560px of choices — taller than a phone leaves below the box — so it is capped to the viewport and scrolls within itself; the version menu shares the rule harmlessly, four rows never reaching the cap. overscroll-behavior keeps a scroll that hits the menu's end from spilling into the page behind it. Popper (no data-bs-display="static" on these buttons) handles the rest, flipping the menu upward when the box sits low on a scrolled results page. */ .input-group > .dropdown-menu { max-height: min(35rem, 70vh); overflow-y: auto; overscroll-behavior: contain; /* Tighter than the surrounding prose (1.4): these are one-line menu rows, not sentences, and the tightening also buys the tall part-of-the-Bible list a little more room on a short screen. Set on the menu so rows and group headers inherit it together. */ line-height: 1.2; } /* The worked example under the search box. The query is a button so it can be put into the field with one click (and reached by keyboard), but it has to READ as part of the sentence around it, not as a control — hence the full reset. The monospace and weight come from .prose code, which the search page already sits inside, so the query is set apart from the prose without a rule of its own. */ .search-hint-try { border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; } /* Underlining only the code keeps the affordance on the part that is clickable. The resume link ("pick up where you left off") dresses the same way, so a clickable query looks like one thing everywhere on the page. */ .search-resume-link { text-decoration: none; color: inherit; } .search-hint-try:hover code, .search-hint-try:focus-visible code, .search-resume-link:hover code, .search-resume-link:focus-visible code { text-decoration: underline; } /* "Clear" beside the result count. No underline at rest — it sits inside a small uppercase line and a rule under it read as clutter — but one on hover and on keyboard focus, so the thing is still visibly a link at the moment of using it. Colour alone carries it the rest of the time. */ .search-clear { text-decoration: none; /* Reads as the word "Clear", not as another SHOUTED heading fragment: it is the one thing on the line you can act on, and sentence case sets it apart from the label it sits beside. Declared here to override the uppercase inherited from the heading around it. */ text-transform: none; } .search-clear:hover, .search-clear:focus-visible { text-decoration: underline; } /* The query echoed above the result count, inside a text-uppercase line. Shown exactly as it was typed: see the note in search.php — the search operators are case-sensitive, so uppercasing the echo could report a query that never ran. */ .search-echo { text-transform: none; } /* The place band, above the verse results. It answers a different question from the verses beneath it — where a place is, rather than where it is spoken of — so it is set apart by a rule and a tint rather than dressed as a first result. Quiet on purpose: for Jerusalem, on thirteen plates, this still has to read as an aside the eye can pass over on its way to Scripture. */ /* The measures band — a unit, a month or a feast the query names — is the same object with different content, so it shares every rule here rather than copying them: one look, and the two cannot drift apart. Extend these selector lists for any third band rather than adding a block. */ /* The commentary band is the third, added 2026-07-31, and it joins these lists rather than getting a block of its own — exactly as the note above asks. It holds up to three comments instead of one line, which is the only reason it has any rules of its own further down. */ /* The ad band is the fourth (2026-08-02), and it joins the lists the same way. Its one distinction is deliberate and small: a neutral grey edge instead of the site's primary blue, so a paid band never borrows the exact dress of the three editorial ones — the "Sponsored" tag says it in words, the edge says it at a glance. */ .search-topic, .search-place, .search-measure, .search-commentary, .search-ad { border-left: 3px solid var(--bs-primary, #0d6efd); background: rgba(13, 110, 253, 0.04); border-radius: 0 0.25rem 0.25rem 0; padding: 0.5rem 0.75rem; } .search-ad { border-left-color: var(--bs-secondary, #6c757d); background: rgba(108, 117, 125, 0.05); color: inherit; } /* OUR OWN BAND IS GOLD (Daniel, 2026-08-15) — the same rule and wash as an advertiser's band, in the app's own colour instead of the neutral grey, so a Biblion announcement is told from an advertisement at a glance and before the label is read. ⚠ THIS IS THE ONE PLACE GOLD DOES NOT MEAN "HERE". The standing rule ([[bible-gold-system]]) is that `rgba(201,162,39,.22)` marks the selected thing; this is identity, not selection, and it is kept apart from that rule by being a different value — --biblion-gold-tint, 0.16, which exists for exactly this kind of quiet ground and is used by no selection state. Do not "unify" the two alphas: the day they match, a band starts looking like it is chosen. */ .search-ad-own { border-left-color: var(--biblion-gold); background: var(--biblion-gold-tint, rgba(201, 162, 39, 0.16)); } .search-ad:hover .search-ad-name { text-decoration: underline; } /* Two place bands stacking is the only adjacency there is: no word is both a place on the plates and a measure on that page — checked, 140 terms against 465 place names — so a measure band under a place band is left to its own mt-3 rather than given a selector here for a case that cannot arise. If one ever does, this is the line that wants ".search-place + .search-measure". */ .search-place + .search-place { margin-top: 0.4rem; } /* THE PEOPLE & PLACES BAND IS VIOLET, alone on this page, and the reason is the app's own colour language rather than variety: the blue bands are Biblion telling you something (our plates, our measures, our commentary), and this is a reference work QUOTED — the same act as the lexicon article behind a Strong's number, which is where a reader first meets this hue ([[bible-gold-system]], [[bible-lexicon-articles]]). Same rule, same wash, same shape as its blue siblings above; only the channel differs. */ .search-who { border-left: 3px solid #7a5ea8; background: rgba(122, 94, 168, 0.05); border-radius: 0 0.25rem 0.25rem 0; padding: 0.5rem 0.75rem; } .search-who + .search-who { margin-top: 0.4rem; } /* ⚠ THE LINK IS DARKENED INSIDE THIS BAND, and the reason is the wash under it. Bootstrap's #0d6efd is 4.63:1 on white — already only just past AA — and the band's 5% violet ground drops it to 4.22:1, which fails. #0a58ca is Bootstrap's own hover blue and measures 5.9:1 on the same ground, so the fix costs no new colour. Anywhere a band tints its background, re-measure the link rather than assuming the default still clears. */ .search-who a { color: #0a58ca; } /* THE CREDIT UNDER THE BANDS IS SMALLER THAN THEY ARE (Daniel, 2026-08-19): at body size it was 1rem against the band's own 0.95rem, so the acknowledgement was louder than the thing being acknowledged. ⚠ This is a DELIBERATE EXCEPTION to the standing rule in [[bible-typography]] that a note is body text and never small or muted — and the distinction is worth keeping: that rule protects notes written TO the reader, which are either worth full size or should not be written. This is not one. It is a licence condition discharged in the reader's sight, and its job is to be present and legible, not to compete with the answer it sits under. The attribution paragraphs on who.php, place.php and people.php are notes and stay at body size. */ .search-who-credit { font-size: 0.8rem; color: var(--bs-secondary-color, #6c757d); /* IT WEARS THE BAND'S OWN DRESS AND TOUCHES IT (Daniel, 2026-08-19): "use the same band for credits as for results, so the user will know intuitively they belong together". As a bare paragraph below the bands it read as page text that happened to follow them — a shared boundary is the strongest grouping signal there is, and two things inside one violet edge are one thing. Same rule, same wash, and NO gap above, so the credit is the foot of the band rather than a neighbour of it; only the bottom corner rounds, because the top edge is a seam, not an end. */ /* It is rendered INSIDE the last band rather than after it, so there is no seam to hide and no dependence on :has() — which sits exactly on this project's browser floor ([[bible_browser_compat]]) and is the wrong thing to spend a margin of safety on when the markup can simply say it. */ margin-top: 0.45rem; } .search-place-name, .search-measure-name, .search-commentary-name, .search-who-name, .search-ad-name { font-weight: 600; text-transform: none; /* the heading above this line shouts; this does not */ } /* The topic band's title is the ONE thing on this page set in the reading serif outside the verses themselves, and that is how it tells itself apart from the two editorial bands beneath it without taking a colour of its own ([[bible-typography]] — 600 is a real cut of this face; 500 and 700 are not). It is also the name of the page it opens, word for word, so what the reader lands on is what the band promised. */ .search-topic-name { font-family: 'Roboto Serif', 'Reading Fallback', Georgia, serif; font-size: 1.05rem; font-weight: 600; text-transform: none; } .search-topic-blurb { color: var(--bs-secondary-color, #6c757d); } .search-topic:hover .search-topic-name { text-decoration: underline; } /* THE COMMENTARY BAND'S HEADING IS NORMAL WEIGHT (Daniel, 2026-08-15), alone among the four above. A place or a measure name is a RESULT — the thing you were looking for — and carries the weight of one. "The commentary on this" is a label on a band, not a hit, and setting it like the others made the band announce itself more loudly than the comments inside it. Split out rather than removed from the rule above, so the other three keep the treatment that is right for them. */ .search-commentary-name { font-weight: 400; } /* "in Macedonia" — the three names that are two different towns. Set in the name's own weight, because it is part of the name here and not a comment on it: without it the two Pellas are told apart only by doing the geography. */ .search-place-qual { font-weight: 600; } /* "the conquest plate's name for Jerusalem". The reader typed Jebus; being handed Jerusalem with no explanation reads as the search having misheard. */ .search-place-alias, /* THE MATCH HIGHLIGHT IN A VERSE — a wash in the app's gold, not a badge (Daniel, 2026-08-15, in two steps: normal weight first, then "the same shade of gold we have on command palette instead of this warning color"). THE VALUE IS THE COMMAND PALETTE'S OWN, character for character. There it says "this is the line you are on"; here it says "this is the word you asked for". One colour, one meaning — and the two surfaces are near enough in background (the palette panel rgb(250,247,240), these results white) that the same alpha genuinely reads the same on both. It replaced `badge text-bg-warning`, which was wrong twice over: the warning role is the colour of "careful", and a matched word is the thing the reader came for; and a badge is a solid pill with padding and a 6px corner, which drops a chip into running scripture instead of marking it. Normal weight stays for the reason it was set — the tint finds the word, and the verse should still read as a verse. Measured before shipping: ink reads 11.5:1 on this wash against 12.9:1 on the old amber, so no legibility was traded for the calm. */ /* THE VERSION CODE IN FRONT OF A SEARCH RESULT IS A COLUMN, NOT A WORD (Daniel, 2026-08-15: "can version identifiers WEB, KJV etc. be fixed width? So that the verse text will start at the same point"). Measured at this size and weight, the seven codes run from KJV at 26.0px to WEB at 31.1px, so two lines of the same result started 5px apart and the left edge of the text sawtoothed down the page. The same idea as .palette-kind, which is fixed-width for exactly this reason. MIN-WIDTH, NOT WIDTH, and that is the whole care in this rule: a code longer than three characters — a future translation, or the "WLC ketiv" variant the reader already prints — pushes the column wider instead of being clipped or overrunning its neighbour. Everything at three characters still lines up. 2.25rem clears the widest code with room to spare; the me-1/ms-2 margins on the markup still supply the gap, so the two decisions stay separate. */ /* THE WRAPPED LINES OF A VERSE HANG UNDER THE FIRST (Daniel, 2026-08-15: "align the second row of verse ... with the first row"). The code sat inline, so line one flowed after it and line two returned to the container's left edge, under the label. ⚠ FLEX WAS TRIED HERE FIRST AND IS CATASTROPHIC — do not go back to it. The reasoning that it would work was wrong in a specific way worth writing down: only a contiguous run of TEXT becomes one anonymous flex item, while every ELEMENT child becomes an item of its own. A verse in these results is text, then a , then text, then another mark — so the whole verse shattered into one narrow column per fragment, words stacked vertically. Daniel saw it on the page: "just the row, not all the words, this look awful now." A negative text-indent was the second attempt and also wrong: it outdents the whole first line, and the first line carries the label, so WEB and KJV hung out to the left of "Genesis 14:2" and past the row's shading. Absolute positioning was the third: it fixed the indent and the outdent, but a label out of the flow shares no baseline with the text it labels, so the code floated against the verse's first line. ⇨ THE MARKUP IS A TWO-COLUMN TABLE NOW (Daniel's suggestion), and these rules are all that is left to do. A cell gives the three things the CSS was fighting for: baseline alignment between the code and the verse's first line, a column that every wrapped line clears, and no way to outdent. Do not try to put this back into a div — the failures above are the whole history of that idea. See the note at the markup in search.php. */ .search-verses { width: 100%; border-collapse: collapse; } .search-verses td { /* The whole point: the code and the verse's first line sit on one baseline. */ vertical-align: baseline; padding: 0; } /* Scoped to td.search-source so it outranks the `padding: 0` above on specificity — (0,2,1) against (0,1,1) — rather than with an !important. */ .search-verses td.search-source { /* Shrink-to-fit against a width this small, so the column comes out as wide as the widest code and no wider; nowrap because a two-line "WLC ketiv" would set the row's height from the label rather than from the verse. */ width: 2.5rem; white-space: nowrap; padding-inline-end: 0.35rem; } /* The commentary band's reference, set as a USFM code — "DAN 5:10-16" — so the headings after it start on one line (Daniel, 2026-08-15; the markup note is in search.php). The code fixes the book at three characters; this column absorbs what is left, which is only how many digits a chapter and a verse range take. min-width again, not width: a reference like "1CH 12:23-40" is wider than "JOB 1:1" by digits alone, and the long one should push rather than be clipped. Sized to clear the common shapes; the rare very long range moves its own heading and nothing else. */ /* The commentary band is a two-column table like the verse results above. THE COLUMN SIZES ITSELF: `width: 1px` on a table cell means "as narrow as the content allows", so the reference column comes out exactly as wide as the longest reference in THIS band and every heading lines up on it. The 7.5rem min-width this used to carry is gone — it was a guess at the widest possible reference, and once the references shortened to USFM codes it was far too wide for most bands. NO UNDERLINE, AND THAT MEANS ON HOVER TOO (Daniel, 2026-08-15). A flat visual rule is absolute here, not a starting point — keeping the hover underline is the exact mistake made on the article map links, shipped as a "softened" compromise and called out on the live page. The reference is blue and sits in a list of links; it needs no rule under it to be found. */ .search-commentary-hits { width: 100%; border-collapse: collapse; } .search-commentary-hits td { vertical-align: baseline; padding: 0 0 0.5rem; } .search-commentary-hits td.search-commentary-ref { width: 1px; white-space: nowrap; padding-inline-end: 0.6rem; /* Black (Daniel, 2026-08-15). It stopped being a link when the link moved to the title, and it was muted grey for an hour on my reading that "not the thing you press" meant "quieter" — it does not. The range is a fact about the comment and a reader scanning the band uses it to place the passage, so it is set in the same black as the book buttons rather than in the grey Bootstrap keeps for things that look disabled. The blue it used to wear was the misdirection; grey was an overcorrection. */ color: #000; } .search-hit { background-color: rgba(201, 162, 39, 0.22); border-radius: 0.15em; padding: 0.05em 0.15em; font-weight: 400; } .search-place-kind, .search-topic-kind, .search-measure-kind, .search-commentary-kind, .search-who-kind, .search-ad-kind { font-weight: 400; font-size: 0.85rem; color: var(--bs-secondary-color, #6c757d); text-transform: none; } .search-place-kind::before, .search-topic-kind::before, .search-measure-kind::before, .search-commentary-kind::before, .search-who-kind::before, .search-ad-kind::before { content: ' · '; } /* EVERY BAND'S ANSWER IS ONE SIZE (Daniel, 2026-08-19): 0.95rem, which is what the commentary band's point already used — "let's say just like commentary band uses". The sizes had drifted apart, 0.9 here and 0.95 there, and the difference read as a hierarchy nobody intended: the people & places sentence looked like a footnote beside a commentary point doing the identical job. These five lines are the ANSWER each band exists to give, one per band, so they are set alike and kept in one rule where they cannot drift again. What stays smaller stays smaller on purpose and is NOT an answer — the ·kind label above (0.85rem) and the licence credit below (0.8rem), which Daniel checked separately and left alone the same day. */ .search-who-line, .search-topic-blurb, .search-place-maps, .search-measure-link, .search-commentary-point { font-size: 0.95rem; } .search-place-sep, .search-measure-sep { color: var(--bs-secondary-color, #6c757d); } /* The commentary band's own three rules — it carries up to three hits where the other two carry one line, so it needs a little internal structure. The HEADING is the comment's title and the POINT is its one-sentence answer. The point is the reason the band exists, so it is given the room of its own line rather than being run in after the title, where it would read as a subtitle and be skipped. It stays at body colour: a muted grey here would say "small print" about the only sentence on the band worth reading. */ /* The comment's title, and since 2026-08-15 it is THE LINK of the row — the reference beside it is plain metadata. Bold because it is the heading of the thing being offered, blue because it is what opens, and never underlined, on hover as well as at rest, by the same flat rule the reference link followed. No left margin: it used to hold the heading off an inline reference, and the reference is a cell of its own now with its own padding. Left in place it indented the title 0.35rem past the point beneath it. */ .search-commentary-heading { font-weight: 600; } a.search-commentary-heading, a.search-commentary-heading:hover, a.search-commentary-heading:focus { text-decoration: none; } /* Its size lives with the other band answers, above — it was the one they were raised to match. */ .search-commentary-point { margin-top: 0.1rem; } /* Last hit sits flush with the band's padding, so the box does not gain a stray half-line of air under it. As a table row this is the CELL's padding — margin does not apply to a row, so the old margin-bottom rule here became a no-op the moment the band became a table. */ .search-commentary-hits tr:last-child td { padding-bottom: 0; } /* Where a hint is about one of the buttons rather than something to type, its icon stands in the query's place. Given the same weight and colour as the it replaces, so the line keeps one rhythm — and it is NOT underlined on hover, because unlike the examples it is a picture of a control, not a click target. */ .search-hint-icon { color: #000; font-size: 0.95em; } /* Prompt — the site's UI/display face, full weight range (Thin 100 … Black 900). */ @font-face { font-family: 'Prompt'; font-style: normal; font-weight: 100; font-display: swap; src: url('../fonts/prompt-100.woff2') format('woff2'); } @font-face { font-family: 'Prompt'; font-style: normal; font-weight: 200; font-display: swap; src: url('../fonts/prompt-200.woff2') format('woff2'); } @font-face { font-family: 'Prompt'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/prompt-300.woff2') format('woff2'); } @font-face { font-family: 'Prompt'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/prompt-400.woff2') format('woff2'); } @font-face { font-family: 'Prompt'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/prompt-500.woff2') format('woff2'); } @font-face { font-family: 'Prompt'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/prompt-600.woff2') format('woff2'); } @font-face { font-family: 'Prompt'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/prompt-700.woff2') format('woff2'); } @font-face { font-family: 'Prompt'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/prompt-800.woff2') format('woff2'); } @font-face { font-family: 'Prompt'; font-style: normal; font-weight: 900; font-display: swap; src: url('../fonts/prompt-900.woff2') format('woff2'); } /* ⚠ THE ONLY REAL ITALICS ON THE SITE — added 2026-08-15. Until then not one @font-face declared an italic style, so EVERY anywhere was a SYNTHETIC OBLIQUE: the browser shearing the upright glyphs. It shows worst in the commentary, where the Greek transliterations are set in emphasis (*koinōneō* in the corpus, rendered as ) and came out as slanted Prompt Light rather than a drawn italic — Daniel took it for a font substitution. HOW TO PROVE WHICH YOU ARE LOOKING AT, since a shear is easy to mistake for a face: measure the same word upright and italic. A synthetic oblique keeps the advance widths exactly — "koinōneō" measured 439.3px both ways before this — while a real italic redraws the letterforms and cannot match to the pixel. TWO WEIGHTS, NOT NINE: 300 is .prose's body weight and 500 is what .prose strong takes, so those are the only two an can inherit today. If a heading weight ever needs emphasis, fetch that cut too rather than letting it fall back to synthesis. ⚠ TWO FILES PER WEIGHT, AND THE unicode-range IS LOAD-BEARING. Google serves this face in subsets, and the `latin` one stops at U+00FF. The transliterations this was added for live ABOVE that line — ō is U+014D, ē is U+0113, ḥ is U+1E25 — so a latin-only italic would have covered "k o i n e" and not "ō", and rendered koinōneō from two different fonts mid-word: the very fault this is meant to cure, made worse. The `-ext` files carry Latin Extended-A and the ranges below are copied from Google's own CSS. Do not "simplify" this to one file per weight unless the file genuinely carries both ranges — the upright cuts already do, which is why they need no such split. */ @font-face { font-family: 'Prompt'; font-style: italic; font-weight: 300; font-display: swap; src: url('../fonts/prompt-300italic-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Prompt'; font-style: italic; font-weight: 300; font-display: swap; src: url('../fonts/prompt-300italic.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Prompt'; font-style: italic; font-weight: 500; font-display: swap; src: url('../fonts/prompt-500italic-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Prompt'; font-style: italic; font-weight: 500; font-display: swap; src: url('../fonts/prompt-500italic.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Roboto Serif (Regular / SemiBold / ExtraBold) — the scripture itself and the running header above it, and the headings on the about page. 400 and 600 are preloaded in head.php: they are wanted for the first paint of every chapter, and discovered here they would be requested too late to make it. */ @font-face { font-family: 'Roboto Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/roboto-serif-400.woff2') format('woff2'); } @font-face { font-family: 'Roboto Serif'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/roboto-serif-600.woff2') format('woff2'); } @font-face { font-family: 'Roboto Serif'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/roboto-serif-800.woff2') format('woff2'); } /* The face that stands in for Roboto Serif until it arrives — Georgia, or Times where there is no Georgia, adjusted to occupy exactly the space Roboto Serif will. Without this, a chapter renders in a font 11.7% narrower with a smaller x-height, and then everything below reflows the instant the real one lands: measured at 943px of jump on Psalm 119, which throws the reader off the verse they followed a link to. With it, the swap changes the letterforms and moves nothing at all. The numbers are measured, not guessed. Average character width per em gives 113.2% as a first approximation, but average width is not how a paragraph actually breaks; sweeping the value against a real chapter and comparing page heights lands on 115.5%, which leaves Psalm 119 within 22px over its 18,888 — about a tenth of one percent, and nothing a reader can see. Ascent and descent are Roboto Serif's own 0.927 and 0.244, each divided by the size-adjust so the line box comes out the same height. Re-measure the same way if the reading face is ever changed. ONE NUMBER PER FACE, measured 2026-07-28. This was a single rule carrying 115.5% for all seven names, which was right only for Georgia: the others were wearing Georgia's number. Times New Roman needs 125.8%, Noto Serif — the stock Android serif, so the one most readers off Windows actually get — 106.7%, DejaVu Serif 99.3%. Noto at 115.5% was rendering about 8% too wide, which is the reflow this whole mechanism exists to prevent. How they were measured, and how to redo it: set one long line of scripture in 'Roboto Serif' at a large size with white-space: nowrap, measure it, then measure the same line in the candidate face; size-adjust is target ÷ candidate. Ascent and descent stay Roboto Serif's own 0.927 and 0.244, each divided by that face's size-adjust so every line box comes out the same height. TWO TRAPS in doing it again: - Measure in the browser against the LOADED webfont, never from a font file downloaded upstream. Roboto Serif ships here as a static 400 instance; the upstream file is variable, and its default instance has different advance widths, which puts the answer out by ~6%. (x-height agrees between the two, because sxHeight is one static table value — so an x-height-based check will look fine while the widths are wrong. Width is the basis that matters: reflow is line breaking.) - Georgia's 115.5% was left exactly as swept. An independent width measurement gives 116.2%, i.e. it confirms the original sweep rather than replacing it, and 0.7% is not worth changing a value that was looked at and accepted. DECLARATION ORDER IS REVERSE PREFERENCE, and this is the trap that makes the split work at all. When several @font-face rules share a family name and differ only in src, the LAST one whose local() resolves wins — verified in this browser, both directions. So the order below runs least-preferred first and Georgia last, which reproduces the old src list's order exactly. That is also why the Times metrics appear twice: Liberation/Tinos have to sit before Noto Serif and Times/Times New Roman after it, or the old preference order would change on machines carrying more than one of them. WHERE THIS DOES NOT REACH, and it is worth knowing rather than rediscovering: 1. Safari 16 and earlier — including iOS 16 — ignore all four override descriptors. There is no polyfill and no fallback: on those the stand-in renders at its own metrics and the reflow above is back. Nothing to fix here; it goes away as iOS 17 finishes rolling through. 2. The src list is what makes the mechanism engage at all, and Georgia/Times are Microsoft/Apple fonts. On stock Android none of them exist, so the rule matched nothing, 'Reading Fallback' dropped out of the stack, and the reflow was back for a different reason. Hence the Android and Linux names — Liberation Serif and Tinos being metric-compatible with Times New Roman, though fontconfig often aliases those to Times before it gets this far. */ @font-face { font-family: 'Reading Fallback'; src: local('DejaVu Serif'); size-adjust: 99.3%; ascent-override: 93.4%; descent-override: 24.6%; line-gap-override: 0%; } /* Metric-compatible with Times New Roman, so they share its number. Declared before Noto Serif to keep the old order, in which Noto was preferred. */ @font-face { font-family: 'Reading Fallback'; src: local('Liberation Serif'), local('Tinos'); size-adjust: 125.8%; ascent-override: 73.7%; descent-override: 19.4%; line-gap-override: 0%; } @font-face { font-family: 'Reading Fallback'; src: local('Noto Serif'); size-adjust: 106.7%; ascent-override: 86.9%; descent-override: 22.9%; line-gap-override: 0%; } @font-face { font-family: 'Reading Fallback'; src: local('Times New Roman'), local('Times'); size-adjust: 125.8%; ascent-override: 73.7%; descent-override: 19.4%; line-gap-override: 0%; } /* Last, so it wins wherever it exists — which is every Windows and every Mac. */ @font-face { font-family: 'Reading Fallback'; src: local('Georgia'); size-adjust: 115.5%; ascent-override: 80.3%; descent-override: 21.1%; line-gap-override: 0%; } /* Noto Sans Hebrew / Greek — the original-language texts (WLC and the Greek TR) and the Strong's lemmas. Self-hosted like every other font so the rendering is the same on every OS instead of leaning on whatever the system provides. Each face only covers its own script, so a combined stack lets the browser pick the right one per glyph — Hebrew from the Hebrew face, Greek from the Greek face — which is why the lemma (either script) can list both. */ @font-face { font-family: 'Noto Sans Hebrew'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/noto-sans-hebrew-400.woff2') format('woff2'); } @font-face { font-family: 'Noto Sans Greek'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/noto-sans-greek-400.woff2') format('woff2'); } /* POLYTONIC. The file above is Google's Noto Sans 'greek' subset — verified byte-identical to it — and that subset is MONOTONIC ONLY (U+0370-03FF). The Textus Receptus is polytonic throughout: breathings, circumflexes and iota subscripts all live in Greek Extended, U+1F00-1FFF, and without this face every one of them fell out of the family and was drawn by Segoe UI on Windows and by each other OS's own serif elsewhere — inside a word, so 'ἀρχῇ' was rendered from two faces at once. Measured 2026-08-13: 1,078 of the Greek characters on John 1 are polytonic. It is declared AFTER the face above and carries an explicit unicode-range, which is what makes it win for exactly this block and nothing else: when two @font-face rules of one family overlap, the LAST is checked first, and this one's range does not contain the monotonic letters. The rule above is deliberately left without a range so nothing else about it changes. */ @font-face { font-family: 'Noto Sans Greek'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/noto-sans-greek-ext-400.woff2') format('woff2'); unicode-range: U+1F00-1FFF; } /* Suez One for the Shema on the landing page — a heavy, square Hebrew slab serif, one weight (already black by design). Only the landing page pulls it, so its weight is not on the reader's critical path. Hebrew subset only. */ @font-face { font-family: 'Suez One'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/suez-one-400.woff2') format('woff2'); } /* Google Sans (Bold) for the Greek quote on the landing page. Greek subset only; landing page only. */ @font-face { font-family: 'Google Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/google-sans-greek-700.woff2') format('woff2'); } @font-face { font-family: 'Gochi Hand'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/gochi-hand-v27-latin-regular.woff2') format('woff2'), url('../fonts/gochi-hand-v27-latin-regular.ttf') format('truetype'); } /* Roboto Mono — for code/monospace. */ @font-face { font-family: 'Roboto Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/roboto-mono-400.woff2') format('woff2'); } @font-face { font-family: 'Roboto Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/roboto-mono-700.woff2') format('woff2'); } /* Use Roboto Mono for all monospace (code, kbd, samp, pre via Bootstrap). */ :root { --bs-font-monospace: 'Roboto Mono', SFMono-Regular, Menlo, Consolas, monospace; /* THE GOLD. One accent, shared on purpose (Daniel, 2026-08-02): the player's scrubber and auto-advance switch, the verse being spoken, and the scroll progress line at the top of the page all carry it, so that "something is running" reads the same wherever it appears. Named because it is now five places rather than one, and a hue this specific should be changed in one edit. IT IS A CONSTANT, NOT THE MOOD'S GOLD. The brand mark's --brand-roller is tinted per colorway from each wallpaper's own palette; this deliberately is not, or the progress line and the player would drift apart from each other every time the reader changed the background. The tint is spelled out rather than derived: color-mix() would express it from the line above, but it only reached Chrome 111 and the floor here is 108 ([[bible-browser-compat]]), and a fallback-less color function fails to an invalid declaration rather than to a sensible color. */ --biblion-gold: #c9a227; --biblion-gold-tint: rgba(201, 162, 39, 0.16); /* The app's one red, for the destructive controls (Daniel, 2026-08-15: "pink-red-tomato"). A warmer red than Bootstrap's crimson #dc3545, and CHOSEN BY MEASUREMENT rather than by eye: white on it is 4.73:1, which clears AA at button-label size. Tomato itself (#ff6347) is 2.95:1 and fails outright — it looks right and is unreadable. If this value is ever warmed further, re-measure the white. */ --biblion-tomato: #cf4125; /* The rounded corners, the notch and the home indicator, as four lengths anything pinned to an edge can add to its own offset. THESE ARE ZERO TODAY, ON EVERY DEVICE, AND THAT IS DELIBERATE. An inset only becomes non-zero when the viewport meta in includes/head.php carries viewport-fit=cover; without it iOS keeps the layout viewport inside the safe area, so nothing can land under the notch and every calc() below reduces to the plain offset it had before. The plumbing is in place so that turning cover on is a one-attribute change rather than a hunt through the stylesheet — and so it can be previewed here: override these four on :root in devtools (iPhone 14 Pro portrait is 59/0/34/0) and the whole page lays out as it would on the phone, without a phone. Kept as variables rather than repeating env() at each site so that the preview above works at all: env() cannot be overridden, a variable can. */ --safe-t: env(safe-area-inset-top, 0px); --safe-r: env(safe-area-inset-right, 0px); --safe-b: env(safe-area-inset-bottom, 0px); --safe-l: env(safe-area-inset-left, 0px); } .strongnum, .morph { font-family: 'Prompt', sans-serif; margin-left: 2px; padding: 0 1px; } .strongnum { cursor: pointer; } /* Brand wordmark in the site's display font. */ .navbar-brand { font-family: 'Prompt', sans-serif; } /* The fixed bar spans the full width, so under viewport-fit=cover its contents would run beneath the notch and the rounded corners. Padding, not offsets: the bar's background should still reach every edge — that is the point of going edge to edge — while what it holds stays inside the safe area. Zero today; see the note on --safe-* at the top of this file. NOT DONE HERE, and it is the remaining half of the job: the CLEARANCE under this bar. The reader's own is below (.verses.reader-flow), but every other page clears the bar with Bootstrap's pt-5 written into its markup, which no stylesheet rule can reach. Those pages need their own top padding before viewport-fit=cover goes on, or their first line will sit under a bar that just grew by the height of the notch. */ .navbar.fixed-top { /* Through Bootstrap's own variable, not a repeated 0.5rem, so a change to the framework's navbar padding is not silently overridden here. */ padding-top: calc(var(--bs-navbar-padding-y, 0.5rem) + var(--safe-t)); padding-left: var(--safe-l); padding-right: var(--safe-r); } /* The chapter picker only holds numbers, so keep it just wide enough for three digits plus the dropdown caret rather than the placeholder text. */ .chapter-select { width: 4.75rem; } /* Navbar dropdowns (Options, account menu) open on click same as ever, just without Bootstrap's caret glyph. */ .navbar-nav .dropdown-toggle::after { display: none; } /* The items in those menus are set Light. They are a list of places to go rather than anything to be read, and at this size Prompt's regular weight makes a short menu look heavier than the bar above it. The headers between the bands ("Mood", "Admin") keep their medium weight, which is what now separates a label from the items under it. */ .navbar .dropdown-menu .dropdown-item { font-weight: 300; } /* NOTHING IN THE BAR OR ITS MENUS TAKES A SECOND ROW — it is shortened with an ellipsis instead (Daniel, 2026-08-07). The items that can grow are all the dynamic ones: "Continue reading Song of Solomon 1", "Back to the reading for August 6", the Resume line the player writes, and the account menu carrying a reader's own name. Any of them can outrun the menu on a narrow screen, and a menu entry that becomes two lines reads as two entries. Bootstrap already sets white-space: nowrap on .dropdown-item, which alone makes a long label widen the MENU rather than wrap — off the side of a phone. The cap is what turns that into an ellipsis: wide enough that every fixed label in the menus fits untouched, and bounded by the viewport so it can never overhang. min() rather than a bare rem for the same reason .auth-card uses one — a fixed width wider than a 375px phone runs off it. */ .navbar .dropdown-menu { max-width: min(22rem, calc(100vw - 1.5rem)); } /* THE SELECTED AND THE JUST-CLICKED ITEM ARE GOLD, NOT BOOTSTRAP BLUE (Daniel, 2026-08-15: "use gold in here and for that brief moment the blue color shows now when menuitem is clicked"). Both are one variable's job. Bootstrap draws `.dropdown-item.active` and `.dropdown-item:active` from the same --bs-dropdown-link-active-bg, so the standing mark on the current mood and the flash under a finger are the same colour by construction — override the variable and there is no specificity fight to lose, and no rule to keep in step with a future Bootstrap. #0d6efd was the last loud blue left in the chrome: on a near-black menu it was the brightest thing on the screen, for an item whose whole job is to say quietly which mood is already on. TWO SURFACES, TWO STRENGTHS. The navbar's menus are near-black, where 0.22 nearly disappears, so they take 0.28 with white type. Every other dropdown in the app — the search filters, the map switch — sits on white and takes 0.22 with the menu's own ink, because white type on a pale wash would be unreadable. Same colour either way. */ .dropdown-menu { --bs-dropdown-link-active-bg: rgba(201, 162, 39, 0.22); --bs-dropdown-link-active-color: inherit; } .navbar .dropdown-menu { --bs-dropdown-link-active-bg: rgba(201, 162, 39, 0.28); --bs-dropdown-link-active-color: #fff; } .navbar .dropdown-menu .dropdown-item { overflow: hidden; text-overflow: ellipsis; } /* The top-level items too — "Navigator", "Articles", and the account toggle, which is a name and so is the one that can surprise. */ .navbar .nav-link { white-space: nowrap; } /* Sign-in / register / account pages. */ /* Sign in, register, recover. A narrow card rather than a reading column, so it is deliberately not .prose — but it was inheriting nothing from it either, and these three pages were the only ones on the site set in the browser's default sans. The type is taken from .prose and the width is not: same voice, own shape. Kept in step by hand, which is worth a glance if .prose ever changes. */ .auth-card { /* min(), not a bare 25rem: at 400px the card was wider than a 375px phone and ran off the edge of it. */ width: min(25rem, 100%); font-family: 'Prompt', sans-serif; font-weight: 300; line-height: 1.4; color: #2c2926; } /* Sign in, register, recover and the recovery-code screen are laid out the same way: the business of the page in two thirds, an aside in the remaining third. The card no longer sets its own width — the column does that now — but keeps a ceiling so a form does not sprawl across a wide screen. */ .auth-layout .auth-card { width: 100%; max-width: 30rem; } /* The contact form is the one card here that wants the whole column. The 30rem cap suits the sign-in pages, where every field is a single short line and a wider box would only stretch the gap between label and value — but this form is mostly an eight-row textarea, and someone writing several paragraphs into a 30rem box is being made to work in a slot when there is a column of free space beside it. Applied per page rather than raising the shared cap, because the reason is this form's shape and not a change of mind about the others. */ .auth-layout .auth-card-wide { max-width: none; } /* The aside beside the form. Set as scripture is set everywhere else — Roboto Serif, the same x-height correction the reader uses — and kept quiet: this is something to rest on while signing in, not a second thing to do. */ .auth-verse { margin: 2.5rem 0 0; padding-top: 1.5rem; border-top: 1px solid rgba(0, 0, 0, 0.08); text-align: center; } /* Once the columns are side by side, the aside stops being a footnote and becomes a margin note: no rule above it, aligned with the text rather than centred, and held down the page a little so it sits against the form rather than floating at the top of an empty column. */ @media (min-width: 992px) { .auth-layout .auth-verse { margin: 0; padding-top: 5.5rem; padding-right: 1.5rem; border-top: 0; text-align: left; } } /* Typing a recovery code back in. Monospace and letter-spaced like the slip it was copied from, so the two read as the same thing and a mistyped character is easier to spot. */ .recovery-input { font-family: 'Roboto Mono', monospace; letter-spacing: 0.06em; } /* The disclosure that folds away optional fields — the register form's last-name/email pair, and the article editor's address/author/editor. A link, not a button — it reveals rather than does. */ .auth-optional-toggle { /* Never underlined, hover included (user, 2026-07-26): the plus/minus and the link color already say it acts. */ text-decoration: none; font-size: 0.9rem; } .auth-optional-toggle::before { content: "\f067"; /* plus */ font-family: 'Font Awesome 6 Pro', 'Font Awesome 6 Free'; font-weight: 900; font-size: 0.7em; margin-right: 0.5em; } .auth-optional-toggle[aria-expanded="true"]::before { content: "\f068"; } /* minus */ /* The warning under the recovery slip. Amber rather than red — it is a caution about care, not an error, and the page is not reporting that anything has gone wrong. The icon hangs in the margin so the sentence keeps a straight left edge as it wraps, rather than the second line tucking under the triangle. */ .auth-warning { position: relative; padding-left: 1.75rem; font-size: 0.9rem; color: #7a5c1e; } .auth-warning i { position: absolute; left: 0; top: 0.15em; font-size: 1.1rem; color: #c9922b; } .auth-verse blockquote { font-family: 'Roboto Serif', 'Reading Fallback', Georgia, serif; font-weight: 400; font-size: calc(1.05rem * var(--reader-face-scale, 0.914)); line-height: 1.5; color: #3f3a2f; margin: 0; } /* THE GOLD LIVES ON THE CAPTION, NOT THE LINK — moved 2026-08-15 when the translation code joined the reference ("Jeremiah 33:3 · WEB"). The code sits OUTSIDE the anchor deliberately, since a translation is not a place to go, so with the colour on the anchor alone it fell back to body black beside a gold reference. Setting it here and letting the link inherit keeps ONE definition of the colour for both halves of one line. */ .auth-verse figcaption { font-family: 'Prompt', sans-serif; font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; margin-top: 0.75rem; color: #a08c62; } .auth-verse figcaption a { color: inherit; text-decoration: none; } .auth-verse figcaption a:hover, .auth-verse figcaption a:focus-visible { text-decoration: underline; } /* The sign-in, register and recovery pages are drawn on the reader's own sheet rather than on a white panel, so arriving at them feels like opening the book rather than leaving it. .bible-paper is otherwise the reader's alone — it is scoped to a direct child of .container there — so these pages ask for it by name. The toning vignette comes with it, and both are unconditional here: they are the page's design, not a preference, and a signed-out visitor has no preferences to consult anyway. */ .container > .bg-white.bible-paper.age-toning { background-color: #eceae2 !important; } /* The one-time recovery code — must stay selectable despite body user-select:none. */ /* The recovery slip. This is the only screen in the app that is shown once and never again, so it is drawn as something to keep rather than as a message to read: warm paper stock like the reader's, a torn lower edge, and the code set large enough to copy off the screen by hand without squinting at it. */ .recovery-slip { position: relative; background-color: #f7f5f1; /* the reader's paper */ border: 1px solid #e6dcc4; border-bottom: 0; border-radius: 0.375rem 0.375rem 0 0; padding: 1.25rem 1.25rem 1.5rem; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); } /* The torn edge: a row of half-circles bitten out of the foot of the slip. A repeating radial gradient rather than an image, so it costs nothing and takes the page's own background colour behind it. */ .recovery-slip::after { content: ""; position: absolute; left: -1px; right: -1px; bottom: -10px; height: 10px; background: radial-gradient(circle at 6px 0, transparent 0 6px, #e6dcc4 6px 6.6px, transparent 6.7px) repeat-x, radial-gradient(circle at 6px -1px, #f7f5f1 0 6px, transparent 6.1px) repeat-x; background-size: 12px 10px; } .recovery-slip-label { font-family: 'Prompt', sans-serif; font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: #a08c62; text-align: center; margin-bottom: 0.5rem; } .recovery-code { font-family: 'Roboto Mono', monospace; font-size: 1.5rem; font-weight: 700; letter-spacing: 0.08em; text-align: center; color: #3f3a2f; /* ink on the paper */ /* Selecting it selects all of it — the code is one thing, not four words. */ user-select: all; -webkit-user-select: all; word-break: break-word; } .recovery-slip-actions { display: flex; justify-content: center; gap: 0.5rem; margin-top: 1rem; } /* THE APP ICON, on /app and /press. ROUNDED HERE, NOT IN THE FILE. iOS masks the icon itself and Apple has changed the shape of that mask before; a radius baked into the pixels would be wrong the day it changes, and could not be undone by anyone reusing the asset. 22.37% is the proportion Apple's own superellipse works out to, so the corner matches a home screen closely enough at these sizes. */ .app-icon { width: 88px; height: 88px; flex: 0 0 auto; border-radius: 22.37%; /* The icon's own ground is dark; a hairline keeps it from bleeding into a dark page rather than decorating it. */ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18); } @media (max-width: 30rem) { .app-icon { width: 64px; height: 64px; } } .app-title .prose-title { line-height: 1.15; } /* THE AVAILABILITY LINE ON /app — "All three apps are on sale…", the paragraph directly under the lead. IT MATCHES THE LEAD'S SIZE AND NOTHING ELSE. The two sit together as one opening block, and at 16px against the lead's 16.8 the difference was too small to read as hierarchy and just large enough to read as a mistake. Only font-size is set: both already inherit the same 1.4 line-height ratio, so the leading follows on its own, and the darker body colour is left alone deliberately — this sentence says what you can buy and should stay the more emphatic of the two, which is also why it opens bold. */ .app-availability { font-size: 1.05rem; } /* THE APP SCREENSHOTS, on /app and /press. A scrolling row rather than a grid: five phone screens are tall, and a grid of them on a narrow window becomes a column of postage stamps. Scrolling keeps each one big enough to read a verse in, which is the only reason to show a screenshot of a reader at all. */ .app-shots-row { display: flex; gap: 1rem; overflow-x: auto; padding-bottom: 0.5rem; /* Each shot lands squarely rather than half-shown, which reads as a gallery instead of as a cut-off row. */ scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } .app-shot { flex: 0 0 auto; width: 15rem; height: auto; scroll-snap-align: center; border: 1px solid #e0d9c8; border-radius: 1.25rem; /* the corner radius of the device it came off */ background-color: #f7f5f1; } @media (max-width: 40rem) { .app-shot { width: 60vw; } } /* THE MAC SCREENSHOTS, on /app. STACKED, NOT SCROLLED, and that is the whole difference from the row above. A desktop window is wide and its content is small: the point of each of these is that three texts are layered under one verse, or that a pane is following the reading, and none of that survives being shown at 15rem in a row. So each one takes the full measure of the column and they run down the page. The corner is squarer than the phone's for the same reason the phone's is round — it is the corner of the thing photographed. */ .mac-shot { display: block; width: 100%; height: auto; margin-bottom: 1rem; border: 1px solid #e0d9c8; border-radius: 0.5rem; background-color: #f7f5f1; } .mac-shot:last-of-type { margin-bottom: 0; } /* APPLE'S "DOWNLOAD ON THE APP STORE" BADGE on /app (2026-08-19, the day the Mac went on sale). The artwork is Apple's and arrives unmodified; these rules only place it. ⚠ 44px, NOT THE 40 THE FILE IS DRAWN AT, AND BOTH RULES WANTED IT. Apple's 40px is a FLOOR for the web, not a fixed size — scaling the lockup proportionally above it is allowed, distorting or recolouring it is not. At 40 the badge measured 40px tall, which is under this site's own 44px touch target ([[bible-ux-audit]]). 44 clears Apple's minimum and our floor at once, and the width follows from the aspect rather than being typed. ⚠ THE HEIGHT IS DECLARED AND THE WIDTH IS auto, never the reverse: a stylesheet that only holds while the file keeps its intrinsic 119.66×40 is one edit away from a squashed trademark. ⚠ AND THE CLEAR SPACE IS APPLE'S TOO: no other element may come nearer than 10% of the badge's height, which is 4px here. 0.75rem is comfortably past it and matches the paragraph rhythm around it, so nothing has to be remembered. NO HOVER, NO SHADOW, NO ROUNDING, NO FILTER. Every one of those is a modification of a mark we do not own. The link's own focus ring is the whole of the interaction. */ .app-store-cta { margin-top: 0.75rem; margin-bottom: 0.75rem; } .app-store-cta a { display: inline-block; line-height: 0; /* kills the inline descender gap under the badge */ } .app-store-badge { display: block; height: 44px; width: auto; } /* THE CONTENTS OF /app — one pill per app (2026-08-18). About's contents list is a stacked column because it carries seventeen entries; these sit on a line, and stacked they read as the beginning of a list rather than the whole of one. ⚠ TIGHTENED FOR A FOURTH PILL (Daniel, 2026-08-25) — Android made the row wrap on a wide screen. The width came out of the PADDING, THE GAP AND THE TYPE, and never out of min-height: that 44px is a touch-target floor, and it is declared rather than inferred precisely so a later squeeze cannot quietly eat it. Four fit now; a fifth app will wrap, and wrapping is the correct answer at that point rather than a smaller target. ⚠ THE PAPER WASH, NOT THE GOLD. One colour means HERE and nothing else ([[bible-gold-system]]), so these are the same wash as the hero's topic pills — which are the same object in the same job, a quiet row of ways in. The border is what separates a pale pill from the white panel behind it, which the hero does not need because its ground is the wallpaper. ⚠ THE 44px FLOOR IS DECLARED, NOT INFERRED FROM THE PADDING. The hero's pills reach it by padding alone, so this rule was written the same way and MEASURED AT 40px — the padding maths there does not transfer here, because the two sit in different type contexts and this one adds a border. A floor arrived at by arithmetic is a floor nobody checked; min-height is the thing that cannot drift when the font changes. */ .app-toc-list { display: flex; flex-wrap: wrap; gap: 0.45rem; } .app-toc-pill { display: inline-flex; align-items: center; /* The gap is what makes room for the icon; without it the glyph and the first letter touch, because inline-flex gives neither a side bearing. */ gap: 0.4rem; /* ⚠ THE FLOOR STAYS 44px. See the note above — everything else here got smaller and this did not, because it is the touch target. */ min-height: 44px; font-family: 'Prompt', sans-serif; font-size: 0.85rem; padding: 0.5rem 0.75rem; background: rgba(243, 235, 207, 0.7); border: 1px solid #e0d9c8; border-radius: 2rem; color: #4a3f2a; text-decoration: none; } /* A HAIR SMALLER AND A SHADE LIGHTER THAN THE LABEL. The icon says which machine and the words say which app, so the words lead; an icon at full weight competes with the name instead of introducing it. It takes its colour from the pill so the hover state carries it along with no second rule. */ .app-toc-pill i { font-size: 0.95em; opacity: 0.75; } .app-toc-pill:hover, .app-toc-pill:focus-visible { background: rgba(243, 235, 207, 1); color: #4a3f2a; } /* The ready-to-send recovery message on the admin page. Monospace and wrapped at its own line breaks, because it is a letter being read for checking rather than prose being read for pleasure — and the line breaks are the ones that will arrive in the mail. */ .reissue-message { background-color: #fff; border: 1px solid #e0d9c8; border-radius: 0.375rem; padding: 0.75rem 1rem; font-size: 0.85rem; line-height: 1.5; white-space: pre-wrap; max-height: 22rem; overflow-y: auto; } /* Typing the code back. Set like the slip it answers — same face, same spacing, centred — so the two read as one object rather than as a form appearing after a document. It stands where the slip stood, which is why it takes the slip's margin rather than a new one. */ .recovery-confirm { margin: 1.5rem 0; } .recovery-confirm input { font-family: 'Roboto Mono', monospace; font-size: 1.25rem; font-weight: 700; letter-spacing: 0.08em; text-align: center; color: #3f3a2f; } /* Long-form prose (about page): Prompt throughout — a light body, heavier headings, on a constrained measure for a calm, reference feel. */ /* THE READING COLUMN, AND THE TWO LINES THAT KEEP IT INSIDE ITS CARD. `width: 45rem` on its own is a trap here, because .prose is a flex item of a `d-flex justify-content-center` card: a flex item shrinks from its width only as far as its automatic minimum, and past that it OVERFLOWS. The card centers, so the overflow lands on both sides at once and the white padding vanishes left and right together — reported on comm.php 2026-07-31 while narrowing the window, and reproducible on any .prose page below roughly 45rem + the card's padding. max-width caps it at the card's content box; min-width lets it shrink there instead of stopping at whatever its widest child demands. Both are needed: without min-width a single nowrap child re-establishes the floor. */ .prose { width: 45rem; max-width: 100%; min-width: 0; font-family: 'Prompt', sans-serif; font-weight: 300; /* Light for normal text */ line-height: 1.4; color: #2c2926; } .prose strong, .prose b { font-weight: 500; /* Medium for bold text */ } .prose code { font-weight: 700; color: #000; } /* h1 / h2 headings — Roboto Serif ExtraBold. Color comes from the utility class. */ .prose-title { font-family: 'Roboto Serif', 'Reading Fallback', Georgia, serif; font-weight: 800; font-size: 2.1rem; line-height: 1.15; } .prose-heading { font-family: 'Roboto Serif', 'Reading Fallback', Georgia, serif; font-weight: 800; font-size: 1.6rem; line-height: 1.25; margin-top: 2.75rem; margin-bottom: 0.6rem; /* Jumped to from the About contents list — keep the heading clear of the fixed navbar instead of landing underneath it. */ scroll-margin-top: 5rem; } /* Arriving at a verse from a link elsewhere in the app. The verse is placed at the top of the reading area rather than centred: it is what an anchor does, the reader's eye is already at the top of the screen, and it keeps the rest of the chapter below it where there is something to read. The margin holds it clear of the fixed navbar, as on .prose-heading above. */ .verse-row { scroll-margin-top: 6rem; } /* The chapter while its verse is being found. index.php renders this class only when the URL names a verse, and the inline script there removes it the instant the verse is in place — before the first paint, so nothing is ever seen to move. It covers the one case the script cannot: a long chapter the browser begins painting before the parser has reached the script at its foot. A noscript rule in index.php uncovers it where there is no script to do so. */ .verses-placing { visibility: hidden; } /* Per-item options on the notes and favorites lists: a horizontal-ellipsis button pinned to the row's top-right corner. Clicking it (see app.js) reveals the Remove button in a new row at the foot of the item and turns the icon vertical. */ /* A row in the notes / favorites lists. The padding is here rather than in utilities on the element so every state covers the same box, and the right side is wide enough to keep the text clear of the tick box pinned in the corner. The rows sit flush against each other — no margin between them — so a row's background runs from the rule above it to the rule below with nothing showing through; a gap there reads as a fault in the banding. */ .item-row { position: relative; padding: 0.5rem 2rem 0.5rem 0.75rem; } /* A row in the search, Strong's and cross-reference result lists. Same idea as .item-row above and the same two rules that matter — padding here rather than in utilities so the tint covers the whole row, and no bottom margin, or a band would stop short of the rule beneath it and the gap would read as a fault. Narrower on the right than .item-row: these rows carry no tick box. The band itself is applied in the markup rather than by :nth-child, because refs.php puts a phrase heading in the same list as the results — counting siblings there would tint the headings and break the alternation for every row after each one. A counter in the loop skips them by construction. */ /* ───────────────────────────────────────────────────────────────────────── THE TOPICAL COLUMN in the hero's right half — pills, chosen by Daniel 2026-08-15 from four candidates shown side by side at /?topics=a|b|c|d. The other three (serif list, the card's Prompt idiom, two columns) and the switch were deleted with the decision, as the ?grid=1 rules were. Pills were the shape I argued against and he picked them having seen all four, which is the right way round. Two things make them sit quietly enough: they take the CARD'S paper wash rather than the gold itself — so the page still holds exactly one saturated mark, the search button — and they carry no border, so they read as labels on paper rather than as controls. Column head and links keep the hills' ink, because this half of the hero floats on the sky exactly as the verse does. */ .welcome-topics { color: var(--hills-near, #25707e); padding-top: 0.4rem; /* ⚠⚠ THE 2.5rem BOTTOM MARGIN IS GONE — 2026-08-23, and removing it is worth 40px of the hero's height at every width. It was "air before the card when the row stacks": below lg the topics used to land between the search and the favorites card, and the card's auto margin collapsed to nothing once the content filled the stage, so they sat on top of one another. The card is INSIDE this column now, under the verse of the day, so the margin was holding the column apart from whatever came after it — which is nothing. It sat below the card rather than above it, and on a wide screen it made the row 40px taller than its own tallest column for no reason at all. The air it was for is `.welcome-mostread { margin-top }`, which is on the correct side of the card and works at both widths. ⚠ A MARGIN TUNED FOR AN ELEMENT THAT HAS SINCE MOVED IS NOT NEUTRAL. This one cost height on every screen and nothing reported it; the row simply measured taller than anything in it. */ } .welcome-topics-head { font-family: 'Prompt', sans-serif; font-size: 0.8rem; font-weight: 500; letter-spacing: 0.08em; margin-bottom: 0.6rem; } .welcome-topics-link, .welcome-topics-all { color: inherit; text-decoration: none; transition: opacity 0.2s ease; } .welcome-topics-link:hover, .welcome-topics-all:hover { color: inherit; opacity: 0.68; } .welcome-topics-all { font-family: 'Prompt', sans-serif; font-size: 0.85rem; font-weight: 400; text-transform: uppercase; margin-top: 1rem; } /* ⚠ "ALL TOPICS" GOES PALE WHEN THE ROW STACKS (Daniel, 2026-08-15). Below lg the topics land in the lower half of the screen, and the hills climb higher on a narrow viewport — so this line, alone in --hills-near, ends up dark ink on a dark ridge. The PILLS above it are unaffected: they carry their own paper wash and bring their own contrast with them. This one is bare text. The remedy is the one the most-read band used before it became a card: each colorway's own pale tone, not one grey for all four. Spelled out per mood rather than derived — there is no custom property for "the pale one" (--hills-sky is the sky's TOP stop, which is itself near-black at night), and color-mix() is below the browser floor ([[bible-browser-compat]]). ⚠ NIGHT IS DELIBERATELY ABSENT. Its --hills-near is ALREADY the pale moonlit tone (#cdd9e6) precisely because its sky is dark, so it needs no override and forcing one would make it the only mood whose link disagrees with its verse. Ordered so the three light colorways come first and cannot be overridden by the base rule. */ @media (max-width: 991.98px) { .bg-hills .welcome-topics-all { color: #eaf5f6; } /* day — over the teal ridges */ .bg-hills.dusk .welcome-topics-all { color: #f6e6de; } /* dusk — over the violet ridges */ .bg-hills.dawn .welcome-topics-all { color: #eef1f8; } /* dawn — over the blue ridges */ .bg-hills.night .welcome-topics-all { color: var(--hills-near); } } .welcome-topics ul { display: flex; flex-wrap: wrap; gap: 0.5rem; } /* ⚠ SEVEN PILLS WHEN THE ROW STACKS (Daniel, 2026-08-15). There are twenty-four topics, and on a phone they wrapped to seven rows between the search and the card — a directory, which is exactly what the column was agreed not to be ([[bible-topical-layer]]). Seven is what fits two rows on a 375px screen. HIDDEN, NOT UNRENDERED: every topic stays in the markup, so the links are still there for a crawler and the list does not change shape with the viewport. "All topics" underneath is what carries a reader to the rest, which is the whole reason the hub exists. */ @media (max-width: 991.98px) { .welcome-topics li:nth-child(n + 8) { display: none; } } .welcome-topics .welcome-topics-link { display: inline-block; font-family: 'Prompt', sans-serif; font-size: 0.9rem; /* 0.55rem of vertical padding, not the 0.35 the preview carried: at 0.35 a pill stood 31px tall, and six of them in a wrapped row are the page's smallest touch targets. This puts them at the 44px floor without changing how they look on a desktop. */ padding: 0.55rem 0.95rem; background: rgba(243, 235, 207, 0.7); border-radius: 2rem; color: #4a3f2a; } /* ───────────────────────────────────────────────────────────────────────── THE VERSE OF THE DAY — the trigger under the topical column, and the dialog it opens (2026-08-15). The button is the fourth quiet thing in the hero and must stay quiet: the page holds ONE saturated mark, the gold search button ([[bible-gold-system]]), so this takes the card's paper wash like the pills above it rather than a colour of its own. */ .welcome-votd { /* Well clear of the topics above it (Daniel, 2026-08-15). At 1.5rem the card read as the last item of the pill list rather than as its own offer; this is the same 3rem the hero uses between the search and the card at the foot. */ margin-top: 3rem; padding: 1.1rem 1.25rem; background: rgba(243, 235, 207, 0.7); border-radius: var(--bs-border-radius); color: #4a3f2a; width: fit-content; max-width: 100%; } /* THE SAME HEADING AS THE CARD AT THE OTHER CORNER (Daniel, 2026-08-15) — "FAVORITE PASSAGES" and this one are the same kind of thing, a label naming what its card holds, and two cards on one screen labelled two different ways read as two systems. Values copied from .welcome-mostread-head rather than shared through a class, because the two cards are otherwise independent and a shared class would tie every future change of one to the other. */ .welcome-votd-head { font-family: 'Prompt', sans-serif; font-size: 0.8rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.35rem; } /* The invitation under the heading, in THE READING SERIF (Daniel, 2026-08-15) — the same face and size the card at the other corner gives its chapters, so the two cards in the hero say their piece in one voice. ⚠ THE WEIGHT HAD TO MOVE WITH THE FAMILY. This line was Prompt 300, and 300 is not a cut Roboto Serif ships here — only 400, 600 and 800 do — so changing the family alone would have left the browser to SYNTHESISE a light weight, which is the shear the italics carried until they were fixed ([[bible-typography]]). 400 is the lightest this face can honestly draw. */ .welcome-votd-line { font-family: 'Roboto Serif', 'Reading Fallback', Georgia, serif; font-size: 0.9rem; font-weight: 400; margin-bottom: 0.9rem; } /* The button is `.btn-gold` — black label on gold, measured at 8.68:1, and the one control on this card. Nothing else here competes with it. */ .welcome-votd-open { border-radius: 2rem; padding-left: 1.1rem; padding-right: 1.1rem; } /* The dialog. `dialog` brings the backdrop, the focus trap and Escape with it, so all this adds is the shape. */ .votd { max-width: min(92vw, 34rem); border: 0; border-radius: var(--bs-border-radius); padding: 1.25rem; background: #fff; color: #2c2926; } .votd::backdrop { background: rgba(0, 0, 0, 0.45); } .votd-close-form { display: flex; justify-content: flex-end; margin-bottom: 0.25rem; } .votd-close { border: 0; background: none; font-size: 1.5rem; line-height: 1; color: inherit; padding: 0 0.25rem; } /* ⚠ THE CANVAS IS 1080 SQUARE AND MUST BE SHOWN SMALLER WITHOUT DISTORTION. width:100% alone would stretch it to whatever height the box allowed; the aspect-ratio keeps the square square, and `height:auto` stops the intrinsic 2160px height from setting the box. */ .votd-canvas { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: var(--bs-border-radius); /* The card is painted one frame AFTER the dialog opens, so the box is briefly empty. A dark ground means that frame reads as the card arriving rather than as a white hole punched in the dialog. */ background: #0d1626; } /* The verse as real text under the picture — never `small`, never muted: it is what a screen reader reads and what a reader copies ([[bible-typography]]). */ .votd-text { margin: 0.9rem 0 0; font-family: 'Roboto Serif', 'Reading Fallback', Georgia, serif; line-height: 1.5; } .votd-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; } /* Playing. The button says so by filling with the same gold wash that means "this one" everywhere else, which is exactly what it means here. */ .votd-listen.is-on { --bs-btn-bg: rgba(201, 162, 39, 0.22); --bs-btn-border-color: rgba(201, 162, 39, 0.55); } /* ───────────────────────────────────────────────────────────────────────── THE TOPICAL HUB — /topics (2026-08-15). Grouped bands with the topic word as the label and a short line beside it; chosen from three candidates previewed at ?v=a|b|c, and the two losers were deleted with the decision. What it fixes: the page as first built repeated "Bible verses about" in every one of twelve headings, so the distinguishing word sat at the end of a phrase the eye had already read, and twelve ~30-word blurbs made 380 words of near-identical prose. The word is the label now, the sentence is said once in the h1, and the list is down to ~160 words. */ /* ⚠ A BAND IS DRAWN LIKE A QUOTED VERSE, BUT NEVER IN THE GOLD (Daniel, 2026-08-15). Same shape as `.article-verse blockquote` and `.devotional-verse` — a 3px rule down the left edge, a pale wash behind, the radius on the two right corners only — because that shape already means "a block that belongs together" on this site. The COLOUR is what differs: gold means "this one, here" ([[bible-gold-system]]), and three gold bands on an index page would spend the site's one saturated signal on nothing. THE HUES COME FROM THE COLORWAYS, one band each: dawn's blue, dusk's violet, day's teal, then night's slate. The rule takes each mood's darkest ridge and the wash is that hue carried to near-white, so the ink over it stays the page's ordinary #2c2926 rather than needing its own colour. ⚠ THEY CYCLE ON POSITION, not on the group's name, so a fourth or fifth group is coloured without touching this file. Four is the whole palette; a fifth band starts again at dawn, which is correct — the colours are there to tell the bands apart on one screen, not to mean anything in themselves. */ .topic-band { border-left: 3px solid var(--band-rule); background: var(--band-wash); border-radius: 0 var(--bs-border-radius) var(--bs-border-radius) 0; padding: 1.25rem 1.5rem; margin-bottom: 1.25rem; } .topic-band-1 { --band-rule: #3c4a6b; --band-wash: #eef1f8; } /* dawn */ .topic-band-2 { --band-rule: #3f3663; --band-wash: #f3eff5; } /* dusk */ .topic-band-3 { --band-rule: #25707e; --band-wash: #eaf5f6; } /* day */ .topic-band-4 { --band-rule: #40607a; --band-wash: #eef2f6; } /* night */ .topic-group-head { font-family: 'Prompt', sans-serif; font-size: 0.8rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; /* No top margin inside a band — the band's own padding is the air now, and the 2.5rem this carried when the groups were bare headings would have pushed the first line away from its own rule. */ margin: 0 0 0.75rem; } .topic-group li { padding: 0.35rem 0; } /* The topic word, in the reading serif, large enough to be found by scanning rather than by reading. */ /* ⚠ 800, AND IT SAYS 800 BECAUSE THAT IS THE FILE. Roboto Serif ships as three subset weights — 400, 600, 800 — with no 700 face, so a request for 700 is resolved UPWARD by CSS font matching and rendered by ExtraBold anyway. Measured: at 17.6px the same string is 198.33px at 400, 205.84 at 600, and 213.41 at BOTH 700 and 800. Asking for 700 was therefore a number that never reached the page; writing 800 makes the declaration and the glyphs agree. The weights that exist are the only ones worth writing here — anything else either resolves elsewhere or falls to a synthetic bold, which is a shear ([[bible-typography]]). 600 is the lighter real option. */ .topic-word { font-family: 'Roboto Serif', 'Reading Fallback', Georgia, serif; font-size: 1.1rem; font-weight: 800; color: inherit; text-decoration: none; } /* Hover is the colour alone, no underline (Daniel, 2026-08-15) — the same way the hero's own links answer, and on a page of twelve one-word links an underline appearing under each in turn is a lot of movement for a small confirmation. ⚠ NOT #0d6efd, THE SITE'S ORDINARY LINK BLUE. Measured on these washes it reaches only 3.96–4.05:1, which is below the 4.5:1 that AA wants for ordinary text, so it fails on all three bands. #0a58ca — Bootstrap's own hover blue, a step darker — measures 5.66–5.79:1 and passes. ⚠ AND THE EXEMPTION STILL DOES NOT APPLY AT 1.1rem/800 (Daniel, 2026-08-15). "Large text" drops the bar to 3:1, and BOLD lowers the threshold that earns it — 14pt (18.66px) bold, against 18pt (24px) at normal weight. These words are now bold, which is the direction of the exemption, but 1.1rem is 17.6px and misses 18.66px. They are ordinary text for contrast purposes and 4.5:1 still governs. Do not read the bold as licence to go back to #0d6efd. If the washes are ever warmed, measure again rather than assuming a blue that worked before still does. */ .topic-word:hover, .topic-word:focus-visible { color: #0a58ca; text-decoration: none; } /* The short line sits on the same row as the word on a wide screen and wraps under it on a narrow one — left inline and given air, rather than made a flex row that would then have to be argued back into wrapping. */ .topic-blurb { font-family: 'Prompt', sans-serif; font-size: 0.95rem; font-weight: 300; margin-left: 0.6rem; } /* ───────────────────────────────────────────────────────────────────────── A TOPIC PAGE — /topics/grief (2026-08-15). Read top to bottom by someone who is upset, so it is prose in the 45rem measure with air between passages, not a grid of cards. ⚠ THE VERSE ITSELF IS `.article-verse`, THE SITE'S OWN QUOTATION STYLE, and there is deliberately no rule for it here. Inventing a topic-page verse style is how the same verse comes to look like a quotation in an article and a citation on a topic page — the exact drift the devotional's key verse was corrected for earlier the same day. What is left below is only what this page adds around that quotation. */ .topic-passage { padding-bottom: 1.75rem; } /* Our own sentence about the passage, under the quotation it belongs to. Italic, which this site can finally draw properly as of 2026-08-15 — before the real italic cuts arrived it would have been a synthetic shear. */ .topic-point { font-style: italic; } .topic-version { margin-top: 2rem; } .result-row { padding: 0.5rem 0.75rem; } /* THE REST OF A READING PLAN'S DAYS, behind a disclosure (reading.php, Daniel, 2026-08-15). A year-long plan is 365 rows down a half-width column; five show and the rest wait here. A native
rather than a Bootstrap collapse — no JavaScript, keyboard and screen reader support for free, and every day stays in the markup. All this needs from CSS is for the summary to look like something you can press: the marker is Bootstrap's own text with a pointer, sharing the rows' padding so it lines up under them rather than floating in the column. */ .day-more > summary { cursor: pointer; padding: 0.5rem 0.75rem; font-size: 0.875rem; } .day-more > summary:hover { background: var(--bs-light); } /* A PLAN DAY IS A LINK NOW (reading.php, 2026-08-24). It was inert text, so the only route from "Day 1 — Genesis 1–4" to Genesis 1 was to work the book and chapter selects by hand. THE PADDING MOVES OFF THE
  • AND ONTO THE , which is the whole point: an inline link is only as tall as its words, and the row has to be the hit area. At the rows' own 0.5rem padding a two-line row clears 44px comfortably at every width. */ .day-row { padding: 0; } .day-link { display: block; padding: 0.5rem 0.75rem; color: inherit; text-decoration: none; } .day-link:hover { background: var(--bs-light); } .day-link:focus-visible { outline: 2px solid var(--biblion-gold); outline-offset: -2px; } /* THE NEXT DAY, and it deliberately takes NO BACKGROUND. Gold here is the standing "this one" sense ([[bible-gold-system]]) — the next reading is the single thing this page exists to point at. But the wash that normally carries that meaning, rgba(201,162,39,.22), is already spoken for on these very rows by `.result-row:target`, and the 0.16 tint beside it means IDENTITY and is used by no selection state. Rather than pick one of the two alphas and blur what it means, this marks the row's own box with geometry — a rule and a tag — and leaves both fills alone. It also keeps the zebra legible underneath, since banding says "position" and this says "start here", and the two must not look like the same signal. */ .day-next { border-left: 3px solid var(--biblion-gold); } /* The day number and the pill share a line, so the pill can sit at the row's right edge instead of trailing the number. Every row uses it — only the next one has a second child to push over. */ /* ⚠ "Day 1" TAKES THE READING FACE (Daniel, 2026-08-24). The standing rule is that the thing being NAMED is set in the serif and the interface around it stays in the UI face at the one label size ([[bible-typography]]) — the day is what this row is called, so it is a name, not a label. The pill beside it is the interface and stays in Prompt, which is why it declares its own family rather than inheriting this one. */ .day-line { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; font-family: 'Roboto Serif', 'Reading Fallback', Georgia, serif; font-weight: 800; } /* ⚠ THE REFERENCE STAYS IN THE UI FACE (Daniel, 2026-08-24) — it inherits, and deliberately declares no family. Only the day is set in the serif: the row carries ONE name, and putting the reference in the reading face as well made two, which flattens the thing the serif was doing. So the hierarchy of the row is weight alone: 800 serif for the day, 500 sans for the reference, 400 for the aside. No size step anywhere in it — weight and the muted colour carry every distinction ([[bible-typography]]). ⚠ BOTH NUMBERS ARE FACES THAT SHIP, not values a browser has to invent. Roboto Serif has 400/600/800 only, so the day's 800 is real; Prompt has the full 100–900, so 500 is real too. A weight with no file behind it gets synthesised or snapped to a neighbour, and then the step you chose is not the step on screen. */ .day-label { display: block; font-weight: 500; } /* The "1 of 4 read" note drops to the regular weight: it is an aside on the reference, not part of its name, and it already has the muted colour. */ .day-part { font-weight: 400; } /* AN OUTLINED PILL, NOT A FILLED ONE. Gold at full strength is already how this row draws its left rule, so a stroke matches it; a solid gold fill would be a third gold value beside the two alphas [[bible-gold-system]] keeps apart (.22 selection, .16 identity) and would start an argument about which it is. ⚠ WEIGHT 400 ON PURPOSE, against the 600 it would otherwise inherit from the row. The row's own bold is what says "this one"; the pill only has to name it. Bold inside bold is two shouts where the border already carries the emphasis. */ /* ⚠ inline-flex + align-items:center + line-height:1, AND ALL THREE ARE THE FIX FOR ONE THING: a plain inline pill sits its text on a BASELINE, so the font's descent stays empty under the caps and the pill looks bottom-heavy — the same descender gap `.app-store-badge` kills with line-height:0 and that `.app-toc-pill` avoids by being inline-flex. UPPERCASE MAKES IT WORST, because no glyph ever reaches into the descent to balance it. Centring on the box instead of the baseline is what makes the padding read as equal. */ .day-next-tag { display: inline-flex; align-items: center; line-height: 1; font-family: 'Prompt', sans-serif; /* the UI face — it is a label, not a name */ font-weight: 400; text-transform: uppercase; letter-spacing: 0.06em; color: var(--biblion-gold); border: 1px solid var(--biblion-gold); border-radius: 999px; /* ⚠ THE TOP AND BOTTOM ARE NOT EQUAL, AND THE DIFFERENCE IS MEASURED. Canvas TextMetrics for "NEXT" in 14px Prompt: cap ascent 10px, ink descent 0 — uppercase puts nothing below the baseline, so the font's 6px descent stays empty and the ink sits high. That leaves 5px above the ink and 6px below it, and the eye reads the 1px as a bottom-heavy pill. Half of it on each side is the correction: 0.25rem over 0.19rem is 4px over 3px. Re-measure before changing the face or the size — this number belongs to Prompt at this size and to nothing else. */ padding: 0.25rem 0.5rem 0.19rem; white-space: nowrap; } /* THE ZEBRA STRIPES STAY BOOTSTRAP'S GREY `bg-light`, and this note is here so nobody warms them again. They were briefly gold on 2026-08-15, from my misreading of "the selected part should be the gold one" — Daniel meant the HIGHLIGHTED WORD inside a row, not the banding under it. His answer: "the striped rows were ok as before - gray." It is also the right call on its own terms: banding is not meaning. Gold in this app says "here is the thing you asked for", and spending it on every second row would leave the highlight competing with its own background. */ /* The phrase heading on refs.php, which opens each new word's list of references. Its rule was black until 2026-07-31, to mark a beginning against the pale rules that merely separate rows. Daniel levelled them: the heading no longer needs the contrast, because the rule after a phrase's last reference is gone, so nothing competes with it where a group ends. Take the colour from the same token the rows use rather than repeating a hex, or the two drift apart the day a theme moves it. The padding keeps the rule off the descenders; the margin below it closes the gap to the first reference so heading and list read as one block. */ .refs-phrase { border-bottom: var(--bs-border-width, 1px) solid var(--bs-border-color, #dee2e6); padding-bottom: 0.35rem; margin-bottom: 0; } /* ---- Covenant law (public/rituals.php) ------------------------------ A sacrifice is a sequence with branches, so it is drawn as one: a column of cards joined by connectors. CARDS ARE HTML, NOT SVG, and that is the whole design — the draft this grew from was a fixed 720px drawing with its words inside it, which at the 303px the column measures on a 375px phone would have rendered 17px type at 7.2px. Real text reflows; a picture of words does not. The connectors are drawn with pseudo-elements rather than an overlay, so there is no geometry to keep in step with the cards as they reflow. */ /* The index. A GRID OF SCENES, not the topic hub's list of words: what tells one chart from another at a glance is a picture — a bull at the altar reads differently from a bowl of flour, where "Burnt" and "Grain" as bare words do not. auto-fill with a floor rather than a fixed column count, so the shelf grows into whatever width it is given and collapses to one column on a phone without a breakpoint to maintain. */ .rit-index { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1.25rem; margin: 1.25rem 0 2.75rem; } /* The sentence under a band's heading. Muted and close to the heading, so the two read as one unit and the cards below start cleanly. */ .shelf-band-note { color: var(--bs-secondary-color, #6c757d); margin: -0.25rem 0 0; } /* ⚠ A BAND IS A
    AND ONLY THE FIRST IS OPEN — 2026-08-23. Eighty-eight cards measured forty screens on a phone; closed, the same shelf is its own table of contents and about four. The summary carries the heading AND the note, so a closed band still says which chapters are inside it — the whole point of collapsing, if the reader has to open each one to find out. The disclosure triangle is drawn here rather than left to the browser: the native marker is a different shape, colour and position in every engine, and it sits before the heading where it pushes an 800-weight serif off the margin. `list-style: none` kills it in Firefox, the ::-webkit rule in Safari and older Chrome. */ .shelf-band { border-top: 1px solid var(--bs-border-color, #dee2e6); } /* ⚠ NO BOTTOM BORDER ON THE LAST BAND. Whatever follows a shelf on these pages — the credit line, the unplaced-count guard — opens with a rule of its own, and the two together drew a double hairline with a sliver of white between them. */ .shelf-band:last-of-type { margin-bottom: 2rem; } .shelf-band-head { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.15rem; position: relative; padding: 0 2.25rem 1rem 0; cursor: pointer; list-style: none; } /* The note is the second line of the summary whatever the title's length. */ .shelf-band-head .shelf-band-note { flex: 0 0 100%; } .shelf-band-head::-webkit-details-marker { display: none; } /* The heading's own top margin is what separates one band from the next, and it belongs to the summary now that the heading lives inside one. */ .shelf-band-title { margin-top: 1.75rem; } .shelf-band-head::after { content: ''; position: absolute; right: 0.5rem; top: 2.5rem; width: 0.6rem; height: 0.6rem; border-right: 2px solid var(--bs-secondary-color, #6c757d); border-bottom: 2px solid var(--bs-secondary-color, #6c757d); transform: rotate(45deg); } .shelf-band[open] > .shelf-band-head::after { transform: rotate(-135deg); /* the arm that was the bottom edge is now the top one: keep it optically on the same line as the closed state rather than half a chevron higher */ margin-top: 0.2rem; } @media (prefers-reduced-motion: no-preference) { .shelf-band-head::after { transition: transform 0.2s ease; } } .shelf-band-head:hover .shelf-band-title, .shelf-band-head:hover::after { color: var(--biblion-gold, #c9a227); border-color: var(--biblion-gold, #c9a227); } .shelf-band-head:focus-visible { outline: 2px solid var(--bs-primary, #0d6efd); outline-offset: 2px; border-radius: 0.25rem; } /* Open-all / close-all. Sits under the contents list, where a reader who has just read twenty band names is deciding whether to scan or to search. ⚠ NO NEGATIVE MARGIN. It had -2rem, tuned against the ritual page's `mb-5` contents list; on /prophecy, whose list is `mb-3`, the same rule pulled the button up ON TOP of the last line of the list. A component shared by two pages cannot carry a margin that assumes one of them. */ .shelf-bands-control { margin-top: 0; } /* The tally beside a band in the contents list. It answers "is this the long one?" before a reader commits to scrolling there, which is the only question a contents list is asked on a page of thirty-three cards. */ .toc-count { display: inline-block; min-width: 1.5rem; margin-left: 0.35rem; padding: 0 0.35rem; border-radius: 0.7rem; background: var(--bs-tertiary-bg, #f8f9fa); color: var(--bs-secondary-color, #6c757d); font-size: 0.75rem; text-align: center; } .rit-index-card { display: flex; flex-direction: column; height: 100%; background: #fff; border: 2px solid var(--bs-border-color, #dee2e6); border-radius: 0.75rem; overflow: hidden; text-decoration: none; color: inherit; } .rit-index-card:hover, .rit-index-card:focus-visible { border-color: var(--biblion-gold, #c9a227); outline: none; } /* ⚠ object-position RIGHT, not centre. Every one of these scenes is composed with its subject in the right half and quiet charcoal on the left — that is what the banner needs for its title to sit on. Cropped from the centre, a card thumbnail shows the empty half. */ /* ⚠⚠ `height: auto` IS LOAD-BEARING, AND ITS ABSENCE FAILS QUIETLY. The carries width="1440" height="660" so the browser can reserve the space before the file arrives, and those attributes act as a presentational hint — which wins whenever the stylesheet declares no `height` of its own. Without this line `aspect-ratio` is computed and then ignored, and the thumbnail renders 660px tall inside a 299px card: five times too big, and it looks like a cropping mistake rather than a units one. Measured, not reasoned about. */ /* THE CARD HEADER IS A STRIP AND ITS PICTURE ALREADY FITS IT, because the crop happens in the build rather than here — tools/crop_ritual_cards.py cuts a 16:7 thumbnail from each scene, centred on its own subject and anchored to the TOP of it. ⚠ TWO CSS ATTEMPTS FAILED FIRST, and the reason is worth keeping. `object-fit: cover` cannot zoom: it only ever FITS an image to a box, so the sole way to magnify with it is to make the box taller — the one thing this header must not do. Laying the image out oversized inside an `overflow: hidden` frame DOES zoom, and still failed, because a single crop cannot serve both scenes: the burnt offering's subject starts 42.5% across and the grain offering's priest has his head at 9.2% from the top, so any window tight enough to drop the first one's dead charcoal cuts the second one's head off. Measured, both times. A per-image crop is the only thing that satisfies both, and it is a build step, not a stylesheet. ⚠ `height: auto` stays load-bearing: the carries width/height attributes so space is reserved before it loads, and those act as a presentational hint that wins whenever the stylesheet declares no height. */ .rit-thumb { display: block; width: 100%; height: auto; aspect-ratio: 16 / 7; background: #212529; } .rit-index-text { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.85rem 1rem 1rem; flex: 1; } /* scroll-margin: the contents panel jumps to these titles (app.js gives them ids), and without clearance a jumped-to card lands with its name under the fixed navbar — invisible, which reads as the jump having failed. Same 6rem the prose headings carry. */ .rit-index-title { font-size: 1.15rem; margin: 0; scroll-margin-top: 6rem; } .rit-index-passage { font-size: 0.8125rem; color: var(--bs-link-color, #0d6efd); } .rit-index-summary { margin-top: 0.25rem; } /* Pushed to the foot so the meta line sits on the card's bottom edge whatever the summary above it wraps to — a row of cards with their last lines at four different heights reads as four different components. */ .rit-index-meta { margin-top: auto; padding-top: 0.6rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--bs-secondary-color, #6c757d); } /* fs-6 on the link itself, as article.php sets it: this is a control, not a fact about the chart, and it should not shrink into the surrounding prose. */ .rit-crumb { margin-bottom: 1rem; } /* Next and previous, side by side on a wide screen and stacked on a phone. The label sits above the title so the two cards read as a pair of destinations rather than as a sentence broken in half. */ .rit-seq { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.75rem; margin-top: 2rem; } .rit-seq a { display: flex; flex-direction: column; padding: 0.7rem 0.9rem; border: var(--bs-border-width, 1px) solid var(--bs-border-color, #dee2e6); border-radius: 0.5rem; text-decoration: none; } .rit-seq a:hover, .rit-seq a:focus-visible { border-color: var(--biblion-gold, #c9a227); outline: none; } /* ⚠⚠ THE LABEL ONLY — NOT `.rit-seq span`, which is what it was until 2026-08-24 and why the three shelves did not match. That selector hit ANY span in the strip, so /prophecy and /stories — which wrap the destination's title in `.rit-seq-name` — had the TITLE greyed and capitalised along with the "Previous". /rituals left its title as bare text, so there it stayed a normal link, and Daniel's call is that the rituals one is right: the title is where you are going and should read as a link. Scoped to the class, the rule now says what it means rather than catching whatever is nearby. */ .rit-seq .rit-seq-dir { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--bs-secondary-color, #6c757d); } .rit-seq-next { text-align: right; } .rit-banner { position: relative; border-radius: 0.5rem 0.5rem 0 0; overflow: hidden; background: #212529; /* matches the artwork's own ground */ border-bottom: 4px solid var(--biblion-gold, #c9a227); margin-bottom: 1.5rem; } .rit-banner img { display: block; width: 100%; height: auto; } /* The words sit ON the picture, never in it. The scrim is a gradient rather than a flat wash so it protects the title and then lets the scene go. */ .rit-banner-text { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 0.15rem; padding: 0 1.25rem; background: linear-gradient(90deg, rgba(33,37,41,.92) 0%, rgba(33,37,41,.75) 34%, rgba(33,37,41,0) 66%); } .rit-eyebrow { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--biblion-gold, #c9a227); } .rit-title { color: #fff; margin: 0; font-size: clamp(1.35rem, 4.6vw, 2.1rem); line-height: 1.1; } .rit-passage { color: rgba(255,255,255,.82); font-size: 0.875rem; } /* One step. The whole card is the link — a card is a target nobody misses where a reference line is a few characters — but only the reference row takes the link colour, so the card reads as text instead of a wall of blue. The gold outline on hover and focus is what says the whole thing is live, the same gold the picker's items take under a pointer. */ .rit-card { display: block; position: relative; margin: 0; padding: 0.85rem 1rem 0.85rem 1.4rem; background: #fff; border: 2px solid var(--bs-border-color, #dee2e6); border-left: 7px solid #495057; border-radius: 0.75rem; text-decoration: none; color: inherit; } .rit-card:hover, .rit-card:focus-visible { border-color: var(--biblion-gold, #c9a227); border-left-color: var(--biblion-gold, #c9a227); outline: none; } /* The connector, drawn downward out of every card that has one following it. ⚠ A GAP EITHER END IS DELIBERATE — a line touching a card reads as part of its border rather than as a link between two of them. */ .rit-step::after { content: ""; position: absolute; left: 50%; top: 100%; width: 2px; height: 1.35rem; margin: 0.35rem 0 0 -1px; background: #a9b2c3; } .rit-step::before { content: ""; position: absolute; left: 50%; top: calc(100% + 1.55rem); margin-left: -5px; border: 5px solid transparent; border-top-color: #a9b2c3; border-bottom: 0; } /* Nothing flows out of the last card on the page, or out of the last step of a path — a path ends at the shared outcome, and an arrow into it would say the third route is the one that gets there. */ .rit-step:has(.rit-outcome)::after, .rit-step:has(.rit-outcome)::before, .rit-lane .rit-step:last-child::after, .rit-lane .rit-step:last-child::before { content: none; } .rit-kicker { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--bs-secondary-color, #6c757d); margin-bottom: 0.2rem; } .rit-body { display: block; } /* The reference is its own row under a rule, never beside the words. 0.9em, not the 0.8125rem it started at (Daniel, 2026-08-23): this is the scripture reference, the one thing on the card a reader might copy out or read aloud, and it was set smaller than the caption conventions elsewhere warrant. `em` rather than `rem` so it keeps its proportion to the step it belongs to if the card's own size is ever changed. */ /* THE HEAD OF THE BUBBLE — prophecy's scene row: what the step is on the left, the passage it rests on at the right (Daniel, 2026-08-24). The reference used to be a footer under the body with a divider above it; the quotation took that place, and a reference below its own quotation reads as a caption on the verse rather than as the step's source. */ .rit-card-head { display: flex; align-items: baseline; gap: 0.75rem; } /* ⚠ `margin-left: auto`, NOT `justify-content: space-between` — some steps have no kicker, and with a single child space-between leaves the reference at the LEFT. The auto margin puts it right either way. */ .rit-ref { margin-left: auto; font-size: 0.9rem; white-space: nowrap; color: var(--bs-link-color, #0d6efd); } /* THE VERSE INSIDE A STEP CARD — ritualStepQuote() in rituals.php. Daniel, 2026-08-24: the quotation sits in the bubble, banded with its reference. ⚠⚠ `display: block` IS LOAD-BEARING AND WAS THE WHOLE OF THE BREAKAGE. `.devotional-verse` is written for a block-level
    ; worn by a inside this card it stays INLINE, and an inline box accepts padding and a left border while reserving no height for either. The band therefore drew straight across the body text with its gold rule floating free, which looks like a sizing problem and is not one. ⚠ THE SIZE IS PROPHECY'S `.pro-scene-quote`, on Daniel's word — 0.9rem, not the 1.05rem `.devotional-verse` carries. A step card is a small object, and at full size the quotation reads as the page rather than as Scripture set inside it. */ /* ⚠⚠ TWO CLASSES, AND THE SECOND ONE IS NOT DECORATION. `.devotional-verse` is defined ~4,300 lines BELOW this, so at equal specificity it wins on order alone and the band came out at its 1.05rem and 1rem padding — the size looked untouched while the rule was being read and applied. `.pro-scene-quote` never met this only because it happens to sit after `.devotional-verse` in the file. Keying on the card makes this rule win wherever either block moves to, which is the fix rather than shuffling the file. Same family as the standing note that a media query is not more specific, only later. */ .rit-card .rit-quote { display: block; font-size: 0.9rem; line-height: 1.5; padding: 0.5rem 0.7rem; margin: 0.6rem 0 0; } /* The version marking is the tail of the quotation and wears its ink, not the link colour: it inherits `.devotional-verse`'s #2c2926 rather than being told a colour here. Exactly `.pro-scene-quote-ref`. */ .rit-quote-v { white-space: nowrap; } /* ⚠ #f6f0dc IS THE COMPOSITE, NOT AN rgba — the same shade the family tree's "here" card takes and for the same reason: a translucent gold would let the connector above it show through the ground. */ .rit-outcome { background: #f6f0dc; border-color: var(--biblion-gold, #c9a227); border-left-color: var(--biblion-gold, #c9a227); margin-bottom: 1rem; } .rit-outcome .rit-body { font-weight: 600; } .rit-choice { display: flex; align-items: center; gap: 0.75rem; margin: 0 0 1.75rem; color: var(--bs-secondary-color, #6c757d); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; } .rit-choice::before, .rit-choice::after { content: ""; flex: 1; height: 1px; background: var(--bs-border-color, #dee2e6); } .rit-lane { margin-bottom: 0.5rem; } .rit-lane-title { display: flex; align-items: center; gap: 0.6rem; font-size: 1.15rem; margin-bottom: 0.1rem; } .rit-lane-num { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; flex: 0 0 1.6rem; border-radius: 50%; background: #495057; color: #fff; font-size: 0.8rem; } .rit-lane-meta { color: var(--bs-secondary-color, #6c757d); font-size: 0.8125rem; margin: 0 0 1rem 2.2rem; } /* A lane that is a RULE FOR ALL THE PATHS rather than one of them — Leviticus 2 states two of those in the middle of the chapter. Its badge carries a word instead of a number, so it needs to stop being a circle; a word in a circle reads as a number that has gone wrong. The dashed rule above it says the column has changed register without spending a colour. */ .rit-lane-shared { border-top: 1px dashed var(--bs-border-color, #dee2e6); padding-top: 1.25rem; } .rit-lane-shared .rit-lane-num { width: auto; flex-basis: auto; border-radius: 0.75rem; padding: 0 0.55rem; background: var(--bs-secondary-color, #6c757d); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; } /* The two directions on refs.php — what this verse points to, and what points back at it — as a pair of links, never a scripted tab widget: everything else on that page works with scripting off and this is navigation, which a link already is. NO COLOUR ON THE SELECTED TAB. Gold in this app says "here is the thing you asked for" and violet says "a reference work is speaking"; a tab is neither, it is a control, and spending either meaning on it would leave the page with three things claiming the same voice. Ink and a rule under the live one carry it — the same way the phrase heading below uses weight rather than hue to say a new thing begins. They WRAP rather than shrink: at 375px the two labels together run past the column, and a tab strip that has quietly become two rows still reads, where one that has become 11px does not. */ .refs-views { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; border-bottom: var(--bs-border-width, 1px) solid var(--bs-border-color, #dee2e6); } .refs-view { /* 0.65rem, not 0.5: the same 44-ish tap target the quote disclosure below takes, and this is the page's primary control rather than an aside. */ padding: 0.65rem 0; margin-bottom: -1px; /* the live rule sits ON the strip's own */ border-bottom: 2px solid transparent; color: var(--bs-secondary-color, #6c757d); text-decoration: none; font-size: 0.9375rem; } .refs-view:hover { color: var(--bs-body-color, #212529); } .refs-view.active { color: var(--bs-body-color, #212529); font-weight: 600; border-bottom-color: var(--bs-body-color, #212529); } /* The strip of often-linked references above the list. A VIOLET BAND, which on this site is not decoration: blue means editorial, grey an ad, gold the house, violet a reference work speaking ([[bible-search-results-layout]]). This is the cross-reference apparatus, so violet, and the left rule is the same 3px #7a5ea8 the lexicon panel opens with. The references themselves stay LINK BLUE rather than taking the band's violet. Every reference on this page is blue and goes somewhere; making these five the exception would say they are a different kind of thing, when the only difference is that they are worth reading first. */ .refs-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.9rem; margin-bottom: 1.25rem; padding: 0.5rem 0.85rem; background: #f8f6fb; border-left: 3px solid #7a5ea8; border-radius: 0.25rem; } .refs-top-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: #7a5ea8; white-space: nowrap; } .refs-top a { color: var(--bs-link-color, #0d6efd); text-decoration: none; /* Padding, not line height: five links on one line at phone width are five tap targets, and they need to be reachable without magnifying the band. */ padding: 0.35rem 0; } .refs-top a:hover { text-decoration: underline; } /* "often linked" — the mark on the references of a verse that readers follow most, from OpenBible.info's votes. Quiet in weight: it sits beside a reference in a list of sixty and its job is to be findable while skimming, not to compete with the reference it qualifies. VIOLET, ON DANIEL'S WORD (2026-08-23). It was built grey on the argument that this is a third voice — readers, counted — where violet had meant a reference work speaking, and [[bible-gold-system]] says a new thing to say takes a new hue rather than borrowing one. He ruled violet, and the reading that follows from it is the simpler one: the mark is part of the same apparatus as the figure and the picker, not a separate speaker. So violet on this page means the cross-reference apparatus entire, whoever supplied the number, and gold still means the verse being studied. Do not re-grey it. The same pairing the lex panel and the picker use — #f8f6fb ground under the saturated #7a5ea8 — rather than a fifth shade of it. */ .refs-often { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: #7a5ea8; background: #f8f6fb; border: var(--bs-border-width, 1px) solid #7a5ea8; border-radius: 0.75rem; padding: 0.05rem 0.5rem; white-space: nowrap; vertical-align: 0.05em; /* A word space is what separates it from the reference otherwise, and a word space before a bordered thing reads as crowding rather than as a gap. */ margin-left: 0.25rem; } /* The OpenBible.info credit at the foot of refs.php, under the pager. Smaller than the reading text and quieter than it, because it is owed to a licence rather than addressed to a reader — the note about which translation is quoted, higher up the same page, stays at full size for the opposite reason. The rule above it separates it from the list without needing a heading. */ .refs-credit, .source-credit { margin-top: 2.25rem; margin-bottom: 2rem; padding-top: 1.25rem; border-top: var(--bs-border-width, 1px) solid var(--bs-border-color, #dee2e6); font-size: 0.8125rem; color: var(--bs-secondary-color, #6c757d); } /* The disclosure under a long quotation on refs.php. A reference may name a dozen verses, and one of those quoted whole pushes the nine other references on the page below the fold; past three verses the row keeps two and folds the rest in here. ⚠ NO BACKGROUND ON HOVER, where .day-more's summary takes --bs-light. Every second row on this page is already `bg-light`: a light hover would be invisible on half the list and would read as the banding shifting on the other half. Colour and an underline carry it instead. It takes the LINK colour although it is not a link, because it is the only control inside a reference row that is not one — every other clickable thing here is blue, and a grey line that happens to be operable is a thing readers do not find. */ /* ⚠ THE PADDING IS THE TAP TARGET, not decoration. At 0.15rem the control measured 24px tall on a 375px viewport — a thumb-sized miss on the page where it appears most, since a phone is where a folded quotation matters most. The line itself is 21px; the rest is what brings the box to 44. It runs the full width of the row, so height was the only dimension in question. */ .refs-quote-more > summary { cursor: pointer; font-size: 0.875rem; color: var(--bs-link-color, #0d6efd); padding: 0.72rem 0; } .refs-quote-more > summary:hover { text-decoration: underline; } .refs-quote-more[open] > summary { margin-bottom: 0.15rem; } /* ---- The family tree and the life timeline (includes/lifedraw.php) --------- Two pictures of things a list flattens: a family is a shape, and an event has a length. Both are server-rendered SVG that scales with the column, and both speak the app's own two colours — GOLD is the subject of the page, VIOLET is the reference work speaking ([[bible-gold-system]]). Type sizes are in SVG user units, not rem: the drawing scales as a whole, so a label that grew with the reader's font size would collide with its neighbours at some widths and not others. The end labels beneath a timeline ARE html for exactly that reason — they must stay readable on a phone. */ .family-tree, .life-timeline { display: block; width: 100%; height: auto; } .ft-card { fill: #fff; stroke: var(--bs-border-color, #dee2e6); stroke-width: 1; } /* ⚠ THE CARD TAKES THE COMPOSITE, NOT THE rgba — the same rule #strongs-popup follows, and for the same reason one step further on. The joining lines are drawn BEFORE the cards so the cards cover them; a translucent fill undoes that, and a line runs visibly through the name. #f6f0dc is --biblion-gold-tint's 0.16 composited over white: identical shade, no transparency. Hover takes it too, or the same line reappears under the pointer (Daniel, 2026-08-19). */ .ft-card-here { fill: #f6f0dc; stroke: var(--biblion-gold); stroke-width: 2; } .ft-role { font-size: 9.5px; letter-spacing: 0.6px; fill: var(--bs-secondary-color, #6c757d); } /* ⚠ NO font-size HERE. Each name carries its own as a presentation attribute, shrunk to fit its card — and a stylesheet rule beats a presentation attribute, so declaring it here would silently undo the fitting and put "Maher-shalal-hash-baz" back outside its box. Weight and colour only. */ .ft-name { font-weight: 600; fill: var(--bs-link-color, #0d6efd); } .ft-name-here { fill: var(--bs-body-color, #212529); } .ft-years { font-size: 9.5px; fill: var(--bs-secondary-color, #6c757d); } .ft-rule { stroke: var(--bs-border-color, #dee2e6); stroke-width: 1.5; } /* ⚠ AN INSIDE AN SVG STILL TAKES THE PAGE'S LINK UNDERLINE, and on a card whose whole box is the target it reads as clutter — eight underlined names in a diagram. The card itself is the affordance; the hover says so. */ /* ⚠ NO UNDERLINE, EVER, INCLUDING ON HOVER (Daniel, 2026-08-19). An inside an SVG still takes the page's link underline, and eight underlined names turn a diagram into a list of links. The whole card is the target and the card itself is the affordance — the gold on hover is what says so. */ .family-tree a, .family-tree a:hover { text-decoration: none; } .family-tree a:hover .ft-card { fill: #f6f0dc; stroke: var(--biblion-gold); } .tl-life { fill: var(--biblion-gold); opacity: 0.22; } /* ⚠ THE KNOCKOUT UNDER "176 years", AND IT HAS TO BE OPAQUE. The axis, the ticks and the badges are all painted before the caption, so without a ground the rule ran straight through the words on every page carrying a lifespan. Page background, not white: in a dark mood a white patch would be a hole in the drawing. The gold is laid over it again by the drawing itself where the caption stands inside the band, so the window matches the band exactly. */ .tl-life-cap { fill: var(--bs-body-bg, #fff); } .tl-life-label { font-size: 11.5px; fill: var(--bs-body-color, #212529); } .tl-span { fill: #7a5ea8; opacity: 0.5; } .tl-dot { fill: #7a5ea8; } .tl-stem { stroke: #7a5ea8; stroke-width: 1; opacity: 0.55; } .tl-axis { stroke: var(--bs-body-color, #212529); stroke-width: 1; } /* The silence between two segments is dashed, so it reads as time skipped rather than as a rule drawn. */ .tl-gap { stroke: var(--bs-secondary-color, #6c757d); stroke-width: 1; stroke-dasharray: 2 4; } .tl-gap-label { font-size: 10px; fill: var(--bs-secondary-color, #6c757d); } .tl-label { font-size: 10.5px; fill: var(--bs-body-color, #212529); } /* A MENTION IS NOT A LOCATION, and place.php now carries both pictures on one page: the events the graph puts here, and the events whose passages merely name the place. Same violet, because it is the same reference work speaking — the difference is in the MARK, a hollow dot for the weaker claim, because a legend is a thing nobody reads and a colour would have said "different source" instead of "different claim". */ /* The dated axis an uncaptioned drawing gets instead of captions. Quieter than the axis itself: it is there to be consulted, not read across. */ .tl-tick { stroke: var(--bs-secondary-color, #6c757d); stroke-width: 1; opacity: 0.55; } .tl-tick-label { font-size: 9px; fill: var(--bs-secondary-color, #6c757d); } /* A NUMBER STANDS IN FOR A TITLE that would not fit, so it has to be small enough to sit beside its own mark and quiet enough not to be read as part of the drawing. It is a key into the list, not a label. */ /* The badge a number rides in. White ground so the axis and the bars do not read through the digits, a violet ring so it is still part of the drawing rather than something laid on top of it. */ /* ⚠ THE FILL IS OPAQUE AND STAYS OPAQUE. The evidence ramp is applied to stroke-opacity by the drawing, never to the element, so a faint mention still gets a solid ground under its number. */ .tl-badge { fill: var(--bs-body-bg, #fff); stroke: #7a5ea8; stroke-width: 1.2; } .tl-index { font-size: 9px; fill: var(--bs-body-color, #212529); } .tl-key { display: inline-block; min-width: 1.6em; margin-right: 0.15em; font-size: 0.8em; color: var(--bs-secondary-color, #6c757d); font-variant-numeric: tabular-nums; text-align: right; } .tl-mentioned .tl-dot { fill: none; stroke: #7a5ea8; stroke-width: 1.3; } /* Only for a mentioned drawing whose caller weighs nothing: place.php gives every mark a weight, and that arrives as an inline style, which outranks this. Setting the ramp here instead would be silently ignored. */ .tl-mentioned .tl-span { opacity: 0.28; } /* The two end years, in HTML so they keep a readable size at any width. */ .tl-ends { display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--bs-secondary-color, #6c757d); } /* ---- People & places (people.php) ----------------------------------------- The A-Z strip and the name chips. A letter with nobody behind it is drawn dead rather than dropped: the alphabet keeps its shape, and the gap says something true (no one in the Bible is called X). The live letters take the app's gold on hover and to mark the current one — one colour, meaning HERE, exactly as everywhere else. */ /* PEOPLE AND PLACES ARE TWO KINDS OF THING AND MUST LOOK IT (Daniel, 2026-08-19). Stacked bare, the page was two identical A–Z strips and you could not tell which one you were reading. A shared boundary is the strongest grouping signal available, so each half gets a region of its own; the heading icons are the ones the search bands already use for a person and a place, so the vocabulary is not new. Kept deliberately quiet — a hairline and a tint, not a card with a shadow. */ .pp-group { border: var(--bs-border-width, 1px) solid var(--bs-border-color, #dee2e6); border-radius: var(--bs-border-radius, 0.375rem); padding: 0.85rem 1rem 1rem; /* ONE TONE FOR ALL THREE REGIONS, AND IT IS VIOLET (Daniel, 2026-08-20). The wash was 0.012 — measured at 1.022:1 against the white panel, which is to say invisible, so the border was separating them on its own. ⚠ THE HUE IS NOT DECORATION, IT IS THE VOCABULARY. Violet means "a reference work speaking" ([[bible-gold-system]]), and this whole page is Theographic quoted — the same act, and the same data, as the violet search bands. So this is `.search-who`'s exact ground rather than a new value; the two must not drift. ⚠ THE SAME TONE ON EACH OF THE THREE, deliberately. People, places and excavations are three indexes into ONE source; a colour per region would say they were three kinds of thing, and would spend hues from a closed set where each already means something. What separates them is the bounded box and the icon, settled 2026-08-19 and unchanged. */ background: rgba(122, 94, 168, 0.05); } /* ⚠ THEY STACK, AND SIDE-BY-SIDE WAS TRIED AND MEASURED WORSE. Two columns ought to say "two kinds of thing" by being parallel, but the prose column is 720px, so each half gets 352 — and the A–Z strip then wraps to FOUR rows instead of two, making the whole block taller (527px against 487px) as well as harder to scan. The bounded regions and the icons do the separating on their own. Don't reintroduce the columns without widening the measure first. */ .pp-split { display: grid; gap: 1rem; } .pp-alpha { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.25rem 0 1rem; } /* ⚠ WHITE, NOT TRANSPARENT, SINCE THE REGION BEHIND WENT VIOLET (Daniel, 2026-08-20: "give back white background to pills and letter buttons"). A control that takes its ground from the panel stops reading as a control the moment the panel is tinted. It also keeps the link contrast honest: the violet ground measures 4.22:1 under Bootstrap's link blue and FAILS, which is why `.search-who a` had to be darkened — on white the default clears. */ .pp-letter { display: inline-block; min-width: 2rem; padding: 0.25rem 0.4rem; text-align: center; border: 1px solid rgba(0, 0, 0, 0.25); border-radius: var(--bs-border-radius-sm, 0.25rem); background-color: #fff; color: var(--bs-body-color, #212529); text-decoration: none; } /* ⚠ THE GOLD ARRIVES AS AN IMAGE LAYER, NOT AS background-color. The tint is translucent, so replacing the colour would let the violet ground show through it and the state would read differently here than anywhere else in the app. A gradient of one colour paints ON TOP of the white beneath, which is what makes this identical to gold-on-white — and keeps the token rather than hardcoding the composite. */ .pp-letter:hover, .pp-letter-on { background-image: linear-gradient(var(--biblion-gold-tint, rgba(201, 162, 39, 0.16)), var(--biblion-gold-tint, rgba(201, 162, 39, 0.16))); color: inherit; } /* ⚠ THE CURRENT LETTER IS NOT MARKED BY COLOUR ALONE. The gold tint against white is a 1.14:1 difference — real to a sighted reader glancing at the row, invisible to anyone who cannot separate those two, and nothing at all in high contrast. The weight and the darker edge carry it too, and people.php sets aria-current="page" so it is announced rather than merely shown. */ .pp-letter-on { border-color: var(--biblion-gold); border-width: 2px; font-weight: 700; } .pp-letter-off { display: inline-block; min-width: 2rem; padding: 0.25rem 0.4rem; text-align: center; border: 1px solid var(--bs-border-color, #dee2e6); border-radius: var(--bs-border-radius-sm, 0.25rem); color: #adb5bd; } /* A name and its verse count. The count is the only ranking a reader gets, so it rides inside the chip rather than being hidden behind a hover. */ .pp-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; } .pp-chip { display: inline-block; padding: 0.3rem 0.75rem; border: 1px solid rgba(0, 0, 0, 0.18); border-radius: 2rem; /* White for the same two reasons as .pp-letter above: a pill has to sit ON the region rather than dissolve into it, and this link colour does not clear AA on the violet ground. */ background-color: #fff; text-decoration: none; color: var(--bs-link-color, #0d6efd); } .pp-chip:hover { background-image: linear-gradient(var(--biblion-gold-tint, rgba(201, 162, 39, 0.16)), var(--biblion-gold-tint, rgba(201, 162, 39, 0.16))); } .pp-chip-n { margin-left: 0.4rem; font-size: 0.82em; color: var(--bs-secondary-color, #6c757d); } /* THE TROWEL SAYS "THIS ONE HAS BEEN DUG" on a letter page, where 33 places out of 1,274 carry an excavation and nothing else distinguishes them. Quiet on purpose and in the count's own grey: the difference that matters is that a mark is THERE at all, and one in three-hundred-odd is rare enough for that to register without a colour. It is emphatically NOT gold — gold means HERE, the thing you have selected ([[bible-gold-system]]) — and not violet either, which would be defensible as "a reference work speaking" but shouts across a row of chips in a way a category mark should not. */ .pp-chip-dig { margin-right: 0.35rem; font-size: 0.8em; color: var(--bs-secondary-color, #6c757d); } /* A finger is not a cursor: at desktop size 32px is a comfortable letter, on a phone it is a miss. 44px is the platform floor and the gap keeps two letters from sharing an edge — this is a new control, so it starts on the right side of that line rather than joining the pager already noted in the UX audit. ⚠ THE CHIPS DID NOT ACTUALLY CLEAR IT, and the comment above said they did. Measured at 375px on 2026-08-19: the letters came out at 45px, the chips at 40. 0.5rem of padding on a 22.4px line plus the border lands at 40.4, four short — close enough to look right in a screenshot and wrong under a thumb. 0.65rem puts them at 45, the same height the letters already were, so the two controls agree. The gap goes to 8px for the same reason it did on the strip. The measurement is the point: this block reasoned its way to 44 twice and missed by four both times. Measure the rendered box, do not compute it. */ @media (max-width: 575.98px) { .pp-alpha { gap: 0.4rem; } .pp-letter, .pp-letter-off { min-width: 2.75rem; padding: 0.65rem 0.4rem; } .pp-chips { gap: 0.5rem; } .pp-chip { padding: 0.65rem 0.9rem; } } /* ---- The canon figure on refs.php (canonFigure) ---------------------------- The Bible as one strip of 66 book cells, an arc from the studied verse to every referenced passage. Two voices, per the app's colour language: gold is the verse being studied, violet is a reference work speaking — the same saturated #7a5ea8 the .lex-panel rule settled, on cells rather than a rule. Geometry scales through the viewBox; the labels under the strip are HTML precisely so they do NOT scale, or at phone width they would shrink below reading size. Cell tints ride on the rects as opacity attributes (scaled by count in refs.php), which these hover rules outrank without !important — CSS beats a presentation attribute by definition. */ .refs-canon svg { display: block; width: 100%; height: auto; } .rc-off { fill: #f1eef6; } .rc-on { fill: #7a5ea8; } .rc-arc { fill: none; stroke: #7a5ea8; stroke-width: 1.1; opacity: 0.5; } /* The invisible twin drawn under each arc: a 1.1-unit stroke is no click target, so this one widens the same path to nine. Transparent paint still catches the pointer — visiblePainted looks at visibility, not alpha. */ .rc-hit { fill: none; stroke: transparent; stroke-width: 9; } .rc-dot { fill: #7a5ea8; } /* The testament seam, crossing the strip in the Malachi–Matthew gap. Ink, not the label grey — it has to survive crossing a saturated cell. */ .rc-nt { stroke: #1b1b1b; stroke-width: 1; } .rc-here { fill: none; stroke: var(--biblion-gold); stroke-width: 2; } .rc-here-dot { fill: var(--biblion-gold); stroke: #fff; stroke-width: 1.5; } .refs-canon a:hover .rc-arc { opacity: 1; stroke-width: 1.6; } .refs-canon a:hover .rc-on { opacity: 1; } .refs-canon-labels { position: relative; height: 1.3em; font-size: 0.8rem; color: #6c757d; } /* The mirrored figure — the verses pointing AT this one — puts its strip at the top and hangs its arcs beneath, so its labels move above the strip with it. They name the strip, and left below they would sit a hundred units of arc away from the thing they name. */ .refs-canon-labels-top { margin-bottom: 0.2rem; } .rcl-start { position: absolute; left: 0; } .rcl-end { position: absolute; right: 0; } .rcl-nt { position: absolute; transform: translateX(-50%); white-space: nowrap; } /* refs.php drops an end's word when the verse lives near that end of the canon — "Genesis 1:1" names the left edge better than a label beside it — and the verse's label then takes that corner itself, flush rather than centered on its position, which would hang it half off the card. */ .rcl-here { position: absolute; transform: translateX(-50%); white-space: nowrap; color: var(--bs-body-color, #212529); font-weight: 600; } .rcl-here.rcl-left { left: 0; transform: none; } .rcl-here.rcl-right { right: 0; transform: none; } /* The picker a multi-reference book cell opens (see the canon-figure block in app.js): the same floating-panel manners as #strongs-popup — card, fixed, a bottom sheet on a phone — but on the lex-panel's violet ground, because what it holds is the Treasury speaking, not scripture. Items take the gold wash on hover: the one you are pointing at. */ #refs-picker { display: none; background-color: #f8f6fb; border-left: 3px solid #7a5ea8; max-width: 300px; z-index: 1040; } #rp-list { max-height: 45vh; overflow-y: auto; } .refs-picker-item { display: block; padding: 0.3rem 0.5rem; border-radius: 0.25rem; } .refs-picker-item:hover { background-color: rgba(201, 162, 39, 0.22); } @media (max-width: 575.98px) { /* The bottom-sheet geometry #strongs-popup takes at this width, for the same reason: nothing this wide can sit beside what opened it on a phone. isBottomSheet() in app.js tracks this breakpoint for both panels. */ #refs-picker { left: 0; right: 0; bottom: 0; top: auto; max-width: none; max-height: 70vh; overflow-y: auto; border-bottom-left-radius: 0; border-bottom-right-radius: 0; padding-bottom: calc(1rem + var(--safe-b)) !important; animation: sheet-rise 0.18s ease-out; } #rp-list { max-height: none; } } /* Arriving at a row from the canon figure (?page=N#ref-i). The wash is the app's "here is the thing you asked for" gold at its over-light alpha; !important only because the row's own .bg-light band is !important and would win otherwise. The scroll margin keeps the landing row clear of the fixed navbar, exactly as .verse-row does for a verse link. */ .result-row { scroll-margin-top: 6rem; } .result-row:target { background-color: rgba(201, 162, 39, 0.22) !important; } /* Banded, so the eye can hold a line across a wide row. */ .item-row:nth-child(even) { background-color: var(--bs-light, #f8f9fa); } /* A row marked for removal, in whatever color this reader picked for a selected verse (Preferences → verse selection; --verse-select is emitted on :root by head.php only when they chose one, so the fallback here is the default sky blue). Selection is a different kind of thing from banding and has to beat it: same specificity, so this must stay below the rule above. */ .item-row.item-picked { background-color: var(--verse-select, #d9edf7); } /* Anywhere in the row ticks it (initBulkSelect in app.js), so the whole row should look live. Hover is laid over whatever the row's background already is — white, banded or selected — rather than replacing it, which on a banded row would look like the band had dropped out. */ [data-bulk-form] .item-row { cursor: pointer; } [data-bulk-form] .item-row:hover { background-image: linear-gradient(rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.03)); } /* Dragging rows onto the collection chips (initCollections in app.js). The row in flight dims; every chip that can take the drop lifts slightly so the targets announce themselves the moment the drag starts; the one under the pointer takes the reader's own verse-selection color — the same "this is picked" language the ticked rows already speak. */ .item-row.col-dragging { opacity: 0.45; } /* The drag handle — the ⋮⋮ at a row's left edge, and the ONLY place a drag can start (see initCollections), so text anywhere in the row still selects. Rendered only when groups exist; has-grips is what makes room for it, keeping the padding in CSS per the tint rules above so a ticked row's tint still covers the same box. Aligned to the first line rather than centered: on a tall note a centered handle floats beside the middle of the text, attached to nothing the eye can name. */ .has-grips .item-row { padding-left: 1.6rem; } .col-grip { position: absolute; left: 0.3rem; top: 0.55rem; color: #adb5bd; cursor: grab; padding: 0 0.25rem; /* a finger-friendlier target than the glyph alone */ } .col-grip:hover { color: #6c757d; } .col-grip:active { cursor: grabbing; } [data-col-chips] .col-target { box-shadow: 0 0 0 2px var(--verse-select, #d9edf7); } [data-col-chips] .col-drop { background-color: var(--verse-select, #d9edf7); border-color: transparent; color: #212529; } /* The tick box that marks a note or a favorite for removal, at the row's top-right where the options ellipsis used to be. Its label is visually hidden (it names the item for screen readers), so the padding Bootstrap leaves for a label beside the box would only push the box off the row's edge. Inset from the corner rather than flush against it: the box is taken out of the flow, so where it sits changes no layout and cannot reopen the gap the row margin used to leave. The row's own right padding is wider than the inset plus the box, which is what keeps the text clear of it. */ .item-select { position: absolute; top: 0.5rem; right: 0.5rem; margin: 0; padding-left: 0; min-height: 0; } .item-select .form-check-input { float: none; margin: 0; cursor: pointer; } /* A preference and its control on one line — the label, then the select beside it — instead of the label stacked above. The names here are short and the selects narrow, so stacking left a column of half-empty lines. Wraps rather than squeezes when the two will not fit, which is what happens to the time zone picker on a phone. */ .setting-row { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; } /* Verse-selection color palette on the account page: twelve pale swatches, the chosen one ringed. Each swatch is a label wrapping a visually-hidden radio, so the whole square is the click target and keyboard focus still works. */ .verse-swatch { width: 2rem; height: 2rem; border-radius: var(--bs-border-radius); border: 1px solid rgba(0, 0, 0, 0.15); cursor: pointer; margin: 0; } .verse-swatch:has(input:checked) { outline: 2px solid var(--bs-primary, #0d6efd); outline-offset: 2px; } .verse-swatch:has(input:focus-visible) { outline: 2px solid var(--bs-primary, #0d6efd); outline-offset: 2px; } /* Contents list on the About page. */ .toc li + li { margin-top: 0.3rem; } /* The About page's contents panel: a button pinned bottom-right, clear of the reading column, opening the offcanvas that holds the same list as the one at the top of the page. Built by initAboutContents() in app.js. */ .about-contents-btn { position: fixed; right: calc(1.25rem + var(--safe-r)); bottom: calc(1.25rem + var(--safe-b)); z-index: 1030; border-radius: 2rem; padding-left: 1rem; padding-right: 1rem; box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.25); transition: transform 0.25s ease; } /* In the reader's view the pinned chapter pager is centred on the SCREEN, not in the column, and on a phone the two are wide enough to meet at the bottom edge. The pill steps up over it rather than either being clipped — it gives way because the pager is what the reader has just scrolled to. Set from updateReaderPager() in app.js, so it moves exactly when the pager appears. */ body.reader-pager-out .about-contents-btn { transform: translateY(-3.25rem); } /* NIGHT INVERTS THE FLOATING PILLS (Daniel, 2026-08-01). Both of them are btn-dark, which is near-black on a near-black sky: on the Night mood they stopped being findable at all. Under Night — and only under Night — they turn white on dark, which is the same contrast the other four moods give a dark pill against a light sky, arrived at from the other side. Scoped to the two PILL classes rather than to .btn-dark. Every ordinary btn-dark on the site sits on a white card where it is perfectly legible; a blanket rule would invert buttons that were never in trouble. The pills are the only controls that float over the wallpaper, which is why they are the only ones the sky can swallow. body.night is set on the server by bodyClass() and kept current by app.js — Automatic re-picks the mood from the reader's own clock, and this follows it because it hangs off the same class. */ body.night .about-contents-btn, body.night .return-trail-btn, body.night .welcome-pill { --bs-btn-bg: #f4f1ea; --bs-btn-border-color: #f4f1ea; --bs-btn-color: #1b1b1f; --bs-btn-hover-bg: #ffffff; --bs-btn-hover-border-color: #ffffff; --bs-btn-hover-color: #1b1b1f; --bs-btn-active-bg: #e6e2d8; --bs-btn-active-border-color: #e6e2d8; --bs-btn-active-color: #1b1b1f; /* A dark halo instead of the light one: a shadow the colour of the sky is what separates a pale pill from a pale-lit ridge behind it. */ box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.55); } /* The return control (js/app.js, initReturnTrail) — same pill as the Contents button and deliberately so: one visual language for "a control that floats above the page". It takes the OPPOSITE corner, which keeps the two from ever meeting on comm.php's introduction, the one page that shows both. Bottom rather than top because the navbar is already crowded and auto-hides in the reader, and because this is a thing the reader reaches for after reading rather than before. The label is a place in the reader's own words and can run long — "the commentary on 2 Thessalonians 2:5-7" — so it is capped and ellipsised rather than allowed to grow across the viewport. The arrow never shrinks. */ /* ⚠ THE LIFT IS ON `bottom`, NOT ON `transform`, and that is the whole reason it is a variable rather than a class. The audio bar already lifts this pill with a transform, and transforms do not accumulate — see the note by body.audio-open, where the combined case has to be spelled out by hand. Using the other property means the map card's lift and the player's simply add up, with no third rule to remember. app.js sets --map-card-lift from the card's MEASURED height, because that height is not fixed: the card loses its book list under 576px and comes out shorter. */ .return-trail-btn { position: fixed; left: calc(1.25rem + var(--safe-l, 0px)); bottom: calc(1.25rem + var(--safe-b) + var(--map-card-lift, 0px)); z-index: 1030; border-radius: 2rem; padding-left: 1rem; padding-right: 1rem; box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.25); display: inline-flex; align-items: center; max-width: min(22rem, calc(100vw - 2.5rem)); } .return-trail-label { display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ⚠ THE CAPITAL IS DRAWN, NOT STORED. Every page's $placeLabel is written in lower case on purpose — the same string is the button's aria-label, where it reads "Back to covenant law" and a capital in the middle of that sentence would be wrong. The pill shows the label alone, though, so it starts a line and wants a capital. ::first-letter gives it one without touching the string, and it must be ::first-letter rather than `text-transform: capitalize`, which would also shout "Rituals & Offerings". `display: inline-block` is what makes the pseudo-element apply at all: it does not work on an inline box. */ .return-trail-label::first-letter { text-transform: uppercase; } /* On a phone the two pills would sit on one line and fight for it, so the return control gives way — it is the wider of the two and the one whose text would be cut first. */ @media (max-width: 575.98px) { .return-trail-btn { max-width: calc(100vw - 9rem); } } /* The post-login welcome pill (js/app.js, initWelcomePill) — the same floating language as the return control above, same corner, since the two are never shown together in practice (arriving here fresh from login carries no return trail). Spent on the reader's first interaction with the page rather than on a timer or a close button: a login is a page in itself, and it is the very next thing they touch — a click, a tap, a key — that means they have moved on to actually reading. */ .welcome-pill { position: fixed; left: calc(1.25rem + var(--safe-l, 0px)); bottom: calc(1.25rem + var(--safe-b)); z-index: 1030; border-radius: 2rem; padding-left: 1rem; padding-right: 1rem; box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.25); display: inline-flex; align-items: center; max-width: min(22rem, calc(100vw - 2.5rem)); transition: opacity 0.2s ease; } .welcome-pill.is-leaving { opacity: 0; } /* The sequence strip — the third navigation axis, "previous / next along a series". Built by seqNav() in includes/seqnav.php, which carries the reasoning for why it is a strip in the flow rather than a third floating pill. IT IS DELIBERATELY BOOTSTRAP'S .page-link AND NOTHING ELSE. Thirteen list pages and the reader already draw a chevron / label / chevron strip for this job; a second look would mean the app said "move along" two different ways. So border, radius, disabled state and focus ring are all inherited, and the only thing added here is room for a NAME where a page number used to sit. TWO WIDTHS. Without names the three cells stay grouped and right-aligned — the look .pagination has always had, because two lone chevrons spread to the far edges of an admin table are harder to use than a compact group, not easier. The spread version is switched on by .seq-nav-named, which seqNav() adds only when an end actually carries text to fill the width with. */ .seq-nav { display: flex; align-items: stretch; justify-content: flex-end; gap: 0.5rem; /* THE STRIP MUST NEVER SET ITS PARENT'S MINIMUM WIDTH. .prose is a flex item of a `d-flex justify-content-center` card, so its min-width resolves to auto and its min-content is whatever its widest child demands. A nowrap heading anywhere below here would push .prose past the card's padding — and because the card CENTERS, the overflow lands on both sides at once and the white margin disappears left and right together. Reported on comm.php while narrowing the window, 2026-07-31. min-width:0 here and on every flex box below breaks that chain at the source: the strip's own minimum is the chevrons, and the ellipsis then does what it was always meant to. */ min-width: 0; max-width: 100%; /* The spacing every call site used to carry as its own mt-3/mt-4 utility. One value here is the point of having a component; .reader-pager still overrides it, because that one is pinned rather than in the flow. */ margin-top: 1rem; } .seq-nav-named { justify-content: space-between; } /* Both ends claim equal width so the middle stays centred whatever the two names are, and neither end can push the other off the line. Only when named: an unnamed end is a chevron and must stay chevron-sized. */ .seq-nav-named .seq-end { flex: 1 1 0; min-width: 0; } .seq-end .page-link { height: 100%; display: flex; align-items: center; gap: 0.5rem; border-radius: var(--bs-border-radius); /* The middle link of the shrink chain. Without this its default min-width:auto reinstates the nowrap heading's full width as a floor and the overflow described on .seq-nav comes straight back. */ min-width: 0; } .seq-nav-named .seq-end-next { display: flex; justify-content: flex-end; text-align: right; } .seq-mid { flex: 0 0 auto; display: flex; } .seq-mid .page-link { display: flex; align-items: center; border-radius: var(--bs-border-radius); } .seq-stack { min-width: 0; display: flex; flex-direction: column; } /* A heading can be long — "Days two and three: separating and filling" — and on a wide screen it is one line or the strip stops being a strip. THE HOUSE RULE FOR A NAME THAT WILL NOT FIT IS CSS ELLIPSIS, NOT A SERVER-SIDE CUT. Truncating in PHP means guessing a character budget, and the guess is wrong the moment the font size, the zoom, the viewport or the language moves — it cuts a short name that would have fitted and overflows a long one that would not. The browser is the only thing that knows the actual width. The return-trail pill already works this way (.return-trail-label); this is the same rule, and it is the rule for any new truncating label. */ .seq-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; /* closes the shrink chain at the leaf */ } .seq-where { display: block; font-size: 0.8125rem; font-weight: 400; opacity: 0.7; } /* On a phone the reference goes and the heading stays. The heading is what the reader is deciding on; the reference is confirmation, and confirmation is what you drop first when there is no room for both. THE NAME STAYS ON ONE LINE AT EVERY WIDTH. A two-line clamp was tried here on 2026-07-31 and rejected the same day (Daniel): a name that wraps makes the two ends different heights, and a strip whose height changes with its contents stops reading as a strip. One line and an ellipsis, everywhere — the base rule above already does it, so this block only drops the reference and tightens the padding. */ @media (max-width: 575.98px) { .seq-name { font-size: 0.9375rem; } .seq-where { display: none; } .seq-end .page-link { padding-left: 0.5rem; padding-right: 0.5rem; } } /* THE CHAPTER'S SECTION RAIL — the commentary's headings standing in for the landmarks Scripture does not print. A dotted spine with the reader's own position filled in, so the panel answers "where am I" at a glance rather than asking to be read. The verse number is set in the reading serif and tabular, because it is the one column the eye runs down; the heading is interface sans, because it is the commentary talking and not the text. */ .section-rail { position: relative; padding-left: 1.1rem; } .section-rail::before { content: ''; position: absolute; left: 0.28rem; top: 0.5rem; bottom: 0.5rem; width: 2px; background: var(--bs-border-color, #dee2e6); } .section-rail-item { position: relative; display: block; padding: 0.4rem 0; color: #6c757d; text-decoration: none; line-height: 1.35; } .section-rail-item::before { content: ''; position: absolute; left: -0.95rem; top: 0.78rem; width: 9px; height: 9px; border-radius: 50%; background: var(--bs-border-color, #dee2e6); } .section-rail-item:hover, .section-rail-item:focus-visible { color: #2c2926; } /* The section the reader is standing in. Marked by app.js from the verse rows, so it tracks the page rather than the last thing clicked. */ .section-rail-item.is-here { color: #2c2926; font-weight: 500; } .section-rail-item.is-here::before { background: var(--brand-ink, #0d5c63); box-shadow: 0 0 0 3px rgba(13, 92, 99, 0.18); } .section-rail-v { font-family: 'Roboto Serif', 'Reading Fallback', Georgia, serif; font-variant-numeric: tabular-nums; font-size: 0.8rem; color: #adb5bd; margin-right: 0.45rem; } .section-rail-item.is-here .section-rail-v { color: #6c757d; } .section-rail-t { font-size: 0.925rem; } /* A section that opened in the chapter before: the reader walked into the middle of it, and saying so is more honest than an anchor that claims verse 1. */ .section-rail-from { display: block; font-size: 0.75rem; color: #adb5bd; margin-left: 1.55rem; } #aboutContentsNav .nav-link { padding: 0.3rem 0 0.3rem 0.6rem; color: #2c2926; border-left: 2px solid transparent; } /* The two levels take the faces their own headings take on the page: sections in Roboto Serif like the h2s they point at, subsections in Prompt like the h3s. The panel then reads as an index of this document rather than as generic furniture. Weight 600 rather than the headings' 800 — at this size the extra bold fills in and turns to a smudge, and 600 is a cut we host and preload. */ #aboutContentsNav .about-contents-section { font-family: 'Roboto Serif', 'Reading Fallback', Georgia, serif; font-weight: 600; } #aboutContentsNav .about-contents-sub { font-family: 'Prompt', sans-serif; font-size: 0.85em; color: #6c757d; padding-left: 1.4rem; } /* Scrollspy marks the section being read. This is a highlight and nothing more. */ #aboutContentsNav .nav-link.active { border-left-color: var(--bs-primary, #0d6efd); color: var(--bs-primary, #0d6efd); } /* Only one section shows its subsections, so the panel stays a list of ten rather than a wall of seventy-six. Which one is `expanded`, NOT `active` — and the difference matters. Hanging this on Scrollspy's class meant that once the panel could stay open over a scrolling page, every section it scrolled past opened and closed the list under the reader's pointer. Expansion is now a choice: set when the panel opens, and thereafter only by clicking a section. Scrolling moves the highlight and leaves the shape of the list alone. */ #aboutContentsNav .about-contents-subs { display: none; } #aboutContentsNav .about-contents-section.expanded + .about-contents-subs { display: block; } /* .about-contents-hint is DELETED (2026-08-15). It said "Click again to jump there" — the one thing about this panel a reader could not otherwise find out — and it went with the second press it explained. Nothing builds that element any more; if a hint is ever wanted here again, it is a new rule and a new reason, not this one restored. */ /* A prose heading that opens and closes the section under it. Deliberately not Bootstrap's accordion: no box, no chrome, no background — just the heading as it looks everywhere else, with a small caret to show it can be clicked. */ /* The open section is tinted so it reads as one block rather than as a heading with loose text under it. The heading and the panel are separate elements, so the tint has to run across both: the heading carries what was its bottom margin as padding instead, which closes the transparent gap between them without moving the text. The horizontal padding is pulled back out again with matching negative margins, so the tint is wider than the prose while the words stay on the same left edge as everywhere else. */ .collapse-heading { cursor: pointer; user-select: none; -webkit-user-select: none; padding: 0.5rem 0.75rem 0.6rem; /* Was 2.75rem on .prose-heading; less the padding-top just added, so the rhythm between sections is unchanged. */ margin-top: 2.25rem; margin-bottom: 0; margin-left: -0.75rem; margin-right: -0.75rem; border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0; transition: background-color 0.15s ease; } .collapse-heading[aria-expanded="true"] { background-color: var(--bs-light); } /* .collapsing is included so the tint is there for the whole animation and does not snap on at the end. Vertical padding is deliberately absent: with border-box a panel animating down to height 0 cannot shrink below its own padding, which would leave a strip of tint behind after the section closed. The breathing room at the foot of the panel comes from a margin on the last child instead, which is inside the overflow and clips away cleanly. */ #accountSections .collapse.show, #accountSections .collapsing { background-color: var(--bs-light); padding-left: 0.75rem; padding-right: 0.75rem; margin-left: -0.75rem; margin-right: -0.75rem; border-radius: 0 0 var(--bs-border-radius) var(--bs-border-radius); } /* ⚠ flow-root, AND IT IS THE WHOLE FIX FOR THE MISSING FOOT (Daniel, 2026-08-15: "some of the sections have no bottom padding… the part that has gray background"). The rule below gives the last child a 0.75rem bottom margin, and it was being applied correctly and doing nothing: with no padding, no border and no formatting context of its own, an open panel let that margin COLLAPSE THROUGH its own bottom edge, so the 12px landed under the tint rather than inside it and the grey ended flush against the last button. Measured against the real stylesheet: as shipped, the distance from the last child's bottom to the panel's bottom was 0px; with flow-root it is 12px. `.collapsing` is deliberately NOT given this — it sets `overflow: hidden`, which already establishes a formatting context, so the margin was contained for the whole animation and escaped only once the panel settled. Which is exactly why this looked right while opening and wrong afterwards. */ #accountSections .collapse.show { display: flow-root; } /* ⚠ !important, TO BEAT A UTILITY THAT IS ALSO !important — the second half of the same bug. Six of the nine sections end in an element carrying Bootstrap's `.mb-0` (the account-details `
    `, and the forms that close Search settings, Primary text, Your details, Password and Close your account) or `.mb-0` on the export paragraph. Bootstrap's spacing utilities all declare !important, so this rule lost to them and those six panels had no foot while the other three did. With !important on both sides specificity decides, and `#accountSections .collapse > :last-child` (1,1,0) beats `.mb-0` (0,1,0). The alternative was padding-bottom on the panel, and it is the wrong one: with border-box a panel animating down to height 0 CANNOT shrink below its own padding, so a strip of grey would be left behind after every section closed. The margin is inside the overflow and clips away cleanly. This also means a future `mb-0` on a last child cannot silently reopen the bug — which is what made it survive this long. */ #accountSections .collapse > :last-child, #accountSections .collapsing > :last-child { margin-bottom: 0.75rem !important; } .collapse-caret { font-size: 0.5em; margin-left: 0.4em; vertical-align: middle; display: inline-block; transition: transform 0.15s ease; } /* Bootstrap's default is 0.35s, which reads as slow when the sections are only a few lines tall and one closes as another opens. Scoped to these headings so the navbar's own collapse keeps the framework timing. */ #accountSections .collapsing { transition-duration: 0.15s; } /* Bootstrap keeps aria-expanded on the toggle in step with the panel. */ .collapse-heading[aria-expanded="true"] .collapse-caret { transform: rotate(180deg); } /* The room below the last section is measured and applied in app.js, since how much is needed depends on how tall the open section happens to be. */ .prose-subheading { font-family: 'Prompt', sans-serif; font-weight: 600; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.1rem; margin-top: 1.9rem; margin-bottom: 0.3rem; /* Same reason as .prose-heading above, and easy to miss because only the sections were being jumped to when that one was written. The About contents panel links to these too, and without this a subheading lands exactly under the 62px fixed navbar — the reader arrives at a section whose name they cannot see. Matched to .prose-heading so both levels come to rest at the same height. */ scroll-margin-top: 5rem; } .prose-lead { font-weight: 300; /* Regular — a touch heavier than the Light body */ font-size: 1.05rem; line-height: 1.4; color: #4a4540; } /* The prayer that opens the About page's Credits (it replaced the doxology, 2026-07-26). Same rule the whole section obeys: the document's own face, size and left edge — its predecessor was set in the reading serif, centered and a size up at first, and all three made it read as a quotation lifted from somewhere else rather than as this page speaking. What marks it as prayer is the one thing that actually is prayer-like: its own line breaks and the pause between the two stanzas. It sits directly under the Credits heading the way every other section's opening paragraph does (user, 2026-07-26) — the old 2rem push-down made it float loose of its title. */ .credits-prayer { margin: 0 0 2.5rem; } .credits-prayer p { line-height: 1.75; margin-bottom: 1.25rem; /* the stanza pause */ } .credits-prayer p:last-child { margin-bottom: 0; } /* The names below it. A description list because that is what these are — a label and the person or company it points at — with the name sitting directly under its label and everything on the same left edge, at every width. It was two columns at first, which is the conventional way to set a credit list and was wrong here: the labels are long ("Developer & UX designer"), so the column had to be wide, which pushed two short names far out into the measure and left a corridor of white between label and value. Stacked, each entry reads as one thing, and the page keeps a single left edge all the way down. No size or alignment of its own: the whole block is the document's body text, and the labels take .prose-subheading in the markup rather than a look defined here, so they stay in step with the page's h3s if that style ever changes. */ .credits-list { margin-bottom: 0; } .credits-list dd { margin: 0; } /* The second line of an entry — a place under a company. It was set muted, to keep the company name at the front of the entry; the user wanted it in the document's own colour, so the line break alone does that work now. The rule stays as the hook for the markup rather than being deleted, since the span is what makes the place a second line rather than a run-on. */ .credits-list dd .credits-place { color: inherit; } .note-toggle { cursor: pointer; } /* The running header — "WEB · GENESIS 1" — names the text below it, so it is set in the same face as that text rather than in the interface sans. It appears three times: at the head of the study column, pinned in the reader's view (.reader-ref-flow), and in the bleedthrough ghost, and this covers all three. The same x-height correction as the scripture, for the same reason: Roboto Serif runs larger than the sans at a given size, and this line should stay the quiet label it is. The bleedthrough and study copies sit inside .verses, so em also carries the reader's size preference; the pinned one is outside it and simply follows the root. */ .reader-ref { letter-spacing: .06em; font-family: 'Roboto Serif', 'Reading Fallback', Georgia, serif; /* The 0.875 is Bootstrap's .small, which the markup also asks for. Both are em against the same parent, so they do not multiply — whichever rule wins simply replaces the other, and this one does. Stating it here keeps the line the size it has always been while the face correction applies on top; drop the .small from the markup and nothing changes. */ font-size: calc(0.875em * var(--reader-face-scale, 0.914)); } /* Middle dot between the translation and the reference — the traditional separator for a reference line. Set lighter than the text around it so it reads as punctuation rather than as another piece of information, with a little air either side to keep the two halves distinct. */ .reader-ref-sep { margin: 0 0.55em; opacity: 0.5; } .dropcap { float: left; font-family: 'Roboto Serif', 'Reading Fallback', serif; /* em, not rem, so the cap scales with the reader font size (see .verses). */ font-size: 4em; line-height: 3.4rem; padding: 0.1rem 0.5rem 0 0; font-weight: 800; display: flex; align-items: flex-start; } /* Flex (not vertical-align) so the quote's top lines up with the cap letter's top regardless of the two font-sizes' differing metrics. */ .dropcap .dropcap-quote { /* CAREFUL: em here compounds with the 4em on .dropcap above, so this is a FRACTION OF THE CAP, not of the body text — 0.4 x 4em lands at 1.6em, a small quote beside a big letter. Writing the intended 1.6em directly is the trap: it multiplies out to 6.4em and the quote dwarfs the very letter it introduces. */ font-size: 0.4em; margin-right: 0.1rem; } .marginalia, .add-note-toggle, .add-note-form { font-family: 'Prompt', sans-serif; } .marginalia { font-size: 0.85em; } .note-view { font-family: 'Gochi Hand', cursive; font-size: 1.3em; color: #5B1CBA; } /* Hebrew and Greek match the KJV line: same inherited size, muted color. em so they scale with the reader font size (see .verses). */ .hebrew, .greek { font-size: 1em; } /* Self-hosted Noto for the original languages, so the WLC and the Greek render the same everywhere rather than in each OS's own fallback. The scholarly system fonts stay in the stack behind them. */ .hebrew { font-family: 'Noto Sans Hebrew', 'Segoe UI', serif; } .greek { font-family: 'Noto Sans Greek', 'Segoe UI', serif; } /* The Latin badges inside those layers — the WLC/TR version labels and the MT/TR divergence refs. The Noto faces cover only their own script, so left alone these fall through to Segoe UI while the KJV label wears the verse serif; all three version labels must sit in the same face. */ .hebrew .text-uppercase, .greek .text-uppercase, .hebrew .mt-ref, .greek .mt-ref { font-family: 'Roboto Serif', 'Reading Fallback', Georgia, serif; } /* ---- The interlinear view (the third reader view, New Testament only) ---- Each Greek word is a small stack: word, transliteration, gloss, parsing code (its meaning in the title), Strong's number(s) opening the same popup the study view uses. Rows are .verse-row, so selection highlighting and verse placement come from the rules those already have. */ .ilx-verse { margin-bottom: 1.25rem; } .ilx-vnum { margin: .5rem .4rem 0 0; } .ilx-words { display: flex; flex-wrap: wrap; gap: .1rem .3rem; } .ilx-w { display: flex; flex-direction: column; padding: .25rem .45rem; border-radius: .35rem; } .ilx-w:hover { background: rgba(0, 0, 0, .05); } .ilx-gr { font-size: 1.25em; line-height: 1.5; } .ilx-tl { font-size: .72rem; color: #6c757d; font-style: italic; } .ilx-gl { font-size: .85rem; } .ilx-gl.ilx-none { color: #adb5bd; } .ilx-mo { font-size: .68rem; font-family: var(--bs-font-monospace); color: #8a6d3b; cursor: help; } .ilx-st { font-size: .8rem; line-height: 1; } .ilx-en { font-size: .875rem; color: #6c757d; margin: .35rem 0 0 1.5rem; max-width: 60rem; } /* When the reader switches the main reading column to an original-language text (the toolbar's text picker), it takes that script's font at full reading size — not the muted, smaller study layers above — and the Hebrew runs right to left. In the flowing reader's view the whole column turns; in the study view it is the primary verse body that turns, verse by verse. */ .flow-text.script-hebrew, .verse-body.script-hebrew { font-family: 'Noto Sans Hebrew', 'Segoe UI', serif; direction: rtl; } .flow-text.script-hebrew { text-align: right; } .flow-text.script-greek, .verse-body.script-greek { font-family: 'Noto Sans Greek', 'Segoe UI', serif; } /* The Strong's lemma may be either script (the pop-up in the reader and the heading on strongs.php), so both faces are offered and the browser takes the one that has the glyphs. */ #sp-lemma, .lemma { font-family: 'Noto Sans Hebrew', 'Noto Sans Greek', 'Segoe UI', serif; } /* The wallpaper itself lives in css/background.css, applied by the .bg-hills class on . It replaced a 442 KB photograph that was washed out under a 30% white overlay to keep text legible over it; the drawn hills are painted at a weight that needs no such veil, so the overlay went with it. */ /* The interface font, said once, where Bootstrap will hear it. Until this was set the app had never told Bootstrap what it is written in: the fonts were applied to .prose, to headings, to the scripture and to the navbar brand, and everything else fell through to the browser's own stack. That was invisible on ordinary pages, where the text sits inside .prose — but every component Bootstrap renders elsewhere came out in the system font: modals, toasts, tooltips, popovers, the Navigator panel, the navbar's own links and selects, and the pager. Setting the variable rather than the body rule reaches all of them at once, including the ones that do not exist yet when the page loads. What is meant to be something else still says so for itself — the scripture and the headings in Roboto Serif, code in Roboto Mono, .prose in Prompt Light. It has to be --bs-font-sans-serif, not --bs-body-font-family: tooltips and popovers declare font-family: var(--bs-font-sans-serif) directly and never look at the body variable, so setting only that one left those two in the system font while everything around them changed. This is the root of the pair — --bs-body-font-family defaults to it — so one line covers both. */ :root { --bs-font-sans-serif: 'Prompt', sans-serif; } body { min-height: 100vh; user-select: none; -webkit-user-select: none; /* The sides and the foot of the safe area, held once here rather than on every page's container. Horizontal padding is safe to put on the body in a way vertical padding is not: it cannot interact with the min-height above, or with the viewport-height rules further down. The foot is here too — border-box sizing means the padding comes out of the 100vh rather than adding to it, so nothing gains a scrollbar. Fixed elements do not inherit this and are handled where they are defined; that is deliberate for the wallpaper, which SHOULD reach every edge. Zero unless head.php's viewport meta carries viewport-fit=cover. */ padding-left: var(--safe-l); padding-right: var(--safe-r); padding-bottom: var(--safe-b); } /* The map page is the exception: its stage is exactly 100dvh inside a body with overflow:hidden, so a padded body would push the bottom of the stage past the fold and it would be clipped rather than shown. The stage takes the insets itself instead — see .map-stage. */ body.map-fixed { padding-bottom: 0; } /* Top clearance under the fixed bar. Every page states it as Bootstrap's pt-5 in its own markup, so this one rule reaches all 28 of them where no amount of editing style.css otherwise could — the alternative was touching every page. REDEFINING A FRAMEWORK UTILITY CARRIES A CONDITION, and it is not theoretical: this only works while every pt-5 in the codebase is a top-level container clearing the fixed navbar. Checked in the DOM, not by eye — and one exception turned up, search.php's form, which sat INSIDE its page's clearance container and so counted the notch twice (a measured 93px of clearance where 34px was right). It now wears .search-form-gap below instead. **Before adding a pt-5 anywhere that is not the page's outermost container, use that class or make another one** — or the inset compounds, silently and only on a notched phone. The reader's own view does not use pt-5: its clearance is on .verses.reader-flow, which carries the same inset separately. */ .pt-5 { padding-top: calc(3rem + var(--safe-t)) !important; } /* Bootstrap's pt-5 by another name, for spacing that is NOT navbar clearance — see the condition above. Same 3rem, no safe-area inset. */ .search-form-gap { padding-top: 3rem; } .container > .bg-white { min-height: 100vh; position: relative; overflow: hidden; } /* Bible paper, reader only: warm chalky ivory rather than stark white, so the sheet reads as physical stock. Other pages (strongs.php, search.php) keep pure white so the contrast is felt when switching back to the bible. DESATURATED 2026-08-03 on Daniel's "reduce the yellowness a bit" — every warm value here moved two thirds of the way toward a neutral gray OF ITS OWN LUMINANCE (#faf5ea -> #f7f5f1, and the toning tint below). Holding the luminance is the whole trick: the yellow leaves without the paper getting lighter, darker or visibly gray. THEN, same day, THE TONED SHEET HAD TO BE DARKENED to #eceae2, because the first pass made Age toning look broken — and Daniel reported it as broken. Most of what separated the toned sheet from this one WAS the yellow, so desaturating both independently collapsed the gap between them: 4.24 dE before, 2.38 after, against a threshold of about 2.3 for two flat fields. Measured at the center of the page, where the text is, the switch was moving 1.74 dE — under the threshold. It saved correctly and removed the class correctly the whole time; there was simply nothing left to see. #eceae2 restores the old strength (4.45 dE) as DEPTH rather than as hue, which is the honest reading of age toning anyway: paper dulls and darkens, and the yellow was only one expression of that. So the rule when retuning any of this: judge the sheets BY THE DISTANCE BETWEEN THEM, not one at a time. A change that looks right on each sheet alone can still leave a preference switch with nothing to say. NOTE the rule that actually wins here is the auth-pages one further up (it carries .bg-white as well, which every card has, so it outranks this block). All three declarations must be changed together. */ .container > .bible-paper { /* Paper on, Age toning OFF: a light, clean ivory — clearly paper, not the creamier toned sheet below. */ background-color: #f7f5f1 !important; } /* Paper on AND Age toning on: the sheet deepens — in luminance now, not in warmth — and the vignette then shades it at the edges. Split from the base above so switching Age toning off returns to the lighter stock. */ .container > .bible-paper.age-toning { background-color: #eceae2 !important; } /* Age toning: the warm vignette darkening the sheet toward its edges. Its own class, separate from the paper above, because each can be switched off on its own from the account page. The center highlight is kept light (a heavy white wash here washed the warm ivory out to near-white exactly where the text sits, which made the whole vignette read as flat white); the warm edge tint carries the effect. */ .container > .age-toning { background-image: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0) 45%, rgba(181, 176, 165, 0.18) 100%); } /* Page curvature: soft inner shading where the sheet bends toward the binding at either side. Overlay layer so Bootstrap's outer .shadow (which carries !important) is left alone. THIS BELONGS TO .bible-paper, NOT TO .age-toning, and that is deliberate — the curve is structure, the toning is age. But it means TWO switches darken the sheet's edges, and on 2026-08-03 that cost a diagnosis: Age toning was switched off and the edges still shaded, which read as the switch being broken. If anyone reports that again, this is the answer, and the Bible paper hint on account.php already names the curve as part of what it owns. The color was rgba(101, 74, 42) — brown, which sat in-family on the old cream stock but read as a stain once the paper went near-neutral: it left the gutter 2.4x as saturated as the sheet, where it had been 1.4x. Neutralized to its own luminance at the same alpha, so the bend is exactly as deep (10.0 dL* either way) and carries almost no hue (cast 2.99 -> 0.81). */ .container > .bible-paper::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2; box-shadow: inset 34px 0 32px -16px rgba(85, 76, 65, 0.17), inset -34px 0 32px -16px rgba(85, 76, 65, 0.17); } .bleedthrough { position: absolute; inset: 0; padding: 1.5rem; overflow: hidden; opacity: 0.06; transform: scaleX(-1); pointer-events: none; user-select: none; -webkit-user-select: none; z-index: 0; } .bg-white > .verses { position: relative; z-index: 1; } /* Reader font size. The whole reading column (both views, and the bleedthrough ghost so it stays aligned) scales from one factor a reader sets in Preferences; --reader-scale is published in head.php, defaulting to 1 — the current, smallest size. Everything inside is em-relative (see below), so it scales together rather than only the main text. */ .verses { font-size: calc(1rem * var(--reader-scale, 1)); } /* The scripture itself is set in Roboto Serif — a reading face for the thing people came to read, leaving the sans to the interface around it. Both views: .flow-text is the reader's continuous column, .verse-text the study view's verse rows (which carry the KJV and original-language layers too, so those turn with it; the Hebrew and Greek keep their own faces, set above). The size is corrected because the two fonts are not the same size at the same font-size. Measured per em, the system sans has an x-height of 0.500 and Roboto Serif 0.547 — so at 1rem the serif looks noticeably bigger. 0.914 equalises the x-heights, which is what the eye reads as "how big is this text", and leaves the default looking like the default always did. Held in a variable so it can be tuned without hunting through rules. 1em, not 1rem: .verses above has already applied the reader's own size preference, so this composes with it instead of overriding it. */ .flow-text, .verse-text { font-family: 'Roboto Serif', 'Reading Fallback', Georgia, serif; font-weight: 400; font-size: calc(1em * var(--reader-face-scale, 0.914)); } /* The popup's paper is the command palette selector's gold (Daniel, 2026-08-15), so the two things that say "this is the bit you are on" say it in one colour. OPAQUE, NOT THE rgba ITSELF. The palette's rgba(201,162,39,.22) is a wash meant to let its panel through; this floats over running scripture, and a translucent popup would show the verse it is explaining straight through its own text. #f3ebcf is that exact wash composited over white — same shade, no transparency. It replaced #f8eecd, a near neighbour that was nobody's variable. */ #strongs-popup { background-color: #f3ebcf; display: none; max-width: 380px; z-index: 1040; } /* A Strong's description is English prose with the odd Greek or Hebrew word inside it — "from ἀγαπάω; love, i.e. affection or benevolence". It had no font of its own, so it inherited the interface face, and Prompt carries NO Greek and no Hebrew at all: every one of those characters was substituted by the OS. That is why Strong's looked worse than the reader, where only the polytonic marks fell through. Prompt stays FIRST so the English is unchanged; the Noto faces sit behind it and the browser reaches them per character, for exactly the words Prompt cannot draw. Both the page and the reader's popup are covered here. */ .strongs-desc, #sp-desc { font-family: 'Prompt', 'Noto Sans Greek', 'Noto Sans Hebrew', 'Segoe UI', sans-serif; } #sp-desc { font-size: 0.9rem; } /* The full lexicon articles under the gloss on strongs.php — Brown-Driver- Briggs behind a Hebrew number, Abbott-Smith behind a Greek one, converted to this HTML by tools/build_lexicon.php. Same face story as .strongs-desc above: English prose with source-language words inside it, and Prompt carries neither script. The sense tree nests by indentation alone. The panel is the .article-verse blockquote shape — pale tint, left rule, rounded right corners — because both are the same act: another book quoted on our page. But the hue is the distinction (Daniel, 2026-08-18): scripture quotes sit on warm gold-paper, scholarship sits on pale violet with the rule in the same hue saturated — two voices, two colour channels, never mistakable for each other at a glance. Violet was unclaimed in the app's colour language (gold HERE, blue editorial, grey advertiser) and now means: a reference work speaking. The text stays in the interface sans rather than the reading serif for the same reason. Kept deliberately pale — the panel is a container, not an accent. */ .lex-panel { background: #f8f6fb; border-left: 3px solid #7a5ea8; border-radius: 0 var(--bs-border-radius) var(--bs-border-radius) 0; padding: 1rem 1.25rem; } .lex-article { font-family: 'Prompt', 'Noto Sans Greek', 'Noto Sans Hebrew', 'Segoe UI', sans-serif; } .lex-article .lex-sense { padding-left: 1.25rem; } .lex-article .lex-sense-n { font-weight: 600; } .lex-article .lex-stem { font-variant: small-caps; } /* Sits just under the fixed navbar's 1030. The navbar is a stacking context, so its dropdowns can never rise above a sibling that matches its z-index — at 1030 this bar (later in the DOM) painted over open menus. Still above the book edges (1020) and the page itself. */ #scroll-progress-bar { position: fixed; left: 0; width: 0%; height: 3px; /* The player's gold (Daniel, 2026-08-02), replacing the coral this line carried on its own. Both are "how far through are you" — one through the page, one through the chapter — so they now say it in the same color. */ background-color: var(--biblion-gold); z-index: 1029; } /* Art gilt: the page block seen from the side, as on a well-made Bible. Bole — the colored ground — laid under gold leaf reads gold face-on and shows its own color once the block is fanned, which is the angle these are drawn from, hence the bole rather than the gold. The fine vertical striping stands in for individual leaves; the widths are set per chapter (see the fore-edge gauge in index.php), so the block thickens on one side and thins on the other as you move through the Bible. The four colors below are all that separates one colorway from another, so they are held as custom properties and a colorway is just a set of values. Red is repeated as the fallback in case the class is ever missing. */ .fore-edge { --gilt-bole: #e3b3ae; --gilt-leaf: rgba(140, 48, 42, 0.45); --gilt-rule: #b5645e; --gilt-shade: rgba(90, 20, 18, 0.18); position: fixed; bottom: 0; z-index: 1020; pointer-events: none; background-color: var(--gilt-bole); background-image: repeating-linear-gradient( 90deg, var(--gilt-leaf) 0px, var(--gilt-leaf) 1px, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0) 3px ); } .fore-edge-red { --gilt-bole: #e3b3ae; --gilt-leaf: rgba(140, 48, 42, 0.45); --gilt-rule: #b5645e; --gilt-shade: rgba(90, 20, 18, 0.18); } /* Blue under gold, after the Schuyler: a green-leaning teal rather than a true blue, which is what the bole actually looks like fanned. Held at the same lightness and saturation as the red so neither colorway shouts louder than the other beside the text. */ .fore-edge-blue { --gilt-bole: #a9ced3; --gilt-leaf: rgba(21, 92, 105, 0.45); --gilt-rule: #5f9ba5; --gilt-shade: rgba(10, 58, 70, 0.20); } /* Pure gold — no contrasting bole at all (Daniel, 2026-08-02). Where the other two show a colored ground once the block is fanned, this one is gold through and through, which is the plainest and most expensive-looking of the three. The rule IS the player's gold, exactly: --biblion-gold, so the edge of the page block and the scrubber are the same color and stay so if that value ever moves. THE GROUND IS A PALE GOLD, NOT #c9a227 ITSELF, and that is deliberate. The blue was built at the red's lightness on purpose so neither colorway shouts louder than the other beside the text; the player's gold is a mid-dark 47% against those two at ~79%, so using it as the fill would have made this the loud one. It is held at the family's lightness instead and spends the strong gold on the rule, which is the line the eye actually reads as the edge. */ .fore-edge-gold { --gilt-bole: #e3d5ab; --gilt-leaf: rgba(140, 108, 20, 0.45); --gilt-rule: var(--biblion-gold); --gilt-shade: rgba(90, 68, 12, 0.18); } .fore-edge-left { border-left: 2px solid var(--gilt-rule); box-shadow: inset -4px 0 5px var(--gilt-shade); } .fore-edge-right { border-right: 2px solid var(--gilt-rule); box-shadow: inset 4px 0 5px var(--gilt-shade); } @media (max-width: 767.98px) { .fore-edge { display: none; } } /* Two groups at ≥992px: the brand sits alone on the left, and everything else (book/chapter selector + Navigator/Search/Options/About/account) rides together as one group centered in the navbar. A 3-column grid with equal 1fr flanks keeps the middle group centered while the brand pins to the left. */ @media (min-width: 992px) { .navbar-grid { display: grid !important; grid-template-columns: 1fr auto 1fr; align-items: center; } .navbar-grid > .navbar-start { justify-self: start; } .navbar-grid > .navbar-collapse { grid-column: 2; display: flex !important; align-items: center; gap: 1rem; } /* Inside the centered group the account menu just follows the selector with a normal gap — no auto margin pushing it away. */ .navbar-collapse > .navbar-end { margin-left: 0; } } /* On narrower screens the account menu lives inside the collapsed rollout menu (flex column), where this auto margin pushes it to the end of the stack. */ .navbar-end { margin-left: auto; } .verse-row { cursor: pointer; border-radius: 0.25rem; padding: 0.5rem; transition: background-color 0.15s ease; position: relative; } .vnum { position: absolute; left: -1rem; top: 0.6rem; } /* Favorite star: sits in the left gutter beside the verse, and is drawn only when the verse is already a favorite — so a chapter shows its favorites at a glance. Lives in the same negative-left gutter as .vnum so it never overlaps the verse text. PURELY AN INDICATOR since 2026-07-31, on the same instruction that paled the cross-reference mark: it was a