/* css/skins.css — the reading skin system (reader + library). * * Every themed value is a custom property set on by php/skins.php. * Nothing here hard-codes a skin colour, so switching skins is one attribute * swap and the transitions below animate it. * * The admin console does NOT use this file; it has its own neutral system. */ :root { --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* Type scale. The handoff's sizes were drawn for a mock and read cramped in a real browser: calibrated against Firefox zoom, the reading column wants ~132% and the toolbar ~143% of the handoff values. Applied through calc() so the whole tier can be retuned by changing one number here. --read-scale : the reading column and its apparatus --ui-scale : the toolbar, drawers and other chrome */ --read-scale: 1.32; --ui-scale: 1.43; /* How far the verse number is nudged back DOWN from the top of the line box, in the number's own em (about 11px at Normal text size). Larger = lower. 0 is the original, highest position. Readers change this on themes.php; php/chrome.php stamps their choice onto , so this is only the fallback. */ --vnum-align: top; --vnum-drop: 1.3em; } *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--paper); color: var(--ink); font-family: var(--f-body); -webkit-font-smoothing: antialiased; } /* Every themed element animates on a skin switch. */ body, .toolbar, .card, .chip, .icon-btn, .verse, .tools-bar, .book-btn, .chap-cell { transition: background .35s ease, color .35s ease, border-color .35s ease; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } /* ---- micro-labels ------------------------------------------------------- */ .mono, .kicker, .meta, .vnum, .kbd, .count { font-family: var(--mono); font-variant-ligatures: none; } .kicker { font-size: calc(11px * var(--read-scale)); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); } /* ---- toolbar ------------------------------------------------------------ */ .toolbar { position: sticky; top: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding: calc(14px * var(--ui-scale)) calc(26px * var(--ui-scale)); background: var(--panel); border-bottom: 1px solid var(--rule); } .toolbar-group { display: flex; align-items: center; gap: 12px; } .brand { font-family: var(--f-head); font-size: calc(16px * var(--ui-scale)); font-weight: 600; letter-spacing: .03em; color: var(--ink); text-decoration: none; } .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: calc(38px * var(--ui-scale)); height: calc(38px * var(--ui-scale)); padding: 0; background: transparent; border: 1px solid var(--rule); border-radius: 10px; color: var(--ink); cursor: pointer; } .icon-btn:hover { background: var(--hover); } .icon-btn .bi { font-size: calc(17px * var(--ui-scale)); line-height: 1; } .icon-btn:focus-visible, .chip:focus-visible, .verse:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .ref-btn { background: none; border: 0; padding: 0; font-family: var(--f-body); font-size: calc(15px * var(--ui-scale)); color: var(--sub); cursor: pointer; } .divider { width: 1px; height: calc(22px * var(--ui-scale)); background: var(--rule); } .kbd { font-size: calc(10px * var(--ui-scale)); padding: 2px 5px; border: 1px solid var(--rule); border-radius: 4px; color: var(--sub); } /* ---- skin chips --------------------------------------------------------- */ .chip { display: inline-flex; align-items: center; gap: 3px; padding: 6px 9px; border: 1.5px solid var(--rule); border-radius: 999px; background: transparent; cursor: pointer; } .chip[aria-pressed="true"] { border-color: var(--accent); background: var(--hover); } /* Each dot shows that preset's OWN palette — a live preview, so it must not inherit the active skin's colours. */ .dot { width: calc(9px * var(--ui-scale)); height: calc(9px * var(--ui-scale)); border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.14); } /* ---- reading column ----------------------------------------------------- */ .reader { /* Sized in ch, not px, so the column holds a constant ~70 characters per line whatever text size the reader picked. A fixed 660px column ran 69 characters at Compact but only 47 at Larger, which is why the big sizes felt cramped. ch resolves against THIS element's font-size, so --body-sz has to be set here, not only on the paragraphs. Deliberately not a plain vw fraction: 1/3 of an ultrawide screen is ~109 characters, well past the 60-75 that reads comfortably. */ font-size: var(--body-sz); max-width: min(70ch, 92vw); margin: 0 auto; padding: 60px 32px 160px; } /* Inside the 12-column reader grid the COLUMN width comes from Bootstrap (cols 4-8). The text is capped separately at a comfortable measure and centred in the cell, so the grid keeps its geometry for the flanks while the line length stops growing on wide screens. 72ch is the top of the 60-75 range that reads comfortably; beyond it the eye loses its place returning to the next line. This cap also carries the stacked layout below xl, where the reader would otherwise run the full width of a tablet. */ .reader-grid .reader { max-width: 72ch; margin-inline: auto; padding-left: 24px; padding-right: 24px; } /* The flanks are empty for now; they are reserved for commentary, cross-references and Rashi. Kept in the DOM rather than added later so the column geometry does not shift when they are filled. */ .reader-aside { padding-top: 24px; } .meta { display: flex; justify-content: space-between; font-size: calc(11px * var(--read-scale)); color: var(--accent); } .meta .pair { color: var(--sub); } .reader h2 { font-family: var(--f-head); font-size: calc(44px * var(--read-scale)); line-height: 1.1; font-weight: var(--title-w); color: var(--ink); margin: 18px 0 26px; } /* Section headings are an uppercase kicker on every skin except Vellum, which sets them normal-case at 22px. */ .reader h3 { color: var(--accent); font-family: var(--f-head); font-size: calc(13px * var(--read-scale)); letter-spacing: .12em; text-transform: uppercase; font-weight: 600; margin: 34px 0 14px; } html[data-section="normal"] .reader h3 { font-size: calc(22px * var(--read-scale)); letter-spacing: 0; text-transform: none; } .reader p { /* --body-sz is already the absolute size the reader chose (php/skins.php, textsize_table). --read-scale sizes everything AROUND the text, not the text itself -- multiplying here would double-apply it. */ font-size: var(--body-sz); line-height: var(--body-lh); text-align: justify; hyphens: auto; margin: 0 0 1.1em; } /* ---- verses ------------------------------------------------------------- */ .verse { cursor: pointer; border-radius: 4px; transition: background .18s ease, box-shadow .18s ease; } .vnum { font-size: calc(10px * var(--read-scale)); font-weight: 500; color: var(--accent); /* vertical-align:top is deliberate and is part of the site's look: the number keys to the top of the LINE BOX rather than to the baseline, which at line-height 1.9 sets it high above the text. Kept -- but nudged back down, because unmodified it sat too far off. Do NOT "fix" this with a length vertical-align: a length is baseline-relative and loses the effect entirely (and a negative one moves the number DOWN, below the text). line-height:0 keeps it from stretching the line. Tune --vnum-drop. */ vertical-align: var(--vnum-align, top); position: relative; top: var(--vnum-drop, 1.3em); line-height: 0; margin-right: 3px; } .verse[data-hl] { padding: 1px 3px; margin: 0 -3px; } .verse[data-hl="amber"] { background: rgba(var(--hl-amber), var(--hl-a)); } .verse[data-hl="sage"] { background: rgba(var(--hl-sage), var(--hl-a)); } .verse[data-hl="sky"] { background: rgba(var(--hl-sky), var(--hl-a)); } .verse[data-hl="rose"] { background: rgba(var(--hl-rose), var(--hl-a)); } /* Same ring as :focus-visible above, deliberately. This was an INSET box-shadow, which hugs the glyphs with no breathing room and reads as cramped next to the outline a bracket step produces -- so clicking a verse and stepping to it looked like two different states. outline sits OUTSIDE the box and does not affect layout, so nothing shifts when it appears. */ .verse[data-selected] { outline: 2px solid var(--accent); outline-offset: 2px; } /* Bookmark marker — the CSS-drawn pennant from the handoff spec: a notched flag, no icon font. Preferred over bi-bookmark-fill, which reads heavier and fights the button's flex centring with its baseline alignment. */ .pennant { display: inline-block; width: 7px; height: 10px; margin-left: 3px; background: var(--accent); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 72%, 0 100%); } /* In a toolbar button: a touch smaller than the inline marker, no margin, and nothing to offset it — .icon-btn is a flex box, so a plain block centres exactly. */ .icon-btn .pennant { width: calc(8px * var(--ui-scale)); height: calc(11px * var(--ui-scale)); margin: 0; } .chap-nav { display: flex; justify-content: space-between; margin-top: 50px; padding-top: 20px; border-top: 1px solid var(--rule); font-size: calc(14px * var(--read-scale)); } .chap-nav a { color: var(--sub); text-decoration: none; } .chap-nav a:hover { color: var(--accent); } /* ---- overlays ----------------------------------------------------------- * * The menu, study drawer, book picker and search palette are Bootstrap * offcanvas/modal components. Bootstrap owns their backdrop, animation, focus * trap and Esc handling; css/skin-bridge.css tints them to the active skin. * Only the pieces Bootstrap has no equivalent for live here. */ .nav-row { display: flex; align-items: center; gap: 10px; padding: calc(10px * var(--ui-scale)) calc(12px * var(--ui-scale)); border-radius: 8px; color: var(--ink); text-decoration: none; font-size: calc(15px * var(--ui-scale)); } .nav-row:hover { background: var(--hover); } .nav-row[aria-current] { background: var(--hover); } .status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); } .badge { margin-left: auto; font-family: var(--mono); font-size: 10px; padding: 1px 6px; border-radius: 999px; background: var(--hover); color: var(--sub); } .card { /* Bootstrap owns .card too, and makes it display:flex/column. In a flex container every ELEMENT child becomes its own flex item on its own line, so a link or an mid-sentence broke out of the prose while the bare text around it stayed put -- the lecture link in the Genesis 1 notes sat on a line of its own. Ours is a block of running text, not a layout box. */ display: block; background: var(--paper); border: 1px solid var(--rule); border-radius: 12px; padding: 14px; margin-bottom: 10px; } /* The reference sits on its own line above the entry. It used to do this by accident -- Bootstrap's .card is display:flex, so every child broke onto a line of its own -- which read well for the ref and badly for everything else, since a link or an mid-sentence broke out of the prose too. The card is block flow now and only the ref is asked to break. */ .card .ref { display: block; margin-bottom: .25em; font-family: var(--mono); font-size: calc(11px * var(--read-scale)); color: var(--accent); } /* Count pill on a Bootstrap nav-tab. */ .count { font-size: 10px; margin-left: 5px; padding: 1px 5px; border-radius: 999px; background: var(--hover); } .empty { text-align: center; color: var(--sub); font-size: 13px; padding: 34px 0; } .empty::before { content: ""; display: block; width: 40px; height: 40px; margin: 0 auto 12px; border: 1px dashed var(--rule); border-radius: 50%; } .book-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; margin-bottom: 22px; } .book-btn { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; padding: 9px 11px; background: transparent; border: 1px solid var(--rule); border-radius: 8px; color: var(--ink); font-family: var(--f-body); font-size: 14px; text-align: left; cursor: pointer; } .book-btn:hover { background: var(--hover); } .book-btn[data-current] { border-color: var(--accent); } .book-btn .n { font-family: var(--mono); font-size: 10px; color: var(--sub); } .chap-grid { display: grid; grid-template-columns: repeat(auto-fill, 44px); gap: 8px; } .chap-cell { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--rule); border-radius: 8px; background: transparent; color: var(--ink); font-family: var(--mono); font-size: 13px; text-decoration: none; cursor: pointer; } .chap-cell:hover { background: var(--hover); } .chap-cell[data-current] { background: var(--accent); color: var(--paper); border-color: var(--accent); } /* ---- verse tools bar ---------------------------------------------------- */ .tools-bar { position: fixed; z-index: 35; left: 50%; bottom: -90px; display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: var(--panel); border: 1px solid var(--rule); border-radius: 14px; box-shadow: var(--elev); transform: translateX(-50%); transition: bottom .34s cubic-bezier(.4,.01,.2,1); } .tools-bar[data-open] { bottom: 28px; } .swatch { width: 22px; height: 22px; border: 2px solid transparent; border-radius: 6px; cursor: pointer; } .swatch[aria-pressed="true"] { border-color: var(--ink); } .swatch-amber { background: rgba(var(--hl-amber), var(--hl-a)); } .swatch-sage { background: rgba(var(--hl-sage), var(--hl-a)); } .swatch-sky { background: rgba(var(--hl-sky), var(--hl-a)); } .swatch-rose { background: rgba(var(--hl-rose), var(--hl-a)); } .btn-accent { padding: 7px 14px; background: var(--accent); color: var(--paper); border: 0; border-radius: 8px; font-family: var(--f-body); font-size: 14px; cursor: pointer; } .link-btn { background: none; border: 0; padding: 0; color: var(--sub); font-family: var(--f-body); font-size: 14px; cursor: pointer; } .link-btn:hover { color: var(--accent); } /* ---- alerts ------------------------------------------------------------- */ .alert { max-width: 660px; margin: 40px auto; padding: 16px 18px; border: 1px solid var(--rule); border-left: 3px solid var(--accent); border-radius: 8px; background: var(--panel); font-size: 15px; } @media (max-width: 640px) { .toolbar { padding: 12px 16px; } .reader { padding: 40px 20px 140px; } .reader h2 { font-size: 34px; } } /* ---- themes.php: badges + scoped demo ----------------------------------- */ .theme-badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-bottom: 30px; } .theme-badge { display: flex; flex-direction: column; gap: 5px; padding: 14px 16px; border: 1.5px solid var(--rule); border-radius: 12px; background: var(--panel); color: var(--ink); text-decoration: none; } .theme-badge:hover { background: var(--hover); } .theme-badge.is-preview { border-color: var(--accent); } /* Twice the toolbar chip's 9px — this page is where the choice is made, so the palette should be legible, not a hint. .dot elsewhere stays small. */ .theme-dots { display: flex; gap: 5px; } .theme-dots .dot { width: 18px; height: 18px; border-radius: 4px; } .theme-name { font-family: var(--f-head); font-size: 16px; } .theme-pair { font-size: 10px; color: var(--sub); } .theme-flag { align-self: flex-start; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); } /* The demo carries its OWN tokens inline, so everything inside resolves to the previewed skin rather than the active one. Do not use --paper etc. outside this block expecting the page's values. */ .theme-demo { border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; background: var(--paper); margin-bottom: 18px; } .theme-demo-bar { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; background: var(--panel); border-bottom: 1px solid var(--rule); } .theme-demo-page { padding: 26px 30px 30px; background: var(--paper); } .theme-demo-meta { display: flex; justify-content: space-between; font-size: 10px; margin-bottom: 12px; } .theme-demo-title { font-family: var(--f-head); font-size: 30px; line-height: 1.1; font-weight: var(--title-w); color: var(--ink); margin: 0 0 12px; } /* Matches the reader: an uppercase kicker on every skin except Vellum. */ .theme-demo-section { color: var(--accent); font-family: var(--f-head); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; margin-bottom: 12px; } .theme-demo[data-section="normal"] .theme-demo-section { font-size: 19px; letter-spacing: 0; text-transform: none; } .theme-demo-body { font-family: var(--f-body); font-size: var(--body-sz); line-height: var(--body-lh); color: var(--ink); text-align: justify; hyphens: auto; margin: 0 0 16px; } .theme-demo-v { font-family: var(--mono); font-size: 10px; font-weight: 500; color: var(--accent); /* Must track .vnum exactly -- this is the theme preview, and a preview that positions verse numbers differently from the reader is lying. */ vertical-align: var(--vnum-align, top); position: relative; top: var(--vnum-drop, 1.3em); line-height: 0; margin-right: 3px; } .theme-demo-hl { background: rgba(var(--hl-amber), var(--hl-a)); border-radius: 4px; padding: 1px 3px; margin: 0 -3px; } .theme-demo-card { background: var(--panel); border: 1px solid var(--rule); border-radius: 10px; padding: 11px 13px; font-family: var(--f-body); } .theme-demo-nav { display: flex; justify-content: space-between; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--rule); font-size: 11px; color: var(--sub); } .theme-apply { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 40px; } /* ---- themes.php: text-size picker --------------------------------------- */ .size-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; } .size-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 108px; padding: 12px 14px; border: 1.5px solid var(--rule); border-radius: 12px; background: var(--panel); color: var(--ink); cursor: pointer; } .size-btn:hover { background: var(--hover); } .size-btn.is-on { border-color: var(--accent); } /* The sample is sized inline per step, so the buttons themselves show the difference rather than describing it. */ .size-sample { font-family: var(--f-head); line-height: 1.1; } .size-name { font-size: 14px; } .size-px { font-size: 11px; color: var(--sub); } /* ---- book navigation in the left column --------------------------------- */ /* Sticks alongside the reading column and scrolls on its own, so long book lists never push the page height around. */ .booknav { /* Scrolling lives on .reader-aside-left (see the xl rule below), not here. Sticky on THIS element never worked: its parent is only as tall as the nav itself, so there was no room to stick within and it scrolled away with the page -- unlike .reader-aside-right, which is sticky on the column and therefore has the whole row height to work with. */ padding: 16px 18px 24px; background: var(--panel); border: 1px solid var(--rule); border-radius: 12px; } .booknav-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } /* Narrower than the modal it replaces, so books stay two-up in a 1/3 column. */ .booknav .book-grid { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); } .booknav .chap-grid { grid-template-columns: repeat(auto-fill, 38px); } .booknav .chap-cell { width: 38px; height: 38px; } /* ---- book navigation: sectioned list, after the wiki's nsv:sidebar ------- */ .booknav-section { font-family: var(--f-head); font-size: calc(13px * var(--read-scale)); font-weight: 600; color: var(--accent); letter-spacing: .04em; margin: 18px 0 6px; padding-bottom: 4px; border-bottom: 1px solid var(--rule); } .booknav-section:first-child { margin-top: 0; } .booklist { list-style: none; margin: 0 0 4px; padding: 0; } .book-row { display: grid; grid-template-columns: 1fr auto; gap: 0 8px; width: 100%; padding: 6px 8px; background: transparent; border: 0; border-radius: 7px; color: var(--ink); font-family: var(--f-body); text-align: left; cursor: pointer; } .book-row:hover { background: var(--hover); } .book-row[data-current] { background: var(--hover); box-shadow: inset 2px 0 0 var(--accent); } .book-row-main { display: flex; align-items: baseline; gap: 7px; min-width: 0; } .book-name { font-size: calc(14px * var(--read-scale)); } /* The Hebrew sits inline beside the English name, right-to-left. */ .book-heb { font-size: calc(13px * var(--read-scale)); color: var(--sub); white-space: nowrap; } /* Transliteration + meaning, on their own line under the name. */ .book-gloss { grid-column: 1 / -1; font-size: calc(10.5px * var(--read-scale)); color: var(--sub); line-height: 1.35; } .book-n { font-size: calc(10px * var(--read-scale)); color: var(--sub); align-self: start; } /* One book per row now, so the old two-up grid override no longer applies. */ .booknav .book-grid { display: block; } /* ---- book navigation: stages -------------------------------------------- */ .booknav-section.is-link { display: flex; justify-content: space-between; align-items: baseline; width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--rule); cursor: pointer; text-align: left; } .booknav-section.is-link:hover { color: var(--ink); } .booknav-back { background: none; border: 0; padding: 0 0 10px; color: var(--sub); font-family: var(--f-body); font-size: calc(13px * var(--read-scale)); cursor: pointer; } .booknav-back:hover { color: var(--accent); } .booknav-book { margin-bottom: 16px; } .booknav-book-head { display: flex; align-items: baseline; gap: 7px; margin-bottom: 2px; } .booknav-book-head .book-name { font-weight: 600; } /* The chapter run: every chapter of the book, as the wiki lists them. */ .chap-run { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; } .chap-run .chap-cell { width: auto; min-width: calc(26px * var(--read-scale)); height: auto; padding: 3px 6px; font-size: calc(11px * var(--read-scale)); border-radius: 5px; } .booknav-others { margin-top: 22px; padding-top: 12px; border-top: 1px solid var(--rule); } .booknav-other { display: block; width: 100%; padding: 5px 8px; margin-top: 2px; background: none; border: 0; border-radius: 6px; color: var(--ink); font-family: var(--f-body); font-size: calc(13px * var(--read-scale)); text-align: left; cursor: pointer; } .booknav-other:hover { background: var(--hover); } /* ---- wiki prose (section introductions) --------------------------------- */ .wikiprose h2, .wikiprose h3, .wikiprose h4 { font-family: var(--f-head); color: var(--ink); margin: 1.4em 0 .5em; } .wikiprose h2 { font-size: calc(22px * var(--read-scale)); } .wikiprose h3 { font-size: calc(17px * var(--read-scale)); color: var(--accent); } .wikiprose h4 { font-size: calc(15px * var(--read-scale)); } .wikiprose p { text-align: left; margin: 0 0 1em; } .wikiprose ul { margin: 0 0 1em 1.1em; padding: 0; } .wikiprose li { margin-bottom: .3em; } .wikiprose a { color: var(--accent); } /* A wiki link with no counterpart in the reader: keep the words, drop the affordance, so nothing looks clickable when it is not. */ .wikiprose .wiki-nolink { color: var(--ink); } .section-books { list-style: none; margin: 0; padding: 0; } .section-books .book-row { text-decoration: none; } /* ---- the flanking columns scroll independently of the reader ------------ */ /* Both asides stick to the viewport and scroll within themselves, so moving through a chapter never drags the navigation or the notes along with it. Sticky must sit on the COLUMN, which spans the row, not on an inner panel. Only from xl, where the three-column layout exists; below that everything is stacked and sticking would be wrong. */ @media (min-width: 1200px) { .reader-aside-left { position: sticky; top: var(--toolbar-h, 90px); max-height: calc(100vh - var(--toolbar-h, 90px) - 24px); overflow-y: auto; overscroll-behavior: contain; /* Required: see the note on .reader-aside-right below. */ align-self: flex-start; } } .reader-aside-right { /* top MUST match the toolbar's real height, which php/chrome.php measures into --toolbar-h. Any difference between where the column naturally sits and where it sticks appears as a jump of that many pixels the moment sticky engages. */ position: sticky; top: var(--toolbar-h, 90px); max-height: calc(100vh - var(--toolbar-h, 90px) - 24px); overflow-y: auto; /* Reaching the end of this panel must not start scrolling the page. */ overscroll-behavior: contain; /* REQUIRED, not cosmetic. These asides are grid columns inside a Bootstrap .row, which is display:flex with align-items:stretch -- so without this the column is stretched to the full row height, and a stretched flex item cannot stick. The stretch, the sticky offset and max-height then resolve slightly differently from frame to frame, which shows up as the columns jittering a couple of pixels as the reader scrolls. flex-start lets the column size to its content so sticky can do its job. */ align-self: flex-start; } .apparatus-panel { margin-bottom: 14px; border: 1px solid var(--rule); border-radius: 12px; background: var(--panel); overflow: hidden; } .apparatus-head { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 11px 14px; background: transparent; border: 0; color: var(--ink); font-family: var(--f-head); font-size: calc(13px * var(--read-scale)); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; } .apparatus-head:hover { background: var(--hover); } /* Chevron rotates with the collapse state, so the panel says which way it goes. */ .apparatus-head::after { content: ""; width: 7px; height: 7px; margin-left: 8px; border-right: 1.5px solid var(--sub); border-bottom: 1.5px solid var(--sub); transform: rotate(45deg); transition: transform .2s ease; } .apparatus-head[aria-expanded="false"]::after { transform: rotate(-45deg); } .apparatus-count { margin-left: auto; margin-right: 4px; font-size: calc(10px * var(--read-scale)); color: var(--sub); font-weight: 400; } .reader-aside-right .apparatus { padding: 0 12px 12px; } .reader-aside-right .card { margin-bottom: 8px; background: var(--paper); } /* Book-level material inside an apparatus section: commentary on the work rather than on a verse, so it reads as prose, not as a numbered card. */ .apparatus-block { margin: 0 0 18px; } .apparatus-block h4 { font-family: var(--f-head); font-size: calc(14px * var(--read-scale)); color: var(--accent); margin: 0 0 .4em; } .apparatus-block .wikiprose p { margin-bottom: .7em; } /* ---- small screens: a phone layout, not a stacked desktop one ------------ */ /* * Below xl the three columns stack, so several desktop behaviours become wrong * rather than merely different: * - sticky panels with their own scroll make no sense in a single column; * - the book nav must slide over the page, not push the chapter down; * - desktop's generous padding wastes scarce width. */ @media (max-width: 1199.98px) { /* The collapse is a DESKTOP affordance. Below xl the panel is an offcanvas, and opening it must always show the books -- otherwise a reader whose desktop state is collapsed opens the drawer to nothing. */ #bookNav.collapse:not(.show) { display: block; } #bookNav { height: auto !important; } /* The nav is an offcanvas here; drop the desktop panel chrome so it does not draw a card inside a drawer. */ .booknav-oc .booknav { position: static; max-height: none; overflow: visible; border: 0; border-radius: 0; padding: 0; background: transparent; } .booknav-oc .booknav-head { display: none; } /* the offcanvas has its own */ /* Bootstrap only styles .offcanvas-* at the breakpoint; give the panel the skin's surface so it is not white-on-white in a dark theme. */ .booknav-oc.offcanvas-xl { background: var(--panel); color: var(--ink); border-right: 1px solid var(--rule); } /* Apparatus reads as normal page sections once stacked: no sticking, no inner scrollbar, no fighting the page for the wheel. */ .reader-aside-right { position: static; max-height: none; overflow: visible; overscroll-behavior: auto; } .reader-aside { padding-top: 0; } .reader-grid .reader { padding: 34px 18px 90px; } /* The toolbar is the densest thing on a phone; let it wrap tidily. */ .toolbar { padding: 10px 14px; gap: 10px; } .toolbar-group { gap: 9px; } } /* Phones proper: the theme switcher is five chips wide and is the first thing to sacrifice. Themes remain reachable from the menu. */ @media (max-width: 575.98px) { .toolbar form[action$="do-skin.php"] { display: none !important; } .toolbar .divider { display: none; } .reader-grid .reader { padding: 26px 14px 80px; } } /* Chapter subheadings ("==== The First Day"). A step below the "===" section heading: same family, sentence case, not the uppercase accent kicker, so the two levels are distinguishable inside the reading column. */ .reader h4 { font-family: var(--f-head); font-size: calc(17px * var(--read-scale)); font-weight: 600; color: var(--ink); margin: 26px 0 10px; } /* Consecutive "===" headings (a book subtitle followed by a section title) should read as a pair, not as two separated blocks. */ .reader h3 + h3 { margin-top: -6px; } /* Headings hidden by the toolbar toggle. Only the headings go: each already closed its paragraph, so the prose keeps its breaks with the titles off. */ html[data-headings="off"] .reader h3, html[data-headings="off"] .reader h4 { display: none; } /* Without a heading between them the paragraphs need their own separation. */ html[data-headings="off"] .reader p + p { margin-top: 1.1em; } /* Headings toggle. The off state is dimmed so "something is switched off" reads at a glance rather than relying on telling the two glyphs apart. Card-heading/card-text were tried as the pair and may come back; if they do, only the two class names here and in php/chrome.php + index.php change. */ [data-headings-toggle] .bi-text-paragraph { color: var(--sub); opacity: .65; } /* ---- themes.php: verse-number height picker ----------------------------- */ .vnum-btn { min-width: 96px; } /* Each button previews the setting it selects: a scrap of verse at that height, with its own --vnum-align/--vnum-drop set inline. The line-height matters -- the line-box positions are measured against it, so a squashed sample would misrepresent them. */ .vnum-sample { display: block; font-family: var(--f-body); font-size: 17px; line-height: var(--body-lh); color: var(--ink); white-space: nowrap; } .vnum-sample .vnum { font-size: 9px; } /* themes.php: palettes on the left, reading controls on the right. The two are independent choices, so they sit side by side rather than as one long list. The badge grid narrows to suit its column; the control buttons wrap. */ .theme-cols .theme-badges { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); } .theme-cols .size-row { margin-bottom: 20px; } .theme-cols .size-btn { min-width: 84px; padding: 10px 12px; } .theme-cols .vnum-btn { min-width: 92px; } /* ---- search field -------------------------------------------------------- */ /* * ONE definition for both search inputs -- the modal (⌘K) and the search page. * They were styled inline in two places and drifted: the modal had no radius, * so the focus ring drew a square outline against the rounded field on the * results page. */ .search-field { flex: 1 1 auto; width: 100%; padding: 12px 14px; background: var(--panel); color: var(--ink); border: 1px solid var(--rule); border-radius: 10px; font-family: var(--f-body); font-size: 17px; } .search-field::placeholder { color: var(--sub); opacity: 1; } /* Focus ring follows the radius rather than the browser's square default. */ .search-field:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 .2rem rgba(var(--accent-rgb), .25); } /* The modal field sits in a flex header beside an icon and the esc chip. */ .modal-search .modal-header { gap: 10px; align-items: center; } /* ---- NSV constructs ------------------------------------------------------ */ /* * Defined by the wiki plugin (wiki-plugin/nsv/) and parsed by nsv_blocks() in * php/nsvlib.php. Three implementations of one grammar -- keep them in step, * and keep bible/docs/nsv-page-format.txt as the contract. * * These name what a passage IS, not how it looks, so each skin renders them in * its own colours rather than a fixed grey. */ .nsv-poetry { margin: .9em 0; padding-left: 1.2em; } /* Poetry is set as the printed bibles set it: one verse per line, and a HANGING INDENT so every line after the first sits in from the verse number. The negative text-indent pulls the first line back out to the margin; lines after a
keep the padding, which is what produces the indent. No white-space: pre-wrap -- the breaks are explicit
from the source, so source spacing should not leak into the setting. */ .nsv-poetry .verse { display: block; padding-left: 1.8em; text-indent: -1.8em; margin-bottom: .25em; } /* A verse of poetry reads as its own unit, so the numbers sit clear of the text rather than tight against it. */ .nsv-poetry .vnum { margin-right: 5px; } .nsv-citation { margin: .6em 0 .6em 1.2em; padding-left: 1em; border-left: 2px solid var(--rule); } .nsv-letter, .nsv-decree { margin: .8em 1.2em; padding: .7em 1em; border: 1px solid var(--rule); border-radius: 8px; background: var(--panel); } .nsv-decree { font-variant: small-caps; } .nsv-p { margin: 0 0 1em; } .nsv-selah { float: right; font-style: italic; color: var(--sub); } /* Footnote text, attached to the marker immediately before it. Written in the wiki source; see wiki-plugin/nsv/syntax/fn.php, which must agree with nsv_allowed_html() on this class name. Uses --sub so it recedes from the prose on every skin, light and dark. */ .nsv-fn { color: var(--sub); /* Plain em, NOT scaled by --read-scale: this IS text, and the em is already relative to a size --body-sz set. Multiplying double-applies. */ font-size: .88em; } .nsv-fn::before { content: "["; } .nsv-fn::after { content: "]"; } /* ---- click-to-focus ------------------------------------------------------- Select a verse and the apparatus narrows to that verse's material. The attribute is toggled per card in JS, because CSS cannot compare an attribute to a value known only at runtime. */ .apparatus .card[data-off], .apparatus .apparatus-block[data-off] { display: none; } /* A section with nothing for the focused verse is hidden outright, heading and all. Saying "nothing for this verse" in four panels at once was noisier than the silence it was meant to explain. */ .apparatus-panel[data-empty] { display: none; } .focus-bar { display: none; align-items: center; gap: .6em; margin: 0 0 .75em; padding: .4em .7em; border: 1px solid var(--rule); border-radius: .4em; background: var(--panel); font-size: calc(.9rem * var(--ui-scale, 1)); } .focus-bar[data-open] { display: flex; } .focus-bar .focus-bar-label { color: var(--sub); } .focus-bar .focus-bar-ref { font-weight: 600; } .focus-bar button { margin-left: auto; border: 1px solid var(--rule); border-radius: .3em; background: transparent; color: var(--ink); padding: .15em .6em; cursor: pointer; } /* ---- keyboard help ------------------------------------------------------ Bootstrap owns the modal shell; skin-bridge.css already tints it. Only the key list needs describing. */ .help-body .help-group { margin: 1.1em 0 .5em; font-family: var(--f-head); font-size: calc(12px * var(--ui-scale)); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); } .help-body .help-group:first-child { margin-top: 0; } /* Two columns: the key, then what it does. grid rather than a table so a long description wraps under itself and stays clear of the key. */ .help-keys { display: grid; grid-template-columns: max-content 1fr; gap: .45em .9em; margin: 0; align-items: baseline; } .help-keys dt { margin: 0; } .help-keys dd { margin: 0; color: var(--ink); } .help-body .kbd { display: inline-block; min-width: 2.2em; text-align: center; font-size: calc(12px * var(--ui-scale)); } .help-note { margin: 1.3em 0 0; padding-top: .9em; border-top: 1px solid var(--rule); color: var(--sub); font-size: calc(13px * var(--ui-scale)); line-height: 1.5; }