/* OpenLXX reader — theme + layout ported from the OpenLXX Prototype design */ :root{ --bg:#f4efe4;--surface:#fbf8f0;--ink:#2b2620;--soft:rgba(43,38,32,.58);--faint:rgba(43,38,32,.38); --line:#ddd3bf;--accent:#8c2f24;--accent-ink:#fff;--accent-soft:rgba(140,47,36,.08); --flag-bg:#f0e5c6;--panel:#f8f4e9; --reader-size:19px;--reader-font:'EB Garamond',Georgia,serif;--reader-leading:1.95; --serif:'EB Garamond',Georgia,serif;--greek:'Gentium Plus','EB Garamond',serif;--sans:Karla,sans-serif; } *{box-sizing:border-box} html,body{height:100%} body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--serif)} a{color:var(--accent);text-decoration:none}a:hover{opacity:.8} ::selection{background:var(--flag-bg)} button{font-family:inherit} .app{height:100vh;display:flex;flex-direction:column;background:var(--bg);color:var(--ink);overflow:hidden;position:relative} /* ===== header ===== */ .hdr{display:flex;align-items:center;gap:16px;padding:0 22px;height:60px;flex:none;border-bottom:1px solid var(--line);background:var(--surface);position:relative;z-index:40} .hdr .brand{font-family:var(--serif);font-size:23px;font-weight:600;letter-spacing:.01em;color:var(--ink)} .hdr .brand span{color:var(--accent)} .hdr .sep{width:1px;height:24px;background:var(--line)} .picker-btn{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:transparent;color:var(--ink);border-radius:20px;padding:6px 16px;font-family:var(--serif);font-size:16px;cursor:pointer} .picker-btn:hover{border-color:var(--faint)} .picker-btn .caret{font-size:10px;color:var(--soft)} .grow{flex:1} .seg{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;font-family:var(--sans);font-size:12.5px} .seg button{border:none;padding:7px 14px;cursor:pointer;background:transparent;color:var(--soft)} .seg button.on{background:var(--accent);color:var(--accent-ink)} /* translation switcher (links) */ .switch .sw{padding:7px 13px;font-family:var(--sans);font-size:12.5px;color:var(--soft);text-decoration:none;border-right:1px solid var(--line);white-space:nowrap} .switch .sw:last-child{border-right:none} .switch a.sw:hover{background:var(--accent-soft);color:var(--accent);opacity:1} .switch .sw.on{background:var(--accent);color:var(--accent-ink)} .switch .sw.off{color:var(--faint);cursor:not-allowed} .icon-btn{width:40px;height:32px;border:1px solid var(--line);color:var(--ink);background:transparent;border-radius:8px;font-family:var(--serif);font-size:15px;cursor:pointer;padding:0} .icon-btn:hover{border-color:var(--faint)} .icon-btn.on{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)} /* The nav is brand chrome, not reading canvas: pin it to the paper palette so it stays identical whatever reading theme is active. Overrides the themeable vars for this subtree only (reader.js sets them on ). */ .rnav, .rsubnav{ --bg:#f4efe4; --surface:#fbf8f0; --ink:#2b2620; --soft:rgba(43,38,32,.6); --faint:rgba(43,38,32,.42); --line:#ddd3bf; --accent:#8c2f24; --accent-ink:#fff; --accent-soft:rgba(140,47,36,.08); } /* ===== tier 1: shared global nav ===== */ .rnav{flex:none;display:flex;align-items:center;gap:24px;padding:11px 24px;border-bottom:1px solid var(--line);background:var(--surface);font-family:var(--sans);font-size:13.5px;position:relative;z-index:55} .rnav .brand{font-family:var(--serif);font-size:21px;font-weight:600;letter-spacing:.01em;color:var(--ink)} .rnav .brand span{color:var(--accent)} .rnav .rnav-links{margin-left:auto;display:flex;gap:22px;align-items:center} .rnav .rnav-links>a{color:var(--ink)} .rnav .rnav-links>a:hover{opacity:.7} .rnav .rnav-cta{background:var(--accent);color:var(--accent-ink);border-radius:8px;padding:8px 16px} .rnav .rnav-cta:hover{opacity:.9} .rdrop{position:relative} .rdrop .rdrop-t{border:none;background:transparent;font:inherit;color:var(--ink);cursor:pointer;padding:8px 0;display:flex;align-items:center;gap:5px} .rdrop .rcar{font-size:9px;color:var(--soft)} .rdrop-panel{display:none;position:absolute;top:100%;left:50%;transform:translateX(-50%);padding-top:10px;z-index:80} .rdrop:hover .rdrop-panel,.rdrop:focus-within .rdrop-panel{display:block} .rdrop-card{width:300px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 38px rgba(0,0,0,.18);overflow:hidden} .rdrop-item{display:flex;gap:12px;align-items:baseline;padding:13px 18px;color:var(--ink);border-bottom:1px solid var(--line)} .rdrop-item:last-child{border-bottom:none} .rdrop-item:hover{background:var(--accent-soft)} .rdrop-item .rn{font-family:var(--greek);font-size:12px;color:#c39030;width:20px;flex:none} .rdrop-item .rt{font-size:15px;font-weight:600;font-family:var(--serif)} .rdrop-item .rs{display:block;font-size:11px;color:var(--soft);margin-top:1px} .rnav-burger{display:none;position:relative;margin-left:auto} .rnav-burger summary{list-style:none;cursor:pointer;border:1px solid var(--line);border-radius:8px;padding:6px 11px;font-size:15px;line-height:1;color:var(--ink)} .rnav-burger summary::-webkit-details-marker{display:none} .rnav-burger[open] summary{border-color:var(--accent)} .rnav-bpanel{position:absolute;right:0;top:calc(100% + 8px);width:250px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 38px rgba(0,0,0,.18);z-index:90;overflow:hidden} .rnav-bpanel a{display:block;padding:12px 18px;color:var(--ink);border-bottom:1px solid var(--line);font-size:14px} .rnav-bpanel a:last-child{border-bottom:none} .rnav-bpanel .rnav-lab{padding:10px 18px 4px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)} /* ===== tier 2: reader sub-nav ===== */ .rsubnav{flex:none;display:flex;align-items:center;gap:14px;padding:8px 22px;border-bottom:1px solid var(--line);background:var(--bg);position:relative;z-index:48} .rsubnav-mid{flex:1;display:flex;justify-content:center;min-width:0} .rsubnav .edbar{justify-content:center} .rsubnav .picker-btn,.rsubnav .icon-btn{flex:none} /* ===== picker popover (book/chapter) ===== */ .pop{position:absolute;z-index:60;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 32px rgba(0,0,0,.16)} .pop[hidden]{display:none} .picker-pop{top:104px;left:22px;width:560px;max-width:calc(100vw - 40px);max-height:70vh;display:flex;overflow:hidden} .picker-books{width:210px;flex:none;overflow-y:auto;border-right:1px solid var(--line);padding:8px} .picker-books button{display:block;width:100%;text-align:left;border:none;background:transparent;color:var(--ink);font-family:var(--serif);font-size:15px;padding:7px 12px;border-radius:7px;cursor:pointer} .picker-books button:hover{background:var(--accent-soft)} .picker-books button.on{background:var(--accent);color:var(--accent-ink)} .picker-chapters{flex:1;overflow-y:auto;padding:14px} .picker-chapters .pc-title{font-family:var(--sans);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-bottom:10px} .ch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(42px,1fr));gap:6px} .ch-grid .ch-cell{display:block;text-align:center;text-decoration:none;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:7px;padding:8px 0;font-family:var(--sans);font-size:13px;cursor:pointer} .ch-grid .ch-cell:hover{border-color:var(--accent);color:var(--accent);opacity:1} .ch-grid .ch-cell.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)} /* ===== settings popover ===== */ .prefs-pop{top:104px;right:22px;width:300px;padding:18px 20px 20px;display:flex;flex-direction:column;gap:16px} .prefs-pop .row{display:flex;flex-direction:column;gap:8px} .prefs-pop .row-head{display:flex;align-items:center} .prefs-label{font-family:var(--sans);font-size:11.5px;color:var(--soft)} .prefs-title{font-family:var(--sans);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)} .x-btn{border:none;background:transparent;color:var(--soft);font-size:14px;cursor:pointer;padding:2px 4px;margin-left:auto} .opt-row{display:flex;gap:8px} .opt{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 0;cursor:pointer;border-radius:9px;border:1px solid var(--line);background:transparent;color:var(--ink);font-family:var(--sans);font-size:10px} .opt .big{font-family:var(--serif);font-size:16px} .opt.on{border:2px solid var(--accent)} .size-row{display:flex;align-items:center;gap:14px} .size-row button{width:40px;height:32px;border:1px solid var(--line);border-radius:8px;background:transparent;color:var(--ink);font-family:var(--serif);cursor:pointer} .size-row button:hover{border-color:var(--faint)} .size-row .size-val{flex:1;text-align:center;font-family:var(--sans);font-size:12px;color:var(--soft)} /* ===== main / reader ===== */ .main{flex:1;min-height:0;overflow-y:auto;position:relative} .reader{max-width:660px;margin:0 auto;padding:44px 56px 120px} .reader.triple{max-width:1180px} /* ===== triple parallel view ===== */ .triple-heads,.reader.triple .v{display:grid;grid-template-columns:34px 1fr 1fr 1fr;gap:26px} .triple-heads{padding-bottom:12px;margin-bottom:8px;border-bottom:1px solid var(--line);align-items:end} .triple-heads .tcol{font-family:var(--sans);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--soft)} .reader.triple .v{padding:10px 0;align-items:start} .reader.triple .v.para{margin-top:8px} .reader.triple .tnum{font-family:var(--sans);font-size:11px;color:var(--faint);padding-top:4px} .reader.triple .tcell{font-size:calc(var(--reader-size) - 1px);line-height:1.72;font-family:var(--reader-font)} .reader.triple .tcell.grk{font-family:var(--greek);color:var(--soft)} .reader.triple .tcell .miss{color:var(--faint)} .reader.triple .tlabel{display:none} /* ===== multi-column compare reader ===== */ .reader.multi{max-width:1180px} .reader.multi.cols-1{max-width:720px} /* one column needs no header row to tell columns apart */ .reader.multi.cols-1 .phead{display:none} .reader.multi.cols-2{max-width:960px} .reader.multi.cols-3{max-width:1180px} .reader.multi.cols-4{max-width:1460px} .reader.multi.cols-5{max-width:1680px} .phead{display:flex;gap:26px;padding:14px 0 12px;margin-bottom:8px;border-bottom:1px solid var(--line);align-items:end;position:sticky;top:0;z-index:20;background:var(--bg);box-shadow:0 8px 14px -10px rgba(0,0,0,.18)} .phead .pnum{flex:0 0 30px} .phead .pcol{flex:1 1 0;min-width:0;display:none;flex-direction:column;gap:2px} .phead .pcol.vis{display:flex} .phead .pcol .pcol-name{font-family:var(--sans);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--soft)} .phead .pcol .pcol-tag{font-family:var(--sans);font-size:9px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint)} .prow{display:flex;gap:26px;padding:10px 0;align-items:start} .prow.para{margin-top:8px} .prow .pnum{flex:0 0 30px;font-family:var(--sans);font-size:11px;color:var(--faint);padding-top:4px} .pcell{flex:1 1 0;min-width:0;font-size:calc(var(--reader-size) - 1px);line-height:1.72;font-family:var(--reader-font);display:none} .pcell.vis{display:block} .pcell.grk{font-family:var(--greek);color:var(--soft)} .pcell .miss{color:var(--faint)} .pcell .tlabel{display:none} .reader.multi .prow.hlv{box-shadow:0 0 0 8px var(--flag-bg)} /* edition toggle strip below the nav */ .edbar-wrap{flex:none;display:flex;justify-content:center;padding:9px 22px;border-bottom:1px solid var(--line);background:var(--surface);position:relative;z-index:35} .edbar-wrap .edbar{max-width:1180px;width:100%;justify-content:center} /* edition toggle bar (built by reader.js) */ .edbar{display:flex;gap:5px;flex-wrap:wrap;align-items:center;justify-content:center} .edbar .edpill{border:1px solid var(--line);background:transparent;color:var(--soft);border-radius:20px;padding:6px 12px;font-family:var(--sans);font-size:12px;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:6px} .edbar .edpill:hover{border-color:var(--faint)} .edbar .edpill .dot{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.4} .edbar .edpill.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)} .edbar .edpill.on .dot{opacity:.85} .edbar .edbar-lead{font-family:var(--sans);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);margin-right:6px} .edbar .edbar-div{width:1px;align-self:stretch;background:var(--line);margin:2px 5px} /* hover tooltip (pills + column headers) */ .tip{position:relative} .tip::after{content:attr(data-tip);position:absolute;left:50%;top:calc(100% + 8px);transform:translateX(-50%) translateY(4px);width:max-content;max-width:220px;white-space:normal;text-align:center;background:var(--ink);color:var(--surface);font-family:var(--sans);font-size:11px;line-height:1.4;letter-spacing:0;text-transform:none;padding:7px 11px;border-radius:8px;box-shadow:0 8px 22px rgba(0,0,0,.22);opacity:0;pointer-events:none;transition:opacity .12s ease,transform .12s ease;z-index:80} .tip:hover::after,.tip:focus-visible::after{opacity:1;transform:translateX(-50%) translateY(0)} /* keep the rightmost pill's tooltip from spilling past the viewport edge */ .edbar .edpill.tip:last-child::after{left:auto;right:0;transform:translateY(4px)} .edbar .edpill.tip:last-child:hover::after{transform:translateY(0)} /* ===== chapter masthead / opening ===== */ .ch-masthead{border-bottom:1px solid var(--line);padding-bottom:22px;margin-bottom:30px} .ch-crumb{font-family:var(--sans);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);margin-bottom:14px;display:flex;align-items:center;gap:8px;flex-wrap:wrap} .ch-crumb a{color:var(--soft)} .ch-crumb a:hover{color:var(--accent);opacity:1} .ch-crumb .crumb-sep{color:var(--faint);opacity:.6} .ch-theme{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--accent);margin-bottom:7px} .ch-masthead h1{margin:0;font-size:36px;font-weight:500;letter-spacing:.01em;line-height:1.05} .ch-summary{margin:14px 0 0;font-size:17px;line-height:1.62;color:var(--soft);max-width:64ch;text-wrap:pretty} .ch-about{margin:16px 0 0;font-family:var(--sans);font-size:12.5px} .ch-about>summary{cursor:pointer;color:var(--soft);list-style:none;display:inline-flex;align-items:center;gap:6px;letter-spacing:.02em} .ch-about>summary::-webkit-details-marker{display:none} .ch-about>summary::before{content:"\203A";display:inline-block;transition:transform .15s ease;color:var(--faint)} .ch-about[open]>summary::before{transform:rotate(90deg)} .ch-about>summary:hover{color:var(--accent)} .ch-about-body{margin-top:10px;color:var(--soft);line-height:1.65;max-width:72ch;font-size:13px} .compare-heads{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin:0 0 20px;border-bottom:1px solid var(--line);padding-bottom:10px} .compare-heads .ch{font-family:var(--sans);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--soft)} .nonverse{font-family:var(--sans);font-size:12.5px;color:var(--soft);font-style:italic;margin:0 0 18px;line-height:1.6} .v{margin-bottom:2px} .v.para{margin-top:16px} .vtext{margin:0;font-size:var(--reader-size);line-height:var(--reader-leading);font-family:var(--reader-font)} .vnum{font-family:var(--sans);font-size:10px;color:var(--faint);margin-right:5px;vertical-align:baseline} .vnum.click{cursor:pointer} .vnum.click:hover{color:var(--accent)} /* verse deep-link highlight */ .reader .v.hlv{background:var(--flag-bg);border-radius:4px;box-shadow:0 0 0 5px var(--flag-bg);transition:background .25s ease,box-shadow .25s ease} .reader.triple .v.hlv{box-shadow:0 0 0 8px var(--flag-bg)} .greek-block{margin:8px 0 16px;border-left:2px solid var(--line);padding:6px 0 6px 16px} .greek-block .glabel{font-family:var(--sans);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-bottom:4px} .greek-block p{margin:0;font-family:var(--greek);font-size:calc(var(--reader-size) - 2px);line-height:1.9;color:var(--soft)} .cmp-row{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-bottom:10px} .cmp-row .col-b{border-left:1px solid var(--line);padding-left:26px;margin-left:-26px} .cmp-row .missing{color:var(--faint);font-style:italic} .ch-nav{display:flex;align-items:center;gap:14px;margin-top:44px;border-top:1px solid var(--line);padding-top:20px} .ch-nav .navbtn{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:10px;padding:11px 18px;font-family:var(--sans);font-size:13px;cursor:pointer;text-decoration:none;display:inline-block} .ch-nav a.navbtn:hover{border-color:var(--accent);color:var(--accent);opacity:1} .ch-nav .navbtn.disabled{opacity:.35;cursor:default} .ch-nav .spacer{flex:1} .ch-nav .backhome{font-family:var(--sans);font-size:12.5px;color:var(--soft)} /* ===== verse page (SSR) ===== */ .reader.verse-page{max-width:760px} .verse-focus{display:flex;flex-direction:column;gap:0;border:1px solid var(--line);border-radius:14px;background:var(--surface);overflow:hidden;margin-bottom:8px} .verse-focus .vf-item{padding:20px 26px;border-bottom:1px solid var(--line)} .verse-focus .vf-item:last-child{border-bottom:none} .vf-label{font-family:var(--sans);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:8px} .vf-text{font-size:calc(var(--reader-size) + 2px);line-height:1.6;font-family:var(--reader-font)} .vf-text.grk{font-family:var(--greek);color:var(--soft)} .vf-text .miss{color:var(--faint);font-style:italic;font-size:15px} .reader.verse-page .picker-btn,.hdr a.picker-btn{text-decoration:none} .loading,.errbox{max-width:660px;margin:80px auto;text-align:center;font-family:var(--sans);color:var(--soft);font-size:15px;line-height:1.6} .errbox a{font-family:var(--sans)} /* ===== verse-compare side panel ===== */ .aside{position:fixed;top:60px;right:0;bottom:0;width:380px;max-width:88vw;background:var(--panel);border-left:1px solid var(--line);overflow-y:auto;z-index:30;transform:translateX(100%);transition:transform .18s ease} .aside.open{transform:none;box-shadow:-14px 0 40px rgba(0,0,0,.08)} .aside .a-head{display:flex;align-items:baseline;gap:10px;padding:18px 22px 14px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--panel)} .aside .a-head .ref{font-size:20px;font-weight:500} .aside .a-head .sub{font-family:var(--sans);font-size:11px;color:var(--soft)} .aside .a-body{padding:16px 22px 40px;display:flex;flex-direction:column;gap:14px} .aside .a-item .src{font-family:var(--sans);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin-bottom:5px} .aside .a-item .val{font-size:16px;line-height:1.6} .aside .a-item .val.grk{font-family:var(--greek)} .aside .a-item{border-bottom:1px solid var(--line);padding-bottom:14px} .aside .a-item:last-child{border-bottom:none} .aside .a-note{font-family:var(--sans);font-size:11.5px;color:var(--soft);line-height:1.55} @media (max-width:900px){ .hdr{gap:10px;padding:0 14px;flex-wrap:nowrap;overflow-x:auto} .hdr .brand{font-size:20px} .rnav{gap:12px;padding:10px 14px} .rnav .rnav-links{display:none} .rnav-burger{display:block} /* subnav: book picker + Aa on row 1, translation pills on a full-width row 2 */ .rsubnav{padding:8px 12px 10px;gap:9px 10px;flex-wrap:wrap} .rsubnav .picker-btn{order:1} .rsubnav .icon-btn{order:2;margin-left:auto} .rsubnav-mid{order:3;flex-basis:100%;justify-content:center;min-width:0} .rsubnav .edbar{flex-wrap:wrap;justify-content:center;gap:6px} .rsubnav .edbar-lead{display:none} .rsubnav .edbar .edpill{padding:5px 10px;font-size:11.5px} .rsubnav .edbar .edbar-div{display:none} .picker-pop{top:128px;left:8px;right:8px;width:auto} .prefs-pop{top:128px} .reader{padding:32px 22px 120px} .reader.triple{max-width:660px} /* stack the three editions per verse, with labels */ .triple-heads{display:none} .reader.triple .v{display:block;border-bottom:1px solid var(--line);padding:16px 0} .reader.triple .tnum{display:inline-block;margin-bottom:4px;font-weight:700} .reader.triple .tcell{display:block;margin-top:10px} .reader.triple .tlabel{display:block;font-family:var(--sans);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:3px} /* stack the compare columns per verse, with labels */ .reader.multi,.reader.multi.cols-1,.reader.multi.cols-2,.reader.multi.cols-3,.reader.multi.cols-4,.reader.multi.cols-5{max-width:660px} .phead{display:none} .prow{display:block;border-bottom:1px solid var(--line);padding:16px 0} .prow .pnum{display:inline-block;margin-bottom:4px;font-weight:700} .pcell{margin-top:10px} .pcell.vis{display:block} .pcell .tlabel{display:block;font-family:var(--sans);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:3px} .compare-heads,.cmp-row{grid-template-columns:1fr;gap:8px} .cmp-row .col-b{border-left:none;padding-left:0;margin-left:0;padding-top:6px} .picker-pop{left:8px;right:8px;width:auto} .switch .sw{padding:7px 10px} .edbar{justify-content:flex-start} } /* ===== shared site footer (reader surfaces) ===== */ footer.sitefoot{background:var(--ink);color:rgba(234,226,208,.55);border-top:1px solid rgba(234,226,208,.15)} .sitefoot .sf-row{max-width:1040px;margin:0 auto;padding:22px 26px;display:flex;align-items:baseline;gap:18px;font-family:var(--sans);font-size:12px;flex-wrap:wrap} .sitefoot .sf-brand{font-size:15px;color:var(--cream)} .sitefoot .sf-brand span{color:var(--gold)} .sitefoot .sf-lab{color:rgba(234,226,208,.4)} .sitefoot a{color:rgba(234,226,208,.7)} .sitefoot .sf-gap{flex:1}