, and a browser's own h2 size is 1.5em. A heading that opens the chapter needs no space above it. */ .text .sec{ font-size:1em; font-weight:700; text-align:left; text-indent:0; hyphens:none; margin:1.1em 0 0.35em; } .text .sec:first-child{margin-top:0} /* Paragraph shape mirrors the app: on a phone, paragraphs are separated by space (the app's phone reading pane); from tablet width up the app switches to its iPad "reporter" setting — a first-line indent with no blank line between paragraphs, which is how a printed Bible sets prose. A paragraph that OPENS with poetry keeps its space and takes no indent, matching the app's rule that the reporter indent is skipped for poetic paragraphs. */ @media (min-width:46rem){ /* The reporter set: no gap between paragraphs, a first-line indent instead (the app's em+en spaces). Leading stays natural — the importer drops the app's 1.3 exactly as it drops the phone's 2.0. */ .text{--pgap:0rem} .text p{margin:0; text-indent:1.5em} /* The first paragraph takes no reporter indent — and a psalm's title is a
too, so once it stands first the verse paragraph after it must be named as well or every titled psalm gains an indent it never had. */ .text p:first-child, .text p.pst + p{text-indent:0} /* A note's card, chip or notice is inserted BEFORE its paragraph, so the first paragraph of a chapter (or of a titled psalm) stops being the first child once it is noted; it keeps the no-indent it had without the note. */ .text .note:first-child + p, .text .notechip:first-child + p, .text .notenotice:first-child + p, .text p.pst + .note + p, .text p.pst + .notechip + p, .text p.pst + .notenotice + p{text-indent:0} .text p.pm{margin:.55rem 0; text-indent:0} .text p.pm + p{text-indent:0} } .text p.pm{text-align:left; hyphens:none} /* THE PSALM'S TITLE. Scripture's own title for the psalm — "A Psalm of David, when he fled from Absalom his son" — not a section heading, so it is set as an italic unnumbered line rather than as a heading, and it takes no reporter indent. Leading is inherited deliberately: on all four app panes the title sets at the body's own rhythm, so naming a line-height here would make the web the one surface that differs. The gap below is the same 0.45 of a line the panes measure. The face ships no italic cut, so this is a synthesised oblique — accepted, because the alternative is a fifth hashed font asset for one line per psalm. */ .text p.pst{font-style:italic; text-indent:0; margin:0 0 0.55em} /* THE FOOTNOTE SECTION. The translators' apparatus, after the chapter and outside the article, because the article is the scripture and this is about it. Set smaller and muted so it reads as an appendix rather than as more verse: a reader scrolling for the next chapter passes it, and a reader who wants it has it without a control the site has no way to remember. The key column is the verse number the note belongs to, or "Title". */ .notes{margin:2.2rem 0 0; padding-top:1.1rem; border-top:1px solid var(--border); font-size:.86em; color:var(--muted)} .notes h2{font-size:.86em; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin:0 0 .7rem} .notes dl{margin:0; display:grid; grid-template-columns:2.4em 1fr; gap:.34rem .7rem} .notes dt{font-variant-numeric:tabular-nums; text-align:right; opacity:.75} .notes dd{margin:0} /* The app's verse number: sup.v — 0.66em, weight 600, no tracking, 2px of air after it. The raise is left to the browser's own handling, damped so a superscript cannot open up the line it sits on. */ .n{font-size:.66em; font-weight:600; letter-spacing:0; margin-right:2px; vertical-align:.45em; line-height:0} .n a{color:var(--verse); text-decoration:none} .n a:hover{text-decoration:underline} .wj{color:var(--red)} /* A single-verse link works with NO JavaScript: the fragment matches the verse's id and :target paints it. reader.js only adds ranges. */ /* Generous scroll-margin so a deep link lands the verse with the chapter heading still on screen, rather than pinning it to the very top edge. */ .v:target,.v.hl{background:var(--verse-hl); border-radius:3px; box-shadow:0 0 0 .18em var(--verse-hl); scroll-margin-top:6.5rem} /* Browsers do NOT re-evaluate :target when history.replaceState drops the fragment — the URL loses #v16 but the verse stays lit, so tapping a single-verse highlight appeared to do nothing (a range cleared, because that is class-based). reader.js sets this flag when it clears, and the extra class beats the bare :target on specificity. Without JS the flag is never set, so the no-JS highlight is untouched. */ html.nohl .v:target{background:none; box-shadow:none; cursor:auto} .empty{color:var(--muted); font-style:italic} .grid{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr)); gap:.4rem} .grid.nums{grid-template-columns:repeat(auto-fill,minmax(3.2rem,1fr))} .grid a{ display:block; padding:.55rem .6rem; text-decoration:none; color:var(--text); background:var(--surface); border:1px solid var(--border); border-radius:8px; font-size:.92rem; } .grid.nums a{text-align:center} .grid a:hover{border-color:var(--accent); color:var(--accent)} .pager{display:flex; justify-content:space-between; gap:1rem; margin-top:1.5rem; padding-top:1rem; border-top:1px solid var(--border); font-size:.9rem} .pager a{color:var(--accent); text-decoration:none} .pager a:hover{text-decoration:underline} .guess{margin:0 0 1.2rem} .guess a{color:var(--accent)} /* Clearing a highlight: tap the highlighted text and a small "Clear highlight" bubble appears at the tap; tap the bubble to clear, tap anywhere else (or the verse again) and it goes away. cursor:pointer is not only a hint here — it is also what makes iOS Safari treat a bare as tappable at all. */ .v:target,.v.hl{cursor:pointer; -webkit-tap-highlight-color:transparent} /* Sits just under the highlighted text, centred on the column — so it points at what it offers without covering it. Absolute (document coordinates), so it travels with the passage as the reader scrolls; reader.js sets top/left from the last line of the highlight. It holds ONE button for a plain highlight and TWO when the highlight belongs to a note, because "hide" and "delete" are different enough that a reader should not have to guess. */ .clearbar{ position:absolute; z-index:15; transform:translateX(-50%); display:flex; gap:.4rem; } .clearbub{ background:var(--surface); color:var(--accent); border:1px solid var(--border); border-radius:999px; padding:.4rem .9rem; font-size:.8rem; font-weight:700; cursor:pointer; font-family:var(--ui); box-shadow:0 3px 12px rgba(0,0,0,.18); white-space:nowrap; -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent; } .clearbub:hover{border-color:var(--accent)} /* THE SENDER'S NOTE. It sits above the chapter, in the flow, so it never covers the words it is about and needs no JavaScript to follow the page. It must NOT look like BibleText chrome: the whole point of the attribution line and the quoted, off-palette card is that a reader can tell at a glance that a person wrote this, not the app. A note that could pass for our own voice would be a phishing surface on our own domain. */ /* Anchoring the note beside its passage puts it INSIDE .text, so it would otherwise inherit the scripture face, its justification, its 21px, and the reporter first-line indent — i.e. it would look like scripture. Everything here is an explicit reset: a reader must never have to work out whether the words in front of them are the Bible or a stranger's message. */ .note{ /* An inline-level box so its margins NEVER collapse with the paragraph gap or a heading's tail above it: the band stacks on whatever air stands there, exactly as the natives reserve it, and the numbers are the spec's (noteMetrics GapAbove above; TailDepth + GapBelow below a card with a tail, GapBelow alone without one — the tail apex, not the card's edge, is what stands GapBelow above the passage). */ display:inline-block; width:100%; vertical-align:top; position:relative; margin:10px 0 19px; padding:.85rem 2.2rem .9rem 1rem; /* The shared arrival lead (noteMetrics().Lead), not this file's own offset. The VERSE target keeps its larger 6.5rem margin — a bare #vN jump is the browser's own scroll, held well clear of the page top for legibility. That larger number is this surface's stated divergence from the single Lead, pinned by note_chrome_shared_test.go. */ scroll-margin-top:16px; background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:10px; font-family:var(--ui); font-size:1rem; line-height:1.5; letter-spacing:normal; text-align:left; text-indent:0; font-feature-settings:normal; } .note p{margin:0; text-align:left; text-indent:0; hyphens:none} /* The tail, which is what makes it read as somebody speaking: a square of side TailWidth/√2 turned 45° with its centre on the card's OUTER bottom edge, so the apex hangs TailWidth/2 = TailDepth below the edge and the base is TailWidth across — the spec's 9 × 18. Two things the arithmetic must include: the universal box-sizing rule never reaches a pseudo-element, so the square's own 1px borders are put inside its side here, and its bottom is measured from the card's padding edge, one border above the outer one. */ .note::after{ content:""; position:absolute; left:1.6rem; box-sizing:border-box; bottom:calc(-6.36px - 1px); width:12.73px; height:12.73px; background:var(--surface); border-right:1px solid var(--border); border-bottom:1px solid var(--border); transform:rotate(45deg); } /* No passage to point at, no tail — the shared rule (noteChrome.hasTail); anchorToPassage sets the class on the chapter-top parking. */ .note.notail::after{display:none} .note.notail{margin-bottom:10px} .notewho{ margin:0 0 .3rem; color:var(--muted); font-size:.78rem; letter-spacing:.01em; } /* The note itself is set in the CHROME face, not the scripture serif: it is somebody's message, and it must never be mistaken for the text. */ .notetext{margin:0; font-size:.95rem; line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere} /* Minimize and delete, in that order: the reversible one first, so the destructive one is never the one a thumb reaches by accident. */ .notetools{position:absolute; top:.3rem; right:.35rem; display:flex; gap:.1rem} .notebtn{ background:none; border:0; padding:.3rem; cursor:pointer; color:var(--muted); line-height:0; border-radius:6px; } .notebtn svg{width:15px; height:15px; fill:currentColor; display:block} .notebtn:hover{color:var(--accent); background:var(--control-hover)} /* The minimized marker. Small and quiet, but unmistakably a thing to press: the note is still there and the reader has to be able to find it again. Its vertical margins carry the centering rule (notePillSeparatorLift in the app): the paragraph separator above it (--pgap, the preceding p's bottom margin) splits evenly around the chip, so the air reads the same on both sides — margin-top gives up pgap/2, margin-bottom takes it. On the reporter page --pgap is 0 and both margins are the spec's GapAbove and GapBelow again. The chip stays inline-flex (an atomic inline box: no margin collapsing with the neighbouring paragraphs) and vertical-align:top keeps the anonymous line box's strut from eating the shrunken top margin. The chapter-top parking (.notail, after the header instead of a paragraph) has no separator above it and keeps the plain margins. Under a section heading or a psalm title the separator is the heading's tail or the title's gap (--htail, --tgap), and the chip centres in THAT air — the app's rule reads whatever the page put above the paragraph, never only its rhythm. The height, side padding and width floor are the spec's too; the height is a floor, so a label the browser sets larger than the app's grows the chip rather than escaping it. */ .notechip{ display:inline-flex; align-items:center; justify-content:center; gap:.35rem; min-height:28px; min-width:86px; margin:calc(10px - var(--pgap, 0rem)/2) 0 calc(10px + var(--pgap, 0rem)/2); vertical-align:top; scroll-margin-top:16px; letter-spacing:normal; text-indent:0; background:none; border:1px solid var(--border); border-radius:999px; padding:.3rem 14px; font-size:.78rem; font-family:var(--ui); color:var(--muted); cursor:pointer; line-height:1.2; } /* No separator above, no split: a chip before the FIRST paragraph (it becomes .text's first child) and the chapter-top parking (outside .text, where --pgap never reaches it anyway) keep the plain margins — the app's rule that the bare chapter top never lifts. A psalm's title takes .text's first-child slot, so a chip on verse 1 of a titled psalm is NOT the first child: it follows the title and centres in the title's gap, below. */ .text .notechip:first-child, .notechip.notail{margin:10px 0 10px} .text .sec + .notechip{margin:calc(10px - var(--htail)/2) 0 calc(10px + var(--htail)/2)} .text p.pst + .notechip{margin:calc(10px - var(--tgap)/2) 0 calc(10px + var(--tgap)/2)} .notechip svg{width:13px; height:13px; fill:currentColor; display:block} .notechip:hover{border-color:var(--accent); color:var(--accent)} /* THE COULD-NOT-READ NOTICE: what stands in the note's place when a link's payload cannot be rendered (a newer note format, or damage). Quiet and attributed to nobody — no tail (nobody is speaking), no accent edge, no button, no link. Same explicit resets as .note: it sits inside .text and must read as neither scripture nor a person's message. */ .notenotice{ margin:1.1rem 0; padding:.8rem 1rem; scroll-margin-top:1.2rem; background:var(--surface); border:1px solid var(--border); border-radius:10px; color:var(--muted); font-family:var(--ui); font-size:.9rem; line-height:1.5; letter-spacing:normal; text-align:left; text-indent:0; font-feature-settings:normal; } .foot{max-width:40rem; margin:0 auto; padding:0 1.6rem 2.5rem; text-align:center} .foot a{color:var(--muted); font-size:.8rem; text-decoration:none} .foot a:hover{color:var(--accent); text-decoration:underline} /* Platform row under the app link. Monochrome and quiet on purpose — this is a footnote, not a call to action; the icons say "it runs on your thing" at a glance without shouting. They inherit currentColor, so they follow the muted colour and the light/dark flip with no second asset. */ .plats{display:flex; justify-content:center; align-items:center; gap:.6rem; margin:.2rem 0 0; color:var(--muted)} .plats a{display:inline-flex; align-items:center; color:inherit; opacity:.75} .plats a:hover{opacity:1; color:var(--accent)} /* px, not rem: on a phone with a large text-size setting these were rendering enormous. They are decoration and should stay the same modest size. */ .plats svg{width:15px; height:15px; fill:currentColor; display:block} @media print{.top,.pager,.foot{display:none}}